juxscript 1.0.19 → 1.0.21

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,11 @@ console.log(`   Output:   ${PATHS.frontendDist}`);
 console.log(`   Lib:      ${PATHS.juxLib}\n`);
 
 const command = process.argv[2];
+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 +77,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 +99,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);
   }
@@ -261,10 +308,12 @@ node_modules/
     console.log('  4. Serve jux-dist/ from your backend\n');
 
   } else if (command === 'build') {
+    // ✅ Always builds router bundle
     await buildProject(false);
     console.log(`✅ Build complete: ${PATHS.frontendDist}`);
 
   } else if (command === 'serve') {
+    // ✅ Always serves router bundle
     await buildProject(true);
 
     const port = parseInt(process.argv[3]) || 3000;
@@ -275,17 +324,17 @@ node_modules/
 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 init          Initialize a new JUX project
+  npx jux build         Build router bundle to ./jux-dist/
+  npx jux serve [port]  Start dev server with hot reload (default: 3000)
 
 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
+  │   ├── index.jux    # Entry point
+  │   └── pages/       # Additional pages
+  ├── jux-dist/        # Build output (git-ignore this)
+  ├── server/          # Your backend
   └── package.json
 
 Import Style:
@@ -294,15 +343,15 @@ 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/
+  1. npx jux init      # Create project structure
+  2. npm install       # Install dependencies
+  3. npx jux serve     # Dev server with hot reload
   4. 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
+  npx jux serve 8080   Start dev server on port 8080
     `);
   }
 })();