@monimesl/dot-renderer-react

Renders Dot pages with React. Every dot runs with this renderer. Dots get it through @monimesl/dot-runtime and never import it themselves.

How it draws

Each built-in component is a React component that draws plain elements with inline styles, in the colors and shape of the dot's theme. A small stylesheet, dist/styles.css, covers what inline styles can't do, such as keyframes and scroll bars. The compiler copies it into each dot as dot.css.

Five components use Base UI's headless parts for the focus, keyboard and screen-reader behaviour that is hard to get right: Sheet (and the sheet a Select opens), Tabs, Switch, Checkbox and RadioGroup. A sheet keeps focus inside it, closes on Escape and stops the page behind from scrolling. Fields link their hint or error to the control they describe.

Icons are Phosphor's bold artwork. A script generates them into the source at build time, from @phosphor-icons/core.

The theme

A dot sets scheme, colors and shape in defineDot. The colors are primary, background, surface and text, each for light and dark. The renderer fills in the rest of the palette (the neutrals and the status colors) from Dash's own look. useTheme() gives a component the resolved theme.

Only the components a dot uses

A dot's production build carries only the components its pages use. The compiler lists them from the pages, imports each one by name and makes the webview with createReactRenderer({ components }). The renderer is built as one file per module, with the libraries it bundles under dist/vendor/. So a dot's bundle can leave out a component, and anything only that component imports. A development build has every component, because a hot reload keeps the renderer the page already runs with.

reactRenderer(), the default export, makes a renderer with every built-in component. Pass components to add or replace some, and wrapper to wrap each page.

React

Hosts serve React, so dots don't bundle it. This package's build makes the React that hosts ship, in dist/react-host/<version>/. A dot's page imports it through an import map.