Even after npm build run, the python class is not being generated in the example_component directory. I can see the example_component.js file but no ExampleComponent.py . How to import the React component and run the python dash application?

When converting components which have props containing a hyphen, e.g. "aria-expanded", the generated Python class has "area-expander" in its parameters, which throws an invalid syntax error.

def __init__(self, children=None, value=Component.REQUIRED, aria-expanded=Component.UNDEFINED, **kwargs):
        self._prop_names = ['children', 'id', 'about', 'accessKey', 'aria-expanded', ]

SyntaxError: invalid syntax

I'm using this template to bridge https://primereact.org/multiselect/ into Dash but I'm running into issues with Icons not showing:

There's a reproducible example here: https://github.com/gofford/dash-primereact-app.

What I've found so far: the JS Console yields a series of 500 errors for the resource files corresponding to the icons (see [1]), but the files do appear to be available [2]. If I navigate directly to the expected path of the resource (from the stylesheet [3]), I get a DependencyException [4].

I have built this same component in JS using the "normal" cookiecutter template and the icons appear OK, but I need to use TS so that this component can co-exist with other components that have been built from scratch in TS.

Do you know how to remedy this, or if theres anything that I need to do differently during the build or in the webpack?

Figures

[1] 500 Error codes

[2] Files appear to exist

[3] Stylesheet URLs

In the "normal" (i.e. non-async) component template, there is an async option. Could a similar options be added to this repo?

When making a Dash component based on existing React TS component, it would be useful to be able to extend the component's interface instead of specifying each prop anew.

I believe this should work in principle but in practice when I try to inherit from the underlying component's interface, the result is an empty object.

Consider this dummy component:

import React from 'react'
import { DashComponentProps } from '../props'

type Props = {
    /**
     * Variant is the name of a variation of the button so that buttons can vary very variably.
     */
    variant: 'yellow' | 'green';
}
    & DashComponentProps
    & React.ButtonHTMLAttributes<HTMLButtonElement>  // <--- this is the problematic line


const Button = (props: Props) => {
    props.variant = "green"
    props.title = "foo bar"
    return <button {...props}>{props.children}</button>
}

Button.defaultProps = {}
export default Button

Building (yarn build) produces a Button class in Button.py with zero attributes. 😱

I have traced the issue to props = getPropInfo(propsType, defaultProps) line in extract-meta.js, but I'm kind of out of my depth WRT Typescript here.

My plan was to pick a few props from the original interface. For example, autofocus:

    & DashComponentProps
    & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'autoFocus'>

I was expecting this to add a autoFocus?: boolean | undefined; to the Prop type, but what I actually get from getPropInfo in extract-meta.js at that point is:

I would expect something like "type": {"name": "bool", "raw": "boolean"}
instead of "type":{"name": "shape", "value": Object, "raw": "ButtonHTMLAttributes<HTMLButtonElement>"}

Or am I doing something terribly wrong here?

getting error like -----
'webpack' is not recognized as an internal or external command,
operable program or batch file.

I followed the usage instructions step by step using all default values. And then in the generated project followed the README there, but npm run build fails with "sh: dash-generate-components: command not found".

Commands run:

python3 -m venv venv
. venv/bin/activate
pip install -r requirements.txt
npm install
npm run build

The template with proptypes uses style-loader and most using react will also need this.