juxscript 1.0.20 → 1.0.22

package/bin/cli.js

@@ -1,6 +1,13 @@
 #!/usr/bin/env node
 
-import { compileJuxFile, copyLibToOutput, copyProjectAssets, transpileProjectTypeScript, copyPresetsToOutput } from '../machinery/compiler.js';
+import {
+  copyLibToOutput,
+  copyProjectAssets,
+  transpileProjectTypeScript,
+  copyPresetsToOutput,
+  bundleJuxFilesToRouter,
+  generateIndexHtml
+} from '../machinery/compiler.js';
 import { generateDocs } from '../machinery/doc-generator.js';
 import { start } from '../machinery/server.js';
 import path from 'path';
@@ -42,13 +49,12 @@ console.log(`   Output:   ${PATHS.frontendDist}`);
 console.log(`   Lib:      ${PATHS.juxLib}\n`);
 
 const command = process.argv[2];
+const subCommand = process.argv[3]; // For serve <pagename>
+const watchMode = process.argv.includes('--watch');
+const bundleMode = process.argv.includes('--bundle');
 
 /**
  * Recursively find .jux files in a directory
- * 
- * @param {string} dir - Directory to search
- * @param {string[]} fileList - Accumulator for found files
- * @returns {string[]} Array of .jux file paths
  */
 function findJuxFiles(dir, fileList = []) {
   if (!fs.existsSync(dir)) return fileList;
@@ -72,11 +78,12 @@ function findJuxFiles(dir, fileList = []) {
 }
 
 /**
- * Build the entire JUX project
+ * Build the entire JUX project (ALWAYS uses router bundle)
  * 
- * @param {boolean} isServe - Whether building for dev server with hot reload
+ * @param {boolean} isServe - Whether building for dev server
  */
 async function buildProject(isServe = false) {
+  const buildStartTime = performance.now();
   console.log('🔨 Building JUX frontend...\n');
 
   try {
@@ -93,80 +100,121 @@ async function buildProject(isServe = false) {
     }
     fs.mkdirSync(PATHS.frontendDist, { recursive: true });
 
-    // Step 1: Generate documentation from jux lib
+    // Step 1: Generate documentation
+    const docsStartTime = performance.now();
+    let docsTime = 0; // ✅ Declare with default value
     console.log('📚 Generating documentation...');
     try {
       await generateDocs(PATHS.juxLib);
-      console.log('✅ Documentation generated\n');
+      docsTime = performance.now() - docsStartTime;
+      console.log(`✅ Documentation generated (${docsTime.toFixed(0)}ms)\n`);
     } catch (error) {
-      console.warn('⚠️  Failed to generate docs:', error.message);
+      docsTime = performance.now() - docsStartTime; // ✅ Still calculate time even on error
+      console.warn(`⚠️  Failed to generate docs (${docsTime.toFixed(0)}ms):`, error.message);
     }
 
     // Step 2: Copy jux lib to frontend dist
+    const libStartTime = performance.now();
     await copyLibToOutput(PATHS.juxLib, PATHS.frontendDist);
+    const libTime = performance.now() - libStartTime;
+    console.log(`⏱️  Lib copy time: ${libTime.toFixed(0)}ms\n`);
 
-    // Step 2.5: Copy presets folder
+    // Step 3: Copy presets folder
+    const presetsStartTime = performance.now();
     await copyPresetsToOutput(PATHS.packageRoot, PATHS.frontendDist);
+    const presetsTime = performance.now() - presetsStartTime;
+    console.log(`⏱️  Presets copy time: ${presetsTime.toFixed(0)}ms\n`);
 
-    // Step 3: Copy project assets from jux/ (CSS, JS, images)
+    // Step 4: Copy project assets (CSS, JS, images)
+    const assetsStartTime = performance.now();
     await copyProjectAssets(PATHS.juxSource, PATHS.frontendDist);
+    const assetsTime = performance.now() - assetsStartTime;
+    console.log(`⏱️  Assets copy time: ${assetsTime.toFixed(0)}ms\n`);
 
-    // Step 4: Transpile TypeScript files from jux/ to jux-dist/
+    // Step 5: Transpile TypeScript files
+    const tsStartTime = performance.now();
     await transpileProjectTypeScript(PATHS.juxSource, PATHS.frontendDist);
+    const tsTime = performance.now() - tsStartTime;
+    console.log(`⏱️  TypeScript transpile time: ${tsTime.toFixed(0)}ms\n`);
 
-    // Step 5: Compile .jux files from jux/ directory ONLY
+    // Step 6: Bundle all .jux files into router
     const projectJuxFiles = findJuxFiles(PATHS.juxSource);
     console.log(`📝 Found ${projectJuxFiles.length} .jux file(s) in /jux\n`);
 
-    for (const file of projectJuxFiles) {
-      try {
-        await compileJuxFile(file, {
-          distDir: PATHS.frontendDist,
-          projectRoot: PATHS.juxSource,
-          isServe
-        });
-      } catch (err) {
-        console.error(`Error compiling ${file}:`, err.message);
-      }
+    if (projectJuxFiles.length === 0) {
+      console.warn('⚠️  No .jux files found to bundle');
+      process.exit(1);
     }
 
-    // Step 6: Compile vendor layouts
-    const layoutsDir = path.join(PATHS.juxLib, 'layouts');
-
-    if (fs.existsSync(layoutsDir)) {
-      console.log('\n📐 Compiling vendor layouts...');
-      const vendorJuxFiles = findJuxFiles(layoutsDir);
-      console.log(`Found ${vendorJuxFiles.length} vendor layout(s)\n`);
-
-      for (const file of vendorJuxFiles) {
-        try {
-          const relPath = path.relative(PATHS.juxLib, file);
-
-          await compileJuxFile(file, {
-            distDir: path.join(PATHS.frontendDist, 'lib'),
-            projectRoot: PATHS.juxLib,
-            isServe
-          });
-
-          console.log(`  ✓ Compiled: ${relPath}`);
-        } catch (err) {
-          console.error(`Error compiling vendor layout ${file}:`, err.message);
-        }
-      }
+    // ✅ Bundle and get the generated filename
+    const bundleStartTime = performance.now();
+    const mainJsFilename = await bundleJuxFilesToRouter(PATHS.juxSource, PATHS.frontendDist, {
+      routePrefix: ''
+    });
+    const bundleTime = performance.now() - bundleStartTime;
+
+    // Generate routes for index.html
+    const routes = projectJuxFiles.map(juxFile => {
+      const relativePath = path.relative(PATHS.juxSource, juxFile);
+      const parsedPath = path.parse(relativePath);
+
+      const rawFunctionName = parsedPath.dir
+        ? `${parsedPath.dir.replace(/\//g, '_')}_${parsedPath.name}`
+        : parsedPath.name;
+
+      const functionName = rawFunctionName
+        .replace(/[-_]/g, ' ')
+        .split(' ')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join('');
+
+      const routePath = '/' + (parsedPath.dir ? `${parsedPath.dir}/` : '') + parsedPath.name;
+
+      return {
+        path: routePath.replace(/\/+/g, '/'),
+        functionName
+      };
+    });
+
+    // ✅ Generate unified index.html
+    const indexStartTime = performance.now();
+    generateIndexHtml(PATHS.frontendDist, routes, mainJsFilename);
+    const indexTime = performance.now() - indexStartTime;
+
+    const totalBuildTime = performance.now() - buildStartTime;
+
+    console.log(`\n✅ Bundled ${projectJuxFiles.length} page(s) → ${PATHS.frontendDist}/${mainJsFilename}\n`);
+
+    // ✅ Build summary with timing breakdown
+    console.log(`📊 Build Summary:`);
+    console.log(`   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━`);
+    console.log(`   Documentation:     ${docsTime.toFixed(0)}ms`);
+    console.log(`   Library copy:      ${libTime.toFixed(0)}ms`);
+    console.log(`   Presets copy:      ${presetsTime.toFixed(0)}ms`);
+    console.log(`   Assets copy:       ${assetsTime.toFixed(0)}ms`);
+    console.log(`   TypeScript:        ${tsTime.toFixed(0)}ms`);
+    console.log(`   Router bundle:     ${bundleTime.toFixed(0)}ms`);
+    console.log(`   Index generation:  ${indexTime.toFixed(0)}ms`);
+    console.log(`   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━`);
+    console.log(`   Total build time:  ${totalBuildTime.toFixed(0)}ms\n`);
+
+    // Show usage
+    if (!isServe) {
+      console.log('📦 Serve from your backend:');
+      console.log(`   Express:  app.use(express.static('jux-dist'))`);
+      console.log(`   Flask:    app = Flask(__name__, static_folder='jux-dist')`);
+      console.log(`   FastAPI:  app.mount("/", StaticFiles(directory="jux-dist"), name="static")`);
+      console.log('');
+      console.log('📍 Available routes:');
+      routes.forEach(r => {
+        console.log(`   ${r.path}`);
+      });
+      console.log('');
     }
 
-    console.log(`\n✅ Built ${projectJuxFiles.length} file(s) → ${PATHS.frontendDist}\n`);
-
-    // Show backend integration examples
-    console.log('📦 Serve from your backend:');
-    console.log(`   Express:  app.use(express.static('jux-dist'))`);
-    console.log(`   Flask:    app = Flask(__name__, static_folder='jux-dist')`);
-    console.log(`   FastAPI:  app.mount("/", StaticFiles(directory="jux-dist"), name="static")`);
-    console.log(`   Laravel:  Route::view('/', 'jux-dist/index.html')`);
-    console.log('');
-
   } catch (err) {
-    console.error('❌ Build error:', err.message);
+    const failTime = performance.now() - buildStartTime;
+    console.error(`❌ Build error after ${failTime.toFixed(0)}ms:`, err.message);
     console.error(err.stack);
     process.exit(1);
   }
@@ -186,41 +234,34 @@ async function buildProject(isServe = false) {
     // Create structure
     fs.mkdirSync(juxDir, { recursive: true });
 
-    // Create index.jux with proper imports
-    const indexContent = `// Welcome to JUX!
-import { jux } from 'juxscript';
-
-// Apply a layout preset (optional)
-// import 'juxscript/presets/notion.js';
-
-// Create your app structure
-jux.container('app-container')
-  .direction('column')
-  .gap(20)
-  .style('padding: 40px;')
-  .render('body');
-
-jux.hero('welcome-hero', {
-  title: 'Welcome to JUX',
-  subtitle: 'A JavaScript UX authorship platform'
-}).render('#app-container');
-
-jux.divider({}).render('#app-container');
-
-jux.write(\`
-  <h2>Getting Started</h2>
-  <p>Edit <code>jux/index.jux</code> to build your app.</p>
-  <ul>
-    <li>Run <code>npx jux build</code> to compile</li>
-    <li>Run <code>npx jux serve</code> for dev mode</li>
-    <li>Serve <code>jux-dist/</code> from your backend</li>
-  </ul>
-\`).render('#app-container');
-`;
+    // Copy hey.jux from presets as starter template
+    const heyTemplatePath = path.join(PATHS.packageRoot, 'presets', 'hey.jux');
+    const heyTargetPath = path.join(juxDir, 'hey.jux');
+
+    if (fs.existsSync(heyTemplatePath)) {
+      fs.copyFileSync(heyTemplatePath, heyTargetPath);
+      console.log('+ Created jux/hey.jux (starter template)');
+    } else {
+      console.warn('⚠️  hey.jux template not found in presets/');
+    }
 
-    const targetPath = path.join(juxDir, 'index.jux');
-    fs.writeFileSync(targetPath, indexContent);
-    console.log('✅ Created jux/index.jux');
+    // Copy over presets/*.css as styles/ to jux/
+    const presetsSrc = path.join(PATHS.packageRoot, 'presets');
+    const stylesDest = path.join(juxDir, 'styles');
+
+    if (fs.existsSync(presetsSrc)) {
+      fs.mkdirSync(stylesDest, { recursive: true });
+
+      const presetFiles = fs.readdirSync(presetsSrc);
+      presetFiles.forEach(file => {
+        if (file.endsWith('.css')) {
+          const srcFile = path.join(presetsSrc, file);
+          const destFile = path.join(stylesDest, file);
+          fs.copyFileSync(srcFile, destFile);
+          console.log(`+ Copied preset style: styles/${file}`);
+        }
+      });
+    }
 
     // Create package.json if it doesn't exist
     const pkgPath = path.join(PATHS.projectRoot, 'package.json');
@@ -250,25 +291,33 @@ node_modules/
 
     if (!fs.existsSync(gitignorePath)) {
       fs.writeFileSync(gitignorePath, gitignoreContent);
-      console.log('✅ Created .gitignore');
+      console.log('+ Created .gitignore');
     }
 
-    console.log('✅ Created jux/ directory\n');
+    console.log('+ Created jux/ directory\n');
     console.log('Next steps:');
-    console.log('  1. npm install              # Install juxscript');
-    console.log('  2. Edit jux/index.jux       # Build your app');
-    console.log('  3. npx jux build            # Compile to jux-dist/');
-    console.log('  4. Serve jux-dist/ from your backend\n');
+    console.log('  npx jux serve hey        # Start dev server for hey.jux\n');
+    console.log('Check out the docs: https://juxscript.com/docs\n');
 
   } else if (command === 'build') {
+    // ✅ Always builds router bundle
     await buildProject(false);
     console.log(`✅ Build complete: ${PATHS.frontendDist}`);
 
   } else if (command === 'serve') {
+    // ✅ Serve with optional page parameter
+    const pageName = subCommand; // e.g., "hey" from "npx jux serve hey"
+
+    if (pageName) {
+      console.log(`🎯 Serving specific page: ${pageName}\n`);
+    }
+
     await buildProject(true);
 
-    const port = parseInt(process.argv[3]) || 3000;
-    await start(port);
+    const port = pageName ? 3000 : (parseInt(subCommand) || 3000);
+
+    // Start server
+    await start(port, pageName);
 
   } else {
     console.log(`
@@ -276,16 +325,17 @@ JUX CLI - A JavaScript UX authorship platform
 
 Usage:
   npx jux init               Initialize a new JUX project
-  npx jux build              Compile .jux files from ./jux/ to ./jux-dist/
-  npx jux serve [port]       Start dev server with hot reload (default: 3000)
+  npx jux build              Build router bundle to ./jux-dist/
+  npx jux serve [page]       Start dev server (optionally for specific page)
+  npx jux serve [port]       Start dev server on custom port
 
 Project Structure:
   my-project/
-  ├── jux/                   # Your .jux source files
-  │   ├── index.jux         # Entry point (uses 'juxscript' imports)
-  │   └── pages/            # Additional pages
-  ├── jux-dist/             # Build output (git-ignore this)
-  ├── server/               # Your backend
+  ├── jux/              # Your .jux source files
+  │   ├── hey.jux       # Starter page (created by init)
+  │   └── pages/        # Additional pages
+  ├── jux-dist/         # Build output (git-ignore this)
+  ├── server/           # Your backend
   └── package.json
 
 Import Style:
@@ -294,15 +344,17 @@ Import Style:
   import 'juxscript/presets/notion.js';
 
 Getting Started:
-  1. npx jux init           # Create project structure
-  2. npm install            # Install dependencies
-  3. npx jux build          # Build to jux-dist/
-  4. Serve jux-dist/ from your backend
+  1. npx jux init          # Create project structure
+  2. npm install           # Install dependencies
+  3. npx jux serve hey     # Dev server for hey.jux at localhost:3000/hey
+  4. npx jux serve         # Dev server for all pages
+  5. Serve jux-dist/ from your backend
 
 Examples:
-  npx jux build              Build for production
-  npx jux serve              Start dev server
-  npx jux serve 8080         Start on port 8080
+  npx jux build            Build production bundle
+  npx jux serve            Start dev server on port 3000 (all pages)
+  npx jux serve hey        Start dev server at localhost:3000/hey
+  npx jux serve 8080       Start dev server on port 8080
     `);
   }
 })();