ripple 0.2.28 → 0.2.31

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.28",
+  "version": "0.2.31",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",

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

@@ -424,12 +424,22 @@ function RipplePlugin(config) {
 						// This node is used for Prettier, we don't actually need
 						// the node for Ripple's transform process
 						element.children = [component.css];
+						// Ensure we escape JSX <tag></tag> context
+						const tokContexts = this.acornTypeScript.tokContexts;
+						const curContext = this.curContext();
+
+						if (curContext === tokContexts.tc_expr) {
+							this.context.pop();
+						}
+
 						return element;
 					} else {
+						this.enterScope(0);
 						this.parseTemplateBody(element.children);
+						this.exitScope();
 					}
+					// Ensure we escape JSX <tag></tag> context
 					const tokContexts = this.acornTypeScript.tokContexts;
-
 					const curContext = this.curContext();
 
 					if (curContext === tokContexts.tc_expr) {

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

@@ -6,6 +6,7 @@ import {
 	is_event_attribute,
 	is_inside_component,
 	is_ripple_import,
+	is_tracked_computed_property,
 	is_tracked_name,
 } from '../../utils.js';
 import { extract_paths } from '../../../utils/ast.js';
@@ -101,15 +102,21 @@ const visitors = {
 	MemberExpression(node, context) {
 		const parent = context.path.at(-1);
 
-		if (
-			context.state.metadata?.tracking === false &&
-			node.property.type === 'Identifier' &&
-			!node.computed &&
-			is_tracked_name(node.property.name) &&
-			parent.type !== 'AssignmentExpression'
-		) {
-			context.state.metadata.tracking = true;
+		if (context.state.metadata?.tracking === false && parent.type !== 'AssignmentExpression') {
+			if (
+				node.property.type === 'Identifier' &&
+				!node.computed &&
+				is_tracked_name(node.property.name)
+			) {
+				context.state.metadata.tracking = true;
+			} else if (
+				node.computed &&
+				is_tracked_computed_property(node.object, node.property, context)
+			) {
+				context.state.metadata.tracking = true;
+			}
 		}
+
 		context.next();
 	},
 
@@ -151,6 +158,13 @@ const visitors = {
 		const { state, visit, path } = context;
 
 		for (const declarator of node.declarations) {
+			if (is_inside_component(context) && node.kind === 'var') {
+				error(
+					'var declarations are not allowed in components, use let or const instead',
+					state.analysis.module.filename,
+					declarator,
+				);
+			}
 			const metadata = { tracking: false, await: false };
 			const parent = path.at(-1);
 			const init_is_untracked =
@@ -205,7 +219,7 @@ const visitors = {
 										if (!computed) {
 											return node;
 										}
-										return b.call('$.set_property', node, visit(computed), value, b.id('__block'));
+										return b.call('$.set_property', node, computed, value, b.id('__block'));
 									},
 								};
 								break;

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

@@ -19,6 +19,8 @@ import {
 	is_ripple_import,
 	is_declared_within_component,
 	is_inside_call_expression,
+	is_tracked_computed_property,
+	is_value_static,
 } from '../../utils.js';
 import is_reference from 'is-reference';
 import { extract_paths, object } from '../../../utils/ast.js';
@@ -133,6 +135,7 @@ const visitors = {
 		}
 
 		if (
+			!is_inside_component(context, true) ||
 			context.state.to_ts ||
 			(parent?.type === 'MemberExpression' && parent.property === node) ||
 			is_inside_call_expression(context) ||
@@ -164,6 +167,14 @@ const visitors = {
 			context.state.metadata.tracking = true;
 		}
 
+		if (!is_inside_component(context, true) || is_inside_call_expression(context)) {
+			return context.next();
+		}
+
+		if (is_value_static(node)) {
+			return context.next();
+		}
+
 		return b.call(
 			'$.with_scope',
 			b.id('__block'),
@@ -187,7 +198,10 @@ const visitors = {
 					: property.type === 'Literal' && is_tracked_name(property.value);
 
 			// TODO should we enforce that the identifier is tracked too?
-			if ((node.computed && property.type === 'Identifier') || tracked_name) {
+			if (
+				(node.computed && is_tracked_computed_property(node.object, node.property, context)) ||
+				tracked_name
+			) {
 				if (context.state.metadata?.tracking === false) {
 					context.state.metadata.tracking = true;
 				}
@@ -572,7 +586,18 @@ const visitors = {
 				);
 			}
 
-			transform_children(node.children, { visit, state, root: false });
+			const init = [];
+			const update = [];
+
+			transform_children(node.children, { visit, state: { ...state, init, update }, root: false });
+
+			if (init.length > 0) {
+				state.init.push(b.block(init));
+			}
+
+			if (update.length > 0) {
+				state.init.push(b.stmt(b.call('$.render', b.thunk(b.block(update)))));
+			}
 
 			state.template.push(`</${node.id.name}>`);
 		} else {
@@ -845,19 +870,20 @@ const visitors = {
 
 		const left = node.left;
 
-		if (
-			left.type === 'MemberExpression' &&
-			left.property.type === 'Identifier' &&
-			is_tracked_name(left.property.name) &&
-			left.property.name !== '$length'
-		) {
-			return b.call(
-				'$.set_property',
-				context.visit(left.object),
-				left.computed ? context.visit(left.property) : b.literal(left.property.name),
-				visit_assignment_expression(node, context, build_assignment) ?? context.next(),
-				b.id('__block'),
-			);
+		if (left.type === 'MemberExpression') {
+			if (left.property.type === 'Identifier' && is_tracked_name(left.property.name)) {
+				if (left.property.name !== '$length') {
+					return b.call(
+						'$.set_property',
+						context.visit(left.object),
+						left.computed ? context.visit(left.property) : b.literal(left.property.name),
+						visit_assignment_expression(node, context, build_assignment) ?? context.next(),
+						b.id('__block'),
+					);
+				}
+			} else if (!is_tracked_computed_property(left.object, left.property, context)) {
+				return context.next();
+			}
 		}
 
 		const visited = visit_assignment_expression(node, context, build_assignment) ?? context.next();
@@ -884,7 +910,8 @@ const visitors = {
 		if (
 			argument.type === 'MemberExpression' &&
 			((argument.property.type === 'Identifier' && is_tracked_name(argument.property.name)) ||
-				argument.computed)
+				(argument.computed &&
+					is_tracked_computed_property(argument.object, argument.property, context)))
 		) {
 			return b.call(
 				node.prefix ? '$.update_pre_property' : '$.update_property',
@@ -1258,7 +1285,7 @@ function transform_ts_child(node, context) {
 			.filter((attr) => {
 				if (attr.type === 'UseAttribute') {
 					use_attributes.push(attr);
-					return false; // Filter out from JSX attributes
+					return false;
 				}
 				return true;
 			})
@@ -1415,7 +1442,12 @@ function transform_ts_child(node, context) {
 				),
 			),
 		);
+	} else if (node.type === 'Component') {
+		const component = visit(node, context.state);
+
+		state.init.push(component);
 	} else {
+		debugger;
 		throw new Error('TODO');
 	}
 }

package/src/compiler/utils.js

@@ -327,15 +327,16 @@ export function build_hoisted_params(node, context) {
 	return params;
 }
 
-export function is_inside_component(context) {
+export function is_inside_component(context, includes_functions = false) {
 	for (let i = context.path.length - 1; i >= 0; i -= 1) {
 		const context_node = context.path[i];
 		const type = context_node.type;
 
 		if (
-			type === 'FunctionExpression' ||
-			type === 'ArrowFunctionExpression' ||
-			type === 'FunctionDeclaration'
+			!includes_functions &&
+			(type === 'FunctionExpression' ||
+				type === 'ArrowFunctionExpression' ||
+				type === 'FunctionDeclaration')
 		) {
 			return false;
 		}
@@ -369,6 +370,47 @@ export function is_tracked_name(name) {
 	return typeof name === 'string' && name.startsWith('$') && name.length > 1 && name[1] !== '$';
 }
 
+export function is_value_static(node) {
+	if (node.type === 'Literal') {
+		return true;
+	}
+	if (node.type === 'ArrayExpression') {
+		return true;
+	}
+	if (node.type === 'NewExpression') {
+		if (node.callee.type === 'Identifier' && node.callee.name === 'Array') {
+			return true;
+		}
+		return false;
+	}
+
+	return false;
+}
+
+export function is_tracked_computed_property(object, property, context) {
+	const binding = context.state.scope.get(object.name);
+
+	if (binding) {
+		const initial = binding.initial;
+		if (initial && is_value_static(initial)) {
+			return false;
+		}
+	}
+	if (property.type === 'Identifier') {
+		return true;
+	}
+	if (
+		property.type === 'Literal' &&
+		typeof property.value === 'string' &&
+		is_tracked_name(property.value)
+	) {
+		return true;
+	}
+
+	// TODO: do we need to handle more logic here? default to false for now
+	return true;
+}
+
 export function is_ripple_import(callee, context) {
 	if (callee.type === 'Identifier') {
 		const binding = context.state.scope.get(callee.name);
@@ -506,7 +548,7 @@ export function build_assignment(operator, left, right, context) {
 		return transform.assign(
 			object,
 			value,
-			left.type === 'MemberExpression' && left.computed ? left.property : undefined,
+			left.type === 'MemberExpression' && left.computed ? context.visit(left.property) : undefined,
 		);
 	}
 

package/src/runtime/array.js

@@ -1,7 +1,7 @@
 /** @import { Block } from '#client' */
 
 import { TRACKED_OBJECT } from './internal/client/constants.js';
-import { get, increment, scope, set, tracked } from './internal/client/runtime.js';
+import { get, increment, safe_scope, set, tracked } from './internal/client/runtime.js';
 
 var symbol_iterator = Symbol.iterator;
 
@@ -36,17 +36,6 @@ const introspect_methods = [
 ];
 
 let init = false;
-
-/**
- * @param {Block | null} block
- * @throws {Error}
- */
-function check_block(block) {
-	if (block === null) {
-		throw new Error('Cannot set $length outside of a reactive context');
-	}
-}
-
 export class RippleArray extends Array {
 	#tracked_elements = [];
 	#tracked_index;
@@ -62,12 +51,11 @@ export class RippleArray extends Array {
 	constructor(...elements) {
 		super(...elements);
 
-		var block = scope();
-		check_block(block);
+		var block = safe_scope();
 		var tracked_elements = this.#tracked_elements;
 
 		for (var i = 0; i < this.length; i++) {
-			tracked_elements[i] = tracked(0, block);
+			tracked_elements[i] = tracked(elements[i], block);
 		}
 		this.#tracked_index = tracked(this.length, block);
 
@@ -90,20 +78,18 @@ export class RippleArray extends Array {
 		}
 	}
 
-	fill() {
-		var block = scope();
-		check_block(block);
+	fill(val, start, end) {
+		var block = safe_scope();
 		var tracked_elements = this.#tracked_elements;
 
-		super.fill();
+		super.fill(val, start, end);
 		for (var i = 0; i < this.length; i++) {
 			increment(tracked_elements[i], block);
 		}
 	}
 
 	reverse() {
-		var block = scope();
-		check_block(block);
+		var block = safe_scope();
 		var tracked_elements = this.#tracked_elements;
 
 		super.reverse();
@@ -113,8 +99,7 @@ export class RippleArray extends Array {
 	}
 
 	sort(fn) {
-		var block = scope();
-		check_block(block);
+		var block = safe_scope();
 		var tracked_elements = this.#tracked_elements;
 
 		super.sort(fn);
@@ -128,8 +113,7 @@ export class RippleArray extends Array {
 	 * @returns {number}
 	 */
 	unshift(...elements) {
-		var block = scope();
-		check_block(block);
+		var block = safe_scope();
 		var tracked_elements = this.#tracked_elements;
 
 		super.unshift(...elements);
@@ -144,15 +128,14 @@ export class RippleArray extends Array {
 	}
 
 	shift() {
-		var block = scope();
-		check_block(block);
+		var block = safe_scope();
 		var tracked_elements = this.#tracked_elements;
 
 		super.shift();
-		for (var i = 0; i < tracked_elements.length; i++) {
-			increment(tracked_elements[i], block);
+		for (var i = 0; i < tracked_elements.length - 1; i++) {
+			set(tracked_elements[i], tracked_elements[i + 1].v, block);
 		}
-		tracked_elements.shift();
+		tracked_elements.pop();
 
 		set(this.#tracked_index, this.length, block);
 	}
@@ -162,8 +145,7 @@ export class RippleArray extends Array {
 	 * @returns {number}
 	 */
 	push(...elements) {
-		var block = scope();
-		check_block(block);
+		var block = safe_scope();
 		var start_index = this.length;
 		var tracked_elements = this.#tracked_elements;
 
@@ -178,8 +160,7 @@ export class RippleArray extends Array {
 	}
 
 	pop() {
-		var block = scope();
-		check_block(block);
+		var block = safe_scope();
 		var tracked_elements = this.#tracked_elements;
 
 		super.pop();
@@ -198,8 +179,7 @@ export class RippleArray extends Array {
 	 * @returns {any[]}
 	 */
 	splice(start, delete_count, ...elements) {
-		var block = scope();
-		check_block(block);
+		var block = safe_scope();
 		var tracked_elements = this.#tracked_elements;
 
 		super.splice(start, delete_count, ...elements);
@@ -220,11 +200,10 @@ export class RippleArray extends Array {
 	}
 
 	set $length(length) {
-		var block = scope();
-		check_block(block);
+		var block = safe_scope();
 		var tracked_elements = this.#tracked_elements;
 
-		if (length !== this.$length) {
+		if (length !== this.length) {
 			for (var i = 0; i < tracked_elements.length; i++) {
 				increment(tracked_elements[i], block);
 			}
@@ -260,4 +239,3 @@ export function get_all_elements(array) {
 
 	return arr;
 }
-

package/src/runtime/index.js

@@ -42,6 +42,8 @@ export { RippleArray } from './array.js';
 
 export { RippleSet } from './set.js';
 
+export { RippleMap } from './map.js';
+
 export { keyed } from './internal/client/for.js';
 
 export { user_effect as effect } from './internal/client/blocks.js';

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

@@ -16,6 +16,7 @@ export { event, delegate } from './events.js';
 export {
 	active_block,
 	scope,
+	safe_scope,
 	with_scope,
 	get_tracked,
 	get_computed,