ripple 0.2.6 → 0.2.8

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

@@ -3,7 +3,7 @@ import {
 	destroy_non_branch_children,
 	effect,
 	is_destroyed,
-	render
+	render,
 } from './blocks.js';
 import {
 	ASYNC_BLOCK,
@@ -23,7 +23,7 @@ import {
 	TRACKED_OBJECT,
 	TRY_BLOCK,
 	UNINITIALIZED,
-	USE_PROP
+	USE_PROP,
 } from './constants';
 import { capture, suspend } from './try.js';
 import { define_property, is_array } from './utils';
@@ -31,7 +31,7 @@ import {
 	object_keys as original_object_keys,
 	object_values as original_object_values,
 	object_entries as original_object_entries,
-	structured_clone as original_structured_clone
+	structured_clone as original_structured_clone,
 } from './utils.js';
 
 const FLUSH_MICROTASK = 0;
@@ -215,7 +215,7 @@ export function tracked(v, b) {
 		b,
 		c: 0,
 		f: TRACKED,
-		v
+		v,
 	};
 }
 
@@ -227,7 +227,7 @@ export function computed(fn, block) {
 		d: null,
 		f: TRACKED | COMPUTED,
 		fn,
-		v: UNINITIALIZED
+		v: UNINITIALIZED,
 	};
 }
 
@@ -246,7 +246,7 @@ function create_dependency(tracked) {
 	return {
 		c: tracked.c,
 		t: tracked,
-		n: null
+		n: null,
 	};
 }
 
@@ -351,7 +351,7 @@ export function deferred(fn) {
 
 	define_property(res, TRACKED_OBJECT, {
 		value: tracked_properties,
-		enumerable: false
+		enumerable: false,
 	});
 
 	render(() => {
@@ -618,12 +618,6 @@ export function set(tracked, value, block) {
 
 		tracked.v = value;
 		tracked.c = increment_clock();
-
-		if (tracked_block !== block) {
-			throw new Error(
-				'Tracked state can only be updated within the same component context that it was created in (that includes effects or event handler within that component).'
-			);
-		}
 		schedule_update(tracked_block);
 	}
 }
@@ -674,7 +668,7 @@ export function tracked_spread_object(fn) {
 
 	define_property(obj, SPREAD_OBJECT, {
 		value: fn,
-		enumerable: false
+		enumerable: false,
 	});
 
 	return obj;
@@ -687,7 +681,7 @@ export function tracked_object(obj, properties, block) {
 		tracked_properties = {};
 		define_property(obj, TRACKED_OBJECT, {
 			value: tracked_properties,
-			enumerable: false
+			enumerable: false,
 		});
 	}
 
@@ -717,7 +711,7 @@ export function tracked_object(obj, properties, block) {
 export function computed_property(fn) {
 	define_property(fn, COMPUTED_PROPERTY, {
 		value: true,
-		enumerable: false
+		enumerable: false,
 	});
 	return fn;
 }
@@ -766,6 +760,10 @@ export function increment(tracked, block) {
 	set(tracked, tracked.v + 1, block);
 }
 
+export function decrement(tracked, block) {
+	set(tracked, tracked.v - 1, block);
+}
+
 export function update_pre(tracked, block, d = 1) {
 	var value = get(tracked);
 
@@ -783,7 +781,12 @@ export function update_property(obj, property, block, d = 1) {
 	var value = get(tracked);
 	var result = d === 1 ? value++ : value--;
 
-	increment(tracked, block);
+	if (d === 1) {
+		increment(tracked, block);
+	} else {
+		decrement(tracked, block);
+	}
+
 	return result;
 }
 
@@ -798,7 +801,12 @@ export function update_pre_property(obj, property, block, d = 1) {
 	var value = get(tracked);
 	var result = d === 1 ? ++value : --value;
 
-	increment(tracked, block);
+	if (d === 1) {
+		increment(tracked, block);
+	} else {
+		decrement(tracked, block);
+	}
+
 	return result;
 }
 
@@ -896,7 +904,7 @@ export function push_component() {
 	var component = {
 		e: null,
 		m: false,
-		p: active_component
+		p: active_component,
 	};
 	active_component = component;
 }
@@ -927,4 +935,17 @@ export function pop_component() {
 
 export function use_prop() {
 	return Symbol(USE_PROP);
-}
+}
+
+export function ref(value) {
+	var block = active_block || active_scope;
+	if (!block) {
+		throw new Error('ref() must be called within a component or reactive context');
+	}
+
+	// Create a tracked object with a $current property
+	var ref_obj = { $current: value };
+
+	// Make the $current property reactive
+	return tracked_object(ref_obj, ['$current'], block);
+}

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

@@ -7,7 +7,7 @@ export function assign_nodes(start, end) {
 	if (block.s === null) {
 		block.s = {
 			start,
-			end
+			end,
 		};
 	}
 }

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

@@ -10,7 +10,7 @@ import {
 	set_active_component,
 	set_active_reaction,
 	set_tracking,
-	tracking
+	tracking,
 } from './runtime';
 
 export function try_block(node, fn, catch_fn, pending_fn = null) {
@@ -74,7 +74,7 @@ export function try_block(node, fn, catch_fn, pending_fn = null) {
 
 	var state = {
 		a: pending_fn !== null ? handle_await : null,
-		c: catch_fn !== null ? handle_error : null
+		c: catch_fn !== null ? handle_error : null,
 	};
 
 	create_try_block(() => {

package/src/utils/ast.js

@@ -64,7 +64,7 @@ export function extract_paths(param) {
 		param,
 		(node) => /** @type {ESTree.Identifier | ESTree.MemberExpression} */ (node),
 		(node) => /** @type {ESTree.Identifier | ESTree.MemberExpression} */ (node),
-		false
+		false,
 	);
 }
 
@@ -77,7 +77,7 @@ function _extract_paths(assignments = [], param, expression, update_expression,
 				is_rest: false,
 				has_default_value,
 				expression,
-				update_expression
+				update_expression,
 			});
 			break;
 
@@ -110,7 +110,7 @@ function _extract_paths(assignments = [], param, expression, update_expression,
 							is_rest: true,
 							has_default_value,
 							expression: rest_expression,
-							update_expression: rest_expression
+							update_expression: rest_expression,
 						});
 					} else {
 						_extract_paths(
@@ -118,7 +118,7 @@ function _extract_paths(assignments = [], param, expression, update_expression,
 							prop.argument,
 							rest_expression,
 							rest_expression,
-							has_default_value
+							has_default_value,
 						);
 					}
 				} else {
@@ -130,7 +130,7 @@ function _extract_paths(assignments = [], param, expression, update_expression,
 						prop.value,
 						object_expression,
 						object_expression,
-						has_default_value
+						has_default_value,
 					);
 				}
 			}
@@ -151,7 +151,7 @@ function _extract_paths(assignments = [], param, expression, update_expression,
 								is_rest: true,
 								has_default_value,
 								expression: rest_expression,
-								update_expression: rest_expression
+								update_expression: rest_expression,
 							});
 						} else {
 							_extract_paths(
@@ -159,7 +159,7 @@ function _extract_paths(assignments = [], param, expression, update_expression,
 								element.argument,
 								rest_expression,
 								rest_expression,
-								has_default_value
+								has_default_value,
 							);
 						}
 					} else {
@@ -170,7 +170,7 @@ function _extract_paths(assignments = [], param, expression, update_expression,
 							element,
 							array_expression,
 							array_expression,
-							has_default_value
+							has_default_value,
 						);
 					}
 				}
@@ -188,7 +188,7 @@ function _extract_paths(assignments = [], param, expression, update_expression,
 					is_rest: false,
 					has_default_value: true,
 					expression: fallback_expression,
-					update_expression
+					update_expression,
 				});
 			} else {
 				_extract_paths(assignments, param.left, fallback_expression, update_expression, true);

package/src/utils/builders.js

@@ -40,7 +40,7 @@ export function arrow(params, body, async = false) {
 		expression: body.type !== 'BlockStatement',
 		generator: false,
 		async,
-		metadata: /** @type {any} */ (null) // should not be used by codegen
+		metadata: /** @type {any} */ (null), // should not be used by codegen
 	};
 }
 
