8404cee664
* refactor(design-jsx): extract design JSX into its own package Design JSX elements, helpers, schema, reference, and JSX export only need the scene graph, yet lived in Core, so every consumer of the authoring API pulled in the renderer, layout, and file formats. @open-pencil/design-jsx now owns them and depends only on scene-graph. The renderer takes icon lookup, SVG conversion, vector creation, and layout as DesignJSXServices; Core binds its own and exports the bound renderJSX and renderTree from @open-pencil/core/design-jsx. * feat(design-jsx): export the JSX runtime for TSX authoring The package already had a JSX runtime, but nothing exported it, so design trees could only be written as function calls or JSX strings. Export `./jsx-runtime` and `./jsx-dev-runtime` so `jsxImportSource` works, and make `Fragment` produce the same empty-type node as `<>` in `renderJSX` strings. * fix(design-jsx): render fragments nested in other elements A fragment builds a node with an empty type, which only renderJSX expanded, and only at the root. Nested fragments and fragments passed to renderTree failed with 'Unknown element: <>'. Inline fragment children when trees are built, and share root expansion between renderTree and renderJSX.
40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import { describe, expect, test } from 'bun:test'
|
|
|
|
import { DESIGN_JSX_SUPPORTED_PROPERTIES, transformDesignJSXExpression } from '#design-jsx/index'
|
|
|
|
describe('Design JSX schema', () => {
|
|
test('includes renderer compatibility properties', () => {
|
|
for (const property of [
|
|
'name',
|
|
'columnGap',
|
|
'backgroundColor',
|
|
'cornerSmoothing',
|
|
'textDecoration',
|
|
'componentId'
|
|
]) {
|
|
expect(DESIGN_JSX_SUPPORTED_PROPERTIES.has(property)).toBe(true)
|
|
}
|
|
})
|
|
})
|
|
|
|
describe('Design JSX transform', () => {
|
|
test('transforms a JSX expression', () => {
|
|
const code = transformDesignJSXExpression('<Frame><Text>Hello</Text></Frame>')
|
|
expect(code).toContain('__h(Frame')
|
|
expect(code).toContain('__h(Text')
|
|
})
|
|
|
|
test('transforms declarations followed by a final expression', () => {
|
|
const code = transformDesignJSXExpression(
|
|
`const Card = ({ title }) => <Text>{title}</Text>
|
|
<Card title="Hello" />`
|
|
)
|
|
expect(code).toContain('const Card')
|
|
expect(code).toContain('return (__h(Card')
|
|
})
|
|
|
|
test('rejects declarations without a final expression', () => {
|
|
expect(() => transformDesignJSXExpression('const value = 1')).toThrow()
|
|
})
|
|
})
|