3e4e3d0b8b
* 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. |
||
|---|---|---|
| .. | ||
| scripts | ||
| src | ||
| tests | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
| tsdown.config.ts | ||
@open-pencil/emit
How OpenPencil's exporters emit source code. Build JavaScript, TypeScript, and JSX as ESTree nodes and print them with esrap, instead of concatenating strings.
import { jsx } from '@open-pencil/emit'
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/emit'
const module = es.fill(es.parseModule("export const title = '$title'"), {
$title: es.string('Checkout')
})
es.printModule(module) // export const title = 'Checkout';