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.
55 lines
1.9 KiB
TypeScript
55 lines
1.9 KiB
TypeScript
import { expect, test } from 'bun:test'
|
|
|
|
import { renderTree } from '@open-pencil/core/design-jsx'
|
|
import { Component, ComponentSet, Instance, Text } from '@open-pencil/design-jsx'
|
|
import type { ComponentPropertyDefinition } from '@open-pencil/scene-graph'
|
|
|
|
import { getNodeOrThrow } from '#tests/helpers/assert'
|
|
import { makeSceneGraph } from '#tests/helpers/scene'
|
|
|
|
const MESSAGE: ComponentPropertyDefinition = {
|
|
id: 'message',
|
|
name: 'Message',
|
|
type: 'TEXT',
|
|
defaultValue: 'Default'
|
|
}
|
|
const VARIANT: ComponentPropertyDefinition = {
|
|
id: 'variant',
|
|
name: 'variant',
|
|
type: 'VARIANT',
|
|
defaultValue: 'Primary',
|
|
variantOptions: ['Primary', 'Secondary']
|
|
}
|
|
|
|
for (const explicitVariant of [false, true]) {
|
|
test(`component-set properties preserve ${explicitVariant ? 'explicit' : 'inferred'} variant selection`, async () => {
|
|
const graph = makeSceneGraph()
|
|
const set = await renderTree(
|
|
graph,
|
|
ComponentSet({
|
|
properties: explicitVariant ? [MESSAGE, VARIANT] : [MESSAGE],
|
|
children: ['Primary', 'Secondary'].map((variant) =>
|
|
Component({
|
|
name: `variant=${variant}`,
|
|
children: Text({
|
|
children: 'Default',
|
|
propertyRefs: [{ propertyId: MESSAGE.id, field: 'TEXT' }]
|
|
})
|
|
})
|
|
)
|
|
})
|
|
)
|
|
const result = await renderTree(
|
|
graph,
|
|
Instance({ of: set.id, variant: 'Secondary', properties: { message: 'Changed' } })
|
|
)
|
|
const instance = getNodeOrThrow(graph, result.id)
|
|
expect(instance.componentId).toBe(graph.getChildren(set.id)[1].id)
|
|
expect(graph.getChildren(instance.id)[0].text).toBe('Changed')
|
|
const definitions = getNodeOrThrow(graph, set.id).componentPropertyDefinitions
|
|
expect(definitions).toContainEqual(MESSAGE)
|
|
expect(definitions.filter((definition) => definition.type === 'VARIANT')).toHaveLength(1)
|
|
if (explicitVariant) expect(definitions).toContainEqual(VARIANT)
|
|
})
|
|
}
|