create-visualbuild-app 0.1.0 → 1.0.1

package/scripts/vb-dev.mjs

@@ -1,32 +1,41 @@
-#!/usr/bin/env node
-
-import { spawn } from 'node:child_process'
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-
-const packageRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')
-const targetAppDir = path.resolve(process.argv[2] ?? packageRoot)
-const viteBin = path.join(packageRoot, 'node_modules', 'vite', 'bin', 'vite.js')
-const viteConfig = path.join(packageRoot, 'visual-app-builder', 'vite.config.ts')
-
-const child = spawn(
-  process.execPath,
-  [viteBin, '--config', viteConfig, '--host', '127.0.0.1', '--port', '7371'],
-  {
-    cwd: packageRoot,
-    env: {
-      ...process.env,
-      VISUALBUILD_APP_DIR: targetAppDir,
-    },
-    stdio: 'inherit',
-  }
-)
-
-child.on('exit', (code, signal) => {
-  if (signal) {
-    process.kill(process.pid, signal)
-    return
-  }
-
-  process.exit(code ?? 0)
-})
+#!/usr/bin/env node
+
+import { spawn } from 'node:child_process'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const packageRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')
+const targetAppDir = path.resolve(process.argv[2] ?? packageRoot)
+const viteBin = path.join(packageRoot, 'node_modules', 'vite', 'bin', 'vite.js')
+const viteConfig = path.join(packageRoot, 'visual-app-builder', 'vite.config.ts')
+
+const child = spawn(
+  process.execPath,
+  [
+    viteBin,
+    '--config',
+    viteConfig,
+    '--host',
+    '127.0.0.1',
+    '--port',
+    '7371',
+    '--strictPort',
+  ],
+  {
+    cwd: packageRoot,
+    env: {
+      ...process.env,
+      VISUALBUILD_APP_DIR: targetAppDir,
+    },
+    stdio: 'inherit',
+  }
+)
+
+child.on('exit', (code, signal) => {
+  if (signal) {
+    process.kill(process.pid, signal)
+    return
+  }
+
+  process.exit(code ?? 0)
+})

package/scripts/vb-generate.mjs

