ripple 0.2.49 → 0.2.51

package/README.md

@@ -1,10 +1,8 @@
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/trueadm/ripple/master/assets/ripple-dark.png">
-  <img src="https://raw.githubusercontent.com/trueadm/ripple/master/assets/ripple-light.png" alt="Ripple - the elegant UI framework for the web" />
+  <img src="https://raw.githubusercontent.com/trueadm/ripple/master/assets/ripple-light.png" alt="Ripple - the elegant TypeScript UI framework" />
 </picture>
 
 # What is Ripple?
 
-> Currently, this project is still in early development, and should not be used in production.
-
-Ripple is a TypeScript UI framework for the web. To find out more, view [Ripple's Github README](https://github.com/trueadm/ripple).
+Ripple is an elegant TypeScript UI framework. To find out more, view [Ripple's Github README](https://github.com/trueadm/ripple).

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "ripple",
-  "description": "Ripple is a TypeScript UI framework for the web",
+  "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.49",
+  "version": "0.2.51",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",

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

@@ -292,6 +292,14 @@ function RipplePlugin(config) {
         this.next();
         node.block = this.parseBlock();
         node.handler = null;
+
+		if (this.value === 'pending') {
+          this.next();
+          node.pending = this.parseBlock();
+        } else {
+          node.pending = null;
+        }
+
         if (this.type === tt._catch) {
           var clause = this.startNode();
           this.next();
@@ -310,14 +318,7 @@ function RipplePlugin(config) {
         }
         node.finalizer = this.eat(tt._finally) ? this.parseBlock() : null;
 
-        if (this.value === 'async') {
-          this.next();
-          node.async = this.parseBlock();
-        } else {
-          node.async = null;
-        }
-
-        if (!node.handler && !node.finalizer && !node.async) {
+        if (!node.handler && !node.finalizer && !node.pending) {
           this.raise(node.start, 'Missing catch or finally clause');
         }
         return this.finishNode(node, 'TryStatement');

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

@@ -8,7 +8,6 @@ import {
   is_inside_component,
   is_ripple_import,
   is_tracked_computed_property,
-  is_tracked_name,
   is_void_element,
 } from '../../utils.js';
 import { extract_paths } from '../../../utils/ast.js';
@@ -16,7 +15,7 @@ import is_reference from 'is-reference';
 import { prune_css } from './prune.js';
 import { error } from '../../errors.js';
 
-function mark_for_loop_has_template(path) {
+function mark_control_flow_has_template(path) {
   for (let i = path.length - 1; i >= 0; i -= 1) {
     const node = path[i];
 
@@ -31,10 +30,11 @@ function mark_for_loop_has_template(path) {
     if (
       node.type === 'ForStatement' ||
       node.type === 'ForInStatement' ||
-      node.type === 'ForOfStatement'
+      node.type === 'ForOfStatement' ||
+      node.type === 'TryStatement' ||
+      node.type === 'IfStatement'
     ) {
       node.metadata.has_template = true;
-      break;
     }
   }
 }
@@ -47,34 +47,6 @@ function visit_function(node, context) {
     tracked: false,
   };
 
-  if (node.params.length > 0) {
-    for (let i = 0; i < node.params.length; i += 1) {
-      const param = node.params[i];
-
-      if (param.type === 'ObjectPattern' || param.type === 'ArrayPattern') {
-        const paths = extract_paths(param);
-        const id = context.state.scope.generate('__arg');
-        const arg_id = b.id(id);
-
-        for (const path of paths) {
-          const name = path.node.name;
-
-          const expression = path.expression(arg_id);
-          const binding = context.state.scope.get(name);
-
-          if (binding !== null && is_tracked_name(name)) {
-            node.params[i] = b.id(id);
-            binding.kind = path.has_default_value ? 'prop_fallback' : 'prop';
-
-            binding.transform = {
-              read: (_, __, visit) => visit(expression),
-            };
-          }
-        }
-      }
-    }
-  }
-
   context.next({
     ...context.state,
     function_depth: context.state.function_depth + 1,
@@ -129,7 +101,7 @@ const visitors = {
 
     if (
       is_reference(node, /** @type {Node} */ (parent)) &&
-      (is_tracked_name(node) || node.tracked) &&
+      node.tracked &&
       binding?.node !== node
     ) {
       mark_as_tracked(context.path);
@@ -155,18 +127,7 @@ const visitors = {
     const parent = context.path.at(-1);
 
     if (context.state.metadata?.tracking === false && parent.type !== 'AssignmentExpression') {
-      if (
-        node.property.type === 'Identifier' &&
-        !node.computed &&
-        is_tracked_name(node.property.name)
-      ) {
-        context.state.metadata.tracking = true;
-      } else if (
-        node.computed &&
-        is_tracked_computed_property(node.object, node.property, context)
-      ) {
-        context.state.metadata.tracking = true;
-      }
+      context.state.metadata.tracking = true;
     }
 
     context.next();
@@ -184,32 +145,6 @@ const visitors = {
     context.next();
   },
 
-  ObjectExpression(node, context) {
-    for (const property of node.properties) {
-      if (
-        property.type === 'Property' &&
-        !property.computed &&
-        property.key.type === 'Identifier' &&
-        property.kind === 'init' &&
-        is_tracked_name(property.key.name)
-      ) {
-        mark_as_tracked(context.path);
-      }
-    }
-
-    context.next();
-  },
-
-  ArrayExpression(node, context) {
-    for (const element of node.elements) {
-      if (element !== null && element.type === 'Identifier' && is_tracked_name(element.name)) {
-        mark_as_tracked(context.path);
-      }
-    }
-
-    context.next();
-  },
-
   VariableDeclaration(node, context) {
     const { state, visit, path } = context;
 
@@ -234,42 +169,17 @@ const visitors = {
         const binding = state.scope.get(declarator.id.name);
 
         if (binding !== null && parent?.type !== 'ForOfStatement') {
-          if (is_tracked_name(declarator.id.name)) {
-            binding.kind = 'tracked';
-
-            mark_as_tracked(path);
-
-            visit(declarator, { ...state, metadata });
-
-            if (init_is_untracked && metadata.tracking) {
-              metadata.tracking = false;
-            }
-
-            binding.transform = {
-              read: (node) => {
-                return metadata.tracking && !metadata.await
-                  ? b.call('$.get_derived', node)
-                  : b.call('$.get_tracked', node);
-              },
-              assign: (node, value) => {
-                return b.call('$.set', node, value, b.id('__block'));
-              },
-              update: (node) => {
-                return b.call(
-                  node.prefix ? '$.update_pre' : '$.update',
-                  node.argument,
-                  b.id('__block'),
-                  node.operator === '--' && b.literal(-1),
-                );
-              },
-            };
-          } else if (binding.initial?.type !== 'Literal') {
+          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) {
+              if (
+                !ref.node.tracked &&
+                parent_node?.type === 'MemberExpression' &&
+                parent_node.computed
+              ) {
                 binding.transform = {
                   assign: (node, value, computed) => {
                     if (!computed) {
@@ -289,9 +199,7 @@ const visitors = {
         }
       } else {
         const paths = extract_paths(declarator.id);
-        const has_tracked = paths.some(
-          (path) => path.node.type === 'Identifier' && is_tracked_name(path.node.name),
-        );
+
         for (const path of paths) {
           if (path.node.tracked) {
             error(
@@ -302,68 +210,7 @@ const visitors = {
           }
         }
 
-        if (has_tracked) {
-          const tmp = state.scope.generate('tmp');
-          declarator.transformed = b.id(tmp);
-
-          if (declarator.init !== null) {
-            visit(declarator.init, { ...state, metadata });
-          }
-
-          if (init_is_untracked && metadata.tracking) {
-            metadata.tracking = false;
-          }
-
-          for (const path of paths) {
-            const binding = state.scope.get(path.node.name);
-
-            binding.transform = {
-              read: (node) => {
-                const value = path.expression?.(b.id(tmp));
-
-                if (metadata.tracking && metadata.await) {
-                  // TODO
-                  debugger;
-                } else if (metadata.tracking && !metadata.await) {
-                  if (is_tracked_name(path.node.name) && value.type === 'MemberExpression') {
-                    return b.call(
-                      '$.old_get_property',
-                      b.call('$.get_derived', value.object),
-                      value.property.type === 'Identifier'
-                        ? b.literal(value.property.name)
-                        : value.property,
-                    );
-                  }
-
-                  const key =
-                    value.property.type === 'Identifier'
-                      ? b.key(value.property.name)
-                      : value.property;
-
-                  return b.member(
-                    b.call('$.get_derived', value.object),
-                    key,
-                    key.type === 'Literal',
-                  );
-                }
-
-                if (is_tracked_name(path.node.name) && value.type === 'MemberExpression') {
-                  return b.call(
-                    '$.old_get_property',
-                    value.object,
-                    value.property.type === 'Identifier'
-                      ? b.literal(value.property.name)
-                      : value.property,
-                  );
-                }
-
-                return value;
-              },
-            };
-          }
-        } else {
-          visit(declarator, state);
-        }
+        visit(declarator, state);
       }
 
       declarator.metadata = metadata;
@@ -398,8 +245,8 @@ const visitors = {
 
             binding.transform = {
               read: (_) => {
-				return path.expression(b.id('__props'))
-			  },
+                return path.expression(b.id('__props'));
+              },
               assign: (node, value) => {
                 return b.assignment('=', path.expression(b.id('__props')), value);
               },
@@ -450,15 +297,91 @@ const visitors = {
       has_template: false,
     };
     context.next();
+
     if (!node.metadata.has_template) {
       error(
-        'For...of loops must contain a template in their body. Move the for loop into an effect if it does not render anything.',
+        'Component for...of loops must contain a template in their body. Move the for loop into an effect if it does not render anything.',
         context.state.analysis.module.filename,
         node,
       );
     }
   },
 
+  IfStatement(node, context) {
+    if (!is_inside_component(context)) {
+      return context.next();
+    }
+
+    node.metadata = {
+      has_template: false,
+    };
+
+    context.visit(node.consequent, context.state);
+
+    if (!node.metadata.has_template) {
+      error(
+        'Component if statements must contain a template in their "then" body. Move the if statement into an effect if it does not render anything.',
+        context.state.analysis.module.filename,
+        node,
+      );
+    }
+
+    if (node.alternate) {
+      node.metadata = {
+        has_template: false,
+      };
+      context.visit(node.alternate, context.state);
+
+      if (!node.metadata.has_template) {
+        error(
+          'Component if statements must contain a template in their "else" body. Move the if statement into an effect if it does not render anything.',
+          context.state.analysis.module.filename,
+          node,
+        );
+      }
+    }
+  },
+
+  TryStatement(node, context) {
+    if (!is_inside_component(context)) {
+      return context.next();
+    }
+
+    if (node.pending) {
+      node.metadata = {
+        has_template: false,
+      };
+
+      context.visit(node.block, context.state);
+
+      if (!node.metadata.has_template) {
+        error(
+          'Component try statements must contain a template in their main body. Move the try statement into an effect if it does not render anything.',
+          context.state.analysis.module.filename,
+          node,
+        );
+      }
+
+      node.metadata = {
+        has_template: false,
+      };
+
+      context.visit(node.pending, context.state);
+
+      if (!node.metadata.has_template) {
+        error(
+          'Component try statements must contain a template in their "pending" body. Rendering a pending fallback is required to have a template.',
+          context.state.analysis.module.filename,
+          node,
+        );
+      }
+    }
+
+    if (node.finalizer) {
+      context.visit(node.finalizer, context.state);
+    }
+  },
+
   ForInStatement(node, context) {
     if (is_inside_component(context)) {
       error(
@@ -486,7 +409,7 @@ const visitors = {
     const is_dom_element = is_element_dom_element(node, context);
     const attribute_names = new Set();
 
-    mark_for_loop_has_template(path);
+    mark_control_flow_has_template(path);
 
     if (is_dom_element) {
       const is_void = is_void_element(node.id.name);
@@ -547,11 +470,11 @@ const visitors = {
         } else if (attr.type === 'AccessorAttribute') {
           attribute_names.add(attr.name);
           visit(attr.get, state);
-		  if (attr.set) {
-		  	visit(attr.set, state);
-		  }
+          if (attr.set) {
+            visit(attr.set, state);
+          }
         } else if (attr.type === 'SpreadAttribute') {
-			visit(attr.argument, state);
+          visit(attr.argument, state);
         } else if (attr.type === 'RefAttribute') {
           visit(attr.argument, state);
         }
@@ -602,18 +525,6 @@ const visitors = {
           );
         }
       }
-
-      if (is_tracked_name(name)) {
-        attribute_names.forEach((n) => {
-          if (n.name.slice(1) === name) {
-            error(
-              `Cannot have both ${name} and ${name.slice(1)} on the same element`,
-              state.analysis.module.filename,
-              n,
-            );
-          }
-        });
-      }
     }
 
     return {
@@ -623,7 +534,7 @@ const visitors = {
   },
 
   Text(node, context) {
-    mark_for_loop_has_template(context.path);
+    mark_control_flow_has_template(context.path);
     context.next();
   },