@torpor/view 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@torpor/view",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Torpor's view library, for writing and mounting components",
   "type": "module",
   "main": "dist/index.cjs",
@@ -35,7 +35,7 @@
     "@testing-library/user-event": "^14.6.1",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^22.15.21",
+    "@types/node": "^22.15.29",
     "fast-glob": "^3.3.3",
     "jsdom": "^26.1.0",
     "sucrase": "^3.35.0",
@@ -43,7 +43,7 @@
     "tsup": "^8.5.0",
     "tsx": "^4.19.4",
     "typescript": "^5.8.3",
-    "vitest": "^3.1.4"
+    "vitest": "^3.2.1"
   },
   "scripts": {
     "build": "tsc --noEmit && tsup && tsx ./scripts/copyToRepl.ts",

package/src/compile/build/client/buildElementNode.ts

@@ -173,9 +173,23 @@ function buildElementAttributes(
 	// TODO: Flatten this out
 	// TODO: Add an error if any reactive attributes are used non-reactively
 
+	// Do &ref first, just in case any other attributes depend on it being set
+	// e.g. if you have a `style` attribute that depends on the element's size
+	const refAttribute = node.attributes.find((a) => a.name === "&ref");
+	if (refAttribute) {
+		let value = refAttribute.value;
+		if (value != null && isFullyReactive(value)) {
+			// Bind the DOM element to a user-defined variable
+			value = value.substring(1, value.length - 1);
+			b.append(`${value} = ${varName};`);
+		}
+	}
+
 	for (let { name, value } of node.attributes) {
 		if (name === "self" && node.tagName === ":element") {
 			// Ignore this special attribute
+		} else if (name === "&ref") {
+			// Ignore this one, it should have been done already, above
 		} else if (name.startsWith("{") && name.endsWith("}")) {
 			// It's a shortcut attribute
 			// It could be e.g. {width} or it could be {$state.width}, but
@@ -191,10 +205,7 @@ function buildElementAttributes(
 				value = `\`${trimQuotes(value).replaceAll("{", "${")}\``;
 			}
 
-			if (name === "&ref") {
-				// Bind the DOM element to a user-defined variable
-				b.append(`${value} = ${varName};`);
-			} else if (name === "&group") {
+			if (name === "&group") {
 				buildBindGroupAttribute(node, varName, value, status, b);
 			} else if (name === "&value" || name === "&checked") {
 				buildBindAttribute(node, varName, name, value, status, b);

package/src/compile/build/client/buildIfNode.ts

@@ -6,6 +6,7 @@ import { type BuildStatus } from "./BuildStatus";
 import buildAddFragment from "./buildAddFragment";
 import buildFragment from "./buildFragment";
 import buildNode from "./buildNode";
+import replaceForVarNames from "./replaceForVarNames";
 
 // TODO: Are there too many branches for ifs etc?
 
@@ -55,7 +56,7 @@ function buildIfBranch(
 ) {
 	status.imports.add("t_run_branch");
 
-	b.append(`${node.statement} {`);
+	b.append(`${replaceForVarNames(node.statement, status)} {`);
 	b.append(`t_run_branch(${rangeName}, ${index}, () => {`);
 
 	buildFragment(node, status, b, parentName, "t_before");

package/src/compile/build/client/buildReplaceNode.ts

@@ -5,6 +5,7 @@ import { type BuildStatus } from "./BuildStatus";
 import buildAddFragment from "./buildAddFragment";
 import buildFragment from "./buildFragment";
 import buildNode from "./buildNode";
+import replaceForVarNames from "./replaceForVarNames";
 
 export default function buildReplaceNode(node: ControlNode, status: BuildStatus, b: Builder): void {
 	const replaceAnchorName = node.varName!;
@@ -38,7 +39,7 @@ function buildReplaceBranch(
 ) {
 	status.imports.add("t_run_branch");
 
-	b.append(`${node.statement};`);
+	b.append(`${replaceForVarNames(node.statement, status)};`);
 	b.append(`t_run_branch(${rangeName}, -1, () => {`);
 
 	buildFragment(node, status, b, parentName, "t_before");

package/src/compile/build/client/buildSwitchNode.ts

@@ -6,6 +6,7 @@ import { type BuildStatus } from "./BuildStatus";
 import buildAddFragment from "./buildAddFragment";
 import buildFragment from "./buildFragment";
 import buildNode from "./buildNode";
+import replaceForVarNames from "./replaceForVarNames";
 
 export default function buildSwitchNode(node: ControlNode, status: BuildStatus, b: Builder): void {
 	const switchParentName = node.parentName!;
@@ -55,7 +56,7 @@ function buildSwitchBranch(
 ) {
 	status.imports.add("t_run_branch");
 
-	b.append(`${node.statement} {`);
+	b.append(`${replaceForVarNames(node.statement, status)} {`);
 	b.append(`t_run_branch(${rangeName}, ${index}, () => {`);
 
 	buildFragment(node, status, b, parentName, "t_before");

package/src/motion/animate.ts

@@ -18,13 +18,13 @@ export default async function animate(
 	// - store the animation
 	// - reverse it if it's running and the range appears/disappears
 	// - transfer the animation to the new element
-
 	let animationOptions = Object.assign(
 		{
 			direction: enter ? "normal" : "reverse",
-			// TODO: Should probably have a global setting for this somewhere
+			// TODO: Should probably have a global setting for these somewhere
 			// And respect browser reduce motion settings
-			duration: 1000,
+			duration: 300,
+			easing: "ease-in-out",
 			fill: "forwards",
 		},
 		options,
@@ -32,9 +32,13 @@ export default async function animate(
 
 	const animation = el.animate(keyframes, animationOptions);
 
-	// HACK: I'm not entirely sure why this is needed, but without it,
-	// animations never start
-	animation.timeline = el.ownerDocument.timeline;
+	// HACK: I'm not entirely sure why we need to sent the animation's timeline,
+	// but without it, animations never start
+	// HACK: We also need to make sure the element has been added to the DOM
+	// with a timeout
+	setTimeout(() => {
+		animation.timeline = el.ownerDocument.timeline;
+	}, 1);
 
 	// Add the animation to the active range, so that the range won't be cleared
 	// until the animation is completed

package/src/render/addFragment.ts

@@ -41,16 +41,19 @@ export default function addFragment(
 	}
 
 	// If we're adding this fragment to the DOM, we can now run any $mount
-	// functions, add our stashed events and play our stashed animations
+	// effects, add our stashed events and play our stashed animations
 	if (!parentIsFragment) {
-		// Set the active range for each event and animation so it will get
-		// attached to the right one and set it back afterwards
-
-		for (let effect of context.mountEffects) {
-			$run(effect);
+		// Only run $mount effects if not hydrating (if hydrating, they will get
+		// run at the end when everything is hooked up)
+		if (!context.hydrationNode) {
+			for (let effect of context.mountEffects) {
+				$run(effect);
+			}
+			context.mountEffects.length = 0;
 		}
-		context.mountEffects.length = 0;
 
+		// Set the active range for each event so it will get attached to the
+		// right one and set it back afterwards
 		for (let event of context.stashedEvents) {
 			context.activeRange = event.range;
 			$run(function addFragmentEvent() {
@@ -62,6 +65,8 @@ export default function addFragment(
 		}
 		context.stashedEvents.length = 0;
 
+		// Set the active range for each animation so it will get attached to
+		// the right one and set it back afterwards
 		for (let animation of context.stashedAnimations) {
 			context.activeRange = animation.range;
 			$run(function addFragmentAnimation() {

package/src/render/hydrate.ts

@@ -1,5 +1,6 @@
 import { type Component } from "../types/Component";
 import { type SlotRender } from "../types/SlotRender";
+import $run from "./$run";
 import context from "./context";
 
 /**
@@ -22,4 +23,10 @@ export default function hydrate(
 	component(parent, null, props, undefined, slots);
 
 	context.hydrationNode = null;
+
+	// Now that we've hydrated, we can run $mount effects
+	for (let effect of context.mountEffects) {
+		$run(effect);
+	}
+	context.mountEffects.length = 0;
 }

package/src/watch/transferEffects.ts

@@ -28,7 +28,7 @@ function moveChildEffects(
 			newData.propData.set(key, props);
 
 			let oldPropValue = oldValue[key];
-			let oldPropData = oldPropValue[proxyDataSymbol];
+			let oldPropData = oldPropValue != null ? oldPropValue[proxyDataSymbol] : undefined;
 
 			// If the old value was a proxy, make the new value one too
 			// TODO: Make sure we aren't accidentally creating proxies for

package/test/props/reactive.test.ts

@@ -2,7 +2,6 @@ import { getByText, queryByText } from "@testing-library/dom";
 import "@testing-library/jest-dom/vitest";
 import userEvent from "@testing-library/user-event";
 import { beforeAll, expect, test } from "vitest";
-import { $watch } from "../../src";
 import buildOutputFiles from "../buildOutputFiles";
 import hydrateComponent from "../hydrateComponent";
 import importComponent from "../importComponent";
@@ -14,38 +13,28 @@ beforeAll(() => {
 	buildOutputFiles(componentPath);
 });
 
-interface State {
-	text: string;
-}
-
 test("props reactive -- mounted", async () => {
-	let $state = $watch({ text: "before" });
-
 	const container = document.createElement("div");
 	const component = await importComponent(componentPath, "client");
-	mountComponent(container, component, $state);
+	mountComponent(container, component);
 
-	check(container, $state);
+	await check(container);
 });
 
 test("props reactive -- hydrated", async () => {
-	let $state = $watch({ text: "before" });
-
 	const container = document.createElement("div");
 	const clientComponent = await importComponent(componentPath, "client");
 	const serverComponent = await importComponent(componentPath, "server");
-	hydrateComponent(container, clientComponent, serverComponent, $state);
+	hydrateComponent(container, clientComponent, serverComponent);
 
-	check(container, $state);
+	await check(container);
 });
 
-async function check(container: HTMLElement, $state: State) {
+async function check(container: HTMLElement) {
 	expect(queryByText(container, "before")).toBeInTheDocument();
 
 	await userEvent.click(getByText(container, "Update text"));
 
-	$state.text = "after";
-
 	expect(queryByText(container, "before")).not.toBeInTheDocument();
 	expect(queryByText(container, "after")).toBeInTheDocument();
 }