@torpor/view 0.1.11 → 0.3.0

package/src/render/buildClasses.ts

@@ -0,0 +1,31 @@
+export default function buildClasses(value: unknown, styleHash?: string): string {
+	if (typeof value === "string") {
+		if (styleHash !== undefined) {
+			value += " " + styleHash;
+		}
+		return value;
+	} else {
+		let classes: string[] = [];
+		gatherNames("", value, classes);
+		if (styleHash !== undefined) {
+			classes.push(styleHash);
+		}
+		return classes.join(" ");
+	}
+}
+
+function gatherNames(name: unknown, value: unknown, classes: string[]) {
+	if (value) {
+		if (Array.isArray(value)) {
+			for (let v of value) {
+				gatherNames(v, v, classes);
+			}
+		} else if (typeof value === "object") {
+			for (let [n, v] of Object.entries(value)) {
+				gatherNames(n, v, classes);
+			}
+		} else {
+			classes.push(name as string);
+		}
+	}
+}

package/src/render/buildStyles.ts

@@ -0,0 +1,19 @@
+export default function buildStyles(value: unknown): string {
+	if (typeof value === "string") {
+		return value;
+	} else {
+		let styles: string[] = [];
+		if (value) {
+			if (Array.isArray(value)) {
+				for (let v of value) {
+					styles.push(v);
+				}
+			} else if (typeof value === "object") {
+				for (let [n, v] of Object.entries(value)) {
+					styles.push(`${n}: ${v}`);
+				}
+			}
+		}
+		return styles.join("; ");
+	}
+}

package/src/render/clearLayoutSlot.ts

