@torpor/view 0.0.2 → 0.0.4

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

@@ -1,10 +1,10 @@
 import isSpace from "../../parse/utils/isSpace";
-import type ControlNode from "../../types/nodes/ControlNode";
-import type ElementNode from "../../types/nodes/ElementNode";
-import type Fragment from "../../types/nodes/Fragment";
-import type RootNode from "../../types/nodes/RootNode";
-import type TemplateNode from "../../types/nodes/TemplateNode";
-import type TextNode from "../../types/nodes/TextNode";
+import { type ControlNode } from "../../types/nodes/ControlNode";
+import { type ElementNode } from "../../types/nodes/ElementNode";
+import { type Fragment } from "../../types/nodes/Fragment";
+import { type RootNode } from "../../types/nodes/RootNode";
+import { type TemplateNode } from "../../types/nodes/TemplateNode";
+import { type TextNode } from "../../types/nodes/TextNode";
 import isControlNode from "../../types/nodes/isControlNode";
 import isElementNode from "../../types/nodes/isElementNode";
 import isTextNode from "../../types/nodes/isTextNode";
@@ -13,7 +13,7 @@ import trimQuotes from "../../utils/trimQuotes";
 import isReactive from "../utils/isReactive";
 import isReactiveAttribute from "../utils/isReactiveAttribute";
 import nextVarName from "../utils/nextVarName";