@@ -1,224 +1,332 @@
-import fs from 'node:fs/promises'
-import path from 'node:path'
-import {
-  generateAppSource,
-  generateLayoutSource,
-  generatePageSource,
-  getPageSourcePath,
-  normalizeProjectPath,
-} from '../visual-app-builder/shared/generateReactSource.mjs'
-
-const root = path.resolve(process.argv[2] ?? process.cwd())
-const schemaPath = path.join(root, 'visualbuild', 'pages.json')
-const outputRoot = path.join(root, 'src')
-const manifestPath = path.join(root, 'visualbuild', 'generated-files.json')
-const diagnosticMarker = 'VISUALBUILD_DIAGNOSTIC:'
-
-class GeneratorDiagnosticError extends Error {
-  constructor(code, message, suggestion) {
-    super(message)
-    this.name = 'GeneratorDiagnosticError'
-    this.code = code
-    this.suggestion = suggestion
-  }
-}
-
-function validatePages(pages) {
-  const seenRoutes = new Set()
-  const seenSourcePaths = new Set()
-
-  for (const page of pages) {
-    if (!page.name || typeof page.name !== 'string') {
-      throw new GeneratorDiagnosticError(
-        'INVALID_PAGE_NAME',
-        'Every page needs a name.',
-        'Give each page a non-empty name in the page manager.'
-      )
-    }
-
-    if (!page.route || typeof page.route !== 'string') {
-      throw new GeneratorDiagnosticError(
-        'MISSING_PAGE_ROUTE',
-        `Page "${page.name}" needs a route.`,
-        'Add a route in the page manager before saving.'
-      )
-    }
-
-    if (!page.route.startsWith('/')) {
-      throw new GeneratorDiagnosticError(
-        'INVALID_PAGE_ROUTE',
-        `Route "${page.route}" must start with "/".`,
-        `Change the route to "/${page.route.replace(/^\/+/, '')}".`
-      )
-    }
-
-    if (seenRoutes.has(page.route)) {
-      throw new GeneratorDiagnosticError(
-        'DUPLICATE_PAGE_ROUTE',
-        `Duplicate route found: ${page.route}`,
-        'Give every registered page a unique route.'
-      )
-    }
-
-    const sourcePath = getPageSourcePath(page)
-
-    if (
-      !sourcePath.startsWith('src/') ||
-      !/\.(jsx|tsx)$/i.test(sourcePath) ||
-      sourcePath.includes('/../') ||
-      sourcePath.endsWith('/..')
-    ) {
-      throw new GeneratorDiagnosticError(
-        'INVALID_PAGE_SOURCE_PATH',
-        `Page "${page.name}" needs a .jsx or .tsx sourcePath inside src.`,
-        'Move the page source under src and use a .jsx or .tsx extension.'
-      )
-    }
-
-    if (
-      sourcePath === 'src/App.tsx' ||
-      sourcePath === 'src/layouts/AppLayout.tsx'
-    ) {
-      throw new GeneratorDiagnosticError(
-        'RESERVED_PAGE_SOURCE_PATH',
-        `Page source path is reserved: ${sourcePath}`,
-        'Choose a page file that does not replace App.tsx or AppLayout.tsx.'
-      )
-    }
-
-    if (seenSourcePaths.has(sourcePath)) {
-      throw new GeneratorDiagnosticError(
-        'DUPLICATE_PAGE_SOURCE_PATH',
-        `Duplicate page source path found: ${sourcePath}`,
-        'Give every registered page its own source file.'
-      )
-    }
-
-    seenRoutes.add(page.route)
-    seenSourcePaths.add(sourcePath)
-  }
-}
-
-async function writeFile(filePath, contents) {
-  await fs.mkdir(path.dirname(filePath), { recursive: true })
-  await fs.writeFile(filePath, contents)
-}
-
-function getManagedFilePath(relativePath) {
-  const normalizedPath = normalizeProjectPath(relativePath)
-  const absolutePath = path.resolve(root, ...normalizedPath.split('/'))
-  const relativeToRoot = path.relative(root, absolutePath)
-
-  if (
-    !normalizedPath ||
-    relativeToRoot.startsWith('..') ||
-    path.isAbsolute(relativeToRoot)
-  ) {
-    throw new GeneratorDiagnosticError(
-      'UNSAFE_GENERATED_PATH',
-      `Generated file cannot leave the project: ${relativePath}`,
-      'Use a project-relative source path inside src.'
-    )
-  }
-
-  return absolutePath
-}
-
-async function readGeneratedManifest() {
-  try {
-    const manifest = JSON.parse(await fs.readFile(manifestPath, 'utf8'))
-
-    return Array.isArray(manifest.files)
-      ? manifest.files.map(normalizeProjectPath)
-      : []
-  } catch {
-    return []
-  }
-}
-
-async function writeGeneratedManifest(files) {
-  await writeFile(
-    manifestPath,
-    `${JSON.stringify({ files: [...files].sort() }, null, 2)}\n`
-  )
-}
-
-async function main() {
-  const rawSchema = await fs.readFile(schemaPath, 'utf8')
-  const schema = JSON.parse(rawSchema)
-  const pages = schema.pages ?? []
-  const appShell = schema.appShell ?? { header: null, footer: null }
-
-  validatePages(pages)
-
-  await fs.mkdir(outputRoot, { recursive: true })
-  const previousManagedFiles = await readGeneratedManifest()
-  const nextManagedFiles = new Set([
-    'src/App.tsx',
-    ...pages.map(getPageSourcePath),
-  ])
-
-  if (appShell.header || appShell.footer) {
-    nextManagedFiles.add('src/layouts/AppLayout.tsx')
-  }
-
-  for (const staleFile of previousManagedFiles) {
-    if (!nextManagedFiles.has(staleFile)) {
-      await fs.rm(getManagedFilePath(staleFile), { force: true })
-    }
-  }
-
-  for (const page of pages) {
-    await writeFile(
-      getManagedFilePath(getPageSourcePath(page)),
-      generatePageSource(page)
-    )
-  }
-
-  if (appShell.header || appShell.footer) {
-    await writeFile(
-      path.join(outputRoot, 'layouts', 'AppLayout.tsx'),
-      generateLayoutSource(appShell)
-    )
-  }
-
-  await writeFile(
-    path.join(outputRoot, 'App.tsx'),
-    generateAppSource(pages, appShell)
-  )
-  await writeGeneratedManifest(nextManagedFiles)
-
-  console.log(`Generated ${pages.length} page(s) into src`)
-}
-
-main().catch((error) => {
-  const diagnostic = createGeneratorDiagnostic(error)
-  console.error(`${diagnosticMarker}${JSON.stringify(diagnostic)}`)
-  process.exit(1)
-})
-
-function createGeneratorDiagnostic(error) {
-  const isInvalidJson = error instanceof SyntaxError
-  const message =
-    error instanceof Error ? error.message : 'React source generation failed.'
-
-  return {
-    severity: 'error',
-    phase: 'generate',
-    code: isInvalidJson
-      ? 'INVALID_SCHEMA_JSON'
-      : error instanceof GeneratorDiagnosticError
-        ? error.code
-        : 'GENERATION_FAILED',
-    title: isInvalidJson
-      ? 'Project schema is not valid JSON'
-      : 'React source generation failed',
-    message,
-    path: 'visualbuild/pages.json',
-    suggestion: isInvalidJson
-      ? 'Fix the JSON syntax, then save again. The last generated React files were kept.'
-      : error instanceof GeneratorDiagnosticError
-        ? error.suggestion
-        : 'Review the page schema and try again. The last generated React files were kept.',
-  }
-}
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import {
+  generateAppSource,
+  generateLayoutSource,
+  generatePageSource,
+  createPageSourcePath,
+  getPageSourcePath,
+  normalizeProjectPath,
+} from '../visual-app-builder/shared/generateReactSource.mjs'
+import { loadVisualBuildConfig } from '../visual-app-builder/shared/visualbuildConfig.mjs'
+import { syncCustomComponentRoot } from '../visual-app-builder/shared/syncCustomComponentSource.mjs'
+
+const root = path.resolve(process.argv[2] ?? process.cwd())
+const diagnosticMarker = 'VISUALBUILD_DIAGNOSTIC:'
+
+class GeneratorDiagnosticError extends Error {
+  constructor(code, message, suggestion) {
+    super(message)
+    this.name = 'GeneratorDiagnosticError'
+    this.code = code
+    this.suggestion = suggestion
+  }
+}
+
+function isPathInsideDirectory(filePath, directoryPath) {
+  return (
+    filePath === directoryPath ||
+    filePath.startsWith(`${directoryPath.replace(/\/+$/, '')}/`)
+  )
+}
+
+function validatePages(pages, config) {
+  const seenRoutes = new Set()
+  const seenSourcePaths = new Set()
+
+  for (const page of pages) {
+    if (!page.name || typeof page.name !== 'string') {
+      throw new GeneratorDiagnosticError(
+        'INVALID_PAGE_NAME',
+        'Every page needs a name.',
+        'Give each page a non-empty name in the page manager.'
+      )
+    }
+
+    if (!page.route || typeof page.route !== 'string') {
+      throw new GeneratorDiagnosticError(
+        'MISSING_PAGE_ROUTE',
+        `Page "${page.name}" needs a route.`,
+        'Add a route in the page manager before saving.'
+      )
+    }
+
+    if (!page.route.startsWith('/')) {
+      throw new GeneratorDiagnosticError(
+        'INVALID_PAGE_ROUTE',
+        `Route "${page.route}" must start with "/".`,
+        `Change the route to "/${page.route.replace(/^\/+/, '')}".`
+      )
+    }
+
+    if (seenRoutes.has(page.route)) {
+      throw new GeneratorDiagnosticError(
+        'DUPLICATE_PAGE_ROUTE',
+        `Duplicate route found: ${page.route}`,
+        'Give every registered page a unique route.'
+      )
+    }
+
+    const sourcePath = getPageSourcePath(page)
+
+    if (
+      !isPathInsideDirectory(sourcePath, config.paths.sourceDir) ||
+      !/\.(jsx|tsx)$/i.test(sourcePath) ||
+      sourcePath.includes('/../') ||
+      sourcePath.endsWith('/..')
+    ) {
+      throw new GeneratorDiagnosticError(
+        'INVALID_PAGE_SOURCE_PATH',
+        `Page "${page.name}" needs a .jsx or .tsx sourcePath inside ${config.paths.sourceDir}.`,
+        `Move the page source under ${config.paths.sourceDir} and use a .jsx or .tsx extension.`
+      )
+    }
+
+    const layoutPath = `${config.paths.layoutsDir}/AppLayout.tsx`
+    if (
+      sourcePath === config.paths.appFile ||
+      sourcePath === layoutPath
+    ) {
+      throw new GeneratorDiagnosticError(
+        'RESERVED_PAGE_SOURCE_PATH',
+        `Page source path is reserved: ${sourcePath}`,
+        'Choose a page file that does not replace App.tsx or AppLayout.tsx.'
+      )
+    }
+
+    if (seenSourcePaths.has(sourcePath)) {
+      throw new GeneratorDiagnosticError(
+        'DUPLICATE_PAGE_SOURCE_PATH',
+        `Duplicate page source path found: ${sourcePath}`,
+        'Give every registered page its own source file.'
+      )
+    }
+
+    seenRoutes.add(page.route)
+    seenSourcePaths.add(sourcePath)
+  }
+}
+
+async function writeFile(filePath, contents) {
+  await fs.mkdir(path.dirname(filePath), { recursive: true })
+  await fs.writeFile(filePath, contents)
+}
+
+function getManagedFilePath(relativePath) {
+  const normalizedPath = normalizeProjectPath(relativePath)
+  const absolutePath = path.resolve(root, ...normalizedPath.split('/'))
+  const relativeToRoot = path.relative(root, absolutePath)
+
+  if (
+    !normalizedPath ||
+    relativeToRoot.startsWith('..') ||
+    path.isAbsolute(relativeToRoot)
+  ) {
+    throw new GeneratorDiagnosticError(
+      'UNSAFE_GENERATED_PATH',
+      `Generated file cannot leave the project: ${relativePath}`,
+      'Use a project-relative path inside the configured source directory.'
+    )
+  }
+
+  return absolutePath
+}
+
+async function readGeneratedManifest(manifestPath) {
+  try {
+    const manifest = JSON.parse(await fs.readFile(manifestPath, 'utf8'))
+
+    return Array.isArray(manifest.files)
+      ? manifest.files.map(normalizeProjectPath)
+      : []
+  } catch {
+    return []
+  }
+}
+
+async function writeGeneratedManifest(manifestPath, files) {
+  await writeFile(
+    manifestPath,
+    `${JSON.stringify({ files: [...files].sort() }, null, 2)}\n`
+  )
+}
+
+async function main() {
+  const config = await loadVisualBuildConfig(root)
+  const schemaPath = getManagedFilePath(config.paths.schemaFile)
+  const outputRoot = getManagedFilePath(config.paths.sourceDir)
+  const manifestPath = getManagedFilePath(
+    config.paths.generatedManifestFile
+  )
+  const rawSchema = await fs.readFile(schemaPath, 'utf8')
+  const schema = JSON.parse(rawSchema)
+  const pages = (schema.pages ?? []).map((page) => ({
+    ...page,
+    sourcePath:
+      page.sourcePath ??
+      createPageSourcePath(page.name, config.paths.pagesDir),
+  }))
+  const appShell = schema.appShell ?? { header: null, footer: null }
+  const customComponents = config.components ?? []
+
+  validatePages(pages, config)
+  await syncRegisteredComponentSources(
+    pages,
+    appShell,
+    customComponents
+  )
+
+  await fs.mkdir(outputRoot, { recursive: true })
+  const previousManagedFiles = await readGeneratedManifest(manifestPath)
+  const nextManagedFiles = new Set(pages.map(getPageSourcePath))
+  const layoutPath = `${config.paths.layoutsDir}/AppLayout.tsx`
+
+  if (config.generator.emitApp) {
+    nextManagedFiles.add(config.paths.appFile)
+  }
+
+  if (
+    config.generator.emitLayout &&
+    (appShell.header || appShell.footer)
+  ) {
+    nextManagedFiles.add(layoutPath)
+  }
+
+  if (config.generator.cleanStaleFiles) {
+    const retainedDeveloperFiles = new Set([
+      ...(!config.generator.emitApp ? [config.paths.appFile] : []),
+      ...(!config.generator.emitLayout ? [layoutPath] : []),
+    ])
+
+    for (const staleFile of previousManagedFiles) {
+      if (
+        !nextManagedFiles.has(staleFile) &&
+        !retainedDeveloperFiles.has(staleFile)
+      ) {
+        await fs.rm(getManagedFilePath(staleFile), { force: true })
+      }
+    }
+  }
+
+  for (const page of pages) {
+    await writeFile(
+      getManagedFilePath(getPageSourcePath(page)),
+      generatePageSource(page, customComponents)
+    )
+  }
+
+  if (
+    config.generator.emitLayout &&
+    (appShell.header || appShell.footer)
+  ) {
+    await writeFile(
+      getManagedFilePath(layoutPath),
+      generateLayoutSource(appShell, customComponents, {
+        layoutFile: layoutPath,
+      })
+    )
+  }
+
+  if (config.generator.emitApp) {
+    await writeFile(
+      getManagedFilePath(config.paths.appFile),
+      generateAppSource(pages, appShell, {
+        appFile: config.paths.appFile,
+        layoutFile: layoutPath,
+        emitLayout: config.generator.emitLayout,
+      })
+    )
+  }
+  await writeGeneratedManifest(
+    manifestPath,
+    config.generator.cleanStaleFiles
+      ? nextManagedFiles
+      : new Set([...previousManagedFiles, ...nextManagedFiles])
+  )
+
+  console.log(
+    `Generated ${pages.length} page(s) into ${config.paths.sourceDir}`
+  )
+}
+
+async function syncRegisteredComponentSources(
+  pages,
+  appShell,
+  customComponents
+) {
+  const roots = [
+    ...(appShell.header ? [appShell.header] : []),
+    ...(appShell.footer ? [appShell.footer] : []),
+    ...pages.flatMap((page) => page.components ?? []),
+  ]
+
+  for (const definition of customComponents) {
+    const node = findNodeByType(roots, definition.name)
+    if (!node) continue
+
+    const sourcePath = getManagedFilePath(definition.importPath)
+    const source = await fs.readFile(sourcePath, 'utf8')
+    const nextSource = syncCustomComponentRoot(source, {
+      name: definition.name,
+      rootTag: node.props?.wrapperTag,
+      id: node.props?.id,
+      className: node.props?.className,
+      attributes: node.props?.attributes,
+      children: getCustomComponentTreeChildren(node),
+    })
+
+    if (nextSource !== source) {
+      await writeFile(sourcePath, nextSource)
+    }
+  }
+}
+
+function getCustomComponentTreeChildren(node) {
+  const tree = node.props?.componentTree
+  return tree &&
+    typeof tree === 'object' &&
+    Array.isArray(tree.children)
+    ? tree.children
+    : undefined
+}
+
+function findNodeByType(nodes, type) {
+  for (const node of nodes) {
+    if (node.type === type) return node
+    const child = findNodeByType(node.children ?? [], type)
+    if (child) return child
+  }
+  return null
+}
+
+main().catch((error) => {
+  const diagnostic = createGeneratorDiagnostic(error)
+  console.error(`${diagnosticMarker}${JSON.stringify(diagnostic)}`)
+  process.exit(1)
+})
+
+function createGeneratorDiagnostic(error) {
+  const isInvalidJson = error instanceof SyntaxError
+  const message =
+    error instanceof Error ? error.message : 'React source generation failed.'
+
+  return {
+    severity: 'error',
+    phase: 'generate',
+    code: isInvalidJson
+      ? 'INVALID_SCHEMA_JSON'
+      : error instanceof GeneratorDiagnosticError
+        ? error.code
+        : 'GENERATION_FAILED',
+    title: isInvalidJson
+      ? 'Project schema is not valid JSON'
+      : 'React source generation failed',
+    message,
+    path: 'visualbuild/pages.json',
+    suggestion: isInvalidJson
+      ? 'Fix the JSON syntax, then save again. The last generated React files were kept.'
+      : error instanceof GeneratorDiagnosticError
+        ? error.suggestion
+        : 'Review the page schema and try again. The last generated React files were kept.',
+  }
+}

package/templates/default/app/.vercelignore

@@ -0,0 +1,6 @@
+visualbuild/
+visualbuild.config.*
+visual-app-builder/
+visual-builder/
+node_modules/
+dist/