ripple 0.2.106 → 0.2.108

package/package.json

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

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

@@ -147,7 +147,7 @@ function RipplePlugin(config) {
 
 				if (code === 35) {
 					// # character
-					// Look ahead to see if this is followed by [ for tuple syntax
+					// Look ahead to see if this is followed by [ for tuple syntax or 'server' keyword
 					if (this.pos + 1 < this.input.length) {
 						const nextChar = this.input.charCodeAt(this.pos + 1);
 						if (nextChar === 91 || nextChar === 123) {
@@ -162,9 +162,27 @@ function RipplePlugin(config) {
 								return this.finishToken(tt.bracketL, '#[');
 							}
 						}
+
+						// Check if this is #server
+						if (this.input.slice(this.pos, this.pos + 7) === '#server') {
+							// Check that next char after 'server' is whitespace or {
+							const charAfter =
+								this.pos + 7 < this.input.length ? this.input.charCodeAt(this.pos + 7) : -1;
+							if (
+								charAfter === 123 ||
+								charAfter === 32 ||
+								charAfter === 9 ||
+								charAfter === 10 ||
+								charAfter === 13 ||
+								charAfter === -1
+							) {
+								// { or whitespace or EOF
+								this.pos += 7; // consume '#server'
+								return this.finishToken(tt.name, '#server');
+							}
+						}
 					}
 				}
-
 				if (code === 64) {
 					// @ character
 					// Look ahead to see if this is followed by a valid identifier character or opening paren
@@ -398,6 +416,14 @@ function RipplePlugin(config) {
 				return super.checkLValSimple(expr, bindingType, checkClashes);
 			}
 
+			parseServerBlock() {
+				const node = this.startNode();
+				this.next();
+				node.body = this.parseBlock();
+				this.awaitPos = 0;
+				return this.finishNode(node, 'ServerBlock');
+			}
+
 			parseTrackedArrayExpression() {
 				const node = this.startNode();
 				this.next(); // consume the '#['
@@ -1250,6 +1276,10 @@ function RipplePlugin(config) {
 					return node;
 				}
 
+				if (this.value === '#server') {
+					return this.parseServerBlock();
+				}
+
 				if (this.value === 'component') {
 					const node = this.startNode();
 					node.type = 'Component';
@@ -1326,7 +1356,7 @@ function RipplePlugin(config) {
 						this.unexpected();
 					}
 					const node = this.parseElement();
-					
+
 					if (!node) {
 						this.unexpected();
 					}

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

@@ -3,6 +3,7 @@ import { walk } from 'zimmerframe';
 import { create_scopes, ScopeRoot } from '../../scope.js';
 import {
 	get_delegated_event,
+	get_parent_block_node,
 	is_element_dom_element,
 	is_inside_component,
 	is_ripple_track_call,
@@ -299,7 +300,10 @@ const visitors = {
 			// Validate that each cases ends in a break statement, except for the last case
 			const last = switch_case.consequent?.[switch_case.consequent.length - 1];
 
-			if (last.type !== 'BreakStatement' && node.cases.indexOf(switch_case) !== node.cases.length - 1) {
+			if (
+				last.type !== 'BreakStatement' &&
+				node.cases.indexOf(switch_case) !== node.cases.length - 1
+			) {
 				error(
 					'Template switch cases must end with a break statement (with the exception of the last case).',
 					context.state.analysis.module.filename,
@@ -634,6 +638,15 @@ const visitors = {
 				context.state.metadata.await = true;
 			}
 		}
+		const parent_block = get_parent_block_node(context);
+
+		if (parent_block !== null && parent_block.type !== 'Component') {
+			error(
+				'`await` expressions can only currently be used at the top-level of a component body. Support for using them in control flow statements will be added in the future.',
+				context.state.analysis.module.filename,
+				node,
+			);
+		}
 
 		context.next();
 	},

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

@@ -159,11 +159,12 @@ const visitors = {
 				}
 			} else {
 				const binding = context.state.scope.get(node.name);
-				const isRightSideOfAssignment = parent.type === 'AssignmentExpression' && parent.right === node;
+				const is_right_side_of_assignment =
+					parent.type === 'AssignmentExpression' && parent.right === node;
 				if (
 					(context.state.metadata?.tracking === false ||
 						(parent.type !== 'AssignmentExpression' && parent.type !== 'UpdateExpression') ||
-						isRightSideOfAssignment) &&
+						is_right_side_of_assignment) &&
 					(node.tracked ||
 						binding?.kind === 'prop' ||
 						binding?.kind === 'index' ||
@@ -469,9 +470,10 @@ const visitors = {
 
 		const handle_static_attr = (name, value) => {
 			const attr_value = b.literal(
-				` ${name}${is_boolean_attribute(name) && value === true
-					? ''
-					: `="${value === true ? '' : escape_html(value, true)}"`
+				` ${name}${
+					is_boolean_attribute(name) && value === true
+						? ''
+						: `="${value === true ? '' : escape_html(value, true)}"`
 				}`,
 			);
 
@@ -943,10 +945,10 @@ const visitors = {
 				operator === '='
 					? context.visit(right)
 					: b.binary(
-						operator === '+=' ? '+' : operator === '-=' ? '-' : operator === '*=' ? '*' : '/',
-							/** @type {Pattern} */(context.visit(left)),
-							/** @type {Expression} */(context.visit(right)),
-					),
+							operator === '+=' ? '+' : operator === '-=' ? '-' : operator === '*=' ? '*' : '/',
+							/** @type {Expression} */ (context.visit(left)),
+							/** @type {Expression} */ (context.visit(right)),
+						),
 				b.id('__block'),
 			);
 		}
@@ -962,12 +964,12 @@ const visitors = {
 				operator === '='
 					? context.visit(right)
 					: b.binary(
-						operator === '+=' ? '+' : operator === '-=' ? '-' : operator === '*=' ? '*' : '/',
-							/** @type {Pattern} */(
-							context.visit(left, { ...context.state, metadata: { tracking: false } })
+							operator === '+=' ? '+' : operator === '-=' ? '-' : operator === '*=' ? '*' : '/',
+							/** @type {Expression} */ (
+								context.visit(left, { ...context.state, metadata: { tracking: false } })
+							),
+							/** @type {Expression} */ (context.visit(right)),
 						),
-							/** @type {Expression} */(context.visit(right)),
-					),
 				b.id('__block'),
 			);
 		}
@@ -1090,7 +1092,9 @@ const visitors = {
 		for (const switch_case of node.cases) {
 			const consequent_scope =
 				context.state.scopes.get(switch_case.consequent) || context.state.scope;
-			const consequent_id = context.state.scope.generate('switch_case_' + (switch_case.test == null ? 'default' : i));
+			const consequent_id = context.state.scope.generate(
+				'switch_case_' + (switch_case.test == null ? 'default' : i),
+			);
 			const consequent = b.block(
 				transform_body(switch_case.consequent, {
 					...context,
@@ -1172,12 +1176,12 @@ const visitors = {
 								b.stmt(b.call(b.id('__render'), b.id(consequent_id))),
 								alternate_id
 									? b.stmt(
-										b.call(
-											b.id('__render'),
-											b.id(alternate_id),
-											node.alternate ? b.literal(false) : undefined,
-										),
-									)
+											b.call(
+												b.id('__render'),
+												b.id(alternate_id),
+												node.alternate ? b.literal(false) : undefined,
+											),
+										)
 									: undefined,
 							),
 						]),
@@ -1230,9 +1234,9 @@ const visitors = {
 					node.handler === null
 						? b.literal(null)
 						: b.arrow(
-							[b.id('__anchor'), ...(node.handler.param ? [node.handler.param] : [])],
-							b.block(transform_body(node.handler.body.body, context)),
-						),
+								[b.id('__anchor'), ...(node.handler.param ? [node.handler.param] : [])],
+								b.block(transform_body(node.handler.body.body, context)),
+							),
 					node.pending === null
 						? undefined
 						: b.arrow([b.id('__anchor')], b.block(transform_body(node.pending.body, context))),
@@ -1278,6 +1282,10 @@ const visitors = {
 		return b.block(statements);
 	},
 
+	ServerBlock() {
+		return b.empty;
+	},
+
 	Program(node, context) {
 		const statements = [];
 
@@ -1309,7 +1317,7 @@ function join_template(items) {
 				push(e);
 			}
 
-			const last = /** @type {TemplateElement} */ (expression.quasis.at(-1));
+			const last = /** @type {any} */ (expression.quasis.at(-1));
 			quasi.value.cooked += /** @type {string} */ (last.value.cooked);
 		} else if (expression.type === 'Literal') {
 			/** @type {string} */ (quasi.value.cooked) += expression.value;
@@ -1328,7 +1336,7 @@ function join_template(items) {
 	}
 
 	for (const quasi of template.quasis) {
-		quasi.value.raw = sanitize_template_string(/** @type {string} */(quasi.value.cooked));
+		quasi.value.raw = sanitize_template_string(/** @type {string} */ (quasi.value.cooked));
 	}
 
 	quasi.tail = true;
@@ -1458,6 +1466,23 @@ function transform_ts_child(node, context) {
 		}
 
 		state.init.push(b.if(visit(node.test), consequent, alternate));
+	} else if (node.type === 'SwitchStatement') {
+		const cases = [];
+
+		for (const switch_case of node.cases) {
+			const consequent_scope =
+				context.state.scopes.get(switch_case.consequent) || context.state.scope;
+			const consequent_body = transform_body(switch_case.consequent, {
+				...context,
+				state: { ...context.state, scope: consequent_scope },
+			});
+
+			cases.push(
+				b.switch_case(switch_case.test ? context.visit(switch_case.test) : null, consequent_body),
+			);
+		}
+
+		context.state.init.push(b.switch(context.visit(node.discriminant), cases));
 	} else if (node.type === 'ForOfStatement') {
 		const body_scope = context.state.scopes.get(node.body);
 		const block_body = transform_body(node.body.body, {
@@ -1510,6 +1535,8 @@ function transform_ts_child(node, context) {
 		const component = visit(node, state);
 
 		state.init.push(component);
+	} else if (node.type === 'BreakStatement') {
+		state.init.push(b.break);
 	} else {
 		debugger;
 		throw new Error('TODO');
@@ -1684,6 +1711,8 @@ function transform_children(children, context) {
 			} else if (node.type === 'SwitchStatement') {
 				node.is_controlled = is_controlled;
 				visit(node, { ...state, flush_node, namespace: state.namespace });
+			} else if (node.type === 'BreakStatement') {
+				// do nothing
 			} else {
 				debugger;
 			}
@@ -1766,7 +1795,7 @@ export function transform_client(filename, source, analysis, to_ts) {
 	};
 
 	const program = /** @type {Program} */ (
-		walk(analysis.ast, { ...state, namespace: 'html' }, visitors)
+		walk(/** @type {Node} */ (analysis.ast), { ...state, namespace: 'html' }, visitors)
 	);
 
 	for (const hoisted of state.hoisted) {

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

@@ -96,12 +96,7 @@ const visitors = {
 			context.state.stylesheets.push(node.css);
 			// Register CSS hash during rendering
 			body_statements.unshift(
-				b.stmt(
-					b.call(
-						b.member(b.id('__output'), b.id('register_css')),
-						b.literal(node.css.hash),
-					),
-				),
+				b.stmt(b.call(b.member(b.id('__output'), b.id('register_css')), b.literal(node.css.hash))),
 			);
 		}
 
@@ -195,10 +190,11 @@ const visitors = {
 			let class_attribute = null;
 
 			const handle_static_attr = (name, value) => {
-				const attr_str = ` ${name}${is_boolean_attribute(name) && value === true
-					? ''
-					: `="${value === true ? '' : escape_html(value, true)}"`
-					}`;
+				const attr_str = ` ${name}${
+					is_boolean_attribute(name) && value === true
+						? ''
+						: `="${value === true ? '' : escape_html(value, true)}"`
+				}`;
 
 				if (is_spreading) {
 					// For spread attributes, store just the actual value, not the full attribute string
@@ -387,12 +383,13 @@ const visitors = {
 				const conditional_await = b.conditional(
 					b.member(visit(node.id, state), b.id('async')),
 					b.await(component_call),
-					component_call
+					component_call,
 				);
 				state.init.push(b.stmt(conditional_await));
 			}
 		}
-	}, ForOfStatement(node, context) {
+	},
+	ForOfStatement(node, context) {
 		if (!is_inside_component(context)) {
 			context.next();
 			return;
@@ -483,22 +480,26 @@ const visitors = {
 
 			// For SSR with pending block: render the resolved content wrapped in async
 			// In a streaming SSR implementation, we'd render pending first, then stream resolved
-			const try_statements = node.handler !== null
-				? [
-					b.try(
-						b.block(body),
-						b.catch_clause(
-							node.handler.param || b.id('error'),
-							b.block(
-								transform_body(node.handler.body.body, {
-									...context,
-									state: { ...context.state, scope: context.state.scopes.get(node.handler.body) },
-								}),
+			const try_statements =
+				node.handler !== null
+					? [
+							b.try(
+								b.block(body),
+								b.catch_clause(
+									node.handler.param || b.id('error'),
+									b.block(
+										transform_body(node.handler.body.body, {
+											...context,
+											state: {
+												...context.state,
+												scope: context.state.scopes.get(node.handler.body),
+											},
+										}),
+									),
+								),
 							),
-						),
-					),
-				]
-				: body;
+						]
+					: body;
 
 			context.state.init.push(
 				b.stmt(b.await(b.call('_$_.async', b.thunk(b.block(try_statements), true)))),
@@ -514,10 +515,7 @@ const visitors = {
 				context.state.init.push(
 					b.try(
 						b.block(body),
-						b.catch_clause(
-							node.handler.param || b.id('error'),
-							b.block(handler_body),
-						),
+						b.catch_clause(node.handler.param || b.id('error'), b.block(handler_body)),
 					),
 				);
 			} else {
@@ -599,6 +597,10 @@ const visitors = {
 			state.init.push(b.stmt(b.call(b.member(b.id('__output'), b.id('push')), expression)));
 		}
 	},
+
+	ServerBlock(node, context) {
+		return context.visit(node.body);
+	},
 };
 
 export function transform_server(filename, source, analysis) {
@@ -637,9 +639,7 @@ export function transform_server(filename, source, analysis) {
 	for (const metadata of state.component_metadata) {
 		if (metadata.async) {
 			program.body.push(
-				b.stmt(
-					b.assignment('=', b.member(b.id(metadata.id), b.id('async')), b.true),
-				),
+				b.stmt(b.assignment('=', b.member(b.id(metadata.id), b.id('async')), b.true)),
 			);
 		}
 	}

package/src/compiler/types/index.d.ts

@@ -284,9 +284,9 @@ export interface TransformContext {
 	/** Compiler state */
 	state: CompilerState;
 	/** AST path */
-	path?: RippleNode[];
+	path: RippleNode[];
 	/** Visit function */
-	visit?: (node: any, state?: any) => any;
+	visit: (node: any, state?: any) => any;
 	/** Transform metadata */
 	metadata?: any;
 }

package/src/compiler/utils.js

@@ -808,7 +808,7 @@ export function normalize_children(children, context) {
  * @param {TransformContext} context
  */
 function normalize_child(node, normalized, context) {
-	if (node.type === 'EmptyStatement' || node.type === 'BreakStatement') {
+	if (node.type === 'EmptyStatement') {
 		return;
 	} else if (
 		node.type === 'Element' &&
@@ -823,6 +823,34 @@ function normalize_child(node, normalized, context) {
 	}
 }
 
+/**
+ * @param {TransformContext} context
+ */
+export function get_parent_block_node(context) {
+	const path = context.path;
+	
+	for (let i = path.length - 1; i >= 0; i -= 1) {
+		const context_node = path[i];
+		if (
+			context_node.type === 'IfStatement' ||
+			context_node.type === 'ForOfStatement' ||
+			context_node.type === 'SwitchStatement' ||
+			context_node.type === 'TryStatement' ||
+			context_node.type === 'Component'
+		) {
+			return context_node;
+		}
+		if (
+			context_node.type === 'FunctionExpression' ||
+			context_node.type === 'ArrowFunctionExpression' ||
+			context_node.type === 'FunctionDeclaration'
+		) {
+			return null;
+		}
+	}
+	return null;
+}
+
 /**
  * Builds a getter for a tracked identifier
  * @param {Identifier} node

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

@@ -323,13 +323,13 @@ export function is_destroyed(target_block) {
  * @param {Node} end
  */
 export function remove_block_dom(node, end) {
-  while (node !== null) {
-    /** @type {Node | null} */
-    var next = node === end ? null : next_sibling(node);
+	while (node !== null) {
+		/** @type {Node | null} */
+		var next = node === end ? null : next_sibling(node);
 
-    /** @type {Element | Text | Comment} */ (node).remove();
-    node = next;
-  }
+		/** @type {Element | Text | Comment} */ (node).remove();
+		node = next;
+	}
 }
 
 /**
@@ -344,7 +344,7 @@ export function destroy_block(block, remove_dom = true) {
 
 	if ((remove_dom && (f & (BRANCH_BLOCK | ROOT_BLOCK)) !== 0) || (f & HEAD_BLOCK) !== 0) {
 		var s = block.s;
-    remove_block_dom(s.start, s.end);
+		remove_block_dom(s.start, s.end);
 		removed = true;
 	}
 

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

@@ -18,10 +18,10 @@ export function composite(get_component, node, props) {
 	render(() => {
 		var component = get_component();
 
-    if (b !== null) {
-      destroy_block(b);
-      b = null;
-    }
+		if (b !== null) {
+			destroy_block(b);
+			b = null;
+		}
 
 		b = branch(() => {
 			var block = active_block;

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

@@ -6,55 +6,55 @@ import { active_component } from './runtime.js';
  * @template T
  */
 export class Context {
-  /**
-   * @param {T} initial_value
-   */
-  constructor(initial_value) {
-    /** @type {T} */
-    this._v = initial_value;
-  }
-
-  get() {
-    const component = active_component;
-    const context = this;
-
-    if (component === null) {
-      throw new Error('No active component found, cannot get context');
-    }
-    /** @type {Component | null} */
-    let current_component = component;
-
-    while (current_component !== null) {
-      const context_map = current_component.c;
-
-      if (context_map?.has(context)) {
-        return context_map.get(context);
-      }
-
-      current_component = current_component.p;
-    }
-
-    return context._v;
-  }
-
-  /**
-   * @template T
-   * @param {T} value
-   */
-  set(value) {
-    const component = active_component;
-    const context = this;
-
-    if (component === null) {
-      throw new Error('No active component found, cannot set context');
-    }
-
-    let current_context = component.c;
-
-    if (current_context === null) {
-      current_context = component.c = new Map();
-    }
-
-    current_context.set(context, value);
-  }
+	/**
+	 * @param {T} initial_value
+	 */
+	constructor(initial_value) {
+		/** @type {T} */
+		this._v = initial_value;
+	}
+
+	get() {
+		const component = active_component;
+		const context = this;
+
+		if (component === null) {
+			throw new Error('No active component found, cannot get context');
+		}
+		/** @type {Component | null} */
+		let current_component = component;
+
+		while (current_component !== null) {
+			const context_map = current_component.c;
+
+			if (context_map?.has(context)) {
+				return context_map.get(context);
+			}
+
+			current_component = current_component.p;
+		}
+
+		return context._v;
+	}
+
+	/**
+	 * @template T
+	 * @param {T} value
+	 */
+	set(value) {
+		const component = active_component;
+		const context = this;
+
+		if (component === null) {
+			throw new Error('No active component found, cannot set context');
+		}
+
+		let current_context = component.c;
+
+		if (current_context === null) {
+			current_context = component.c = new Map();
+		}
+
+		current_context.set(context, value);
+	}
 }

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

@@ -1,7 +1,7 @@
 import { DEV } from 'esm-env';
 
 export function remove_ssr_css() {
-	if (!document || typeof requestAnimationFrame !== "function") {
+	if (!document || typeof requestAnimationFrame !== 'function') {
 		return;
 	}
 
@@ -22,7 +22,7 @@ function remove_styles() {
 }
 
 function remove() {
-	document.querySelectorAll("style[data-ripple-ssr]").forEach((el) => el.remove());
+	document.querySelectorAll('style[data-ripple-ssr]').forEach((el) => el.remove());
 }
 
 /**

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

@@ -26,7 +26,7 @@ export function html(node, get_html, svg = false, mathml = false) {
 		else if (mathml) html = `<math>${html}</math>`;
 
 		if (block.s !== null && block.s.start !== null) {
-			remove_block_dom(block.s.start, /** @type {Node} */(block.s.end));
+			remove_block_dom(block.s.start, /** @type {Node} */ (block.s.end));
 			block.s.start = block.s.end = null;
 		}
 
@@ -35,14 +35,17 @@ export function html(node, get_html, svg = false, mathml = false) {
 		var node = create_fragment_from_html(html);
 
 		if (svg || mathml) {
-			node = /** @type {Element} */(first_child(node));
+			node = /** @type {Element} */ (first_child(node));
 		}
 
-		assign_nodes(/** @type {Element} */(first_child(node)), /** @type {Element} */(node.lastChild));
+		assign_nodes(
+			/** @type {Element} */ (first_child(node)),
+			/** @type {Element} */ (node.lastChild),
+		);
 
 		if (svg || mathml) {
 			while (first_child(node)) {
-				anchor.before(/** @type {Element} */(first_child(node)));
+				anchor.before(/** @type {Element} */ (first_child(node)));
 			}
 		} else {
 			anchor.before(node);