juxscript 1.0.0

package/machinery/imports.js

@@ -0,0 +1,155 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const REGISTRY_PATH = path.join(__dirname, '../lib/registry/packages.json');
+
+/**
+ * Load package registry
+ */
+function loadRegistry() {
+  if (!fs.existsSync(REGISTRY_PATH)) {
+    return {};
+  }
+  return JSON.parse(fs.readFileSync(REGISTRY_PATH, 'utf-8'));
+}
+
+/**
+ * Parse @import directives from Jux code
+ */
+export function parseImports(juxCode) {
+  const imports = [];
+  const lines = juxCode.split('\n');
+  
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i].trim();
+    
+    // Stop parsing when we hit actual code (non-directive, non-comment)
+    if (line && !line.startsWith('@') && !line.startsWith('//') && !line.startsWith('/*')) {
+      break;
+    }
+    
+    // Match @import directive
+    const importMatch = line.match(/^@import\s+(.+)$/);
+    if (importMatch) {
+      const importSpec = importMatch[1].trim();
+      imports.push({
+        line: i + 1,
+        raw: importSpec,
+        resolved: resolveImport(importSpec)
+      });
+      
+      if (process.env.JUX_VERBOSE) {
+        console.log(`  [Line ${i + 1}] Found @import: ${importSpec}`);
+      }
+    }
+  }
+  
+  return imports;
+}
+
+/**
+ * Resolve import specification to URL/path
+ */
+export function resolveImport(importSpec) {
+  // Remove quotes if present
+  const cleaned = importSpec.replace(/^['"]|['"]$/g, '');
+  
+  // Direct URL (starts with http:// or https://)
+  if (cleaned.startsWith('http://') || cleaned.startsWith('https://')) {
+    return {
+      type: 'cdn',
+      url: cleaned,
+      source: 'direct'
+    };
+  }
+  
+  // Local file (starts with ./ or ../ or /)
+  if (cleaned.startsWith('./') || cleaned.startsWith('../') || cleaned.startsWith('/')) {
+    return {
+      type: 'local',
+      path: cleaned,
+      source: 'file'
+    };
+  }
+  
+  // Unknown/unsupported
+  return {
+    type: 'unknown',
+    name: cleaned,
+    error: `Import "${cleaned}" must be a URL (https://...) or relative path (./...)`
+  };
+}
+
+/**
+ * Auto-detect component dependencies
+ */
+function detectComponentDependencies(usedComponents) {
+  const componentDeps = {
+    'chart': 'chart.js'
+    // Add more mappings as needed
+  };
+  
+  const deps = new Set();
+  
+  usedComponents.forEach(comp => {
+    if (componentDeps[comp]) {
+      deps.add(componentDeps[comp]);
+    }
+  });
+  
+  return Array.from(deps).map(pkg => ({
+    auto: true,
+    resolved: resolveImport(pkg)
+  }));
+}
+
+/**
+ * Generate HTML script tags from resolved imports
+ */
+export function generateImportTags(imports) {
+  const tags = [];
+  const seen = new Set();
+  
+  for (const imp of imports) {
+    const resolved = imp.resolved;
+    
+    if (resolved.type === 'unknown') {
+      tags.push(`<!-- ERROR: ${resolved.error} -->`);
+      continue;
+    }
+    
+    const key = resolved.url || resolved.path;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    
+    if (resolved.type === 'cdn') {
+      tags.push(`  <script src="${resolved.url}"></script>`);
+    } else if (resolved.type === 'local') {
+      tags.push(`  <script type="module" src="${resolved.path}"></script>`);
+    }
+  }
+  
+  return tags.join('\n');
+}
+
+/**
+ * Validate all imports are resolvable
+ */
+export function validateImports(imports) {
+  const errors = [];
+  
+  imports.forEach(imp => {
+    if (imp.resolved.type === 'unknown') {
+      errors.push({
+        line: imp.line,
+        message: imp.resolved.error,
+        raw: imp.raw
+      });
+    }
+  });
+  
+  return errors;
+}

package/machinery/server.js

@@ -0,0 +1,185 @@
+import express from 'express';
+import http from 'http';
+import path from 'path';
+import fs from 'fs';
+import { fileURLToPath } from 'url';
+import initSqlJs from 'sql.js';
+import { startWatcher } from './watcher.js';
+import { WebSocketServer } from 'ws';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+let db = null;
+
+async function serve(port = 3000, distDir = './dist') {
+  const app = express();
+  const absoluteDistDir = path.resolve(distDir);
+  const projectRoot = path.resolve('.');
+
+  app.use(express.json());
+
+  if (!fs.existsSync(absoluteDistDir)) {
+    console.error(`Error: dist directory not found at ${absoluteDistDir}`);
+    console.log('Building project first...\n');
+    process.exit(1);
+  }
+
+  // API endpoint for SQL queries
+  app.post('/api/query', async (req, res) => {
+    try {
+      const { sql, params = [] } = req.body;
+      
+      if (!db) {
+        return res.status(500).json({ error: 'Database not initialized' });
+      }
+
+      const stmt = db.prepare(sql);
+      stmt.bind(params);
+      
+      const rows = [];
+      while (stmt.step()) {
+        rows.push(stmt.getAsObject());
+      }
+      stmt.free();
+
+      res.json({ data: rows, rowCount: rows.length });
+    } catch (error) {
+      console.error('Query error:', error.message);
+      res.status(400).json({ error: error.message });
+    }
+  });
+
+  // Disable caching in dev mode
+  app.use((req, res, next) => {
+    res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate');
+    res.setHeader('Pragma', 'no-cache');
+    res.setHeader('Expires', '0');
+    next();
+  });
+
+  // Serve HTML files with clean URLs
+  const heyPath = path.join(absoluteDistDir, 'hey.html');
+  const indexPath = path.join(absoluteDistDir, 'index.html');
+  
+  app.use((req, res, next) => {
+    let requestPath = req.path.endsWith('/') && req.path.length > 1 
+      ? req.path.slice(0, -1) 
+      : req.path;
+
+    // Root path - serve hey.html or index.html
+    if (requestPath === '/') {
+      if (fs.existsSync(heyPath)) return res.sendFile(heyPath);
+      if (fs.existsSync(indexPath)) return res.sendFile(indexPath);
+    }
+
+    // Try to serve as HTML file
+    const htmlPath = path.join(absoluteDistDir, requestPath + '.html');
+    if (fs.existsSync(htmlPath) && fs.statSync(htmlPath).isFile()) {
+      return res.sendFile(htmlPath);
+    }
+
+    // Try to serve index.html in directory
+    const indexInDirPath = path.join(absoluteDistDir, requestPath, 'index.html');
+    if (fs.existsSync(indexInDirPath)) {
+      return res.sendFile(indexInDirPath);
+    }
+
+    next();
+  });
+  
+  // Serve static files (CSS, JS, images, etc.)
+  app.use(express.static(absoluteDistDir));
+
+  // Enhanced 404 handler with debug info
+  app.use((req, res) => {
+    const notFoundPath = path.join(absoluteDistDir, '404.html');
+    const requestedPath = path.join(absoluteDistDir, req.path);
+    const fileType = path.extname(req.path) || 'directory';
+    
+    // Log to console for debugging
+    console.log(`❌ 404: ${req.path}`);
+    console.log(`   Looked for: ${requestedPath}`);
+    console.log(`   Type: ${fileType}`);
+    console.log(`   Referer: ${req.get('referer') || 'direct'}`);
+    
+    // If custom 404.html exists and this isn't already /404
+    if (fs.existsSync(notFoundPath) && req.path !== '/404') {
+      // Add debug info as query params
+      const debugUrl = `/404?path=${encodeURIComponent(req.path)}&type=${fileType}&from=${encodeURIComponent(req.get('referer') || 'direct')}`;
+      return res.redirect(debugUrl);
+    }
+    
+    // Serve custom 404 page
+    if (fs.existsSync(notFoundPath)) {
+      return res.status(404).sendFile(notFoundPath);
+    }
+    
+    // Fallback: minimal 404 response
+    res.status(404).send('<h1>404 - Not Found</h1>');
+  });
+
+  // Create HTTP server (wrap Express app)
+  const server = http.createServer(app);
+
+  // WebSocket server on separate port 3001
+  const wss = new WebSocketServer({ port: 3001 });
+  const clients = [];
+
+  wss.on('connection', (ws) => {
+    clients.push(ws);
+    console.log('🔌 WebSocket client connected');
+
+    ws.on('close', () => {
+      console.log('🔌 WebSocket client disconnected');
+      const index = clients.indexOf(ws);
+      if (index > -1) clients.splice(index, 1);
+    });
+
+    ws.on('error', (error) => {
+      console.error('WebSocket error:', error);
+    });
+  });
+
+  console.log('🔌 WebSocket server running at ws://localhost:3001');
+
+  // Start HTTP server
+  server.listen(port, () => {
+    console.log(`🚀 JUX dev server running at http://localhost:${port}`);
+  });
+
+  // Start file watcher
+  startWatcher(projectRoot, absoluteDistDir, clients);
+
+  // Graceful shutdown
+  const shutdown = async () => {
+    console.log('\n\n👋 Shutting down server...');
+    wss.close();
+    server.close();
+    process.exit(0);
+  };
+
+  process.on('SIGINT', shutdown);
+  process.on('SIGTERM', shutdown);
+
+  return { server };
+}
+
+async function initDatabase() {
+  const SQL = await initSqlJs();
+  const dbPath = path.join(__dirname, '../db/jux.db');
+  
+  if (fs.existsSync(dbPath)) {
+    const buffer = fs.readFileSync(dbPath);
+    db = new SQL.Database(buffer);
+    console.log('📊 Database loaded:', dbPath);
+  } else {
+    db = new SQL.Database();
+    console.log('📊 Using in-memory database');
+  }
+}
+
+export async function start(port = 3000, config = {}) {
+  await initDatabase();
+  return serve(port, config.distDir || './dist');
+}

package/machinery/validators/file-validator.js

@@ -0,0 +1,123 @@
+/**
+ * File validation utilities for Jux compiler
+ * Validates file types and content security
+ */
+export class FileValidator {
+  constructor() {
+    this.cssExtensions = /\.(css|scss|sass|less)$/i;
+    this.jsExtensions = /\.(js|mjs|ts|tsx|jsx)$/i;
+    this.imageExtensions = /\.(png|jpg|jpeg|gif|svg|webp|ico|bmp)$/i;
+  }
+
+  /**
+   * Check if file is a CSS file
+   */
+  isCSSFile(filepath) {
+    return this.cssExtensions.test(filepath);
+  }
+
+  /**
+   * Check if file is a JavaScript file
+   */
+  isJavaScriptFile(filepath) {
+    return this.jsExtensions.test(filepath);
+  }
+
+  /**
+   * Check if file is an image file
+   */
+  isImageFile(filepath) {
+    return this.imageExtensions.test(filepath);
+  }
+
+  /**
+   * Validate CSS content for security issues
+   * Detects <script> tags that could be injected
+   */
+  validateStyleContent(content, source = 'unknown') {
+    if (/<script/i.test(content)) {
+      throw new Error(
+        `🚨 Security Error: <script> tag detected in ${source}\n` +
+        `CSS content must not contain script tags.`
+      );
+    }
+    
+    if (/<\/script/i.test(content)) {
+      throw new Error(
+        `🚨 Security Error: </script> tag detected in ${source}\n` +
+        `CSS content must not contain script tags.`
+      );
+    }
+    
+    return content;
+  }
+
+  /**
+   * Determine import type based on file extension
+   * Returns: 'css' | 'js' | 'image' | 'unknown'
+   */
+  validateImportPath(importPath) {
+    // Handle URLs
+    if (importPath.startsWith('http://') || importPath.startsWith('https://')) {
+      // Try to infer from URL
+      if (this.isCSSFile(importPath)) return { type: 'css', path: importPath };
+      if (this.isJavaScriptFile(importPath)) return { type: 'js', path: importPath };
+      if (this.isImageFile(importPath)) return { type: 'image', path: importPath };
+      
+      // Default to unknown for CDN URLs without clear extensions
+      return { type: 'unknown', path: importPath };
+    }
+
+    // Local files
+    if (this.isCSSFile(importPath)) {
+      return { type: 'css', path: importPath };
+    }
+    
+    if (this.isJavaScriptFile(importPath)) {
+      return { type: 'js', path: importPath };
+    }
+    
+    if (this.isImageFile(importPath)) {
+      return { type: 'image', path: importPath };
+    }
+
+    return { type: 'unknown', path: importPath };
+  }
+
+  /**
+   * Validate array of imports and categorize them
+   * Returns categorized imports with warnings
+   */
+  categorizeImports(imports) {
+    const categorized = {
+      css: [],
+      js: [],
+      images: [],
+      unknown: []
+    };
+
+    const warnings = [];
+
+    for (const importPath of imports) {
+      const result = this.validateImportPath(importPath);
+      
+      if (result.type === 'unknown') {
+        warnings.push(
+          `⚠️  Unknown import type: ${importPath}\n` +
+          `   Supported: .css/.scss/.sass, .js/.ts, .png/.jpg/.svg`
+        );
+      }
+      
+      categorized[result.type === 'unknown' ? 'unknown' : result.type].push(result.path);
+    }
+
+    return { categorized, warnings };
+  }
+
+  /**
+   * Check if inline style content is empty or whitespace-only
+   */
+  isEmptyStyle(styleContent) {
+    return !styleContent || styleContent.trim().length === 0;
+  }
+}

package/machinery/watcher.js

@@ -0,0 +1,148 @@
+import chokidar from 'chokidar';
+import path from 'path';
+import { compileJuxFile, copyLibToOutput } from './compiler.js';
+import fs from 'fs';
+import { glob } from 'glob';
+
+export function startWatcher(projectRoot, distDir, clients = []) {
+  console.log('🔍 Watcher Configuration:');
+  console.log('  Project Root:', projectRoot);
+  console.log('  Dist Dir:', distDir);
+  
+  // Manually find all files to watch
+  console.log('\n📋 Finding files to watch...');
+  
+  // Project .jux files
+  const juxFiles = glob.sync('**/*.jux', { 
+    cwd: projectRoot, 
+    ignore: ['node_modules/**', 'dist/**', '.git/**'],
+    absolute: true
+  });
+  
+  // Vendor layout .jux files
+  const libRoot = path.resolve(projectRoot, '../lib');
+  const vendorJuxFiles = glob.sync('layouts/**/*.jux', { 
+    cwd: libRoot, 
+    absolute: true
+  });
+  
+  const cssFiles = glob.sync('**/*.css', { 
+    cwd: projectRoot, 
+    ignore: ['node_modules/**', 'dist/**', '.git/**'],
+    absolute: true
+  });
+  
+  const libFiles = glob.sync('**/*.{ts,js,css}', { 
+    cwd: libRoot,
+    absolute: true
+  });
+  
+  const machineryFiles = glob.sync('machinery/**/*.js', { 
+    cwd: path.resolve(projectRoot, '..'),
+    absolute: true
+  });
+
+  const allFiles = [...juxFiles, ...vendorJuxFiles, ...cssFiles, ...libFiles, ...machineryFiles];
+  
+  console.log(`  Found ${juxFiles.length} project .jux files`);
+  console.log(`  Found ${vendorJuxFiles.length} vendor .jux files`);
+  console.log(`  Found ${cssFiles.length} .css files`);
+  console.log(`  Found ${libFiles.length} lib/ files`);
+  console.log(`  Found ${machineryFiles.length} machinery/ files`);
+  console.log(`  Total: ${allFiles.length} files\n`);
+
+  if (allFiles.length === 0) {
+    console.error('❌ No files found to watch!');
+    return null;
+  }
+
+  // Watch the specific files we found
+  const watcher = chokidar.watch(allFiles, {
+    persistent: true,
+    ignoreInitial: true,
+    awaitWriteFinish: {
+      stabilityThreshold: 100,
+      pollInterval: 50
+    }
+  });
+
+  watcher.on('ready', () => {
+    console.log('✅ Watching for changes...\n');
+    allFiles.forEach(file => {
+      const rel = path.relative(path.resolve(projectRoot, '..'), file);
+      console.log(`  👁️  ${rel}`);
+    });
+    console.log('');
+  });
+
+  watcher.on('change', async (filePath) => {
+    const relativePath = path.relative(path.resolve(projectRoot, '..'), filePath);
+    console.log(`\n🔄 Changed: ${relativePath}`);
+
+    try {
+      if (filePath.endsWith('.jux')) {
+        console.log('   → Compiling .jux file...');
+        
+        // Determine if it's a vendor or project file
+        if (filePath.includes('/lib/layouts/')) {
+          // Vendor layout file
+          await compileJuxFile(filePath, { 
+            distDir: path.join(distDir, 'lib'),
+            projectRoot: libRoot,
+            isServe: true 
+          });
+        } else {
+          // Project file
+          await compileJuxFile(filePath, { distDir, projectRoot, isServe: true });
+        }
+        
+        console.log(`✅ Recompiled: ${relativePath}`);
+      } else if (filePath.includes('/lib/')) {
+        console.log('   → Rebuilding lib files...');
+        await copyLibToOutput(projectRoot, distDir);
+        console.log(`✅ Rebuilt lib files`);
+      } else if (filePath.endsWith('.css')) {
+        console.log('   → CSS file changed');
+        console.log(`✅ CSS change detected`);
+      } else if (filePath.includes('/machinery/')) {
+        console.log('   → Machinery file changed');
+        console.log(`⚠️  Restart server to apply changes`);
+      }
+
+      console.log(`   → Notifying ${clients.length} client(s)`);
+      notifyClients(clients);
+    } catch (err) {
+      console.error(`❌ Error processing ${relativePath}:`, err.message);
+      console.error(err.stack);
+    }
+  });
+
+  watcher.on('add', (filePath) => {
+    const relativePath = path.relative(path.resolve(projectRoot, '..'), filePath);
+    console.log(`➕ New file detected: ${relativePath}`);
+  });
+
+  watcher.on('unlink', (filePath) => {
+    const relativePath = path.relative(path.resolve(projectRoot, '..'), filePath);
+    console.log(`➖ File deleted: ${relativePath}`);
+  });
+
+  watcher.on('error', (error) => {
+    console.error('❌ Watcher error:', error);
+  });
+
+  return watcher;
+}
+
+function notifyClients(clients) {
+  let notified = 0;
+  clients.forEach(client => {
+    if (client.readyState === 1) {
+      client.send(JSON.stringify({ type: 'reload' }));
+      notified++;
+    }
+  });
+  if (notified > 0) {
+    console.log(`   ✉️  Reloaded ${notified} client(s)`);
+  }
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "juxscript",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "A JavaScript UX authorship platform",
+  "main": "lib/jux.js",
+  "types": "types/globals.d.ts",
+  "bin": {
+    "jux": "./bin/cli.js"
+  },
+  "scripts": {
+    "dev": "cd examples && npx jux serve",
+    "build:examples": "cd examples && rm -rf dist && npx jux build",
+    "test": "node test/run-tests.js"
+  },
+  "files": [
+    "lib",
+    "bin",
+    "machinery",
+    "types",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/juxscript/jux.git"
+  },
+  "keywords": [
+    "jux",
+    "ui",
+    "authoring",
+    "javascript"
+  ],
+  "author": "Tim Kerr",
+  "license": "MIT",
+  "dependencies": {
+    "acorn": "^8.15.0",
+    "chokidar": "^5.0.0",
+    "clean-css": "^5.3.3",
+    "esbuild": "^0.27.2",
+    "express": "^5.2.1",
+    "glob": "^13.0.0",
+    "node": "^24.12.0",
+    "sql.js": "^1.10.3",
+    "terser": "^5.44.1",
+    "ws": "^8.19.0"
+  },
+  "optionalDependencies": {
+    "mysql2": "^3.6.5",
+    "pg": "^8.11.3"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3"
+  }
+}

package/types/globals.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Global type declarations for .jux files
+ */
+
+import type { jux } from '../lib/jux';
+
+declare global {
+  const jux: typeof import('../lib/jux').jux;
+  
+  interface Window {
+    REACTIVE_DEBUG?: boolean;
+    juxContext?: Record<string, any>;
+  }
+}
+
+export {};