ripple 0.2.67 → 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.67",
+  "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';
@@ -87,6 +87,10 @@ const visitors = {
     next(scope !== undefined && scope !== state.scope ? { ...state, scope } : state);
   },
 
+  Program(_, context) {
+    return context.next({ ...context.state, function_depth: 0, expression: null });
+  },
+
   Identifier(node, context) {
     const binding = context.state.scope.get(node.name);
     const parent = context.path.at(-1);
@@ -133,6 +137,16 @@ const visitors = {
   },
 
   CallExpression(node, context) {
+    const callee = node.callee;
+
+    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,
+        node,
+      );
+    }
+
     if (context.state.metadata?.tracking === false) {
       context.state.metadata.tracking = true;
     }
@@ -145,27 +159,20 @@ const visitors = {
   },
 
   VariableDeclaration(node, context) {
-    const { state, visit, path } = context;
+    const { state, visit } = context;
 
     for (const declarator of node.declarations) {
       if (is_inside_component(context) && node.kind === 'var') {
         error(
-          'var declarations are not allowed in components, use let or const instead',
+          '`var` declarations are not allowed in components, use let or const instead',
           state.analysis.module.filename,
           declarator,
         );
       }
       const metadata = { tracking: false, await: false };
-      const parent = path.at(-1);
-      const init_is_untracked =
-        declarator.init !== null &&
-        declarator.init.type === 'CallExpression' &&
-        is_ripple_import(declarator.init.callee, context) &&
-        declarator.init.callee.type === 'Identifier' &&
-        (declarator.init.callee.name === 'untrack' || declarator.init.callee.name === 'deferred');
 
       if (declarator.id.type === 'Identifier') {
-  		visit(declarator, state);
+        visit(declarator, state);
       } else {
         const paths = extract_paths(declarator.id);
 
@@ -234,7 +241,7 @@ const visitors = {
     }
     const elements = [];
 
-    context.next({ ...context.state, elements });
+    context.next({ ...context.state, elements, function_depth: context.state.function_depth + 1 });
 
     const css = node.css;
 
@@ -262,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,
     };