juxscript 1.0.36 → 1.0.38

package/lib/components/container.ts

@@ -4,6 +4,20 @@ import { BaseComponent } from './base/BaseComponent.js';
 const TRIGGER_EVENTS = [] as const;
 const CALLBACK_EVENTS = [] as const;
 
+// Deprecation warning constant
+const DEPRECATION_WARNING = (feature: string) =>
+  `[JUX Deprecation Warning] Container.${feature} will be removed in v1.0.30+ (January 30, 2026). Please use CSS or the .style() method instead. See: https://juxscript.com/docs/migration`;
+
+// Track which warnings we've already shown (to avoid spam)
+const _shownWarnings = new Set<string>();
+
+function warnOnce(feature: string): void {
+  if (!_shownWarnings.has(feature)) {
+    console.warn(DEPRECATION_WARNING(feature));
+    _shownWarnings.add(feature);
+  }
+}
+
 export interface ContainerOptions {
   direction?: 'row' | 'column'; // should deprecate.
   gap?: number | string; // should deprecate.
@@ -28,6 +42,14 @@ type ContainerState = {
 
 export class Container extends BaseComponent<ContainerState> {
   constructor(id: string, options: ContainerOptions = {}) {
+    // Warn for deprecated options
+    if (options.direction !== undefined) warnOnce('direction (option)');
+    if (options.gap !== undefined) warnOnce('gap (option)');
+    if (options.wrap !== undefined) warnOnce('wrap (option)');
+    if (options.align !== undefined) warnOnce('align (option)');
+    if (options.justify !== undefined) warnOnce('justify (option)');
+    if (options.padding !== undefined) warnOnce('padding (option)');
+
     super(id, {
       direction: options.direction ?? 'column',// should deprecate.
       gap: options.gap ?? 0, //should deprecate.
@@ -61,31 +83,37 @@ export class Container extends BaseComponent<ContainerState> {
   // - bind(), sync(), renderTo()
 
   direction(value: 'row' | 'column'): this {
+    warnOnce('direction()');
     this.state.direction = value;
     return this;
   }
 
   gap(value: number | string): this {
+    warnOnce('gap()');
     this.state.gap = value;
     return this;
   }
 
   wrap(value: boolean): this {
+    warnOnce('wrap()');
     this.state.wrap = value;
     return this;
   }
 
   align(value: 'start' | 'center' | 'end' | 'stretch'): this {
+    warnOnce('align()');
     this.state.align = value;
     return this;
   }
 
   justify(value: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'): this {
+    warnOnce('justify()');
     this.state.justify = value;
     return this;
   }
 
   padding(value: string): this {
+    warnOnce('padding()');
     this.state.padding = value;
     return this;
   }
@@ -112,28 +140,34 @@ export class Container extends BaseComponent<ContainerState> {
 
       stateObj.subscribe((val: any) => {
         const transformed = transform(val);
-        /*
+
         if (property === 'direction') {
+          warnOnce('direction (sync)');
           this.state.direction = String(transformed);
           wrapper.style.flexDirection = this.state.direction;
         } else if (property === 'gap') {
+          warnOnce('gap (sync)');
           this.state.gap = transformed;
           const gapVal = typeof transformed === 'number' ? `${transformed}px` : transformed;
           wrapper.style.gap = gapVal;
         } else if (property === 'wrap') {
+          warnOnce('wrap (sync)');
           this.state.wrap = Boolean(transformed);
           wrapper.style.flexWrap = this.state.wrap ? 'wrap' : 'nowrap';
         } else if (property === 'align') {
+          warnOnce('align (sync)');
           this.state.align = String(transformed);
           wrapper.style.alignItems = this.state.align;
         } else if (property === 'justify') {
+          warnOnce('justify (sync)');
           this.state.justify = String(transformed);
           wrapper.style.justifyContent = this.state.justify;
         } else if (property === 'padding') {
+          warnOnce('padding (sync)');
           this.state.padding = String(transformed);
           wrapper.style.padding = this.state.padding;
         }
-          */
+
       });
 
     });

package/lib/components/docs-data.json

@@ -101,12 +101,6 @@
       "description": "List component",
       "constructor": "jux.list(id: string, options: ListOptions = {})",
       "fluentMethods": [
-        {
-          "name": "items",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set items"
-        },
         {
           "name": "addItem",
           "params": "(value)",
@@ -2059,5 +2053,5 @@
     }
   ],
   "version": "1.0.0",
-  "lastUpdated": "2026-01-28T15:24:08.460Z"
+  "lastUpdated": "2026-01-28T17:24:41.869Z"
 }

package/machinery/compiler.js

@@ -419,38 +419,78 @@ export async function bundleJuxFilesToRouter(projectRoot, distDir, options = {})
 }
 
 /**
- * Extract shared module exports from a .jux file
- * 
- * @param {string} juxContent - Original .jux file content
- * @param {string} moduleName - Module identifier
- * @returns {string} Shared module code
+ * Extract and replace all string literals with placeholders
+ * Handles: template literals WITHOUT interpolations, single quotes, double quotes
+ * SKIPS: Template literals WITH ${} interpolations (those are dynamic code)
  */
-function extractSharedModule(juxContent, moduleName) {
-  // Remove string literals temporarily to avoid false matches
+function extractStrings(code) {
   const strings = [];
+  let result = code;
+
+  // 1. Template literals WITHOUT interpolations (static strings only)
+  //    Match backticks that DON'T contain ${ 
+  result = result.replace(/`([^`$\\]|\\[^$])*`/g, (match) => {
+    // Double-check it doesn't contain ${ 
+    if (!match.includes('${')) {
+      strings.push(match);
+      return `__STRING_${strings.length - 1}__`;
+    }
+    return match; // Leave dynamic templates alone
+  });
 
-  // Handle template literals, single quotes, and double quotes separately
-  let code = juxContent
-    .replace(/`(?:\\.|[^`\\])*`/g, (match) => { strings.push(match); return `__STRING_${strings.length - 1}__`; })
-    .replace(/"(?:\\.|[^"\\])*"/g, (match) => { strings.push(match); return `__STRING_${strings.length - 1}__`; })
-    .replace(/'(?:\\.|[^'\\])*'/g, (match) => { strings.push(match); return `__STRING_${strings.length - 1}__`; });
+  // 2. Double-quoted strings (with escaped quotes)
+  result = result.replace(/"(?:[^"\\]|\\.)*"/g, (match) => {
+    strings.push(match);
+    return `__STRING_${strings.length - 1}__`;
+  });
 
-  // Remove ALL imports - including _dev-imports.js
-  code = code.replace(/import\s+\{[^}]+\}\s+from\s+__STRING_\d+__;?\s*/g, '');
-  code = code.replace(/import\s+\*\s+as\s+\w+\s+from\s+__STRING_\d+__;?\s*/g, '');
-  code = code.replace(/import\s+__STRING_\d+__;?\s*/g, '');
+  // 3. Single-quoted strings (with escaped quotes)
+  result = result.replace(/'(?:[^'\\]|\\.)*'/g, (match) => {
+    strings.push(match);
+    return `__STRING_${strings.length - 1}__`;
+  });
 
