rip-lang 3.10.6 → 3.10.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rip-lang",
-  "version": "3.10.6",
+  "version": "3.10.7",
   "description": "A modern language that compiles to JavaScript",
   "type": "module",
   "main": "src/compiler.js",

package/src/compiler.js

@@ -2980,6 +2980,16 @@ function __state(initialValue) {
     },
 
     read() { return value; },
+    touch() {
+      if (dead || notifying) return;
+      notifying = true;
+      for (const sub of subscribers) {
+        if (sub.markDirty) sub.markDirty();
+        else __pendingEffects.add(sub);
+      }
+      if (!__batching) __flushEffects();
+      notifying = false;
+    },
     lock() { locked = true; return state; },
     free() { subscribers.clear(); return state; },
     kill() { dead = true; subscribers.clear(); return value; },

package/src/components.js

@@ -7,7 +7,7 @@
 //
 // Naming: All render-tree generators use generate* (consistent with compiler).
 
-import { TEMPLATE_TAGS } from './tags.js';
+import { TEMPLATE_TAGS, SVG_TAGS } from './tags.js';
 
 // ============================================================================
 // Constants
@@ -24,6 +24,8 @@ const BOOLEAN_ATTRS = new Set([
   'allowfullscreen', 'inert',
 ]);
 
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
 // ============================================================================
 // Standalone Utilities
 // ============================================================================
@@ -792,6 +794,7 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     this._createLines = [];
     this._setupLines = [];
     this._blockFactories = [];
+    this._loopVarStack = [];
 
     const statements = this.is(body, 'block') ? body.slice(1) : [body];
 
@@ -855,7 +858,12 @@ export function installComponentSupport(CodeGenerator, Lexer) {
       // Static tag without content (possibly with #id)
       const [tagStr, idStr] = str.split('#');
       const elVar = this.newElementVar();
-      this._createLines.push(`${elVar} = document.createElement('${tagStr || 'div'}');`);
+      const actualTag = tagStr || 'div';
+      if (SVG_TAGS.has(actualTag) || this._svgDepth > 0) {
+        this._createLines.push(`${elVar} = document.createElementNS('${SVG_NS}', '${actualTag}');`);
+      } else {
+        this._createLines.push(`${elVar} = document.createElement('${actualTag}');`);
+      }
       if (idStr) this._createLines.push(`${elVar}.id = '${idStr}';`);
       return elVar;
     }
@@ -1011,16 +1019,27 @@ export function installComponentSupport(CodeGenerator, Lexer) {
 
   proto.generateTag = function(tag, classes, args, id) {
     const elVar = this.newElementVar();
-    this._createLines.push(`${elVar} = document.createElement('${tag}');`);
+    const isSvg = SVG_TAGS.has(tag) || this._svgDepth > 0;
+    if (isSvg) {
+      this._createLines.push(`${elVar} = document.createElementNS('${SVG_NS}', '${tag}');`);
+    } else {
+      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(' ')}';`);
+      if (isSvg) {
+        this._createLines.push(`${elVar}.setAttribute('class', '${classes.join(' ')}');`);
+      } else {
+        this._createLines.push(`${elVar}.className = '${classes.join(' ')}';`);
+      }
     }
 
+    if (tag === 'svg') this._svgDepth = (this._svgDepth || 0) + 1;
     this.appendChildren(elVar, args);
+    if (tag === 'svg') this._svgDepth--;
     return elVar;
   };
 
