ripple 0.2.58 → 0.2.60

package/package.json

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

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

@@ -25,7 +25,6 @@ function RipplePlugin(config) {
 
     class RippleParser extends Parser {
       #path = [];
-      skip_decorator = false;
 
       // Helper method to get the element name from a JSX identifier or member expression
       getElementName(node) {
@@ -39,10 +38,45 @@ function RipplePlugin(config) {
         return null;
       }
 
-      // Override getTokenFromCode to handle @ as an identifier prefix
       getTokenFromCode(code) {
+        if (code === 60) {
+          // < character
+          if (this.#path.findLast((n) => n.type === 'Component')) {
+            // Check if everything before this position on the current line is whitespace
+            let lineStart = this.pos - 1;
+            while (
+              lineStart >= 0 &&
+              this.input.charCodeAt(lineStart) !== 10 &&
+              this.input.charCodeAt(lineStart) !== 13
+            ) {
+              lineStart--;
+            }
+            lineStart++; // Move past the newline character
+
+            // Check if all characters from line start to current position are whitespace
+            let allWhitespace = true;
+            for (let i = lineStart; i < this.pos; i++) {
+              const ch = this.input.charCodeAt(i);
+              if (ch !== 32 && ch !== 9) {
+                allWhitespace = false;
+                break;
+              }
+            }
+
+            // Check if the character after < is not whitespace
+            if (allWhitespace && this.pos + 1 < this.input.length) {
+              const nextChar = this.input.charCodeAt(this.pos + 1);
+              if (nextChar !== 32 && nextChar !== 9 && nextChar !== 10 && nextChar !== 13) {
+                const tokTypes = this.acornTypeScript.tokTypes;
+                ++this.pos;
+                return this.finishToken(tokTypes.jsxTagStart);
+              }
+            }
+          }
+        }
+
         if (code === 64) {
-          // '@' character
+          // @ character
           // Look ahead to see if this is followed by a valid identifier character
           if (this.pos + 1 < this.input.length) {
             const nextChar = this.input.charCodeAt(this.pos + 1);
@@ -145,7 +179,6 @@ function RipplePlugin(config) {
           this.#path.push(node);
 
           this.parseTemplateBody(node.body);
-
           this.#path.pop();
           this.exitScope();
 
@@ -269,6 +302,71 @@ function RipplePlugin(config) {
         return this.finishNode(node, 'JSXAttribute');
       }
 
+      jsx_parseNamespacedName() {
+        const base = this.jsx_parseIdentifier();
+        if (!this.eat(tt.colon)) return base;
+        const node = this.startNodeAt(base.start, base.loc.start);
+        node.namespace = base;
+        node.name = this.jsx_parseIdentifier();
+        return this.finishNode(node, 'JSXNamespacedName');
+      }
+
+      jsx_parseIdentifier() {
+        const node = this.startNode();
+
+        if (this.type.label === '@') {
+          this.next(); // consume @
+
+          if (this.type === tt.name || this.type.label === 'jsxName') {
+            node.name = this.value;
+            node.tracked = true;
+            this.next();
+          } else {
+            // Unexpected token after @
+            this.unexpected();
+          }
+        } else if (
+          (this.type === tt.name || this.type.label === 'jsxName') &&
+          this.value &&
+          this.value.startsWith('@')
+        ) {
+          node.name = this.value.substring(1);
+          node.tracked = true;
+          this.next();
+        } else if (this.type === tt.name || this.type.keyword || this.type.label === 'jsxName') {
+          node.name = this.value;
+          node.tracked = false; // Explicitly mark as not tracked
+          this.next();
+        } else {
+          return super.jsx_parseIdentifier();
+        }
+
+        return this.finishNode(node, 'JSXIdentifier');
+      }
+
+      // Override jsx_parseElementName to support @ syntax in member expressions
+      jsx_parseElementName() {
+        let node = this.jsx_parseIdentifier();
+        if (this.eat(tt.dot)) {
+          let memberExpr = this.startNodeAt(node.start, node.loc && node.loc.start);
+          memberExpr.object = node;
+          memberExpr.property = this.jsx_parseIdentifier();
+          memberExpr.computed = false;
+          while (this.eat(tt.dot)) {
+            let newMemberExpr = this.startNodeAt(
+              memberExpr.start,
+              memberExpr.loc && memberExpr.loc.start,
+            );
+            newMemberExpr.object = memberExpr;
+            newMemberExpr.property = this.jsx_parseIdentifier();
+            newMemberExpr.computed = false;
+            memberExpr = this.finishNode(newMemberExpr, 'JSXMemberExpression');
+          }
+          return this.finishNode(memberExpr, 'JSXMemberExpression');
+        }
+        return node;
+      }
+
       jsx_parseAttributeValue() {
         const tok = this.acornTypeScript.tokTypes;
 
@@ -323,6 +421,7 @@ function RipplePlugin(config) {
         }
         return this.finishNode(node, 'TryStatement');
       }
+
       jsx_readToken() {
         let out = '',
           chunkStart = this.pos;
@@ -432,7 +531,9 @@ function RipplePlugin(config) {
               // '}'
               if (
                 ch === 125 &&
-                (this.#path.length === 0 || this.#path.at(-1)?.type === 'Component')
+                (this.#path.length === 0 ||
+                  this.#path.at(-1)?.type === 'Component' ||
+                  this.#path.at(-1)?.type === 'Element')
               ) {
                 return original.readToken.call(this, ch);
               }
@@ -582,53 +683,6 @@ function RipplePlugin(config) {
         return element;
       }
 
-      parseSubscript(base, startPos, startLoc, noCalls, maybeAsyncArrow, optionalChained, forInit) {
-        const prev_char = this.input.at(this.pos - 2);
-
-        if (
-          this.value === '<' &&
-          (prev_char === ' ' || prev_char === '\t') &&
-          this.#path.findLast((n) => n.type === 'Component')
-        ) {
-          this.input.charCodeAt(this.pos);
-          // Check if this looks like JSX by looking ahead
-          const ahead = this.lookahead();
-          const curContext = this.curContext();
-          if (
-            curContext.token !== '(' &&
-            (ahead.type.label === 'name' || ahead.value === '/' || ahead.value === '>')
-          ) {
-            // This is JSX, rewind to the end of the object expression
-            // and let ASI handle the semicolon insertion naturally
-            this.pos = base.end;
-            this.type = tt.braceR;
-            this.value = '}';
-            this.start = base.end - 1;
-            this.end = base.end;
-            const position = this.curPosition();
-            this.startLoc = position;
-            this.endLoc = position;
-            // Avoid triggering onComment handlers, as they will have
-            // already been triggered when parsing the subscript before
-            const onComment = this.options.onComment;
-            this.options.onComment = () => {};
-            this.next();
-            this.options.onComment = onComment;
-
-            return base;
-          }
-        }
-        return super.parseSubscript(
-          base,
-          startPos,
-          startLoc,
-          noCalls,
-          maybeAsyncArrow,
-          optionalChained,
-          forInit,
-        );
-      }
-
       parseTemplateBody(body) {
         var inside_func =
           this.context.some((n) => n.token === 'function') || this.scopeStack.length > 1;
@@ -645,6 +699,11 @@ function RipplePlugin(config) {
           }
         }
 
+        if (this.type.label === '</>/<=/>=') {
+          debugger;
+          console.log('HERE', this.value, this.type);
+        }
+
         if (this.type.label === '{') {
           const node = this.jsx_parseExpressionContainer();
           node.type = 'Text';
@@ -733,7 +792,7 @@ function RipplePlugin(config) {
         }
 
         if (this.type.label === '@') {
-          // Try to parse as an expression statement first using tryParse
+		  // Try to parse as an expression statement first using tryParse
           // This allows us to handle Ripple @ syntax like @count++ without
           // interfering with legitimate decorator syntax
           this.skip_decorator = true;
@@ -741,7 +800,7 @@ function RipplePlugin(config) {
             const node = this.startNode();
             this.next();
             // Force expression context to ensure @ is tokenized correctly
-            const oldExprAllowed = this.exprAllowed;
+            const old_expr_allowed = this.exprAllowed;
             this.exprAllowed = true;
             node.expression = this.parseExpression();
 
@@ -767,7 +826,7 @@ function RipplePlugin(config) {
               // TODO?
             }
 
-            this.exprAllowed = oldExprAllowed;
+            this.exprAllowed = old_expr_allowed;
             return this.finishNode(node, 'ExpressionStatement');
           });
           this.skip_decorator = false;

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

@@ -363,7 +363,7 @@ const visitors = {
     context.next();
   },
 
-  JSXElement(_, context) {
+  JSXElement(node, context) {
     {
       error(
         'Elements cannot be used as generic expressions, only as statements within a component',
@@ -375,7 +375,7 @@ const visitors = {
 
   Element(node, context) {
     const { state, visit, path } = context;
-    const is_dom_element = is_element_dom_element(node, context);
+    const is_dom_element = is_element_dom_element(node);
     const attribute_names = new Set();
 
     mark_control_flow_has_template(path);

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

@@ -296,25 +296,6 @@ const visitors = {
       );
     }
 
-    if (parent.type !== 'AssignmentExpression') {
-      const object = node.object;
-      const property = node.property;
-
-      if (object.type === 'Identifier' && object.name === 'Object') {
-        const binding = context.state.scope.get(object.name);
-
-        if (binding === null) {
-          if (property.type === 'Identifier' && property.name === 'values') {
-            return b.id('$.object_values');
-          } else if (property.type === 'Identifier' && property.name === 'entries') {
-            return b.id('$.object_entries');
-          } else if (property.type === 'Identifier' && property.name === 'keys') {
-            return b.id('$.object_keys');
-          }
-        }
-      }
-    }
-
     if (node.object.type === 'MemberExpression' && node.object.optional) {
       const metadata = { tracking: false, await: false };
 
@@ -433,7 +414,7 @@ const visitors = {
   Element(node, context) {
     const { state, visit } = context;
 
-    const is_dom_element = is_element_dom_element(node, context);
+    const is_dom_element = is_element_dom_element(node);
     const is_spreading = node.attributes.some((attr) => attr.type === 'SpreadAttribute');
     const spread_attributes = is_spreading ? [] : null;
 
@@ -1296,7 +1277,7 @@ function transform_ts_child(node, context) {
     }
 
     if (!node.selfClosing && !has_children_props && node.children.length > 0) {
-      const is_dom_element = is_element_dom_element(node, context);
+      const is_dom_element = is_element_dom_element(node);
 
       const component_scope = context.state.scopes.get(node);
       const thunk = b.thunk(
@@ -1436,7 +1417,7 @@ function transform_children(children, context) {
         node.type === 'TryStatement' ||
         node.type === 'ForOfStatement' ||
         (node.type === 'Element' &&
-          (node.id.type !== 'Identifier' || !is_element_dom_element(node, context))),
+          (node.id.type !== 'Identifier' || !is_element_dom_element(node))),
     ) ||
     normalized.filter(
       (node) => node.type !== 'VariableDeclaration' && node.type !== 'EmptyStatement',
@@ -1447,7 +1428,7 @@ function transform_children(children, context) {
 
   const get_id = (node) => {
     return b.id(
-      node.type == 'Element' && is_element_dom_element(node, context)
+      node.type == 'Element' && is_element_dom_element(node)
         ? state.scope.generate(node.id.name)
         : node.type == 'Text'
           ? state.scope.generate('text')
@@ -1483,7 +1464,8 @@ function transform_children(children, context) {
       node.type === 'ThrowStatement' ||
       node.type === 'FunctionDeclaration' ||
       node.type === 'DebuggerStatement' ||
-      node.type === 'ClassDeclaration'
+      node.type === 'ClassDeclaration' ||
+      node.type === 'Component'
     ) {
       const metadata = { await: false };
       state.init.push(visit(node, { ...state, metadata }));
@@ -1554,7 +1536,7 @@ function transform_children(children, context) {
             const id = state.flush_node();
             state.template.push(' ');
             state.init.push(
-              b.stmt(b.assignment('=', b.member(id, b.id('textContent')), expression)),
+              b.stmt(b.assignment('=', b.member(b.member(id, b.id('firstChild')), b.id('nodeValue')), expression)),
             );
           }
         } else {

package/src/compiler/utils.js

@@ -611,51 +611,11 @@ export function hash(str) {
   return (hash >>> 0).toString(36);
 }
 
-const common_dom_names = new Set([
-  'div',
-  'span',
-  'input',
-  'textarea',
-  'select',
-  'button',
-  'a',
-  'p',
-  'img',
-  'form',
-  'label',
-  'ul',
-  'ol',
-  'li',
-  'table',
-  'thead',
-  'tbody',
-  'tr',
-  'td',
-  'th',
-  'section',
-  'header',
-  'footer',
-  'nav',
-  'main',
-  'article',
-  'aside',
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-]);
-
-export function is_element_dom_element(node, context) {
-  if (node.id.type === 'Identifier' && node.id.name[0].toLowerCase() === node.id.name[0]) {
-    if (common_dom_names.has(node.id.name)) {
-      return true;
-    }
-    const binding = context.state.scope.get(node.id.name);
-    if (binding == null) {
-      return true;
-    }
-  }
-  return false;
+export function is_element_dom_element(node) {
+  return (
+    node.id.type === 'Identifier' &&
+    node.id.name[0].toLowerCase() === node.id.name[0] &&
+    node.id.name !== 'children' &&
+    !node.id.tracked
+  );
 }

package/src/runtime/internal/client/blocks.js

@@ -11,9 +11,9 @@ import {
   RENDER_BLOCK,
   ROOT_BLOCK,
   TRY_BLOCK,
-} from './constants';
-import { next_sibling } from './operations';
-import { apply_element_spread } from './render';
+} from './constants.js';
+import { next_sibling } from './operations.js';
+import { apply_element_spread } from './render.js';
 import {
   active_block,
   active_component,
@@ -22,8 +22,8 @@ import {
   run_block,
   run_teardown,
   schedule_update,
-} from './runtime';
-import { suspend } from './try';
+} from './runtime.js';
+import { suspend } from './try.js';
 
 /**
  * @param {Function} fn

package/src/runtime/internal/client/context.js

@@ -1,6 +1,6 @@
 /** @import { Component } from '#client' */
 
-import { active_component } from './runtime';
+import { active_component } from './runtime.js';
 
 /**
  * @template T

package/src/runtime/internal/client/events.js

@@ -1,4 +1,4 @@
-import { is_passive_event } from '../../../utils/events';
+import { is_passive_event } from '../../../utils/events.js';
 import {
   active_block,
   active_reaction,
@@ -7,7 +7,7 @@ import {
   set_tracking,
   tracking,
 } from './runtime';
-import { array_from, define_property, is_array } from './utils';
+import { array_from, define_property, is_array } from './utils.js';
 
 /** @type {Set<string>} */
 var all_registered_events = new Set();

package/src/runtime/internal/client/for.js

@@ -1,9 +1,9 @@
-import { IS_CONTROLLED } from '../../../constants';
-import { branch, destroy_block, destroy_block_children, render } from './blocks';
-import { FOR_BLOCK, TRACKED_ARRAY } from './constants';
-import { create_text } from './operations';
-import { active_block, untrack } from './runtime';
-import { array_from, is_array } from './utils';
+import { IS_CONTROLLED } from '../../../constants.js';
+import { branch, destroy_block, destroy_block_children, render } from './blocks.js';
+import { FOR_BLOCK, TRACKED_ARRAY } from './constants.js';
+import { create_text } from './operations.js';
+import { active_block, untrack } from './runtime.js';
+import { array_from, is_array } from './utils.js';
 
 function create_item(anchor, value, render_fn) {
   var b = branch(() => {

package/src/runtime/internal/client/if.js

@@ -1,5 +1,5 @@
-import { branch, destroy_block, render } from './blocks';
-import { IF_BLOCK, UNINITIALIZED } from './constants';
+import { branch, destroy_block, render } from './blocks.js';
+import { IF_BLOCK, UNINITIALIZED } from './constants.js';
 
 export function if_block(node, fn) {
   var anchor = node;

package/src/runtime/internal/client/portal.js

@@ -1,7 +1,7 @@
-import { branch, destroy_block, render } from './blocks';
-import { UNINITIALIZED } from './constants';
-import { handle_root_events } from './events';
-import { create_text } from './operations';
+import { branch, destroy_block, render } from './blocks.js';
+import { UNINITIALIZED } from './constants.js';
+import { handle_root_events } from './events.js';
+import { create_text } from './operations.js';
 
 export function Portal(_, props) {
   let target = UNINITIALIZED;

package/src/runtime/internal/client/render.js

@@ -1,14 +1,14 @@
-import { destroy_block, ref } from './blocks';
-import { REF_PROP } from './constants';
+import { destroy_block, ref } from './blocks.js';
+import { REF_PROP } from './constants.js';
 import {
   get_descriptors,
   get_own_property_symbols,
   get_prototype_of,
   is_tracked_object,
-} from './utils';
-import { delegate, event } from './events';
-import { get_attribute_event_name, is_delegated, is_event_attribute } from '../../../utils/events';
-import { get } from './runtime';
+} from './utils.js';
+import { delegate, event } from './events.js';
+import { get_attribute_event_name, is_delegated, is_event_attribute } from '../../../utils/events.js';
+import { get } from './runtime.js';
 
 export function set_text(text, value) {
   // For objects, we apply string coercion (which might make things like $state array references in the template reactive) before diffing

package/src/runtime/internal/client/runtime.js

@@ -24,9 +24,9 @@ import {
   TRY_BLOCK,
   UNINITIALIZED,
   REF_PROP,
-} from './constants';
+} from './constants.js';
 import { capture, suspend } from './try.js';
-import { define_property, is_tracked_object } from './utils';
+import { define_property, is_tracked_object } from './utils.js';
 
 const FLUSH_MICROTASK = 0;
 const FLUSH_SYNC = 1;

package/src/runtime/internal/client/try.js

@@ -1,6 +1,6 @@
-import { branch, create_try_block, destroy_block, is_destroyed, resume_block } from './blocks';
-import { TRY_BLOCK } from './constants';
-import { next_sibling } from './operations';
+import { branch, create_try_block, destroy_block, is_destroyed, resume_block } from './blocks.js';
+import { TRY_BLOCK } from './constants.js';
+import { next_sibling } from './operations.js';
 import {
   active_block,
   active_component,

package/tests/__snapshots__/basic.test.ripple.snap

@@ -1,5 +1,23 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`basic > basic operations 1`] = `
+<div>
+  <div>
+    0
+  </div>
+  <div>
+    2
+  </div>
+  <div>
+    5
+  </div>
+  <div>
+    2
+  </div>
+  
+</div>
+`;
+
 exports[`basic > handles boolean attributes with no prop value provides 1`] = `
 <div>
   <div

package/tests/__snapshots__/for.test.ripple.snap

@@ -1,5 +1,85 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`for statements > correctly handles intermediate statements in for block 1`] = `
+<div>
+  <div>
+    <div>
+      <div>
+        1
+      </div>
+      <div>
+        1
+      </div>
+    </div>
+    <div>
+      <div>
+        2
+      </div>
+      <div>
+        2
+      </div>
+    </div>
+    <div>
+      <div>
+        3
+      </div>
+      <div>
+        3
+      </div>
+    </div>
+    
+  </div>
+  <button>
+    Add Item
+  </button>
+  
+</div>
+`;
+
+exports[`for statements > correctly handles intermediate statements in for block 2`] = `
+<div>
+  <div>
+    <div>
+      <div>
+        1
+      </div>
+      <div>
+        1
+      </div>
+    </div>
+    <div>
+      <div>
+        2
+      </div>
+      <div>
+        2
+      </div>
+    </div>
+    <div>
+      <div>
+        3
+      </div>
+      <div>
+        3
+      </div>
+    </div>
+    <div>
+      <div>
+        4
+      </div>
+      <div>
+        4
+      </div>
+    </div>
+    
+  </div>
+  <button>
+    Add Item
+  </button>
+  
+</div>
+`;
+
 exports[`for statements > render a simple dynamic array 1`] = `
 <div>
   <!---->

package/tests/basic.test.ripple

@@ -1258,4 +1258,17 @@ describe('basic', () => {
 		render(App);
 		expect(container).toMatchSnapshot();
 	});
+
+	it('basic operations', () => {
+		component App() {
+			let count = track(0)
+			<div>{@count++}</div>
+			<div>{++@count}</div>
+			<div>{5}</div>
+			<div>{@count}</div>
+		}
+
+		render(App);
+		expect(container).toMatchSnapshot();
+	});
 });

package/tests/compiler.test.ripple

@@ -65,7 +65,7 @@ describe('compiler success tests', () => {
 	});
 
 
-  it('renders without crashing using < character', () => {
+  /*it('renders without crashing using < character', () => {
 		component App() {
 			function bar() {
         for (let i = 0; i < 10; i++) {
@@ -80,7 +80,7 @@ describe('compiler success tests', () => {
 		}
 
 		render(App);
-	});
+	});*/
 
 	it('render lexical blocks without crashing', () => {
 		component App() {
@@ -208,4 +208,36 @@ describe('compiler success tests', () => {
 
 		render(App);
 	});
+
+	it('renders without crashing using object destructuring', () => {
+		component App() {
+			const obj = { a: 1, b: 2, c: 3 };
+			const { a, b, ...rest } = obj;
+
+			<div>
+				{'a '}{a} {'b '} {b} {'rest '} {JSON.stringify(rest)}
+
+				<div>
+
+				</div>
+			</div>
+		}
+
+		render(App);
+	});
+
+	it('renders without crashing using object destructuring #2', () => {
+		component App() {
+			const obj = { a: 1, b: 2, c: 3 };
+			const { a, b, ...rest } = obj;
+
+			{'a '}{a} {'b '} {b} {'rest '} {JSON.stringify(rest)}
+
+			<div>
+
+			</div>
+		}
+
+		render(App);
+	});
 });

package/tests/composite.test.ripple

@@ -586,4 +586,65 @@ describe('composite components', () => {
 
 		render(App);
 	});
+
+	it('supports rendering compositie components using <@component> syntax', () => {
+		component App() {
+			component basic() {
+				<div>{'Basic Component'}</div>
+			}
+
+			const tracked_basic = track(() => basic);
+
+			<@tracked_basic />
+		}
+
+		render(App);
+		flushSync();
+
+		expect(container.textContent).toBe('Basic Component');
+	});
+
+	it('supports rendering compositie components using <object.@component> syntax', () => {
+		component App() {
+			component basic() {
+				<div>{'Basic Component'}</div>
+			}
+
+			const tracked_basic = track(() => basic);
+
+			const obj = {
+				tracked_basic,
+			}
+
+			<obj.@tracked_basic />
+		}
+
+		render(App);
+		flushSync();
+
+		expect(container.textContent).toBe('Basic Component');
+	});
+
+	it('supports rendering compositie components using <@object.@component> syntax', () => {
+		component App() {
+			component basic() {
+				<div>{'Basic Component'}</div>
+			}
+
+			const tracked_basic = track(() => basic);
+
+			const obj = {
+				tracked_basic,
+			}
+
+			const tracked_object = track(obj);
+
+			<@tracked_object.@tracked_basic />
+		}
+
+		render(App);
+		flushSync();
+
+		expect(container.textContent).toBe('Basic Component');
+	});
 });

package/tests/for.test.ripple

@@ -56,4 +56,33 @@ describe('for statements', () => {
 
 		expect(container).toMatchSnapshot();
 	});
+
+	it('correctly handles intermediate statements in for block', () => {
+		component App() {
+			const items = new TrackedArray(1, 2, 3);
+
+			<div>
+				for (const item of items) {
+					<div>
+						<div>{item}</div>
+						const some_text = item;
+						<div>{some_text}</div>
+					</div>
+				}
+			</div>
+
+			<button onClick={() => items.push(items.length + 1)}>{"Add Item"}</button>
+		}
+
+		render(App);
+
+		expect(container).toMatchSnapshot();
+		
+		const button = container.querySelector('button');
+
+		button.click();
+		flushSync();
+
+		expect(container).toMatchSnapshot();
+	})
 });