@affectively/aeon-pages 1.3.0

package/packages/cli/src/commands/init.ts

@@ -0,0 +1,409 @@
+/**
+ * aeon init - Initialize a new Aeon Pages project
+ *
+ * Features:
+ * - Create new project from template
+ * - Import existing Next.js project
+ * - Seed D1 database from JSX AST
+ */
+
+import { mkdir, writeFile, readdir, readFile, stat } from 'fs/promises';
+import { join, resolve } from 'path';
+
+interface ProjectTemplate {
+  name: string;
+  files: Record<string, string>;
+}
+
+const BASIC_TEMPLATE: ProjectTemplate = {
+  name: 'basic',
+  files: {
+    'package.json': `{
+  "name": "my-aeon-app",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "aeon dev",
+    "build": "aeon build",
+    "start": "aeon start"
+  },
+  "dependencies": {
+    "@affectively/aeon-pages": "workspace:*",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.0",
+    "@types/react": "^18.0.0"
+  }
+}`,
+
+    'aeon.config.ts': `import type { AeonConfig } from '@affectively/aeon-pages';
+
+const config: AeonConfig = {
+  pagesDir: './pages',
+  componentsDir: './components',
+  runtime: 'bun',
+  port: 3000,
+
+  aeon: {
+    sync: {
+      mode: 'distributed',
+      consistencyLevel: 'strong',
+    },
+    presence: {
+      enabled: true,
+      cursorTracking: true,
+      inactivityTimeout: 60000,
+    },
+    versioning: {
+      enabled: true,
+      autoMigrate: true,
+    },
+    offline: {
+      enabled: true,
+      maxQueueSize: 1000,
+    },
+  },
+
+  components: {
+    autoDiscover: true,
+  },
+
+  output: {
+    dir: '.aeon',
+  },
+};
+
+export default config;`,
+
+    'tsconfig.json': `{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": ".aeon/dist",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", ".aeon"]
+}`,
+
+    'pages/index.tsx': `'use aeon';
+
+import { useAeonPage } from '@affectively/aeon-pages/react';
+
+export default function HomePage() {
+  const { presence, data, updateData } = useAeonPage();
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 py-12 px-4">
+      <div className="max-w-3xl mx-auto">
+        <header className="text-center mb-12">
+          <h1 className="text-4xl font-bold text-gray-900 mb-4">
+            Welcome to Aeon Pages
+          </h1>
+          <p className="text-xl text-gray-600">
+            The CMS IS the website. Click anywhere to edit.
+          </p>
+        </header>
+
+        <main className="bg-white rounded-xl shadow-lg p-8">
+          <h2 className="text-2xl font-semibold text-gray-800 mb-4">
+            Getting Started
+          </h2>
+          <p className="text-gray-600 mb-6">
+            This page is now collaborative. Any edits you make will sync
+            in real-time with all connected users.
+          </p>
+
+          <div className="flex items-center gap-2 text-sm text-gray-500">
+            <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+            <span>{presence.length} user(s) online</span>
+          </div>
+        </main>
+
+        <footer className="mt-12 text-center text-gray-500 text-sm">
+          Built with{' '}
+          <a
+            href="https://github.com/affectively/aeon-pages"
+            className="text-blue-500 hover:underline"
+          >
+            @affectively/aeon-pages
+          </a>
+        </footer>
+      </div>
+    </div>
+  );
+}`,
+
+    'pages/layout.tsx': `import { type ReactNode } from 'react';
+
+interface LayoutProps {
+  children: ReactNode;
+}
+
+export default function RootLayout({ children }: LayoutProps) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Aeon Pages</title>
+        <link
+          href="https://cdn.jsdelivr.net/npm/tailwindcss@3/dist/tailwind.min.css"
+          rel="stylesheet"
+        />
+      </head>
+      <body>
+        {children}
+      </body>
+    </html>
+  );
+}`,
+
+    '.gitignore': `# Dependencies
+node_modules/
+
+# Build output
+.aeon/
+dist/
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+npm-debug.log*
+`,
+  },
+};
+
+export async function init(targetDir?: string): Promise<void> {
+  const projectDir = resolve(targetDir || '.');
+  const projectName = targetDir || 'aeon-app';
+
+  console.log(`\n🌟 Initializing Aeon Pages project: ${projectName}\n`);
+
+  // Check if directory exists and has content
+  try {
+    const entries = await readdir(projectDir);
+    if (entries.length > 0) {
+      // Check if it's a Next.js project
+      const hasNextConfig = entries.some(
+        (e) =>
+          e === 'next.config.js' ||
+          e === 'next.config.ts' ||
+          e === 'next.config.mjs',
+      );
+
+      if (hasNextConfig) {
+        console.log(
+          '📦 Detected Next.js project. Converting to Aeon Pages...\n',
+        );
+        await convertNextProject(projectDir);
+        return;
+      }
+
+      // Non-empty directory, ask to overwrite
+      console.log('⚠️  Directory is not empty.');
+      console.log('   Use --force to overwrite existing files.\n');
+      return;
+    }
+  } catch {
+    // Directory doesn't exist, create it
+    await mkdir(projectDir, { recursive: true });
+  }
+
+  // Create project from template
+  console.log('📁 Creating project structure...');
+
+  for (const [relativePath, content] of Object.entries(BASIC_TEMPLATE.files)) {
+    const filePath = join(projectDir, relativePath);
+    const dir = filePath.substring(0, filePath.lastIndexOf('/'));
+
+    await mkdir(dir, { recursive: true });
+
+    // Update package name
+    let fileContent = content;
+    if (relativePath === 'package.json') {
+      fileContent = content.replace('"my-aeon-app"', `"${projectName}"`);
+    }
+
+    await writeFile(filePath, fileContent);
+    console.log(`   ✓ ${relativePath}`);
+  }
+
+  console.log('\n✨ Project initialized!\n');
+  console.log('Next steps:');
+  console.log(`  cd ${targetDir || '.'}`);
+  console.log('  bun install');
+  console.log('  bun run dev');
+  console.log('\nDocs: https://github.com/affectively/aeon-pages\n');
+}
+
+/**
+ * Convert an existing Next.js project to Aeon Pages
+ */
+async function convertNextProject(projectDir: string): Promise<void> {
+  console.log('🔄 Converting Next.js project to Aeon Pages...\n');
+
+  // Find app or pages directory
+  const appDir = join(projectDir, 'app');
+  const pagesDir = join(projectDir, 'pages');
+
+  let sourceDir: string;
+  let isAppRouter = false;
+
+  try {
+    await stat(appDir);
+    sourceDir = appDir;
+    isAppRouter = true;
+    console.log('   Found App Router (app/)\n');
+  } catch {
+    try {
+      await stat(pagesDir);
+      sourceDir = pagesDir;
+      console.log('   Found Pages Router (pages/)\n');
+    } catch {
+      console.error('❌ No app/ or pages/ directory found.');
+      return;
+    }
+  }
+
+  // Scan for page files
+  const pages = await scanPages(sourceDir, isAppRouter);
+  console.log(`   Found ${pages.length} page(s):\n`);
+
+  for (const page of pages) {
+    console.log(`   📄 ${page.route}`);
+  }
+
+  // Create aeon.config.ts
+  const configPath = join(projectDir, 'aeon.config.ts');
+  await writeFile(configPath, BASIC_TEMPLATE.files['aeon.config.ts']);
+  console.log('\n   ✓ Created aeon.config.ts');
+
+  // Update package.json
+  await updatePackageJson(projectDir);
+  console.log('   ✓ Updated package.json scripts');
+
+  console.log('\n✨ Conversion complete!\n');
+  console.log('Next steps:');
+  console.log("  1. Add 'use aeon'; to pages you want to make collaborative");
+  console.log('  2. bun install');
+  console.log('  3. bun run dev');
+  console.log('\nNote: Your existing Next.js code will work with Aeon Pages.');
+  console.log(
+    "      Just add 'use aeon'; at the top of any page to enable collaboration.\n",
+  );
+}
+
+interface PageInfo {
+  route: string;
+  filePath: string;
+  hasAeonDirective: boolean;
+}
+
+async function scanPages(
+  dir: string,
+  isAppRouter: boolean,
+): Promise<PageInfo[]> {
+  const pages: PageInfo[] = [];
+
+  async function scan(currentDir: string, routePath: string): Promise<void> {
+    const entries = await readdir(currentDir, { withFileTypes: true });
+
+    for (const entry of entries) {
+      const fullPath = join(currentDir, entry.name);
+
+      if (entry.isDirectory()) {
+        // Handle dynamic routes
+        let segment = entry.name;
+        if (segment.startsWith('[') && segment.endsWith(']')) {
+          segment = `:${segment.slice(1, -1)}`;
+        }
+        await scan(fullPath, `${routePath}/${segment}`);
+      } else if (entry.isFile()) {
+        const isPage = isAppRouter
+          ? entry.name === 'page.tsx' ||
+            entry.name === 'page.ts' ||
+            entry.name === 'page.jsx' ||
+            entry.name === 'page.js'
+          : entry.name.endsWith('.tsx') || entry.name.endsWith('.jsx');
+
+        if (isPage) {
+          const content = await readFile(fullPath, 'utf-8');
+          const hasAeon =
+            content.includes("'use aeon'") || content.includes('"use aeon"');
+
+          let route = routePath;
+          if (!isAppRouter) {
+            // Pages router: file name is the route
+            const baseName = entry.name.replace(/\.(tsx|jsx|ts|js)$/, '');
+            if (baseName !== 'index') {
+              route = `${routePath}/${baseName}`;
+            }
+          }
+
+          pages.push({
+            route: route || '/',
+            filePath: fullPath,
+            hasAeonDirective: hasAeon,
+          });
+        }
+      }
+    }
+  }
+
+  await scan(dir, '');
+  return pages;
+}
+
+async function updatePackageJson(projectDir: string): Promise<void> {
+  const pkgPath = join(projectDir, 'package.json');
+
+  try {
+    const content = await readFile(pkgPath, 'utf-8');
+    const pkg = JSON.parse(content);
+
+    // Update scripts
+    pkg.scripts = pkg.scripts || {};
+    pkg.scripts.dev = 'aeon dev';
+    pkg.scripts.build = 'aeon build';
+    pkg.scripts.start = 'aeon start';
+
+    // Add dependencies
+    pkg.dependencies = pkg.dependencies || {};
+    pkg.dependencies['@affectively/aeon-pages'] = 'workspace:*';
+
+    await writeFile(pkgPath, JSON.stringify(pkg, null, 2));
+  } catch (err) {
+    console.error('Failed to update package.json:', err);
+  }
+}

