rip-lang 3.7.3 → 3.8.8

package/src/components.js

@@ -101,8 +101,11 @@ export function installComponentSupport(CodeGenerator) {
       }
       current = current[1];
     }
-    const tag = typeof current === 'string' ? current : (current instanceof String ? current.valueOf() : 'div');
-    return { tag, classes };
+    let raw = typeof current === 'string' ? current : (current instanceof String ? current.valueOf() : 'div');
+    // Split tag#id — e.g. "div#content" → tag: "div", id: "content"
+    let [tag, id] = raw.split('#');
+    if (!tag) tag = 'div';  // bare #id → div
+    return { tag, classes, id };
   };
 
   // ==========================================================================
@@ -118,6 +121,9 @@ export function installComponentSupport(CodeGenerator) {
       if (typeof sexpr === 'string' && this.reactiveMembers && this.reactiveMembers.has(sexpr)) {
         return ['.', ['.', 'this', sexpr], 'value'];
       }
+      if (typeof sexpr === 'string' && this.componentMembers && this.componentMembers.has(sexpr)) {
+        return ['.', 'this', sexpr];
+      }
       return sexpr;
     }
 
@@ -130,6 +136,11 @@ export function installComponentSupport(CodeGenerator) {
       return sexpr;
     }
 
+    // Dot access: transform the object but not the property name
+    if (sexpr[0] === '.') {
+      return ['.', this.transformComponentMembers(sexpr[1]), sexpr[2]];
+    }
+
     // Force thin arrows to fat arrows inside components to preserve this binding
     if (sexpr[0] === '->') {
       return ['=>', ...sexpr.slice(1).map(item => this.transformComponentMembers(item))];
@@ -236,12 +247,10 @@ export function installComponentSupport(CodeGenerator) {
     const lines = [];
     let blockFactoriesCode = '';
 
-    lines.push('class {');
+    lines.push('class extends __Component {');
 
-    // --- Constructor ---
-    lines.push('  constructor(props = {}) {');
-    lines.push('    const __prevComponent = __pushComponent(this);');
-    lines.push('');
+    // --- Init (called by __Component constructor) ---
+    lines.push('  _init(props) {');
 
     // Constants (readonly)
     for (const { name, value } of readonlyVars) {
@@ -249,10 +258,10 @@ export function installComponentSupport(CodeGenerator) {
       lines.push(`    this.${name} = props.${name} ?? ${val};`);
     }
 
-    // State variables (with isSignal prop merging)
+    // State variables (__state handles signal passthrough)
     for (const { name, value } of stateVars) {
       const val = this.generateInComponent(value, 'value');
-      lines.push(`    this.${name} = isSignal(props.${name}) ? props.${name} : __state(props.${name} ?? ${val});`);
+      lines.push(`    this.${name} = __state(props.${name} ?? ${val});`);
     }
 
     // Computed (derived)
@@ -263,13 +272,11 @@ export function installComponentSupport(CodeGenerator) {
 
     // Effects
     for (const effect of effects) {
-      const effectBody = effect[1];
+      const effectBody = effect[2];
       const effectCode = this.generateInComponent(effectBody, 'value');
-      lines.push(`    __effect(${effectCode});`);
+      lines.push(`    __effect(() => { ${effectCode}; });`);
     }
 
-    lines.push('');
-    lines.push('    __popComponent(__prevComponent);');
     lines.push('  }');
 
     // --- Methods ---
@@ -277,8 +284,10 @@ export function installComponentSupport(CodeGenerator) {
       if (Array.isArray(func) && (func[0] === '->' || func[0] === '=>')) {
         const [, params, methodBody] = func;
         const paramStr = Array.isArray(params) ? params.map(p => this.formatParam(p)).join(', ') : '';
-        const bodyCode = this.generateInComponent(methodBody, 'value');
-        lines.push(`  ${name}(${paramStr}) { return ${bodyCode}; }`);
+        const transformed = this.reactiveMembers ? this.transformComponentMembers(methodBody) : methodBody;
+        const isAsync = this.containsAwait(methodBody);
+        const bodyCode = this.generateFunctionBody(transformed, params || []);
+        lines.push(`  ${isAsync ? 'async ' : ''}${name}(${paramStr}) ${bodyCode}`);
       }
     }
 
@@ -286,8 +295,10 @@ export function installComponentSupport(CodeGenerator) {
     for (const { name, value } of lifecycleHooks) {
       if (Array.isArray(value) && (value[0] === '->' || value[0] === '=>')) {
         const [, , hookBody] = value;
-        const bodyCode = this.generateInComponent(hookBody, 'value');
-        lines.push(`  ${name}() { return ${bodyCode}; }`);
+        const transformed = this.reactiveMembers ? this.transformComponentMembers(hookBody) : hookBody;
+        const isAsync = this.containsAwait(hookBody);
+        const bodyCode = this.generateFunctionBody(transformed, []);
+        lines.push(`  ${isAsync ? 'async ' : ''}${name}() ${bodyCode}`);
       }
     }
 
@@ -316,25 +327,6 @@ export function installComponentSupport(CodeGenerator) {
       }
     }
 
-    // --- Mount ---
-    lines.push('  mount(target) {');
-    lines.push('    if (typeof target === "string") target = document.querySelector(target);');
-    lines.push('    this._target = target;');
-    lines.push('    this._root = this._create();');
-    lines.push('    target.appendChild(this._root);');
-    lines.push('    if (this._setup) this._setup();');
-    lines.push('    if (this.mounted) this.mounted();');
-    lines.push('    return this;');
-    lines.push('  }');
-
-    // --- Unmount ---
-    lines.push('  unmount() {');
-    lines.push('    if (this.unmounted) this.unmounted();');
-    lines.push('    if (this._root && this._root.parentNode) {');
-    lines.push('      this._root.parentNode.removeChild(this._root);');
-    lines.push('    }');
-    lines.push('  }');
-
     lines.push('}');
 
     // Restore context
@@ -356,6 +348,9 @@ export function installComponentSupport(CodeGenerator) {
     if (typeof sexpr === 'string' && this.reactiveMembers && this.reactiveMembers.has(sexpr)) {
       return `this.${sexpr}.value`;
     }
+    if (typeof sexpr === 'string' && this.componentMembers && this.componentMembers.has(sexpr)) {
+      return `this.${sexpr}`;
+    }
     if (Array.isArray(sexpr) && this.reactiveMembers) {
       const transformed = this.transformComponentMembers(sexpr);
       return this.generate(transformed, context);
@@ -445,9 +440,11 @@ export function installComponentSupport(CodeGenerator) {
         this._setupLines.push(`__effect(() => { ${textVar}.data = this.${str}.value; });`);
         return textVar;
       }
-      // Static tag without content
+      // Static tag without content (possibly with #id)
+      const [tagStr, idStr] = str.split('#');
       const elVar = this.newElementVar();
-      this._createLines.push(`${elVar} = document.createElement('${str}');`);
+      this._createLines.push(`${elVar} = document.createElement('${tagStr || 'div'}');`);
+      if (idStr) this._createLines.push(`${elVar}.id = '${idStr}';`);
       return elVar;
     }
 
@@ -465,9 +462,10 @@ export function installComponentSupport(CodeGenerator) {
       return this.generateChildComponent(headStr, rest);
     }
 
-    // HTML tag
+    // HTML tag (possibly with #id, e.g. div#content)
     if (headStr && this.isHtmlTag(headStr)) {
-      return this.generateTag(headStr, [], rest);
+      let [tagName, id] = headStr.split('#');
+      return this.generateTag(tagName || 'div', [], rest, id);
     }
 
     // Property chain (div.class or item.name)
@@ -482,17 +480,16 @@ export function installComponentSupport(CodeGenerator) {
           this._setupLines.push(`__effect(() => { ${textVar}.data = this.${prop}.value; });`);
           return textVar;
         }
-        if (this.componentMembers && this.componentMembers.has(prop)) {
-          const slotVar = this.newElementVar('slot');
-          this._createLines.push(`${slotVar} = this.${prop} instanceof Node ? this.${prop} : (this.${prop} != null ? document.createTextNode(String(this.${prop})) : document.createComment(''));`);
-          return slotVar;
-        }
+        // Slot/prop — handle DOM nodes (children) and plain values
+        const slotVar = this.newElementVar('slot');
+        this._createLines.push(`${slotVar} = this.${prop} instanceof Node ? this.${prop} : (this.${prop} != null ? document.createTextNode(String(this.${prop})) : document.createComment(''));`);
+        return slotVar;
       }
 
-      // HTML tag with classes (div.class)
-      const { tag, classes } = this.collectTemplateClasses(sexpr);
+      // HTML tag with classes (div.class) and optional #id
+      const { tag, classes, id } = this.collectTemplateClasses(sexpr);
       if (tag && this.isHtmlTag(tag)) {
-        return this.generateTag(tag, classes, []);
+        return this.generateTag(tag, classes, [], id);
       }
 
       // General property access (e.g., item.name in a loop)
@@ -504,21 +501,21 @@ export function installComponentSupport(CodeGenerator) {
 
     // Call expression: (tag.class args...) or ((tag.class) args...)
     if (Array.isArray(head)) {
-      // Nested dynamic class call: (((. div __cx__) "classes") children)
+      // Nested dynamic class call: (((. div __clsx) "classes") children)
       if (Array.isArray(head[0]) && head[0][0] === '.' &&
-          (head[0][2] === '__cx__' || (head[0][2] instanceof String && head[0][2].valueOf() === '__cx__'))) {
+          (head[0][2] === '__clsx' || (head[0][2] instanceof String && head[0][2].valueOf() === '__clsx'))) {
         const tag = typeof head[0][1] === 'string' ? head[0][1] : head[0][1].valueOf();
         const classExprs = head.slice(1);
         return this.generateDynamicTag(tag, classExprs, rest);
       }
 
-      const { tag, classes } = this.collectTemplateClasses(head);
+      const { tag, classes, id } = this.collectTemplateClasses(head);
       if (tag && this.isHtmlTag(tag)) {
-        // Dynamic class syntax: div.("classes") → (. div __cx__) "classes"
-        if (classes.length === 1 && classes[0] === '__cx__') {
+        // Dynamic class syntax: div.("classes") → (. div __clsx) "classes"
+        if (classes.length === 1 && classes[0] === '__clsx') {
           return this.generateDynamicTag(tag, rest, []);
         }
-        return this.generateTag(tag, classes, rest);
+        return this.generateTag(tag, classes, rest, id);
       }
     }
 
@@ -550,20 +547,12 @@ export function installComponentSupport(CodeGenerator) {
   };
 
   // --------------------------------------------------------------------------
-  // generateTag — HTML element with static classes and children
+  // appendChildren — shared child-processing loop for generateTag/generateDynamicTag
   // --------------------------------------------------------------------------
 
-  proto.generateTag = function(tag, classes, args) {
-    const elVar = this.newElementVar();
-    this._createLines.push(`${elVar} = document.createElement('${tag}');`);
-
-    if (classes.length > 0) {
-      this._createLines.push(`${elVar}.className = '${classes.join(' ')}';`);
-    }
-
+  proto.appendChildren = function(elVar, args) {
     for (const arg of args) {
-      // Arrow function = children
-      if (Array.isArray(arg) && (arg[0] === '->' || arg[0] === '=>')) {
+      if (this.is(arg, '->') || this.is(arg, '=>')) {
         const block = arg[2];
         if (this.is(block, 'block')) {
           for (const child of block.slice(1)) {
@@ -575,46 +564,47 @@ export function installComponentSupport(CodeGenerator) {
           this._createLines.push(`${elVar}.appendChild(${childVar});`);
         }
       }
-      // Object = attributes/events
       else if (this.is(arg, 'object')) {
         this.generateAttributes(elVar, arg);
       }
-      // String = text child
-      else if (typeof arg === 'string') {
+      else if (typeof arg === 'string' || arg instanceof String) {
         const textVar = this.newTextVar();
-        if (arg.startsWith('"') || arg.startsWith("'") || arg.startsWith('`')) {
-          this._createLines.push(`${textVar} = document.createTextNode(${arg});`);
-        } else if (this.reactiveMembers && this.reactiveMembers.has(arg)) {
-          this._createLines.push(`${textVar} = document.createTextNode('');`);
-          this._setupLines.push(`__effect(() => { ${textVar}.data = this.${arg}.value; });`);
-        } else if (this.componentMembers && this.componentMembers.has(arg)) {
-          this._createLines.push(`${textVar} = document.createTextNode(String(this.${arg}));`);
-        } else {
-          this._createLines.push(`${textVar} = document.createTextNode(String(${arg}));`);
-        }
-        this._createLines.push(`${elVar}.appendChild(${textVar});`);
-      }
-      // String object (from parser)
-      else if (arg instanceof String) {
         const val = arg.valueOf();
-        const textVar = this.newTextVar();
         if (val.startsWith('"') || val.startsWith("'") || val.startsWith('`')) {
           this._createLines.push(`${textVar} = document.createTextNode(${val});`);
         } else if (this.reactiveMembers && this.reactiveMembers.has(val)) {
           this._createLines.push(`${textVar} = document.createTextNode('');`);
           this._setupLines.push(`__effect(() => { ${textVar}.data = this.${val}.value; });`);
+        } else if (this.componentMembers && this.componentMembers.has(val)) {
+          this._createLines.push(`${textVar} = document.createTextNode(String(this.${val}));`);
         } else {
-          this._createLines.push(`${textVar} = document.createTextNode(String(${val}));`);
+          this._createLines.push(`${textVar} = document.createTextNode(${this.generateInComponent(arg, 'value')});`);
         }
         this._createLines.push(`${elVar}.appendChild(${textVar});`);
       }
-      // Other = nested element
       else if (arg) {
         const childVar = this.generateNode(arg);
         this._createLines.push(`${elVar}.appendChild(${childVar});`);
       }
     }
+  };
+
+  // --------------------------------------------------------------------------
+  // generateTag — HTML element with static classes and children
+  // --------------------------------------------------------------------------
+
+  proto.generateTag = function(tag, classes, args, id) {
+    const elVar = this.newElementVar();
+    this._createLines.push(`${elVar} = document.createElement('${tag}');`);
+
+    if (id) {
+      this._createLines.push(`${elVar}.id = '${id}';`);
+    }
+    if (classes.length > 0) {
+      this._createLines.push(`${elVar}.className = '${classes.join(' ')}';`);
+    }
 
+    this.appendChildren(elVar, args);
     return elVar;
   };
 
@@ -628,51 +618,13 @@ export function installComponentSupport(CodeGenerator) {
 
     if (classExprs.length > 0) {
       const classArgs = classExprs.map(e => this.generateInComponent(e, 'value')).join(', ');
-      const hasReactive = classExprs.some(e => this.hasReactiveDeps(e));
-      if (hasReactive) {
-        this._setupLines.push(`__effect(() => { ${elVar}.className = __cx__(${classArgs}); });`);
-      } else {
-        this._createLines.push(`${elVar}.className = __cx__(${classArgs});`);
-      }
-    }
-
-    for (const arg of children) {
-      const argHead = Array.isArray(arg) ? (arg[0] instanceof String ? arg[0].valueOf() : arg[0]) : null;
-      if (argHead === '->' || argHead === '=>') {
-        const block = arg[2];
-        const blockHead = Array.isArray(block) ? (block[0] instanceof String ? block[0].valueOf() : block[0]) : null;
-        if (blockHead === 'block') {
-          for (const child of block.slice(1)) {
-            const childVar = this.generateNode(child);
-            this._createLines.push(`${elVar}.appendChild(${childVar});`);
-          }
-        } else if (block) {
-          const childVar = this.generateNode(block);
-          this._createLines.push(`${elVar}.appendChild(${childVar});`);
-        }
-      }
-      else if (this.is(arg, 'object')) {
-        this.generateAttributes(elVar, arg);
-      }
-      else if (typeof arg === 'string' || arg instanceof String) {
-        const textVar = this.newTextVar();
-        const argStr = arg.valueOf();
-        if (argStr.startsWith('"') || argStr.startsWith("'") || argStr.startsWith('`')) {
-          this._createLines.push(`${textVar} = document.createTextNode(${argStr});`);
-        } else if (this.reactiveMembers && this.reactiveMembers.has(argStr)) {
-          this._createLines.push(`${textVar} = document.createTextNode('');`);
-          this._setupLines.push(`__effect(() => { ${textVar}.data = this.${argStr}.value; });`);
-        } else {
-          this._createLines.push(`${textVar} = document.createTextNode(${this.generateInComponent(arg, 'value')});`);
-        }
-        this._createLines.push(`${elVar}.appendChild(${textVar});`);
-      }
-      else {
-        const childVar = this.generateNode(arg);
-        this._createLines.push(`${elVar}.appendChild(${childVar});`);
-      }
+      // Dynamic classes are always wrapped in __effect — the .() syntax exists
+      // precisely for reactive class expressions. If a class were static, you'd
+      // just write div.foo.bar instead. The effect tracks signal reads at runtime.
+      this._setupLines.push(`__effect(() => { ${elVar}.className = __clsx(${classArgs}); });`);
     }
 
+    this.appendChildren(elVar, children);
     return elVar;
   };
 
@@ -689,8 +641,13 @@ export function installComponentSupport(CodeGenerator) {
       // Event handler: @click or (. this eventName)
       if (this.is(key, '.') && key[1] === 'this') {
         const eventName = key[2];
-        const handlerCode = this.generateInComponent(value, 'value');
-        this._createLines.push(`${elVar}.addEventListener('${eventName}', (e) => (${handlerCode})(e));`);
+        // Bind method references to this
+        if (typeof value === 'string' && this.componentMembers?.has(value)) {
+          this._createLines.push(`${elVar}.addEventListener('${eventName}', (e) => this.${value}(e));`);
+        } else {
+          const handlerCode = this.generateInComponent(value, 'value');
+          this._createLines.push(`${elVar}.addEventListener('${eventName}', (e) => (${handlerCode})(e));`);
+        }
         continue;
       }
 
@@ -701,6 +658,13 @@ export function installComponentSupport(CodeGenerator) {
           key = key.slice(1, -1);
         }
 
+        // Element ref: ref: "name" → this.name = element
+        if (key === 'ref') {
+          const refName = String(value).replace(/^["']|["']$/g, '');
+          this._createLines.push(`this.${refName} = ${elVar};`);
+          continue;
+        }
+
         // Two-way binding: __bind_value__ pattern
         if (key.startsWith(BIND_PREFIX) && key.endsWith(BIND_SUFFIX)) {
           const prop = key.slice(BIND_PREFIX.length, -BIND_SUFFIX.length);
@@ -1087,6 +1051,7 @@ export function installComponentSupport(CodeGenerator) {
 
     this._createLines.push(`${instVar} = new ${componentName}(${propsCode});`);
     this._createLines.push(`${elVar} = ${instVar}._create();`);
+    this._createLines.push(`(this._children || (this._children = [])).push(${instVar});`);
 
     this._setupLines.push(`if (${instVar}._setup) ${instVar}._setup();`);
 
@@ -1111,7 +1076,12 @@ export function installComponentSupport(CodeGenerator) {
         for (let i = 1; i < arg.length; i++) {
           const [key, value] = arg[i];
           if (typeof key === 'string') {
+            // Pass reactive members as signals (not values) for reactive prop binding.
+            // Child's __state passthrough returns the signal as-is — shared reactivity.
+            const prevReactive = this.reactiveMembers;
+            this.reactiveMembers = new Set();
             const valueCode = this.generateInComponent(value, 'value');
+            this.reactiveMembers = prevReactive;
             props.push(`${key}: ${valueCode}`);
           }
         }
@@ -1149,16 +1119,24 @@ export function installComponentSupport(CodeGenerator) {
   // --------------------------------------------------------------------------
 
   proto.hasReactiveDeps = function(sexpr) {
-    if (!this.reactiveMembers || this.reactiveMembers.size === 0) return false;
-
     if (typeof sexpr === 'string') {
-      return this.reactiveMembers.has(sexpr);
+      return !!(this.reactiveMembers && this.reactiveMembers.has(sexpr));
     }
 
     if (!Array.isArray(sexpr)) return false;
 
+    // Direct this.X — check reactive members
     if (sexpr[0] === '.' && sexpr[1] === 'this' && typeof sexpr[2] === 'string') {
-      return this.reactiveMembers.has(sexpr[2]);
+      return !!(this.reactiveMembers && this.reactiveMembers.has(sexpr[2]));
+    }
+
+    // Property chain through this (e.g., this.router.path, this.app.data.count)
+    // Props and members may hold reactive objects with signal-backed getters,
+    // so treat deeper this.X.Y chains as potentially reactive. The effect
+    // system handles actual tracking at runtime — wrapping a non-reactive
+    // chain in __effect just means it runs once with no overhead.
+    if (sexpr[0] === '.' && this._rootsAtThis(sexpr[1])) {
+      return true;
     }
 
     for (const child of sexpr) {
@@ -1168,6 +1146,15 @@ export function installComponentSupport(CodeGenerator) {
     return false;
   };
 
+  // _rootsAtThis — check if a property-access chain is rooted at 'this'
+  // --------------------------------------------------------------------------
+
+  proto._rootsAtThis = function(sexpr) {
+    if (typeof sexpr === 'string') return sexpr === 'this';
+    if (!Array.isArray(sexpr) || sexpr[0] !== '.') return false;
+    return this._rootsAtThis(sexpr[1]);
+  };
+
   // ==========================================================================
   // Component Runtime
   // ==========================================================================
@@ -1182,10 +1169,6 @@ export function installComponentSupport(CodeGenerator) {
 // Rip Component Runtime
 // ============================================================================
 
-function isSignal(v) {
-  return v != null && typeof v === 'object' && typeof v.read === 'function';
-}
-
 let __currentComponent = null;
 
 function __pushComponent(component) {
@@ -1223,13 +1206,43 @@ function hasContext(key) {
   return false;
 }
 
-function __cx__(...args) {
+function __clsx(...args) {
   return args.filter(Boolean).join(' ');
 }
 
+class __Component {
+  constructor(props = {}) {
+    Object.assign(this, props);
+    const prev = __pushComponent(this);
+    this._init(props);
+    __popComponent(prev);
+  }
+  _init() {}
+  mount(target) {
+    if (typeof target === "string") target = document.querySelector(target);
+    this._target = target;
+    this._root = this._create();
+    target.appendChild(this._root);
+    if (this._setup) this._setup();
+    if (this.mounted) this.mounted();
+    return this;
+  }
+  unmount() {
+    if (this._children) {
+      for (const child of this._children) {
+        child.unmount();
+      }
+    }
+    if (this.unmounted) this.unmounted();
+    if (this._root && this._root.parentNode) {
+      this._root.parentNode.removeChild(this._root);
+    }
+  }
+}
+
 // Register on globalThis for runtime deduplication
 if (typeof globalThis !== 'undefined') {
-  globalThis.__ripComponent = { isSignal, __pushComponent, __popComponent, setContext, getContext, hasContext, __cx__ };
+  globalThis.__ripComponent = { __pushComponent, __popComponent, setContext, getContext, hasContext, __clsx, __Component };
 }
 
 `;