juxscript 1.0.60 → 1.0.61

package/machinery/compiler.js

@@ -3,23 +3,6 @@ import path from 'path';
 import esbuild from 'esbuild';
 import * as acorn from 'acorn';
 
-/**
- * Generate import map script tag
- */
-function generateImportMapScript() {
-  return `<script type="importmap">
-{
-  "imports": {
-    "juxscript": "./lib/jux.js",
-    "juxscript/": "./lib/",
-    "juxscript/reactivity": "./lib/reactivity/state.js",
-    "juxscript/presets/": "./presets/",
-    "juxscript/components/": "./lib/components/"
-  }
-}
-</script>`;
-}
-
 /**
  * Copy and build the JUX library from TypeScript to JavaScript
  * 
@@ -277,12 +260,7 @@ function findProjectFiles(dir, extensions, fileList = [], rootDir = dir, exclude
 
 /**
  * Bundle all .jux files into a single router-based main.js
- * 
- * @param {string} projectRoot - Source directory (jux/)
- * @param {string} distDir - Destination directory (jux-dist/)
- * @param {Object} options - Bundle options
- * @param {string} options.routePrefix - Route prefix (e.g., '/experiments')
- * @returns {Promise<string>} - Returns the generated filename (e.g., 'main.1234567890.js')
+ * ✅ MODIFIED: Vendor dependencies locally
  */
 export async function bundleJuxFilesToRouter(projectRoot, distDir, options = {}) {
   const startTime = performance.now();
@@ -294,7 +272,13 @@ export async function bundleJuxFilesToRouter(projectRoot, distDir, options = {})
 
   if (juxFiles.length === 0) {
     console.log('   No .jux files found');
-    return;
+    // ✅ FIX: Return empty result instead of undefined
+    return {
+      mainJsFilename: 'main.js',
+      routes: [],
+      external: new Set(),
+      vendoredPaths: {}
+    };
   }
 
   console.log(`   Found ${juxFiles.length} .jux file(s)`);
@@ -304,6 +288,7 @@ export async function bundleJuxFilesToRouter(projectRoot, distDir, options = {})
   const routes = [];
   const sharedModules = new Map(); // ✅ Map<filePath, exportCode>
   const allImports = new Set();
+  const externalModules = new Set();  // ✅ NEW: Track external modules directly
 
   for (const juxFile of juxFiles) {
     const fileStartTime = performance.now();
@@ -326,10 +311,29 @@ export async function bundleJuxFilesToRouter(projectRoot, distDir, options = {})
 
     const juxContent = fs.readFileSync(juxFile, 'utf-8');
 
-    // Extract imports
-    const importMatches = juxContent.match(/import\s+.*?from\s+['"][^'"]+['"]\s*;?/g);
-    if (importMatches) {
-      importMatches.forEach(imp => allImports.add(imp));
+    // ✅ FIX: Extract imports AND detect external modules in one pass
+    try {
+      const ast = acorn.parse(juxContent, {
+        ecmaVersion: 'latest',
+        sourceType: 'module'
+      });
+
+      ast.body.forEach(node => {
+        if (node.type === 'ImportDeclaration') {
+          const importStatement = juxContent.slice(node.start, node.end);
+          allImports.add(importStatement);
+
+          const moduleName = node.source.value;
+          if (!moduleName.startsWith('.') &&
+            !moduleName.startsWith('/') &&
+            !moduleName.startsWith('http') &&
+            !moduleName.startsWith('juxscript')) {
+            externalModules.add(moduleName);
+          }
+        }
+      });
+    } catch (parseErr) {
+      console.warn(`   ⚠️  Failed to parse imports in ${relativePath}, skipping`);
     }
 
     // Check if file has exports
@@ -374,14 +378,20 @@ export async function bundleJuxFilesToRouter(projectRoot, distDir, options = {})
   }
 
   const bundleStartTime = performance.now();
+
+  // ✅ CHANGE: Single summary instead of verbose list
+  if (externalModules.size > 0) {
+    console.log(`\n   📦 External dependencies: ${Array.from(externalModules).join(', ')}`);
+  }
+
+  const vendoredPaths = await vendorExternalDependencies(externalModules, distDir);
+
   const routerCode = generateRouterBundle(views, routes, sharedModules, allImports);
   const bundleGenTime = performance.now() - bundleStartTime;
 
-  // ✅ Use fixed filename (no timestamp)
   const mainJsFilename = 'main.js';
   const mainJsPath = path.join(distDir, mainJsFilename);
 
-  // Write to dist/main.js
   const writeStartTime = performance.now();
   fs.writeFileSync(mainJsPath, routerCode);
   const writeTime = performance.now() - writeStartTime;
@@ -391,14 +401,19 @@ export async function bundleJuxFilesToRouter(projectRoot, distDir, options = {})
   console.log(`   ✓ Generated: ${path.relative(projectRoot, mainJsPath)}`);
   console.log(`\n   📊 Bundle Statistics:`);
   console.log(`      Files processed:    ${juxFiles.length}`);
+  console.log(`      External deps:      ${externalModules.size}`);
+  console.log(`      Vendored locally:   ${Object.keys(vendoredPaths).length}`);
   console.log(`      Bundle size:        ${(routerCode.length / 1024).toFixed(1)} KB`);
-  console.log(`      Code generation:    ${bundleGenTime.toFixed(0)}ms`);
-  console.log(`      File write:         ${writeTime.toFixed(0)}ms`);
   console.log(`      Total bundle time:  ${totalTime.toFixed(0)}ms`);
   console.log('✅ Router bundle complete\n');
 
-  // ✅ Return the filename so index.html can reference it
-  return mainJsFilename;
+  // ✅ Return bundleResult with vendor info
+  return {
+    mainJsFilename,
+    routes: routes.map(r => ({ path: r.path, functionName: r.functionName })),
+    external: externalModules,  // ✅ FIX: Use externalModules instead of external
+    vendoredPaths
+  };
 }
 
 /**
@@ -792,20 +807,25 @@ render();
 
 /**
  * Generate a unified index.html for router bundle
- * 
- * @param {string} distDir - Destination directory
- * @param {Array<{path: string, functionName: string}>} routes - Route definitions
- * @param {string} mainJsFilename - The generated main.js filename (e.g., 'main.1234567890.js')
+ * ✅ MODIFIED: Use vendored paths instead of CDN
  */
-export function generateIndexHtml(distDir, routes, mainJsFilename = 'main.js') {
-  console.log('📄 Generating index.html...');
+export function generateIndexHtml(distDir, bundleResult) {
+  // ✅ ADD: Defensive check and fallback
+  if (!bundleResult) {
+    console.warn('⚠️  generateIndexHtml called without bundleResult, using defaults');
+    bundleResult = {
+      mainJsFilename: 'main.js',
+      routes: [],
+      vendoredPaths: {}
+    };
+  }
 
-  // Generate navigation links
-  const navLinks = routes
-    .map(r => `    <a href="${r.path}">${r.functionName.replace(/_/g, ' ')}</a>`)
-    .join(' |\n');
+  const { mainJsFilename = 'main.js', routes = [], vendoredPaths = {} } = bundleResult;
 
-  const importMapScript = generateImportMapScript();
+  console.log('📄 Generating index.html...');
+
+  // ✅ Use vendor import map
+  const importMapScript = generateVendorImportMap(vendoredPaths);
 
   const html = `<!DOCTYPE html>
 <html lang="en">
@@ -815,7 +835,6 @@ export function generateIndexHtml(distDir, routes, mainJsFilename = 'main.js') {
   <title>Jux Application</title>
 </head>
 <body data-theme="">
-  <!-- App container - router renders here -->
   <div id="app"></div>
   ${importMapScript}
   <script type="module" src="/${mainJsFilename}"></script>
@@ -828,3 +847,101 @@ export function generateIndexHtml(distDir, routes, mainJsFilename = 'main.js') {
   console.log(`   ✓ Generated: index.html (references ${mainJsFilename})`);
   console.log('✅ Index HTML complete\n');
 }
+
+/**
+ * ✅ NEW: Download and vendor external dependencies locally
+ * Copies dependencies from node_modules to .jux-dist/vendor/
+ * NO CDN - everything is local, zero hardcoded mappings
+ * BUNDLES dependencies to resolve internal imports
+ */
+async function vendorExternalDependencies(externalDeps, distDir) {
+  const vendorDir = path.join(distDir, 'vendor');
+
+  if (!fs.existsSync(vendorDir)) {
+    fs.mkdirSync(vendorDir, { recursive: true });
+  }
+
+  const vendoredPaths = {};
+
+  for (const dep of externalDeps) {
+    try {
+      const nodeModulePath = path.join(process.cwd(), 'node_modules', dep);
+
+      if (!fs.existsSync(nodeModulePath)) {
+        console.warn(`   ⚠️  ${dep} not found in node_modules`);
+        continue;
+      }
+
+      const packageJsonPath = path.join(nodeModulePath, 'package.json');
+
+      if (!fs.existsSync(packageJsonPath)) {
+        console.warn(`   ⚠️  ${dep}: package.json not found`);
+        continue;
+      }
+
+      const packageJson = JSON.parse(
+        fs.readFileSync(packageJsonPath, 'utf-8')
+      );
+
+      const entryPoints = [
+        packageJson.module,
+        packageJson.browser,
+        packageJson.main,
+        'index.js'
+      ].filter(Boolean);
+
+      let entryFile = null;
+      for (const entry of entryPoints) {
+        const candidatePath = path.join(nodeModulePath, entry);
+        if (fs.existsSync(candidatePath)) {
+          entryFile = candidatePath;
+          break;
+        }
+      }
+
+      if (!entryFile) {
+        console.warn(`   ⚠️  ${dep}: no valid entry point`);
+        continue;
+      }
+
+      const vendorFile = path.join(vendorDir, `${dep}.js`);
+
+      await esbuild.build({
+        entryPoints: [entryFile],
+        bundle: true,
+        format: 'esm',
+        outfile: vendorFile,
+        platform: 'browser',
+        target: 'es2020',
+        minify: false,
+        logLevel: 'warning'
+      });
+
+      vendoredPaths[dep] = `/vendor/${dep}.js`;
+      console.log(`   ✓ ${dep} → vendor/${dep}.js`);
+
+    } catch (err) {
+      console.error(`   ❌ ${dep}: ${err.message}`);
+    }
+  }
+
+  return vendoredPaths;
+}
+
+/**
+ * ✅ NEW: Generate import map with local vendor paths
+ */
+function generateVendorImportMap(vendoredPaths) {
+  const imports = {
+    "juxscript": "./lib/jux.js",
+    "juxscript/": "./lib/",
+    "juxscript/reactivity": "./lib/reactivity/state.js",
+    "juxscript/presets/": "./presets/",
+    "juxscript/components/": "./lib/components/",
+    ...vendoredPaths  // ✅ These are LOCAL paths: "./vendor/axios.js"
+  };
+
+  return `<script type="importmap">
+${JSON.stringify({ imports }, null, 2)}
+</script>`;
+}

package/machinery/server.js

@@ -69,11 +69,25 @@ async function serve(httpPort = 3000, wsPort = 3001, distDir = './.jux-dist') {
     next();
   });
 
+  // ✅ ADD: Explicit MIME type for JavaScript files
+  app.use((req, res, next) => {
+    if (req.path.endsWith('.js')) {
+      res.setHeader('Content-Type', 'application/javascript; charset=utf-8');
+    }
+    next();
+  });
+
   // Serve static files
   app.use(express.static(absoluteDistDir));
 
-  // SPA fallback
-  app.use((req, res) => {
+  // ✅ FIX: Only apply SPA fallback to routes, not static files
+  app.use((req, res, next) => {
+    // Skip SPA fallback for file extensions (static assets)
+    if (/\.[a-zA-Z0-9]+$/.test(req.path)) {
+      return res.status(404).send('File not found');
+    }
+
+    // SPA fallback for routes only
     if (req.accepts('html')) {
       const indexPath = path.join(absoluteDistDir, 'index.html');
       if (fs.existsSync(indexPath)) {

package/machinery/ts-shim.js

@@ -0,0 +1,46 @@
+import esbuild from 'esbuild';
+
+/**
+ * TypeScript Shim - Strips type annotations using esbuild
+ * This is rock-solid and handles ALL TypeScript syntax correctly
+ */
+
+/**
+ * Strip TypeScript type annotations from code using esbuild
+ * 
+ * @param {string} code - TypeScript source code
+ * @returns {string} - JavaScript code with types removed
+ */
+export function stripTypes(code) {
+    try {
+        // ✅ Use esbuild to transform TypeScript → JavaScript
+        const result = esbuild.transformSync(code, {
+            loader: 'ts',
+            format: 'esm',
+            target: 'es2020'
+        });
+
+        return result.code;
+    } catch (err) {
+        console.error('❌ Failed to strip TypeScript:', err.message);
+        // Return original code if transformation fails
+        return code;
+    }
+}
+
+/**
+ * Check if a file is TypeScript based on extension
+ */
+export function isTypeScript(filePath) {
+    return filePath.endsWith('.ts') || filePath.endsWith('.tsx');
+}
+
+/**
+ * Load and parse a file, automatically stripping types if it's TypeScript
+ */
+export function loadAndStripTypes(filePath, fileContent) {
+    if (isTypeScript(filePath)) {
+        return stripTypes(fileContent);
+    }
+    return fileContent;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.0.60",
+  "version": "1.0.61",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "lib/jux.js",
@@ -58,6 +58,8 @@
   },
   "dependencies": {
     "acorn": "^8.15.0",
+    "axios": "^1.6.0",
+    "chart.js": "^4.5.1",
     "chokidar": "^3.5.3",
     "esbuild": "^0.19.0",
     "express": "^4.18.2",
@@ -68,6 +70,7 @@
     "@types/express": "^4.17.17",
     "@types/node": "^20.0.0",
     "@types/ws": "^8.5.5",
+    "acorn-walk": "^8.3.4",
     "jsdom": "^27.4.0",
     "typescript": "^5.0.0"
   }