ripple 0.2.107 → 0.2.109

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.107",
+  "version": "0.2.109",
   "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

@@ -178,10 +178,9 @@ const visitors = {
 						add_ripple_internal_import(context);
 						return b.call('_$_.get', build_getter(node, context));
 					}
-
-					add_ripple_internal_import(context);
-					return build_getter(node, context);
 				}
+				add_ripple_internal_import(context);
+				return build_getter(node, context);
 			}
 		}
 	},
@@ -1282,6 +1281,10 @@ const visitors = {
 		return b.block(statements);
 	},
 
+	ServerBlock() {
+		return b.empty;
+	},
+
 	Program(node, context) {
 		const statements = [];
 

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

@@ -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

@@ -2,10 +2,12 @@
 
 import { branch, destroy_block, render } from './blocks.js';
 import { COMPOSITE_BLOCK } from './constants.js';
+import { apply_element_spread } from './render';
 import { active_block } from './runtime.js';
 
 /**
- * @param {() => (anchor: Node, props: Record<string, any>, block: Block | null) => void} get_component
+ * @typedef {((anchor: Node, props: Record<string, any>, block: Block | null) => void)} ComponentFunction
+ * @param {() => ComponentFunction | keyof HTMLElementTagNameMap} get_component
  * @param {Node} node
  * @param {Record<string, any>} props
  * @returns {void}
@@ -18,14 +20,44 @@ 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;
-			component(anchor, props, block);
-		});
+		if (typeof component === 'function') {
+			// Handle as regular component
+			b = branch(() => {
+				var block = active_block;
+				/** @type {ComponentFunction} */ (component)(anchor, props, block);
+			});
+		} else {
+			// Custom element
+			b = branch(() => {
+				var block = /** @type {Block} */ (active_block);
+
+				var element = document.createElement(
+					/** @type {keyof HTMLElementTagNameMap} */ (component),
+				);
+				/** @type {ChildNode} */ (anchor).before(element);
+
+				if (block.s === null) {
+					block.s = {
+						start: element,
+						end: element,
+					};
+				}
+
+				const spread_fn = apply_element_spread(element, () => props || {});
+				spread_fn();
+
+				if (typeof props?.children === 'function') {
+					var child_anchor = document.createComment('');
+					element.appendChild(child_anchor);
+
+					props?.children?.(child_anchor, {}, block);
+				}
+			});
+		}
 	}, COMPOSITE_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);

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

@@ -69,4 +69,4 @@ export { head } from './head.js';
 
 export { script } from './script.js';
 
-export { html } from './html.js';
+export { html } from './html.js';