ripple 0.2.45 → 0.2.46

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

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

@@ -61,7 +61,9 @@ function RipplePlugin(config) {
 								currentType === tt.colon || // After :
 								currentType === tt.question || // After ?
 								currentType === tt.logicalOR || // After ||
-								currentType === tt.logicalAND; // After &&
+								currentType === tt.logicalAND || // After &&
+								currentType === tt.dot || // After . (for member expressions like obj.@prop)
+								currentType === tt.questionDot; // After ?. (for optional chaining like obj?.@prop)
 							
 							if (inExpression) {
 								return this.readAtIdentifier();
@@ -235,6 +237,11 @@ function RipplePlugin(config) {
 						return this.finishNode(node, 'SpreadAttribute');
 					} else {
 						const id = this.parseIdentNode();
+						node.tracked = false;
+						if (id.name.startsWith('@')) {
+							node.tracked = true;
+							id.name = id.name.slice(1);
+						}
 						this.finishNode(id, 'Identifier');
 						node.name = id;
 						node.value = id;

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

@@ -79,6 +79,10 @@ function visit_function(node, context) {
 		function_depth: context.state.function_depth + 1,
 		expression: null,
 	});
+
+	if (node.metadata.tracked) {
+		mark_as_tracked(context.path);
+	}
 }
 
 function mark_as_tracked(path) {
@@ -117,11 +121,13 @@ const visitors = {
 
 		if (
 			is_reference(node, /** @type {Node} */ (parent)) &&
-			context.state.metadata?.tracking === false &&
-			is_tracked_name(node) &&
+			(is_tracked_name(node) || node.tracked) &&
 			binding?.node !== node
 		) {
-			context.state.metadata.tracking = true;
+			mark_as_tracked(context.path);
+			if (context.state.metadata?.tracking === false) {
+				context.state.metadata.tracking = true;
+			}
 		}
 
 		if (
@@ -269,7 +275,7 @@ const visitors = {
 										if (!computed) {
 											return node;
 										}
-										return b.call('$.set_property', node, computed, value, b.id('__block'));
+										return b.call('$.old_set_property', node, computed, value, b.id('__block'));
 									},
 								};
 								break;
@@ -286,6 +292,15 @@ const visitors = {
 				const has_tracked = paths.some(
 					(path) => path.node.type === 'Identifier' && is_tracked_name(path.node.name),
 				);
+				for (const path of paths) {
+					if (path.node.tracked) {
+						error(
+							'Variables cannot be reactively referenced using @',
+							state.analysis.module.filename,
+							path.node,
+						);
+					}
+				}
 
 				if (has_tracked) {
 					const tmp = state.scope.generate('tmp');
@@ -312,7 +327,7 @@ const visitors = {
 								} else if (metadata.tracking && !metadata.await) {
 									if (is_tracked_name(path.node.name) && value.type === 'MemberExpression') {
 										return b.call(
-											'$.get_property',
+											'$.old_get_property',
 											b.call('$.get_computed', value.object),
 											value.property.type === 'Identifier'
 												? b.literal(value.property.name)
@@ -334,7 +349,7 @@ const visitors = {
 
 								if (is_tracked_name(path.node.name) && value.type === 'MemberExpression') {
 									return b.call(
-										'$.get_property',
+										'$.old_get_property',
 										value.object,
 										value.property.type === 'Identifier'
 											? b.literal(value.property.name)
@@ -397,10 +412,10 @@ const visitors = {
 							};
 						} else {
 							binding.transform = {
-								read: (_) => b.call('$.get_property', b.id('__props'), b.literal(name)),
+								read: (_) => b.call('$.old_get_property', b.id('__props'), b.literal(name)),
 								assign: (node, value) => {
 									return b.call(
-										'$.set_property',
+										'$.old_set_property',
 										b.id('__props'),
 										b.literal(name),
 										value,
@@ -409,7 +424,7 @@ const visitors = {
 								},
 								update: (_) =>
 									b.call(
-										node.prefix ? '$.update_property_pre' : '$.update_property',
+										node.prefix ? '$.old_update_property_pre' : '$.old_update_property',
 										b.id('__props'),
 										b.literal(name),
 										b.id('__block'),
@@ -530,6 +545,8 @@ const visitors = {
 
 								attr.metadata.delegated = delegated_event;
 							}
+						} else {
+							visit(attr.value, state);
 						}
 					}
 				} else if (attr.type === 'AccessorAttribute') {

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

@@ -17,16 +17,25 @@ import {
 	is_boolean_attribute,
 	is_dom_property,
 	is_ripple_import,
-	is_declared_within_component,
+	is_declared_function_within_component,
 	is_inside_call_expression,
 	is_tracked_computed_property,
 	is_value_static,
 	is_void_element,
+	is_component_level_function,
 } from '../../utils.js';
 import is_reference from 'is-reference';
 import { extract_paths, object } from '../../../utils/ast.js';
 import { render_stylesheets } from './stylesheet.js';
 
+function add_ripple_internal_import(context) {
+	if (!context.state.to_ts) {
+		if (!context.state.imports.has(`import * as $ from 'ripple/internal/client'`)) {
+			context.state.imports.add(`import * as $ from 'ripple/internal/client'`);
+		}
+	}
+}
+
 function visit_function(node, context) {
 	if (context.state.to_ts) {
 		context.next(context.state);
@@ -54,13 +63,18 @@ function visit_function(node, context) {
 	let body = context.visit(node.body, state);
 
 	if (metadata?.tracked === true) {
+		const new_body = [];
+
+		if (!is_inside_component(context, true) && is_component_level_function(context)) {
+			add_ripple_internal_import(context);
+			new_body.push(b.var('__block', b.call('$.scope')));
+		}
+		new_body.push(...body.body);
+
 		return /** @type {FunctionExpression} */ ({
 			...node,
 			params: node.params.map((param) => context.visit(param, state)),
-			body:
-				body.type === 'BlockStatement'
-					? { ...body, body: [b.var('__block', b.call('$.scope')), ...body.body] }
-					: body,
+			body: body.type === 'BlockStatement' ? { ...body, body: new_body } : body,
 		});
 	}
 
@@ -79,6 +93,8 @@ function build_getter(node, context) {
 			const read_fn = transform?.read || (node.tracked && transform?.read_tracked);
 
 			if (read_fn) {
+				add_ripple_internal_import(context);
+
 				return read_fn(node, context.state?.metadata?.spread, context.visit);
 			}
 		}
@@ -161,7 +177,7 @@ const visitors = {
 			(is_ripple_import(callee, context) &&
 				(callee.type !== 'Identifier' ||
 					(callee.name !== 'array' && callee.name !== 'deferred'))) ||
-			is_declared_within_component(callee, context)
+			is_declared_function_within_component(callee, context)
 		) {
 			return context.next();
 		}
@@ -284,6 +300,18 @@ const visitors = {
 	MemberExpression(node, context) {
 		const parent = context.path.at(-1);
 
+		if (node.property.type === 'Identifier' && node.property.tracked) {
+			add_ripple_internal_import(context);
+
+			context.state.metadata.tracking = true;
+			return b.call(
+				'$.get_property',
+				context.visit(node.object),
+				node.computed ? context.visit(node.property) : b.literal(node.property.name),
+				node.optional ? b.true : undefined,
+			);
+		}
+
 		if (parent.type !== 'AssignmentExpression') {
 			const object = node.object;
 			const property = node.property;
@@ -303,14 +331,14 @@ const visitors = {
 
 				if (tracked_name) {
 					return b.call(
-						'$.get_property',
+						'$.old_get_property',
 						context.visit(object),
 						property.type === 'Identifier' ? b.literal(property.name) : property,
 						node.optional ? b.true : undefined,
 					);
 				} else {
 					return b.call(
-						'$.get_property',
+						'$.old_get_property',
 						context.visit(object),
 						context.visit(property),
 						node.optional ? b.true : undefined,
@@ -560,9 +588,10 @@ const visitors = {
 
 						if (name === 'value' || name === '$value') {
 							const id = state.flush_node();
-							const expression = visit(attr.value, state);
+							const metadata = { tracking: false, await: false };
+							const expression = visit(attr.value, { ...state, metadata });
 
-							if (name === '$value') {
+							if (name === '$value' || metadata.tracking) {
 								local_updates.push(b.stmt(b.call('$.set_value', id, expression)));
 							} else {
 								state.init.push(b.stmt(b.call('$.set_value', id, expression)));
@@ -573,9 +602,10 @@ const visitors = {
 
 						if (name === 'checked' || name === '$checked') {
 							const id = state.flush_node();
-							const expression = visit(attr.value, state);
+							const metadata = { tracking: false, await: false };
+							const expression = visit(attr.value, { ...state, metadata });
 
-							if (name === '$checked') {
+							if (name === '$checked' || metadata.tracking) {
 								local_updates.push(b.stmt(b.call('$.set_checked', id, expression)));
 							} else {
 								state.init.push(b.stmt(b.call('$.set_checked', id, expression)));
@@ -585,9 +615,10 @@ const visitors = {
 
 						if (name === 'selected' || name === '$selected') {
 							const id = state.flush_node();
-							const expression = visit(attr.value, state);
+							const metadata = { tracking: false, await: false };
+							const expression = visit(attr.value, { ...state, metadata });
 
-							if (name === '$selected') {
+							if (name === '$selected' || metadata.tracking) {
 								local_updates.push(b.stmt(b.call('$.set_selected', id, expression)));
 							} else {
 								state.init.push(b.stmt(b.call('$.set_selected', id, expression)));
@@ -625,7 +656,7 @@ const visitors = {
 									delegated_assignment = b.array(args);
 								} else if (
 									handler.type === 'Identifier' &&
-									is_declared_within_component(handler, context)
+									is_declared_function_within_component(handler, context)
 								) {
 									delegated_assignment = handler;
 								} else {
@@ -657,11 +688,12 @@ const visitors = {
 							continue;
 						}
 
+						const metadata = { tracking: false, await: false };
+						const expression = visit(attr.value, { ...state, metadata });
 						// All other attributes
-						if (is_tracked_name(name)) {
-							const attribute = name.slice(1);
+						if (is_tracked_name(name) || metadata.tracking) {
+							const attribute = is_tracked_name(name) ? name.slice(1) : name;
 							const id = state.flush_node();
-							const expression = visit(attr.value, state);
 
 							if (is_dom_property(attribute)) {
 								local_updates.push(b.stmt(b.assignment('=', b.member(id, attribute), expression)));
@@ -672,7 +704,6 @@ const visitors = {
 							}
 						} else {
 							const id = state.flush_node();
-							const expression = visit(attr.value, state);
 
 							if (is_dom_property(name)) {
 								state.init.push(b.stmt(b.assignment('=', b.member(id, name), expression)));
@@ -700,13 +731,14 @@ const visitors = {
 					handle_static_attr(class_attribute.name.name, value);
 				} else {
 					const id = state.flush_node();
-					let expression = visit(class_attribute.value, state);
+					const metadata = { tracking: false, await: false };
+					let expression = visit(class_attribute.value, { ...state, metadata });
 
 					if (node.metadata.scoped && state.component.css) {
 						expression = b.binary('+', b.literal(state.component.css.hash + ' '), expression);
 					}
 
-					if (class_attribute.name.name === '$class') {
+					if (class_attribute.name.name === '$class' || metadata.tracking) {
 						local_updates.push(b.stmt(b.call('$.set_class', id, expression)));
 					} else {
 						state.init.push(b.stmt(b.call('$.set_class', id, expression)));
@@ -898,9 +930,7 @@ const visitors = {
 
 	Fragment(node, context) {
 		if (!context.state.to_ts) {
-			if (!context.state.imports.has(`import * as $ from 'ripple/internal/client'`)) {
-				context.state.imports.add(`import * as $ from 'ripple/internal/client'`);
-			}
+			add_ripple_internal_import(context);
 		}
 
 		const metadata = { await: false };
@@ -924,11 +954,7 @@ const visitors = {
 	Component(node, context) {
 		let prop_statements;
 
-		if (!context.state.to_ts) {
-			if (!context.state.imports.has(`import * as $ from 'ripple/internal/client'`)) {
-				context.state.imports.add(`import * as $ from 'ripple/internal/client'`);
-			}
-		}
+		add_ripple_internal_import(context);
 
 		const metadata = { await: false };
 
@@ -1018,6 +1044,34 @@ const visitors = {
 
 		const left = node.left;
 
+		if (
+			left.type === 'MemberExpression' &&
+			left.property.type === 'Identifier' &&
+			left.property.tracked
+		) {
+			add_ripple_internal_import(context);
+			const operator = node.operator;
+			const right = node.right;
+
+			if (operator !== '=') {
+				context.state.metadata.tracking = true;
+			}
+
+			return b.call(
+				'$.set_property',
+				context.visit(left.object),
+				left.computed ? context.visit(left.property) : b.literal(left.property.name),
+				operator === '='
+					? context.visit(right)
+					: b.binary(
+							operator === '+=' ? '+' : operator === '-=' ? '-' : operator === '*=' ? '*' : '/',
+							/** @type {Pattern} */ (context.visit(left)),
+							/** @type {Expression} */ (context.visit(right)),
+						),
+				b.id('__block'),
+			);
+		}
+
 		if (left.type === 'MemberExpression') {
 			// need to capture setting length of array to throw a runtime error
 			if (
@@ -1026,7 +1080,7 @@ const visitors = {
 			) {
 				if (left.property.name !== '$length') {
 					return b.call(
-						'$.set_property',
+						'$.old_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(),
@@ -1059,6 +1113,23 @@ const visitors = {
 		}
 		const argument = node.argument;
 
+		if (
+			argument.type === 'MemberExpression' &&
+			argument.property.type === 'Identifier' &&
+			argument.property.tracked
+		) {
+			add_ripple_internal_import(context);
+			context.state.metadata.tracking = true;
+
+			return b.call(
+				node.prefix ? '$.update_pre_property' : '$.update_property',
+				context.visit(argument.object),
+				argument.computed ? context.visit(argument.property) : b.literal(argument.property.name),
+				b.id('__block'),
+				node.operator === '--' ? b.literal(-1) : undefined,
+			);
+		}
+
 		if (
 			argument.type === 'MemberExpression' &&
 			((argument.property.type === 'Identifier' && is_tracked_name(argument.property.name)) ||
@@ -1066,7 +1137,7 @@ const visitors = {
 					is_tracked_computed_property(argument.object, argument.property, context)))
 		) {
 			return b.call(
-				node.prefix ? '$.update_pre_property' : '$.update_property',
+				node.prefix ? '$.old_update_pre_property' : '$.old_update_property',
 				context.visit(argument.object),
 				argument.computed ? context.visit(argument.property) : b.literal(argument.property.name),
 				b.id('__block'),

package/src/compiler/utils.js

@@ -374,6 +374,30 @@ export function is_inside_component(context, includes_functions = false) {
 	return false;
 }
 
+export function is_component_level_function(context) {
+	for (let i = context.path.length - 1; i >= 0; i -= 1) {
+		const context_node = context.path[i];
+		const type = context_node.type;
+
+		if (type === 'BlockStatement') {
+			if (context_node.body.find((n) => n.type === 'Component')) {
+				return true;
+			}
+			debugger
+			
+		}
+
+		if (
+			type === 'FunctionExpression' ||
+			type === 'ArrowFunctionExpression' ||
+			type === 'FunctionDeclaration'
+		) {
+			return false;
+		}
+	}
+	return true;
+}
+
 export function is_inside_call_expression(context) {
 	for (let i = context.path.length - 1; i >= 0; i -= 1) {
 		const context_node = context.path[i];
@@ -452,7 +476,7 @@ export function is_ripple_import(callee, context) {
 	return false;
 }
 
-export function is_declared_within_component(node, context) {
+export function is_declared_function_within_component(node, context) {
 	const component = context.path.find((n) => n.type === 'Component');
 
 	if (node.type === 'Identifier' && component) {
@@ -460,6 +484,14 @@ export function is_declared_within_component(node, context) {
 		const component_scope = context.state.scopes.get(component);
 
 		if (binding !== null && component_scope !== null) {
+			if (
+				binding.declaration_kind !== 'function' &&
+				binding.initial?.type !== 'FunctionDeclaration' &&
+				binding.initial?.type !== 'ArrowFunctionExpression' &&
+				binding.initial?.type !== 'FunctionExpression'
+			) {
+				return false;
+			}
 			let scope = binding.scope;
 
 			while (scope !== null) {

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

@@ -1,5 +1,5 @@
 import { TRACKED_OBJECT } from './constants';
-import { get_property } from './runtime';
+import { old_get_property } from './runtime';
 
 const array_proto = Array.prototype;
 
@@ -21,7 +21,7 @@ export function array_reduce(array, callback, initial_value) {
 	let accumulator = initial_value;
 
 	for (let i = 0; i < array.length; i++) {
-		accumulator = callback(accumulator, get_property(array, i), i, array);
+		accumulator = callback(accumulator, old_get_property(array, i), i, array);
 	}
 
 	return accumulator;
@@ -45,7 +45,7 @@ export function array_join(array, separator) {
 		if (i > 0 && separator !== undefined) {
 			result += separator;
 		}
-		result += String(get_property(array, i));
+		result += String(old_get_property(array, i));
 	}
 
 	return result;
@@ -68,7 +68,7 @@ export function array_map(array, callback) {
 	const result = [];
 	for (let i = 0; i < array.length; i++) {
 		if (i in array) {
-			result[i] = callback(get_property(array, i), i, array);
+			result[i] = callback(old_get_property(array, i), i, array);
 		}
 	}
 
@@ -91,7 +91,7 @@ export function array_filter(array, callback) {
 	const result = [];
 	for (let i = 0; i < array.length; i++) {
 		if (i in array) {
-			const value = get_property(array, i);
+			const value = old_get_property(array, i);
 			if (callback(value, i, array)) {
 				result.push(value);
 			}
@@ -116,7 +116,7 @@ export function array_forEach(array, callback) {
 
 	for (let i = 0; i < array.length; i++) {
 		if (i in array) {
-			callback(get_property(array, i), i, array);
+			callback(old_get_property(array, i), i, array);
 		}
 	}
 }
@@ -135,7 +135,7 @@ export function array_includes(array, value) {
 	}
 
 	for (let i = 0; i < array.length; i++) {
-		if (i in array && get_property(array, i) === value) {
+		if (i in array && old_get_property(array, i) === value) {
 			return true;
 		}
 	}
@@ -157,7 +157,7 @@ export function array_indexOf(array, value) {
 	}
 
 	for (let i = 0; i < array.length; i++) {
-		if (i in array && get_property(array, i) === value) {
+		if (i in array && old_get_property(array, i) === value) {
 			return i;
 		}
 	}
@@ -179,7 +179,7 @@ export function array_lastIndexOf(array, value) {
 	}
 
 	for (let i = array.length - 1; i >= 0; i--) {
-		if (i in array && get_property(array, i) === value) {
+		if (i in array && old_get_property(array, i) === value) {
 			return i;
 		}
 	}
@@ -201,7 +201,7 @@ export function array_every(array, callback) {
   }
 
   for (let i = 0; i < array.length; i++) {
-    if (i in array && !callback(get_property(array, i), i, array)) {
+    if (i in array && !callback(old_get_property(array, i), i, array)) {
       return false;
     }
   }
@@ -223,7 +223,7 @@ export function array_some(array, callback) {
   }
 
   for (let i = 0; i < array.length; i++) {
-    if (i in array && callback(get_property(array, i), i, array)) {
+    if (i in array && callback(old_get_property(array, i), i, array)) {
       return true;
     }
   }
@@ -249,7 +249,7 @@ export function array_toString(array) {
       result += ',';
     }
     if (i in array) {
-      result += String(get_property(array, i));
+      result += String(old_get_property(array, i));
     }
   }
 
@@ -272,7 +272,7 @@ export function array_toSorted(array, compare_fn) {
   const result = [];
   for (let i = 0; i < array.length; i++) {
     if (i in array) {
-      result.push(get_property(array, i));
+      result.push(old_get_property(array, i));
     }
   }
 
@@ -297,7 +297,7 @@ export function array_toSpliced(array, start, delete_count, ...items) {
   const result = [];
   for (let i = 0; i < array.length; i++) {
     if (i in array) {
-      result.push(get_property(array, i));
+      result.push(old_get_property(array, i));
     }
   }
 
@@ -321,7 +321,7 @@ export function array_values(array) {
   const result = [];
   for (let i = 0; i < array.length; i++) {
     if (i in array) {
-      result.push(get_property(array, i));
+      result.push(old_get_property(array, i));
     }
   }
 
@@ -344,7 +344,7 @@ export function array_entries(array) {
 	const result = [];
 	for (let i = 0; i < array.length; i++) {
 		if (i in array) {
-			result.push([i, get_property(array, i)]);
+			result.push([i, old_get_property(array, i)]);
 		}
 	}
 

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

@@ -22,7 +22,6 @@ import {
 	run_block,
 	run_teardown,
 	schedule_update,
-	set_property,
 } from './runtime';
 import { suspend } from './try';
 

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

@@ -29,10 +29,14 @@ export {
 	computed_property,
 	call_property,
 	get_property,
+	old_get_property,
+	old_set_property,
 	set_property,
 	update,
 	update_pre,
+	old_update_property,
 	update_property,
+	old_update_pre_property,
 	update_pre_property,
 	object_values,
 	object_entries,

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

@@ -2,7 +2,7 @@ import { branch, destroy_block, render } from './blocks';
 import { UNINITIALIZED } from './constants';
 import { handle_root_events } from './events';
 import { create_text } from './operations';
-import { get_property } from './runtime';
+import { old_get_property } from './runtime';
 
 export function Portal(_, props) {
 	let $target = UNINITIALIZED;
@@ -11,8 +11,8 @@ export function Portal(_, props) {
 	var anchor = null;
 
 	render(() => {
-		if ($target === ($target = get_property(props, '$target'))) return;
-		if (children === (children = get_property(props, 'children'))) return;
+		if ($target === ($target = old_get_property(props, '$target'))) return;
+		if (children === (children = old_get_property(props, 'children'))) return;
 
 		if (b !== null) {
 			destroy_block(b);

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

@@ -431,7 +431,7 @@ export function deferred(fn) {
 		var value = fn();
 
 		res[0] = value;
-		set_property(res, 0, value, block);
+		old_set_property(res, 0, value, block);
 
 		if (prev_value !== UNINITIALIZED) {
 			if ((t.f & DEFERRED) === 0) {
@@ -870,7 +870,7 @@ export function computed_property(fn) {
 export function call_property(obj, property, chain_obj, chain_prop, ...args) {
 	// don't swallow errors if either the object or property is nullish,
 	// respect optional chaining as provided
-	if(!chain_obj && !chain_prop) {
+	if (!chain_obj && !chain_prop) {
 		return obj[property].call(obj, ...args);
 	} else if (chain_obj && chain_prop) {
 		return obj?.[property]?.call(obj, ...args);
@@ -888,6 +888,20 @@ export function call_property(obj, property, chain_obj, chain_prop, ...args) {
  * @returns {any}
  */
 export function get_property(obj, property, chain = false) {
+	if (chain && obj == null) {
+		return undefined;
+	}
+	var tracked = obj[property];
+	return get(tracked);
+}
+
+/**
+ * @param {any} obj
+ * @param {string | number | symbol} property
+ * @param {boolean} [chain=false]
+ * @returns {any}
+ */
+export function old_get_property(obj, property, chain = false) {
 	if (chain && obj == null) {
 		return undefined;
 	}
@@ -903,7 +917,7 @@ export function get_property(obj, property, chain = false) {
 	} else if (SPREAD_OBJECT in obj) {
 		var spread_fn = obj[SPREAD_OBJECT];
 		var properties = spread_fn();
-		return get_property(properties, property, chain);
+		return old_get_property(properties, property, chain);
 	} else if (is_ripple_array(obj)) {
 		obj.$length;
 	}
@@ -911,6 +925,11 @@ export function get_property(obj, property, chain = false) {
 	return value;
 }
 
+export function set_property(obj, property, value, block) {
+	var tracked = obj[property];
+	set(tracked, value, block);
+}
+
 /**
  * @param {any} obj
  * @param {string | number | symbol} property
@@ -918,7 +937,7 @@ export function get_property(obj, property, chain = false) {
  * @param {Block} block
  * @returns {any}
  */
-export function set_property(obj, property, value, block) {
+export function old_set_property(obj, property, value, block) {
 	var tracked_properties = obj[TRACKED_OBJECT];
 	var rip_arr = is_ripple_array(obj);
 	var tracked = !(rip_arr && property === 'length') ? tracked_properties?.[property] : undefined;
@@ -955,9 +974,7 @@ export function set_property(obj, property, value, block) {
 export function update(tracked, block, d = 1) {
 	var value = get(tracked);
 	var result = d === 1 ? value++ : value--;
-
 	set(tracked, value, block);
-
 	return result;
 }
 
@@ -988,9 +1005,15 @@ export function decrement(tracked, block) {
 export function update_pre(tracked, block, d = 1) {
 	var value = get(tracked);
 	var new_value = d === 1 ? ++value : --value;
-
 	set(tracked, new_value, block);
+	return new_value;
+}
 
+export function update_property(obj, property, block, d = 1) {
+	var tracked = obj[property];
+	var value = get(tracked);
+	var new_value = d === 1 ? value++ : value++;
+	set(tracked, value, block);
 	return new_value;
 }
 
@@ -1001,7 +1024,7 @@ export function update_pre(tracked, block, d = 1) {
  * @param {number} [d]
  * @returns {number}
  */
-export function update_property(obj, property, block, d = 1) {
+export function old_update_property(obj, property, block, d = 1) {
 	var tracked_properties = obj[TRACKED_OBJECT];
 	var tracked = tracked_properties?.[property];
 	var tracked_exists = tracked !== undefined;
@@ -1019,11 +1042,19 @@ export function update_property(obj, property, block, d = 1) {
 		}
 	}
 
-	obj[property] = value
+	obj[property] = value;
 
 	return value;
 }
 
+export function update_pre_property(obj, property, block, d = 1) {
+	var tracked = obj[property];
+	var value = get(tracked);
+	var new_value = d === 1 ? ++value : --value;
+	set(tracked, new_value, block);
+	return new_value;
+}
+
 /**
  * @param {any} obj
  * @param {string | number | symbol} property
@@ -1031,19 +1062,19 @@ export function update_property(obj, property, block, d = 1) {
  * @param {number} [d]
  * @returns {number}
  */
-export function update_pre_property(obj, property, block, d = 1) {
+export function old_update_pre_property(obj, property, block, d = 1) {
 	var tracked_properties = obj[TRACKED_OBJECT];
 	var tracked = tracked_properties?.[property];
 	var tracked_exists = tracked !== undefined;
 	var value = tracked_exists ? get(tracked) : obj[property];
 
 	if (d === 1) {
-		++value
+		++value;
 		if (tracked_exists) {
 			increment(tracked, block);
 		}
 	} else {
-		--value
+		--value;
 		if (tracked_exists) {
 			decrement(tracked, block);
 		}
@@ -1092,7 +1123,7 @@ export function object_values(obj) {
 	var values = [];
 
 	for (var i = 0; i < keys.length; i++) {
-		values.push(get_property(obj, keys[i]));
+		values.push(old_get_property(obj, keys[i]));
 	}
 
 	return values;
@@ -1112,7 +1143,7 @@ export function object_entries(obj) {
 
 	for (var i = 0; i < keys.length; i++) {
 		var key = keys[i];
-		entries.push([key, get_property(obj, key)]);
+		entries.push([key, old_get_property(obj, key)]);
 	}
 
 	return entries;
@@ -1129,7 +1160,7 @@ export function spread_object(obj) {
 
 	for (var i = 0; i < keys.length; i++) {
 		var key = keys[i];
-		values[key] = get_property(obj, key);
+		values[key] = old_get_property(obj, key);
 	}
 
 	return values;