create-visualbuild-app 0.1.0

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

@@ -0,0 +1,443 @@
+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 },
+}