@@ -1,4 +1,4 @@
-import type { Range } from "../types/Range";
+import type Range from "../types/Range";
 import clearRange from "./clearRange";
 
 export default function clearLayoutSlot(range: Range): void {

package/src/render/clearRange.ts

@@ -1,70 +1,63 @@
-import { type Range } from "../types/Range";
-import removeEffect from "../watch/removeEffect";
-import context from "./context";
+import type Range from "../types/Range";
 
 export default function clearRange(range: Range): void {
-	//console.log("clearing range", range.startNode, "to", range.endNode);
+	//console.log("clearing range", range.name, "from", range.startNode, "to", range.endNode);
+
+	// Clear child ranges and collect animations that take place within this
+	// range and its children
+	let animations: Animation[] | undefined =
+		range.animations !== null ? Array.from(range.animations) : undefined;
+	let childRange = range.nextRange;
+	while (childRange !== null && childRange.depth > range.depth) {
+		if (childRange.animations !== null) {
+			animations ??= [];
+			animations.push(...childRange.animations);
+		}
+		releaseRange(childRange);
+		// HACK: see runControlBranch
+		childRange.depth = -2;
+		childRange = childRange.nextRange;
+	}
+	range.nextRange = childRange;
 
-	// Clear effects and collect animations that take place within this range and its children
-	let animations: Animation[] = [];
-	clearEffects(range, animations);
+	if (range.previousRange !== null) {
+		range.previousRange.nextRange = range.nextRange;
+	}
+	if (range.nextRange !== null) {
+		range.nextRange.previousRange = range.previousRange;
+	}
 
 	// Wait for animations, if any, then clear the range's nodes
-	if (animations.length) {
+	if (animations !== undefined) {
+		// eslint-disable-next-line no-floating-promises
 		Promise.all(animations.map((a) => a.finished)).then(() => clearNodes(range));
 	} else {
 		clearNodes(range);
 	}
 }
 
-function clearEffects(range: Range, animations: Animation[]) {
-	// Delete the effects for this range
-	if (range.effects) {
-		// Set the active range to collect exit animations
-		// We could instead have seperate entry and exit animation collections?
-		const oldRange = context.activeRange;
-		context.activeRange = range;
-
-		for (let effect of range.effects) {
-			removeEffect(effect);
-		}
-
-		context.activeRange = oldRange;
-	}
-
-	// Collect any running animations, including ones from the effect cleanups
-	if (range.animations) {
-		for (let animation of range.animations) {
-			animations.push(animation);
-		}
-	}
-
-	// Recurse through the children
-	if (range.children) {
-		for (let child of range.children) {
-			clearEffects(child, animations);
-		}
-		range.children.length = 0;
-	}
-}
-
 function clearNodes(range: Range) {
 	// Clear the nodes for this range
-	if (range.startNode) {
-		let currentNode = range.endNode || range.startNode;
+	if (range.startNode !== null && range.endNode !== null) {
+		let currentNode = range.endNode;
 		// DEBUG:
-		if (range.startNode.parentNode !== currentNode.parentNode) {
-			throw new Error("range nodes have different parents");
-		}
+		//if (range.startNode.parentNode !== currentNode.parentNode) {
+		//	throw new Error("range nodes have different parents");
+		//}
 		while (currentNode !== range.startNode) {
-			let nextNode = currentNode.previousSibling;
+			let previousNode = currentNode.previousSibling;
 			currentNode.remove();
-			currentNode = nextNode!;
+			currentNode = previousNode!;
 		}
 		currentNode.remove();
-
-		// Release the nodes
-		range.startNode = null;
-		range.endNode = null;
 	}
+	releaseRange(range);
+}
+
+function releaseRange(range: Range) {
+	range.startNode = null;
+	range.endNode = null;
+	range.previousRange = null;
+	range.nextRange = null;
+	range.animations = null;
 }

package/src/render/context.ts

@@ -1,57 +1,28 @@
-import { type Animation } from "../types/Animation";
-import { type Cleanup } from "../types/Cleanup";
-import { type Effect } from "../types/Effect";
-import { type Range } from "../types/Range";
-
-/**
- * The global context for setting up effects and updating subscriptions.
- */
-interface Context {
-	/** The effect that is currently being run. */
-	activeEffect: Effect | null;
-
-	/** The range that is currently being created. */
-	activeRange: Range | null;
-
-	/**
-	 * 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 | null;
-		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 | null;
-		el: HTMLElement;
-		in?: Animation;
-		out?: Animation;
-	}[];
-
-	/** The node that is actively being hydrated. */
-	hydrationNode: ChildNode | null;
-	//hn: ChildNode | null;
-}
+import type Context from "../types/Context";
 
 const context: Context = {
-	activeEffect: null,
+	activeTarget: null,
+	previousEffect: null,
+	extent: 0,
+	batch: 0,
+	batchOperation: 0,
+	registerComputed: null,
+
+	firstEffectToRun: null,
+	firstSignalToUpdate: null,
+
+	// These will definitely be set, in mount or render
+	// @ts-ignore
 	activeRange: null,
+	// @ts-ignore
+	previousRange: null,
+	// @ts-ignore
+	rootRange: null,
+
 	mountEffects: [],
 	stashedEvents: [],
 	stashedAnimations: [],
+
 	hydrationNode: null,
 	//hn: null,
 	//get hydrationNode() {

package/src/render/fillLayoutSlot.ts

@@ -1,6 +1,6 @@
-import type { Component } from "../types/Component";
-import type { Range } from "../types/Range";
-import type { SlotRender } from "../types/SlotRender";
+import type Component from "../types/Component";
+import type Range from "../types/Range";
+import type SlotRender from "../types/SlotRender";
 import newRange from "./newRange";
 import popRange from "./popRange";
 import pushRange from "./pushRange";

package/src/render/getFragment.ts

@@ -8,7 +8,7 @@ export default function getFragment(
 	// Create the fragment in the array if it hasn't yet been used
 	if (array[index] === undefined) {
 		// TODO: Should pass a string for the ns, when we support other element types
-		if (ns) {
+		if (ns === true) {
 			const template = document.createElementNS("http://www.w3.org/2000/svg", "template");
 			template.innerHTML = html;
 			const fragment = new DocumentFragment();

package/src/render/hydrate.ts

@@ -1,7 +1,9 @@
-import { type Component } from "../types/Component";
-import { type SlotRender } from "../types/SlotRender";
+import type Component from "../types/Component";
+import type SlotRender from "../types/SlotRender";
 import $run from "./$run";
 import context from "./context";
+import newRange from "./newRange";
+import pushRange from "./pushRange";
 
 /**
  * Hydrates a component into an existing DOM tree
@@ -19,6 +21,11 @@ export default function hydrate(
 	// the hydration node to the first child node
 	context.hydrationNode = parent.firstChild;
 
+	// Create and push the root range
+	context.rootRange = newRange();
+	context.previousRange = context.rootRange;
+	pushRange(context.rootRange);
+
 	// Call the component's render function
 	component(parent, null, props, undefined, slots);
 

package/src/render/hydrateRoot.ts

@@ -1,5 +1,5 @@
-import { type Component } from "../types/Component";
-import { type SlotRender } from "../types/SlotRender";
+import type Component from "../types/Component";
+import type SlotRender from "../types/SlotRender";
 import context from "./context";
 
 /**

package/src/render/isCommentNode.ts

@@ -0,0 +1,3 @@
+export default function isCommentNode(node: Node): node is Comment {
+	return node.nodeType === 8;
+}

package/src/render/isFragmentNode.ts

@@ -0,0 +1,3 @@
+export default function isFragmentNode(node: Node): node is DocumentFragment {
+	return node.nodeType === 11;
+}

package/src/render/isTextNode.ts

@@ -0,0 +1,3 @@
+export default function isTextNode(node: Node): node is Text {
+	return node.nodeType === 3;
+}

package/src/render/mount.ts

@@ -1,5 +1,8 @@
-import { type Component } from "../types/Component";
-import { type SlotRender } from "../types/SlotRender";
+import type Component from "../types/Component";
+import type SlotRender from "../types/SlotRender";
+import context from "./context";
+import newRange from "./newRange";
+import pushRange from "./pushRange";
 
 /**
  * Mounts a component into a DOM node
@@ -16,15 +19,20 @@ export default function mount(
 ): void {
 	// The parent node must have no child elements, so that we can hydrate
 	// without worrying about where to start
-	if (parent.childElementCount) {
+	if (parent.childElementCount > 0) {
 		throw new Error("The parent node must have no child elements");
 	}
 
 	// Remove all text, commments, etc
-	while (parent.firstChild) {
+	while (parent.firstChild !== null) {
 		parent.firstChild.remove();
 	}
 
+	// Create and push the root range
+	context.rootRange = newRange();
+	context.previousRange = context.rootRange;
+	pushRange(context.rootRange);
+
 	// Call the component's render function
 	component(parent, null, props, undefined, slots);
 }

package/src/render/moveRange.ts

@@ -1,9 +1,11 @@
-import { type Range } from "../types/Range";
+import type Range from "../types/Range";
 
 export default function moveRange(parent: Node, range: Range, before: ChildNode | null): void {
-	const endNode = range.endNode || range.startNode;
+	parent = before?.parentNode ?? parent;
+	const endNode = range.endNode ?? range.startNode;
 	let currentNode = range.startNode;
-	while (currentNode) {
+
+	while (currentNode !== null) {
 		const nextNode = currentNode.nextSibling;
 		parent.insertBefore(currentNode, before);
 		if (currentNode === endNode) break;

package/src/render/newListItem.ts

@@ -1,12 +1,12 @@
-import { type ListItem } from "../types/ListItem";
+import type ListItem from "../types/ListItem";
 
 export default function newListItem(data: Record<PropertyKey, any>, key?: any): ListItem {
 	return {
 		startNode: null,
 		endNode: null,
-		children: null,
-		index: 0,
-		effects: null,
+		previousRange: null,
+		nextRange: null,
+		depth: -1,
 		animations: null,
 		data,
 		key,

package/src/render/newRange.ts

@@ -1,12 +1,13 @@
-import { type Range } from "../types/Range";
+import type Range from "../types/Range";
 
-export default function newRange(): Range {
+export default function newRange(name?: string): Range {
 	return {
 		startNode: null,
 		endNode: null,
-		children: null,
-		index: 0,
-		effects: null,
+		previousRange: null,
+		nextRange: null,
+		depth: -1,
 		animations: null,
+		name,
 	};
 }

package/src/render/nodeAnchor.ts

@@ -1,6 +1,6 @@
 import context from "./context";
 import { HYDRATION_END, HYDRATION_START } from "./hydrationMarkers";
-import isComment from "./isComment";
+import isCommentNode from "./isCommentNode";
 import nodeNext from "./nodeNext";
 
 /**
@@ -18,8 +18,8 @@ import nodeNext from "./nodeNext";
  * @returns The anchor node.
  */
 export default function nodeAnchor(node: ChildNode): ChildNode {
-	if (context.hydrationNode) {
-		if (isComment(node) && node.data === HYDRATION_START) {
+	if (context.hydrationNode !== null) {
+		if (isCommentNode(node) && node.data === HYDRATION_START) {
 			// Skip and remove the start node, setting the hydration node in
 			// nodeNext
 			let currentNode = nodeNext(node);
@@ -27,8 +27,8 @@ export default function nodeAnchor(node: ChildNode): ChildNode {
 
 			// Go through siblings until we get to the end
 			let level = 1;
-			while (currentNode) {
-				if (isComment(currentNode)) {
+			while (currentNode !== null) {
+				if (isCommentNode(currentNode)) {
 					if (currentNode.data === HYDRATION_START) {
 						level += 1;
 					} else if (currentNode.data === HYDRATION_END) {
@@ -56,7 +56,7 @@ export default function nodeAnchor(node: ChildNode): ChildNode {
 				currentNode = currentNode.nextSibling!;
 			}
 
-			if (!currentNode) {
+			if (currentNode === null) {
 				throw new Error("End hydration comment not found");
 			}
 		}

package/src/render/nodeCheckHydrationBreak.ts

@@ -1,6 +1,6 @@
 import context from "./context";
 import { HYDRATION_BREAK } from "./hydrationMarkers";
-import isComment from "./isComment";
+import isCommentNode from "./isCommentNode";
 
 // TODO: It would be good to remove this, if possible
 
@@ -13,8 +13,8 @@ import isComment from "./isComment";
  * @returns The next node.
  */
 export default function nodeCheckHydrationBreak(node: ChildNode | null): ChildNode | null {
-	if (context.hydrationNode) {
-		if (node && isComment(node) && node.data === HYDRATION_BREAK) {
+	if (context.hydrationNode !== null) {
+		if (node !== null && isCommentNode(node) && node.data === HYDRATION_BREAK) {
 			let comment = node;
 			node = node.nextSibling;
 			comment.remove();

package/src/render/nodeChild.ts

@@ -9,10 +9,10 @@ import context from "./context";
  */
 export default function nodeChild(parent: Node): ChildNode {
 	let childNode = parent.firstChild;
-	if (context.hydrationNode) {
+	if (context.hydrationNode !== null) {
 		// The child may be null when hydrating the sole text child of an
 		// element with no text
-		if (!childNode) {
+		if (childNode === null) {
 			childNode = parent.appendChild(parent.ownerDocument!.createTextNode(""));
 		}
 		context.hydrationNode = childNode;

package/src/render/nodeNext.ts

@@ -1,5 +1,5 @@
 import context from "./context";
-import isText from "./isText";
+import isTextNode from "./isTextNode";
 import nodeCheckHydrationBreak from "./nodeCheckHydrationBreak";
 
 /**
@@ -13,7 +13,7 @@ import nodeCheckHydrationBreak from "./nodeCheckHydrationBreak";
 export default function nodeNext(node: ChildNode, text = false): ChildNode {
 	// If the required node is a text node, and we already have one, just use
 	// it. This is caused by text nodes being merged in HTML
-	if (context.hydrationNode && text && isText(node)) {
+	if (context.hydrationNode !== null && text && isTextNode(node)) {
 		return node;
 	}
 

package/src/render/nodeRoot.ts

@@ -1,5 +1,7 @@
 import context from "./context";
-import isText from "./isText";
+import { HYDRATION_START } from "./hydrationMarkers";
+import isCommentNode from "./isCommentNode";
+import isTextNode from "./isTextNode";
 
 /**
  * Gets the first child in a fragment.
@@ -10,20 +12,32 @@ import isText from "./isText";
  * @param text Whether we require a text node.
  */
 export default function nodeRoot(parent: Node, text = false): ChildNode {
-	if (context.hydrationNode) {
+	if (context.hydrationNode !== null) {
 		let rootNode = context.hydrationNode;
 
 		// If the root node we need is a text node, and the hydration node is
 		// not a text node but the previous node is, use the previous node. This
 		// is caused by text nodes being merged in HTML
-		if (text && !isText(rootNode) && isText(rootNode.previousSibling)) {
+		if (
+			text &&
+			!isTextNode(rootNode) &&
+			rootNode.previousSibling !== null &&
+			isTextNode(rootNode.previousSibling)
+		) {
 			rootNode = rootNode.previousSibling;
 			context.hydrationNode = rootNode;
 		}
 
+		// HACK: If the root node is a hydration start comment node, get the
+		// next one instead
+		if (isCommentNode(rootNode) && rootNode.data === HYDRATION_START) {
+			rootNode = rootNode.nextSibling!;
+			context.hydrationNode = rootNode;
+		}
+
 		// If hydrating, set the active range's start node
 		const range = context.activeRange;
-		if (range && !range.startNode) {
+		if (range.startNode === null) {
 			range.startNode = rootNode;
 		}
 

package/src/render/popRange.ts

@@ -1,6 +1,6 @@
-import { type Range } from "../types/Range";
+import type Range from "../types/Range";
 import context from "./context";
 
-export default function popRange(oldRange: Range | null): void {
+export default function popRange(oldRange: Range): void {
 	context.activeRange = oldRange;
 }

package/src/render/pushRange.ts

@@ -1,17 +1,25 @@
-import { type Range } from "../types/Range";
+import type Range from "../types/Range";
 import context from "./context";
 
-export default function pushRange(range: Range, toParent = false): Range | null {
+export default function pushRange(range: Range, toParent = false): Range {
 	const activeRange = context.activeRange;
 
 	// Add the new range to the currently active range's children, so that we
 	// can delete the children with the parent
-	if (toParent && activeRange) {
-		(activeRange.children ??= []).push(range);
+	if (toParent) {
+		const previousRange = context.previousRange;
+		range.previousRange = previousRange;
+
+		const nextRange = previousRange.nextRange;
+		previousRange.nextRange = range;
+		range.nextRange = nextRange;
+
+		range.depth = activeRange.depth + 1;
 	}
 
 	// Set the new active range
 	context.activeRange = range;
+	context.previousRange = range;
 
 	// Return the old active range, so that it can be reset when done
 	return activeRange;

package/src/render/runControl.ts

@@ -1,4 +1,4 @@
-import { type Range } from "../types/Range";
+import type Range from "../types/Range";
 import $run from "./$run";
 import context from "./context";
 import popRange from "./popRange";
@@ -13,10 +13,6 @@ export default function runControl(
 	anchor: Node | null,
 	create: (anchor: Node | null) => void,
 ): void {
-	// Store the index in the range so that it can be accessed by the statement's
-	// branches
-	range.index = -1;
-
 	const oldRange = pushRange(range, true);
 
 	// Run the control statement in an effect

package/src/render/runControlBranch.ts

@@ -1,38 +1,24 @@
-import { type Range } from "../types/Range";
+import type Range from "../types/Range";
 import clearRange from "./clearRange";
-import context from "./context";
 import newRange from "./newRange";
 import popRange from "./popRange";
 import pushRange from "./pushRange";
 
-export default function runControlBranch(range: Range, index: number, create: () => void): void {
-	// Only run the branch if it's not the current branch
-	if (index >= 0 && range.index === index) {
-		return;
-	}
-	if (range.children?.length) {
-		// Branching ranges have exactly one child
-		clearRange(range.children[0]);
-		range.children.length = 0;
+export default function runControlBranch(range: Range, create: () => void): void {
+	// HACK: This is bad -- it means that the parent range has been cleared,
+	// but that should have cleared the effect that runs this child range??
+	// TODO: Look into this further...
+	if (range.depth === -2) return;
+
+	// Branching ranges have exactly one child -- remove it if necessary
+	if (range.nextRange !== null && range.nextRange.depth > range.depth) {
+		clearRange(range.nextRange!);
 	}
 
 	const oldRange = pushRange(newRange(), true);
 
-	// Do NOT re-run the entire control for properties accessed while updating
-	// its branches. E.g. we want to re-run the control for `@if ($state.x > 5)`
-	// (in runControl) but not for `<span>{$state.text}</span>` (in
-	// runControlBranch)
-	const oldEffect = context.activeEffect;
-	context.activeEffect = null;
-
 	// Run the create function
 	create();
 
-	// Set the active effect back for the next branch
-	context.activeEffect = oldEffect;
-
 	popRange(oldRange);
-
-	// Set the index on the branching range
-	range.index = index;
 }