ripple 0.2.121 → 0.2.125

package/package.json

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

package/src/compiler/index.js

@@ -24,7 +24,7 @@ export function parse(source) {
  */
 export function compile(source, filename, options = {}) {
   const ast = parse_module(source);
-  const analysis = analyze(ast, filename);
+  const analysis = analyze(ast, filename, options);
   const result = options.mode === 'server'
       ? transform_server(filename, source, analysis)
       : transform_client(filename, source, analysis, false);

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

@@ -1392,6 +1392,7 @@ function RipplePlugin(config) {
 					this.next();
 					this.enterScope(0);
 					node.id = this.parseIdent();
+					this.declareName(node.id.name, 'var', node.id.start);		
 					this.parseFunctionParams(node);
 					this.eat(tt.braceL);
 					node.body = [];

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

@@ -111,7 +111,8 @@ const visitors = {
 		if (
 			is_reference(node, /** @type {Node} */ (parent)) &&
 			binding &&
-			context.state.inside_server_block
+			context.state.inside_server_block &&
+			context.state.scope.server_block
 		) {
 			let current_scope = binding.scope;
 
@@ -349,13 +350,14 @@ const visitors = {
 			node.metadata = {
 				...node.metadata,
 				has_template: false,
+				has_await: false,
 			};
 
 			context.visit(switch_case, context.state);
 
-			if (!node.metadata.has_template) {
+			if (!node.metadata.has_template && !node.metadata.has_await) {
 				error(
-					'Component switch statements must contain a template in each of their cases. Move the switch statement into an effect if it does not render anything.',
+					'Component switch statements must contain a template or an await expression in each of their cases. Move the switch statement into an effect if it does not render anything.',
 					context.state.analysis.module.filename,
 					node,
 				);
@@ -416,15 +418,16 @@ const visitors = {
 		node.metadata = {
 			...node.metadata,
 			has_template: false,
+			has_await: false,
 		};
 		context.next();
 
-		if (!node.metadata.has_template) {
+		if (!node.metadata.has_template && !node.metadata.has_await) {
 			error(
-				'Component for...of loops must contain a template in their body. Move the for loop into an effect if it does not render anything.',
-				context.state.analysis.module.filename,
-				node,
-			);
+					'Component for...of loops must contain a template or an await expression in their body. Move the for loop into an effect if it does not render anything.',
+					context.state.analysis.module.filename,
+					node,
+				);
 		}
 	},
 
@@ -437,9 +440,14 @@ const visitors = {
 
 		if (declaration && declaration.type === 'FunctionDeclaration') {
 			server_block.metadata.exports.push(declaration.id.name);
+		} else if (declaration && declaration.type === 'Component') {
+			// Handle exported components in server blocks
+			if (server_block) {
+				server_block.metadata.exports.push(declaration.id.name);
+			}
 		} else {
 			// TODO
-			throw new Error('Not implemented');
+			throw new Error('Not implemented: Exported declaration type not supported in server blocks.');
 		}
 
 		return context.next();
@@ -462,35 +470,39 @@ const visitors = {
 		node.metadata = {
 			...node.metadata,
 			has_template: false,
+			has_await: false,
 		};
 
 		context.visit(node.consequent, context.state);
 
-		if (!node.metadata.has_template) {
+		if (!node.metadata.has_template && !node.metadata.has_await) {
 			error(
-				'Component if statements must contain a template in their "then" body. Move the if statement into an effect if it does not render anything.',
-				context.state.analysis.module.filename,
-				node,
-			);
+					'Component if statements must contain a template or an await expression in their "then" body. Move the if statement into an effect if it does not render anything.',
+					context.state.analysis.module.filename,
+					node,
+				);
 		}
 
 		if (node.alternate) {
-			node.metadata = {
-				...node.metadata,
-				has_template: false,
-			};
+			node.metadata.has_template = false;
+			node.metadata.has_await = false;
 			context.visit(node.alternate, context.state);
 
-			if (!node.metadata.has_template) {
+			if (!node.metadata.has_template && !node.metadata.has_await) {
 				error(
-					'Component if statements must contain a template in their "else" body. Move the if statement into an effect if it does not render anything.',
-					context.state.analysis.module.filename,
-					node,
-				);
+						'Component if statements must contain a template or an await expression in their "else" body. Move the if statement into an effect if it does not render anything.',
+						context.state.analysis.module.filename,
+						node,
+					);
 			}
 		}
 	},
-
+	/**
+	 * 
+	 * @param {any} node 
+	 * @param {any} context 
+	 * @returns 
+	 */
 	TryStatement(node, context) {
 		if (!is_inside_component(context)) {
 			return context.next();
@@ -582,6 +594,14 @@ const visitors = {
 				}
 				binding.metadata.is_dynamic_component = true;
 			}
+
+			if (!is_dom_element && state.elements) {
+				state.elements.push(node);
+				// Mark dynamic elements as scoped by default since we can't match CSS at compile time
+				if (state.component?.css) {
+						node.metadata.scoped = true;
+				}
+		}
 		}
 
 		if (is_dom_element) {
@@ -736,7 +756,12 @@ const visitors = {
 		mark_control_flow_has_template(context.path);
 		context.next();
 	},
-
+	
+ /**
+	* 
+	* @param {any} node 
+	* @param {any} context 
+	*/
 	AwaitExpression(node, context) {
 		if (is_inside_component(context)) {
 			if (context.state.metadata?.await === false) {
@@ -746,18 +771,27 @@ const visitors = {
 		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,
-			);
+			if (context.state.inside_server_block === false) {
+				error(
+					'`await` is not allowed in client-side control-flow statements',
+					context.state.analysis.module.filename,
+					node
+				);
+			}
 		}
 
+		if (parent_block) {
+			if (!parent_block.metadata) {
+				parent_block.metadata = {};
+			}
+			parent_block.metadata.has_await = true;
+		}
+		
 		context.next();
 	},
 };
 
-export function analyze(ast, filename) {
+export function analyze(ast, filename, options = {}) {
 	const scope_root = new ScopeRoot();
 
 	const { scope, scopes } = create_scopes(ast, scope_root, null);
@@ -777,7 +811,7 @@ export function analyze(ast, filename) {
 			scopes,
 			analysis,
 			inside_head: false,
-			inside_server_block: false,
+			inside_server_block: options.mode === 'server',
 		},
 		visitors,
 	);

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

@@ -840,6 +840,14 @@ const visitors = {
 						let property =
 							attr.value === null ? b.literal(true) : visit(attr.value, { ...state, metadata });
 
+						if (attr.name.name === 'class' && node.metadata.scoped && state.component.css) {
+							if (property.type === 'Literal') {
+								property = b.literal(`${state.component.css.hash} ${property.value}`);
+							} else {
+								property = b.array([property, b.literal(state.component.css.hash)]);
+							}
+						}
+
 						if (metadata.tracking || attr.name.tracked) {
 							if (attr.name.name === 'children') {
 								children_prop = b.thunk(property);
@@ -872,6 +880,17 @@ const visitors = {
 				}
 			}
 
+		if (node.metadata.scoped && state.component.css) {
+			const hasClassAttr = node.attributes.some(attr => 
+				attr.type === 'Attribute' && attr.name.type === 'Identifier' && attr.name.name === 'class'
+			);
+			if (!hasClassAttr) {
+				const name = is_spreading ? '#class' : 'class';
+				const value = state.component.css.hash;
+				props.push(b.prop('init', b.key(name), b.literal(value)));
+			}
+		}
+
 			const children_filtered = [];
 
 			for (const child of node.children) {

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

@@ -120,7 +120,18 @@ const visitors = {
 			component_fn = b.async(component_fn);
 		}
 
-		return component_fn;
+		const declaration = b.function_declaration(node.id, component_fn.params, component_fn.body, component_fn.async);
+
+		if (metadata.await) {
+			const parent = context.path.at(-1);
+			if (parent.type === 'Program' || parent.type === 'BlockStatement') {
+				const body = parent.body;
+				const index = body.indexOf(node);
+				body.splice(index + 1, 0, b.stmt(b.assignment('=', b.member(node.id, b.id('async')), b.true)));
+			}
+		}
+
+		return declaration;
 	},
 
 	CallExpression(node, context) {
@@ -270,11 +281,10 @@ const visitors = {
 			let class_attribute = null;
 
 			const handle_static_attr = (name, value) => {
-				const attr_str = ` ${name}${
-					is_boolean_attribute(name) && 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
@@ -549,15 +559,22 @@ const visitors = {
 		context.state.init.push(b.if(context.visit(node.test), consequent, alternate));
 	},
 
-	Identifier(node, context) {
-		const parent = /** @type {Node} */ (context.path.at(-1));
+	AssignmentExpression(node, context) {
+		const left = node.left;
 
-		if (is_reference(node, parent) && node.tracked) {
-			add_ripple_internal_import(context);
-			return b.call('_$_.get', build_getter(node, context));
+		if (left.type === 'Identifier' && left.tracked) {
+			return b.call(
+				'set',
+				context.visit(left, { ...context.state, metadata: { tracking: false } }),
+				context.visit(node.right)
+			);
 		}
+
+		return context.next();
 	},
 
+
+
 	ServerIdentifier(node, context) {
 		return b.id('_$_server_$_');
 	},
@@ -605,22 +622,22 @@ const visitors = {
 			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),
-											},
-										}),
-									),
+						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;
 
 			context.state.init.push(
@@ -647,6 +664,8 @@ const visitors = {
 	},
 
 	AwaitExpression(node, context) {
+		context.state.scope.server_block = true
+		context.inside_server_block = true
 		if (context.state.to_ts) {
 			return context.next();
 		}
@@ -672,10 +691,8 @@ const visitors = {
 		const parent = context.path.at(-1);
 
 		if (node.tracked || (node.property.type === 'Identifier' && node.property.tracked)) {
-			add_ripple_internal_import(context);
-
 			return b.call(
-				'_$_.get',
+				'get',
 				b.member(
 					context.visit(node.object),
 					node.computed ? context.visit(node.property) : node.property,
@@ -690,13 +707,15 @@ const visitors = {
 
 	Text(node, { visit, state }) {
 		const metadata = { await: false };
-		const expression = visit(node.expression, { ...state, metadata });
+		let expression = visit(node.expression, { ...state, metadata });
+
+		if (expression.type === 'Identifier' && expression.tracked) {
+			expression = b.call('get', expression);
+		}
 
 		if (expression.type === 'Literal') {
 			state.init.push(
-				b.stmt(
-					b.call(b.member(b.id('__output'), b.id('push')), b.literal(escape(expression.value))),
-				),
+				b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(escape(expression.value)))),
 			);
 		} else {
 			state.init.push(
@@ -791,13 +810,7 @@ export function transform_server(filename, source, analysis) {
 	}
 
 	// Add async property to component functions
-	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)),
-			);
-		}
-	}
+	
 
 	for (const import_node of state.imports) {
 		program.body.unshift(b.stmt(b.id(import_node)));

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

@@ -1,8 +1,7 @@
 /** @import { Block, Component } from '#client' */
 
-import { branch, destroy_block, render } from './blocks.js';
+import { branch, destroy_block, render, render_spread } from './blocks.js';
 import { COMPOSITE_BLOCK } from './constants.js';
-import { apply_element_spread } from './render';
 import { active_block } from './runtime.js';
 
 /**
@@ -48,8 +47,7 @@ export function composite(get_component, node, props) {
 					};
 				}
 
-				const spread_fn = apply_element_spread(element, () => props || {});
-				spread_fn();
+				render_spread(element, () => props || {});
 
 				if (typeof props?.children === 'function') {
 					var child_anchor = document.createComment('');

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

@@ -1,4 +1,4 @@
-import { effect } from './blocks';
+import { effect } from './blocks.js';
 /**
  * @param {Text | Comment} node
  * @param {string} content

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

@@ -1,4 +1,5 @@
 /** @import { Component, Derived } from '#server' */
+/** @import { render } from 'ripple/server'*/
 import { DERIVED, UNINITIALIZED } from '../client/constants.js';
 import { is_tracked_object } from '../client/utils.js';
 import { escape } from '../../../utils/escaping.js';
@@ -29,6 +30,8 @@ class Output {
 	body = '';
 	/** @type {Set<string>} */
 	css = new Set();
+	/** @type {Promise<any>[]} */
+	promises = [];
 	/** @type {Output | null} */
 	#parent = null;
 
@@ -56,24 +59,30 @@ class Output {
 	}
 }
 
-/**
- * @param {((output: Output, props: Record<string, any>) => void | Promise<void>) & { async?: boolean }} component
- * @returns {Promise<{head: string, body: string, css: Set<string>}>}
- */
+/** @type {render} */
 export async function render(component) {
 	const output = new Output(null);
+	let head, body, css;
 
-	if (component.async) {
-		await component(output, {});
-	} else {
-		component(output, {});
-	}
-
-	const { head, body, css } = output;
+	try {
+		if (component.async) {
+			await component(output, {});
+		} else {
+			component(output, {});
+		}
+		if (output.promises.length > 0) {
+			await Promise.all(output.promises);
+		}
 
-	return { head, body, css };
+		head = output.head
+		body = output.body
+		css = output.css
+	}
+	catch (error) {
+		console.log(error)
+	}
+	return { head, body, css }
 }
-
 /**
  * @returns {void}
  */

package/src/utils/builders.js

@@ -237,14 +237,14 @@ export function export_builder(declaration, specifiers = [], attributes = [], so
  * @param {ESTree.BlockStatement} body
  * @returns {ESTree.FunctionDeclaration}
  */
-export function function_declaration(id, params, body) {
+export function function_declaration(id, params, body, async = false) {
 	return {
 		type: 'FunctionDeclaration',
 		id,
 		params,
 		body,
 		generator: false,
-		async: false,
+		async,
 		metadata: /** @type {any} */ (null), // should not be used by codegen
 	};
 }

package/tests/client/__snapshots__/for.test.ripple.snap

@@ -238,86 +238,6 @@ exports[`for statements > handles updating with new objects with same key 2`] =
 </div>
 `;
 
-exports[`for statements > render a simple dynamic array 1`] = `
-<div>
-  <!---->
-  <div
-    class="Item 1"
-  >
-    Item 1
-  </div>
-  <div
-    class="Item 2"
-  >
-    Item 2
-  </div>
-  <div
-    class="Item 3"
-  >
-    Item 3
-  </div>
-  <!---->
-  <button>
-    Add Item
-  </button>
-  
-</div>
-`;
-
-exports[`for statements > render a simple dynamic array 2`] = `
-<div>
-  <!---->
-  <div
-    class="Item 1"
-  >
-    Item 1
-  </div>
-  <div
-    class="Item 2"
-  >
-    Item 2
-  </div>
-  <div
-    class="Item 3"
-  >
-    Item 3
-  </div>
-  <div
-    class="Item 4"
-  >
-    Item 4
-  </div>
-  <!---->
-  <button>
-    Add Item
-  </button>
-  
-</div>
-`;
-
-exports[`for statements > render a simple static array 1`] = `
-<div>
-  <!---->
-  <div
-    class="Item 1"
-  >
-    Item 1
-  </div>
-  <div
-    class="Item 2"
-  >
-    Item 2
-  </div>
-  <div
-    class="Item 3"
-  >
-    Item 3
-  </div>
-  <!---->
-  
-</div>
-`;
-
 exports[`for statements > renders a simple dynamic array 1`] = `
 <div>
   <!---->

package/tests/client/basic/__snapshots__/basic.rendering.test.ripple.snap

@@ -56,51 +56,3 @@ exports[`basic client > rendering & text > should handle lexical scopes correctl
   
 </div>
 `;
-
-exports[`basic client > text rendering > basic operations 1`] = `
-<div>
-  <div>
-    0
-  </div>
-  <div>
-    2
-  </div>
-  <div>
-    5
-  </div>
-  <div>
-    2
-  </div>
-  
-</div>
-`;
-
-exports[`basic client > text rendering > renders semi-dynamic text 1`] = `
-<div>
-  <div>
-    Hello World
-  </div>
-  
-</div>
-`;
-
-exports[`basic client > text rendering > renders simple JS expression logic correctly 1`] = `
-<div>
-  <div>
-    {"0":"Test"}
-  </div>
-  <div>
-    1
-  </div>
-  
-</div>
-`;
-
-exports[`basic client > text rendering > renders static text 1`] = `
-<div>
-  <div>
-    Hello World
-  </div>
-  
-</div>
-`;

package/tests/client/basic/basic.errors.test.ripple

@@ -123,4 +123,20 @@ describe('basic client > errors', () => {
 
 		expect(error).toBe('Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation');
 	});
+
+	it('should throw error for await in client-side control-flow statements', () => {
+		const code = `
+			export default component App() {
+				let data = 'initial';
+				if (true) {
+					await new Promise(r => setTimeout(r, 100));
+					data = 'loaded';
+				}
+				<div>{data}</div>
+			}
+		`;
+		expect(() => {
+			compile(code, 'test.ripple', { mode: 'client' });
+		}).toThrow('`await` is not allowed in client-side control-flow statements');
+	});
 });