juxscript 1.0.2 → 1.0.4

package/lib/reactivity/state.ts

@@ -0,0 +1,364 @@
+/**
+ * Reactive state container
+ * Notifies subscribers when value changes
+ */
+export class State<T> {
+    private _value: T;
+    private _subscribers: Set<(value: T) => void> = new Set();
+    private _effects: Set<Effect> = new Set();
+
+    constructor(initialValue: T) {
+        this._value = initialValue;
+    }
+
+    /**
+     * Get current value
+     */
+    get value(): T {
+        return this._value;
+    }
+
+    /**
+     * Set new value and notify subscribers
+     */
+    set(newValue: T): void {
+        if (this._value !== newValue) {
+            this._value = newValue;
+            this._notify();
+            this._runEffects();
+        }
+    }
+
+    /**
+     * Update value using a function
+     */
+    update(fn: (current: T) => T): void {
+        this.set(fn(this._value));
+    }
+
+    /**
+     * Subscribe to value changes
+     * Returns unsubscribe function
+     */
+    subscribe(callback: (value: T) => void): () => void {
+        this._subscribers.add(callback);
+        callback(this._value); // Call immediately with current value
+        return () => this._subscribers.delete(callback);
+    }
+
+    /**
+     * Notify all subscribers of value change
+     */
+    private _notify(): void {
+        this._subscribers.forEach(callback => callback(this._value));
+    }
+
+    /**
+     * Run all registered effects
+     */
+    private _runEffects(): void {
+        this._effects.forEach(effect => effect.run(this._value));
+    }
+
+    /* -------------------------
+     * Higher-Order Effects
+     * ------------------------- */
+
+    /**
+     * Bind visibility to element (v-show style)
+     * Toggles display: none on/off
+     * For animations, use bindClass() instead
+     */
+    bindVisibility(elementId: string): () => void {
+        if (typeof this._value !== 'boolean') {
+            console.warn(`State.bindVisibility: State value must be boolean, got ${typeof this._value}`);
+            return () => { };
+        }
+
+        const effect = new VisibilityEffect(elementId);
+        this._effects.add(effect);
+        effect.run(this._value); // Initial run
+
+        return () => this._effects.delete(effect);
+    }
+
+    /**
+     * Bind value property to element (for progress, input, range, etc.)
+     * @param elementId - DOM element ID
+     * @param transform - Optional transform function
+     */
+    bindValue(elementId: string, transform?: (val: T) => number | string): () => void {
+        const effect = new ValueEffect(elementId, transform);
+        this._effects.add(effect);
+        effect.run(this._value);
+
+        return () => this._effects.delete(effect);
+    }
+
+    /**
+     * Bind text content to element
+     * @param elementId - DOM element ID
+     * @param transform - Optional transform function
+     */
+    bindText(elementId: string, transform?: (val: T) => string): () => void {
+        const effect = new TextEffect(elementId, transform);
+        this._effects.add(effect);
+        effect.run(this._value);
+
+        return () => this._effects.delete(effect);
+    }
+
+    /**
+     * Bind attribute to element
+     * @param elementId - DOM element ID
+     * @param attrName - Attribute name
+     * @param transform - Optional transform function
+     */
+    bindAttr(elementId: string, attrName: string, transform?: (val: T) => string): () => void {
+        const effect = new AttrEffect(elementId, attrName, transform);
+        this._effects.add(effect);
+        effect.run(this._value);
+
+        return () => this._effects.delete(effect);
+    }
+
+    /**
+     * Bind CSS class to element
+     * @param elementId - DOM element ID
+     * @param className - Class to toggle
+     * @param condition - Optional condition function
+     */
+    bindClass(elementId: string, className: string, condition?: (val: T) => boolean): () => void {
+        const effect = new ClassEffect(elementId, className, condition);
+        this._effects.add(effect);
+        effect.run(this._value);
+
+        return () => this._effects.delete(effect);
+    }
+
+    /**
+     * Bind innerHTML to element
+     * @param elementId - DOM element ID
+     * @param transform - Optional transform function
+     */
+    bindHTML(elementId: string, transform?: (val: T) => string): () => void {
+        const effect = new HTMLEffect(elementId, transform);
+        this._effects.add(effect);
+        effect.run(this._value);
+
+        return () => this._effects.delete(effect);
+    }
+
+    /* -------------------------
+     * Number Helpers
+     * ------------------------- */
+
+    /**
+     * Increment (numbers only)
+     */
+    increment = (): void => {
+        if (typeof this._value === 'number') {
+            this.set((this._value + 1) as T);
+        }
+    }
+
+    /**
+     * Decrement (numbers only)
+     */
+    decrement = (): void => {
+        if (typeof this._value === 'number') {
+            this.set((this._value - 1) as T);
+        }
+    }
+
+    /**
+     * Add amount (returns function for event handlers)
+     */
+    add = (amount: number) => (): void => {
+        if (typeof this._value === 'number') {
+            this.set((this._value + amount) as T);
+        }
+    }
+
+    /**
+     * Subtract amount
+     */
+    subtract = (amount: number) => (): void => {
+        if (typeof this._value === 'number') {
+            this.set((this._value - amount) as T);
+        }
+    }
+
+    /**
+     * Multiply by factor
+     */
+    multiply = (factor: number) => (): void => {
+        if (typeof this._value === 'number') {
+            this.set((this._value * factor) as T);
+        }
+    }
+
+    /* -------------------------
+     * Boolean Helpers
+     * ------------------------- */
+
+    /**
+     * Toggle (booleans only)
+     */
+    toggle = (): void => {
+        if (typeof this._value === 'boolean') {
+            this.set((!this._value) as T);
+        }
+    }
+
+    /* -------------------------
+     * General Helpers
+     * ------------------------- */
+
+    /**
+     * Reset to initial value (returns function)
+     */
+    reset = (initialValue: T) => (): void => {
+        this.set(initialValue);
+    }
+}
+
+/* -------------------------
+ * Effect Classes
+ * ------------------------- */
+
+interface Effect {
+    run(value: any): void;
+}
+
+class VisibilityEffect implements Effect {
+    constructor(
+        private elementId: string
+    ) { }
+
+    run(visible: boolean): void {
+        const el = document.getElementById(this.elementId);
+        if (!el) return;
+
+        // Simple display toggle (Vue v-show style)
+        el.style.display = visible ? '' : 'none';
+    }
+}
+
+interface VisibilityOptions {
+    mode?: 'display' | 'visibility' | 'opacity' | 'class';
+    visibleClass?: string;
+    hiddenClass?: string;
+}
+
+class TextEffect implements Effect {
+    constructor(
+        private elementId: string,
+        private transform?: (val: any) => string
+    ) { }
+
+    run(value: any): void {
+        const el = document.getElementById(this.elementId);
+        if (!el) return;
+
+        const text = this.transform ? this.transform(value) : String(value);
+        el.textContent = text;
+    }
+}
+
+class HTMLEffect implements Effect {
+    constructor(
+        private elementId: string,
+        private transform?: (val: any) => string
+    ) { }
+
+    run(value: any): void {
+        const el = document.getElementById(this.elementId);
+        if (!el) return;
+
+        const html = this.transform ? this.transform(value) : String(value);
+        el.innerHTML = html;
+    }
+}
+
+class AttrEffect implements Effect {
+    constructor(
+        private elementId: string,
+        private attrName: string,
+        private transform?: (val: any) => string
+    ) { }
+
+    run(value: any): void {
+        const el = document.getElementById(this.elementId);
+        if (!el) return;
+
+        const attrValue = this.transform ? this.transform(value) : String(value);
+        el.setAttribute(this.attrName, attrValue);
+    }
+}
+
+class ClassEffect implements Effect {
+    constructor(
+        private elementId: string,
+        private className: string,
+        private condition?: (val: any) => boolean
+    ) { }
+
+    run(value: any): void {
+        const el = document.getElementById(this.elementId);
+        if (!el) return;
+
+        const shouldAdd = this.condition ? this.condition(value) : Boolean(value);
+        if (shouldAdd) {
+            el.classList.add(this.className);
+        } else {
+            el.classList.remove(this.className);
+        }
+    }
+}
+
+class ValueEffect implements Effect {
+    constructor(
+        private elementId: string,
+        private transform?: (val: any) => number | string
+    ) { }
+
+    run(value: any): void {
+        const el = document.getElementById(this.elementId);
+        if (!el) return;
+
+        const newValue = this.transform ? this.transform(value) : value;
+
+        // For progress/jux components, set data-value and trigger update
+        if (el.classList.contains('jux-progress')) {
+            el.setAttribute('data-value', String(newValue));
+
+            // Find the progress instance and call value() to trigger update
+            const progressBar = el.querySelector('.jux-progress-bar');
+            if (progressBar) {
+                const percentage = typeof newValue === 'number' ? newValue : parseFloat(String(newValue));
+                const max = parseFloat(progressBar.getAttribute('aria-valuemax') || '100');
+                const percentageValue = (percentage / max) * 100;
+                (progressBar as HTMLElement).style.width = `${percentageValue}%`;
+                progressBar.setAttribute('aria-valuenow', String(percentage));
+            }
+            return;
+        }
+
+        // For native HTML elements (input, progress, meter)
+        if ('value' in el) {
+            (el as any).value = String(newValue);
+        }
+
+        if (el instanceof HTMLProgressElement || el.tagName === 'METER') {
+            el.setAttribute('value', String(newValue));
+        }
+    }
+}
+
+/**
+ * Create reactive state
+ */
+export function state<T>(initialValue: T): State<T> {
+    return new State(initialValue);
+}

