rip-lang 3.10.14 → 3.12.0

package/src/browser.js

@@ -13,7 +13,7 @@ export const BUILD_DATE = "0000-00-00@00:00:00GMT";
 import { compile, compileToJS, formatSExpr, getReactiveRuntime, getComponentRuntime } from './compiler.js';
 
 // Eagerly register Rip's reactive primitives on globalThis so that
-// framework code (ui.rip) can use them directly without the compiler
+// framework code (app.rip) can use them directly without the compiler
 // needing to detect reactive operators in the source
 if (typeof globalThis !== 'undefined' && !globalThis.__rip) {
   new Function(getReactiveRuntime())();
@@ -71,10 +71,10 @@ export { processRipScripts };
 /**
  * Import a .rip file as an ES module
  * Fetches the URL, compiles Rip→JS, dynamically imports via Blob URL
- * Usage: const { launch } = await importRip('/ui.rip')
+ * Usage: const { launch } = await importRip('/app.rip')
  *
  * Pre-compiled modules can be registered on importRip.modules to skip fetching.
- * The rip-ui bundle uses this to embed ui.rip without a server round-trip.
+ * The browser bundle uses this to embed app.rip without a server round-trip.
  */
 export async function importRip(url) {
   for (const [key, mod] of Object.entries(importRip.modules)) {
@@ -85,13 +85,10 @@ export async function importRip(url) {
     return r.text();
   });
   const js = compileToJS(source);
-  const blob = new Blob([js], { type: 'application/javascript' });
+  const header = `// ${url}\n`;
+  const blob = new Blob([header + js], { type: 'application/javascript' });
   const blobUrl = URL.createObjectURL(blob);
-  try {
-    return await import(blobUrl);
-  } finally {
-    URL.revokeObjectURL(blobUrl);
-  }
+  return await import(blobUrl);
 }
 importRip.modules = {};
 
@@ -136,12 +133,12 @@ if (typeof globalThis !== 'undefined') {
   globalThis.__ripExports = { compile, compileToJS, formatSExpr, VERSION, BUILD_DATE, getReactiveRuntime, getComponentRuntime };
 }
 
-// Auto-launch: if rip-ui is bundled and the page has component scripts or a data-url,
+// Auto-launch: if app.rip is bundled and the page has component scripts or a data-url,
 // call launch() automatically with config from the script tag's data attributes.
 // Hash routing defaults to true (opt out with data-hash="false").
 async function autoLaunch() {
   if (globalThis.__ripLaunched) return;
-  const ui = importRip.modules?.['ui.rip'];
+  const ui = importRip.modules?.['app.rip'];
   if (!ui?.launch) return;
   const cfg = document.querySelector('script[data-hash], script[data-url]');
   const url = cfg?.getAttribute('data-url') || '';
@@ -153,7 +150,7 @@ async function autoLaunch() {
 }
 
 // Auto-process <script type="text/rip"> blocks, then auto-launch if applicable.
-// Deferred via queueMicrotask so bundled entry code (e.g. rip-ui.min.js registering
+// Deferred via queueMicrotask so bundled entry code (e.g. rip.min.js registering
 // importRip.modules) runs before script processing begins.
 if (typeof document !== 'undefined') {
   globalThis.__ripScriptsReady = new Promise(resolve => {

package/src/compiler.js

@@ -871,9 +871,7 @@ export class CodeGenerator {
     } else if (typeof target === 'string' && this.reactiveVars?.has(target)) {
       targetCode = `${target}.value`;
     } else {
-      this.suppressReactiveUnwrap = true;
       targetCode = this.generate(target, 'value');
-      this.suppressReactiveUnwrap = false;
     }
 
     let valueCode = this.generate(value, 'value');
@@ -1012,11 +1010,15 @@ export class CodeGenerator {
       if (this.is(body, 'block') && body.length === 2) {
         let expr = body[1];
         if (!Array.isArray(expr) || expr[0] !== 'return') {
-          return `${prefix}${paramSyntax} => ${this.generate(expr, 'value')}`;
+          let code = this.generate(expr, 'value');
+          if (code[0] === '{') code = `(${code})`;
+          return `${prefix}${paramSyntax} => ${code}`;
         }
       }
       if (!Array.isArray(body) || body[0] !== 'block') {
-        return `${prefix}${paramSyntax} => ${this.generate(body, 'value')}`;
+        let code = this.generate(body, 'value');
+        if (code[0] === '{') code = `(${code})`;
+        return `${prefix}${paramSyntax} => ${code}`;
       }
     }
 
@@ -1279,6 +1281,12 @@ export class CodeGenerator {
 
   generateForOf(head, rest, context, sexpr) {
     let [vars, obj, own, guard, body] = rest;
+
+    if (context === 'value' && this.comprehensionDepth === 0) {
+      let iterator = ['for-of', vars, obj, own];
+      return this.generate(['comprehension', body, [iterator], guard ? [guard] : []], context);
+    }
+
     let [keyVar, valueVar] = Array.isArray(vars) ? vars : [vars];
     let objCode = this.generate(obj, 'value');
     let code = `for (const ${keyVar} in ${objCode}) `;

package/src/components.js

@@ -7,7 +7,46 @@
 //
 // Naming: All render-tree generators use generate* (consistent with compiler).
 
-import { TEMPLATE_TAGS, SVG_TAGS } from './tags.js';
+// ============================================================================
+// HTML/SVG Tag Definitions
+// ============================================================================
+
+const HTML_TAGS = new Set([
+  'html', 'head', 'title', 'base', 'link', 'meta', 'style',
+  'body', 'address', 'article', 'aside', 'footer', 'header',
+  'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'main', 'nav', 'section',
+  'blockquote', 'dd', 'div', 'dl', 'dt', 'figcaption', 'figure',
+  'hr', 'li', 'ol', 'p', 'pre', 'ul',
+  'a', 'abbr', 'b', 'bdi', 'bdo', 'br', 'cite', 'code', 'data',
+  'dfn', 'em', 'i', 'kbd', 'mark', 'q', 'rp', 'rt', 'ruby', 's',
+  'samp', 'small', 'span', 'strong', 'sub', 'sup', 'time', 'u', 'var', 'wbr',
+  'area', 'audio', 'img', 'map', 'track', 'video',
+  'embed', 'iframe', 'object', 'param', 'picture', 'portal', 'source',
+  'svg', 'math', 'canvas',
+  'noscript', 'script',
+  'del', 'ins',
+  'caption', 'col', 'colgroup', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr',
+  'button', 'datalist', 'fieldset', 'form', 'input', 'label', 'legend',
+  'meter', 'optgroup', 'option', 'output', 'progress', 'select', 'textarea',
+  'details', 'dialog', 'menu', 'summary',
+  'slot', 'template'
+]);
+
+const SVG_TAGS = new Set([
+  'svg', 'g', 'defs', 'symbol', 'use', 'marker', 'clipPath', 'mask', 'pattern',
+  'circle', 'ellipse', 'line', 'path', 'polygon', 'polyline', 'rect',
+  'text', 'textPath', 'tspan',
+  'linearGradient', 'radialGradient', 'stop',
+  'filter', 'feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite',
+  'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight',
+  'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR',
+  'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology',
+  'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence',
+  'animate', 'animateMotion', 'animateTransform', 'set', 'mpath',
+  'desc', 'foreignObject', 'image', 'metadata', 'switch', 'title', 'view'
+]);
+
+const TEMPLATE_TAGS = new Set([...HTML_TAGS, ...SVG_TAGS]);
 
 // ============================================================================
 // Constants
@@ -135,6 +174,18 @@ export function installComponentSupport(CodeGenerator, Lexer) {
       return isHtmlTag(name) || isComponent(name);
     };
 
+    let skipBalancedPair = (tokens, from, closer, opener) => {
+      let depth = 1;
+      let k = from;
+      while (k >= 0 && depth > 0) {
+        let kt = tokens[k][0];
+        if (kt === closer) depth++;
+        else if (kt === opener) depth--;
+        if (depth > 0) k--;
+      }
+      return k;
+    };
+
     let startsWithTag = (tokens, i) => {
       let j = i;
       while (j > 0) {
@@ -145,31 +196,21 @@ export function installComponentSupport(CodeGenerator, Lexer) {
         if (pt === 'INDENT' || pt === 'OUTDENT') {
           let jt = tokens[j][0];
           if (jt === 'CALL_END' || jt === ')') {
-            let open = jt === 'CALL_END' ? 'CALL_START' : '(';
-            let depth = 1;
-            let k = j - 1;
-            while (k >= 0 && depth > 0) {
-              let kt = tokens[k][0];
-              if (kt === jt) depth++;
-              else if (kt === open) depth--;
-              if (depth > 0) k--;
-            }
-            j = k;
+            j = skipBalancedPair(tokens, j - 1, jt, jt === 'CALL_END' ? 'CALL_START' : '(');
             continue;
           }
           break;
         }
         if (pt === 'CALL_END' || pt === ')') {
-          let open = pt === 'CALL_END' ? 'CALL_START' : '(';
-          let depth = 1;
-          let k = j - 2;
-          while (k >= 0 && depth > 0) {
-            let kt = tokens[k][0];
-            if (kt === 'CALL_END' || kt === ')') depth++;
-            else if (kt === 'CALL_START' || kt === '(') depth--;
-            if (depth > 0) k--;
-          }
-          j = k;
+          j = skipBalancedPair(tokens, j - 2, pt, pt === 'CALL_END' ? 'CALL_START' : '(');
+          continue;
+        }
+        if (pt === 'INTERPOLATION_END') {
+          j = skipBalancedPair(tokens, j - 2, 'INTERPOLATION_END', 'INTERPOLATION_START');
+          continue;
+        }
+        if (pt === 'STRING_END') {
+          j = skipBalancedPair(tokens, j - 2, 'STRING_END', 'STRING_START');
           continue;
         }
         j--;
@@ -1309,14 +1350,14 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     setupLines.push(`    if (want === 'then') {`);
     setupLines.push(`      currentBlock = ${thenBlockName}(this${extraArgs});`);
     setupLines.push(`      currentBlock.c();`);
-    setupLines.push(`      currentBlock.m(anchor.parentNode, anchor.nextSibling);`);
+    setupLines.push(`      if (anchor.parentNode) currentBlock.m(anchor.parentNode, anchor.nextSibling);`);
     setupLines.push(`      currentBlock.p(this${extraArgs});`);
     setupLines.push(`    }`);
     if (elseBlock) {
       setupLines.push(`    if (want === 'else') {`);
       setupLines.push(`      currentBlock = ${elseBlockName}(this${extraArgs});`);
       setupLines.push(`      currentBlock.c();`);
-      setupLines.push(`      currentBlock.m(anchor.parentNode, anchor.nextSibling);`);
+      setupLines.push(`      if (anchor.parentNode) currentBlock.m(anchor.parentNode, anchor.nextSibling);`);
       setupLines.push(`      currentBlock.p(this${extraArgs});`);
       setupLines.push(`    }`);
     }
@@ -1411,10 +1452,10 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     const condFragChildren = getFragChildren(rootVar, createLines, localizeVar);
     if (condFragChildren) {
       for (const child of condFragChildren) {
-        factoryLines.push(`      if (detaching) ${child}.remove();`);
+        factoryLines.push(`      if (detaching && ${child}) ${child}.remove();`);
       }
     } else {
-      factoryLines.push(`      if (detaching) ${localizeVar(rootVar)}.remove();`);
+      factoryLines.push(`      if (detaching && ${localizeVar(rootVar)}) ${localizeVar(rootVar)}.remove();`);
     }
     factoryLines.push(`    }`);
 
@@ -1512,10 +1553,10 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     factoryLines.push(`    m(target, anchor) {`);
     if (loopFragChildren) {
       for (const child of loopFragChildren) {
-        factoryLines.push(`      target.insertBefore(${child}, anchor);`);
+        factoryLines.push(`      if (target) target.insertBefore(${child}, anchor);`);
       }
     } else {
-      factoryLines.push(`      target.insertBefore(${localizeVar(itemNode)}, anchor);`);
+      factoryLines.push(`      if (target) target.insertBefore(${localizeVar(itemNode)}, anchor);`);
     }
     factoryLines.push(`    },`);
 
@@ -1545,10 +1586,10 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     }
     if (loopFragChildren) {
       for (const child of loopFragChildren) {
-        factoryLines.push(`      if (detaching) ${child}.remove();`);
+        factoryLines.push(`      if (detaching && ${child}) ${child}.remove();`);
       }
     } else {
-      factoryLines.push(`      if (detaching) ${localizeVar(itemNode)}.remove();`);
+      factoryLines.push(`      if (detaching && ${localizeVar(itemNode)}) ${localizeVar(itemNode)}.remove();`);
     }
     factoryLines.push(`    }`);
 

package/src/types.js

@@ -1017,13 +1017,13 @@ function emitComponentTypes(sexpr, lines, indent, indentLevel, componentVars) {
         propName = isProp ? (target[2]?.valueOf?.() ?? target[2]) : (target?.valueOf?.() ?? target);
         type = isProp ? target[2]?.type : target?.type;
         hasDefault = true;
-        componentVars.add(propName);
+        if (!isProp) componentVars.add(propName);
       } else if (mHead === '.') {
         isProp = (member[1]?.valueOf?.() ?? member[1]) === 'this';
         propName = isProp ? (member[2]?.valueOf?.() ?? member[2]) : null;
         type = isProp ? member[2]?.type : null;
         hasDefault = false;
-        if (propName) componentVars.add(propName);
+        if (!isProp && propName) componentVars.add(propName);
       } else {
         continue;
       }