@torpor/view 0.0.14 → 0.1.1

package/package.json

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

package/scripts/copyToRepl.ts

@@ -27,7 +27,7 @@ async function run() {
 		.replaceAll(/^import ".\/chunk-(.+?).js";/gms, "")
 		.replaceAll(/\/\/# sourceMappingURL=(.+?).js.map/g, "");
 
-	const destFile = "../../site/src/components/repl/view.txt";
+	const destFile = "../../site/src/views/repl/view.txt";
 	await fs.writeFile(destFile, source);
 }
 

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

@@ -10,7 +10,6 @@ const importsMap: Record<string, string> = {
 	$unwrap: 'import { $unwrap } from "${folder}";',
 	$run: 'import { $run } from "${folder}";',
 	$mount: 'import { $mount } from "${folder}";',
-	t_flush: 'import { t_flush } from "${folder}";',
 	t_range: 'import { t_range } from "${folder}";',
 	t_push_range: 'import { t_push_range } from "${folder}";',
 	t_pop_range: 'import { t_pop_range } from "${folder}";',
@@ -96,7 +95,8 @@ function buildTemplate(template: Template, imports: Set<string>, b: Builder) {
 
 			// Make sure we've got $props if we're going to be using it
 			if (current.props?.length) {
-				b.append(`$props ??= {};`);
+				imports.add("$watch");
+				b.append(`$props ??= $watch({});`);
 			}
 
 			// Redefine $context so that any newly added properties will only be passed to children
@@ -139,15 +139,6 @@ function buildTemplate(template: Template, imports: Set<string>, b: Builder) {
 			currentIndex += 1;
 			current = template.components[currentIndex];
 
-			// TODO: Only if the component has $mount
-			// Flush any $mount calls that were encountered -- move this to
-			// addFragment, because we also have to flush events and animations
-			if (imports.has("$mount")) {
-				imports.add("t_flush");
-				b.append("");
-				b.append("t_flush();");
-			}
-
 			marker = i + "/* @end */".length;
 		}
 	}

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

@@ -25,17 +25,33 @@ export default function buildComponentNode(
 	const componentHasProps = node.attributes.length || root;
 	const propsName = componentHasProps ? nextVarName("props", status) : "undefined";
 	if (componentHasProps) {
-		// TODO: defaults etc props
-		//status.imports.add("$watch");
-		//b.append(`const ${propsName} = $watch({});`);
-		b.append(`const ${propsName}: any = {};`);
+		// NOTE: The $props object is wrapped in a proxy so that components can
+		// be updated if they refer to a $props.property in e.g. an element's
+		// attribute
+		// TODO: default props etc
+		status.imports.add("$watch");
+		b.append(`const ${propsName}: any = $watch({});`);
+
 		for (let { name, value } of node.attributes) {
 			if (name === "self" && node.tagName === ":component") {
 				// Ignore this special attribute
 			} else if (name.startsWith("{") && name.endsWith("}")) {
 				// It's a shortcut attribute
+				// It could be e.g. {width} or it could be {$state.width}, but
+				// in either case we set the value of the width property
 				name = name.substring(1, name.length - 1);
-				buildRun("setProp", `${propsName}["${name}"] = ${name};`, status, b);
+				const propName = name.split(".").at(-1);
+				buildRun("setProp", `${propsName}["${propName}"] = ${name};`, status, b);
+			} else if (name.startsWith("&") && value != null && isFullyReactive(value)) {
+				// It's a bound property
+				// Add two $runs -- one to update the props, and one to update the value
+				// The component author will need to make sure $props.x is updated
+				// TODO: Maybe allow adding a Bindable<T> type to the $props interface??
+				// e.g. Component($props: { text: Bindable<string> })
+				name = name.substring(1);
+				value = value.substring(1, value.length - 1);
+				buildRun("setProp", `${propsName}["${name}"] = ${value};`, status, b);
+				buildRun("setBinding", `${value} = ${propsName}["${name}"];`, status, b);
 			} else if (value != null) {
 				let fullyReactive = isFullyReactive(value);
 				let partlyReactive = isReactive(value);

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

@@ -139,8 +139,11 @@ function buildHeadNode(node: ElementNode, status: BuildStatus, b: Builder) {
 	for (let { name, value } of node.attributes) {
 		if (name.startsWith("{") && name.endsWith("}")) {
 			// It's a shortcut attribute
+			// It could be e.g. {width} or it could be {$state.width}, but
+			// in either case we set the value of the width property
 			name = name.substring(1, name.length - 1);
-			buildRun("setAttribute", `t_head_el.setAttribute("${name}", ${name});`, status, b);
+			const propName = name.split(".").at(-1);
+			buildRun("setAttribute", `t_head_el.setAttribute("${propName}", ${name});`, status, b);
 		} else if (value != null && isReactive(value)) {
 			// It's a reactive attribute
 			if (isFullyReactive(value)) {
@@ -170,13 +173,30 @@ 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
+			// in either case we set the value of the width property
 			name = name.substring(1, name.length - 1);
-			buildRun("setAttribute", `${varName}.setAttribute("${name}", ${name});`, status, b);
+			const propName = name.split(".").at(-1);
+			buildRun("setAttribute", `${varName}.setAttribute("${propName}", ${name});`, status, b);
 		} else if (value != null && isReactive(value)) {
 			// It's a reactive attribute
 			if (isFullyReactive(value)) {
@@ -185,17 +205,14 @@ function buildElementAttributes(
 				value = `\`${trimQuotes(value).replaceAll("{", "${")}\``;
 			}
 
-			if (name === ":self") {
-				// 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") {
+			} else if (name === "&value" || name === "&checked") {
 				buildBindAttribute(node, varName, name, value, status, b);
 			} else if (name === ":onmount") {
-				// The :onmount event is faked by us by creating a $run. This also
-				// means that you can have unmount functionality by returning a
-				// cleanup function
+				// The :onmount event is faked by us by creating a $mount. This
+				// also means that you can have unmount functionality by
+				// returning a cleanup function
 				buildMount("elMount", `return (${trimEnd(value.trim(), ";")})(${varName});`, status, b);
 			} else if (name.startsWith("on")) {
 				buildEventAttribute(varName, name, value, status, b);

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

@@ -696,12 +696,38 @@ function getFragmentVarPath(
 	if (name !== "?") {
 		// Add the path, so that we can shorten subsequent paths e.g.
 		// const div = t_next(t_child(root));
-		// const p = t_next(t_next(t_next(t_child(root)))) => t_next(t_next(div))
+		// const p = t_next(t_next(t_next(t_child(root))))
+		// => const p = t_next(t_next(div))
 		varPaths.set(varPath, name);
 		// Add the name, so that we are always using the last declared name
 		varPaths.set(name, name);
 	}
 
+	// Shorten `t_next(t_next(x))` to `t_next(x, 2)`
+	while (varPath.includes("t_next(t_next(")) {
+		const match = varPath.match(/(t_next\(){2,}/)![0];
+		const count = match.length / "t_next(".length;
+		const pos = varPath.indexOf("t_next(t_next(");
+		const head = varPath.substring(0, pos);
+		let level = 0;
+		let end = 0;
+		for (let i = pos + match.length; i < varPath.length; i++) {
+			if (varPath[i] === "(") {
+				level++;
+			} else if (varPath[i] === ")") {
+				if (level === 0) {
+					end = i;
+					break;
+				} else {
+					level--;
+				}
+			}
+		}
+		const tail = varPath.substring(end + count);
+		const param = varPath.substring(pos + match.length, end);
+		varPath = `${head}t_next(${param}, ${count})${tail}`;
+	}
+
 	return varPath;
 }
 
@@ -721,7 +747,17 @@ function getFragmentVarPathPart(
 	for (let [i, child] of path.children.entries()) {
 		if (i > 0) {
 			status.imports.add("t_next");
+			//if (varPath.startsWith("t_next")) {
+			//	const match = varPath.match(/t_next\(.+?, (\d+)\)/);
+			//	if (match) {
+			//		const count = parseInt(match[1]) + 1;
+			//		varPath = varPath.replace(/t_next\((.+), \d+\)/, `t_next($1, ${count})`);
+			//	} else {
+			//		varPath = varPath.replace(/t_next\((.+)\)/, `t_next($1, 2)`);
+			//	}
+			//} else {
 			varPath = `t_next(${varPath})`;
+			//}
 		}
 
 		if (i === path.children.length - 1 && child.children.length) {

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

@@ -36,6 +36,7 @@ function buildHtmlBranch(
 ) {
 	status.imports.add("t_run_branch");
 
+	b.append(`${node.statement};`);
 	b.append(`t_run_branch(${rangeName}, -1, () => {`);
 
 	const templateName = nextVarName("template", status);

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

@@ -27,8 +27,11 @@ export default function buildSlotNode(node: ElementNode, status: BuildStatus, b:
 		for (let { name, value } of slotAttributes) {
 			if (name.startsWith("{") && name.endsWith("}")) {
 				// It's a shortcut attribute
+				// It could be e.g. {width} or it could be {$state.width}, but
+				// in either case we set the value of the width property
 				name = name.substring(1, name.length - 1);
-				buildRun("setProp", `${propsName}["${name}"] = ${name};`, status, b);
+				const propName = name.split(".").at(-1);
+				buildRun("setProp", `${propsName}["${propName}"] = ${name};`, status, b);
 			} else if (value != null) {
 				let fullyReactive = isFullyReactive(value);
 				let partlyReactive = isReactive(value);

package/src/compile/build/server/buildServerComponentNode.ts

@@ -29,8 +29,11 @@ export default function buildServerComponentNode(
 		for (let { name, value } of node.attributes) {
 			if (name.startsWith("{") && name.endsWith("}")) {
 				// It's a shortcut attribute
+				// It could be e.g. {width} or it could be {$state.width}, but
+				// in either case we set the value of the width property
 				name = name.substring(1, name.length - 1);
-				b.append(`${propsName}["${name}"] = ${name};`);
+				const propName = name.split(".").at(-1);
+				b.append(`${propsName}["${propName}"] = ${name};`);
 			} else if (value != null) {
 				let fullyReactive = isFullyReactive(value);
 				let partlyReactive = isReactive(value);

package/src/compile/build/server/buildServerElementNode.ts

@@ -63,14 +63,17 @@ function buildElementAttributes(node: ElementNode, status: BuildServerStatus) {
 			);
 		} else if (name.startsWith("{") && name.endsWith("}")) {
 			// It's a shortcut attribute
+			// It could be e.g. {width} or it could be {$state.width}, but
+			// in either case we set the value of the width property
 			name = name.substring(1, name.length - 1);
+			const propName = name.split(".").at(-1);
 			status.imports.add("t_attr");
-			attributes.push(`${name}="\${t_attr(${name})}"`);
+			attributes.push(`${propName}="\${t_attr(${name})}"`);
 		} else if (value != null && isFullyReactive(value)) {
 			// It's a reactive attribute
 			value = value.substring(1, value.length - 1);
 
-			if (name === ":self" || name === ":value" || name === ":checked" || name === ":group") {
+			if (name === "&ref" || name === "&value" || name === "&checked" || name === "&group") {
 				let defaultValue = "";
 				let typeAttribute = node.attributes.find((a) => a.name === "type");
 				if (typeAttribute && typeAttribute.value) {

package/src/compile/build/server/buildServerSlotNode.ts

@@ -41,8 +41,11 @@ export default function buildServerSlotNode(
 		for (let { name, value } of slotAttributes) {
 			if (name.startsWith("{") && name.endsWith("}")) {
 				// It's a shortcut attribute
+				// It could be e.g. {width} or it could be {$state.width}, but
+				// in either case we set the value of the width property
 				name = name.substring(1, name.length - 1);
-				b.append(`${propsName}["${name}"] = ${name};`);
+				const propName = name.split(".").at(-1);
+				b.append(`${propsName}["${propName}"] = ${name};`);
 			} else if (value != null) {
 				let fullyReactive = isFullyReactive(value);
 				let partlyReactive = isReactive(value);

package/src/compile/parse/parseCode.ts

@@ -35,23 +35,31 @@ export default function parseCode(source: string): ParseResult {
 			}
 		} else if (accept("function", status)) {
 			// If the function name starts with a capital, parse it as a component
-			consumeSpace(status);
-			if (/[A-Z]/.test(source[status.i])) {
-				parseComponentStart(status);
+			if (consumeSpace(status)) {
+				if (/[A-Z]/.test(source[status.i])) {
+					parseComponentStart(status);
+				} else {
+					// Unconsume the last space
+					status.i--;
+				}
 			}
 		} else if (accept("const", status)) {
 			// If it's a function and its name starts with a capital, parse it as a component
-			consumeSpace(status);
-			if (/[A-Z]/.test(source[status.i])) {
-				const start = status.i;
-				consumeAlphaNumeric(status);
-				consumeSpace(status);
-				if (accept("=", status)) {
+			if (consumeSpace(status)) {
+				if (/[A-Z]/.test(source[status.i])) {
+					const start = status.i;
+					consumeAlphaNumeric(status);
 					consumeSpace(status);
-					if (accept("(", status, false)) {
-						status.i = start;
-						parseComponentStart(status);
+					if (accept("=", status)) {
+						consumeSpace(status);
+						if (accept("(", status, false)) {
+							status.i = start;
+							parseComponentStart(status);
+						}
 					}
+				} else {
+					// Unconsume the last space
+					status.i--;
 				}
 			}
 		} else if (accept("export", status)) {

package/src/index.ts

@@ -6,7 +6,6 @@ import t_animate from "./render/addAnimation";
 import t_event from "./render/addEvent";
 import t_add_fragment from "./render/addFragment";
 import t_apply_props from "./render/applyProps";
-import t_flush from "./render/flushMountEffects";
 import t_fmt from "./render/formatText";
 import t_class from "./render/getClasses";
 import t_fragment from "./render/getFragment";
@@ -44,7 +43,6 @@ export {
 	t_event,
 	t_add_fragment,
 	t_apply_props,
-	t_flush,
 	t_fmt,
 	t_class,
 	t_fragment,

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/$unwrap.ts

@@ -6,5 +6,5 @@ import { proxyDataSymbol } from "../watch/symbols";
  * @param object The proxy object
  */
 export default function $unwrap<T extends Record<PropertyKey, any>>(object: T): T {
-	return object[proxyDataSymbol].target || object;
+	return object && object[proxyDataSymbol] ? object[proxyDataSymbol].target || object : object;
 }

package/src/render/addFragment.ts

@@ -40,12 +40,20 @@ export default function addFragment(
 		parent.insertBefore(fragment, before);
 	}
 
-	// If we're adding this fragment to the DOM, we can now add our stashed
-	// events and play our stashed animations
+	// If we're adding this fragment to the DOM, we can now run any $mount
+	// 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
+		// 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;
+		}
 
+		// 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() {
@@ -57,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/render/nodeNext.ts

@@ -2,14 +2,23 @@ import context from "./context";
 import { HYDRATION_BRANCH } from "./hydrationMarkers";
 import isComment from "./isComment";
 
-// TODO: Should have t_next(node, 3) to get the sibling 3 nodes along
-
 /**
  * Gets the next sibling of a node
  */
-export default function nodeNext(node: Node): Node {
-	let nextNode = node.nextSibling;
+export default function nodeNext(node: Node, count?: number): Node {
+	let nextNode = checkHydrationNode(node.nextSibling);
 
+	if (count) {
+		for (let i = 1; i < count; i++) {
+			nextNode = checkHydrationNode(nextNode!.nextSibling);
+		}
+	}
+
+	// NOTE: We know nextNode is not null as it is being called from generated code
+	return nextNode!;
+}
+
+function checkHydrationNode(nextNode: ChildNode | null) {
 	if (context.hydrationNode) {
 		// Remove hydration comments that are inserted at the start of branches
 		// They are just used to split up text nodes that would otherwise be joined in HTML
@@ -20,7 +29,5 @@ export default function nodeNext(node: Node): Node {
 		}
 		context.hydrationNode = nextNode;
 	}
-
-	// NOTE: We know this is not null as it is being called from generated code
-	return nextNode!;
+	return nextNode;
 }

package/src/render/runControlBranch.ts

@@ -1,5 +1,6 @@
 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";
@@ -9,7 +10,6 @@ export default function runControlBranch(range: Range, index: number, create: ()
 	if (index >= 0 && range.index === index) {
 		return;
 	}
-
 	if (range.children?.length) {
 		// Branching ranges have exactly one child
 		clearRange(range.children[0]);
@@ -18,9 +18,19 @@ export default function runControlBranch(range: Range, index: number, create: ()
 
 	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

package/src/render/runList.ts

@@ -23,13 +23,19 @@ export default function runList(
 
 	// Run the list in an effect
 	$run(function runList() {
-		// Push and pop the control statement on subsequent runs, so that new item
-		// ranges will be added to its children
+		// Push and pop the control statement on subsequent runs, so that new
+		// item ranges will be added to its children
 		const oldBranchRange = pushRange(range);
 
 		// Build the array of items with keys and data
 		const newItems = buildItems();
 
+		// Do NOT re-run the list for properties accessed while updating its
+		// items. E.g. we want to re-run the list for `@for (item of $items)`
+		// (in buildItems, above) but not for `<span>{item.id}</span>` (in
+		// runListItems, below)
+		context.activeEffect = null;
+
 		// Run the function that updates the list's items
 		runListItems(range, parent, anchor, listItems, newItems, create);
 

package/test/attributes/attributes.test.ts

@@ -24,6 +24,7 @@ test("attributes -- mounted", async () => {
 		thing: "thing1",
 		dataThing: "thing2",
 		description: "a person",
+		attr: "val",
 	});
 
 	const container = document.createElement("div");
@@ -38,6 +39,7 @@ test("attributes -- hydrated", async () => {
 		thing: "thing1",
 		dataThing: "thing2",
 		description: "a person",
+		attr: "val",
 	});
 
 	const container = document.createElement("div");
@@ -56,4 +58,5 @@ function check(container: HTMLElement, _: State) {
 		"caption",
 		"this attribute is for a person",
 	);
+	expect(queryByText(container, "Hello!")).toHaveAttribute("attr", "val");
 }

package/test/attributes/components/Attributes.torp

@@ -1,6 +1,11 @@
 export default function Attributes() {
 	@render {
-		<div thing={$props.thing} data-thing={$props.dataThing} caption="this attribute is for {$props.description}">
+		<div
+			thing={$props.thing}
+			data-thing={$props.dataThing}
+			caption="this attribute is for {$props.description}"
+			{$props.attr}
+		>
 			Hello!
 		</div>
 	}

package/test/attributes/components/output/Attributes-client.ts

@@ -1,4 +1,5 @@
 import $run from "../../../../src/render/$run";
+import $watch from "../../../../src/render/$watch";
 import { type SlotRender } from "../../../../src/types/SlotRender";
 import t_add_fragment from "../../../../src/render/addFragment";
 import t_attribute from "../../../../src/render/setAttribute";
@@ -15,12 +16,12 @@ export default function Attributes(
 	// @ts-ignore
 	$slots?: Record<string, SlotRender>
 ) {
-	$props ??= {};
+	$props ??= $watch({});
 
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div data-thing=""> Hello! </div>`);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div data-thing="" {$props.attr}> Hello! </div>`);
 	// @ts-ignore
 	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
 	$run(function setAttribute() {
@@ -32,6 +33,9 @@ export default function Attributes(
 	$run(function setAttribute() {
 		t_attribute(t_div_1, "caption", `this attribute is for ${$props.description}`);
 	});
+	$run(function setAttribute() {
+		t_div_1.setAttribute("attr", $props.attr);
+	});
 	t_add_fragment(t_fragment_0, $parent, $anchor);
 	t_next(t_div_1);
 

package/test/attributes/components/output/Attributes-server.ts

@@ -8,10 +8,11 @@ export default function Attributes(
 	// @ts-ignore
 	$slots?: Record<string, ServerSlotRender>
 ) {
+	$props ??= {};
 
 	/* User interface */
 	let $output = "";
-	$output += `<div ${$props.thing ? `thing="${t_attr($props.thing)}"` : ''} ${$props.dataThing ? `data-thing="${t_attr($props.dataThing)}"` : ''} caption="this attribute is for ${t_attr($props.description)}"> Hello! </div>`;
+	$output += `<div ${$props.thing ? `thing="${t_attr($props.thing)}"` : ''} ${$props.dataThing ? `data-thing="${t_attr($props.dataThing)}"` : ''} caption="this attribute is for ${t_attr($props.description)}" attr="${t_attr($props.attr)}"> Hello! </div>`;
 
 	return $output;
 }