@affectively/aeon-pages 1.3.0

package/packages/runtime/src/tree-compiler.ts

@@ -0,0 +1,295 @@
+/**
+ * Tree → TSX Compiler
+ *
+ * Converts component trees from the visual editor back to TSX source code.
+ */
+
+interface TreeNode {
+  id: string;
+  type: string;
+  props?: Record<string, unknown>;
+  children?: string[] | TreeNode[];
+  text?: string;
+}
+
+interface CompilerOptions {
+  /** Route path for the page */
+  route: string;
+  /** Include 'use aeon' directive */
+  useAeon?: boolean;
+  /** Component imports to add */
+  imports?: Record<string, string>; // { 'Hero': '@/components/Hero' }
+  /** Whether to format output */
+  format?: boolean;
+}
+
+/**
+ * Compile a tree to TSX source code
+ */
+export function compileTreeToTSX(
+  tree: TreeNode | TreeNode[],
+  options: CompilerOptions,
+): string {
+  const { route, useAeon = true, imports = {}, format = true } = options;
+
+  // Collect all component types used
+  const usedComponents = new Set<string>();
+  collectComponents(tree, usedComponents);
+
+  // Build imports
+  const importLines: string[] = [];
+
+  // React import (if needed)
+  importLines.push("import type { FC } from 'react';");
+
+  // Component imports
+  for (const component of usedComponents) {
+    if (imports[component]) {
+      importLines.push(`import { ${component} } from '${imports[component]}';`);
+    } else if (!isHTMLElement(component)) {
+      // Default import path for unknown components
+      importLines.push(
+        `import { ${component} } from '@/components/${component}';`,
+      );
+    }
+  }
+
+  // Generate component name from route
+  const componentName = routeToComponentName(route);
+
+  // Generate JSX
+  const jsx = nodeToJSX(tree, 2);
+
+  // Assemble the file
+  const lines: string[] = [];
+
+  if (useAeon) {
+    lines.push("'use aeon';");
+    lines.push('');
+  }
+
+  lines.push('/**');
+  lines.push(` * ${componentName}`);
+  lines.push(` * Route: ${route}`);
+  lines.push(' * ');
+  lines.push(' * @generated by aeon-flux visual editor');
+  lines.push(' */');
+  lines.push('');
+
+  lines.push(...importLines);
+  lines.push('');
+
+  lines.push(`const ${componentName}: FC = () => {`);
+  lines.push('  return (');
+  lines.push(jsx);
+  lines.push('  );');
+  lines.push('};');
+  lines.push('');
+  lines.push(`export default ${componentName};`);
+  lines.push('');
+
+  return lines.join('\n');
+}
+
+/**
+ * Collect all component types used in the tree
+ */
+function collectComponents(
+  node: TreeNode | TreeNode[],
+  set: Set<string>,
+): void {
+  if (Array.isArray(node)) {
+    node.forEach((n) => collectComponents(n, set));
+    return;
+  }
+
+  if (node.type && !isHTMLElement(node.type)) {
+    set.add(node.type);
+  }
+
+  if (node.children) {
+    if (Array.isArray(node.children)) {
+      node.children.forEach((child) => {
+        if (typeof child === 'object') {
+          collectComponents(child, set);
+        }
+      });
+    }
+  }
+}
+
+/**
+ * Convert a tree node to JSX string
+ */
+function nodeToJSX(node: TreeNode | TreeNode[], indent: number = 0): string {
+  const spaces = '  '.repeat(indent);
+
+  if (Array.isArray(node)) {
+    if (node.length === 0) return `${spaces}{null}`;
+    if (node.length === 1) return nodeToJSX(node[0], indent);
+    return `${spaces}<>\n${node.map((n) => nodeToJSX(n, indent + 1)).join('\n')}\n${spaces}</>`;
+  }
+
+  const { type, props = {}, children, text } = node;
+
+  // Text node
+  if (type === 'text' || text) {
+    const content = text || props.content || props.text || '';
+    return `${spaces}${escapeJSX(String(content))}`;
+  }
+
+  // Component/element name
+  const tagName = isHTMLElement(type) ? type.toLowerCase() : type;
+
+  // Props string
+  const propsStr = propsToString(props);
+
+  // No children - self-closing
+  if (!children || (Array.isArray(children) && children.length === 0)) {
+    return `${spaces}<${tagName}${propsStr} />`;
+  }
+
+  // With children
+  const childrenJSX = Array.isArray(children)
+    ? children
+        .map((child) => {
+          if (typeof child === 'string') {
+            return `${spaces}  ${escapeJSX(child)}`;
+          }
+          return nodeToJSX(child, indent + 1);
+        })
+        .join('\n')
+    : `${spaces}  ${escapeJSX(String(children))}`;
+
+  return `${spaces}<${tagName}${propsStr}>\n${childrenJSX}\n${spaces}</${tagName}>`;
+}
+
+/**
+ * Convert props object to JSX props string
+ */
+function propsToString(props: Record<string, unknown>): string {
+  const entries = Object.entries(props).filter(
+    ([key]) => !['children', 'id', 'text', 'content'].includes(key),
+  );
+
+  if (entries.length === 0) return '';
+
+  const propsArr = entries
+    .map(([key, value]) => {
+      // Handle different value types
+      if (typeof value === 'string') {
+        return `${key}="${escapeAttr(value)}"`;
+      }
+      if (typeof value === 'boolean') {
+        return value ? key : `${key}={false}`;
+      }
+      if (typeof value === 'number') {
+        return `${key}={${value}}`;
+      }
+      if (value === null || value === undefined) {
+        return null;
+      }
+      // Objects/arrays as JSX expressions
+      return `${key}={${JSON.stringify(value)}}`;
+    })
+    .filter(Boolean);
+
+  return propsArr.length > 0 ? ' ' + propsArr.join(' ') : '';
+}
+
+/**
+ * Convert route to component name
+ */
+function routeToComponentName(route: string): string {
+  if (route === '/' || route === '') return 'IndexPage';
+
+  const parts = route
+    .replace(/^\/|\/$/g, '')
+    .split('/')
+    .map((part) => {
+      // Handle dynamic segments
+      if (part.startsWith('[') && part.endsWith(']')) {
+        return 'Dynamic' + capitalize(part.slice(1, -1));
+      }
+      return capitalize(part);
+    });
+
+  return parts.join('') + 'Page';
+}
+
+/**
+ * Check if a type is an HTML element
+ */
+function isHTMLElement(type: string): boolean {
+  const htmlElements = [
+    'div',
+    'span',
+    'p',
+    'a',
+    'button',
+    'input',
+    'form',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'ul',
+    'ol',
+    'li',
+    'nav',
+    'header',
+    'footer',
+    'main',
+    'section',
+    'article',
+    'aside',
+    'img',
+    'video',
+    'audio',
+    'canvas',
+    'svg',
+    'table',
+    'thead',
+    'tbody',
+    'tr',
+    'td',
+    'th',
+    'label',
+    'select',
+    'option',
+    'textarea',
+    'strong',
+    'em',
+    'code',
+    'pre',
+    'blockquote',
+  ];
+  return htmlElements.includes(type.toLowerCase());
+}
+
+/**
+ * Capitalize first letter
+ */
+function capitalize(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+/**
+ * Escape string for JSX content
+ */
+function escapeJSX(str: string): string {
+  return str
+    .replace(/\{/g, '&#123;')
+    .replace(/\}/g, '&#125;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+
+/**
+ * Escape string for JSX attribute
+ */
+function escapeAttr(str: string): string {
+  return str.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}