create-visualbuild-app 0.1.0 → 1.0.1

package/visual-app-builder/shared/generateReactSource.mjs

@@ -1,443 +1,608 @@
-import { generate } from '@babel/generator'
-import * as t from '@babel/types'
-
-const voidElements = new Set(['br', 'hr', 'img', 'input', 'source', 'col'])
-
-export function generatePageSource(page) {
-  const root = {
-    ...(page.root ?? {
-      id: `${page.id}:root`,
-      type: 'div',
-      props: { className: 'min-h-screen' },
-      children: [],
-    }),
-    children: page.components ?? [],
-  }
-  const declaration = t.functionDeclaration(
-    t.identifier(toPageComponentName(page.name)),
-    [],
-    t.blockStatement([
-      t.returnStatement(createJsxElement(root, 1)),
-    ])
-  )
-
-  return printProgram([t.exportDefaultDeclaration(declaration)])
-}
-
-export function generateAppSource(
-  pages,
-  appShell = { header: null, footer: null }
-) {
-  const hasLayout = Boolean(appShell.header || appShell.footer)
-  const statements = pages.map((page) =>
-    t.importDeclaration(
-      [
-        t.importDefaultSpecifier(
-          t.identifier(toPageComponentName(page.name))
-        ),
-      ],
-      t.stringLiteral(toPageImportPath(page))
-    )
-  )
-
-  if (hasLayout) {
-    statements.push(
-      t.importDeclaration(
-        [t.importDefaultSpecifier(t.identifier('AppLayout'))],
-        t.stringLiteral('./layouts/AppLayout')
-      )
-    )
-  }
-
-  statements.push(
-    t.variableDeclaration('const', [
-      t.variableDeclarator(
-        t.identifier('routes'),
-        t.arrayExpression(
-          pages.map((page) =>
-            t.objectExpression([
-              t.objectProperty(
-                t.identifier('path'),
-                t.stringLiteral(page.route)
-              ),
-              t.objectProperty(
-                t.identifier('component'),
-                t.identifier(toPageComponentName(page.name))
-              ),
-            ])
-          )
-        )
-      ),
-    ])
-  )
-
-  const fallbackPage = t.identifier(
-    toPageComponentName(pages[0]?.name ?? 'Home')
-  )
-  const appBody = [
-    t.variableDeclaration('const', [
-      t.variableDeclarator(
-        t.identifier('path'),
-        t.memberExpression(
-          t.memberExpression(
-            t.identifier('window'),
-            t.identifier('location')
-          ),
-          t.identifier('pathname')
-        )
-      ),
-    ]),
-    t.variableDeclaration('const', [
-      t.variableDeclarator(
-        t.identifier('match'),
-        t.callExpression(
-          t.memberExpression(
-            t.identifier('routes'),
-            t.identifier('find')
-          ),
-          [
-            t.arrowFunctionExpression(
-              [t.identifier('route')],
-              t.binaryExpression(
-                '===',
-                t.memberExpression(
-                  t.identifier('route'),
-                  t.identifier('path')
-                ),
-                t.identifier('path')
-              )
-            ),
-          ]
-        )
-      ),
-    ]),
-    t.variableDeclaration('const', [
-      t.variableDeclarator(
-        t.identifier('Page'),
-        t.logicalExpression(
-          '??',
-          t.optionalMemberExpression(
-            t.identifier('match'),
-            t.identifier('component'),
-            false,
-            true
-          ),
-          fallbackPage
-        )
-      ),
-    ]),
-    t.returnStatement(
-      hasLayout
-        ? t.jsxElement(
-            t.jsxOpeningElement(t.jsxIdentifier('AppLayout'), [], false),
-            t.jsxClosingElement(t.jsxIdentifier('AppLayout')),
-            withLineBreaks([
-              t.jsxElement(
-                t.jsxOpeningElement(t.jsxIdentifier('Page'), [], true),
-                null,
-                [],
-                true
-              ),
-            ], 1),
-            false
-          )
-        : t.jsxElement(
-            t.jsxOpeningElement(t.jsxIdentifier('Page'), [], true),
-            null,
-            [],
-            true
-          )
-    ),
-  ]
-  const appDeclaration = t.functionDeclaration(
-    t.identifier('App'),
-    [],
-    t.blockStatement(appBody)
-  )
-
-  statements.push(t.exportDefaultDeclaration(appDeclaration))
-  return printProgram(statements)
-}
-
-export function generateLayoutSource(appShell) {
-  const reactImport = t.importDeclaration(
-    [
-      t.importSpecifier(
-        t.identifier('ReactNode'),
-        t.identifier('ReactNode')
-      ),
-    ],
-    t.stringLiteral('react')
-  )
-  reactImport.importKind = 'type'
-
-  const childrenProperty = t.objectProperty(
-    t.identifier('children'),
-    t.identifier('children'),
-    false,
-    true
-  )
-  const childrenPattern = t.objectPattern([childrenProperty])
-  const childrenType = t.tsPropertySignature(
-    t.identifier('children'),
-    t.tsTypeAnnotation(
-      t.tsTypeReference(t.identifier('ReactNode'))
-    )
-  )
-  childrenPattern.typeAnnotation = t.tsTypeAnnotation(
-    t.tsTypeLiteral([childrenType])
-  )
-
-  const wrapperChildren = []
-
-  if (appShell.header) {
-    wrapperChildren.push(createJsxElement(appShell.header, 2))
-  }
-
-  wrapperChildren.push(
-    t.jsxExpressionContainer(t.identifier('children'))
-  )
-
-  if (appShell.footer) {
-    wrapperChildren.push(createJsxElement(appShell.footer, 2))
-  }
-
-  const declaration = t.functionDeclaration(
-    t.identifier('AppLayout'),
-    [childrenPattern],
-    t.blockStatement([
-      t.returnStatement(
-        t.jsxElement(
-          t.jsxOpeningElement(t.jsxIdentifier('div'), [], false),
-          t.jsxClosingElement(t.jsxIdentifier('div')),
-          withLineBreaks(wrapperChildren, 1),
-          false
-        )
-      ),
-    ])
-  )
-
-  return printProgram([
-    reactImport,
-    t.exportDefaultDeclaration(declaration),
-  ])
-}
-
-export function generateNodeSource(node, indent = '') {
-  const source = generate(createJsxElement(node), generatorOptions).code
-  return source
-    .split('\n')
-    .map((line) => `${indent}${line}`)
-    .join('\n')
-}
-
-export function toPageComponentName(name) {
-  const pascalName = String(name)
-    .split(/[^a-zA-Z0-9]+/)
-    .filter(Boolean)
-    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-    .join('')
-
-  return `${pascalName || 'Untitled'}Page`
-}
-
-export function getPageSourcePath(page) {
-  return normalizeProjectPath(
-    page.sourcePath || `src/pages/${toPageComponentName(page.name)}.tsx`
-  )
-}
-
-export function createPageSourcePath(name) {
-  return `src/pages/${toPageComponentName(name)}.tsx`
-}
-
-export function normalizeProjectPath(value) {
-  return String(value).replace(/\\/g, '/').replace(/^\.\/+/, '')
-}
-
-function createJsxElement(node, depth = 0) {
-  const tagName = String(node.type)
-  const selfClosing = voidElements.has(tagName) || tagName === 'textarea'
-  const opening = t.jsxOpeningElement(
-    t.jsxIdentifier(tagName),
-    createJsxAttributes(node),
-    selfClosing
-  )
-
-  if (selfClosing) {
-    return t.jsxElement(opening, null, [], true)
-  }
-
-  const children = Array.isArray(node.children)
-    ? node.children.map((child) => createJsxElement(child, depth + 1))
-    : []
-  const text = String(node.props?.text ?? '')
-
-  if (children.length === 0 && text) {
-    children.push(t.jsxText(escapeJsxText(text)))
-  }
-
-  return t.jsxElement(
-    opening,
-    t.jsxClosingElement(t.jsxIdentifier(tagName)),
-    children.length > 0 ? withLineBreaks(children, depth) : children,
-    false
-  )
-}
-
-function withLineBreaks(children, depth) {
-  const childIndent = '  '.repeat(depth + 1)
-  const closingIndent = '  '.repeat(depth)
-
-  return [
-    t.jsxText(`\n${childIndent}`),
-    ...children.flatMap((child, index) => [
-      child,
-      t.jsxText(
-        index === children.length - 1
-          ? `\n${closingIndent}`
-          : `\n${childIndent}`
-      ),
-    ]),
-  ]
-}
-
-function createJsxAttributes(node) {
-  const props = node.props ?? {}
-  const attributes = [
-    props.id ? createValueAttribute('id', String(props.id)) : null,
-    props.className
-      ? createValueAttribute('className', String(props.className))
-      : null,
-    node.type === 'a'
-      ? createValueAttribute('href', String(props.href ?? '#'))
-      : null,
-    node.type === 'a'
-      ? createValueAttribute('target', String(props.target ?? '_self'))
-      : null,
-    node.type === 'button'
-      ? createValueAttribute('type', String(props.type ?? 'button'))
-      : null,
-    node.type === 'img'
-      ? createValueAttribute('src', String(props.src ?? ''))
-      : null,
-    node.type === 'img'
-      ? createValueAttribute('alt', String(props.alt ?? ''))
-      : null,
-    node.type === 'input'
-      ? createValueAttribute('type', String(props.type ?? 'text'))
-      : null,
-    node.type === 'input' || node.type === 'textarea'
-      ? props.name
-        ? createValueAttribute('name', String(props.name))
-        : null
-      : null,
-    node.type === 'input' || node.type === 'textarea'
-      ? props.placeholder
-        ? createValueAttribute('placeholder', String(props.placeholder))
-        : null
-      : null,
-    node.type === 'textarea'
-      ? createValueAttribute('defaultValue', String(props.text ?? ''))
-      : null,
-    node.type === 'label' && props.htmlFor
-      ? createValueAttribute('htmlFor', String(props.htmlFor))
-      : null,
-    node.type === 'iframe'
-      ? createValueAttribute('src', String(props.src ?? ''))
-      : null,
-    node.type === 'iframe'
-      ? createValueAttribute(
-          'title',
-          String(props.title ?? 'Embedded content')
-        )
-      : null,
-    node.type === 'source'
-      ? createValueAttribute('src', String(props.src ?? ''))
-      : null,
-    node.type === 'source' && props.type
-      ? createValueAttribute('type', String(props.type))
-      : null,
-    node.type === 'video' || node.type === 'audio'
-      ? props.src
-        ? createValueAttribute('src', String(props.src))
-        : null
-      : null,
-    node.type === 'video' || node.type === 'audio'
-      ? props.controls !== false
-        ? createBooleanAttribute('controls')
-        : null
-      : null,
-    node.type === 'option' && props.value
-      ? createValueAttribute('value', String(props.value))
-      : null,
-    node.type === 'optgroup'
-      ? createValueAttribute('label', String(props.label ?? 'Group'))
-      : null,
-    node.type === 'progress' || node.type === 'meter'
-      ? props.value !== undefined
-        ? createValueAttribute('value', Number(props.value))
-        : null
-      : null,
-    node.type === 'meter'
-      ? props.min !== undefined
-        ? createValueAttribute('min', Number(props.min))
-        : null
-      : null,
-    node.type === 'progress' || node.type === 'meter'
-      ? props.max !== undefined
-        ? createValueAttribute('max', Number(props.max))
-        : null
-      : null,
-  ]
-
-  return attributes.filter(Boolean)
-}
-
-function createValueAttribute(name, value) {
-  return t.jsxAttribute(
-    t.jsxIdentifier(name),
-    t.jsxExpressionContainer(
-      typeof value === 'number'
-        ? Number.isFinite(value)
-          ? t.numericLiteral(value)
-          : t.nullLiteral()
-        : t.stringLiteral(value)
-    )
-  )
-}
-
-function createBooleanAttribute(name) {
-  return t.jsxAttribute(t.jsxIdentifier(name), null)
-}
-
-function toPageImportPath(page) {
-  const sourcePath = getPageSourcePath(page)
-  const sourceRelativePath = sourcePath.startsWith('src/')
-    ? sourcePath.slice(4)
-    : sourcePath
-  const withoutExtension = sourceRelativePath.replace(/\.[^./]+$/, '')
-
-  return withoutExtension.startsWith('.')
-    ? withoutExtension
-    : `./${withoutExtension}`
-}
-
-function escapeJsxText(value) {
-  return value
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-}
-
-function printProgram(statements) {
-  const file = t.file(t.program(statements))
-  return `${generate(file, generatorOptions).code}\n`
-}
-
-const generatorOptions = {
-  comments: false,
-  compact: false,
-  concise: false,
-  jsescOption: { minimal: true },
-}
+import { generate } from '@babel/generator'
+import * as t from '@babel/types'
+
+const voidElements = new Set(['br', 'hr', 'img', 'input', 'source', 'col'])
+
+export function generatePageSource(page, customComponents = []) {
+  customComponents = Array.isArray(customComponents) ? customComponents : []
+  const root = {
+    ...(page.root ?? {
+      id: `${page.id}:root`,
+      type: 'div',
+      props: { className: 'min-h-screen' },
+      children: [],
+    }),
+    children: page.components ?? [],
+  }
+  const declaration = t.functionDeclaration(
+    t.identifier(toPageComponentName(page.name)),
+    [],
+    t.blockStatement([
+      t.returnStatement(createJsxElement(root, 1, customComponents)),
+    ])
+  )
+
+  return printProgram([
+    ...createCustomComponentImports(
+      [root],
+      getPageSourcePath(page),
+      customComponents
+    ),
+    t.exportDefaultDeclaration(declaration),
+  ])
+}
+
+export function generateAppSource(
+  pages,
+  appShell = { header: null, footer: null },
+  options = {}
+) {
+  const appFile = options.appFile ?? 'src/App.tsx'
+  const layoutFile =
+    options.layoutFile ?? 'src/layouts/AppLayout.tsx'
+  const hasLayout =
+    options.emitLayout !== false &&
+    Boolean(appShell.header || appShell.footer)
+  const statements = pages.map((page) =>
+    t.importDeclaration(
+      [
+        t.importDefaultSpecifier(
+          t.identifier(toPageComponentName(page.name))
+        ),
+      ],
+      t.stringLiteral(toPageImportPath(page, appFile))
+    )
+  )
+
+  if (hasLayout) {
+    statements.push(
+      t.importDeclaration(
+        [t.importDefaultSpecifier(t.identifier('AppLayout'))],
+        t.stringLiteral(toRelativeImportPath(appFile, layoutFile))
+      )
+    )
+  }
+
+  statements.push(
+    t.variableDeclaration('const', [
+      t.variableDeclarator(
+        t.identifier('routes'),
+        t.arrayExpression(
+          pages.map((page) =>
+            t.objectExpression([
+              t.objectProperty(
+                t.identifier('path'),
+                t.stringLiteral(page.route)
+              ),
+              t.objectProperty(
+                t.identifier('component'),
+                t.identifier(toPageComponentName(page.name))
+              ),
+            ])
+          )
+        )
+      ),
+    ])
+  )
+
+  const fallbackPage = t.identifier(
+    toPageComponentName(pages[0]?.name ?? 'Home')
+  )
+  const appBody = [
+    t.variableDeclaration('const', [
+      t.variableDeclarator(
+        t.identifier('path'),
+        t.memberExpression(
+          t.memberExpression(
+            t.identifier('window'),
+            t.identifier('location')
+          ),
+          t.identifier('pathname')
+        )
+      ),
+    ]),
+    t.variableDeclaration('const', [
+      t.variableDeclarator(
+        t.identifier('match'),
+        t.callExpression(
+          t.memberExpression(
+            t.identifier('routes'),
+            t.identifier('find')
+          ),
+          [
+            t.arrowFunctionExpression(
+              [t.identifier('route')],
+              t.binaryExpression(
+                '===',
+                t.memberExpression(
+                  t.identifier('route'),
+                  t.identifier('path')
+                ),
+                t.identifier('path')
+              )
+            ),
+          ]
+        )
+      ),
+    ]),
+    t.variableDeclaration('const', [
+      t.variableDeclarator(
+        t.identifier('Page'),
+        t.logicalExpression(
+          '??',
+          t.optionalMemberExpression(
+            t.identifier('match'),
+            t.identifier('component'),
+            false,
+            true
+          ),
+          fallbackPage
+        )
+      ),
+    ]),
+    t.returnStatement(
+      hasLayout
+        ? t.jsxElement(
+            t.jsxOpeningElement(t.jsxIdentifier('AppLayout'), [], false),
+            t.jsxClosingElement(t.jsxIdentifier('AppLayout')),
+            withLineBreaks([
+              t.jsxElement(
+                t.jsxOpeningElement(t.jsxIdentifier('Page'), [], true),
+                null,
+                [],
+                true
+              ),
+            ], 1),
+            false
+          )
+        : t.jsxElement(
+            t.jsxOpeningElement(t.jsxIdentifier('Page'), [], true),
+            null,
+            [],
+            true
+          )
+    ),
+  ]
+  const appDeclaration = t.functionDeclaration(
+    t.identifier('App'),
+    [],
+    t.blockStatement(appBody)
+  )
+
+  statements.push(t.exportDefaultDeclaration(appDeclaration))
+  return printProgram(statements)
+}
+
+export function generateLayoutSource(
+  appShell,
+  customComponents = [],
+  options = {}
+) {
+  customComponents = Array.isArray(customComponents) ? customComponents : []
+  const reactImport = t.importDeclaration(
+    [
+      t.importSpecifier(
+        t.identifier('ReactNode'),
+        t.identifier('ReactNode')
+      ),
+    ],
+    t.stringLiteral('react')
+  )
+  reactImport.importKind = 'type'
+
+  const childrenProperty = t.objectProperty(
+    t.identifier('children'),
+    t.identifier('children'),
+    false,
+    true
+  )
+  const childrenPattern = t.objectPattern([childrenProperty])
+  const childrenType = t.tsPropertySignature(
+    t.identifier('children'),
+    t.tsTypeAnnotation(
+      t.tsTypeReference(t.identifier('ReactNode'))
+    )
+  )
+  childrenPattern.typeAnnotation = t.tsTypeAnnotation(
+    t.tsTypeLiteral([childrenType])
+  )
+
+  const wrapperChildren = []
+
+  if (appShell.header) {
+    wrapperChildren.push(createJsxElement(appShell.header, 2, customComponents))
+  }
+
+  wrapperChildren.push(
+    t.jsxExpressionContainer(t.identifier('children'))
+  )
+
+  if (appShell.footer) {
+    wrapperChildren.push(createJsxElement(appShell.footer, 2, customComponents))
+  }
+
+  const declaration = t.functionDeclaration(
+    t.identifier('AppLayout'),
+    [childrenPattern],
+    t.blockStatement([
+      t.returnStatement(
+        t.jsxElement(
+          t.jsxOpeningElement(t.jsxIdentifier('div'), [], false),
+          t.jsxClosingElement(t.jsxIdentifier('div')),
+          withLineBreaks(wrapperChildren, 1),
+          false
+        )
+      ),
+    ])
+  )
+
+  return printProgram([
+    reactImport,
+    ...createCustomComponentImports(
+      [appShell.header, appShell.footer].filter(Boolean),
+      options.layoutFile ?? 'src/layouts/AppLayout.tsx',
+      customComponents
+    ),
+    t.exportDefaultDeclaration(declaration),
+  ])
+}
+
+export function generateNodeSource(node, indent = '') {
+  const source = generate(createJsxElement(node), generatorOptions).code
+  return source
+    .split('\n')
+    .map((line) => `${indent}${line}`)
+    .join('\n')
+}
+
+export function toPageComponentName(name) {
+  const pascalName = String(name)
+    .split(/[^a-zA-Z0-9]+/)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('')
+
+  return `${pascalName || 'Untitled'}Page`
+}
+
+export function getPageSourcePath(page) {
+  return normalizeProjectPath(
+    page.sourcePath || `src/pages/${toPageComponentName(page.name)}.tsx`
+  )
+}
+
+export function createPageSourcePath(name, pagesDir = 'src/pages') {
+  return `${normalizeProjectPath(pagesDir)}/${toPageComponentName(name)}.tsx`
+}
+
+export function normalizeProjectPath(value) {
+  return String(value).replace(/\\/g, '/').replace(/^\.\/+/, '')
+}
+
+function createJsxElement(
+  node,
+  depth = 0,
+  customComponents = [],
+  skipCustomWrapper = false
+) {
+  const tagName = String(node.type)
+  const customDefinition = customComponents.find(
+    (component) => component.name === tagName
+  )
+
+  if (customDefinition && !skipCustomWrapper) {
+    return createWrappedCustomElement(node, depth, customComponents)
+  }
+  const selfClosing = voidElements.has(tagName) || tagName === 'textarea'
+  const opening = t.jsxOpeningElement(
+    t.jsxIdentifier(tagName),
+    createJsxAttributes(node, customComponents),
+    selfClosing
+  )
+
+  if (selfClosing) {
+    return t.jsxElement(opening, null, [], true)
+  }
+
+  const children = Array.isArray(node.children)
+    ? node.children.map((child) =>
+        createJsxElement(child, depth + 1, customComponents)
+      )
+    : []
+  const text = String(node.props?.text ?? '')
+
+  if (children.length === 0 && text) {
+    children.push(t.jsxText(escapeJsxText(text)))
+  }
+
+  return t.jsxElement(
+    opening,
+    t.jsxClosingElement(t.jsxIdentifier(tagName)),
+    children.length > 0 ? withLineBreaks(children, depth) : children,
+    false
+  )
+}
+
+function createWrappedCustomElement(node, depth, customComponents) {
+  const props = node.props ?? {}
+  const componentProps = Object.fromEntries(
+    Object.entries(props).filter(
+      ([name]) =>
+        ![
+          'wrapperTag',
+          'id',
+          'className',
+          'attributes',
+          'componentTree',
+        ].includes(name)
+    )
+  )
+  const opening = t.jsxOpeningElement(
+    t.jsxIdentifier(String(node.type)),
+    createJsxAttributes(
+      { ...node, props: componentProps },
+      customComponents
+    ),
+    true
+  )
+
+  return t.jsxElement(opening, null, [], true)
+}
+
+function withLineBreaks(children, depth) {
+  const childIndent = '  '.repeat(depth + 1)
+  const closingIndent = '  '.repeat(depth)
+
+  return [
+    t.jsxText(`\n${childIndent}`),
+    ...children.flatMap((child, index) => [
+      child,
+      t.jsxText(
+        index === children.length - 1
+          ? `\n${closingIndent}`
+          : `\n${childIndent}`
+      ),
+    ]),
+  ]
+}
+
+function createJsxAttributes(node, customComponents = []) {
+  const props = node.props ?? {}
+  const isCustom = customComponents.some(
+    (component) => component.name === node.type
+  )
+
+  if (isCustom) {
+    const additionalAttributes =
+      props.attributes &&
+      typeof props.attributes === 'object' &&
+      !Array.isArray(props.attributes)
+        ? Object.entries(props.attributes)
+        : []
+
+    return [
+      ...Object.entries(props).filter(
+        ([name, value]) =>
+          name !== 'attributes' && value !== undefined && value !== ''
+      ),
+      ...additionalAttributes.filter(
+        ([name, value]) =>
+          isSafeJsxAttributeName(name) &&
+          name !== 'children' &&
+          name !== 'key' &&
+          name !== 'ref' &&
+          !Object.prototype.hasOwnProperty.call(props, name) &&
+          isSerializableAttributeValue(value)
+      ),
+    ]
+      .map(([name, value]) => createValueAttribute(name, value))
+  }
+
+  const attributes = [
+    props.id ? createValueAttribute('id', String(props.id)) : null,
+    props.className
+      ? createValueAttribute('className', String(props.className))
+      : null,
+    node.type === 'a'
+      ? createValueAttribute('href', String(props.href ?? '#'))
+      : null,
+    node.type === 'a'
+      ? createValueAttribute('target', String(props.target ?? '_self'))
+      : null,
+    node.type === 'button'
+      ? createValueAttribute('type', String(props.type ?? 'button'))
+      : null,
+    node.type === 'img'
+      ? createValueAttribute('src', String(props.src ?? ''))
+      : null,
+    node.type === 'img'
+      ? createValueAttribute('alt', String(props.alt ?? ''))
+      : null,
+    node.type === 'input'
+      ? createValueAttribute('type', String(props.type ?? 'text'))
+      : null,
+    node.type === 'input' || node.type === 'textarea'
+      ? props.name
+        ? createValueAttribute('name', String(props.name))
+        : null
+      : null,
+    node.type === 'input' || node.type === 'textarea'
+      ? props.placeholder
+        ? createValueAttribute('placeholder', String(props.placeholder))
+        : null
+      : null,
+    node.type === 'textarea'
+      ? createValueAttribute('defaultValue', String(props.text ?? ''))
+      : null,
+    node.type === 'label' && props.htmlFor
+      ? createValueAttribute('htmlFor', String(props.htmlFor))
+      : null,
+    node.type === 'iframe'
+      ? createValueAttribute('src', String(props.src ?? ''))
+      : null,
+    node.type === 'iframe'
+      ? createValueAttribute(
+          'title',
+          String(props.title ?? 'Embedded content')
+        )
+      : null,
+    node.type === 'source'
+      ? createValueAttribute('src', String(props.src ?? ''))
+      : null,
+    node.type === 'source' && props.type
+      ? createValueAttribute('type', String(props.type))
+      : null,
+    node.type === 'video' || node.type === 'audio'
+      ? props.src
+        ? createValueAttribute('src', String(props.src))
+        : null
+      : null,
+    node.type === 'video' || node.type === 'audio'
+      ? props.controls !== false
+        ? createBooleanAttribute('controls')
+        : null
+      : null,
+    node.type === 'option' && props.value
+      ? createValueAttribute('value', String(props.value))
+      : null,
+    node.type === 'optgroup'
+      ? createValueAttribute('label', String(props.label ?? 'Group'))
+      : null,
+    node.type === 'progress' || node.type === 'meter'
+      ? props.value !== undefined
+        ? createValueAttribute('value', Number(props.value))
+        : null
+      : null,
+    node.type === 'meter'
+      ? props.min !== undefined
+        ? createValueAttribute('min', Number(props.min))
+        : null
+      : null,
+    node.type === 'progress' || node.type === 'meter'
+      ? props.max !== undefined
+        ? createValueAttribute('max', Number(props.max))
+        : null
+      : null,
+  ]
+
+  return attributes.filter(Boolean)
+}
+
+function isSafeJsxAttributeName(name) {
+  return /^[A-Za-z_:][A-Za-z0-9_.:-]*$/.test(name)
+}
+
+function isSerializableAttributeValue(value) {
+  return (
+    typeof value === 'string' ||
+    typeof value === 'number' ||
+    typeof value === 'boolean' ||
+    Array.isArray(value)
+  )
+}
+
+function createValueAttribute(name, value) {
+  return t.jsxAttribute(
+    t.jsxIdentifier(name),
+    t.jsxExpressionContainer(
+      typeof value === 'number'
+        ? Number.isFinite(value)
+          ? t.numericLiteral(value)
+          : t.nullLiteral()
+        : typeof value === 'boolean'
+          ? t.booleanLiteral(value)
+          : Array.isArray(value)
+            ? t.arrayExpression(
+                value.map((item) =>
+                  typeof item === 'number'
+                    ? t.numericLiteral(item)
+                    : typeof item === 'boolean'
+                      ? t.booleanLiteral(item)
+                      : t.stringLiteral(String(item))
+                )
+              )
+        : t.stringLiteral(String(value))
+    )
+  )
+}
+
+function createCustomComponentImports(nodes, ownerPath, definitions) {
+  const usedNames = new Set()
+  const visit = (node) => {
+    if (!node) return
+    if (definitions.some((definition) => definition.name === node.type)) {
+      usedNames.add(node.type)
+    }
+    for (const child of node.children ?? []) visit(child)
+  }
+  nodes.forEach(visit)
+
+  return definitions
+    .filter((definition) => usedNames.has(definition.name))
+    .map((definition) => {
+      const specifier =
+        definition.exportName === 'default'
+          ? t.importDefaultSpecifier(t.identifier(definition.name))
+          : t.importSpecifier(
+              t.identifier(definition.name),
+              t.identifier(definition.exportName)
+            )
+
+      return t.importDeclaration(
+        [specifier],
+        t.stringLiteral(
+          toRelativeImportPath(ownerPath, definition.importPath)
+        )
+      )
+    })
+}
+
+function toRelativeImportPath(ownerPath, targetPath) {
+  const ownerSegments = normalizeProjectPath(ownerPath).split('/')
+  ownerSegments.pop()
+  const targetSegments = normalizeProjectPath(targetPath)
+    .replace(/\.[cm]?[jt]sx?$/, '')
+    .split('/')
+
+  while (
+    ownerSegments.length > 0 &&
+    targetSegments.length > 0 &&
+    ownerSegments[0] === targetSegments[0]
+  ) {
+    ownerSegments.shift()
+    targetSegments.shift()
+  }
+
+  const relative = [
+    ...ownerSegments.map(() => '..'),
+    ...targetSegments,
+  ].join('/')
+  return relative.startsWith('.') ? relative : `./${relative}`
+}
+
+function createBooleanAttribute(name) {
+  return t.jsxAttribute(t.jsxIdentifier(name), null)
+}
+
+function toPageImportPath(page, appFile = 'src/App.tsx') {
+  return toRelativeImportPath(appFile, getPageSourcePath(page))
+}
+
+function escapeJsxText(value) {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+}
+
+function printProgram(statements) {
+  const file = t.file(t.program(statements))
+  return `${generate(file, generatorOptions).code}\n`
+}
+
+const generatorOptions = {
+  comments: false,
+  compact: false,
+  concise: false,
+  jsescOption: { minimal: true },
+}