@torpor/view 0.2.0 → 0.3.1

package/src/render/runListItems.ts

@@ -23,11 +23,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { type ListItem } from "../types/ListItem";
-import { type Range } from "../types/Range";
+import type ListItem from "../types/ListItem";
+import type Range from "../types/Range";
 import $watch from "./$watch";
 import clearRange from "./clearRange";
-import context from "./context";
 import moveRange from "./moveRange";
 
 /**
@@ -44,7 +43,8 @@ export default function runListItems(
 	anchor: Node | null,
 	oldItems: ListItem[],
 	newItems: ListItem[],
-	create: (data: ListItem, before: Node | null) => void,
+	create: (item: ListItem, before: Node | null) => void,
+	update: (oldItem: ListItem, newItem: ListItem) => void,
 ): void {
 	let oldStartIndex = 0;
 	let oldEndIndex = oldItems.length - 1;
@@ -60,34 +60,34 @@ export default function runListItems(
 	let newKeyToIndex: Map<any, number> | undefined;
 
 	while (oldStartIndex <= oldEndIndex && newStartIndex <= newEndIndex) {
-		if (oldStartItem == null) {
+		if (oldStartItem === null) {
 			oldStartItem = oldItems[++oldStartIndex];
-		} else if (oldEndItem == null) {
+		} else if (oldEndItem === null) {
 			oldEndItem = oldItems[--oldEndIndex];
-		} else if (newStartItem == null) {
+		} else if (newStartItem === null) {
 			newStartItem = newItems[++newStartIndex];
-		} else if (newEndItem == null) {
+		} else if (newEndItem === null) {
 			newEndItem = newItems[--newEndIndex];
 		} else if (oldStartItem.key === newStartItem.key) {
-			transferRangeMarkers(oldStartItem, newStartItem);
+			transferListItemData(oldStartItem, newStartItem, update);
 			oldStartItem = oldItems[++oldStartIndex];
 			newStartItem = newItems[++newStartIndex];
 		} else if (oldEndItem.key === newEndItem.key) {
-			transferRangeMarkers(oldEndItem, newEndItem);
+			transferListItemData(oldEndItem, newEndItem, update);
 			oldEndItem = oldItems[--oldEndIndex];
 			newEndItem = newItems[--newEndIndex];
 		} else if (oldStartItem.key === newEndItem.key) {
 			// Move to the end
 			//console.log("move", oldStartItem.key, "to the end");
-			moveRange(parent, oldStartItem, oldEndItem.endNode?.nextSibling!);
-			transferRangeMarkers(oldStartItem, newEndItem);
+			moveRange(parent, oldStartItem, oldEndItem.endNode!.nextSibling!);
+			transferListItemData(oldStartItem, newEndItem, update);
 			oldStartItem = oldItems[++oldStartIndex];
 			newEndItem = newItems[--newEndIndex];
 		} else if (oldEndItem.key === newStartItem.key) {
 			// Move to the start
 			//console.log("move", oldEndItem.key, "to the start");
-			moveRange(parent, oldEndItem, oldStartItem?.startNode);
-			transferRangeMarkers(oldEndItem, newStartItem);
+			moveRange(parent, oldEndItem, oldStartItem!.startNode);
+			transferListItemData(oldEndItem, newStartItem, update);
 			oldEndItem = oldItems[--oldEndIndex];
 			newStartItem = newItems[++newStartIndex];
 		} else {
@@ -95,7 +95,7 @@ export default function runListItems(
 			// They are relevant only if there has been a move, or a mid-list
 			// insertion or deletion, and not if there has been an insertion
 			// at the end or deletion from the front
-			if (!oldKeyToIndex || !newKeyToIndex) {
+			if (oldKeyToIndex === undefined || newKeyToIndex === undefined) {
 				oldKeyToIndex = new Map();
 				for (let i = oldStartIndex; i < oldEndIndex; i++) {
 					oldKeyToIndex.set(oldItems[i].key, i);
@@ -112,34 +112,31 @@ export default function runListItems(
 			if (oldIndex === undefined && newIndex === undefined) {
 				// Replace
 				//console.log("replace", oldStartItem.key, "with", newStartItem.key);
-				newStartItem.data = $watch(newStartItem.data);
+				newStartItem.data = $watch(newStartItem.data, { shallow: true });
 				create(newStartItem, oldStartItem.startNode);
+				newStartItem.previousRange = oldStartItem.previousRange;
+				newStartItem.nextRange = oldStartItem;
+				oldStartItem.previousRange = newStartItem;
 				clearRange(oldStartItem);
-				// @ts-ignore We know we have an active range (the for loop) and that it
-				// has children (because we're replacing one)
-				context.activeRange.children.splice(oldStartIndex, 1);
 				oldStartItem = oldItems[++oldStartIndex];
 				newStartItem = newItems[++newStartIndex];
 			} else if (oldIndex === undefined) {
 				// Insert
 				//console.log("insert", newStartItem.key);
-				newStartItem.data = $watch(newStartItem.data);
+				newStartItem.data = $watch(newStartItem.data, { shallow: true });
 				create(newStartItem, oldStartItem.startNode);
 				newStartItem = newItems[++newStartIndex];
 			} else if (newIndex === undefined) {
 				// Delete
 				//console.log("delete", oldStartItem.key);
 				clearRange(oldStartItem);
-				// @ts-ignore We know we have an active range (the for loop) and that it
-				// has children (because we're deleting one)
-				context.activeRange.children.splice(oldStartIndex, 1);
 				oldStartItem = oldItems[++oldStartIndex];
 			} else {
 				// Move
 				//console.log("move", newStartItem.key, "before", oldStartItem.key);
 				const oldData = oldItems[oldIndex];
 				moveRange(parent, oldData, oldStartItem.startNode);
-				transferRangeMarkers(oldData, newStartItem);
+				transferListItemData(oldData, newStartItem, update);
 				// @ts-ignore TODO: Set key null instead?
 				oldItems[oldIndex] = null;
 				newStartItem = newItems[++newStartIndex];
@@ -151,36 +148,39 @@ export default function runListItems(
 		if (oldStartIndex > oldEndIndex) {
 			// The old list is exhausted; process new list additions
 			// HACK: I think it would be better to move anchors to the end?
-			let before: Node | null =
-				oldStartItem?.startNode || oldItems[oldItems.length - 1]?.endNode?.nextSibling || anchor;
+			let before =
+				oldStartItem?.startNode ?? oldItems[oldItems.length - 1]?.endNode?.nextSibling ?? anchor;
 			for (newStartIndex; newStartIndex <= newEndIndex; newStartItem = newItems[++newStartIndex]) {
 				//console.log("create", newStartItem.key);
-				newStartItem.data = $watch(newStartItem.data);
-				create(newStartItem, before!);
-				before = newStartItem.endNode?.nextSibling!;
+				newStartItem.data = $watch(newStartItem.data, { shallow: true });
+				create(newStartItem, before);
+				before = newStartItem.endNode!.nextSibling;
 			}
 		} else {
 			// The new list is exhausted; process old list removals
-			// Just truncate the parent range's children collection
-			if (range.children) {
-				range.children.length = oldStartIndex;
-			}
-			for (oldStartIndex; oldStartIndex <= oldEndIndex; oldStartItem = oldItems[++oldStartIndex]) {
+			for (oldEndIndex; oldEndIndex >= oldStartIndex; oldStartItem = oldItems[oldEndIndex--]) {
 				//console.log("clear", oldStartItem.key);
 				clearRange(oldStartItem);
 			}
 		}
 	}
+
+	if (newItems.length > 0) {
+		range.nextRange = newItems[0];
+	} else if (oldItems.length > 0) {
+		range.nextRange = oldItems[oldItems.length - 1].nextRange;
+	}
 }
 
-function transferRangeMarkers(oldItem: ListItem, newItem: ListItem) {
+function transferListItemData(
+	oldItem: ListItem,
+	newItem: ListItem,
+	update: (oldItem: ListItem, newItem: ListItem) => void,
+) {
 	newItem.startNode = oldItem.startNode;
 	newItem.endNode = oldItem.endNode;
-
 	// Manually transfer the new data's props to the old ones (to run effects)
 	// and then set the new data to the old one
-	for (let prop in oldItem.data) {
-		oldItem.data[prop] = newItem.data[prop];
-	}
+	update(oldItem, newItem);
 	newItem.data = oldItem.data;
 }

package/src/render/setAttribute.ts

@@ -1,5 +1,5 @@
 export default function setAttribute(el: Element, name: string, value: any): void {
-	if (value === false || value == null) {
+	if (value === false || value === undefined || value === null) {
 		el.removeAttribute(name);
 	} else {
 		el.setAttribute(name, value);

package/src/render/setDynamicElement.ts

@@ -1,10 +1,10 @@
 import context from "./context";
 
-// TODO: Should we @toggle this instead? That would call :onmount etc again for the new element
+// TODO: Should we @toggle this instead? That would call onmount etc again for the new element
 
 export default function setDynamicElement(el: HTMLElement, tag: string): HTMLElement {
 	// If hydrating, it should already have been created as the correct element
-	if (context.hydrationNode) {
+	if (context.hydrationNode !== null) {
 		return el;
 	}
 

package/src/ssr.ts

@@ -1,3 +1,6 @@
+import $batch from "./render/$batch";
+import $cache from "./render/$cache";
+import $peek from "./render/$peek";
 import $mount from "./render/$serverMount";
 import $run from "./render/$serverRun";
 import $unwrap from "./render/$serverUnwrap";
@@ -6,8 +9,8 @@ import t_class from "./render/buildClasses";
 import t_style from "./render/buildStyles";
 import t_attr from "./render/formatAttributeText";
 import t_fmt from "./render/formatText";
-import { type ServerSlotRender } from "./types/ServerSlotRender";
+import type ServerSlotRender from "./types/ServerSlotRender";
 
-export { $watch, $unwrap, $run, $mount, t_fmt, t_attr, t_class, t_style };
+export { $watch, $cache, $run, $mount, $unwrap, $peek, $batch, t_fmt, t_attr, t_class, t_style };
 
 export type { ServerSlotRender };

package/src/types/Animation.ts

@@ -1,4 +1,4 @@
-export interface Animation {
+export default interface Animation {
 	keyframes: Keyframe[] | PropertyIndexedKeyframes;
 	options?: number | KeyframeAnimationOptions;
 }

package/src/types/BuildOptions.ts

@@ -1,8 +1,12 @@
-export type BuildOptions = {
+export default interface BuildOptions {
 	/**
 	 * Whether to create the component for server side rendering
 	 */
 	server?: boolean;