-import type BuildStatus from "./BuildStatus";
+import { type BuildStatus } from "./BuildStatus";
 import buildNode from "./buildNode";
 
 interface VariablePath {
@@ -74,7 +74,7 @@ export default function buildFragment(
 			status.imports.add("t_fragment");
 			const fragmentText = fragment.text.replaceAll("`", "\\`").replaceAll(/\s+/g, " ");
 			b.append(
-				`const ${fragmentName} = t_fragment($parent.ownerDocument, t_fragments, ${fragment.number}, \`${fragmentText}\`);`,
+				`const ${fragmentName} = t_fragment($parent.ownerDocument!, t_fragments, ${fragment.number}, \`${fragmentText}\`);`,
 			);
 			let fragmentPath = { parent: null, type: "fragment", children: [] };
 			let varPaths = new Map<string, string>();
@@ -120,6 +120,10 @@ function maybeAddRootNodeDeclaration(
 		status.imports.add("t_root");
 		const rootName = `t_root_${fragment.number}`;
 		const rootPath = `t_root(${fragmentName})`;
+		// HACK: We don't know whether this variable will be used by other child
+		// nodes, so we have to create it regardless and ignore the error if
+		// it's not used -- maybe we could be smarter about this
+		b.append("// @ts-ignore");
 		b.append(`const ${rootName} = ${rootPath};`);
 		varPaths.set(rootPath, rootName);
 		//b.append(`console.log("${rootName}", ${rootName}, ${rootName}.textContent);`);
@@ -380,6 +384,10 @@ function declareElementFragmentVars(
 				if (node.tagName === ":element") {
 					b.append(`let ${node.varName} = ${varPath} as ${elementTypeName(node)};`);
 				} else {
+					// HACK: Not great
+					if (topLevel && lastChild) {
+						b.append("// @ts-ignore");
+					}
 					b.append(`const ${node.varName} = ${varPath} as ${elementTypeName(node)};`);
 				}
 				//b.append(`console.log("${node.varName}", ${node.varName}, ${node.varName}.textContent);`);
@@ -487,6 +495,10 @@ function declareTextFragmentVars(
 			if (status.options?.useCreateElement) {
 				b.append(`let ${node.varName};`);
 			} else {
+				// HACK: Not great
+				if (topLevel && lastChild) {
+					b.append("// @ts-ignore");
+				}
 				b.append(`const ${node.varName} = ${varPath};`);
 				//b.append(`console.log("${node.varName}", ${node.varName}, ${node.varName}.textContent);`);
 			}

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

@@ -1,13 +1,13 @@
 import { ANCHOR_COMMENT } from "../../types/comments";
-import type ControlNode from "../../types/nodes/ControlNode";
-import type ElementNode from "../../types/nodes/ElementNode";
-import type Fragment from "../../types/nodes/Fragment";
-import type RootNode from "../../types/nodes/RootNode";
-import type TemplateNode from "../../types/nodes/TemplateNode";
-import type TextNode from "../../types/nodes/TextNode";
+import { type ControlNode } from "../../types/nodes/ControlNode";
+import { type ElementNode } from "../../types/nodes/ElementNode";
+import { type Fragment } from "../../types/nodes/Fragment";
+import { type RootNode } from "../../types/nodes/RootNode";
+import { type TemplateNode } from "../../types/nodes/TemplateNode";
+import { type TextNode } from "../../types/nodes/TextNode";
 import Builder from "../../utils/Builder";
 import isReactive from "../utils/isReactive";
-import type BuildStatus from "./BuildStatus";
+import { type BuildStatus } from "./BuildStatus";
 
 /**
  * Builds the HTML template text for all of the fragments in a component

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

@@ -1,6 +1,6 @@
-import type ElementNode from "../../types/nodes/ElementNode";
+import { type ElementNode } from "../../types/nodes/ElementNode";
 import Builder from "../../utils/Builder";
-import type BuildStatus from "./BuildStatus";
+import { type BuildStatus } from "./BuildStatus";
 import buildNode from "./buildNode";
 
 export default function buildHeadNode(node: ElementNode, status: BuildStatus, b: Builder) {

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

@@ -1,16 +1,10 @@
-import type ControlNode from "../../types/nodes/ControlNode";
+import { type ControlNode } from "../../types/nodes/ControlNode";
 import Builder from "../../utils/Builder";
 import nextVarName from "../utils/nextVarName";
-import type BuildStatus from "./BuildStatus";
+import { type BuildStatus } from "./BuildStatus";
 import buildAddFragment from "./buildAddFragment";
 
-export default function buildHtmlNode(
-	node: ControlNode,
-	status: BuildStatus,
-	b: Builder,
-	parentName: string,
-	anchorName: string,
-) {
+export default function buildHtmlNode(node: ControlNode, status: BuildStatus, b: Builder) {
 	const htmlAnchorName = node.varName!;
 	const htmlParentName = node.parentName || htmlAnchorName + ".parentNode";
 	const htmlRangeName = nextVarName("html_range", status);

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

@@ -1,21 +1,15 @@
-import type ControlNode from "../../types/nodes/ControlNode";
+import { type ControlNode } from "../../types/nodes/ControlNode";
 import isControlNode from "../../types/nodes/isControlNode";
 import Builder from "../../utils/Builder";
 import nextVarName from "../utils/nextVarName";
-import type BuildStatus from "./BuildStatus";
+import { type BuildStatus } from "./BuildStatus";
 import buildAddFragment from "./buildAddFragment";
 import buildFragment from "./buildFragment";
 import buildNode from "./buildNode";
 
 // TODO: Are there too many branches for ifs etc?
 
-export default function buildIfNode(
-	node: ControlNode,
-	status: BuildStatus,
-	b: Builder,
-	parentName: string,
-	anchorName: string,
-) {
+export default function buildIfNode(node: ControlNode, status: BuildStatus, b: Builder) {
 	const ifAnchorName = node.varName!;
 	const ifParentName = node.parentName || ifAnchorName + ".parentNode";
 	const ifRangeName = nextVarName("if_range", status);

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

@@ -1,22 +1,17 @@
 import Builder from "../../utils/Builder";
-import type BuildStatus from "./BuildStatus";
+import { type BuildStatus } from "./BuildStatus";
+import replaceForVarNames from "./replaceForVarNames";
 
-export default function buildRun(
+export default function buildMount(
 	functionName: string,
 	functionBody: string,
 	status: BuildStatus,
 	b: Builder,
 ) {
+	functionBody = replaceForVarNames(functionBody, status);
+
 	status.imports.add("$mount");
 	b.append(`$mount(function ${functionName}() {`);
-	// HACK: If a value from a for loop is used in the function body,
-	// get it from the loop data to trigger an update when it is changed
-	for (let varName of status.forVarNames) {
-		functionBody = functionBody.replaceAll(
-			new RegExp(`([\\s\\(\\[])${varName}([\\s\\.\\(\\)\\[\\];])`, "g"),
-			`$1t_item.data.${varName}$2`,
-		);
-	}
 	b.append(functionBody);
 	b.append("});");
 }

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

@@ -1,10 +1,10 @@
-import type ControlNode from "../../types/nodes/ControlNode";
-import type ElementNode from "../../types/nodes/ElementNode";
-import type RootNode from "../../types/nodes/RootNode";
-import type TemplateNode from "../../types/nodes/TemplateNode";
-import type TextNode from "../../types/nodes/TextNode";
+import { type ControlNode } from "../../types/nodes/ControlNode";
+import { type ElementNode } from "../../types/nodes/ElementNode";
+import { type RootNode } from "../../types/nodes/RootNode";
+import { type TemplateNode } from "../../types/nodes/TemplateNode";
+import { type TextNode } from "../../types/nodes/TextNode";
 import Builder from "../../utils/Builder";
-import type BuildStatus from "./BuildStatus";
+import { type BuildStatus } from "./BuildStatus";
 import buildComponentNode from "./buildComponentNode";
 import buildControlNode from "./buildControlNode";
 import buildElementNode from "./buildElementNode";
@@ -33,23 +33,23 @@ export default function buildNode(
 			break;
 		}
 		case "control": {
-			buildControlNode(node as ControlNode, status, b, parentName, anchorName);
+			buildControlNode(node as ControlNode, status, b);
 			break;
 		}
 		case "component": {
-			buildComponentNode(node as ElementNode, status, b, parentName, anchorName, root);
+			buildComponentNode(node as ElementNode, status, b, root);
 			break;
 		}
 		case "element": {
-			buildElementNode(node as ElementNode, status, b, parentName, anchorName, root);
+			buildElementNode(node as ElementNode, status, b, parentName, root);
 			break;
 		}
 		case "text": {
-			buildTextNode(node as TextNode, status, b, parentName, anchorName);
+			buildTextNode(node as TextNode, status, b);
 			break;
 		}
 		case "special": {
-			buildSpecialNode(node as ElementNode, status, b, parentName, anchorName, root);
+			buildSpecialNode(node as ElementNode, status, b, parentName, root);
 			break;
 		}
 		default: {

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

@@ -1,18 +1,12 @@
-import type ControlNode from "../../types/nodes/ControlNode";
+import { type ControlNode } from "../../types/nodes/ControlNode";
 import Builder from "../../utils/Builder";
 import nextVarName from "../utils/nextVarName";
-import type BuildStatus from "./BuildStatus";
+import { type BuildStatus } from "./BuildStatus";
 import buildAddFragment from "./buildAddFragment";
 import buildFragment from "./buildFragment";
 import buildNode from "./buildNode";
 
-export default function buildReplaceNode(
-	node: ControlNode,
-	status: BuildStatus,
-	b: Builder,
-	parentName: string,
-	anchorName: string,
-) {
+export default function buildReplaceNode(node: ControlNode, status: BuildStatus, b: Builder) {
 	const replaceAnchorName = node.varName!;
 	const replaceParentName = node.parentName || replaceAnchorName + ".parentNode";
 	const replaceRangeName = nextVarName("replace_range", status);

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

@@ -1,6 +1,6 @@
-import type RootNode from "../../types/nodes/RootNode";
+import { type RootNode } from "../../types/nodes/RootNode";
 import Builder from "../../utils/Builder";
-import type BuildStatus from "./BuildStatus";
+import { type BuildStatus } from "./BuildStatus";
 import buildAddFragment from "./buildAddFragment";
 import buildFragment from "./buildFragment";
 import buildNode from "./buildNode";

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

@@ -1,5 +1,6 @@
 import Builder from "../../utils/Builder";
-import type BuildStatus from "./BuildStatus";
+import { type BuildStatus } from "./BuildStatus";
+import replaceForVarNames from "./replaceForVarNames";
 
 export default function buildRun(
 	functionName: string,
@@ -7,16 +8,10 @@ export default function buildRun(
 	status: BuildStatus,
 	b: Builder,
 ) {
+	functionBody = replaceForVarNames(functionBody, status);
+
 	status.imports.add("$run");
 	b.append(`$run(function ${functionName}() {`);
-	// HACK: If a value from a for loop is used in the function body,
-	// get it from the loop data to trigger an update when it is changed
-	for (let varName of status.forVarNames) {
-		functionBody = functionBody.replaceAll(
-			new RegExp(`([\\s\\(\\[])${varName}([\\s\\.\\(\\)\\[\\];])`, "g"),
-			`$1t_item.data.${varName}$2`,
-		);
-	}
 	b.append(functionBody);
 	b.append("});");
 }

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

@@ -1,4 +1,4 @@
-import type ControlNode from "../../types/nodes/ControlNode";
+import { type ControlNode } from "../../types/nodes/ControlNode";
 import Builder from "../../utils/Builder";
 
 export default function buildScriptNode(node: ControlNode, b: Builder) {

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

@@ -1,23 +1,17 @@
-import type ElementNode from "../../types/nodes/ElementNode";
+import { type ElementNode } from "../../types/nodes/ElementNode";
 import isSpecialNode from "../../types/nodes/isSpecialNode";
 import Builder from "../../utils/Builder";
 import trimQuotes from "../../utils/trimQuotes";
 import isFullyReactive from "../utils/isFullyReactive";
 import isReactive from "../utils/isReactive";
 import nextVarName from "../utils/nextVarName";
-import type BuildStatus from "./BuildStatus";
+import { type BuildStatus } from "./BuildStatus";
 import buildAddFragment from "./buildAddFragment";
 import buildFragment from "./buildFragment";
 import buildNode from "./buildNode";
 import buildRun from "./buildRun";
 
-export default function buildSlotNode(
-	node: ElementNode,
-	status: BuildStatus,
-	b: Builder,
-	parentName: string,
-	anchorName: string,
-) {
+export default function buildSlotNode(node: ElementNode, status: BuildStatus, b: Builder) {
 	// If there's a slot, build that, otherwise build the default nodes
 	let slotName = node.attributes.find((a) => a.name === "name")?.value;
 	slotName = slotName ? trimQuotes(slotName) : "_";
@@ -59,9 +53,13 @@ export default function buildSlotNode(
 	const slotAnchorName = node.varName!;
 
 	b.append(`if ($slots && $slots["${slotName}"]) {`);
-	b.append(
-		`$slots["${slotName}"](${slotParentName}, ${slotAnchorName}, ${slotHasProps ? propsName : "undefined"}, $context)`,
-	);
+	let params = [
+		slotParentName,
+		slotAnchorName,
+		slotHasProps ? propsName : "undefined",
+		status.contextProps.length ? "$context" : "undefined",
+	];
+	b.append(`$slots["${slotName}"](${params.join(", ")})`);
 
 	// TODO: Maybe not if there's only a single space node?
 	const fill = node.children.find((c) => isSpecialNode(c) && c.tagName === ":fill");

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

@@ -1,6 +1,6 @@
-import type ElementNode from "../../types/nodes/ElementNode";
+import { type ElementNode } from "../../types/nodes/ElementNode";
 import Builder from "../../utils/Builder";
-import type BuildStatus from "./BuildStatus";
+import { type BuildStatus } from "./BuildStatus";
 import buildComponentNode from "./buildComponentNode";
 import buildElementNode from "./buildElementNode";
 import buildHeadNode from "./buildHeadNode";
@@ -11,20 +11,19 @@ export default function buildSpecialNode(
 	status: BuildStatus,
 	b: Builder,
 	parentName: string,
-	anchorName: string,
 	root = false,
 ) {
 	switch (node.tagName) {
 		case ":slot": {
-			buildSlotNode(node, status, b, parentName, anchorName);
+			buildSlotNode(node, status, b);
 			break;
 		}
 		case ":element": {
-			buildElementNode(node, status, b, parentName, anchorName, root);
+			buildElementNode(node, status, b, parentName, root);
 			break;
 		}
 		case ":component": {
-			buildComponentNode(node, status, b, parentName, anchorName, root);
+			buildComponentNode(node, status, b, root);
 			break;
 		}
 		case ":head": {

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

@@ -1,7 +1,6 @@
-import type Template from "../../../types/Template";
-import type Attribute from "../../types/nodes/Attribute";
-import Style from "../../types/styles/Style";
-import type StyleBlock from "../../types/styles/StyleBlock";
+import { type Attribute } from "../../types/nodes/Attribute";
+import { type Style } from "../../types/styles/Style";
+import { type StyleBlock } from "../../types/styles/StyleBlock";
 import Builder from "../../utils/Builder";
 
 export default function buildStyles(style: Style, styleHash: string): string {

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

@@ -1,19 +1,13 @@
-import type ControlNode from "../../types/nodes/ControlNode";
+import { type ControlNode } from "../../types/nodes/ControlNode";
 import isControlNode from "../../types/nodes/isControlNode";
 import Builder from "../../utils/Builder";
 import nextVarName from "../utils/nextVarName";
-import type BuildStatus from "./BuildStatus";
+import { type BuildStatus } from "./BuildStatus";
 import buildAddFragment from "./buildAddFragment";
 import buildFragment from "./buildFragment";
 import buildNode from "./buildNode";
 
-export default function buildSwitchNode(
-	node: ControlNode,
-	status: BuildStatus,
-	b: Builder,
-	parentName: string,
-	anchorName: string,
-) {
+export default function buildSwitchNode(node: ControlNode, status: BuildStatus, b: Builder) {
 	const switchParentName = node.parentName!;
 	const switchAnchorName = node.varName!;
 	const switchRangeName = nextVarName("switch_range", status);

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

@@ -1,15 +1,9 @@
-import type TextNode from "../../types/nodes/TextNode";
+import { type TextNode } from "../../types/nodes/TextNode";
 import Builder from "../../utils/Builder";
-import type BuildStatus from "./BuildStatus";
+import { type BuildStatus } from "./BuildStatus";
 import buildRun from "./buildRun";
 
-export default function buildTextNode(
-	node: TextNode,
-	status: BuildStatus,
-	b: Builder,
-	parentName: string,
-	anchorName: string,
-) {
+export default function buildTextNode(node: TextNode, status: BuildStatus, b: Builder) {
 	let content = node.content || "";
 
 	if (!status.preserveWhitespace) {

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

@@ -0,0 +1,16 @@
+import type { BuildStatus } from "./BuildStatus";
+
+/**
+ * Variables used within a for loop need to be retrieved from the loop data.
+ */
+export default function replaceForVarNames(value: string, status: BuildStatus) {
+	// HACK: If a value from a for loop is used in the function body,
+	// get it from the loop data to trigger an update when it is changed
+	for (let varName of status.forVarNames) {
+		value = value.replaceAll(
+			new RegExp(`([\\s\\(\\[\\{])${varName}([\\s\\.\\(\\)\\[\\]\\};])`, "g"),
+			`$1t_item.data.${varName}$2`,
+		);
+	}
+	return value;
+}

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

@@ -1,10 +1,10 @@
-import type BuildOptions from "../../../types/BuildOptions";
+import { type BuildOptions } from "../../../types/BuildOptions";
 
-export default interface BuildServerStatus {
+export type BuildServerStatus = {
 	imports: Set<string>;
 	output: string;
 	styleHash: string;
 	varNames: Record<string, number>;
 	preserveWhitespace: boolean;
 	options?: BuildOptions;
-}
+};

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

@@ -3,10 +3,10 @@ import {
 	HYDRATION_END_COMMENT,
 	HYDRATION_START_COMMENT,
 } from "../../types/comments";
-import type ControlNode from "../../types/nodes/ControlNode";
+import { type ControlNode } from "../../types/nodes/ControlNode";
 import isControlNode from "../../types/nodes/isControlNode";
 import Builder from "../../utils/Builder";
-import type BuildServerStatus from "./BuildServerStatus";
+import { type BuildServerStatus } from "./BuildServerStatus";
 import buildServerNode from "./buildServerNode";
 
 export default function buildServerAwaitNode(

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

@@ -1,7 +1,7 @@
-import type BuildOptions from "../../../types/BuildOptions";
-import type Template from "../../../types/Template";
+import { type BuildOptions } from "../../../types/BuildOptions";
+import { type Template } from "../../../types/Template";
 import Builder from "../../utils/Builder";
-import type BuildServerStatus from "./BuildServerStatus";
+import { type BuildServerStatus } from "./BuildServerStatus";
 import buildServerNode from "./buildServerNode";
 
 const importsMap: Record<string, string> = {
@@ -13,7 +13,7 @@ const importsMap: Record<string, string> = {
 	t_attr: 'import { t_attr } from "${folder}";',
 	t_class: 'import { t_class } from "${folder}";',
 	t_style: 'import { t_style } from "${folder}";',
-	ServerSlotRender: 'import type { ServerSlotRender } from "${folder}";',
+	ServerSlotRender: 'import { type ServerSlotRender } from "${folder}";',
 };
 
 export default function buildServerCode(template: Template, options?: BuildOptions): string {
@@ -61,21 +61,18 @@ function buildServerTemplate(
 			b.append(script.substring(marker, i));
 
 			// TODO: Support other params, like the user setting $context
-			b.append(
-				`${current.params || "$props?: Record<PropertyKey, any>"},
-				$context?: Record<PropertyKey, any>,
-				$slots?: Record<string, ServerSlotRender>`,
-			);
+			let params = [
+				current.params ??
+					`${current.props?.length ? "$props" : "// @ts-ignore\n$props?"}: Record<PropertyKey, any>`,
+				`${current.contextProps?.length ? "" : "// @ts-ignore\n"}$context?: Record<PropertyKey, any>`,
+				`${current.slotProps?.length ? "" : "// @ts-ignore\n"}$slots?: Record<string, ServerSlotRender>`,
+			];
+			b.append(params.join(",\n"));
 
 			marker = i + "/* @params */".length;
 		} else if (script.substring(i, i + "/* @start */".length) === "/* @start */") {
 			b.append(script.substring(marker, i));
 
-			// Make sure we've got $props if we're going to be using it
-			if (current.props?.length) {
-				b.append(`$props ??= {};`);
-			}
-
 			// Redefine $context so that any newly added properties will only be passed to children
 			if (current.contextProps?.length) {
 				b.append(`$context = Object.assign({}, $context);`);

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

@@ -1,4 +1,5 @@
-import type ElementNode from "../../types/nodes/ElementNode";
+import { ANCHOR_COMMENT } from "../../types/comments";
+import { type ElementNode } from "../../types/nodes/ElementNode";
 import isSpecialNode from "../../types/nodes/isSpecialNode";
 import Builder from "../../utils/Builder";
 import trimMatched from "../../utils/trimMatched";
@@ -6,7 +7,7 @@ import trimQuotes from "../../utils/trimQuotes";
 import isFullyReactive from "../utils/isFullyReactive";
 import isReactive from "../utils/isReactive";
 import nextVarName from "../utils/nextVarName";
-import type BuildServerStatus from "./BuildServerStatus";
+import { type BuildServerStatus } from "./BuildServerStatus";
 import buildServerNode from "./buildServerNode";
 
 export default function buildServerComponentNode(
@@ -24,7 +25,7 @@ export default function buildServerComponentNode(
 	const propsName = componentHasProps ? nextVarName("props", status) : "undefined";
 	if (componentHasProps) {
 		// TODO: defaults etc props
-		b.append(`const ${propsName} = {};`);
+		b.append(`const ${propsName}: any = {};`);
 		for (let { name, value } of node.attributes) {
 			if (name.startsWith("{") && name.endsWith("}")) {
 				// It's a shortcut attribute
@@ -68,14 +69,16 @@ export default function buildServerComponentNode(
 	const componentHasSlots = node.children.length;
 	const slotsName = componentHasSlots ? nextVarName("slots", status) : "undefined";
 	if (componentHasSlots) {
-		b.append(`const ${slotsName} = {};`);
+		b.append(`const ${slotsName}: Record<string, ServerSlotRender> = {};`);
 		for (let slot of node.children) {
 			if (isSpecialNode(slot)) {
 				const nameAttribute = slot.attributes.find((a) => a.name === "name");
 				const slotName = nameAttribute?.value ? trimQuotes(nameAttribute.value) : "_";
-				b.append(
-					`${slotsName}["${slotName}"] = ($sprops: Record<PropertyKey, any>, $context: Record<PropertyKey, any>) => {`,
-				);
+				const slotParams = [
+					"// @ts-ignore\n$sprops?: Record<PropertyKey, any>",
+					"// @ts-ignore\n$context?: Record<PropertyKey, any>",
+				];
+				b.append(`${slotsName}["${slotName}"] = (\n${slotParams.join(",\n")}\n) => {`);
 				b.append(`let $output = "";`);
 
 				for (let child of slot.children) {
@@ -108,4 +111,9 @@ export default function buildServerComponentNode(
 	}
 	b.append("");
 	b.append(`$output += ${componentName}(${renderParams})`);
+
+	// If we're using a @replace to update a :component, we need another anchor comment
+	if (node.tagName === ":component") {
+		status.output += ANCHOR_COMMENT;
+	}
 }

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

@@ -1,6 +1,6 @@
-import type ControlNode from "../../types/nodes/ControlNode";
+import { type ControlNode } from "../../types/nodes/ControlNode";
 import Builder from "../../utils/Builder";
-import type BuildServerStatus from "./BuildServerStatus";
+import { type BuildServerStatus } from "./BuildServerStatus";
 import buildServerAwaitNode from "./buildServerAwaitNode";
 import buildServerForNode from "./buildServerForNode";
 import buildServerHtmlNode from "./buildServerHtmlNode";
@@ -27,6 +27,7 @@ export default function buildServerControlNode(
 		}
 		case "@switch group": {
 			buildServerSwitchNode(node, status, b);
+			break;
 		}
 		case "@case":
 		case "@default": {
@@ -61,7 +62,7 @@ export default function buildServerControlNode(
 			break;
 		}
 		case "@html group": {
-			buildServerHtmlNode(node, status, b);
+			buildServerHtmlNode(node, status);
 			break;
 		}
 		case "@html": {

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

@@ -1,10 +1,10 @@
-import type ElementNode from "../../types/nodes/ElementNode";
+import { type ElementNode } from "../../types/nodes/ElementNode";
 import Builder from "../../utils/Builder";
 import trimQuotes from "../../utils/trimQuotes";
 import voidTags from "../../utils/voidTags";
 import isFullyReactive from "../utils/isFullyReactive";
 import isReactive from "../utils/isReactive";
-import type BuildServerStatus from "./BuildServerStatus";
+import { type BuildServerStatus } from "./BuildServerStatus";
 import buildServerNode from "./buildServerNode";
 
 export default function buildServerElementNode(
@@ -12,7 +12,7 @@ export default function buildServerElementNode(
 	status: BuildServerStatus,
 	b: Builder,
 ) {
-	let attributes = buildElementAttributes(node, status, b);
+	let attributes = buildElementAttributes(node, status);
 	if (attributes.length) {
 		attributes = " " + attributes;
 	}
@@ -39,7 +39,7 @@ export default function buildServerElementNode(
 	}
 }
 
-function buildElementAttributes(node: ElementNode, status: BuildServerStatus, b: Builder) {
+function buildElementAttributes(node: ElementNode, status: BuildServerStatus) {
 	let attributes: string[] = [];
 	for (let { name, value } of node.attributes) {
 		if (name === "self" && node.tagName === ":element") {