create-visualbuild-app 0.1.0 → 1.0.0

package/visual-app-builder/src/utils/codegen.ts

@@ -1,66 +1,90 @@
-import {
-  createPageSourcePath as createAstPageSourcePath,
-  generateAppSource,
-  generateLayoutSource,
-  generateNodeSource,
-  generatePageSource,
-  getPageSourcePath as getAstPageSourcePath,
-  toPageComponentName as toAstPageComponentName,
-} from '../../shared/generateReactSource.mjs'
-import type { AppShell, ComponentType, Page, VisualNode } from '../types'
-
-export function generatePageCode(page: Page): string {
-  return generatePageSource(page).trimEnd()
-}
-
-export function generateAppCode(pages: Page[], appShell: AppShell): string {
-  return generateAppSource(pages, appShell).trimEnd()
-}
-
-export function generateLayoutCode(appShell: AppShell): string {
-  return generateLayoutSource(appShell).trimEnd()
-}
-
-export function generateProjectSchema(
-  pages: Page[],
-  appShell: AppShell,
-  projectName = 'my-blog'
-): string {
-  return JSON.stringify(
-    {
-      meta: {
-        projectName,
-        framework: 'react',
-        styling: 'tailwind',
-      },
-      appShell,
-      pages,
-    },
-    null,
-    2
-  )
-}
-
-export function generateComponentSource(type: ComponentType): string {
-  return `export function ${type}() {
-  return null
-}`
-}
-
-export function toPageComponentName(name: string): string {
-  return toAstPageComponentName(name)
-}
-
-export function getPageSourcePath(
-  page: Pick<Page, 'name' | 'sourcePath'>
-): string {
-  return getAstPageSourcePath(page)
-}
-
-export function createPageSourcePath(name: string): string {
-  return createAstPageSourcePath(name)
-}
-
-export function generateNodeCode(node: VisualNode, indent: string): string {
-  return generateNodeSource(node, indent)
-}
+import {
+  createPageSourcePath as createAstPageSourcePath,
+  generateAppSource,
+  generateLayoutSource,
+  generateNodeSource,
+  generatePageSource,
+  getPageSourcePath as getAstPageSourcePath,
+  toPageComponentName as toAstPageComponentName,
+} from '../../shared/generateReactSource.mjs'
+import type {
+  AppShell,
+  ComponentType,
+  CustomComponentDefinition,
+  Page,
+  VisualNode,
+} from '../types'
+
+export function generatePageCode(
+  page: Page,
+  customComponents: CustomComponentDefinition[] = []
+): string {
+  return generatePageSource(page, customComponents).trimEnd()
+}
+
+export function generateAppCode(
+  pages: Page[],
+  appShell: AppShell,
+  options?: {
+    appFile?: string
+    layoutFile?: string
+    emitLayout?: boolean
+  }
+): string {
+  return generateAppSource(pages, appShell, options).trimEnd()
+}
+
+export function generateLayoutCode(
+  appShell: AppShell,
+  customComponents: CustomComponentDefinition[] = [],
+  options?: { layoutFile?: string }
+): string {
+  return generateLayoutSource(appShell, customComponents, options).trimEnd()
+}
+
+export function generateProjectSchema(
+  pages: Page[],
+  appShell: AppShell,
+  projectName = 'my-app'
+): string {
+  return JSON.stringify(
+    {
+      meta: {
+        projectName,
+        framework: 'react',
+        styling: 'tailwind',
+      },
+      appShell,
+      pages,
+    },
+    null,
+    2
+  )
+}
+
+export function generateComponentSource(type: ComponentType): string {
+  return `export function ${type}() {
+  return null
+}`
+}
+
+export function toPageComponentName(name: string): string {
+  return toAstPageComponentName(name)
+}
+
+export function getPageSourcePath(
+  page: Pick<Page, 'name' | 'sourcePath'>
+): string {
+  return getAstPageSourcePath(page)
+}
+
+export function createPageSourcePath(
+  name: string,
+  pagesDir?: string
+): string {
+  return createAstPageSourcePath(name, pagesDir)
+}
+
+export function generateNodeCode(node: VisualNode, indent: string): string {
+  return generateNodeSource(node, indent)
+}

package/visual-app-builder/src/utils/deployment.ts

@@ -0,0 +1,54 @@
+export interface DeploymentConfiguration {
+  provider: 'vercel'
+  tokenConfigured: boolean
+  projectName: string
+  teamId: string
+  outputDirectory: string
+  sourcePolicy: 'static-build-output-only'
+}
+
+export interface DeploymentResult {
+  id: string
+  url: string
+  inspectorUrl?: string
+  readyState: 'READY'
+  fileCount: number
+  totalBytes: number
+}
+
+export async function loadDeploymentConfiguration() {
+  const response = await fetch('/__visualbuild/deploy')
+
+  if (!response.ok) {
+    throw new Error(await readDeploymentError(response))
+  }
+
+  return (await response.json()) as DeploymentConfiguration
+}
+
+export async function deployProjectToVercel(
+  projectName: string,
+  teamId: string
+) {
+  const response = await fetch('/__visualbuild/deploy', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ projectName, teamId }),
+  })
+
+  if (!response.ok) {
+    throw new Error(await readDeploymentError(response))
+  }
+
+  return (await response.json()) as DeploymentResult
+}
+
+async function readDeploymentError(response: Response) {
+  const payload = (await response.json().catch(() => null)) as {
+    error?: string
+  } | null
+
+  return payload?.error ?? `Deployment failed (HTTP ${response.status})`
+}

