@torpor/view 0.2.0 → 0.3.1

package/src/types/Template.ts

@@ -1,11 +1,12 @@
-import { type Import } from "../compile/types/Import";
-import { type TemplateComponent } from "./TemplateComponent";
+import type Import from "../compile/types/Import";
+import type ScriptChunk from "../compile/types/ScriptChunk";
+import type TemplateComponent from "./TemplateComponent";
 
 /**
  * The template for a component file, consisting of parts like script, markup and styles
  */
-export type Template = {
+export default interface Template {
 	imports: Import[];
-	script: string;
+	script: ScriptChunk[];
 	components: TemplateComponent[];
-};
+}

package/src/types/TemplateComponent.ts

@@ -1,20 +1,22 @@
-import { type RootNode } from "../compile/types/nodes/RootNode";
-import { type Style } from "../compile/types/styles/Style";
+import type RootNode from "../compile/types/nodes/RootNode";
+import type Style from "../compile/types/styles/Style";
 
-export type TemplateComponent = {
+export default interface TemplateComponent {
 	start?: number;
 	/** The component's name */
 	name?: string;
-	/** Whether the component is defined in a default function */
+	/** Whether the component is defined with a default function */
 	default?: boolean;
 	/** Params declared by the user in the component's function */
 	params?: string;
 	markup?: RootNode;
+	head?: RootNode;
 	style?: Style;
 	/** $props that are used in the component's function */
 	props?: string[];
 	/** $context props that are used in the component's function */
 	contextProps?: string[];
+	needsContext?: boolean;
 	/** $slot props that are used in the component's function */
 	slotProps?: string[];
-};
+}

package/src/types/WatchOptions.ts

@@ -1,3 +1,9 @@
-export type WatchOptions = {
+/**
+ * Options for $watch.
+ */
+export default interface WatchOptions {
+	/**
+	 * Only watch top-level properties, don't recursively watch children.
+	 */
 	shallow?: boolean;
-};
+}

package/src/types/constants.ts

@@ -0,0 +1,14 @@
+/**
+ * The type of a Signal object.
+ */
+export const SIGNAL_TYPE = 0;
+
+/**
+ * The type of a Computed object.
+ */
+export const COMPUTED_TYPE = 1;
+
+/**
+ * The type of an Effect object.
+ */
+export const EFFECT_TYPE = 2;

package/src/watch/batchEnd.ts

@@ -0,0 +1,17 @@
+import context from "../render/context";
+import triggerEffects from "./triggerEffects";
+
+export default function batchEnd(): void {
+	if (context.batch > 1) {
+		context.batch--;
+		return;
+	}
+
+	try {
+		triggerEffects();
+	} finally {
+		context.batch = 0;
+		context.batchOperation = 0;
+		context.previousEffect = null;
+	}
+}

package/src/watch/batchStart.ts

@@ -0,0 +1,5 @@
+import context from "../render/context";
+
+export default function batchStart(): void {
+	context.batch++;
+}

package/src/watch/checkComputed.ts

@@ -0,0 +1,46 @@
+import type Computed from "../types/Computed";
+import type Subscription from "../types/Subscription";
+import checkSources from "./checkSources";
+import clearSources from "./clearSources";
+import deactivateSources from "./deactivateSources";
+import runComputed from "./runComputed";
+
+/**
+ * Checks whether a Computed value should be re-run (which will be true if any
+ * of its sources have changed) and re-runs it if necessary.
+ */
+export default function checkComputed(computed: Computed): boolean {
+	let rerun = checkSources(computed);
+
+	let changed = false;
+
+	if (rerun) {
+		// Set source subscriptions to inactive
+		deactivateSources(computed);
+
+		// Run the computed, which will reset subscriptions
+		const oldValue = computed.value;
+		runComputed(computed);
+		changed = computed.value !== oldValue;
+
+		// Clear unused source subscriptions
+		clearSources(computed);
+	}
+
+	computed.recalc = false;
+
+	// If it hasn't changed, all of its target subscriptions remain active and
+	// don't need to be recalculated
+	if (!changed) {
+		for (
+			let targetSub: Subscription | null = computed.firstTarget;
+			targetSub !== null;
+			targetSub = targetSub.nextTarget
+		) {
+			targetSub.active = true;
+			targetSub.recalc = false;
+		}
+	}
+
+	return changed;
+}

package/src/watch/checkEffect.ts

