rip-lang 3.13.31 → 3.13.33

package/package.json

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

package/src/components.js

@@ -528,25 +528,36 @@ export function installComponentSupport(CodeGenerator, Lexer) {
    * Recursively transform s-expression to replace member identifiers with this.X.value.
    * For component context where state variables are signals.
    */
+  const _str = (s) => typeof s === 'string' ? s : s instanceof String ? s.valueOf() : null;
+  const _transferMeta = (from, to) => {
+    if (!(from instanceof String)) return to;
+    const s = new String(to);
+    if (from.predicate) s.predicate = true;
+    if (from.await) s.await = true;
+    return (s.predicate || s.await) ? s : to;
+  };
+
   proto.transformComponentMembers = function(sexpr) {
     const self = this._self;
     if (!Array.isArray(sexpr)) {
-      if (typeof sexpr === 'string' && this.reactiveMembers && this.reactiveMembers.has(sexpr)) {
-        return ['.', ['.', self, sexpr], 'value'];
+      const sv = _str(sexpr);
+      if (sv && this.reactiveMembers && this.reactiveMembers.has(sv)) {
+        return ['.', ['.', self, sv], _transferMeta(sexpr, 'value')];
       }
-      if (typeof sexpr === 'string' && this.componentMembers && this.componentMembers.has(sexpr)) {
-        return ['.', self, sexpr];
+      if (sv && this.componentMembers && this.componentMembers.has(sv)) {
+        return ['.', self, _transferMeta(sexpr, sv)];
       }
       return sexpr;
     }
 
     // Special case: (. this memberName) for @member syntax
-    if (sexpr[0] === '.' && sexpr[1] === 'this' && typeof sexpr[2] === 'string') {
-      const memberName = sexpr[2];
+    if (sexpr[0] === '.' && sexpr[1] === 'this' && _str(sexpr[2]) != null) {
+      const prop = sexpr[2];
+      const memberName = _str(prop);
       if (this.reactiveMembers && this.reactiveMembers.has(memberName)) {
-        return ['.', ['.', self, memberName], 'value'];
+        return ['.', ['.', self, memberName], _transferMeta(prop, 'value')];
       }
-      return this._factoryMode ? ['.', self, sexpr[2]] : sexpr;
+      return this._factoryMode ? ['.', self, prop] : sexpr;
     }
 
     // Dot access: transform the object but not the property name
@@ -700,13 +711,13 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     for (const { name, value, isPublic } of stateVars) {
       const val = this.generateInComponent(value, 'value');
       lines.push(isPublic
-        ? `    this.${name} = __state(props.${name} ?? ${val});`
+        ? `    this.${name} = __state(props.__bind_${name}__ ?? props.${name} ?? ${val});`
         : `    this.${name} = __state(${val});`);
     }
 
     // Computed (derived)
     for (const { name, expr } of derivedVars) {
-      if (this.is(expr, 'block') && expr.length > 2) {
+      if (this.is(expr, 'block')) {
         const transformed = this.transformComponentMembers(expr);
         const body = this.generateFunctionBody(transformed);
         lines.push(`    this.${name} = __computed(() => ${body});`);
@@ -720,7 +731,7 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     for (const effect of effects) {
       const effectBody = effect[2];
       const isAsync = this.containsAwait(effectBody) ? 'async ' : '';
-      if (this.is(effectBody, 'block') && effectBody.length > 2) {
+      if (this.is(effectBody, 'block')) {
         const transformed = this.transformComponentMembers(effectBody);
         const body = this.generateFunctionBody(transformed, [], true);
         lines.push(`    __effect(${isAsync}() => ${body});`);
@@ -925,6 +936,13 @@ export function installComponentSupport(CodeGenerator, Lexer) {
         this._pushEffect(`${textVar}.data = ${this._self}.${str}.value;`);
         return textVar;
       }
+      // Slot projection — bare <slot> tag → project @children
+      if (str === 'slot' && this.componentMembers) {
+        const s = this._self;
+        const slotVar = this.newElementVar('slot');
+        this._createLines.push(`${slotVar} = ${s}.children instanceof Node ? ${s}.children : (${s}.children != null ? document.createTextNode(String(${s}.children)) : document.createComment(''));`);
+        return slotVar;
+      }
       // Static tag without content (possibly with #id)
       const [tagStr, idStr] = str.split('#');
       const elVar = this.newElementVar();
@@ -952,6 +970,14 @@ export function installComponentSupport(CodeGenerator, Lexer) {
       return this.generateChildComponent(headStr, rest);
     }
 
+    // Slot projection — replace <slot> with @children in component render
+    if (headStr === 'slot' && this.componentMembers) {
+      const s = this._self;
+      const slotVar = this.newElementVar('slot');
+      this._createLines.push(`${slotVar} = ${s}.children instanceof Node ? ${s}.children : (${s}.children != null ? document.createTextNode(String(${s}.children)) : document.createComment(''));`);
+      return slotVar;
+    }
+
     // HTML tag (possibly with #id, e.g. div#content)
     if (headStr && this.isHtmlTag(headStr)) {
       let [tagName, id] = headStr.split('#');
@@ -1336,7 +1362,11 @@ export function installComponentSupport(CodeGenerator, Lexer) {
             this._createLines.push(`if (${valueCode}) ${elVar}.setAttribute('${key}', '');`);
           }
         } else if (this.hasReactiveDeps(value)) {
-          this._pushEffect(`${elVar}.setAttribute('${key}', ${valueCode});`);
+          if (Array.isArray(value) && value[0] === 'presence') {
+            this._pushEffect(`{ const __v = ${valueCode}; __v == null ? ${elVar}.removeAttribute('${key}') : ${elVar}.setAttribute('${key}', __v); }`);
+          } else {
+            this._pushEffect(`${elVar}.setAttribute('${key}', ${valueCode});`);
+          }
         } else {
           this._createLines.push(`${elVar}.setAttribute('${key}', ${valueCode});`);
         }
@@ -1636,13 +1666,18 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     this._pendingAutoWire = false;
     const instVar = this.newElementVar('inst');
     const elVar = this.newElementVar('el');
-    const { propsCode, reactiveProps, childrenSetupLines } = this.buildComponentProps(args);
+    const { propsCode, reactiveProps, eventBindings, childrenSetupLines } = this.buildComponentProps(args);
 
     const s = this._self;
     this._createLines.push(`${instVar} = new ${componentName}(${propsCode});`);
     this._createLines.push(`${elVar} = ${instVar}._root = ${instVar}._create();`);
     this._createLines.push(`(${s}._children || (${s}._children = [])).push(${instVar});`);
 
+    for (const { event, value } of eventBindings) {
+      const handlerCode = this.generateInComponent(value, 'value');
+      this._createLines.push(`${elVar}.addEventListener('${event}', (e) => __batch(() => (${handlerCode})(e)));`);
+    }
+
     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) {
@@ -1663,12 +1698,17 @@ export function installComponentSupport(CodeGenerator, Lexer) {
   proto.buildComponentProps = function(args) {
     const props = [];
     const reactiveProps = [];
+    const eventBindings = [];
     let childrenVar = null;
     const childrenSetupLines = [];
 
     // Simple reactive values pass the signal directly for shared reactivity;
     // complex expressions use normal .value unwrapping to compute the value.
     const addProp = (key, value) => {
+      if (key.startsWith('@')) {
+        eventBindings.push({ event: key.slice(1).split('.')[0], value });
+        return;
+      }
       const isDirectSignal = 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]))
@@ -1688,7 +1728,11 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     const addObjectProps = (objExpr) => {
       for (let i = 1; i < objExpr.length; i++) {
         const [key, value] = objExpr[i];
-        if (typeof key === 'string') addProp(key, value);
+        if (typeof key === 'string') {
+          addProp(key, value);
+        } else if (Array.isArray(key) && key[0] === '.' && key[1] === 'this' && typeof key[2] === 'string') {
+          eventBindings.push({ event: key[2], value });
+        }
       }
     };
 
@@ -1735,7 +1779,7 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     }
 
     const propsCode = props.length > 0 ? `{ ${props.join(', ')} }` : '{}';
-    return { propsCode, reactiveProps, childrenSetupLines };
+    return { propsCode, reactiveProps, eventBindings, childrenSetupLines };
   };
 
   // --------------------------------------------------------------------------