-  // Convert exports to declarations (keep function keyword for functions)
-  code = code.replace(/export\s+const\s+/g, 'const ');
-  code = code.replace(/export\s+let\s+/g, 'let ');
-  code = code.replace(/export\s+function\s+/g, 'function ');
-  code = code.replace(/export\s+class\s+/g, 'class ');
-  code = code.replace(/export\s+\{([^}]+)\}\s*;?\s*/g, '');
+  return { code: result, strings };
+}
 
-  // Restore string literals
-  code = code.replace(/__STRING_(\d+)__/g, (_, index) => strings[index]);
+/**
+ * Restore string placeholders back to original strings
+ */
+function restoreStrings(code, strings) {
+  return code.replace(/__STRING_(\d+)__/g, (match, index) => {
+    const idx = parseInt(index, 10);
+    if (idx >= 0 && idx < strings.length) {
+      return strings[idx];
+    }
+    console.warn(`[Compiler] String placeholder ${match} not found (idx: ${idx}, available: ${strings.length})`);
+    return match; // Leave as-is for debugging
+  });
+}
 
-  return code;
+/**
+ * Extract shared module exports from a .jux file
+ * 
+ * @param {string} juxContent - Original .jux file content
+ * @param {string} moduleName - Module identifier
+ * @returns {string} Shared module code
+ */
+function extractSharedModule(juxContent, moduleName) {
+  const { code, strings } = extractStrings(juxContent);
+
+  // Remove ALL imports
+  let result = code.replace(/import\s+\{[^}]+\}\s+from\s+__STRING_\d+__;?\s*/g, '');
+  result = result.replace(/import\s+\*\s+as\s+\w+\s+from\s+__STRING_\d+__;?\s*/g, '');
+  result = result.replace(/import\s+__STRING_\d+__;?\s*/g, '');
+
+  // Convert exports to declarations
+  result = result.replace(/export\s+const\s+/g, 'const ');
+  result = result.replace(/export\s+let\s+/g, 'let ');
+  result = result.replace(/export\s+function\s+/g, 'function ');
+  result = result.replace(/export\s+class\s+/g, 'class ');
+  result = result.replace(/export\s+\{([^}]+)\}\s*;?\s*/g, '');
+
+  // Restore strings
+  return restoreStrings(result, strings);
 }
 
 /**
@@ -464,36 +504,27 @@ function extractSharedModule(juxContent, moduleName) {
  * @returns {string} View function code
  */
 function transformJuxToViewFunction(juxContent, functionName, pageName, relativePath, sharedModules) {
-  // Remove string literals temporarily to avoid false matches
-  const strings = [];
-
-  // Handle template literals, single quotes, and double quotes separately
-  let code = juxContent
-    .replace(/`(?:\\.|[^`\\])*`/g, (match) => { strings.push(match); return `__STRING_${strings.length - 1}__`; })
-    .replace(/"(?:\\.|[^"\\])*"/g, (match) => { strings.push(match); return `__STRING_${strings.length - 1}__`; })
-    .replace(/'(?:\\.|[^'\\])*'/g, (match) => { strings.push(match); return `__STRING_${strings.length - 1}__`; });
-
-  // Remove ALL imports - now matching against placeholders
-  code = code.replace(/import\s+\{[^}]+\}\s+from\s+__STRING_\d+__;?\s*/g, '');
-  code = code.replace(/import\s+\*\s+as\s+\w+\s+from\s+__STRING_\d+__;?\s*/g, '');
-  code = code.replace(/import\s+__STRING_\d+__;?\s*/g, '');
+  const { code, strings } = extractStrings(juxContent);
 
-  // Handle exports - convert named exports to const declarations
-  code = code.replace(/export\s+const\s+(\w+)\s*=/g, 'const $1 =');
-  code = code.replace(/export\s+let\s+(\w+)\s*=/g, 'let $1 =');
-  code = code.replace(/export\s+function\s+(\w+)/g, 'const $1 = function');
-  code = code.replace(/export\s+class\s+/g, 'class ');
-  code = code.replace(/export\s+default\s+/g, '');
-  code = code.replace(/export\s+\{([^}]+)\}\s*;?\s*/g, '');
+  // Remove ALL imports
+  let result = code.replace(/import\s+\{[^}]+\}\s+from\s+__STRING_\d+__;?\s*/g, '');
+  result = result.replace(/import\s+\*\s+as\s+\w+\s+from\s+__STRING_\d+__;?\s*/g, '');
+  result = result.replace(/import\s+__STRING_\d+__;?\s*/g, '');
 
-  // Only replace .renderTo(container) calls - leave explicit render targets alone
-  code = code.replace(/\.renderTo\(container\)/g, '.render("#app")');
+  // Handle exports
+  result = result.replace(/export\s+const\s+(\w+)\s*=/g, 'const $1 =');
+  result = result.replace(/export\s+let\s+(\w+)\s*=/g, 'let $1 =');
+  result = result.replace(/export\s+function\s+(\w+)/g, 'const $1 = function');
+  result = result.replace(/export\s+class\s+/g, 'class ');
+  result = result.replace(/export\s+default\s+/g, '');
+  result = result.replace(/export\s+\{([^}]+)\}\s*;?\s*/g, '');
 
-  // Only replace empty .render() calls (no arguments)
-  code = code.replace(/\.render\(\s*\)/g, '.render("#app")');
+  // Replace render patterns
+  result = result.replace(/\.renderTo\(container\)/g, '.render("#app")');
+  result = result.replace(/\.render\(\s*\)/g, '.render("#app")');
 
-  // Restore string literals
-  code = code.replace(/__STRING_(\d+)__/g, (_, index) => strings[index]);
+  // Restore strings
+  result = restoreStrings(result, strings);
 
   const cleanName = functionName
     .replace(/[-_]/g, ' ')
@@ -504,7 +535,7 @@ function transformJuxToViewFunction(juxContent, functionName, pageName, relative
   return `
 // View: ${cleanName}
 function ${cleanName}() {
-  ${code}
+  ${result}
   
   return document.getElementById('app');
 }`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.0.36",
+  "version": "1.0.38",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "lib/jux.js",