@@ -0,0 +1,30 @@
+import type Effect from "../types/Effect";
+import checkSources from "./checkSources";
+import clearSources from "./clearSources";
+import deactivateSources from "./deactivateSources";
+import runCleanups from "./runCleanups";
+import runEffect from "./runEffect";
+
+/**
+ * Checks whether an Effect should be re-run (which will be true if any
+ * of its sources have changed) and re-runs it if necessary.
+ */
+export default function checkEffect(effect: Effect): void {
+	//console.log(`checking effect '${effect.name}'`);
+
+	let rerun = checkSources(effect);
+
+	if (rerun) {
+		// Run cleanup functions for the effect and its children
+		runCleanups(effect);
+
+		// Set source subscriptions to inactive
+		deactivateSources(effect);
+
+		// Run the effect, which will reset subscriptions
+		runEffect(effect);
+
+		// Clear unused source subscriptions
+		clearSources(effect);
+	}
+}

package/src/watch/checkSources.ts

@@ -0,0 +1,63 @@
+import context from "../render/context";
+import type Computed from "../types/Computed";
+import type Effect from "../types/Effect";
+import type Subscription from "../types/Subscription";
+import { COMPUTED_TYPE, SIGNAL_TYPE } from "../types/constants";
+import checkComputed from "./checkComputed";
+
+// RECURSIVE
+
+/**
+ * Checks whether a Computed or Effect should be re-run (which will be true if
+ * any of its sources have changed).
+ */
+export default function checkSources(target: Computed | Effect): boolean {
+	// NOTE: We bail early if we know the target needs to be re-run; subsequent
+	// computed values will be computed in the proxy getter
+
+	// Check signals first as it's cheap, then computed values
+	let haveComputed = false;
+
+	for (
+		let sourceSub: Subscription | null = target.firstSource;
+		sourceSub !== null;
+		sourceSub = sourceSub.nextSource
+	) {
+		//console.log(`checking source sub '${sourceSub.source.name}' (${sourceSub.name})`);
+		if (sourceSub.recalc) {
+			if (sourceSub.source.type === SIGNAL_TYPE) {
+				return true;
+			} /* else if (sourceSub.source.type === COMPUTED_TYPE) */ else {
+				if (sourceSub.source.recalc) {
+					haveComputed = true;
+				} else {
+					return true;
+				}
+			}
+		}
+	}
+
+	if (haveComputed) {
+		for (
+			let sourceSub: Subscription | null = target.firstSource;
+			sourceSub !== null;
+			sourceSub = sourceSub.nextSource
+		) {
+			//console.log(`checking source sub '${sourceSub.source.name}' (${sourceSub.name})`);
+			if (sourceSub.recalc && sourceSub.source.type === COMPUTED_TYPE && sourceSub.source.recalc) {
+				const oldActiveTarget = context.activeTarget;
+				context.activeTarget = target;
+
+				const recalc = checkComputed(sourceSub.source);
+
+				context.activeTarget = oldActiveTarget;
+
+				if (recalc) {
+					return true;
+				}
+			}
+		}
+	}
+
+	return false;
+}

package/src/watch/clearSources.ts

@@ -0,0 +1,39 @@
+import type Computed from "../types/Computed";
+import type Effect from "../types/Effect";
+import type Subscription from "../types/Subscription";
+
+/**
+ * Clear unused source subscriptions after each Computed or Effect has been run.
+ */
+export default function clearSources(target: Computed | Effect): void {
+	let previousSub: Subscription | null = null;
+	for (
+		let clearSub: Subscription | null = target.firstSource;
+		clearSub !== null;
+		clearSub = clearSub.nextSource
+	) {
+		if (target.didError || !clearSub.active) {
+			//console.log(
+			//	`clearing source sub ${clearSub.source.name} <-> ${clearSub.target.name} (${clearSub.name})`,
+			//);
+			if (previousSub === null) {
+				target.firstSource = clearSub.nextSource;
+			} else {
+				previousSub.nextSource = clearSub.nextSource;
+			}
+
+			// Update the targets list too
+			if (clearSub.previousTarget === null) {
+				if (clearSub.source.firstTarget === clearSub) {
+					clearSub.source.firstTarget = clearSub.nextTarget;
+				}
+				// TODO: else???
+			} else {
+				clearSub.previousTarget.nextTarget = clearSub.nextTarget;
+			}
+		} else {
+			clearSub.recalc = false;
+			previousSub = clearSub;
+		}
+	}
+}

