ripple 0.2.108 → 0.2.110

package/package.json

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

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

@@ -165,18 +165,19 @@ function RipplePlugin(config) {
 
 						// Check if this is #server
 						if (this.input.slice(this.pos, this.pos + 7) === '#server') {
-							// Check that next char after 'server' is whitespace or {
+							// Check that next char after 'server' is whitespace, {, . (dot), or EOF
 							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
+								charAfter === 123 || // {
+								charAfter === 46 || // . (dot)
+								charAfter === 32 || // space
+								charAfter === 9 || // tab
+								charAfter === 10 || // newline
+								charAfter === 13 || // carriage return
+								charAfter === -1 // EOF
 							) {
-								// { or whitespace or EOF
+								// { or . or whitespace or EOF
 								this.pos += 7; // consume '#server'
 								return this.finishToken(tt.name, '#server');
 							}
@@ -379,6 +380,13 @@ function RipplePlugin(config) {
 					return this.parseTrackedExpression();
 				}
 
+				// Check if this is #server identifier for server function calls
+				if (this.type === tt.name && this.value === '#server') {
+					const node = this.startNode();
+					this.next();
+					return this.finishNode(node, 'ServerIdentifier');
+				}
+
 				// Check if this is a tuple literal starting with #[
 				if (this.type === tt.bracketL && this.value === '#[') {
 					return this.parseTrackedArrayExpression();
@@ -388,7 +396,6 @@ function RipplePlugin(config) {
 
 				return super.parseExprAtom(refDestructuringErrors, forNew, forInit);
 			}
-
 			/**
 			 * Parse `@(expression)` syntax for unboxing tracked values
 			 * Creates a TrackedExpression node with the argument property
@@ -419,7 +426,21 @@ function RipplePlugin(config) {
 			parseServerBlock() {
 				const node = this.startNode();
 				this.next();
-				node.body = this.parseBlock();
+
+				const body = this.startNode();
+				node.body = body;
+				body.body = [];
+
+				this.expect(tt.braceL);
+				this.enterScope(0);
+				while (this.type !== tt.braceR) {
+					var stmt = this.parseStatement(null, true);
+					body.body.push(stmt);
+				}
+				this.next();
+				this.exitScope();
+				this.finishNode(body, 'BlockStatement');
+
 				this.awaitPos = 0;
 				return this.finishNode(node, 'ServerBlock');
 			}

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

@@ -96,11 +96,46 @@ const visitors = {
 		return context.next({ ...context.state, function_depth: 0, expression: null });
 	},
 
+	ServerBlock(node, context) {
+		node.metadata = {
+			...node.metadata,
+			exports: [],
+		};
+		context.visit(node.body, { ...context.state, inside_server_block: true });
+	},
+
 	Identifier(node, context) {
 		const binding = context.state.scope.get(node.name);
 		const parent = context.path.at(-1);
 
-		if (binding?.kind === 'prop' || binding?.kind === 'prop_fallback') {
+		if (
+			is_reference(node, /** @type {Node} */ (parent)) &&
+			binding &&
+			context.state.inside_server_block
+		) {
+			let current_scope = binding.scope;
+
+			while (current_scope !== null) {
+				if (current_scope.server_block) {
+					break;
+				}
+				const parent_scope = current_scope.parent;
+				if (parent_scope === null) {
+					error(
+						`Cannot reference client-side variable "${node.name}" from a server block`,
+						context.state.analysis.module.filename,
+						node,
+					);
+				}
+				current_scope = parent_scope;
+			}
+		}
+
+		if (
+			binding?.kind === 'prop' ||
+			binding?.kind === 'prop_fallback' ||
+			binding?.kind === 'for_pattern'
+		) {
 			mark_as_tracked(context.path);
 			if (context.state.metadata?.tracking === false) {
 				context.state.metadata.tracking = true;
@@ -312,6 +347,7 @@ const visitors = {
 			}
 
 			node.metadata = {
+				...node.metadata,
 				has_template: false,
 			};
 
@@ -347,7 +383,38 @@ const visitors = {
 			}
 		}
 
+		if (node.key) {
+			const state = context.state;
+			const pattern = node.left.declarations[0].id;
+			const paths = extract_paths(pattern);
+			const scope = state.scopes.get(node);
+			const pattern_id = b.id(scope.generate('pattern'));
+
+			node.left.declarations[0].id = pattern_id;
+
+			for (const path of paths) {
+				const name = path.node.name;
+				const binding = context.state.scope.get(name);
+
+				binding.kind = 'for_pattern';
+				if (!binding.metadata) {
+					binding.metadata = {
+						pattern: pattern_id,
+					};
+				}
+
+				if (binding !== null) {
+					binding.transform = {
+						read: () => {
+							return path.expression(b.call('_$_.get', pattern_id));
+						},
+					};
+				}
+			}
+		}
+
 		node.metadata = {
+			...node.metadata,
 			has_template: false,
 		};
 		context.next();
@@ -361,6 +428,23 @@ const visitors = {
 		}
 	},
 
