ripple 0.2.80 → 0.2.82

package/package.json

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

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

@@ -354,40 +354,6 @@ function RipplePlugin(config) {
 
       jsx_parseAttribute() {
         let node = this.startNode();
-        const lookahead = this.lookahead();
-
-        if (lookahead.type?.label === ':') {
-          let id = this.startNode();
-          id.name = this.value;
-          node.name = id;
-          this.next();
-          this.finishNode(id, 'Identifier');
-
-          if (this.lookahead().value !== '=') {
-            this.unexpected();
-          }
-          this.next();
-          if (this.lookahead().type !== tt.braceL) {
-            this.unexpected();
-          }
-          this.next();
-          const value = this.jsx_parseAttributeValue();
-          const expression = value.expression;
-          node.get = null;
-          node.set = null;
-
-          if (expression.type == 'SequenceExpression') {
-            node.get = expression.expressions[0];
-            node.set = expression.expressions[1];
-            if (expression.expressions.length > 2) {
-              this.unexpected();
-            }
-          } else {
-            node.get = expression;
-          }
-
-          return this.finishNode(node, 'AccessorAttribute');
-        }
 
         if (this.eat(tt.braceL)) {
           if (this.value === 'ref') {

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

@@ -435,12 +435,6 @@ const visitors = {
               visit(attr.value, state);
             }
           }
-        } else if (attr.type === 'AccessorAttribute') {
-          error(
-            'Accessor props are not supported on DOM elements',
-            state.analysis.module.filename,
-            attr,
-          );
         }
       }
 
@@ -458,12 +452,6 @@ const visitors = {
             attribute_names.add(attr.name);
           }
           visit(attr.value, state);
-        } else if (attr.type === 'AccessorAttribute') {
-          attribute_names.add(attr.name);
-          visit(attr.get, state);
-          if (attr.set) {
-            visit(attr.set, state);
-          }
         } else if (attr.type === 'SpreadAttribute') {
           visit(attr.argument, state);
         } else if (attr.type === 'RefAttribute') {

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

@@ -29,6 +29,7 @@ import {
 	is_ripple_track_call,
 	normalize_children,
 	build_getter,
+	determine_namespace_for_children,
 } from '../../../utils.js';
 import is_reference from 'is-reference';
 import { object } from '../../../../utils/ast.js';
@@ -94,22 +95,6 @@ function visit_function(node, context) {
 	context.next(state);
 }
 
-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);
@@ -430,7 +415,6 @@ const visitors = {
 		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;
-
 		const child_namespace = is_dom_element
 			? determine_namespace_for_children(node.id.name, state.namespace)
 			: state.namespace;
@@ -727,50 +711,6 @@ const visitors = {
 					);
 				} else if (attr.type === 'RefAttribute') {
 					props.push(b.prop('init', b.call('_$_.ref_prop'), visit(attr.argument, state), true));
-				} else if (attr.type === 'AccessorAttribute') {
-					let get_expr;
-
-					if (
-						attr.get.type === 'FunctionExpression' ||
-						attr.get.type === 'ArrowFunctionExpression'
-					) {
-						get_expr = context.state.scope.generate(attr.name.name + '_get');
-
-						state.init.push(b.const(get_expr, visit(attr.get, state)));
-					} else {
-						get_expr = visit(attr.get, state);
-					}
-
-					props.push(
-						b.prop('get', attr.name, b.function(null, [], b.block([b.return(b.call(get_expr))]))),
-					);
-
-					if (attr.set) {
-						let set_expr;
-
-						if (
-							attr.set.type === 'FunctionExpression' ||
-							attr.set.type === 'ArrowFunctionExpression'
-						) {
-							set_expr = context.state.scope.generate(attr.name.name + '_set');
-
-							state.init.push(b.const(set_expr, visit(attr.set, state)));
-						} else {
-							set_expr = visit(attr.set, state);
-						}
-
-						props.push(
-							b.prop(
-								'set',
-								attr.name,
-								b.function(
-									null,
-									[b.id('__value')],
-									b.block([b.return(b.call(set_expr, b.id('__value')))]),
-								),
-							),
-						);
-					}
 				} else {
 					throw new Error('TODO');
 				}

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

@@ -5,6 +5,7 @@ import path from 'node:path';
 import { print } from 'esrap';
 import {
 	build_getter,
+	determine_namespace_for_children,
 	escape_html,
 	is_boolean_attribute,
 	is_element_dom_element,
@@ -111,6 +112,9 @@ const visitors = {
 		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;
+		const child_namespace = is_dom_element
+			? determine_namespace_for_children(node.id.name, state.namespace)
+			: state.namespace;
 
 		if (is_dom_element) {
 			const is_void = is_void_element(node.id.name);
@@ -244,6 +248,7 @@ const visitors = {
 			}
 		} else {
 			const props = [];
+			let children_prop = null;
 
 			for (const attr of node.attributes) {
 				if (attr.type === 'Attribute') {
@@ -251,6 +256,11 @@ const visitors = {
 						const metadata = { tracking: false, await: false };
 						let property = visit(attr.value, { ...state, metadata });
 
+						if (attr.name.name === 'children') {
+							children_prop = b.thunk(property);
+							continue;
+						}
+
 						props.push(b.prop('init', attr.name, property));
 					} else if (attr.type === 'SpreadAttribute') {
 						props.push(
@@ -262,7 +272,33 @@ const visitors = {
 				}
 			}
 
-			state.init.push(b.stmt(b.call(node.id.name, b.id('__output'), b.object(props))));
+			const children_filtered = [];
+
+			for (const child of node.children) {
+				if (child.type === 'Component') {
+					const id = child.id;
+					props.push(b.prop('init', id, visit(child, { ...state, namespace: child_namespace })));
+				} else {
+					children_filtered.push(child);
+				}
+			}
+
+			if (children_filtered.length > 0) {
+				const component_scope = context.state.scopes.get(node);
+				const children = visit(b.component(b.id('children'), [], children_filtered), {
+					...context.state,
+					scope: component_scope,
+					namespace: child_namespace,
+				});
+
+				if (children_prop) {
+					children_prop.body = b.logical('??', children_prop.body, children);
+				} else {
+					props.push(b.prop('init', b.id('children'), children));
+				}
+			}
+
+			state.init.push(b.stmt(b.call(visit(node.id, state), b.id('__output'), b.object(props))));
 		}
 	},
 

package/src/compiler/utils.js

@@ -706,4 +706,20 @@ export function build_getter(node, context) {
   }
 
   return node;
+}
+
+export 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;
 }