rip-lang 3.13.24 → 3.13.26

package/README.md

@@ -9,9 +9,9 @@
 </p>
 
 <p align="center">
-  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/version-3.13.24-blue.svg" alt="Version"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/version-3.13.26-blue.svg" alt="Version"></a>
   <a href="#zero-dependencies"><img src="https://img.shields.io/badge/dependencies-ZERO-brightgreen.svg" alt="Dependencies"></a>
-  <a href="#"><img src="https://img.shields.io/badge/tests-1%2C265%2F1%2C265-brightgreen.svg" alt="Tests"></a>
+  <a href="#"><img src="https://img.shields.io/badge/tests-1%2C300%2F1%2C300-brightgreen.svg" alt="Tests"></a>
   <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a>
 </p>
 

package/package.json

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

package/src/compiler.js

@@ -688,9 +688,9 @@ export class CodeGenerator {
 
     if (this.usesTemplates && !skip) {
       if (skipRT) {
-        code += 'var { __pushComponent, __popComponent, setContext, getContext, hasContext, __clsx, __Component } = globalThis.__ripComponent;\n';
+        code += 'var { __pushComponent, __popComponent, setContext, getContext, hasContext, __clsx, __lis, __reconcile, __transition, __handleComponentError, __Component } = globalThis.__ripComponent;\n';
       } else if (typeof globalThis !== 'undefined' && globalThis.__ripComponent) {
-        code += 'const { __pushComponent, __popComponent, setContext, getContext, hasContext, __clsx, __Component } = globalThis.__ripComponent;\n';
+        code += 'const { __pushComponent, __popComponent, setContext, getContext, hasContext, __clsx, __lis, __reconcile, __transition, __handleComponentError, __Component } = globalThis.__ripComponent;\n';
       } else {
         code += this.getComponentRuntime();
       }

package/src/components.js

@@ -55,7 +55,7 @@ const TEMPLATE_TAGS = new Set([...HTML_TAGS, ...SVG_TAGS]);
 const BIND_PREFIX = '__bind_';
 const BIND_SUFFIX = '__';
 
-const LIFECYCLE_HOOKS = new Set(['beforeMount', 'mounted', 'updated', 'beforeUnmount', 'unmounted']);
+const LIFECYCLE_HOOKS = new Set(['beforeMount', 'mounted', 'updated', 'beforeUnmount', 'unmounted', 'onError']);
 const BOOLEAN_ATTRS = new Set([
   'disabled', 'hidden', 'readonly', 'required', 'checked', 'selected',
   'autofocus', 'autoplay', 'controls', 'loop', 'muted', 'multiple',
@@ -240,6 +240,19 @@ export function installComponentSupport(CodeGenerator, Lexer) {
       // Only process if we're inside a render block
       if (!inRender) return 1;
 
+      // ─────────────────────────────────────────────────────────────────────
+      // Transition modifier
+      // div ~fade → div __transition__: "fade"
+      // ─────────────────────────────────────────────────────────────────────
+      if (tag === 'UNARY_MATH' && token[1] === '~' && nextToken && nextToken[0] === 'IDENTIFIER') {
+        token[0] = 'PROPERTY';
+        token[1] = '__transition__';
+        let colonToken = gen(':', ':', token);
+        let valueToken = gen('STRING', `"${nextToken[1]}"`, nextToken);
+        tokens.splice(i + 1, 1, colonToken, valueToken);
+        return 1;
+      }
+
       // ─────────────────────────────────────────────────────────────────────
       // Hyphenated attributes
       // data-lucide: "search" → "data-lucide": "search"
@@ -719,11 +732,12 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     // --- Lifecycle hooks ---
     for (const { name, value } of lifecycleHooks) {
       if (Array.isArray(value) && (value[0] === '->' || value[0] === '=>')) {
-        const [, , hookBody] = value;
+        const [, params, hookBody] = value;
+        const paramStr = Array.isArray(params) ? params.map(p => this.formatParam(p)).join(', ') : '';
         const transformed = this.reactiveMembers ? this.transformComponentMembers(hookBody) : hookBody;
         const isAsync = this.containsAwait(hookBody);
-        const bodyCode = this.generateFunctionBody(transformed, []);
-        lines.push(`  ${isAsync ? 'async ' : ''}${name}() ${bodyCode}`);
+        const bodyCode = this.generateFunctionBody(transformed, params || []);
+        lines.push(`  ${isAsync ? 'async ' : ''}${name}(${paramStr}) ${bodyCode}`);
       }
     }
 
@@ -1188,6 +1202,13 @@ export function installComponentSupport(CodeGenerator, Lexer) {
           continue;
         }
 
+        // Transition: __transition__: "fade" → this._t = "fade" (on block, not DOM)
+        if (key === '__transition__') {
+          const transName = String(value).replace(/^["']|["']$/g, '');
+          this._createLines.push(`this._t = "${transName}";`);
+          continue;
+        }
+
         // Element ref: ref: "name" → this.name = element
         if (key === 'ref') {
           const refName = String(value).replace(/^["']|["']$/g, '');
@@ -1330,7 +1351,9 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     setupLines.push(`    if (want === showing) return;`);
     setupLines.push(``);
     setupLines.push(`    if (currentBlock) {`);
-    setupLines.push(`      currentBlock.d(true);`);
+    setupLines.push(`      const leaving = currentBlock;`);
+    setupLines.push(`      if (leaving._t) { __transition(leaving._first, leaving._t, 'leave', () => leaving.d(true)); }`);
+    setupLines.push(`      else { leaving.d(true); }`);
     setupLines.push(`      currentBlock = null;`);
     setupLines.push(`    }`);
     setupLines.push(`    showing = want;`);
@@ -1340,6 +1363,7 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     setupLines.push(`      currentBlock.c();`);
     setupLines.push(`      if (anchor.parentNode) currentBlock.m(anchor.parentNode, anchor.nextSibling);`);
     setupLines.push(`      currentBlock.p(${this._self}${outerExtra});`);
+    setupLines.push(`      if (currentBlock._t) __transition(currentBlock._first, currentBlock._t, 'enter');`);
     setupLines.push(`    }`);
     if (elseBlock) {
       setupLines.push(`    if (want === 'else') {`);
@@ -1347,6 +1371,7 @@ export function installComponentSupport(CodeGenerator, Lexer) {
       setupLines.push(`      currentBlock.c();`);
       setupLines.push(`      if (anchor.parentNode) currentBlock.m(anchor.parentNode, anchor.nextSibling);`);
       setupLines.push(`      currentBlock.p(${this._self}${outerExtra});`);
+      setupLines.push(`      if (currentBlock._t) __transition(currentBlock._first, currentBlock._t, 'enter');`);
       setupLines.push(`    }`);
     }
     setupLines.push(`  ${effClose}`);
@@ -1386,7 +1411,7 @@ export function installComponentSupport(CodeGenerator, Lexer) {
   // emitBlockFactory — shared factory generation for conditionals and loops
   // --------------------------------------------------------------------------
 
-  proto.emitBlockFactory = function(blockName, params, rootVar, createLines, setupLines, factoryVars) {
+  proto.emitBlockFactory = function(blockName, params, rootVar, createLines, setupLines, factoryVars, isStatic) {
     const factoryLines = [];
     factoryLines.push(`function ${blockName}(${params}) {`);
 
@@ -1401,13 +1426,20 @@ export function installComponentSupport(CodeGenerator, Lexer) {
 
     factoryLines.push(`  return {`);
 
+    if (isStatic) {
+      factoryLines.push(`    _s: true,`);
+    }
+
+    const fragChildren = this._fragChildren.get(rootVar);
+    const firstNode = fragChildren ? fragChildren[0] : rootVar;
+
     factoryLines.push(`    c() {`);
     for (const line of createLines) {
       factoryLines.push(`      ${line}`);
     }
+    factoryLines.push(`      this._first = ${firstNode};`);
     factoryLines.push(`    },`);
 
-    const fragChildren = this._fragChildren.get(rootVar);
     factoryLines.push(`    m(target, anchor) {`);
     if (fragChildren) {
       for (const child of fragChildren) {
@@ -1504,41 +1536,26 @@ export function installComponentSupport(CodeGenerator, Lexer) {
 
     [this._createLines, this._setupLines, this._factoryMode, this._factoryVars] = saved;
 
+    const isStatic = itemSetupLines.length === 0;
     const loopParams = `ctx, ${itemVar}, ${indexVar}${outerExtra}`;
-    this.emitBlockFactory(blockName, loopParams, itemNode, itemCreateLines, itemSetupLines, itemFactoryVars);
+    this.emitBlockFactory(blockName, loopParams, itemNode, itemCreateLines, itemSetupLines, itemFactoryVars, isStatic);
+
+    // Build key function argument (null = use item as key)
+    const hasCustomKey = keyExpr !== itemVar;
+    const keyFnCode = hasCustomKey ? `(${itemVar}, ${indexVar}) => ${keyExpr}` : 'null';
+
+    // Build outer vars argument list for nested loops
+    const outerArgs = outerParams ? `, ${outerParams}` : '';
 
     // Generate reconciliation code in _setup()
     const setupLines = [];
     setupLines.push(`// Loop: ${blockName}`);
     setupLines.push(`{`);
-    setupLines.push(`  const __anchor = ${anchorVar};`);
-    setupLines.push(`  const __map = new Map();`);
+    setupLines.push(`  const __s = { blocks: [], keys: [] };`);
     const effOpen = this._factoryMode ? 'disposers.push(__effect(() => {' : '__effect(() => {';
     const effClose = this._factoryMode ? '}));' : '});';
     setupLines.push(`  ${effOpen}`);
-    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._self}, ${itemVar}, ${indexVar}${outerExtra});`);
-    setupLines.push(`        __block.c();`);
-    setupLines.push(`      }`);
-    setupLines.push(`      __block.m(__parent, __anchor);`);
-    setupLines.push(`      __block.p(${this._self}, ${itemVar}, ${indexVar}${outerExtra});`);
-    setupLines.push(`      __newMap.set(__key, __block);`);
-    setupLines.push(`    }`);
-    setupLines.push(``);
-    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(`    __reconcile(${anchorVar}, __s, ${collectionCode}, ${this._self}, ${blockName}, ${keyFnCode}${outerArgs});`);
     setupLines.push(`  ${effClose}`);
     setupLines.push(`}`);
 
@@ -1561,8 +1578,7 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     this._createLines.push(`${elVar} = ${instVar}._create();`);
     this._createLines.push(`(${s}._children || (${s}._children = [])).push(${instVar});`);
 
-    this._setupLines.push(`if (${instVar}._setup) ${instVar}._setup();`);
-    this._setupLines.push(`if (${instVar}.mounted) ${instVar}.mounted();`);
+    this._setupLines.push(`try { if (${instVar}._setup) ${instVar}._setup(); if (${instVar}.mounted) ${instVar}.mounted(); } catch (__e) { __handleComponentError(__e, ${instVar}); }`);
 
     for (const { key, valueCode } of reactiveProps) {
       this._pushEffect(`if (${instVar}.${key}) ${instVar}.${key}.value = ${valueCode};`);
@@ -1784,21 +1800,203 @@ function __clsx(...args) {
   return args.filter(Boolean).join(' ');
 }
 
+function __lis(arr) {
+  const n = arr.length;
+  if (n === 0) return [];
+  const tails = [], indices = [], prev = new Array(n).fill(-1);
+  for (let i = 0; i < n; i++) {
+    if (arr[i] === -1) continue;
+    let lo = 0, hi = tails.length;
+    while (lo < hi) {
+      const mid = (lo + hi) >> 1;
+      if (tails[mid] < arr[i]) lo = mid + 1; else hi = mid;
+    }
+    tails[lo] = arr[i];
+    indices[lo] = i;
+    if (lo > 0) prev[i] = indices[lo - 1];
+  }
+  const result = [];
+  let k = indices[tails.length - 1];
+  for (let i = tails.length - 1; i >= 0; i--) { result.push(k); k = prev[k]; }
+  result.reverse();
+  return result;
+}
+
+function __reconcile(anchor, state, items, ctx, factory, keyFn, ...outer) {
+  const parent = anchor.parentNode;
+  if (!parent) return;
+
+  const oldKeys = state.keys;
+  const oldBlocks = state.blocks;
+  const oldLen = oldKeys.length;
+  const newLen = items.length;
+  const newBlocks = new Array(newLen);
+  const hasKeyFn = keyFn != null;
+  const newKeys = hasKeyFn ? items.map((item, i) => keyFn(item, i)) : items;
+
+  // Phase 0: first render — batch create via DocumentFragment
+  if (oldLen === 0) {
+    if (newLen > 0) {
+      const frag = document.createDocumentFragment();
+      for (let i = 0; i < newLen; i++) {
+        const block = factory(ctx, items[i], i, ...outer);
+        block.c();
+        block.m(frag, null);
+        if (!block._s) block.p(ctx, items[i], i, ...outer);
+        newBlocks[i] = block;
+      }
+      parent.insertBefore(frag, anchor);
+    }
+    state.keys = hasKeyFn ? newKeys : items.slice();
+    state.blocks = newBlocks;
+    return;
+  }
+
+  // Phase 1: prefix scan — skip p() (item+index identical, effects already live)
+  let start = 0;
+  const minLen = oldLen < newLen ? oldLen : newLen;
+  while (start < minLen && oldKeys[start] === newKeys[start]) {
+    newBlocks[start] = oldBlocks[start];
+    start++;
+  }
+
+  // Phase 2: suffix scan — call p() (index may differ)
+  let oldEnd = oldLen - 1;
+  let newEnd = newLen - 1;
+  while (oldEnd >= start && newEnd >= start && oldKeys[oldEnd] === newKeys[newEnd]) {
+    const block = oldBlocks[oldEnd];
+    if (!block._s) block.p(ctx, items[newEnd], newEnd, ...outer);
+    newBlocks[newEnd] = block;
+    oldEnd--;
+    newEnd--;
+  }
+
+  // Remove old blocks in the middle that aren't in the new set
+  if (start > newEnd) {
+    for (let i = start; i <= oldEnd; i++) oldBlocks[i].d(true);
+  } else if (start > oldEnd) {
+    // Phase 3a: pure insertion — batch via DocumentFragment
+    const next = newEnd + 1 < newLen ? newBlocks[newEnd + 1]._first : anchor;
+    const frag = document.createDocumentFragment();
+    for (let i = start; i <= newEnd; i++) {
+      const block = factory(ctx, items[i], i, ...outer);
+      block.c();
+      block.m(frag, null);
+      if (!block._s) block.p(ctx, items[i], i, ...outer);
+      newBlocks[i] = block;
+    }
+    parent.insertBefore(frag, next);
+  } else {
+    // Phase 4: general case — temp Map + LIS
+    const oldKeyIdx = new Map();
+    for (let i = start; i <= oldEnd; i++) oldKeyIdx.set(oldKeys[i], i);
+
+    const seq = new Array(newEnd - start + 1);
+    for (let i = start; i <= newEnd; i++) {
+      const key = newKeys[i];
+      const oldIdx = oldKeyIdx.get(key);
+      if (oldIdx !== undefined) {
+        seq[i - start] = oldIdx - start;
+        const block = oldBlocks[oldIdx];
+        if (!block._s) block.p(ctx, items[i], i, ...outer);
+        newBlocks[i] = block;
+        oldKeyIdx.delete(key);
+      } else {
+        seq[i - start] = -1;
+        const block = factory(ctx, items[i], i, ...outer);
+        block.c();
+        if (!block._s) block.p(ctx, items[i], i, ...outer);
+        newBlocks[i] = block;
+      }
+    }
+
+    for (const idx of oldKeyIdx.values()) oldBlocks[idx].d(true);
+
+    const lis = __lis(seq);
+    const lisSet = new Set(lis);
+    let next = newEnd + 1 < newLen ? newBlocks[newEnd + 1]._first : anchor;
+    for (let i = newEnd; i >= start; i--) {
+      const block = newBlocks[i];
+      if (!lisSet.has(i - start)) {
+        block.m(parent, next);
+      }
+      next = block._first;
+    }
+  }
+
+  state.keys = hasKeyFn ? newKeys : items.slice();
+  state.blocks = newBlocks;
+}
+
+let __cssInjected = false;
+function __transitionCSS() {
+  if (__cssInjected) return;
+  __cssInjected = true;
+  const s = document.createElement('style');
+  s.textContent = [
+    '.fade-enter-active,.fade-leave-active{transition:opacity .2s ease}',
+    '.fade-enter-from,.fade-leave-to{opacity:0}',
+    '.slide-enter-active,.slide-leave-active{transition:opacity .2s ease,transform .2s ease}',
+    '.slide-enter-from{opacity:0;transform:translateY(-8px)}',
+    '.slide-leave-to{opacity:0;transform:translateY(8px)}',
+    '.scale-enter-active,.scale-leave-active{transition:opacity .2s ease,transform .2s ease}',
+    '.scale-enter-from,.scale-leave-to{opacity:0;transform:scale(.95)}',
+    '.blur-enter-active,.blur-leave-active{transition:opacity .2s ease,filter .2s ease}',
+    '.blur-enter-from,.blur-leave-to{opacity:0;filter:blur(4px)}',
+    '.fly-enter-active,.fly-leave-active{transition:opacity .2s ease,transform .2s ease}',
+    '.fly-enter-from{opacity:0;transform:translateY(-20px)}',
+    '.fly-leave-to{opacity:0;transform:translateY(20px)}',
+  ].join('');
+  document.head.appendChild(s);
+}
+
+function __transition(el, name, dir, done) {
+  __transitionCSS();
+  const cl = el.classList;
+  const from = name + '-' + dir + '-from';
+  const active = name + '-' + dir + '-active';
+  const to = name + '-' + dir + '-to';
+  cl.add(from, active);
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      cl.remove(from);
+      cl.add(to);
+      const end = () => { cl.remove(active, to); if (done) done(); };
+      el.addEventListener('transitionend', end, { once: true });
+    });
+  });
+}
+
+function __handleComponentError(error, component) {
+  let current = component;
+  while (current) {
+    if (current.onError) {
+      try { current.onError(error, component); return; } catch (_) {}
+    }
+    current = current._parent;
+  }
+  throw error;
+}
+
 class __Component {
   constructor(props = {}) {
     Object.assign(this, props);
     const prev = __pushComponent(this);
-    this._init(props);
+    try { this._init(props); } catch (e) { __popComponent(prev); __handleComponentError(e, this); return; }
     __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();
+    try {
+      this._root = this._create();
+      target.appendChild(this._root);
+      if (this._setup) this._setup();
+      if (this.mounted) this.mounted();
+    } catch (error) {
+      __handleComponentError(error, this);
+    }
     return this;
   }
   unmount() {
@@ -1819,7 +2017,7 @@ class __Component {
 
 // Register on globalThis for runtime deduplication
 if (typeof globalThis !== 'undefined') {
-  globalThis.__ripComponent = { __pushComponent, __popComponent, setContext, getContext, hasContext, __clsx, __Component };
+  globalThis.__ripComponent = { __pushComponent, __popComponent, setContext, getContext, hasContext, __clsx, __lis, __reconcile, __transition, __handleComponentError, __Component };
 }
 
 `;