@@ -1030,7 +1049,11 @@ export function installComponentSupport(CodeGenerator, Lexer) {
 
   proto.generateDynamicTag = function(tag, classExprs, children) {
     const elVar = this.newElementVar();
-    this._createLines.push(`${elVar} = document.createElement('${tag}');`);
+    if (SVG_TAGS.has(tag) || this._svgDepth > 0) {
+      this._createLines.push(`${elVar} = document.createElementNS('${SVG_NS}', '${tag}');`);
+    } else {
+      this._createLines.push(`${elVar} = document.createElement('${tag}');`);
+    }
 
     // Defer className emission so class: attributes can merge with .() classes
     const classArgs = classExprs.map(e => this.generateInComponent(e, 'value'));
@@ -1039,11 +1062,18 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     this._pendingClassArgs = classArgs;
     this._pendingClassEl = elVar;
 
+    if (tag === 'svg') this._svgDepth = (this._svgDepth || 0) + 1;
     this.appendChildren(elVar, children);
+    if (tag === 'svg') this._svgDepth--;
 
     if (this._pendingClassArgs.length > 0) {
       const combined = this._pendingClassArgs.join(', ');
-      this._setupLines.push(`__effect(() => { ${elVar}.className = __clsx(${combined}); });`);
+      const isSvg = SVG_TAGS.has(tag) || this._svgDepth > 0;
+      if (isSvg) {
+        this._setupLines.push(`__effect(() => { ${elVar}.setAttribute('class', __clsx(${combined})); });`);
+      } else {
+        this._setupLines.push(`__effect(() => { ${elVar}.className = __clsx(${combined}); });`);
+      }
     }
     this._pendingClassArgs = prevClassArgs;
     this._pendingClassEl = prevClassEl;
@@ -1087,9 +1117,17 @@ export function installComponentSupport(CodeGenerator, Lexer) {
           if (this._pendingClassArgs && this._pendingClassEl === elVar) {
             this._pendingClassArgs.push(valueCode);
           } else if (this.hasReactiveDeps(value)) {
-            this._setupLines.push(`__effect(() => { ${elVar}.className = __clsx(${valueCode}); });`);
+            if (this._svgDepth > 0) {
+              this._setupLines.push(`__effect(() => { ${elVar}.setAttribute('class', __clsx(${valueCode})); });`);
+            } else {
+              this._setupLines.push(`__effect(() => { ${elVar}.className = __clsx(${valueCode}); });`);
+            }
           } else {
-            this._createLines.push(`${elVar}.className = ${valueCode};`);
+            if (this._svgDepth > 0) {
+              this._createLines.push(`${elVar}.setAttribute('class', ${valueCode});`);
+            } else {
+              this._createLines.push(`${elVar}.className = ${valueCode};`);
+            }
           }
           continue;
         }
@@ -1117,7 +1155,12 @@ export function installComponentSupport(CodeGenerator, Lexer) {
           }
 
           this._setupLines.push(`__effect(() => { ${elVar}.${prop} = ${valueCode}; });`);
-          this._createLines.push(`${elVar}.addEventListener('${event}', (e) => ${valueCode} = ${valueAccessor});`);
+          let assignCode = `${valueCode} = ${valueAccessor}`;
+          const rootMember = !this.isSimpleAssignable(value) && this.findRootReactiveMember(value);
+          if (rootMember) {
+            assignCode += `; this.${rootMember}.touch?.()`;
+          }
+          this._createLines.push(`${elVar}.addEventListener('${event}', (e) => { ${assignCode}; });`);
           continue;
         }
 
@@ -1126,15 +1169,19 @@ export function installComponentSupport(CodeGenerator, Lexer) {
         // Smart two-way binding for value/checked when bound to reactive state
         if ((key === 'value' || key === 'checked') && this.hasReactiveDeps(value)) {
           this._setupLines.push(`__effect(() => { ${elVar}.${key} = ${valueCode}; });`);
-          // Only generate reverse binding when the value is a simple assignable
-          // target (plain reactive member or @prop), not a complex expression
-          // like selected.includes(opt) which can't be assigned to.
-          if (this.isSimpleAssignable(value)) {
+          // Generate reverse binding for simple assignable targets or nested
+          // reactive paths (with touch() for Svelte-style invalidation)
+          const rootMemberImplicit = !this.isSimpleAssignable(value) && this.findRootReactiveMember(value);
+          if (this.isSimpleAssignable(value) || rootMemberImplicit) {
             const event = key === 'checked' ? 'change' : 'input';
             const accessor = key === 'checked' ? 'e.target.checked'
               : (inputType === 'number' || inputType === 'range') ? 'e.target.valueAsNumber'
               : 'e.target.value';
-            this._createLines.push(`${elVar}.addEventListener('${event}', (e) => { ${valueCode} = ${accessor}; });`);
+            let assignCode = `${valueCode} = ${accessor}`;
+            if (rootMemberImplicit) {
+              assignCode += `; this.${rootMemberImplicit}.touch?.()`;
+            }
+            this._createLines.push(`${elVar}.addEventListener('${event}', (e) => { ${assignCode}; });`);
           }
           continue;
         }
@@ -1194,6 +1241,10 @@ export function installComponentSupport(CodeGenerator, Lexer) {
 
     const condCode = this.generateInComponent(condition, 'value');
 
+    // Collect loop variables from enclosing for-loops
+    const loopParams = this._loopVarStack.map(v => `${v.itemVar}, ${v.indexVar}`).join(', ');
+    const extraArgs = loopParams ? `, ${loopParams}` : '';
+
     const thenBlockName = this.newBlockVar();
     this.generateConditionBranch(thenBlockName, thenBlock);
 
@@ -1221,17 +1272,17 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     setupLines.push(`    showing = want;`);
     setupLines.push(``);
     setupLines.push(`    if (want === 'then') {`);
-    setupLines.push(`      currentBlock = ${thenBlockName}(this);`);
+    setupLines.push(`      currentBlock = ${thenBlockName}(this${extraArgs});`);
     setupLines.push(`      currentBlock.c();`);
     setupLines.push(`      currentBlock.m(anchor.parentNode, anchor.nextSibling);`);
-    setupLines.push(`      currentBlock.p(this);`);
+    setupLines.push(`      currentBlock.p(this${extraArgs});`);
     setupLines.push(`    }`);
     if (elseBlock) {
       setupLines.push(`    if (want === 'else') {`);
-      setupLines.push(`      currentBlock = ${elseBlockName}(this);`);
+      setupLines.push(`      currentBlock = ${elseBlockName}(this${extraArgs});`);
       setupLines.push(`      currentBlock.c();`);
       setupLines.push(`      currentBlock.m(anchor.parentNode, anchor.nextSibling);`);
-      setupLines.push(`      currentBlock.p(this);`);
+      setupLines.push(`      currentBlock.p(this${extraArgs});`);
       setupLines.push(`    }`);
     }
     setupLines.push(`  });`);
@@ -1262,8 +1313,12 @@ export function installComponentSupport(CodeGenerator, Lexer) {
 
     const localizeVar = (line) => this.localizeVar(line);
 
+    // Include enclosing loop variables in the factory signature
+    const loopParams = this._loopVarStack.map(v => `${v.itemVar}, ${v.indexVar}`).join(', ');
+    const extraParams = loopParams ? `, ${loopParams}` : '';
+
     const factoryLines = [];
-    factoryLines.push(`function ${blockName}(ctx) {`);
+    factoryLines.push(`function ${blockName}(ctx${extraParams}) {`);
 
     // Declare local variables
     const localVars = new Set();
@@ -1295,7 +1350,7 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     factoryLines.push(`    },`);
 
     // p() - update/patch
-    factoryLines.push(`    p(ctx) {`);
+    factoryLines.push(`    p(ctx${extraParams}) {`);
     if (hasEffects) {
       factoryLines.push(`      disposers.forEach(d => d());`);
       factoryLines.push(`      disposers = [];`);
@@ -1379,7 +1434,9 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     this._createLines = [];
     this._setupLines = [];
 
+    this._loopVarStack.push({ itemVar, indexVar });
     const itemNode = this.generateTemplateBlock(body);
+    this._loopVarStack.pop();
     const itemCreateLines = this._createLines;
     const itemSetupLines = this._setupLines;
 
@@ -1469,32 +1526,32 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     const setupLines = [];
     setupLines.push(`// Loop: ${blockName}`);
     setupLines.push(`{`);
-    setupLines.push(`  const anchor = ${anchorVar};`);
-    setupLines.push(`  const map = new Map();`);
+    setupLines.push(`  const __anchor = ${anchorVar};`);
+    setupLines.push(`  const __map = new Map();`);
     setupLines.push(`  __effect(() => {`);
-    setupLines.push(`    const items = ${collectionCode};`);
-    setupLines.push(`    const parent = anchor.parentNode;`);
-    setupLines.push(`    const newMap = new Map();`);
+    setupLines.push(`    const __items = ${collectionCode};`);
+    setupLines.push(`    const __parent = __anchor.parentNode;`);
+    setupLines.push(`    const __newMap = new Map();`);
     setupLines.push(``);
-    setupLines.push(`    for (let ${indexVar} = 0; ${indexVar} < items.length; ${indexVar}++) {`);
-    setupLines.push(`      const ${itemVar} = items[${indexVar}];`);
-    setupLines.push(`      const key = ${keyExpr};`);
-    setupLines.push(`      let block = map.get(key);`);
-    setupLines.push(`      if (!block) {`);
-    setupLines.push(`        block = ${blockName}(this, ${itemVar}, ${indexVar});`);
-    setupLines.push(`        block.c();`);
+    setupLines.push(`    for (let ${indexVar} = 0; ${indexVar} < __items.length; ${indexVar}++) {`);
+    setupLines.push(`      const ${itemVar} = __items[${indexVar}];`);
+    setupLines.push(`      const __key = ${keyExpr};`);
+    setupLines.push(`      let __block = __map.get(__key);`);
+    setupLines.push(`      if (!__block) {`);
+    setupLines.push(`        __block = ${blockName}(this, ${itemVar}, ${indexVar});`);
+    setupLines.push(`        __block.c();`);
     setupLines.push(`      }`);
-    setupLines.push(`      block.m(parent, anchor);`);
-    setupLines.push(`      block.p(this, ${itemVar}, ${indexVar});`);
-    setupLines.push(`      newMap.set(key, block);`);
+    setupLines.push(`      __block.m(__parent, __anchor);`);
+    setupLines.push(`      __block.p(this, ${itemVar}, ${indexVar});`);
+    setupLines.push(`      __newMap.set(__key, __block);`);
     setupLines.push(`    }`);
     setupLines.push(``);
-    setupLines.push(`    for (const [key, block] of map) {`);
-    setupLines.push(`      if (!newMap.has(key)) block.d(true);`);
+    setupLines.push(`    for (const [__k, __b] of __map) {`);
+    setupLines.push(`      if (!__newMap.has(__k)) __b.d(true);`);
     setupLines.push(`    }`);
     setupLines.push(``);
-    setupLines.push(`    map.clear();`);
-    setupLines.push(`    for (const [k, v] of newMap) map.set(k, v);`);
+    setupLines.push(`    __map.clear();`);
+    setupLines.push(`    for (const [__k, __v] of __newMap) __map.set(__k, __v);`);
     setupLines.push(`  });`);
     setupLines.push(`}`);
 
@@ -1510,7 +1567,7 @@ export function installComponentSupport(CodeGenerator, Lexer) {
   proto.generateChildComponent = function(componentName, args) {
     const instVar = this.newElementVar('inst');
     const elVar = this.newElementVar('el');
-    const { propsCode, childrenSetupLines } = this.buildComponentProps(args);
+    const { propsCode, reactiveProps, childrenSetupLines } = this.buildComponentProps(args);
 
     this._createLines.push(`${instVar} = new ${componentName}(${propsCode});`);
     this._createLines.push(`${elVar} = ${instVar}._create();`);
@@ -1518,6 +1575,10 @@ export function installComponentSupport(CodeGenerator, Lexer) {
 
     this._setupLines.push(`if (${instVar}._setup) ${instVar}._setup();`);
 
+    for (const { key, valueCode } of reactiveProps) {
+      this._setupLines.push(`__effect(() => { if (${instVar}.${key}) ${instVar}.${key}.value = ${valueCode}; });`);
+    }
+
     for (const line of childrenSetupLines) {
       this._setupLines.push(line);
     }
@@ -1531,6 +1592,7 @@ export function installComponentSupport(CodeGenerator, Lexer) {
 
   proto.buildComponentProps = function(args) {
     const props = [];
+    const reactiveProps = [];
     let childrenVar = null;
     const childrenSetupLines = [];
 
@@ -1539,13 +1601,22 @@ export function installComponentSupport(CodeGenerator, Lexer) {
         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}`);
+            // Simple reactive identifier — pass signal directly for shared reactivity.
+            // Complex expressions — use normal .value unwrapping to compute the value.
+            const isSimpleReactive = this.reactiveMembers && (
+              (typeof value === 'string' && this.reactiveMembers.has(value)) ||
+              (Array.isArray(value) && value[0] === '.' && value[1] === 'this' && typeof value[2] === 'string' && this.reactiveMembers.has(value[2]))
+            );
+            if (isSimpleReactive) {
+              const member = typeof value === 'string' ? value : value[2];
+              props.push(`${key}: this.${member}`);
+            } else {
+              const valueCode = this.generateInComponent(value, 'value');
+              props.push(`${key}: ${valueCode}`);
+              if (this.hasReactiveDeps(value)) {
+                reactiveProps.push({ key, valueCode });
+              }
+            }
           }
         }
       } else if (Array.isArray(arg) && (arg[0] === '->' || arg[0] === '=>')) {
@@ -1559,11 +1630,20 @@ export function installComponentSupport(CodeGenerator, Lexer) {
                 for (let i = 1; i < child.length; i++) {
                   const [key, value] = child[i];
                   if (typeof key === 'string') {
-                    const prevReactive = this.reactiveMembers;
-                    this.reactiveMembers = new Set();
-                    const valueCode = this.generateInComponent(value, 'value');
-                    this.reactiveMembers = prevReactive;
-                    props.push(`${key}: ${valueCode}`);
+                    const isSimpleReactive = this.reactiveMembers && (
+                      (typeof value === 'string' && this.reactiveMembers.has(value)) ||
+                      (Array.isArray(value) && value[0] === '.' && value[1] === 'this' && typeof value[2] === 'string' && this.reactiveMembers.has(value[2]))
+                    );
+                    if (isSimpleReactive) {
+                      const member = typeof value === 'string' ? value : value[2];
+                      props.push(`${key}: this.${member}`);
+                    } else {
+                      const valueCode = this.generateInComponent(value, 'value');
+                      props.push(`${key}: ${valueCode}`);
+                      if (this.hasReactiveDeps(value)) {
+                        reactiveProps.push({ key, valueCode });
+                      }
+                    }
                   }
                 }
               } else {
@@ -1598,7 +1678,7 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     }
 
     const propsCode = props.length > 0 ? `{ ${props.join(', ')} }` : '{}';
-    return { propsCode, childrenSetupLines };
+    return { propsCode, reactiveProps, childrenSetupLines };
   };
 
   // --------------------------------------------------------------------------
@@ -1646,6 +1726,24 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     return false;
   };
 
+  // findRootReactiveMember — walk a nested access chain to find the root reactive member
+  // e.g. (. ([] history 0) triglycerides) → 'history'
+  // --------------------------------------------------------------------------
+
+  proto.findRootReactiveMember = function(sexpr) {
+    if (typeof sexpr === 'string') {
+      return this.reactiveMembers?.has(sexpr) ? sexpr : null;
+    }
+    if (!Array.isArray(sexpr)) return null;
+    if (sexpr[0] === '.' && sexpr[1] === 'this' && typeof sexpr[2] === 'string') {
+      return this.reactiveMembers?.has(sexpr[2]) ? sexpr[2] : null;
+    }
+    if (sexpr[0] === '.' || sexpr[0] === '[]') {
+      return this.findRootReactiveMember(sexpr[1]);
+    }
+    return null;
+  };
+
   // _rootsAtThis — check if a property-access chain is rooted at 'this'
   // --------------------------------------------------------------------------