ripple 0.2.53 → 0.2.55

package/package.json

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

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

@@ -7,7 +7,6 @@ import {
   is_event_attribute,
   is_inside_component,
   is_ripple_import,
-  is_tracked_computed_property,
   is_void_element,
 } from '../../utils.js';
 import { extract_paths } from '../../../utils/ast.js';
@@ -166,37 +165,7 @@ const visitors = {
         (declarator.init.callee.name === 'untrack' || declarator.init.callee.name === 'deferred');
 
       if (declarator.id.type === 'Identifier') {
-        const binding = state.scope.get(declarator.id.name);
-
-        if (binding !== null && parent?.type !== 'ForOfStatement') {
-          if (binding.initial?.type !== 'Literal') {
-            for (const ref of binding.references) {
-              const path = ref.path;
-              const parent_node = path?.at(-1);
-
-              // We're reading a computed property, which might mean it's a reactive property
-              if (
-                !ref.node.tracked &&
-                parent_node?.type === 'MemberExpression' &&
-                parent_node.computed
-              ) {
-                binding.transform = {
-                  assign: (node, value, computed) => {
-                    if (!computed) {
-                      return node;
-                    }
-                    return b.call('$.old_set_property', node, computed, value, b.id('__block'));
-                  },
-                };
-                break;
-              }
-            }
-          }
-
-          visit(declarator, state);
-        } else {
-          visit(declarator, state);
-        }
+  		visit(declarator, state);
       } else {
         const paths = extract_paths(declarator.id);
 

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

@@ -18,7 +18,6 @@ import {
   is_ripple_import,
   is_declared_function_within_component,
   is_inside_call_expression,
-  is_tracked_computed_property,
   is_value_static,
   is_void_element,
   is_component_level_function,
@@ -141,10 +140,6 @@ const visitors = {
           }
         }
 
-        if (node.name === 'structuredClone' && binding === null) {
-          return b.id('$.structured_clone');
-        }
-
         return build_getter(node, context);
       }
     }
@@ -225,11 +220,14 @@ const visitors = {
     return b.call(
       '$.with_scope',
       b.id('__block'),
-      b.thunk({
-        ...node,
-        callee: context.visit(callee),
-        arguments: node.arguments.map((arg) => context.visit(arg)),
-      }, context.state.metadata?.await ?? false),
+      b.thunk(
+        {
+          ...node,
+          callee: context.visit(callee),
+          arguments: node.arguments.map((arg) => context.visit(arg)),
+        },
+        context.state.metadata?.await ?? false,
+      ),
     );
   },
 
@@ -303,20 +301,6 @@ const visitors = {
       const object = node.object;
       const property = node.property;
 
-      // TODO should we enforce that the identifier is tracked too?
-      if (node.computed && is_tracked_computed_property(node.object, node.property, context)) {
-        if (context.state.metadata?.tracking === false) {
-          context.state.metadata.tracking = true;
-        }
-
-        return b.call(
-          '$.old_get_property',
-          context.visit(object),
-          context.visit(property),
-          node.optional ? b.true : undefined,
-        );
-      }
-
       if (object.type === 'Identifier' && object.name === 'Object') {
         const binding = context.state.scope.get(object.name);
 
@@ -359,16 +343,6 @@ const visitors = {
     }
   },
 
-  SpreadElement(node, context) {
-    const parent = context.path.at(-1);
-
-    if (parent.type === 'ObjectExpression') {
-      return b.spread(b.call('$.spread_object', context.visit(node.argument)));
-    }
-
-    context.next();
-  },
-
   VariableDeclaration(node, context) {
     const declarations = [];
 
@@ -635,7 +609,7 @@ const visitors = {
             }
           }
         } else if (attr.type === 'SpreadAttribute') {
-          spread_attributes.push(b.spread(b.call('$.spread_object', visit(attr.argument, state))));
+          spread_attributes.push(b.spread(visit(attr.argument, state)));
         } else if (attr.type === 'RefAttribute') {
           const id = state.flush_node();
           state.init.push(b.stmt(b.call('$.ref', id, b.thunk(visit(attr.argument, state)))));
@@ -735,10 +709,7 @@ const visitors = {
         } else if (attr.type === 'SpreadAttribute') {
           props.push(
             b.spread(
-              b.call(
-                '$.spread_object',
-                visit(attr.argument, { ...state, metadata: { ...state.metadata, spread: true } }),
-              ),
+              visit(attr.argument, { ...state, metadata: { ...state.metadata, spread: true } }),
             ),
           );
         } else if (attr.type === 'RefAttribute') {
@@ -823,7 +794,7 @@ const visitors = {
             b.call(
               node.id,
               id,
-              b.call('$.tracked_spread_object', b.thunk(b.object(props)), b.id('__block')),
+              b.call('$.spread_props', b.thunk(b.object(props)), b.id('__block')),
               b.id('$.active_block'),
             ),
           ),
@@ -952,23 +923,6 @@ const visitors = {
       );
     }
 
-    if (left.type === 'MemberExpression') {
-      // need to capture setting length of array to throw a runtime error
-      if (left.property.type === 'Identifier' && left.property.name === 'length') {
-        if (left.property.name !== '$length') {
-          return b.call(
-            '$.old_set_property',
-            context.visit(left.object),
-            left.computed ? context.visit(left.property) : b.literal(left.property.name),
-            visit_assignment_expression(node, context, build_assignment) ?? context.next(),
-            b.id('__block'),
-          );
-        }
-      } else if (!is_tracked_computed_property(left.object, left.property, context)) {
-        return context.next();
-      }
-    }
-
     if (left.type === 'Identifier' && left.tracked) {
       add_ripple_internal_import(context);
       const operator = node.operator;
@@ -990,18 +944,7 @@ const visitors = {
       );
     }
 
-    const visited = visit_assignment_expression(node, context, build_assignment) ?? context.next();
-
-    if (
-      left.type === 'MemberExpression' &&
-      left.property.type === 'Identifier' &&
-      left.property.name === '$length' &&
-      !left.computed
-    ) {
-      return b.call('$.with_scope', b.id('__block'), b.thunk(visited));
-    }
-
-    return visited;
+    return visit_assignment_expression(node, context, build_assignment) ?? context.next();
   },
 
   UpdateExpression(node, context) {
@@ -1028,20 +971,6 @@ const visitors = {
       );
     }
 