+	ExportNamedDeclaration(node, context) {
+		if (!context.state.inside_server_block) {
+			return context.next();
+		}
+		const server_block = context.path.find((n) => n.type === 'ServerBlock');
+		const declaration = node.declaration;
+
+		if (declaration && declaration.type === 'FunctionDeclaration') {
+			server_block.metadata.exports.push(declaration.id.name);
+		} else {
+			// TODO
+			throw new Error('Not implemented');
+		}
+
+		return context.next();
+	},
+
 	TSTypeReference(node, context) {
 		// bug in our acorn pasrer: it uses typeParameters instead of typeArguments
 		if (node.typeParameters) {
@@ -376,6 +460,7 @@ const visitors = {
 		}
 
 		node.metadata = {
+			...node.metadata,
 			has_template: false,
 		};
 
@@ -391,6 +476,7 @@ const visitors = {
 
 		if (node.alternate) {
 			node.metadata = {
+				...node.metadata,
 				has_template: false,
 			};
 			context.visit(node.alternate, context.state);
@@ -417,6 +503,7 @@ const visitors = {
 			}
 
 			node.metadata = {
+				...node.metadata,
 				has_template: false,
 			};
 
@@ -431,6 +518,7 @@ const visitors = {
 			}
 
 			node.metadata = {
+				...node.metadata,
 				has_template: false,
 			};
 
@@ -672,6 +760,7 @@ export function analyze(ast, filename) {
 			scopes,
 			analysis,
 			inside_head: false,
+			inside_server_block: false,
 		},
 		visitors,
 	);

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

@@ -1,4 +1,4 @@
-/** @import {Expression, FunctionExpression, Pattern, Node, Program} from 'estree' */
+/** @import {Expression, FunctionExpression, Node, Program} from 'estree' */
 
 import { walk } from 'zimmerframe';
 import path from 'node:path';
@@ -37,6 +37,7 @@ import is_reference from 'is-reference';
 import { object } from '../../../../utils/ast.js';
 import { render_stylesheets } from '../stylesheet.js';
 import { is_event_attribute, is_passive_event } from '../../../../utils/events.js';
+import { createHash } from 'node:crypto';
 
 function add_ripple_internal_import(context) {
 	if (!context.state.to_ts) {
@@ -54,6 +55,7 @@ function visit_function(node, context) {
 	const state = context.state;
 
 	delete node.returnType;
+	delete node.typeParameters;
 
 	for (const param of node.params) {
 		delete param.typeAnnotation;
@@ -168,7 +170,8 @@ const visitors = {
 					(node.tracked ||
 						binding?.kind === 'prop' ||
 						binding?.kind === 'index' ||
-						binding?.kind === 'prop_fallback') &&
+						binding?.kind === 'prop_fallback' ||
+						binding?.kind === 'for_pattern') &&
 					binding?.node !== node
 				) {
 					if (context.state.metadata?.tracking === false) {
@@ -178,14 +181,17 @@ 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);
 			}
 		}
 	},
 
+	ServerIdentifier(node, context) {
+		return b.id('_$_server_$_');
+	},
+
 	ImportDeclaration(node, context) {
 		if (!context.state.to_ts && node.importKind === 'type') {
 			return b.empty;
@@ -1200,6 +1206,14 @@ const visitors = {
 		return context.next();
 	},
 
+	TSInstantiationExpression(node, context) {
+		if (!context.state.to_ts) {
+			// In JavaScript, just return the expression wrapped in parentheses
+			return b.sequence([context.visit(node.expression)]);
+		}
+		return context.next();
+	},
+
 	ExportNamedDeclaration(node, context) {
 		if (!context.state.to_ts && node.exportKind === 'type') {
 			return b.empty;
@@ -1282,8 +1296,34 @@ const visitors = {
 		return b.block(statements);
 	},
 
-	ServerBlock() {
-		return b.empty;
+	ServerBlock(node, context) {
+		const exports = node.metadata.exports;
+
+		if (exports.length === 0) {
+			return b.empty;
+		}
+		const file_path = context.state.filename;
+
+		return b.const(
+			'_$_server_$_',
+			b.object(
+				exports.map((name) => {
+					const func_path = file_path + '#' + name;
+					// needs to be a sha256 hash of func_path, to avoid leaking file structure
+					const hash = createHash('sha256').update(func_path).digest('hex').slice(0, 8);
+
+					return b.prop(
+						'init',
+						b.id(name),
+						b.function(
+							null,
+							[b.rest(b.id('args'))],
+							b.block([b.return(b.call('_$_.rpc', b.literal(hash), b.id('args')))]),
+						),
+					);
+				}),
+			),
+		);
 	},
 
 	Program(node, context) {
@@ -1792,6 +1832,7 @@ export function transform_client(filename, source, analysis, to_ts) {
 		scopes: analysis.scopes,
 		stylesheets: [],
 		to_ts,
+		filename,
 	};
 
 	const program = /** @type {Program} */ (

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

@@ -17,6 +17,7 @@ import is_reference from 'is-reference';
 import { escape } from '../../../../utils/escaping.js';
 import { is_event_attribute } from '../../../../utils/events.js';
 import { render_stylesheets } from '../stylesheet.js';
+import { createHash } from 'node:crypto';
 
 function add_ripple_internal_import(context) {
 	if (!context.state.to_ts) {
@@ -31,6 +32,10 @@ function transform_children(children, context) {
 	const normalized = normalize_children(children, context);
 
 	for (const node of normalized) {
+		if (node.type === 'BreakStatement') {
+			state.init.push(b.break);
+			continue;
+		}
 		if (
 			node.type === 'VariableDeclaration' ||
 			node.type === 'ExpressionStatement' ||
@@ -132,6 +137,39 @@ const visitors = {
 		return context.next();
 	},
 
+	FunctionDeclaration(node, context) {
+		if (!context.state.to_ts) {
+			delete node.returnType;
+			delete node.typeParameters;
+			for (const param of node.params) {
+				delete param.typeAnnotation;
+			}
+		}
+		return context.next();
+	},
+
+	FunctionExpression(node, context) {
+		if (!context.state.to_ts) {
+			delete node.returnType;
+			delete node.typeParameters;
+			for (const param of node.params) {
+				delete param.typeAnnotation;
+			}
+		}
+		return context.next();
+	},
+
+	ArrowFunctionExpression(node, context) {
+		if (!context.state.to_ts) {
+			delete node.returnType;
+			delete node.typeParameters;
+			for (const param of node.params) {
+				delete param.typeAnnotation;
+			}
+		}
+		return context.next();
+	},
+
 	TSAsExpression(node, context) {
 		if (!context.state.to_ts) {
 			return context.visit(node.expression);
@@ -139,6 +177,14 @@ const visitors = {
 		return context.next();
 	},
 
+	TSInstantiationExpression(node, context) {
+		if (!context.state.to_ts) {
+			// In JavaScript, just return the expression wrapped in parentheses
+			return b.sequence([context.visit(node.expression)]);
+		}
+		return context.next();
+	},
+
 	TSTypeAliasDeclaration(_, context) {
 		if (!context.state.to_ts) {
 			return b.empty;
@@ -157,8 +203,23 @@ const visitors = {
 		if (!context.state.to_ts && node.exportKind === 'type') {
 			return b.empty;
 		}
-
-		return context.next();
+		if (!context.state.inside_server_block) {
+			return context.next();
+		}
+		const declaration = node.declaration;
+
+		if (declaration && declaration.type === 'FunctionDeclaration') {
+			return b.stmt(
+				b.assignment(
+					'=',
+					b.member(b.id('_$_server_$_'), b.id(declaration.id.name)),
+					context.visit(declaration),
+				),
+			);
+		} else {
+			// TODO
+			throw new Error('Not implemented');
+		}
 	},
 
 	VariableDeclaration(node, context) {
@@ -380,15 +441,43 @@ const visitors = {
 				}
 			} else {
 				// Component is imported or dynamic - check .async property at runtime
-				const conditional_await = b.conditional(
-					b.member(visit(node.id, state), b.id('async')),
-					b.await(component_call),
-					component_call,
+				// Use if-statement instead of ternary to avoid parser issues with await in conditionals
+				state.init.push(
+					b.if(
+						b.member(visit(node.id, state), b.id('async')),
+						b.block([b.stmt(b.await(component_call))]),
+						b.block([b.stmt(component_call)]),
+					),
 				);
-				state.init.push(b.stmt(conditional_await));
+
+				// Mark parent component as async since we're using await
+				if (state.metadata?.await === false) {
+					state.metadata.await = true;
+				}
 			}
 		}
 	},
+	SwitchStatement(node, context) {
+		if (!is_inside_component(context)) {
+			return context.next();
+		}
+		const cases = [];
+		for (const switch_case of node.cases) {
+			const consequent_scope =
+				context.state.scopes.get(switch_case.consequent) || context.state.scope;
+			const consequent = b.block(
+				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));
+	},
+
 	ForOfStatement(node, context) {
 		if (!is_inside_component(context)) {
 			context.next();
@@ -440,6 +529,10 @@ const visitors = {
 		}
 	},
 
+	ServerIdentifier(node, context) {
+		return b.id('_$_server_$_');
+	},
+
 	ImportDeclaration(node, context) {
 		if (!context.state.to_ts && node.importKind === 'type') {
 			return b.empty;
@@ -599,7 +692,38 @@ const visitors = {
 	},
 
 	ServerBlock(node, context) {
-		return context.visit(node.body);
+		const exports = node.metadata.exports;
+
+		if (exports.length === 0) {
+			return context.visit(node.body);
+		}
+		const file_path = context.state.filename;
+		const block = context.visit(node.body, { ...context.state, inside_server_block: true });
+		const rpc_modules = globalThis.rpc_modules;
+
+		if (rpc_modules) {
+			for (const name of exports) {
+				const func_path = file_path + '#' + name;
+				// needs to be a sha256 hash of func_path, to avoid leaking file structure
+				const hash = createHash('sha256').update(func_path).digest('hex').slice(0, 8);
+				rpc_modules.set(hash, [file_path, name]);
+			}
+		}
+
+		return b.export(
+			b.const(
+				'_$_server_$_',
+				b.call(
+					b.thunk(
+						b.block([
+							b.var('_$_server_$_', b.object([])),
+							...block.body,
+							b.return(b.id('_$_server_$_')),
+						]),
+					),
+				),
+			),
+		);
 	},
 };
 
@@ -614,6 +738,8 @@ export function transform_server(filename, source, analysis) {
 		scopes: analysis.scopes,
 		stylesheets: [],
 		component_metadata,
+		inside_server_block: false,
+		filename,
 	};
 
 	const program = /** @type {ESTree.Program} */ (

package/src/compiler/scope.js

@@ -169,6 +169,14 @@ export function create_scopes(ast, root, parent) {
 			next({ scope });
 		},
 
+		ServerBlock(node, { state, next }) {
+			const scope = state.scope.child();
+			scope.server_block = true;
+			scopes.set(node, scope);
+
+			next({ scope });
+		},
+
 		FunctionExpression(node, { state, next }) {
 			const scope = state.scope.child();
 			scopes.set(node, scope);
@@ -327,6 +335,12 @@ export class Scope {
 	 */
 	tracing = null;
 
+	/**
+	 * Is this scope a top-level server block scope
+	 * @type {boolean}
+	 */
+	server_block = false;
+
 	/**
 	 *
 	 * @param {ScopeRoot} root
@@ -353,7 +367,7 @@ export class Scope {
 				return this.parent.declare(node, kind, declaration_kind);
 			}
 
-			if (declaration_kind === 'import') {
+			if (declaration_kind === 'import' && !this.parent.server_block) {
 				return this.parent.declare(node, kind, declaration_kind, initial);
 			}
 		}

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

@@ -151,7 +151,7 @@ export type DeclarationKind =
 /**
  * Binding kinds
  */
-export type BindingKind = 'normal' | 'each' | 'rest_prop' | 'prop' | 'prop_fallback';
+export type BindingKind = 'normal' | 'for_pattern' | 'rest_prop' | 'prop' | 'prop_fallback';
 
 /**
  * A variable binding in a scope
@@ -299,4 +299,4 @@ export interface DelegatedEventResult {
 	hoisted: boolean;
 	/** The hoisted function */
 	function?: FunctionExpression | FunctionDeclaration | ArrowFunctionExpression;
-}
+}

package/src/compiler/utils.js

@@ -316,6 +316,8 @@ function get_hoisted_params(node, context) {
 		if (binding !== null && !scope.declarations.has(reference) && binding.initial !== node) {
 			if (binding.kind === 'prop') {
 				push_unique(b.id('__props'));
+			} else if (binding.kind === 'for_pattern') {
+				push_unique(binding.metadata.pattern);
 			} else if (binding.kind === 'prop_fallback') {
 				push_unique(b.id(binding.node.name));
 			} else if (

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}
@@ -23,9 +25,39 @@ export function composite(get_component, node, props) {
 			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);
 }