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.
30 lines
979 B
Markdown
30 lines
979 B
Markdown
# @open-pencil/emit
|
|
|
|
How OpenPencil's exporters emit source code. Build JavaScript, TypeScript, and JSX as ESTree nodes and print them with [esrap](https://github.com/sveltejs/esrap), instead of concatenating strings.
|
|
|
|
```ts
|
|
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:
|
|
|
|
```ts
|
|
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';
|
|
```
|