package/machinery/compiler.js

@@ -1,14 +1,23 @@
 import fs from 'fs';
 import path from 'path';
 import esbuild from 'esbuild';
-import { generateDocs } from './doc-generator.js';
 
+/**
+ * Compile a .jux file to .js and .html
+ * 
+ * @param {string} juxFilePath - Path to the .jux file
+ * @param {Object} options - Compilation options
+ * @param {string} options.distDir - Output directory
+ * @param {string} options.projectRoot - Project root directory
+ * @param {boolean} options.isServe - Whether serving for development
+ * @returns {Promise<{jsOutputPath: string, htmlOutputPath: string}>}
+ */
 export async function compileJuxFile(juxFilePath, options = {}) {
   const { distDir, projectRoot, isServe = false } = options;
-  
+
   const relativePath = path.relative(projectRoot, juxFilePath);
   const parsedPath = path.parse(relativePath);
-  
+
   // Output paths
   const outputDir = path.join(distDir, parsedPath.dir);
   const jsOutputPath = path.join(outputDir, `${parsedPath.name}.js`);
@@ -27,17 +36,17 @@ export async function compileJuxFile(juxFilePath, options = {}) {
   // Calculate depth for relative paths
   const depth = parsedPath.dir.split(path.sep).filter(p => p).length;
   const libPath = depth === 0 ? './lib/jux.js' : '../'.repeat(depth) + 'lib/jux.js';
-  const styleBasePath = depth === 0 ? './lib/styles/' : '../'.repeat(depth) + 'lib/styles/';
+  const styleBasePath = depth === 0 ? './lib/presets/' : '../'.repeat(depth) + 'lib/presets/';
 
   // Transform imports
   let transformedContent = juxContent;
-  
+
   // Replace common import patterns with calculated path
   transformedContent = transformedContent.replace(
     /from\s+['"]\.\.?\/lib\/jux\.js['"]/g,
     `from '${libPath}'`
   );
-  
+
   // Only inject import if:
   // 1. File is not empty (ignoring whitespace and comments)
   // 2. File uses 'jux.' but has no import statement
@@ -45,11 +54,11 @@ export async function compileJuxFile(juxFilePath, options = {}) {
     .replace(/\/\*[\s\S]*?\*\//g, '') // Remove block comments
     .replace(/\/\/.*/g, '')             // Remove line comments
     .trim();
-  
+
   const hasContent = contentWithoutComments.length > 0;
   const usesJux = /\bjux\./g.test(contentWithoutComments);
   const hasImport = /import\s+.*from/.test(transformedContent);
-  
+
   if (hasContent && usesJux && !hasImport) {
     transformedContent = `import { jux } from '${libPath}';\n\n${transformedContent}`;
   }
@@ -61,28 +70,19 @@ export async function compileJuxFile(juxFilePath, options = {}) {
 
   // Generate HTML with correct script path
   const scriptPath = `./${parsedPath.name}.js`;
-  
+
   const html = `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>${parsedPath.name}</title>
-  
   <!-- JUX Core Styles -->
-  <link rel="stylesheet" href="${styleBasePath}tokens/dark.css">
   <link rel="stylesheet" href="${styleBasePath}global.css">
 </head>
-<body data-theme="dark">
+<body data-theme="">
   <!-- App container -->
   <div id="app" data-jux-page="${parsedPath.name}"></div>
-  
-  <!-- Main content -->
-  <div id="appmain"></div>
-  
-  <!-- Modal overlay -->
-  <div id="appmodal" aria-hidden="true" role="dialog"></div>
-  
   <script type="module" src="${scriptPath}"></script>
   ${isServe ? `
   <!-- Hot reload -->
@@ -107,10 +107,16 @@ export async function compileJuxFile(juxFilePath, options = {}) {
   return { jsOutputPath, htmlOutputPath };
 }
 
+/**
+ * Copy and build the JUX library from TypeScript to JavaScript
+ * 
+ * @param {string} projectRoot - Root directory containing lib/
+ * @param {string} distDir - Destination directory for built files
+ */
 export async function copyLibToOutput(projectRoot, distDir) {
   // Simplified lib path resolution
   const libSrc = path.resolve(projectRoot, '../lib');
-  
+
   if (!fs.existsSync(libSrc)) {
     throw new Error(`lib/ directory not found at ${libSrc}`);
   }
@@ -129,7 +135,7 @@ export async function copyLibToOutput(projectRoot, distDir) {
 
   // Find all TypeScript entry points
   const tsFiles = findFiles(libSrc, '.ts');
-  
+
   if (tsFiles.length === 0) {
     console.warn('⚠️  No TypeScript files found in lib/');
     return;
@@ -168,50 +174,123 @@ export async function copyLibToOutput(projectRoot, distDir) {
   console.log('✅ Library ready\n');
 }
 
+/**
+ * Copy project assets (CSS, JS, images) from jux/ to dist/
+ * 
+ * @param {string} projectRoot - Source directory (jux/)
+ * @param {string} distDir - Destination directory (jux-dist/)
+ */
 export async function copyProjectAssets(projectRoot, distDir) {
   console.log('📦 Copying project assets...');
-  
+
   // Find all CSS and JS files in project root (excluding node_modules, dist, .git)
   const allFiles = [];
   findProjectFiles(projectRoot, ['.css', '.js'], allFiles, projectRoot);
-  
+
   console.log(`   Found ${allFiles.length} asset file(s)`);
-  
+
   for (const srcPath of allFiles) {
     const relativePath = path.relative(projectRoot, srcPath);
     const destPath = path.join(distDir, relativePath);
     const destDir = path.dirname(destPath);
-    
+
     // Create destination directory if needed
     if (!fs.existsSync(destDir)) {
       fs.mkdirSync(destDir, { recursive: true });
     }
-    
+
     // Copy file
     fs.copyFileSync(srcPath, destPath);
     console.log(`   ✓ ${relativePath}`);
   }
-  
+
   console.log('✅ Project assets copied\n');
 }
 
+/**
+ * Transpile TypeScript files from jux/ to jux-dist/, preserving folder structure
+ * 
+ * @param {string} srcDir - Source directory (jux/)
+ * @param {string} destDir - Destination directory (jux-dist/)
+ * @example
+ * // jux/samples/mypage.ts -> jux-dist/samples/mypage.js
+ * await transpileProjectTypeScript('jux/', 'jux-dist/');
+ */
+export async function transpileProjectTypeScript(srcDir, destDir) {
+  console.log('🔷 Transpiling TypeScript files...');
+
+  // Find all TypeScript files in the project
+  const tsFiles = findFiles(srcDir, '.ts');
+
+  if (tsFiles.length === 0) {
+    console.log('   No TypeScript files found in project');
+    return;
+  }
+
+  console.log(`   Found ${tsFiles.length} TypeScript file(s)`);
+
+  try {
+    // Build all TypeScript files with esbuild
+    await esbuild.build({
+      entryPoints: tsFiles,
+      bundle: false,
+      format: 'esm',
+      outdir: destDir,
+      outbase: srcDir,
+      platform: 'browser',
+      target: 'es2020',
+      loader: {
+        '.ts': 'ts'
+      },
+      logLevel: 'warning'
+    });
+
+    // Log each transpiled file
+    tsFiles.forEach(tsFile => {
+      const relativePath = path.relative(srcDir, tsFile);
+      const jsPath = relativePath.replace(/\.ts$/, '.js');
+      console.log(`   ✓ ${relativePath} → ${jsPath}`);
+    });
+
+    console.log('✅ TypeScript transpiled\n');
+
+  } catch (err) {
+    console.error('❌ Failed to transpile TypeScript:', err.message);
+    throw err;
+  }
+}
+
+/**
+ * Recursively find files with a specific extension
+ * 
+ * @param {string} dir - Directory to search
+ * @param {string} extension - File extension (e.g., '.ts')
+ * @param {string[]} fileList - Accumulator for found files
+ * @returns {string[]} Array of file paths
+ */
 function findFiles(dir, extension, fileList = []) {
   const files = fs.readdirSync(dir);
-  
+
   files.forEach(file => {
     const filePath = path.join(dir, file);
     const stat = fs.statSync(filePath);
-    
+
     if (stat.isDirectory()) {
       findFiles(filePath, extension, fileList);
     } else if (file.endsWith(extension)) {
       fileList.push(filePath);
     }
   });
-  
+
   return fileList;
 }
 
+/**
+ * Copy non-TypeScript files (CSS, JSON, JS, SVG, etc.)
+ * 
+ * @param {string} src - Source directory
+ * @param {string} dest - Destination directory
+ */
 function copyNonTsFiles(src, dest) {
   const entries = fs.readdirSync(src, { withFileTypes: true });
 
@@ -226,23 +305,32 @@ function copyNonTsFiles(src, dest) {
       copyNonTsFiles(srcPath, destPath);
     } else if (entry.isFile()) {
       const ext = path.extname(entry.name);
-      // Copy CSS, JSON, and JS files (but not .ts files)
-      if (ext === '.css' || ext === '.json' || (ext === '.js' && !srcPath.endsWith('.ts'))) {
+      // Copy CSS, JSON, SVG, and JS files (but not .ts files)
+      if (['.css', '.json', '.js', '.svg', '.png', '.jpg', '.jpeg', '.gif', '.webp'].includes(ext)) {
         fs.copyFileSync(srcPath, destPath);
-        console.log(`  → Copied: ${path.relative(src, srcPath)}`);
       }
     }
   }
 }
 
-function findProjectFiles(dir, extensions, fileList = [], rootDir = dir, excludeDirs = ['node_modules', 'dist', '.git', 'lib']) {
+/**
+ * Find project files with specific extensions, excluding certain directories
+ * 
+ * @param {string} dir - Directory to search
+ * @param {string[]} extensions - File extensions to find
+ * @param {string[]} fileList - Accumulator for found files
+ * @param {string} rootDir - Root directory for relative paths
+ * @param {string[]} excludeDirs - Directories to exclude
+ * @returns {string[]} Array of file paths
+ */
+function findProjectFiles(dir, extensions, fileList = [], rootDir = dir, excludeDirs = ['node_modules', 'jux-dist', '.git', 'lib']) {
   if (!fs.existsSync(dir)) return fileList;
-  
+
   const entries = fs.readdirSync(dir, { withFileTypes: true });
-  
+
   for (const entry of entries) {
     const fullPath = path.join(dir, entry.name);
-    
+
     if (entry.isDirectory()) {
       // Skip excluded directories
       if (excludeDirs.includes(entry.name)) {
@@ -257,6 +345,6 @@ function findProjectFiles(dir, extensions, fileList = [], rootDir = dir, exclude
       }
     }
   }
-  
+
   return fileList;
 }

package/machinery/generators/html.js

@@ -42,8 +42,7 @@ export function generateHTML(fileName, options = {}) {
   <title>${fileName}</title>
   
   <!-- JUX Core Styles -->
-  <link rel="stylesheet" href="${prefix}lib/styles/tokens/dark.css">
-  <link rel="stylesheet" href="${prefix}lib/styles/global.css">
+  <link rel="stylesheet" href="${prefix}lib/presets/global.css">
 </head>
 <body data-theme="dark">
 ${appStructure}
@@ -61,7 +60,7 @@ ${appStructure}
  */
 function buildAppStructure(pageName) {
   const page = pageName || 'index';
-  
+
   return `  <!-- App Container -->
   <div id="app" data-jux-page="${page}">
     <!-- Header -->

package/machinery/server.js

@@ -186,7 +186,7 @@ async function initDatabase() {
   }
 }
 
-export async function start(port = 3000, config = {}) {
+export async function start(port = 3000) {
   await initDatabase();
-  return serve(port, config.distDir || './jux-dist');  // Changed default
+  return serve(port, './jux-dist');  // Changed default
 }