13f562adc6
TreeNode builder functions (Frame, Text, Rectangle, etc.) produce a lightweight tree structure. Two rendering paths: - renderTreeNode(): tree → scene graph (browser, no deps) - renderJsx(): JSX string → esbuild → tree → scene graph (CLI/headless) Tailwind-like shorthand props: w/h, bg, rounded, flex, gap, p/px/py, justify, items, shadow, blur, etc. 27 tests covering all node types, layout props, effects, and nesting.
31 lines
741 B
TypeScript
31 lines
741 B
TypeScript
export type ReactElement = {
|
|
type: string | Function
|
|
props: Record<string, unknown> & { children?: ReactNode[] }
|
|
}
|
|
|
|
export type ReactNode = ReactElement | string | number | null | undefined | ReactNode[]
|
|
|
|
export type FC<P = Record<string, unknown>> = (props: P) => ReactElement
|
|
|
|
export function createElement(
|
|
type: string | Function,
|
|
props: Record<string, unknown> | null,
|
|
...children: ReactNode[]
|
|
): ReactElement {
|
|
const flatChildren = children.flat()
|
|
return {
|
|
type,
|
|
props: {
|
|
...props,
|
|
children:
|
|
flatChildren.length === 1
|
|
? (flatChildren as ReactNode[])
|
|
: flatChildren.length > 0
|
|
? flatChildren
|
|
: undefined
|
|
}
|
|
}
|
|
}
|
|
|
|
export default { createElement }
|