ripple 0.2.126 → 0.2.128

package/package.json

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

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

@@ -109,7 +109,7 @@ const visitors = {
 		const parent = context.path.at(-1);
 
 		if (
-			is_reference(node, /** @type {Node} */ (parent)) &&
+			is_reference(node, /** @type {Node} */(parent)) &&
 			binding &&
 			context.state.inside_server_block &&
 			context.state.scope.server_block
@@ -144,7 +144,7 @@ const visitors = {
 		}
 
 		if (
-			is_reference(node, /** @type {Node} */ (parent)) &&
+			is_reference(node, /** @type {Node} */(parent)) &&
 			node.tracked &&
 			binding?.node !== node
 		) {
@@ -155,7 +155,7 @@ const visitors = {
 		}
 
 		if (
-			is_reference(node, /** @type {Node} */ (parent)) &&
+			is_reference(node, /** @type {Node} */(parent)) &&
 			node.tracked &&
 			binding?.node !== node
 		) {
@@ -174,6 +174,18 @@ const visitors = {
 			context.state.metadata.tracking = true;
 		}
 
+		if (node.object.type === 'Identifier' && !node.object.tracked) {
+			const binding = context.state.scope.get(node.object.name);
+
+			if (binding !== null && binding.initial?.type === 'CallExpression' && is_ripple_track_call(binding.initial.callee, context)) {
+				error(
+					`Accessing a tracked object directly is not allowed, use the \`@\` prefix to read the value inside a tracked object - for example \`@${node.object.name}${node.property.type === 'Identifier' ? `.${node.property.name}` : ''}\``,
+					context.state.analysis.module.filename,
+					node,
+				)
+			}
+		}
+
 		context.next();
 	},
 
@@ -424,10 +436,10 @@ const visitors = {
 
 		if (!node.metadata.has_template && !node.metadata.has_await) {
 			error(
-					'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,
-				);
+				'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,
+			);
 		}
 	},
 
@@ -477,10 +489,10 @@ const visitors = {
 
 		if (!node.metadata.has_template && !node.metadata.has_await) {
 			error(
-					'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,
-				);
+				'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) {
@@ -490,10 +502,10 @@ const visitors = {
 
 			if (!node.metadata.has_template && !node.metadata.has_await) {
 				error(
-						'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,
-					);
+					'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,
+				);
 			}
 		}
 	},
@@ -599,9 +611,9 @@ const visitors = {
 				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;
+					node.metadata.scoped = true;
 				}
-		}
+			}
 		}
 
 		if (is_dom_element) {
@@ -756,12 +768,12 @@ const visitors = {
 		mark_control_flow_has_template(context.path);
 		context.next();
 	},
-	
- /**
-	* 
-	* @param {any} node 
-	* @param {any} context 
-	*/
+
+	/**
+	 * 
+	 * @param {any} node 
+	 * @param {any} context 
+	 */
 	AwaitExpression(node, context) {
 		if (is_inside_component(context)) {
 			if (context.state.metadata?.await === false) {
@@ -786,7 +798,7 @@ const visitors = {
 			}
 			parent_block.metadata.has_await = true;
 		}
-		
+
 		context.next();
 	},
 };

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

@@ -167,6 +167,7 @@ export function bindValue(maybe_tracked) {
 					value = [].map.call(select.querySelectorAll(query), get_option_value);
 				} else {
 					/** @type {HTMLOptionElement | null} */
+					// @ts-ignore
 					var selected_option =
 						select.querySelector(query) ??
 						// will fall back to first non-disabled option if no option is selected
@@ -184,6 +185,7 @@ export function bindValue(maybe_tracked) {
 				// Mounting and value undefined -> take selection from dom
 				if (mounting && value === undefined) {
 					/** @type {HTMLOptionElement | null} */
+					// @ts-ignore
 					var selected_option = select.querySelector(':checked');
 					if (selected_option !== null) {
 						value = get_option_value(selected_option);

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

@@ -1,5 +1,6 @@
 /** @import { Block, Component, Dependency, Derived, Tracked } from '#client' */
 
+import { DEV } from 'esm-env';
 import {
 	destroy_block,
 	destroy_non_branch_children,
@@ -138,13 +139,13 @@ export function run_teardown(block) {
  * @param {Derived} computed
  */
 function update_derived(computed) {
-	var value = computed.v;
+	var value = computed.__v;
 
 	if (value === UNINITIALIZED || is_tracking_dirty(computed.d)) {
 		value = run_derived(computed);
 
-		if (value !== computed.v) {
-			computed.v = value;
+		if (value !== computed.__v) {
+			computed.__v = value;
 			computed.c = increment_clock();
 		}
 	}
@@ -277,12 +278,23 @@ var empty_get_set = { get: undefined, set: undefined };
  */
 export function tracked(v, block, get, set) {
 	// TODO: now we expose tracked, we should likely block access in DEV somehow
+	if (DEV) {
+		return {
+			DO_NOT_ACCESS_THIS_OBJECT_DIRECTLY: true,
+			a: get || set ? { get, set } : empty_get_set,
+			b: block || active_block,
+			c: 0,
+			f: TRACKED,
+			__v: v,
+		};
+	}
+
 	return {
 		a: get || set ? { get, set } : empty_get_set,
 		b: block || active_block,
 		c: 0,
 		f: TRACKED,
-		v,
+		__v: v,
 	};
 }
 
@@ -294,6 +306,21 @@ export function tracked(v, block, get, set) {
  * @returns {Derived}
  */
 export function derived(fn, block, get, set) {
+	if (DEV) {
+		return {
+			DO_NOT_ACCESS_THIS_OBJECT_DIRECTLY: true,
+			a: get || set ? { get, set } : empty_get_set,
+			b: block || active_block,
+			blocks: null,
+			c: 0,
+			co: active_component,
+			d: null,
+			f: TRACKED | DERIVED,
+			fn,
+			__v: UNINITIALIZED,
+		};
+	}
+
 	return {
 		a: get || set ? { get, set } : empty_get_set,
 		b: block || active_block,
@@ -303,7 +330,7 @@ export function derived(fn, block, get, set) {
 		d: null,
 		f: TRACKED | DERIVED,
 		fn,
-		v: UNINITIALIZED,
+		__v: UNINITIALIZED,
 	};
 }
 
@@ -354,7 +381,7 @@ export function track_split(v, l, b) {
 			t = tracked(undefined, b);
 			exists = !!descriptors[key];
 			if (exists) {
-				t = define_property(t, 'v', descriptors[key]);
+				t = define_property(t, '__v', descriptors[key]);
 			}
 		}
 
@@ -468,7 +495,7 @@ export function async_computed(fn, block) {
 		} else {
 			for (var i = 0; i < deferred.length; i++) {
 				var tracked = deferred[i];
-				new_values.set(tracked, { v: tracked.v, c: tracked.c });
+				new_values.set(tracked, { v: tracked.__v, c: tracked.c });
 			}
 		}
 
@@ -476,11 +503,11 @@ export function async_computed(fn, block) {
 			if (parent && is_destroyed(/** @type {Block} */(parent))) {
 				return;
 			}
-			if (promise === current && t.v !== v) {
+			if (promise === current && t.__v !== v) {
 				restore();
 
-				if (t.v === UNINITIALIZED) {
-					t.v = v;
+				if (t.__v === UNINITIALIZED) {
+					t.__v = v;
 				} else {
 					set(t, v, block);
 				}
@@ -493,7 +520,7 @@ export function async_computed(fn, block) {
 					var tracked = deferred[i];
 					var stored = /** @type {{ v: any, c: number }} */ (new_values.get(tracked));
 					var { v, c } = stored;
-					tracked.v = v;
+					tracked.__v = v;
 					tracked.c = c;
 					schedule_update(tracked.b);
 				}
@@ -731,10 +758,10 @@ export function get_derived(computed) {
 	}
 	var get = computed.a.get;
 	if (get !== undefined) {
-		computed.v = trigger_track_get(get, computed.v);
+		computed.__v = trigger_track_get(get, computed.__v);
 	}
 
-	return computed.v;
+	return computed.__v;
 }
 
 /**
@@ -755,7 +782,7 @@ export function get(tracked) {
  * @param {Tracked} tracked
  */
 export function get_tracked(tracked) {
-	var value = tracked.v;
+	var value = tracked.__v;
 	if (tracking) {
 		register_dependency(tracked);
 	}
@@ -791,7 +818,7 @@ export function set(tracked, value, block) {
 		);
 	}
 
-	var old_value = tracked.v;
+	var old_value = tracked.__v;
 
 	if (value !== old_value) {
 		var tracked_block = tracked.b;
@@ -809,7 +836,7 @@ export function set(tracked, value, block) {
 			value = untrack(() => set(value, old_value));
 		}
 
-		tracked.v = value;
+		tracked.__v = value;
 		tracked.c = increment_clock();
 		schedule_update(tracked_block);
 	}
@@ -991,7 +1018,7 @@ export function update(tracked, block, d = 1) {
  * @returns {void}
  */
 export function increment(tracked, block) {
-	set(tracked, tracked.v + 1, block);
+	set(tracked, tracked.__v + 1, block);
 }
 
 /**
@@ -1000,7 +1027,7 @@ export function increment(tracked, block) {
  * @returns {void}
  */
 export function decrement(tracked, block) {
-	set(tracked, tracked.v - 1, block);
+	set(tracked, tracked.__v - 1, block);
 }
 
 /**

package/src/runtime/internal/client/types.d.ts

@@ -18,14 +18,16 @@ export type Dependency = {
 };
 
 export type Tracked<V = any> = {
+	DO_NOT_ACCESS_THIS_OBJECT_DIRECTLY?: true;
 	a: { get?: Function, set?: Function };
 	b: Block;
 	c: number;
 	f: number;
-	v: V;
+	__v: V;
 };
 
 export type Derived = {
+	DO_NOT_ACCESS_THIS_OBJECT_DIRECTLY?: true;
 	a: { get?: Function, set?: Function };
 	b: Block;
 	blocks: null | Block[];
@@ -34,7 +36,7 @@ export type Derived = {
 	d: null;
 	f: number;
 	fn: Function;
-	v: any;
+	__v: any;
 };
 
 export type Block = {

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

@@ -62,7 +62,9 @@ class Output {
 /** @type {render} */
 export async function render(component) {
 	const output = new Output(null);
-	let head, body, css;
+	let head = '';
+	let body = '';
+	let css = new Set();
 
 	try {
 		if (component.async) {

package/src/runtime/proxy.js

@@ -40,6 +40,7 @@ export function proxy(value, block) {
     return value;
   }
 
+  /** @type {Map<any,Tracked>} */
   var tracked_elements = new Map();
   var is_proxied_array = is_array(value);
   /** @type {Tracked} */
@@ -97,8 +98,8 @@ export function proxy(value, block) {
       var t = tracked_elements.get(prop);
       var exists = prop in target;
 
-      if (is_proxied_array && prop === 'length') {
-        for (var i = value; i < t.v; i += 1) {
+      if (is_proxied_array && prop === 'length' && t !== undefined) {
+        for (var i = value; i < t.__v; i += 1) {
           var other_t = tracked_elements.get(i + '');
           if (other_t !== undefined) {
             set(other_t, UNINITIALIZED, block);
@@ -124,7 +125,7 @@ export function proxy(value, block) {
           tracked_elements.set(prop, t);
         }
       } else {
-        exists = t.v !== UNINITIALIZED;
+        exists = t.__v !== UNINITIALIZED;
 
         set(t, value, block);
       }
@@ -143,7 +144,7 @@ export function proxy(value, block) {
         // will not cause the length to be out of sync.
         var n = Number(prop);
 
-        if (Number.isInteger(n) && n >= tracked_len.v) {
+        if (Number.isInteger(n) && n >= tracked_len.__v) {
           set(tracked_len, n + 1, block);
         }
       }
@@ -180,7 +181,7 @@ export function proxy(value, block) {
       }
 
       var t = tracked_elements.get(prop);
-      var exists = (t !== undefined && t.v !== UNINITIALIZED) || Reflect.has(target, prop);
+      var exists = (t !== undefined && t.__v !== UNINITIALIZED) || Reflect.has(target, prop);
 
       if (t !== undefined || !exists || get_descriptor(target, prop)?.writable) {
         if (t === undefined) {
@@ -229,11 +230,11 @@ export function proxy(value, block) {
     ownKeys(target) {
       var own_keys = Reflect.ownKeys(target).filter((key) => {
         var t = tracked_elements.get(key);
-        return t === undefined || t.v !== UNINITIALIZED;
+        return t === undefined || t.__v !== UNINITIALIZED;
       });
 
       for (var [key, t] of tracked_elements) {
-        if (t.v !== UNINITIALIZED && !(key in target)) {
+        if (t.__v !== UNINITIALIZED && !(key in target)) {
           own_keys.push(key);
         }
       }
@@ -249,7 +250,7 @@ export function proxy(value, block) {
         if (t) descriptor.value = get(t);
       } else if (descriptor === undefined) {
         var t = tracked_elements.get(prop);
-        var value = t?.v;
+        var value = t?.__v;
 
         if (t !== undefined && value !== UNINITIALIZED) {
           return {