package/packages/cli/src/commands/start.ts

@@ -0,0 +1,297 @@
+/**
+ * aeon start - Start production server
+ *
+ * For local testing of production builds before deploying to Cloudflare.
+ * In production, you deploy to Cloudflare Workers - no server needed!
+ */
+
+import { readFile } from 'fs/promises';
+import { resolve, join, relative } from 'path';
+
+interface StartOptions {
+  port: number;
+  config?: string;
+}
+
+interface AeonConfig {
+  pagesDir: string;
+  output?: { dir?: string };
+}
+
+interface RouteManifest {
+  version: string;
+  routes: Array<{
+    pattern: string;
+    sessionId: string;
+    isAeon: boolean;
+  }>;
+}
+
+export async function start(options: StartOptions): Promise<void> {
+  const cwd = process.cwd();
+  const configPath = options.config || 'aeon.config.ts';
+  const port = options.port || 3000;
+
+  console.log('\n🚀 Starting Aeon Flux production server...\n');
+
+  // Load config
+  const config = await loadConfig(resolve(cwd, configPath));
+  const outputDir = resolve(cwd, config.output?.dir || '.aeon');
+
+  // Check for build output
+  const manifestPath = join(outputDir, 'manifest.json');
+  let manifest: RouteManifest;
+
+  try {
+    const content = await readFile(manifestPath, 'utf-8');
+    manifest = JSON.parse(content);
+  } catch {
+    console.error('❌ No build found. Run `aeon build` first.\n');
+    process.exit(1);
+  }
+
+  console.log(`📦 Build: ${relative(cwd, outputDir)}`);
+  console.log(`📄 Routes: ${manifest.routes.length}`);
+  console.log(`🌐 Port: ${port}`);
+  console.log('');
+
+  // Load seed data (simulate D1)
+  const sessions = await loadSeedData(outputDir);
+
+  // Start server
+  const server = Bun.serve({
+    port,
+    async fetch(req) {
+      const url = new URL(req.url);
+
+      // Match route
+      const match = matchRoute(url.pathname, manifest.routes);
+      if (!match) {
+        return new Response('Not Found', { status: 404 });
+      }
+
+      // Get session (simulating D1 query)
+      const session = sessions.get(match.sessionId);
+      if (!session) {
+        return new Response('Session not found', { status: 404 });
+      }
+
+      // Render page
+      const html = renderPage(session, match);
+
+      return new Response(html, {
+        headers: { 'Content-Type': 'text/html; charset=utf-8' },
+      });
+    },
+    websocket: {
+      open(_ws) {
+        console.log('   WebSocket client connected');
+      },
+      close(_ws) {
+        console.log('   WebSocket client disconnected');
+      },
+      message(_ws, _message) {
+        // Handle collaboration messages
+      },
+    },
+  });
+
+  console.log(`✨ Ready at http://localhost:${port}\n`);
+  console.log(
+    '   This is a local preview. In production, deploy to Cloudflare Workers.',
+  );
+  console.log('   Press Ctrl+C to stop\n');
+
+  // Handle graceful shutdown
+  process.on('SIGINT', () => {
+    console.log('\n\n👋 Shutting down...\n');
+    server.stop();
+    process.exit(0);
+  });
+}
+
+async function loadConfig(configPath: string): Promise<AeonConfig> {
+  try {
+    const module = await import(configPath);
+    return module.default || module;
+  } catch {
+    return {
+      pagesDir: './pages',
+    };
+  }
+}
+
+interface Session {
+  route: string;
+  tree: SerializedComponent;
+  data: Record<string, unknown>;
+  schema: { version: string };
+}
+
+interface SerializedComponent {
+  type: string;
+  props?: Record<string, unknown>;
+  children?: (SerializedComponent | string)[];
+}
+
+async function loadSeedData(outputDir: string): Promise<Map<string, Session>> {
+  const sessions = new Map<string, Session>();
+
+  try {
+    const seedPath = join(outputDir, 'seed.sql');
+    const content = await readFile(seedPath, 'utf-8');
+
+    // Parse INSERT statements (simplified)
+    const sessionInserts = content.match(
+      /INSERT OR REPLACE INTO sessions \(session_id, route, tree, data, schema_version\) VALUES \('([^']+)', '([^']+)', '(.+?)', '\{\}', '([^']+)'\);/g,
+    );
+
+    if (sessionInserts) {
+      for (const insert of sessionInserts) {
+        const match = insert.match(
+          /VALUES \('([^']+)', '([^']+)', '(.+?)', '\{\}', '([^']+)'\)/,
+        );
+        if (match) {
+          const [, sessionId, route, treeStr, version] = match;
+          const tree = JSON.parse(treeStr.replace(/''/g, "'"));
+          sessions.set(sessionId, {
+            route,
+            tree,
+            data: {},
+            schema: { version },
+          });
+        }
+      }
+    }
+  } catch (err) {
+    console.error('Failed to load seed data:', err);
+  }
+
+  return sessions;
+}
+
+interface RouteMatch {
+  pattern: string;
+  sessionId: string;
+  isAeon: boolean;
+  params: Record<string, string>;
+}
+
+function matchRoute(
+  path: string,
+  routes: RouteManifest['routes'],
+): RouteMatch | null {
+  const pathParts = path.split('/').filter(Boolean);
+
+  for (const route of routes) {
+    const params = matchPattern(pathParts, route.pattern);
+    if (params !== null) {
+      return { ...route, params };
+    }
+  }
+  return null;
+}
+
+function matchPattern(
+  pathParts: string[],
+  pattern: string,
+): Record<string, string> | null {
+  const patternParts = pattern.split('/').filter(Boolean);
+  const params: Record<string, string> = {};
+
+  let pi = 0;
+  let pati = 0;
+
+  while (pi < pathParts.length && pati < patternParts.length) {
+    const pathPart = pathParts[pi];
+    const patternPart = patternParts[pati];
+
+    if (patternPart.startsWith('[[...') && patternPart.endsWith(']]')) {
+      const name = patternPart.slice(5, -2);
+      params[name] = pathParts.slice(pi).join('/');
+      return params;
+    } else if (patternPart.startsWith('[...') && patternPart.endsWith(']')) {
+      const name = patternPart.slice(4, -1);
+      params[name] = pathParts.slice(pi).join('/');
+      return params;
+    } else if (patternPart.startsWith('[') && patternPart.endsWith(']')) {
+      const name = patternPart.slice(1, -1);
+      params[name] = pathPart;
+      pi++;
+      pati++;
+    } else if (pathPart === patternPart) {
+      pi++;
+      pati++;
+    } else {
+      return null;
+    }
+  }
+
+  if (pati < patternParts.length) {
+    const last = patternParts[pati];
+    if (last.startsWith('[[...') && last.endsWith(']]')) {
+      params[last.slice(5, -2)] = '';
+      return params;
+    }
+  }
+
+  return pi === pathParts.length && pati === patternParts.length
+    ? params
+    : null;
+}
+
+function renderPage(session: Session, match: RouteMatch): string {
+  const html = renderTree(session.tree);
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Aeon Flux</title>
+  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3/dist/tailwind.min.css" rel="stylesheet">
+</head>
+<body>
+  <div id="root">${html}</div>
+  ${
+    match.isAeon
+      ? `
+  <script>
+    window.__AEON_FLUX__ = {
+      route: "${match.pattern}",
+      sessionId: "${match.sessionId}",
+      params: ${JSON.stringify(match.params)},
+    };
+  </script>
+  `
+      : ''
+  }
+</body>
+</html>`;
+}
+
+function renderTree(node: SerializedComponent | string): string {
+  if (typeof node === 'string') return escapeHtml(node);
+  if (!node) return '';
+
+  const { type, props = {}, children = [] } = node;
+  const attrs = Object.entries(props)
+    .map(([k, v]) => {
+      if (k === 'className') return `class="${v}"`;
+      if (typeof v === 'boolean') return v ? k : '';
+      return `${k}="${escapeHtml(String(v))}"`;
+    })
+    .filter(Boolean)
+    .join(' ');
+
+  const childHtml = children.map(renderTree).join('');
+  return `<${type}${attrs ? ' ' + attrs : ''}>${childHtml}</${type}>`;
+}
+
+function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}