No runtime type checking with TypeScript components

[AnnMarieW]

While working with the dash-mantine-components library, I noticed that no helpful error messages are provided in the browser DevTools when an invalid prop is passed to a dmc component -- unlike with other Dash libraries like dash-core-components.

The issue arises because dmc components are built using TypeScript. They do not use propTypes which is how the runtime type checking is done in Dash. TypeScript is not available at runtime.

Here is an example:

import dash_mantine_components as dmc
from dash import Dash, dcc,_dash_renderer
_dash_renderer._set_react_version("18.2.0")

app = Dash()

app.layout = dmc.MantineProvider([
    dmc.RangeSlider(min="b"),
    dcc.RangeSlider(min="b")
])

if __name__ == "__main__":
    app.run(debug=True)

The first very helpful error message is for the dcc component (which does not use TypeScript), the second is the dmc component:

After discussing with the Plotly team, a solution could be to create a script that automatically adds propTypes to TypeScript components when running with debug=True. This script could use information from the metadata.json file, which already has details about the props and their types.