@@ -126,7 +126,7 @@ export function call(callee, ...args) {
 		type: 'CallExpression',
 		callee,
 		arguments: /** @type {Array<ESTree.Expression | ESTree.SpreadElement>} */ (args),
-		optional: false
+		optional: false,
 	};
 }
 
@@ -141,7 +141,7 @@ export function maybe_call(callee, ...args) {
 
 	return {
 		type: 'ChainExpression',
-		expression
+		expression,
 	};
 }
 
@@ -183,7 +183,7 @@ export function declaration(kind, declarations) {
 	return {
 		type: 'VariableDeclaration',
 		kind,
-		declarations
+		declarations,
 	};
 }
 
@@ -199,7 +199,7 @@ export function declarator(pattern, init) {
 
 /** @type {ESTree.EmptyStatement} */
 export const empty = {
-	type: 'EmptyStatement'
+	type: 'EmptyStatement',
 };
 
 /**
@@ -224,7 +224,7 @@ export function function_declaration(id, params, body) {
 		body,
 		generator: false,
 		async: false,
-		metadata: /** @type {any} */ (null) // should not be used by codegen
+		metadata: /** @type {any} */ (null), // should not be used by codegen
 	};
 }
 
@@ -260,7 +260,7 @@ export function private_id(name) {
 function import_namespace(local) {
 	return {
 		type: 'ImportNamespaceSpecifier',
-		local: id(local)
+		local: id(local),
 	};
 }
 
@@ -458,7 +458,7 @@ function new_builder(expression, ...args) {
 	return {
 		callee: expression,
 		arguments: args,
-		type: 'NewExpression'
+		type: 'NewExpression',
 	};
 }
 
@@ -487,12 +487,12 @@ const null_instane = literal(null);
 
 /** @type {ESTree.DebuggerStatement} */
 const debugger_builder = {
-	type: 'DebuggerStatement'
+	type: 'DebuggerStatement',
 };
 
 /** @type {ESTree.ThisExpression} */
 const this_instance = {
-	type: 'ThisExpression'
+	type: 'ThisExpression',
 };
 
 /**
@@ -562,7 +562,7 @@ export function method(kind, key, params, body, computed = false, is_static = fa
 		kind,
 		value: function_builder(null, params, block(body)),
 		computed,
-		static: is_static
+		static: is_static,
 	};
 }
 
@@ -581,7 +581,7 @@ function function_builder(id, params, body) {
 		body,
 		generator: false,
 		async: false,
-		metadata: /** @type {any} */ (null) // should not be used by codegen
+		metadata: /** @type {any} */ (null), // should not be used by codegen
 	};
 }
 