package/src/watch/clearTargets.ts

@@ -0,0 +1,28 @@
+import type Computed from "../types/Computed";
+import type ProxySignal from "../types/ProxySignal";
+import type Subscription from "../types/Subscription";
+
+/**
+ * Clear unused target subscriptions after all Effects have been run.
+ */
+export default function clearTargets(source: ProxySignal | Computed): void {
+	let previousSub: Subscription | null = null;
+	for (
+		let clearSub: Subscription | null = source.firstTarget;
+		clearSub !== null;
+		clearSub = clearSub.nextTarget
+	) {
+		if (!clearSub.active) {
+			//console.log(
+			//	`clearing target sub ${clearSub.source.name} <-> ${clearSub.target.name} (${clearSub.name})`,
+			//);
+			if (previousSub === null) {
+				source.firstTarget = clearSub.nextTarget;
+			} else {
+				previousSub.nextTarget = clearSub.nextTarget;
+			}
+		} else {
+			previousSub = clearSub;
+		}
+	}
+}

package/src/watch/deactivateSources.ts

@@ -0,0 +1,19 @@
+import type Computed from "../types/Computed";
+import type Effect from "../types/Effect";
+import type Subscription from "../types/Subscription";
+
+/**
+ * Sets source subscriptions to inactive for a Computed or Effect.
+ */
+export default function deactivateSources(target: Computed | Effect): void {
+	for (
+		let sourceSub: Subscription | null = target.firstSource;
+		sourceSub !== null;
+		sourceSub = sourceSub.nextSource
+	) {
+		sourceSub.active = false;
+		//console.log(
+		//	`deactivating ${sourceSub.source.name} <-> ${sourceSub.target.name} (${sourceSub.name})`,
+		//);
+	}
+}

package/src/watch/proxyGet.ts

@@ -1,75 +1,130 @@
 import $watch from "../render/$watch";
 import context from "../render/context";
-import { type ProxyData } from "../types/ProxyData";
+import type Computed from "../types/Computed";
+import type ProxyData from "../types/ProxyData";
+import { COMPUTED_TYPE, SIGNAL_TYPE } from "../types/constants";
+import checkComputed from "./checkComputed";
 import { proxyDataSymbol } from "./symbols";
 import trackEffect from "./trackEffect";
