rip-lang 3.9.2 → 3.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rip-lang",
-  "version": "3.9.2",
+  "version": "3.9.3",
   "description": "A modern language that compiles to JavaScript",
   "type": "module",
   "main": "src/compiler.js",
@@ -65,9 +65,5 @@
   },
   "homepage": "https://github.com/shreeve/rip-lang#readme",
   "author": "Steve Shreeve <steve.shreeve@gmail.com>",
-  "license": "MIT",
-  "devDependencies": {
-    "@rip-lang/api": "1.1.5",
-    "@rip-lang/ui": "0.2.0"
-  }
+  "license": "MIT"
 }

package/src/components.js

@@ -333,6 +333,10 @@ export function installComponentSupport(CodeGenerator, Lexer) {
           tokens.splice(i, 0, divToken);
           tokens.splice(i + 2, 0, cxToken);
           return 3;
+        } else if (prevTag === ':') {
+          // class: .('active', ...) → class: __clsx('active', ...)
+          tokens[i] = gen('IDENTIFIER', '__clsx', token);
+          return 1;
         } else {
           tokens.splice(i + 1, 0, cxToken);
           return 2;
@@ -939,8 +943,12 @@ export function installComponentSupport(CodeGenerator, Lexer) {
         const block = arg[2];
         if (this.is(block, 'block')) {
           for (const child of block.slice(1)) {
-            const childVar = this.generateNode(child);
-            this._createLines.push(`${elVar}.appendChild(${childVar});`);
+            if (this.is(child, 'object')) {
+              this.generateAttributes(elVar, child);
+            } else {
+              const childVar = this.generateNode(child);
+              this._createLines.push(`${elVar}.appendChild(${childVar});`);
+            }
           }
         } else if (block) {
           const childVar = this.generateNode(block);
@@ -999,15 +1007,22 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     const elVar = this.newElementVar();
     this._createLines.push(`${elVar} = document.createElement('${tag}');`);
 
-    if (classExprs.length > 0) {
-      const classArgs = classExprs.map(e => this.generateInComponent(e, 'value')).join(', ');
-      // 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}); });`);
-    }
+    // Defer className emission so class: attributes can merge with .() classes
+    const classArgs = classExprs.map(e => this.generateInComponent(e, 'value'));
+    const prevClassArgs = this._pendingClassArgs;
+    const prevClassEl = this._pendingClassEl;
+    this._pendingClassArgs = classArgs;
+    this._pendingClassEl = elVar;
 
     this.appendChildren(elVar, children);
+
+    if (this._pendingClassArgs.length > 0) {
+      const combined = this._pendingClassArgs.join(', ');
+      this._setupLines.push(`__effect(() => { ${elVar}.className = __clsx(${combined}); });`);
+    }
+    this._pendingClassArgs = prevClassArgs;
+    this._pendingClassEl = prevClassEl;
+
     return elVar;
   };
 
@@ -1041,6 +1056,19 @@ export function installComponentSupport(CodeGenerator, Lexer) {
           key = key.slice(1, -1);
         }
 
+        // Class merging: class: values merge with .() dynamic classes
+        if (key === 'class' || key === 'className') {
+          const valueCode = this.generateInComponent(value, 'value');
+          if (this._pendingClassArgs && this._pendingClassEl === elVar) {
+            this._pendingClassArgs.push(valueCode);
+          } else if (this.hasReactiveDeps(value)) {
+            this._setupLines.push(`__effect(() => { ${elVar}.className = __clsx(${valueCode}); });`);
+          } else {
+            this._createLines.push(`${elVar}.className = ${valueCode};`);
+          }
+          continue;
+        }
+
         // Element ref: ref: "name" → this.name = element
         if (key === 'ref') {
           const refName = String(value).replace(/^["']|["']$/g, '');
@@ -1493,26 +1521,50 @@ export function installComponentSupport(CodeGenerator, Lexer) {
           }
         }
       } else if (Array.isArray(arg) && (arg[0] === '->' || arg[0] === '=>')) {
-        const block = arg[2];
+        let block = arg[2];
         if (block) {
-          const savedCreateLines = this._createLines;
-          const savedSetupLines = this._setupLines;
-          this._createLines = [];
-          this._setupLines = [];
+          // Indented attributes: extract object nodes from block as props
+          if (this.is(block, 'block')) {
+            const domChildren = [];
+            for (const child of block.slice(1)) {
+              if (this.is(child, 'object')) {
+                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}`);
+                  }
+                }
+              } else {
+                domChildren.push(child);
+              }
+            }
+            block = domChildren.length > 0 ? ['block', ...domChildren] : null;
+          }
 
-          childrenVar = this.generateTemplateBlock(block);
+          if (block) {
+            const savedCreateLines = this._createLines;
+            const savedSetupLines = this._setupLines;
+            this._createLines = [];
+            this._setupLines = [];
 
-          const childCreateLines = this._createLines;
-          const childSetupLinesCopy = this._setupLines;
+            childrenVar = this.generateTemplateBlock(block);
 
-          this._createLines = savedCreateLines;
-          this._setupLines = savedSetupLines;
+            const childCreateLines = this._createLines;
+            const childSetupLinesCopy = this._setupLines;
 
-          for (const line of childCreateLines) {
-            this._createLines.push(line);
+            this._createLines = savedCreateLines;
+            this._setupLines = savedSetupLines;
+
+            for (const line of childCreateLines) {
+              this._createLines.push(line);
+            }
+            childrenSetupLines.push(...childSetupLinesCopy);
+            props.push(`children: ${childrenVar}`);
           }
-          childrenSetupLines.push(...childSetupLinesCopy);
-          props.push(`children: ${childrenVar}`);
         }
       }
     }