ripple 0.2.79 → 0.2.81

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.79",
+  "version": "0.2.81",
   "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;
@@ -713,6 +697,20 @@ const visitors = {
 							props.push(
 								b.prop('get', attr.name, b.function(null, [], b.block([b.return(property)]))),
 							);
+
+							if (attr.value.type === 'Identifier' && attr.value.tracked) {
+								props.push(
+									b.prop(
+										'set',
+										attr.name,
+										b.function(
+											null,
+											[b.id('__v')],
+											b.block([b.stmt(visit(b.assignment('=', attr.value, b.id('__v'))))]),
+										),
+									),
+								);
+							}
 						} else {
 							props.push(b.prop('init', attr.name, property));
 						}
@@ -727,50 +725,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');
 				}
@@ -802,20 +756,35 @@ const visitors = {
 				}
 			}
 
-			if (is_spreading) {
+			const metadata = { tracking: false, await: false };
+			// We visit, but only to gather metadata
+			b.call(visit(node.id, { ...state, metadata }));
+
+			if (metadata.tracking) {
 				state.init.push(
 					b.stmt(
 						b.call(
-							node.id,
+							'_$_.composite',
+							b.thunk(visit(node.id, state)),
 							id,
-							b.call('_$_.spread_props', b.thunk(b.object(props)), b.id('__block')),
-							b.id('_$_.active_block'),
+							is_spreading
+								? b.call('_$_.spread_props', b.thunk(b.object(props)), b.id('__block'))
+								: b.object(props),
 						),
 					),
 				);
 			} else {
 				state.init.push(
-					b.stmt(b.call(visit(node.id, state), id, b.object(props), b.id('_$_.active_block'))),
+					b.stmt(
+						b.call(
+							visit(node.id, state),
+							id,
+							is_spreading
+								? b.call('_$_.spread_props', b.thunk(b.object(props)), b.id('__block'))
+								: b.object(props),
+							b.id('_$_.active_block'),
+						),
+					),
 				);
 			}
 		}

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;
 }

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

@@ -0,0 +1,22 @@
+import { branch, destroy_block, render } from './blocks.js';
+import { COMPOSITE_BLOCK } from './constants.js';
+import { active_block } from './runtime.js';
+
+export function composite(get_component, node, props) {
+	var anchor = node;
+	var b = null;
+
+	render(() => {
+		var component = get_component();
+
+    if (b !== null) {
+      destroy_block(b);
+      b = null;
+    }
+
+		b = branch(() => {
+			var block = active_block;
+			component(anchor, props, block);
+		});
+	}, COMPOSITE_BLOCK);
+}

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

@@ -5,8 +5,8 @@ export var BRANCH_BLOCK = 1 << 4;
 export var FOR_BLOCK = 1 << 5;
 export var TRY_BLOCK = 1 << 6;
 export var IF_BLOCK = 1 << 7;
-export var ASYNC_BLOCK = 1 << 8;
-export var COMPAT_BLOCK = 1 << 9;
+export var COMPOSITE_BLOCK = 1 << 8;
+export var ASYNC_BLOCK = 1 << 9;
 export var CONTAINS_UPDATE = 1 << 10;
 export var CONTAINS_TEARDOWN = 1 << 11;
 export var BLOCK_HAS_RUN = 1 << 12;
@@ -16,7 +16,7 @@ export var DEFERRED = 1 << 15;
 export var PAUSED = 1 << 16;
 export var DESTROYED = 1 << 17;
 
-export var LOGIC_BLOCK = FOR_BLOCK | IF_BLOCK | TRY_BLOCK;
+export var CONTROL_FLOW_BLOCK = FOR_BLOCK | IF_BLOCK | TRY_BLOCK | COMPOSITE_BLOCK;
 
 export var UNINITIALIZED = Symbol();
 /** @type {unique symbol} */

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

@@ -43,6 +43,8 @@ export {
   maybe_tracked,
 } from './runtime.js';
 
+export { composite } from './composite.js';
+
 export { for_block as for } from './for.js';
 
 export { if_block as if } from './if.js';