9b418de13e
* refactor(codegen): share syntax-tree code generation between exporters dom-css printed Tailwind JSX with its own esrap JSX builders and kept TypeScript template helpers under its Storybook export. The OpenPencil JSX exporter needs the same JSX builders, and design-jsx and dom-css may not depend on each other. @open-pencil/codegen holds both: es for ESTree templates and modules (moved from dom-css) and jsx for JSX elements, attributes, text, and printing, including the literal rules that keep exported strings from being reinterpreted. dom-css no longer depends on acorn and esrap directly. * refactor(design-jsx): print JSX export as syntax trees sceneNodeToJSX concatenated strings with hand-written escaping and indentation. It now collects typed props (moved to export/props.ts) and prints them with @open-pencil/codegen's JSX builders. Output is unchanged except for text: special characters print as a string expression instead of entities, and multi-line text keeps its line breaks, which the old line-splitting lost on render. * docs(codegen): fix package metadata and dependency rules codegen's repository.directory still named design-jsx, the README mentioned es without showing it, and the design-jsx and dom-css guides still said they depend only on scene-graph. * test(core): move the JSX export round-trips to the design-jsx test home Covers tabs in layer names and text, which JSX keeps as written.
999 B
999 B
@open-pencil/codegen
Syntax-tree code generation for OpenPencil's exporters. Build JavaScript, TypeScript, and JSX as ESTree nodes and print them with esrap, instead of concatenating strings.
import { jsx } from '@open-pencil/codegen'
const card = jsx.element(
'Card',
[jsx.attribute('title', jsx.stringValue('Fish & chips'))],
[jsx.text('Hello')],
0,
true
)
jsx.printJSX(card) // <Card title={"Fish & chips"}>Hello</Card>
jsx.stringValue and jsx.text keep a value as plain JSX only when JSX reads it back unchanged; anything with quotes, entities, braces, angle brackets, backslashes, or line breaks becomes a string literal.
es parses TypeScript templates, fills $name placeholders, and prints modules:
import { es } from '@open-pencil/codegen'
const module = es.fill(es.parseModule("export const title = '$title'"), {
$title: es.string('Checkout')
})
es.printModule(module) // export const title = 'Checkout';