ripple 0.2.43 → 0.2.44

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is a TypeScript UI framework for the web",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.43",
+  "version": "0.2.44",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",

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

@@ -139,15 +139,14 @@ function RipplePlugin(config) {
 				}
 
 				if (this.eat(tt.braceL)) {
-					if (this.type.label === '@') {
+					if (this.value === 'ref') {
 						this.next();
-						if (this.value !== 'use') {
-							this.unexpected();
+						if (this.type === tt.braceR) {
+							this.raise(this.start, '"ref" is a Ripple keyword and must be used in the form {ref fn}');
 						}
-						this.next();
 						node.argument = this.parseMaybeAssign();
 						this.expect(tt.braceR);
-						return this.finishNode(node, 'UseAttribute');
+						return this.finishNode(node, 'RefAttribute');
 					} else if (this.type === tt.ellipsis) {
 						this.expect(tt.ellipsis);
 						node.argument = this.parseMaybeAssign();

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

@@ -665,9 +665,9 @@ const visitors = {
 					}
 				} else if (attr.type === 'SpreadAttribute') {
 					spread_attributes.push(b.spread(b.call('$.spread_object', visit(attr.argument, state))));
-				} else if (attr.type === 'UseAttribute') {
+				} else if (attr.type === 'RefAttribute') {
 					const id = state.flush_node();
-					state.init.push(b.stmt(b.call('$.use', id, b.thunk(visit(attr.argument, state)))));
+					state.init.push(b.stmt(b.call('$.ref', id, b.thunk(visit(attr.argument, state)))));
 				}
 			}
 
@@ -770,8 +770,8 @@ const visitors = {
 							),
 						),
 					);