package/visual-app-builder/src/utils/projectPersistence.ts

@@ -1,177 +1,218 @@
-import type { AppShell, Page } from '../types'
-
-export interface ProjectSchema {
-  meta: {
-    projectName: string
-    framework: string
-    styling: string
-  }
-  appShell: AppShell
-  pages: Page[]
-  runtimeProjectId?: string
-}
-
-export type ImportedProjectPage = Page
-
-export interface GeneratorDiagnostic {
-  severity: 'error'
-  phase: 'generate'
-  code: string
-  title: string
-  message: string
-  path: string
-  suggestion?: string
-}
-
-class ProjectSaveError extends Error {
-  diagnostic?: GeneratorDiagnostic
-
-  constructor(message: string, diagnostic?: GeneratorDiagnostic) {
-    super(message)
-    this.name = 'ProjectSaveError'
-    this.diagnostic = diagnostic
-  }
-}
-
-export function getGeneratorDiagnostic(error: unknown) {
-  return error instanceof ProjectSaveError ? error.diagnostic : undefined
-}
-
-export function createProjectSchema(
-  pages: Page[],
-  appShell: AppShell,
-  projectName = 'my-blog'
-): ProjectSchema {
-  return {
-    meta: {
-      projectName,
-      framework: 'react',
-      styling: 'tailwind',
-    },
-    appShell,
-    pages,
-  }
-}
-
-export async function loadProjectSchema(): Promise<ProjectSchema | null> {
-  const response = await fetch('/__visualbuild/pages')
-
-  if (!response.ok) {
-    return null
-  }
-
-  const schema = (await response.json()) as ProjectSchema
-
-  return {
-    ...schema,
-    runtimeProjectId:
-      response.headers.get('X-VisualBuild-Project-Id') ?? undefined,
-  }
-}
-
-export async function saveProjectSchema(
-  pages: Page[],
-  appShell: AppShell,
-  projectName: string
-) {
-  const response = await fetch('/__visualbuild/pages', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(createProjectSchema(pages, appShell, projectName), null, 2),
-  })
-
-  if (!response.ok) {
-    const responseBody = await response.text()
-    let payload: {
-      error?: string
-      diagnostic?: GeneratorDiagnostic
-    } | null = null
-
-    try {
-      payload = JSON.parse(responseBody) as {
-        error?: string
-        diagnostic?: GeneratorDiagnostic
-      }
-    } catch {
-      // Older servers may still return a plain error string.
-    }
-
-    throw new ProjectSaveError(
-      payload?.error ||
-        responseBody ||
-        'Failed to save VisualBuild project',
-      payload?.diagnostic
-    )
-  }
-
-  notifyProjectFilesChanged()
-}
-
-export async function importProjectPage(
-  path: string,
-  name: string,
-  route: string
-) {
-  const response = await fetch('/__visualbuild/import-page', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({ path, name, route }),
-  })
-
-  if (!response.ok) {
-    const payload = (await response.json().catch(() => null)) as {
-      error?: string
-    } | null
-    throw new Error(payload?.error ?? 'Failed to import page source')
-  }
-
-  return (await response.json()) as ImportedProjectPage
-}
-
-export async function syncTailwindClasses(pages: Page[], appShell: AppShell) {
-  const classNames = collectProjectClassNames(pages, appShell)
-  const response = await fetch('/__visualbuild/tailwind', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'text/plain',
-    },
-    body: classNames.join('\n'),
-  })
-
-  if (!response.ok) {
-    throw new Error(
-      (await response.text()) || 'Failed to compile Tailwind classes'
-    )
-  }
-}
-
-function collectProjectClassNames(pages: Page[], appShell: AppShell) {
-  const classNames = new Set<string>()
-  const visitNode = (node: Page['root']) => {
-    const value = String(node.props.className ?? '').trim()
-
-    if (value) {
-      classNames.add(value)
-    }
-
-    node.children.forEach(visitNode)
-  }
-
-  if (appShell.header) visitNode(appShell.header)
-  if (appShell.footer) visitNode(appShell.footer)
-
-  pages.forEach((page) => {
-    visitNode(page.root)
-    page.components.forEach(visitNode)
-  })
-
-  return [...classNames]
-}
-
-function notifyProjectFilesChanged() {
-  window.dispatchEvent(new Event('visualbuild:filesystem-changed'))
-}
+import type {
+  AppShell,
+  CustomComponentDefinition,
+  Page,
+  VisualBuildRuntimeConfig,
+} from '../types'
+
+export interface ProjectSchema {
+  meta: {
+    projectName: string
+    framework: string
+    styling: string
+  }
+  appShell: AppShell
+  pages: Page[]
+  runtimeProjectId?: string
+}
+
+export type ImportedProjectPage = Page
+
+export interface GeneratorDiagnostic {
+  severity: 'error'
+  phase: 'generate'
+  code: string
+  title: string
+  message: string
+  path: string
+  suggestion?: string
+}
+
+class ProjectSaveError extends Error {
+  diagnostic?: GeneratorDiagnostic
+
+  constructor(message: string, diagnostic?: GeneratorDiagnostic) {
+    super(message)
+    this.name = 'ProjectSaveError'
+    this.diagnostic = diagnostic
+  }
+}
+
+export function getGeneratorDiagnostic(error: unknown) {
+  return error instanceof ProjectSaveError ? error.diagnostic : undefined
+}
+
+export function createProjectSchema(
+  pages: Page[],
+  appShell: AppShell,
+  projectName = 'my-app'
+): ProjectSchema {
+  return {
+    meta: {
+      projectName,
+      framework: 'react',
+      styling: 'tailwind',
+    },
+    appShell,
+    pages,
+  }
+}
+
+export async function loadProjectSchema(): Promise<ProjectSchema | null> {
+  const response = await fetch('/__visualbuild/pages')
+
+  if (!response.ok) {
+    return null
+  }
+
+  const schema = (await response.json()) as ProjectSchema
+
+  return {
+    ...schema,
+    runtimeProjectId:
+      response.headers.get('X-VisualBuild-Project-Id') ?? undefined,
+  }
+}
+
+export async function loadProjectConfig(): Promise<{
+  customComponents: CustomComponentDefinition[]
+} & VisualBuildRuntimeConfig> {
+  const response = await fetch('/__visualbuild/config')
+
+  if (!response.ok) {
+    const payload = (await response.json().catch(() => null)) as {
+      error?: string
+    } | null
+    throw new Error(payload?.error ?? 'Failed to load visualbuild.config.ts')
+  }
+
+  return (await response.json()) as {
+    customComponents: CustomComponentDefinition[]
+  } & VisualBuildRuntimeConfig
+}
+
+export async function saveProjectSchema(
+  pages: Page[],
+  appShell: AppShell,
+  projectName: string
+) {
+  const response = await fetch('/__visualbuild/pages', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(createProjectSchema(pages, appShell, projectName), null, 2),
+  })
+
+  if (!response.ok) {
+    const responseBody = await response.text()
+    let payload: {
+      error?: string
+      diagnostic?: GeneratorDiagnostic
+    } | null = null
+
+    try {
+      payload = JSON.parse(responseBody) as {
+        error?: string
+        diagnostic?: GeneratorDiagnostic
+      }
+    } catch {
+      // Older servers may still return a plain error string.
+    }
+
+    throw new ProjectSaveError(
+      payload?.error ||
+        responseBody ||
+        'Failed to save VisualBuild project',
+      payload?.diagnostic
+    )
+  }
+
+  notifyProjectFilesChanged()
+}
+
+export async function importProjectPage(
+  path: string,
+  name: string,
+  route: string
+) {
+  const response = await fetch('/__visualbuild/import-page', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ path, name, route }),
+  })
+
+  if (!response.ok) {
+    const payload = (await response.json().catch(() => null)) as {
+      error?: string
+    } | null
+    throw new Error(payload?.error ?? 'Failed to import page source')
+  }
+
+  return (await response.json()) as ImportedProjectPage
+}
+
+export async function registerProjectComponent(path: string) {
+  const response = await fetch('/__visualbuild/register-component', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ path }),
+  })
+
+  if (!response.ok) {
+    const payload = (await response.json().catch(() => null)) as {
+      error?: string
+    } | null
+    throw new Error(payload?.error ?? 'Failed to register component source')
+  }
+
+  return (await response.json()) as CustomComponentDefinition
+}
+
+export async function syncTailwindClasses(pages: Page[], appShell: AppShell) {
+  const classNames = collectProjectClassNames(pages, appShell)
+  const response = await fetch('/__visualbuild/tailwind', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'text/plain',
+    },
+    body: classNames.join('\n'),
+  })
+
+  if (!response.ok) {
+    throw new Error(
+      (await response.text()) || 'Failed to compile Tailwind classes'
+    )
+  }
+}
+
+function collectProjectClassNames(pages: Page[], appShell: AppShell) {
+  const classNames = new Set<string>()
+  const visitNode = (node: Page['root']) => {
+    const value = String(node.props.className ?? '').trim()
+
+    if (value) {
+      classNames.add(value)
+    }
+
+    node.children.forEach(visitNode)
+  }
+
+  if (appShell.header) visitNode(appShell.header)
+  if (appShell.footer) visitNode(appShell.footer)
+
+  pages.forEach((page) => {
+    visitNode(page.root)
+    page.components.forEach(visitNode)
+  })
+
+  return [...classNames]
+}
+
+function notifyProjectFilesChanged() {
+  window.dispatchEvent(new Event('visualbuild:filesystem-changed'))
+}