-    if (
-      argument.type === 'MemberExpression' &&
-      argument.computed &&
-      is_tracked_computed_property(argument.object, argument.property, context)
-    ) {
-      return b.call(
-        node.prefix ? '$.old_update_pre_property' : '$.old_update_property',
-        context.visit(argument.object),
-        argument.computed ? context.visit(argument.property) : b.literal(argument.property.name),
-        b.id('__block'),
-        node.operator === '--' ? b.literal(-1) : undefined,
-      );
-    }
-
     if (argument.type === 'Identifier' && argument.tracked) {
       return b.call(
         node.prefix ? '$.update_pre' : '$.update',
@@ -1543,7 +1472,7 @@ function transform_children(children, context) {
     if (
       node.type === 'VariableDeclaration' ||
       node.type === 'ExpressionStatement' ||
-	  node.type === 'ThrowStatement' ||
+      node.type === 'ThrowStatement' ||
       node.type === 'FunctionDeclaration' ||
       node.type === 'DebuggerStatement' ||
       node.type === 'ClassDeclaration'

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

@@ -62,6 +62,10 @@ function escape_comment_close(node, code) {
 	}
 }
 
+function append_hash(state, index) {
+	state.code.prependRight(index, `${state.hash}-`);
+}
+
 /**
  *  @param {AST.CSS.Rule} rule
  * @param {boolean} is_in_global_block
@@ -106,7 +110,9 @@ const visitors = {
 			if (node.prelude.startsWith('-global-')) {
 				state.code.remove(start, start + 8);
 			} else if (!is_in_global_block(path)) {
-				state.code.prependRight(start, `${state.hash}-`);
+				append_hash(state, start);
+				state.keyframes[node.prelude]?.indexes.forEach((index) => append_hash(state, index));
+				state.keyframes[node.prelude] = { indexes: [], local: true };
 			}
 
 			return; // don't transform anything within
@@ -124,8 +130,14 @@ const visitors = {
 				const character = state.code.original[index];
 
 				if (regex_css_name_boundary.test(character)) {
-					if (state.keyframes.includes(name)) {
-						state.code.prependRight(index - name.length, `${state.hash}-`);
+					if (character !== ' ') {
+						const append_index = index - name.length;
+						state.keyframes[name] ??= { indexes: [], local: undefined };
+						if (state.keyframes[name].local) {
+							append_hash(state, append_index);
+						} else {
+							state.keyframes[name].indexes.push(append_index);
+						}
 					}
 
 					if (character === ';' || character === '}') {
@@ -360,6 +372,7 @@ export function render_stylesheets(stylesheets) {
 			code,
 			hash: stylesheet.hash,
 			selector: `.${stylesheet.hash}`,
+			keyframes: {},
 			specificity: {
 				bumped: false,
 			},

package/src/compiler/utils.js

@@ -454,26 +454,6 @@ export function is_value_static(node) {
   return false;
 }
 
-export function is_tracked_computed_property(object, property, context) {
-  if (object.tracked) {
-    return false;
-  }
-  const binding = context.state.scope.get(object.name);
-
-  if (binding) {
-    const initial = binding.initial;
-    if (initial && is_value_static(initial)) {
-      return false;
-    }
-  }
-  if (property.type === 'Identifier') {
-    return true;
-  }
-
-  // TODO: do we need to handle more logic here? default to false for now
-  return true;
-}
-
 export function is_ripple_import(callee, context) {
   if (callee.type === 'Identifier') {
     const binding = context.state.scope.get(callee.name);