-import triggerEffects from "./triggerEffects";
+import trackProxyEffect from "./trackProxyEffect";
+import updateSignal from "./updateSignal";
 
 export default function proxyGet(
 	target: Record<PropertyKey, any>,
 	key: PropertyKey,
 	receiver: any,
-	data: ProxyData,
 ): any {
+	let data: ProxyData = target[proxyDataSymbol];
+
 	if (key === proxyDataSymbol) {
 		return data;
 	}
 
-	//console.log(`object get '${String(prop)}' on`, target);
-
-	// Set the value to a new proxy if it's an object
-	// But not if it's a Promise (i.e. has a `then` method)
-	if (!data.propData.has(key)) {
-		if (!data.shallow) {
-			let value = target[key];
-			if (value && typeof value === "object" && !value[proxyDataSymbol] && !value.then) {
-				target[key] = $watch(value);
-			}
-		}
-		data.propData.set(key, null);
-	}
+	//console.log(`object get '${String(key)}' on`, target);
+	//console.log(`object get '${String(key)}'`);
 
-	// From https://stackoverflow.com/a/54136394
-	// PERF: Because we know what methods are being called, we could potentially run them manually
-	//       on DOM nodes (i.e. if it's a splice, we know which to remove and add etc)
-	if (data.isArray) {
-		if (
-			key === "pop" ||
-			key === "push" ||
-			key === "reverse" ||
-			key === "shift" ||
-			key === "sort" ||
-			key === "splice" ||
-			key === "unshift"
-		) {
-			// Get the array method
-			const targetFunction: Function = target[key];
+	let signal = data.signals.get(key);
+	if (signal === undefined) {
+		const propDescriptor = Object.getOwnPropertyDescriptor(target, key);
+		if (propDescriptor !== undefined) {
+			if (propDescriptor.writable) {
+				// Setup data for the property
+				if (data.shallow !== true) {
+					// Set the value to a new proxy if it's an object
+					const value = target[key];
+					if (
+						value !== undefined &&
+						value !== null &&
+						typeof value === "object" &&
+						value[proxyDataSymbol] === undefined &&
+						// But not if it's a Promise (i.e. has a `then` method)
+						value.then === undefined
+					) {
+						target[key] = $watch(value);
+					}
+				}
 
-			// Run the array method
-			return function (...args: any[]) {
-				targetFunction.apply(target, args);
+				// If a property is being accessed in the course of setting up an
+				// effect, track it
+				trackProxyEffect(data, key);
+			} else if (propDescriptor.get) {
+				// OK, we're only checking for computed values if it's read-only for
+				// now, but we probably need to check any getter's value -- e.g. the
+				// user may wish to add a setter to optimistically set a value, have
+				// the UI update, then set the value concretely later (e.g. if
+				// updating a `count` via a fetch)
 
-				// If this array has change functions, call them now via the
-				// length property, which gets accessed in most functions
-				triggerEffects(data, "length");
-			};
-		} else if (key === Symbol.iterator) {
-			// HACK: This prevents lists being re-run on every random property
-			// access by disabling the active effect before properties get
-			// accessed. I'm not sure if this is the best way to achieve this...
-			trackEffect(data, "length");
-			context.activeEffect = null;
+				const oldRegisterComputed = context.registerComputed;
+				try {
+					// Allow calling `$cache` to assign the computed to a proxy
+					// signal
+					context.registerComputed = (computed: Computed) => {
+						data.signals.set(key, computed);
+					};
+					return Reflect.get(target, key, receiver);
+				} finally {
+					context.registerComputed = oldRegisterComputed;
+				}
+			}
+		} else if (data.isArray) {
+			// If it's a function in an array, we may intercept it
+			if (arrayWrapper[key] !== undefined) {
+				return arrayWrapper[key](data, target, key);
+			}
+		}
+	} else if (signal.type === SIGNAL_TYPE) {
+		// If a property is being accessed in the course of setting up an
+		// effect, track it
+		trackProxyEffect(data, key);
+	} else if (signal.type === COMPUTED_TYPE) {
+		if (signal.running) {
+			throw new Error("Cycle detected");
+		} else if (signal.recalc) {
+			// If a signal that the computed depends on has been changed,
+			// but the computed hasn't yet been read, it may need to be
+			// re-computed
+			checkComputed(signal);
+		} else if (signal.didError) {
+			// If there was a previous error, and no dependencies have
+			// changed, throw the error again
+			throw signal.value;
 		} else {
-			// If this property is being accessed in the course of setting up an effect, track it
-			// TODO: Only if it's a property and not a function?
-			trackEffect(data, key);
+			trackEffect(signal);
 		}
-	} else {
-		// If this property is being accessed in the course of setting up an effect, track it
-		// TODO: Only if it's a property and not a function?
-		trackEffect(data, key);
+		return signal.value;
 	}
 
 	// Return the property value
 	return Reflect.get(target, key, receiver);
 }
+
+// Prevent array functions from calling functions and properties in breakable
+// ways (e.g. calling splice sets length before adding items)
+const arrayWrapper: Record<PropertyKey, any> = {
+	[Symbol.iterator]: function (data: ProxyData, target: any, key: PropertyKey) {
+		trackProxyEffect(data, "length");
+		// HACK: This prevents lists being re-run on every random property
+		// access by disabling the active effect before properties get
+		// accessed. I'm not sure if this is the best way to achieve this...
+		context.activeTarget = null;
+		return target[key];
+	},
+	pop: arrayHandle,
+	push: arrayHandle,
+	reverse: arrayHandle,
+	shift: arrayHandle,
+	sort: arrayHandle,
+	splice: arrayHandle,
+	unshift: arrayHandle,
+};
+
+function arrayHandle(data: ProxyData, target: any, key: PropertyKey): Function {
+	// Call the function on the target (so proxy properties don't get
+	// intercepted) and trigger effects that depend on `length`
+	return function (...args: any[]) {
+		const func = target[key];
+		const result = func.apply(target, args);
+		updateSignal(data, "length");
+		return result;
+	};
+}

package/src/watch/proxySet.ts

@@ -1,41 +1,45 @@
 import $watch from "../render/$watch";
-import { type ProxyData } from "../types/ProxyData";
+import context from "../render/context";
 import { proxyDataSymbol } from "./symbols";
-import transferEffects from "./transferEffects";
-import triggerEffects from "./triggerEffects";
+//import transferEffects from "./transferEffects";
+import updateSignal from "./updateSignal";
 
 export default function proxySet(
 	target: Record<PropertyKey, any>,
 	key: PropertyKey,
 	value: any,
 	receiver: any,
-	data: ProxyData,
-) {
-	//console.log(`object set '${String(prop)}' to '`, value, `' on`, target);
+): boolean {
+	//console.log(`object set '${String(key)}' to '`, value, `' on`, target);
+	//console.log(`object set '${String(key)}'`);
 
 	// Only do things if the value has changed
 	const oldValue = target[key];
 	if (value !== oldValue) {
-		let newValue = value;
+		if (context.batchOperation > 100) {
+			throw new Error("Cycle detected");
+		}
+
+		let data = target[proxyDataSymbol];
 
 		// If the value was previously a proxy, watch the new value and update
 		// its effect subscriptions
-		if (oldValue && oldValue[proxyDataSymbol]) {
-			newValue = $watch(value);
-			transferEffects(oldValue, newValue);
+		if (oldValue && oldValue[proxyDataSymbol] !== undefined) {
+			value = $watch(value, { shallow: oldValue[proxyDataSymbol].shallow });
+			//transferEffects(oldValue, newValue);
 		}
 
 		// Set the property value on the target
-		Reflect.set(target, key, newValue, receiver);
+		Reflect.set(target, key, value, receiver);
 
 		// Re-run effects
-		triggerEffects(data, key);
+		updateSignal(data, key);
 
 		// If an item in an array is being set directly, trigger the length to
 		// cause any lists to be re-run and data re-bound
 		// TODO: Can we update the single item's data directly somehow?
 		if (data.isArray && !isNaN(+String(key))) {
-			triggerEffects(data, "length");
+			updateSignal(data, "length");
 		}
 	}
 

package/src/watch/runCleanups.ts

@@ -0,0 +1,40 @@
+import context from "../render/context";
+import type Effect from "../types/Effect";
+import clearSources from "./clearSources";
+
+/**
+ * Runs cleanup functions for the effect and its children.
+ */
+export default function runCleanups(effect: Effect): void {
+	let effectToClean: Effect | null = effect;
+	for (let i = 0; i < effect.extent; i++) {
+		if (typeof effectToClean.cleanup === "function") {
+			//console.log(`cleaning effect '${effectToClean.name}'`);
+			const oldActiveTarget = context.activeTarget;
+			context.activeTarget = null;
+
+			try {
+				effectToClean.cleanup();
+			} catch (err) {
+				effectToClean.didError = true;
+				clearSources(effectToClean);
+				throw err;
+			} finally {
+				effectToClean.cleanup = undefined;
+				context.activeTarget = oldActiveTarget;
+			}
+		}
+
+		const nextEffect: Effect = effectToClean.nextEffect!;
+
+		// If it's a child effect that has been triggered, clean it up
+		// and remove it from the list of effects to run (it may get
+		// re-created with the parent)
+		if (i !== 0 && effect.nextEffectToRun === effectToClean) {
+			effect.nextEffectToRun = effectToClean.nextEffectToRun;
+			effectToClean.nextEffect = effectToClean.nextEffectToRun = null;
+		}
+
+		effectToClean = nextEffect;
+	}
+}

package/src/watch/runComputed.ts

@@ -0,0 +1,36 @@
+import context from "../render/context";
+import type Computed from "../types/Computed";
+import trackEffect from "./trackEffect";
+
+export default function runComputed<T>(computed: Computed<T>): T {
+	//console.log(`running computed '${computed.name}'`);
+
+	// Store the active target
+	const oldActiveTarget = context.activeTarget;
+
+	computed.running = true;
+	computed.didError = false;
+
+	try {
+		// Set the active target, so that any properties accessed while running it
+		// will trigger it in future
+		context.activeTarget = computed;
+
+		// Run the computed and gather its dependencies
+		computed.value = computed.run();
+	} catch (err) {
+		computed.didError = true;
+		// @ts-ignore
+		computed.value = err;
+		throw err;
+	} finally {
+		// Set the active target back to what it was previously
+		context.activeTarget = oldActiveTarget;
+
+		computed.running = false;
+	}
+
+	trackEffect(computed);
+
+	return computed.value;
+}