+	/**
+	 * Whether to create source maps.
+	 */
+	mapped?: boolean;
 	/**
 	 * If true, fragments will be built with calls to createElement etc. If
 	 * false, fragments will be built with innerHTML. Using createElement is a
@@ -14,4 +18,4 @@ export type BuildOptions = {
 	 * For internal testing and benchmarking
 	 */
 	renderFolder?: string;
-};
+}

package/src/types/Cleanup.ts

@@ -2,4 +2,6 @@
  * A function that may be returned from an effect, and is run before the effect
  * is run or destroyed
  */
-export type Cleanup = () => void;
+type Cleanup = () => void;
+
+export default Cleanup;

package/src/types/Component.ts

@@ -1,12 +1,14 @@
-import { type SlotRender } from "./SlotRender";
+import type SlotRender from "./SlotRender";
 
 /**
  * A component that can be mounted or hydrated
  */
-export type Component = (
+type Component = (
 	$parent: ParentNode,
 	$anchor: Node | null,
 	$props?: Record<PropertyKey, any>,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ) => void;
+
+export default Component;

package/src/types/Computed.ts

@@ -0,0 +1,62 @@
+import type Subscription from "./Subscription";
+import { COMPUTED_TYPE } from "./constants";
+
+/**
+ * A computed value that is lazily refreshed when accessed from an Effect or
+ * another Computed. Our computed values are implemented as property getter
+ * functions.
+ */
+export default interface Computed<T = any> {
+	/**
+	 * COMPUTED.
+	 */
+	type: typeof COMPUTED_TYPE;
+
+	/**
+	 * The cached, computed value.
+	 */
+	value: T;
+
+	/**
+	 * The getter function to run to access this computed's value.
+	 */
+	run: () => T;
+
+	/**
+	 * The first signal or computed that causes this effect to be run.
+	 */
+	firstSource: Subscription | null;
+
+	/**
+	 * The first computed or effect that is triggered when this property is changed.
+	 */
+	firstTarget: Subscription | null;
+
+	/**
+	 * Whether the computed may need to be recalculated (if any of its sources
+	 * have changed). We store this on the computed (as well as its
+	 * subscription) so we don't have to check the sources every time (which may
+	 * be expensive).
+	 */
+	recalc: boolean;
+
+	/**
+	 * Used to track cycles.
+	 */
+	running: boolean;
+
+	/**
+	 * True if the computed encountered an exception in its last run.
+	 */
+	didError: boolean;
+
+	/**
+	 * A subscription to roll back to when recursively updating signal targets.
+	 */
+	rollback: Subscription | null;
+
+	/**
+	 * The name of the computed property, for debugging.
+	 */
+	name?: string;
+}

package/src/types/Context.ts

@@ -0,0 +1,99 @@
+import type Animation from "./Animation";
+import type Cleanup from "./Cleanup";
+import type Computed from "./Computed";
+import type Effect from "./Effect";
+import type ProxySignal from "./ProxySignal";
+import type Range from "./Range";
+
+/**
+ * The global context for setting up effects and updating subscriptions.
+ */
+export default interface Context {
+	/**
+	 * The target (effect or computed value) that is currently being run.
+	 */
+	activeTarget: Computed | Effect | null;
+
+	/**
+	 * To set the next effect, we need to store the previous effect.
+	 */
+	previousEffect: Effect | null;
+
+	/**
+	 * The extent of the current effect's children.
+	 */
+	extent: number;
+
+	/**
+	 * The batch number. If 0, the batch will be flushed at the end of the operation.
+	 */
+	batch: number;
+
+	/**
+	 * Used to check for cycles if the number of operations in a single batch
+	 * goes past a threshold.
+	 */
+	batchOperation: number;
+
+	/**
+	 * A function to store a Computed when `$cache` is called in a property getter.
+	 */
+	registerComputed: ((computed: Computed) => void) | null;
+
+	/**
+	 * The first effect to run, either immediately or when the batch is finished.
+	 */
+	firstEffectToRun: Effect | null;
+
+	/**
+	 * The first signal to update, either immediately or when the batch is finished.
+	 */
+	firstSignalToUpdate: ProxySignal | null;
+
+	/**
+	 * The range that is currently being created.
+	 */
+	activeRange: Range;
+
+	/**
+	 * The range that was previously created, for setting range navigation.
+	 */
+	previousRange: Range;
+
+	/**
+	 * The root range of the current UI, for debugging.
+	 */
+	rootRange: Range;
+
+	/**
+	 * Functions that were run via $mount, which should be collected and flushed
+	 * when the component has been mounted in the DOM
+	 */
+	mountEffects: (() => Cleanup | void)[];
+
+	/**
+	 * Events which should be added when their element has been mounted in the
+	 * DOM
+	 */
+	stashedEvents: {
+		range: Range;
+		el: Element;
+		type: string;
+		listener: (this: Element, ev: any) => any;
+	}[];
+
+	/**
+	 * Animations which should be added when their element has been mounted in
+	 * the DOM
+	 */
+	stashedAnimations: {
+		range: Range;
+		el: HTMLElement;
+		in?: Animation;
+		out?: Animation;
+	}[];
+
+	/** The node that is actively being hydrated. */
+	hydrationNode: ChildNode | null;
+	////hn: ChildNode | null;
+}

package/src/types/Effect.ts

@@ -1,18 +1,54 @@
-import { type Cleanup } from "./Cleanup";
-import { type ProxyPropData } from "./ProxyPropData";
+import type Cleanup from "./Cleanup";
+import type Subscription from "./Subscription";
+import { EFFECT_TYPE } from "./constants";
 
 /**
  * An effect that is run and re-run when the properties it depends on change.
  */
-export type Effect = {
+export default interface Effect {
+	/**
+	 * EFFECT.
+	 */
+	type: typeof EFFECT_TYPE;
+
+	/**
+	 *
+	 * @returns An optional cleanup function, to run when the effect is re-run or disposed.
+	 */
 	run: () => Cleanup | void;
-	cleanup: Cleanup | null;
 
 	/**
-	 * Store the properties that this effect depends on, so that when a range is
-	 * cleared, the effect can be removed from those properties
+	 * The optional cleanup function that may have been returned from the run function.
 	 */
-	props: ProxyPropData[] | null;
+	cleanup: Cleanup | void;
 
-	active: boolean;
-};
+	/**
+	 * The first signal or computed that causes this effect to be run.
+	 */
+	firstSource: Subscription | null;
+
+	/*
+	 * The effect that is run after this one, which may be a sibling or child.
+	 */
+	nextEffect: Effect | null;
+
+	/**
+	 * The number of children of this effect.
+	 */
+	extent: number;
+
+	/**
+	 * When signals have been changed, this is the next dependent effect to run.
+	 */
+	nextEffectToRun: Effect | null;
+
+	/**
+	 * True if the effect encountered an exception in its last run.
+	 */
+	didError: boolean;
+
+	/**
+	 * The name of the effect, for debugging.
+	 */
+	name?: string;
+}

package/src/types/ListItem.ts

@@ -1,6 +1,6 @@
-import { type Range } from "./Range";
+import type Range from "./Range";
 
-export type ListItem = Range & {
+export default interface ListItem extends Range {
 	data: Record<string, any>;
 	key: any;
-};
+}

package/src/types/ProxyData.ts

@@ -1,8 +1,10 @@
-import { type ProxyPropData } from "./ProxyPropData";
+import type Computed from "./Computed";
+import type ProxySignal from "./ProxySignal";
 
-export type ProxyData = {
+// TODO: Rename to DataSource?
+export default interface ProxyData {
 	target: Record<PropertyKey, any>;
 	isArray: boolean;
 	shallow: boolean;
-	propData: Map<PropertyKey, ProxyPropData | null>;
-};
+	signals: Map<PropertyKey, ProxySignal | Computed>;
+}

package/src/types/ProxySignal.ts

@@ -0,0 +1,28 @@
+import type Subscription from "./Subscription";
+import { SIGNAL_TYPE } from "./constants";
+
+/**
+ * A value that causes dependent Computeds and Effects to be re-run. Our signals
+ * are implemented as object properties.
+ */
+export default interface ProxySignal {
+	/**
+	 * SIGNAL.
+	 */
+	type: typeof SIGNAL_TYPE;
+
+	/**
+	 * The first Computed or Effect that is triggered when this property is changed.
+	 */
+	firstTarget: Subscription | null;
+
+	/**
+	 * When signals have been changed in a batch, this is the next changed signal.
+	 */
+	nextSignalToUpdate: ProxySignal | null;
+
+	/**
+	 * The name of the property, for debugging.
+	 */
+	name?: string;
+}

package/src/types/Range.ts

@@ -1,25 +1,19 @@
-import { type Effect } from "./Effect";
-
-export type Range = {
+export default interface Range {
 	startNode: ChildNode | null;
 	endNode: ChildNode | null;
 
-	children: Range[] | null;
-
-	/**
-	 * The index of the range if it is a branch in e.g. an if, switch or loop
-	 */
-	index: number;
-
-	/**
-	 * The effects that have been run in this range, and which need to be
-	 * cleaned up when it is removed
-	 */
-	effects: Effect[] | null;
+	previousRange: Range | null;
+	nextRange: Range | null;
+	depth: number;
 
 	/**
 	 * Animations that are currently running in the range, and which need to
 	 * awaited or canceled before it is removed
 	 */
 	animations: Set<Animation> | null;
-};
+
+	/**
+	 * The name of the range, for debugging.
+	 */
+	name?: string;
+}

package/src/types/ServerComponent.ts

@@ -1,10 +1,12 @@
-import { type ServerSlotRender } from "./ServerSlotRender";
+import type ServerSlotRender from "./ServerSlotRender";
 
 /**
  * A component that generates HTML
  */
-export type ServerComponent = (
+type ServerComponent = (
 	$props?: Record<string, any>,
 	$context?: Record<string, any>,
 	$slots?: Record<string, ServerSlotRender>,
 ) => { body: string; head: string };
+
+export default ServerComponent;

package/src/types/ServerSlotRender.ts

@@ -1,4 +1,6 @@
-export type ServerSlotRender = (
+type ServerSlotRender = (
 	$props?: Record<PropertyKey, any>,
 	$context?: Record<PropertyKey, any>,
 ) => void;
+
+export default ServerSlotRender;

package/src/types/SlotRender.ts

@@ -1,6 +1,8 @@
-export type SlotRender = (
+type SlotRender = (
 	parent: ParentNode,
 	anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$sprops?: Record<PropertyKey, any>,
 	$context?: Record<PropertyKey, any>,
 ) => void;
+
+export default SlotRender;

package/src/types/Subscription.ts

@@ -0,0 +1,57 @@
+import type Computed from "./Computed";
+import type Effect from "./Effect";
+import type ProxySignal from "./ProxySignal";
+
+/**
+ * A subscription that connects a source Signal or Computed to a target Computed
+ * or Effect.
+ */
+export default interface Subscription {
+	/**
+	 * The source Signal or Computed.
+	 */
+	source: ProxySignal | Computed;
+
+	/**
+	 * The target Computed or Effect.
+	 */
+	target: Computed | Effect;
+
+	/**
+	 * The next source subscription. After the targets have been re-run, we run
+	 * through sources to remove any that weren't re-used.
+	 */
+	nextSource: Subscription | null;
+
+	/**
+	 * The next target subscription. When the source is changed, we run through
+	 * targets to mark them dirty and possibly re-run them.
+	 */
+	nextTarget: Subscription | null;
+
+	/**
+	 * The previous target subscription. We remove subscriptions by looping
+	 * through the sources list, so we only need to know the next source, but we
+	 * need to know both the next and previous targets to properly update the
+	 * targets list.
+	 */
+	previousTarget: Subscription | null;
+
+	/**
+	 * Whether this subscription is active. At the start of a re-run, all
+	 * subscriptions are marked inactive and marked active if re-used. If not
+	 * re-used, they are removed after the run.
+	 */
+	active: boolean;
+
+	/**
+	 * Whether the subscription's target may need to be recalculated (if any of
+	 * its sources have changed).
+	 */
+	recalc: boolean;
+
+	/**
+	 * The name of the subscription, for debugging.
+	 */
+	name?: string;
+}