* refactor: rename @open-pencil/codegen to @open-pencil/emit In design tools codegen means design-to-code, which is dom-css's job and Core's codegen tools'. The package builds and prints the syntax trees exporters emit, so name it for that. It has not been released yet. * fix: alias @open-pencil/emit to its source in Vite The rename missed the escaped regex, so Vite resolved the package through its built dist output.
1.3 KiB
1.3 KiB
DOM/CSS
DOM, CSS, HTML, JSX, and Tailwind projection between documents and SceneGraph, with browser and headless CSS runtimes. Sources are grouped by direction:
src/import/— HTML, CSS, JSX, and Tailwind to SceneGraph, including thejsx-runtimeentries and CSS value parsing.src/export/— SceneGraph to HTML, Tailwind JSX, and Storybook: projection, CSS formatting, the HTML bundle, and printers.src/export/index.tsis the./exportentry.src/runtime/— browser and headless CSS runtimes.src/tokens/— variables as design tokens: CSS custom property names, Tailwind namespaces fromtwirlwind, and units. Shared by both directions and exported from./export.
Rules:
- Depend only on
@open-pencil/scene-graphand@open-pencil/emit. Engine services such as web-font resolution come in as options; Core registers the HTML and Tailwind JSX formats (packages/core/AGENTS.md). - Keep the
./exportentry browser-safe: loadnode:*modules and the headless CSS object model lazily inside the functions that need them, so the app never bundles them. - Build generated code as syntax trees with
@open-pencil/emit(esfor TypeScript modules,jsxfor JSX), not string fragments. - Imported documents are untrusted: check Base64 with
js-base64'sisValidbefore decoding.