@@ -604,7 +604,7 @@ export function import_all(as, source) {
 	return {
 		type: 'ImportDeclaration',
 		source: literal(source),
-		specifiers: [import_namespace(as)]
+		specifiers: [import_namespace(as)],
 	};
 }
 
@@ -620,8 +620,8 @@ export function imports(parts, source) {
 		specifiers: parts.map((p) => ({
 			type: 'ImportSpecifier',
 			imported: id(p[0]),
-			local: id(p[1])
-		}))
+			local: id(p[1]),
+		})),
 	};
 }
 
@@ -640,10 +640,39 @@ function return_builder(argument = null) {
 export function throw_error(str) {
 	return {
 		type: 'ThrowStatement',
-		argument: new_builder('Error', literal(str))
+		argument: new_builder('Error', literal(str)),
 	};
 }
 
+/**
+ * @param {ESTree.BlockStatement} block
+ * @param {ESTree.CatchClause | null} handler
+ * @param {ESTree.BlockStatement | null} finalizer
+ * @returns {ESTree.TryStatement}
+ */
+export function try_builder(block, handler = null, finalizer = null) {
+	return {
+		type: 'TryStatement',
+		block,
+		handler,
+		finalizer
+	};
+}
+
+/**
+ * @param {ESTree.Pattern | null} param
+ * @param {ESTree.BlockStatement} body
+ * @returns {ESTree.CatchClause}
+ */
+export function catch_clause_builder(param, body) {
+	return {
+		type: 'CatchClause',
+		param,
+		body
+	};
+}
+
+export { catch_clause_builder as catch_clause };
 
 /**
  * @param {string} name
@@ -662,7 +691,7 @@ export function jsx_attribute(name, value = null) {
 	return {
 		type: 'JSXAttribute',
 		name,
-		value
+		value,
 	};
 }
 
@@ -673,22 +702,30 @@ export function jsx_attribute(name, value = null) {
  * @param {boolean} self_closing
  * @returns {{ element: ESTree.JSXElement, opening_element: ESTree.JSXOpeningElement }}
  */
-export function jsx_element(name, attributes = [], children = [], self_closing = false, closing_name = name) {
+export function jsx_element(
+	name,
+	attributes = [],
+	children = [],
+	self_closing = false,
+	closing_name = name,
+) {
 	const opening_element = {
 		type: 'JSXOpeningElement',
 		name,
 		attributes,
-		selfClosing: self_closing
+		selfClosing: self_closing,
 	};
 
 	const element = {
 		type: 'JSXElement',
 		openingElement: opening_element,
-		closingElement: self_closing ? null : {
-			type: 'JSXClosingElement',
-			name: closing_name
-		},
-		children
+		closingElement: self_closing
+			? null
+			: {
+					type: 'JSXClosingElement',
+					name: closing_name,
+				},
+		children,
 	};
 
 	return element;
@@ -701,7 +738,7 @@ export function jsx_element(name, attributes = [], children = [], self_closing =
 export function jsx_expression_container(expression) {
 	return {
 		type: 'JSXExpressionContainer',
-		expression
+		expression,
 	};
 }
 
@@ -712,7 +749,7 @@ export function jsx_expression_container(expression) {
 export function jsx_id(name) {
 	return {
 		type: 'JSXIdentifier',
-		name
+		name,
 	};
 }
 
@@ -723,7 +760,7 @@ export function jsx_id(name) {
 export function jsx_spread_attribute(argument) {
 	return {
 		type: 'JSXSpreadAttribute',
-		argument
+		argument,
 	};
 }
 
@@ -740,5 +777,6 @@ export {
 	if_builder as if,
 	this_instance as this,
 	null_instane as null,
-	debugger_builder as debugger
+	debugger_builder as debugger,
+	try_builder as try,
 };

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

@@ -0,0 +1,81 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+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>
+`;