ripple 0.2.68 → 0.2.69

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.68",
+  "version": "0.2.69",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",

package/src/compiler/phases/1-parse/index.js

@@ -192,6 +192,135 @@ function RipplePlugin(config) {
         return super.parseExportDefaultDeclaration();
       }
 
+      parseForStatement(node) {
+        this.next()
+        let awaitAt = (this.options.ecmaVersion >= 9 && this.canAwait && this.eatContextual("await")) ? this.lastTokStart : -1
+        this.labels.push({kind: "loop"})
+        this.enterScope(0)
+        this.expect(tt.parenL)
+        
+        if (this.type === tt.semi) {
+          if (awaitAt > -1) this.unexpected(awaitAt)
+          return this.parseFor(node, null)
+        }
+        
+        let isLet = this.isLet()
+        if (this.type === tt._var || this.type === tt._const || isLet) {
+          let init = this.startNode(), kind = isLet ? "let" : this.value
+          this.next()
+          this.parseVar(init, true, kind)
+          this.finishNode(init, "VariableDeclaration")
+          return this.parseForAfterInitWithIndex(node, init, awaitAt)
+        }
+        
+        // Handle other cases like using declarations if they exist
+        let startsWithLet = this.isContextual("let"), isForOf = false
+        let usingKind = (this.isUsing && this.isUsing(true)) ? "using" : (this.isAwaitUsing && this.isAwaitUsing(true)) ? "await using" : null
+        if (usingKind) {
+          let init = this.startNode()
+          this.next()
+          if (usingKind === "await using") {
+            if (!this.canAwait) {
+              this.raise(this.start, "Await using cannot appear outside of async function")
+            }
+            this.next()
+          }
+          this.parseVar(init, true, usingKind)
+          this.finishNode(init, "VariableDeclaration")
+          return this.parseForAfterInitWithIndex(node, init, awaitAt)
+        }
+        
+        let containsEsc = this.containsEsc
+        let refDestructuringErrors = {}
+        let initPos = this.start
+        let init = awaitAt > -1
+          ? this.parseExprSubscripts(refDestructuringErrors, "await")
+          : this.parseExpression(true, refDestructuringErrors)
+        
+        if (this.type === tt._in || (isForOf = this.options.ecmaVersion >= 6 && this.isContextual("of"))) {
+          if (awaitAt > -1) { // implies `ecmaVersion >= 9`
+            if (this.type === tt._in) this.unexpected(awaitAt)
+            node.await = true
+          } else if (isForOf && this.options.ecmaVersion >= 8) {
+            if (init.start === initPos && !containsEsc && init.type === "Identifier" && init.name === "async") this.unexpected()
+            else if (this.options.ecmaVersion >= 9) node.await = false
+          }
+          if (startsWithLet && isForOf) this.raise(init.start, "The left-hand side of a for-of loop may not start with 'let'.")
+          this.toAssignable(init, false, refDestructuringErrors)
+          this.checkLValPattern(init)
+          return this.parseForInWithIndex(node, init)
+        } else {
+          this.checkExpressionErrors(refDestructuringErrors, true)
+        }
+        
+        if (awaitAt > -1) this.unexpected(awaitAt)
+        return this.parseFor(node, init)
+      }
+
+      parseForAfterInitWithIndex(node, init, awaitAt) {
+        if ((this.type === tt._in || (this.options.ecmaVersion >= 6 && this.isContextual("of"))) && init.declarations.length === 1) {
+          if (this.options.ecmaVersion >= 9) {
+            if (this.type === tt._in) {
+              if (awaitAt > -1) this.unexpected(awaitAt)
+            } else node.await = awaitAt > -1
+          }
+          return this.parseForInWithIndex(node, init)
+        }
+        if (awaitAt > -1) this.unexpected(awaitAt)
+        return this.parseFor(node, init)
+      }
+
+      parseForInWithIndex(node, init) {
+        const isForIn = this.type === tt._in
+        this.next()
+
+        if (
+          init.type === "VariableDeclaration" &&
+          init.declarations[0].init != null &&
+          (
+            !isForIn ||
+            this.options.ecmaVersion < 8 ||
+            this.strict ||
+            init.kind !== "var" ||
+            init.declarations[0].id.type !== "Identifier"
+          )
+        ) {
+          this.raise(
+            init.start,
+            `${isForIn ? "for-in" : "for-of"} loop variable declaration may not have an initializer`
+          )
+        }
+        
+        node.left = init
+        node.right = isForIn ? this.parseExpression() : this.parseMaybeAssign()
+        
+        // Check for our extended syntax: "; index varName"
+        if (!isForIn && this.type === tt.semi) {
+          this.next() // consume ';'
+          
+          if (this.isContextual('index')) {
+            this.next() // consume 'index'
+            
+            if (this.type === tt.name) {
+              node.index = this.parseIdent()
+            } else {
+              this.raise(this.start, 'Expected identifier after "index" keyword')
+            }
+          } else {
+            this.raise(this.start, 'Expected "index" keyword after semicolon in for-of loop')
+          }
+        } else if (!isForIn) {
+          // Set index to null for standard for-of loops
+          node.index = null
+        }
+        
+        this.expect(tt.parenR)
+        node.body = this.parseStatement("for")
+        this.exitScope()
+        this.labels.pop()
+        return this.finishNode(node, isForIn ? "ForInStatement" : "ForOfStatement")
+      }
+
       shouldParseExportStatement() {
         if (super.shouldParseExportStatement()) {
           return true;
@@ -791,6 +920,8 @@ function RipplePlugin(config) {
           return node;
         }
 
+
+
         if (this.type.label === '@') {
 		  // Try to parse as an expression statement first using tryParse
           // This allows us to handle Ripple @ syntax like @count++ without

package/src/compiler/phases/2-analyze/index.js

@@ -5,7 +5,7 @@ import {
   get_delegated_event,
   is_element_dom_element,
   is_inside_component,
-  is_ripple_import,
+  is_ripple_track_call,
   is_void_element,
 } from '../../utils.js';
 import { extract_paths } from '../../../utils/ast.js';
@@ -139,16 +139,7 @@ const visitors = {
   CallExpression(node, context) {
     const callee = node.callee;
 
-    if (
-      context.state.function_depth === 0 &&
-      ((callee.type === 'Identifier' && callee.name === 'track') ||
-        (callee.type === 'MemberExpression' &&
-          callee.object.type === 'Identifier' &&
-          callee.property.type === 'Identifier' &&
-          callee.property.name === 'track' &&
-          !callee.computed)) &&
-      is_ripple_import(callee, context)
-    ) {
+    if (context.state.function_depth === 0 && is_ripple_track_call(callee, context)) {
       error(
         '`track` can only be used within a reactive context, such as a component, function or class that is used or created from a component',
         context.state.analysis.module.filename,
@@ -278,6 +269,21 @@ const visitors = {
       return context.next();
     }
 
+    if (node.index) {
+      const state = context.state;
+      const scope = state.scopes.get(node);
+      const binding = scope.get(node.index.name);
+      binding.kind = 'index'
+
+      if (binding !== null) {
+        binding.transform = {
+          read: (node) => {
+            return b.call('_$_.get', node)
+          },
+        };
+      }
+    }
+
     node.metadata = {
       has_template: false,
     };

package/src/compiler/phases/3-transform/index.js

@@ -3,7 +3,13 @@ import path from 'node:path';
 import { print } from 'esrap';
 import tsx from 'esrap/languages/tsx';
 import * as b from '../../../utils/builders.js';
-import { IS_CONTROLLED, TEMPLATE_FRAGMENT } from '../../../constants.js';
+import {
+  IS_CONTROLLED,
+  IS_INDEXED,
+  TEMPLATE_FRAGMENT,
+  TEMPLATE_SVG_NAMESPACE,
+  TEMPLATE_MATHML_NAMESPACE,
+} from '../../../constants.js';
 import { sanitize_template_string } from '../../../utils/sanitize_template_string.js';
 import {
   build_hoisted_params,
@@ -13,7 +19,6 @@ import {
   escape_html,
   is_boolean_attribute,
   is_dom_property,
-  is_ripple_import,
   is_declared_function_within_component,
   is_inside_call_expression,
   is_value_static,
@@ -21,6 +26,7 @@ import {
   is_component_level_function,
   is_element_dom_element,
   is_top_level_await,
+  is_ripple_track_call,
 } from '../../utils.js';
 import is_reference from 'is-reference';
 import { object } from '../../../utils/ast.js';
@@ -104,6 +110,22 @@ function build_getter(node, context) {
   return node;
 }
 
+function determine_namespace_for_children(element_name, current_namespace) {
+  if (element_name === 'foreignObject') {
+    return 'html';
+  }
+
+  if (element_name === 'svg') {
+    return 'svg';
+  }
+
+  if (element_name === 'math') {
+    return 'mathml';
+  }
+
+  return current_namespace;
+}
+
 const visitors = {
   _: function set_scope(node, { next, state }) {
     const scope = state.scopes.get(node);
@@ -128,7 +150,10 @@ const visitors = {
         if (
           (context.state.metadata?.tracking === false ||
             (parent.type !== 'AssignmentExpression' && parent.type !== 'UpdateExpression')) &&
-          (node.tracked || binding?.kind === 'prop' || binding?.kind === 'prop_fallback') &&
+          (node.tracked ||
+            binding?.kind === 'prop' ||
+            binding?.kind === 'index' ||
+            binding?.kind === 'prop_fallback') &&
           binding?.node !== node
         ) {
           if (context.state.metadata?.tracking === false) {
@@ -165,16 +190,7 @@ const visitors = {
       context.state.metadata.tracking = true;
     }
 
-    if (
-      !context.state.to_ts &&
-      ((callee.type === 'Identifier' && callee.name === 'track') ||
-        (callee.type === 'MemberExpression' &&
-          callee.object.type === 'Identifier' &&
-          callee.property.type === 'Identifier' &&
-          callee.property.name === 'track' &&
-          !callee.computed)) &&
-      is_ripple_import(callee, context)
-    ) {
+    if (!context.state.to_ts && is_ripple_track_call(callee, context)) {
       if (node.arguments.length === 0) {
         node.arguments.push(b.void0);
       }
@@ -427,6 +443,10 @@ const visitors = {
     const is_spreading = node.attributes.some((attr) => attr.type === 'SpreadAttribute');
     const spread_attributes = is_spreading ? [] : null;
 
+    const child_namespace = is_dom_element
+      ? determine_namespace_for_children(node.id.name, state.namespace)
+      : state.namespace;
+
     const handle_static_attr = (name, value) => {
       const attr_value = b.literal(
         ` ${name}${
@@ -629,12 +649,16 @@ const visitors = {
           if (node.metadata.scoped && state.component.css) {
             expression = b.binary('+', b.literal(state.component.css.hash + ' '), expression);
           }
-          const is_html = context.state.metadata.namespace === 'html' && node.id.name !== 'svg'
+          const is_html = context.state.metadata.namespace === 'html' && node.id.name !== 'svg';
 
-          if (metadata.tracking) {
-            local_updates.push(b.stmt(b.call('_$_.set_class', id, expression, is_html)));
+          if (class_attribute.name.name === '$class' || metadata.tracking) {
+            local_updates.push(
+              b.stmt(b.call('_$_.set_class', id, expression, undefined, b.literal(is_html))),
+            );
           } else {
-            state.init.push(b.stmt(b.call('_$_.set_class', id, expression, is_html)));
+            state.init.push(
+              b.stmt(b.call('_$_.set_class', id, expression, undefined, b.literal(is_html))),
+            );
           }
         }
       } else if (node.metadata.scoped && state.component.css) {
@@ -658,7 +682,7 @@ const visitors = {
       if (!is_void) {
         transform_children(node.children, {
           visit,
-          state: { ...state, init, update },
+          state: { ...state, init, update, namespace: child_namespace },
           root: false,
         });
         state.template.push(`</${node.id.name}>`);
@@ -769,7 +793,7 @@ const visitors = {
       for (const child of node.children) {
         if (child.type === 'Component') {
           const id = child.id;
-          props.push(b.prop('init', id, visit(child, state)));
+          props.push(b.prop('init', id, visit(child, { ...state, namespace: child_namespace })));
         } else {
           children_filtered.push(child);
         }
@@ -780,6 +804,7 @@ const visitors = {
         const children = visit(b.component(b.id('children'), [], children_filtered), {
           ...context.state,
           scope: component_scope,
+          namespace: child_namespace,
         });
 
         if (children_prop) {
@@ -1001,6 +1026,12 @@ const visitors = {
       return;
     }
     const is_controlled = node.is_controlled;
+    const index = node.index;
+    let flags = is_controlled ? IS_CONTROLLED : 0;
+
+    if (index !== null) {
+      flags |= IS_INDEXED;
+    }
 
     // do only if not controller
     if (!is_controlled) {
@@ -1018,15 +1049,15 @@ const visitors = {
           id,
           b.thunk(context.visit(node.right)),
           b.arrow(
-            [b.id('__anchor'), pattern],
+            index ? [b.id('__anchor'), pattern, index] : [b.id('__anchor'), pattern],
             b.block(
               transform_body(node.body.body, {
                 ...context,
-                state: { ...context.state, scope: body_scope },
+                state: { ...context.state, scope: body_scope, namespace: context.state.namespace },
               }),
             ),
           ),
-          b.literal(is_controlled ? IS_CONTROLLED : 0),
+          b.literal(flags),
         ),
       ),
     );
@@ -1470,9 +1501,15 @@ function transform_children(children, context) {
 
     if (child.type === 'Text' && prev_child?.type === 'Text') {
       if (child.expression.type === 'Literal' && prev_child.expression.type === 'Literal') {
-        prev_child.expression = b.literal(prev_child.expression.value + child.expression.value);
+        prev_child.expression = b.literal(
+          prev_child.expression.value + String(child.expression.value),
+        );
       } else {
-        prev_child.expression = b.binary('+', prev_child.expression, child.expression);
+        prev_child.expression = b.binary(
+          '+',
+          prev_child.expression,
+          b.call('String', child.expression),
+        );
       }
       normalized.splice(i, 1);
     }
@@ -1540,7 +1577,7 @@ function transform_children(children, context) {
       prev = flush_node;
 
       if (node.type === 'Element') {
-        visit(node, { ...state, flush_node });
+        visit(node, { ...state, flush_node, namespace: state.namespace });
       } else if (node.type === 'Text') {
         const metadata = { tracking: false, await: false };
         const expression = visit(node.expression, { ...state, metadata });
@@ -1576,26 +1613,33 @@ function transform_children(children, context) {
       } else if (node.type === 'ForOfStatement') {
         const is_controlled = normalized.length === 1;
         node.is_controlled = is_controlled;
-        visit(node, { ...state, flush_node });
+        visit(node, { ...state, flush_node, namespace: state.namespace });
       } else if (node.type === 'IfStatement') {
         const is_controlled = normalized.length === 1;
         node.is_controlled = is_controlled;
-        visit(node, { ...state, flush_node });
+        visit(node, { ...state, flush_node, namespace: state.namespace });
       } else if (node.type === 'TryStatement') {
         const is_controlled = normalized.length === 1;
         node.is_controlled = is_controlled;
-        visit(node, { ...state, flush_node });
+        visit(node, { ...state, flush_node, namespace: state.namespace });
       } else {
         debugger;
       }
     }
   }
 
+  const template_namespace = state.namespace || 'html';
+
   if (root && initial !== null && template_id !== null) {
-    const flags = is_fragment ? b.literal(TEMPLATE_FRAGMENT) : b.literal(0);
+    let flags = is_fragment ? TEMPLATE_FRAGMENT : 0;
+    if (template_namespace === 'svg') {
+      flags |= TEMPLATE_SVG_NAMESPACE;
+    } else if (template_namespace === 'mathml') {
+      flags |= TEMPLATE_MATHML_NAMESPACE;
+    }
     state.final.push(b.stmt(b.call('_$_.append', b.id('__anchor'), initial)));
     state.hoisted.push(
-      b.var(template_id, b.call('_$_.template', join_template(state.template), flags)),
+      b.var(template_id, b.call('_$_.template', join_template(state.template), b.literal(flags))),
     );
   }
 }
@@ -1609,6 +1653,7 @@ function transform_body(body, { visit, state }) {
     update: [],
     final: [],
     metadata: state.metadata,
+    namespace: state.namespace || 'html', // Preserve namespace context
   };
 
   transform_children(body, { visit, state: body_state, root: true });
@@ -1637,7 +1682,9 @@ export function transform(filename, source, analysis, to_ts) {
     to_ts,
   };
 
-  const program = /** @type {ESTree.Program} */ (walk(analysis.ast, state, visitors));
+  const program = /** @type {ESTree.Program} */ (
+    walk(analysis.ast, { ...state, namespace: 'html' }, visitors)
+  );
 
   for (const hoisted of state.hoisted) {
     program.body.unshift(hoisted);