-				} else if (attr.type === 'UseAttribute') {
-					props.push(b.prop('init', b.call('$.use_prop'), visit(attr.argument, state), true));
+				} else if (attr.type === 'RefAttribute') {
+					props.push(b.prop('init', b.call('$.ref_prop'), visit(attr.argument, state), true));
 				} else if (attr.type === 'AccessorAttribute') {
 					// # means it's an accessor to the runtime
 					tracked.push(b.literal('#' + attr.name.name));
@@ -1299,6 +1299,10 @@ const visitors = {
 	},
 
 	TemplateLiteral(node, context) {
+		if (node.expressions.length === 0) {
+			return b.literal(node.quasis[0].value.cooked);
+		}
+
 		const expressions = node.expressions.map(expr => context.visit(expr));
 		return b.template(node.quasis, expressions);
 	},
@@ -1409,12 +1413,12 @@ function transform_ts_child(node, context) {
 		const children = [];
 		let has_children_props = false;
 
-		// Filter out UseAttributes and handle them separately
-		const use_attributes = [];
+		// Filter out RefAttributes and handle them separately
+		const ref_attributes = [];
 		const attributes = node.attributes
 			.filter((attr) => {
-				if (attr.type === 'UseAttribute') {
-					use_attributes.push(attr);
+				if (attr.type === 'RefAttribute') {
+					ref_attributes.push(attr);
 					return false;
 				}
 				return true;
@@ -1438,10 +1442,10 @@ function transform_ts_child(node, context) {
 				}
 			});
 
-		// Add UseAttribute references separately for sourcemap purposes
-		for (const use_attr of use_attributes) {
+		// Add RefAttribute references separately for sourcemap purposes
+		for (const ref_attr of ref_attributes) {
 			const metadata = { await: false };
-			const argument = visit(use_attr.argument, { ...state, metadata });
+			const argument = visit(ref_attr.argument, { ...state, metadata });
 			state.init.push(b.stmt(argument));
 		}
 

package/src/compiler/phases/3-transform/segments.js

@@ -61,8 +61,8 @@ export function convert_source_map_to_mappings(source_map, source, generated_cod
 			);
 			const source_content = source.substring(source_offset, source_offset + segment_length);
 
-			// Skip mappings for UseAttribute syntax to avoid overlapping sourcemaps
-			if (source_content.includes('{@use ') || source_content.match(/\{\s*@use\s+/)) {
+			// Skip mappings for RefAttribute syntax to avoid overlapping sourcemaps
+			if (source_content.includes('{ref ') || source_content.match(/\{\s*ref\s+/)) {
 				continue;
 			}
 

package/src/runtime/index.js

@@ -50,3 +50,4 @@ export { user_effect as effect } from './internal/client/blocks.js';
 
 export { Portal } from './internal/client/portal.js';
 
+export { ref_prop as createRefKey } from './internal/client/runtime.js';

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

@@ -99,23 +99,23 @@ export function async(fn) {
  * @param {() => (element: Element) => (void | (() => void))} get_fn
  * @returns {Block}
  */
-export function use(element, get_fn) {
+export function ref(element, get_fn) {
 	/** @type {(element: Element) => (void | (() => void) | undefined)} */
-	var use_fn;
+	var ref_fn;
 	/** @type {Block | null} */
 	var e;
 
 	return block(RENDER_BLOCK, () => {
-		if (use_fn !== (use_fn = get_fn())) {
+		if (ref_fn !== (ref_fn = get_fn())) {
 			if (e) {
 				destroy_block(e);
 				e = null;
 			}
 
-			if (use_fn) {
+			if (ref_fn) {
 				e = branch(() => {
 					effect(() => {
-						return use_fn(element);
+						return ref_fn(element);
 					});
 				});
 			}

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

@@ -22,5 +22,5 @@ export var UNINITIALIZED = Symbol();
 export var TRACKED_OBJECT = Symbol();
 export var SPREAD_OBJECT = Symbol();
 export var COMPUTED_PROPERTY = Symbol();
-export var USE_PROP = '@use';
+export var REF_PROP = 'ref';
 export var ARRAY_SET_INDEX_AT = Symbol();

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

@@ -9,7 +9,7 @@ export {
 	set_selected,
 } from './render.js';
 
-export { render, render_spread, async, use } from './blocks.js';
+export { render, render_spread, async, ref } from './blocks.js';
 
 export { event, delegate } from './events.js';
 
@@ -42,7 +42,7 @@ export {
 	push_component,
 	pop_component,
 	untrack,
-	use_prop,
+	ref_prop,
 	fallback,
 	exclude_from_object,
 } from './runtime.js';

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

@@ -1,5 +1,5 @@
-import { destroy_block, use } from './blocks';
-import { USE_PROP } from './constants';
+import { destroy_block, ref } from './blocks';
+import { REF_PROP } from './constants';
 import { get_descriptors, get_own_property_symbols, get_prototype_of } from './utils';
 
 export function set_text(text, value) {
@@ -174,16 +174,16 @@ export function apply_element_spread(element, fn) {
 		}
 
 		for (const symbol of get_own_property_symbols(next)) {
-			var use_fn = next[symbol];
+			var ref_fn = next[symbol];
 
-			if (symbol.description === USE_PROP && (!prev || use_fn !== prev[symbol])) {
+			if (symbol.description === REF_PROP && (!prev || ref_fn !== prev[symbol])) {
 				if (effects[symbol]) {
 					destroy_block(effects[symbol]);
 				}
-				effects[symbol] = use(element, () => use_fn);
+				effects[symbol] = ref(element, () => ref_fn);
 			}
 
-			next[symbol] = use_fn;
+			next[symbol] = ref_fn;
 		}
 
 		set_attributes(element, next);

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

@@ -25,7 +25,7 @@ import {
 	TRACKED_OBJECT,
 	TRY_BLOCK,
 	UNINITIALIZED,
-	USE_PROP,
+	REF_PROP,
 	ARRAY_SET_INDEX_AT,
 } from './constants';
 import { capture, suspend } from './try.js';
@@ -1203,8 +1203,8 @@ export function pop_component() {
 	active_component = component.p;
 }
 
-export function use_prop() {
-	return Symbol(USE_PROP);
+export function ref_prop() {
+	return Symbol(REF_PROP);
 }
 
 /**

package/tests/basic.test.ripple

@@ -88,6 +88,27 @@ describe('basic', () => {
 		expect(container.querySelector('div').textContent).toEqual('');
 	});
 
+	it('render tick template literal for nested children', () => {
+		component Child({ $level, $children }) {
+			if($level == 1) {
+				<h1><$children /></h1>
+			}
+			if($level == 2) {
+				<h2><$children /></h2>
+			}
+			if($level == 3) {
+				<h3><$children /></h3>
+			}
+		}
+
+		component App() {
+			<Child $level={1}>{`Heading 1`} </Child>
+		}
+
+		render(App);
+		expect(container.querySelector('h1').textContent).toEqual('Heading 1');
+	});
+
 	it('render dynamic class attribute', () => {
 		component Basic() {
 			let $active = false;

package/tests/{decorators.test.ripple → ref.test.ripple}

@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 import { mount, flushSync, RippleArray } from 'ripple';
 
-describe('@use element decorators', () => {
+describe('refs', () => {
 	let container;
 
 	function render(component) {
@@ -24,7 +24,7 @@ describe('@use element decorators', () => {
 		let div;
 
 		component Component() {
-			<div {@use (node) => { div = node; }}>{'Hello World'}</div>
+			<div {ref (node) => { div = node; }}>{'Hello World'}</div>
 		}
 		render(Component);
 		flushSync();
@@ -37,11 +37,11 @@ describe('@use element decorators', () => {
 		component Component() {
 			let items = RippleArray.from([1, 2, 3]);
 
-			function ref(node) {
+			function componentRef(node) {
 				_node = node;
 			}
 
-			<Child {@use ref} {items} />
+			<Child {ref componentRef} {items} />
 		}
 
 		component Child(props) {

package/types/index.d.ts

@@ -79,3 +79,5 @@ declare global {
         // Add other runtime functions as needed for TypeScript analysis
     };
 }
+
+export declare function createRefKey(): symbol;