@torpor/view 0.0.2 → 0.0.4

package/dist/ssr.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ssr.ts","../src/render/$serverMount.ts","../src/render/$serverRun.ts","../src/render/$serverUnwrap.ts","../src/render/$serverWatch.ts","../src/render/formatAttributeText.ts","../src/render/formatText.ts","../src/render/getClasses.ts","../src/render/getStyles.ts"],"sourcesContent":["import $mount from \"./render/$serverMount\";\nimport $run from \"./render/$serverRun\";\nimport $unwrap from \"./render/$serverUnwrap\";\nimport $watch from \"./render/$serverWatch\";\nimport t_attr from \"./render/formatAttributeText\";\nimport t_fmt from \"./render/formatText\";\nimport t_class from \"./render/getClasses\";\nimport t_style from \"./render/getStyles\";\nimport type ServerSlotRender from \"./types/ServerSlotRender\";\n\nexport { $watch, $unwrap, $run, $mount, t_fmt, t_attr, t_class, t_style };\n\nexport type { ServerSlotRender };\n","import type Cleanup from \"../types/Cleanup\";\n\nexport default function $serverMount(fn: () => Cleanup | void) {}\n","import type Cleanup from \"../types/Cleanup\";\n\nexport default function $serverRun(fn: () => Cleanup | void) {}\n","export default function $serverUnwrap<T extends Record<PropertyKey, any>>(object: T): T {\n\treturn object;\n}\n","export default function $serverWatch<T extends Record<PropertyKey, any>>(object: T): T {\n\treturn object;\n}\n","export default function formatAttributeText(value: any): string {\n\treturn (value ?? \"\").toString().replaceAll('\"', \"&quot;\");\n}\n","export default function formatText(value: any): string {\n\treturn value ?? \"\";\n}\n","export default function getClasses(value: unknown): string {\n\tlet classes: string[] = [];\n\tgatherNames(\"\", value, classes);\n\treturn classes.join(\" \");\n}\n\nfunction gatherNames(name: unknown, value: unknown, classes: string[]) {\n\tif (value) {\n\t\tif (Array.isArray(value)) {\n\t\t\tfor (let v of value) {\n\t\t\t\tgatherNames(v, v, classes);\n\t\t\t}\n\t\t} else if (typeof value === \"object\") {\n\t\t\tfor (let [n, v] of Object.entries(value)) {\n\t\t\t\tgatherNames(n, v, classes);\n\t\t\t}\n\t\t} else {\n\t\t\tclasses.push(name as string);\n\t\t}\n\t}\n}\n","export default function getStyles(value: Record<string, any>): string {\n\tlet styles: string[] = [];\n\tfor (let [n, v] of Object.entries(value)) {\n\t\tstyles.push(`${n}: ${v}`);\n\t}\n\treturn styles.join(\"; \");\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEe,SAAR,aAA8B,IAA0B;AAAC;;;ACAjD,SAAR,WAA4B,IAA0B;AAAC;;;ACF/C,SAAR,cAAmE,QAAc;AACvF,SAAO;AACR;;;ACFe,SAAR,aAAkE,QAAc;AACtF,SAAO;AACR;;;ACFe,SAAR,oBAAqC,OAAoB;AAC/D,UAAQ,SAAS,IAAI,SAAS,EAAE,WAAW,KAAK,QAAQ;AACzD;;;ACFe,SAAR,WAA4B,OAAoB;AACtD,SAAO,SAAS;AACjB;;;ACFe,SAAR,WAA4B,OAAwB;AAC1D,MAAI,UAAoB,CAAC;AACzB,cAAY,IAAI,OAAO,OAAO;AAC9B,SAAO,QAAQ,KAAK,GAAG;AACxB;AAEA,SAAS,YAAY,MAAe,OAAgB,SAAmB;AACtE,MAAI,OAAO;AACV,QAAI,MAAM,QAAQ,KAAK,GAAG;AACzB,eAAS,KAAK,OAAO;AACpB,oBAAY,GAAG,GAAG,OAAO;AAAA,MAC1B;AAAA,IACD,WAAW,OAAO,UAAU,UAAU;AACrC,eAAS,CAAC,GAAG,CAAC,KAAK,OAAO,QAAQ,KAAK,GAAG;AACzC,oBAAY,GAAG,GAAG,OAAO;AAAA,MAC1B;AAAA,IACD,OAAO;AACN,cAAQ,KAAK,IAAc;AAAA,IAC5B;AAAA,EACD;AACD;;;ACpBe,SAAR,UAA2B,OAAoC;AACrE,MAAI,SAAmB,CAAC;AACxB,WAAS,CAAC,GAAG,CAAC,KAAK,OAAO,QAAQ,KAAK,GAAG;AACzC,WAAO,KAAK,GAAG,CAAC,KAAK,CAAC,EAAE;AAAA,EACzB;AACA,SAAO,OAAO,KAAK,IAAI;AACxB;","names":[]}
+{"version":3,"sources":["../src/ssr.ts","../src/render/$serverMount.ts","../src/render/$serverRun.ts","../src/render/$serverUnwrap.ts","../src/render/$serverWatch.ts","../src/render/formatAttributeText.ts","../src/render/formatText.ts","../src/render/getClasses.ts","../src/render/getStyles.ts"],"sourcesContent":["import $mount from \"./render/$serverMount\";\nimport $run from \"./render/$serverRun\";\nimport $unwrap from \"./render/$serverUnwrap\";\nimport $watch from \"./render/$serverWatch\";\nimport t_attr from \"./render/formatAttributeText\";\nimport t_fmt from \"./render/formatText\";\nimport t_class from \"./render/getClasses\";\nimport t_style from \"./render/getStyles\";\nimport { type ServerSlotRender } from \"./types/ServerSlotRender\";\n\nexport { $watch, $unwrap, $run, $mount, t_fmt, t_attr, t_class, t_style };\n\nexport type { ServerSlotRender };\n","import { type Cleanup } from \"../types/Cleanup\";\n\nexport default function $serverMount(_: () => Cleanup | void) {}\n","import { type Cleanup } from \"../types/Cleanup\";\n\nexport default function $serverRun(_: () => Cleanup | void) {}\n","export default function $serverUnwrap<T extends Record<PropertyKey, any>>(object: T): T {\n\treturn object;\n}\n","export default function $serverWatch<T extends Record<PropertyKey, any>>(object: T): T {\n\treturn object;\n}\n","export default function formatAttributeText(value: any): string {\n\treturn (value ?? \"\").toString().replaceAll('\"', \"&quot;\");\n}\n","export default function formatText(value: any): string {\n\treturn value ?? \"\";\n}\n","export default function getClasses(value: unknown): string {\n\tlet classes: string[] = [];\n\tgatherNames(\"\", value, classes);\n\treturn classes.join(\" \");\n}\n\nfunction gatherNames(name: unknown, value: unknown, classes: string[]) {\n\tif (value) {\n\t\tif (Array.isArray(value)) {\n\t\t\tfor (let v of value) {\n\t\t\t\tgatherNames(v, v, classes);\n\t\t\t}\n\t\t} else if (typeof value === \"object\") {\n\t\t\tfor (let [n, v] of Object.entries(value)) {\n\t\t\t\tgatherNames(n, v, classes);\n\t\t\t}\n\t\t} else {\n\t\t\tclasses.push(name as string);\n\t\t}\n\t}\n}\n","export default function getStyles(value: Record<string, any>): string {\n\tlet styles: string[] = [];\n\tfor (let [n, v] of Object.entries(value)) {\n\t\tstyles.push(`${n}: ${v}`);\n\t}\n\treturn styles.join(\"; \");\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEe,SAAR,aAA8B,GAAyB;AAAC;;;ACAhD,SAAR,WAA4B,GAAyB;AAAC;;;ACF9C,SAAR,cAAmE,QAAc;AACvF,SAAO;AACR;;;ACFe,SAAR,aAAkE,QAAc;AACtF,SAAO;AACR;;;ACFe,SAAR,oBAAqC,OAAoB;AAC/D,UAAQ,SAAS,IAAI,SAAS,EAAE,WAAW,KAAK,QAAQ;AACzD;;;ACFe,SAAR,WAA4B,OAAoB;AACtD,SAAO,SAAS;AACjB;;;ACFe,SAAR,WAA4B,OAAwB;AAC1D,MAAI,UAAoB,CAAC;AACzB,cAAY,IAAI,OAAO,OAAO;AAC9B,SAAO,QAAQ,KAAK,GAAG;AACxB;AAEA,SAAS,YAAY,MAAe,OAAgB,SAAmB;AACtE,MAAI,OAAO;AACV,QAAI,MAAM,QAAQ,KAAK,GAAG;AACzB,eAAS,KAAK,OAAO;AACpB,oBAAY,GAAG,GAAG,OAAO;AAAA,MAC1B;AAAA,IACD,WAAW,OAAO,UAAU,UAAU;AACrC,eAAS,CAAC,GAAG,CAAC,KAAK,OAAO,QAAQ,KAAK,GAAG;AACzC,oBAAY,GAAG,GAAG,OAAO;AAAA,MAC1B;AAAA,IACD,OAAO;AACN,cAAQ,KAAK,IAAc;AAAA,IAC5B;AAAA,EACD;AACD;;;ACpBe,SAAR,UAA2B,OAAoC;AACrE,MAAI,SAAmB,CAAC;AACxB,WAAS,CAAC,GAAG,CAAC,KAAK,OAAO,QAAQ,KAAK,GAAG;AACzC,WAAO,KAAK,GAAG,CAAC,KAAK,CAAC,EAAE;AAAA,EACzB;AACA,SAAO,OAAO,KAAK,IAAI;AACxB;","names":[]}

package/dist/ssr.d.cts

@@ -1,9 +1,9 @@
-import { C as Cleanup } from './ServerSlotRender-BJ4LZmv6.cjs';
-export { S as ServerSlotRender, g as t_class, f as t_fmt, a as t_style } from './ServerSlotRender-BJ4LZmv6.cjs';
+import { C as Cleanup } from './ServerSlotRender-AWF3bD5B.cjs';
+export { S as ServerSlotRender, g as t_class, f as t_fmt, a as t_style } from './ServerSlotRender-AWF3bD5B.cjs';
 
-declare function $serverMount(fn: () => Cleanup | void): void;
+declare function $serverMount(_: () => Cleanup | void): void;
 
-declare function $serverRun(fn: () => Cleanup | void): void;
+declare function $serverRun(_: () => Cleanup | void): void;
 
 declare function $serverUnwrap<T extends Record<PropertyKey, any>>(object: T): T;
 

package/dist/ssr.d.ts

@@ -1,9 +1,9 @@
-import { C as Cleanup } from './ServerSlotRender-BJ4LZmv6.js';
-export { S as ServerSlotRender, g as t_class, f as t_fmt, a as t_style } from './ServerSlotRender-BJ4LZmv6.js';
+import { C as Cleanup } from './ServerSlotRender-AWF3bD5B.js';
+export { S as ServerSlotRender, g as t_class, f as t_fmt, a as t_style } from './ServerSlotRender-AWF3bD5B.js';
 
-declare function $serverMount(fn: () => Cleanup | void): void;
+declare function $serverMount(_: () => Cleanup | void): void;
 
-declare function $serverRun(fn: () => Cleanup | void): void;
+declare function $serverRun(_: () => Cleanup | void): void;
 
 declare function $serverUnwrap<T extends Record<PropertyKey, any>>(object: T): T;
 

package/dist/ssr.js

@@ -5,11 +5,11 @@ import {
 } from "./chunk-GO2L324Q.js";
 
 // src/render/$serverMount.ts
-function $serverMount(fn) {
+function $serverMount(_) {
 }
 
 // src/render/$serverRun.ts
-function $serverRun(fn) {
+function $serverRun(_) {
 }
 
 // src/render/$serverUnwrap.ts

package/dist/ssr.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/render/$serverMount.ts","../src/render/$serverRun.ts","../src/render/$serverUnwrap.ts","../src/render/$serverWatch.ts","../src/render/formatAttributeText.ts"],"sourcesContent":["import type Cleanup from \"../types/Cleanup\";\n\nexport default function $serverMount(fn: () => Cleanup | void) {}\n","import type Cleanup from \"../types/Cleanup\";\n\nexport default function $serverRun(fn: () => Cleanup | void) {}\n","export default function $serverUnwrap<T extends Record<PropertyKey, any>>(object: T): T {\n\treturn object;\n}\n","export default function $serverWatch<T extends Record<PropertyKey, any>>(object: T): T {\n\treturn object;\n}\n","export default function formatAttributeText(value: any): string {\n\treturn (value ?? \"\").toString().replaceAll('\"', \"&quot;\");\n}\n"],"mappings":";;;;;;;AAEe,SAAR,aAA8B,IAA0B;AAAC;;;ACAjD,SAAR,WAA4B,IAA0B;AAAC;;;ACF/C,SAAR,cAAmE,QAAc;AACvF,SAAO;AACR;;;ACFe,SAAR,aAAkE,QAAc;AACtF,SAAO;AACR;;;ACFe,SAAR,oBAAqC,OAAoB;AAC/D,UAAQ,SAAS,IAAI,SAAS,EAAE,WAAW,KAAK,QAAQ;AACzD;","names":[]}
+{"version":3,"sources":["../src/render/$serverMount.ts","../src/render/$serverRun.ts","../src/render/$serverUnwrap.ts","../src/render/$serverWatch.ts","../src/render/formatAttributeText.ts"],"sourcesContent":["import { type Cleanup } from \"../types/Cleanup\";\n\nexport default function $serverMount(_: () => Cleanup | void) {}\n","import { type Cleanup } from \"../types/Cleanup\";\n\nexport default function $serverRun(_: () => Cleanup | void) {}\n","export default function $serverUnwrap<T extends Record<PropertyKey, any>>(object: T): T {\n\treturn object;\n}\n","export default function $serverWatch<T extends Record<PropertyKey, any>>(object: T): T {\n\treturn object;\n}\n","export default function formatAttributeText(value: any): string {\n\treturn (value ?? \"\").toString().replaceAll('\"', \"&quot;\");\n}\n"],"mappings":";;;;;;;AAEe,SAAR,aAA8B,GAAyB;AAAC;;;ACAhD,SAAR,WAA4B,GAAyB;AAAC;;;ACF9C,SAAR,cAAmE,QAAc;AACvF,SAAO;AACR;;;ACFe,SAAR,aAAkE,QAAc;AACtF,SAAO;AACR;;;ACFe,SAAR,oBAAqC,OAAoB;AAC/D,UAAQ,SAAS,IAAI,SAAS,EAAE,WAAW,KAAK,QAAQ;AACzD;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@torpor/view",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Torpor's view library, for writing and mounting components",
   "type": "module",
   "main": "dist/index.cjs",
@@ -32,23 +32,23 @@
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/user-event": "^14.5.2",
-    "@trivago/prettier-plugin-sort-imports": "^5.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^22.10.1",
-    "fast-glob": "^3.3.2",
-    "jsdom": "^25.0.1",
-    "tinybench": "^3.0.7",
-    "ts-blank-space": "^0.4.4",
-    "tsup": "^8.3.5",
+    "@types/node": "^22.13.4",
+    "fast-glob": "^3.3.3",
+    "jsdom": "^26.0.0",
+    "sucrase": "^3.35.0",
+    "tinybench": "^3.1.1",
+    "tsup": "^8.3.6",
     "tsx": "^4.19.2",
-    "typescript": "^5.7.2",
-    "vitest": "^2.1.8"
+    "typescript": "^5.7.3",
+    "vitest": "^3.0.5"
   },
   "scripts": {
     "build": "tsup && tsx ./scripts/copyToRepl.ts",
     "build:watch": "tsup --watch",
-    "check": "tsc -p tsconfig-check.json --noEmit",
+    "check": "tsc -p tsconfig.json --noEmit",
     "test": "vitest",
     "test:build": "tsx ./scripts/buildTestOutput.ts",
     "bench": "tsx ./bench/bench.ts",

package/scripts/buildTestOutput.ts

@@ -18,14 +18,13 @@ async function run() {
 async function buildOutputFiles(file: string) {
 	//console.log(`Building files for ${file.substring(path.resolve("./test").length)}`);
 
-	const name = path.basename(file, ".torp");
 	const source = await fs.readFile(file, "utf8");
 	const parsed = parse(source);
 	if (parsed.ok && parsed.template) {
 		let serverCode = formatCode(build(parsed.template, { server: true }).code, "server");
 		let clientCode = formatCode(build(parsed.template).code, "client");
 
-		let typesCode = buildType(name, parsed.template);
+		let typesCode = buildType(parsed.template);
 		await fs.writeFile(file.replace(".torp", ".d.ts"), typesCode);
 
 		let outputFile = file.replace("/components/", "/components/output/");
@@ -111,10 +110,10 @@ const importsMap: Record<string, string> = {
 	'import { t_txt } from "@torpor/view";': 'import t_txt from "../../../../src/render/createText";',
 	'import { t_cmt } from "@torpor/view";':
 		'import t_cmt from "../../../../src/render/createComment";',
-	'import type { ListItem } from "@torpor/view";':
-		'import type ListItem from "../../../../src/types/ListItem";',
-	'import type { SlotRender } from "@torpor/view";':
-		'import type SlotRender from "../../../../src/types/SlotRender";',
+	'import { type ListItem } from "@torpor/view";':
+		'import { type ListItem } from "../../../../src/types/ListItem";',
+	'import { type SlotRender } from "@torpor/view";':
+		'import { type SlotRender } from "../../../../src/types/SlotRender";',
 	'import { $watch } from "@torpor/view/ssr";':
 		'import $watch from "../../../../src/render/$watch";',
 	'import { $unwrap } from "@torpor/view/ssr";':
@@ -130,6 +129,6 @@ const importsMap: Record<string, string> = {
 		'import t_class from "../../../../src/render/getClasses";',
 	'import { t_style } from "@torpor/view/ssr";':
 		'import t_style from "../../../../src/render/getStyles";',
-	'import type { ServerSlotRender } from "@torpor/view/ssr";':
-		'import type ServerSlotRender from "../../../../src/types/ServerSlotRender";',
+	'import { type ServerSlotRender } from "@torpor/view/ssr";':
+		'import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";',
 };

package/scripts/copyToRepl.ts

@@ -19,13 +19,15 @@ async function run() {
 			);
 		})
 		// HACK: Why are these imported?
-		.replace(/^import \{.+} from ".\/chunk-(.+?).js";/gms, (_, capture) => {
+		.replaceAll(/^import \{.+} from ".\/chunk-(.+?).js";/gms, (_, capture) => {
 			const chunkFile = `./dist/chunk-${capture}.js`;
 			let chunkSource = readFileSync(chunkFile, "utf8");
 			return chunkSource.replace(/^export \{(.+)\};/gms, "");
-		});
+		})
+		.replaceAll(/^import ".\/chunk-(.+?).js";/gms, "")
+		.replaceAll(/\/\/# sourceMappingURL=(.+?).js.map/g, "");
 
-	const destFile = "../site/src/components/repl/view.txt";
+	const destFile = "../../site/src/components/repl/view.txt";
 	await fs.writeFile(destFile, source);
 }
 

package/src/ambient.d.ts

@@ -0,0 +1,23 @@
+/*
+declare module "*.torp" {
+	// HACK:
+	//import { Component } from "./types/Component";
+	type Component = (
+		$parent: ParentNode,
+		$anchor: Node | null,
+		$props?: Record<PropertyKey, any>,
+		$context?: Record<PropertyKey, any>,
+		$slots?: Record<
+			string,
+			(
+				parent: ParentNode,
+				anchor: Node | null,
+				$props?: Record<PropertyKey, any>,
+				$context?: Record<PropertyKey, any>,
+			) => void
+		>,
+	) => void;
+	export const C: Component;
+	//export default C;
+}
+*/

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

@@ -1,9 +1,11 @@
-import type BuildOptions from "../../../types/BuildOptions";
-import type Fragment from "../../types/nodes/Fragment";
+import { type BuildOptions } from "../../../types/BuildOptions";
+import { type Fragment } from "../../types/nodes/Fragment";
 
-export default interface BuildStatus {
+export type BuildStatus = {
 	imports: Set<string>;
 	props: string[];
+	contextProps: string[];
+	slotProps: string[];
 	styleHash: string;
 	varNames: Record<string, number>;
 	fragmentStack: {
@@ -14,4 +16,4 @@ export default interface BuildStatus {
 	preserveWhitespace: boolean;
 	inHead?: boolean;
 	options?: BuildOptions;
-}
+};

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

@@ -1,8 +1,8 @@
-import type ControlNode from "../../types/nodes/ControlNode";
-import type ElementNode from "../../types/nodes/ElementNode";
-import type RootNode from "../../types/nodes/RootNode";
+import { type ControlNode } from "../../types/nodes/ControlNode";
+import { type ElementNode } from "../../types/nodes/ElementNode";
+import { type RootNode } from "../../types/nodes/RootNode";
 import Builder from "../../utils/Builder";
-import type BuildStatus from "./BuildStatus";
+import { type BuildStatus } from "./BuildStatus";
 
 export default function buildAddFragment(
 	node: RootNode | ControlNode | ElementNode,
@@ -17,7 +17,7 @@ export default function buildAddFragment(
 		status.imports.add("t_add_fragment");
 		b.append(`t_add_fragment(${fragmentName}, ${parentName}, ${anchorName});`);
 		// TODO: Don't need to do this if the last thing we hydrated was the end node
-		if (fragment.endVarName && node.children.length > 1) {
+		if (fragment.endVarName) {
 			status.imports.add("t_next");
 			b.append(`t_next(${fragment.endVarName});`);
 		}

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

@@ -1,20 +1,14 @@
-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 trimMatched from "../../utils/trimMatched";
 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 buildAwaitNode(
-	node: ControlNode,
-	status: BuildStatus,
-	b: Builder,
-	parentName: string,
-	anchorName: string,
-) {
+export default function buildAwaitNode(node: ControlNode, status: BuildStatus, b: Builder) {
 	const awaitParentName = node.parentName!;
 	const awaitAnchorName = node.varName!;
 	const awaitRangeName = nextVarName("await_range", status);

package/src/compile/build/client/buildCode.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 BuildStatus from "./BuildStatus";
+import { type BuildStatus } from "./BuildStatus";
 import buildFragmentText from "./buildFragmentText";
 import buildNode from "./buildNode";
 
@@ -36,8 +36,8 @@ const importsMap: Record<string, string> = {
 	t_elm: 'import { t_elm } from "${folder}";',
 	t_txt: 'import { t_txt } from "${folder}";',
 	t_cmt: 'import { t_cmt } from "${folder}";',
-	ListItem: 'import type { ListItem } from "${folder}";',
-	SlotRender: 'import type { SlotRender } from "${folder}";',
+	ListItem: 'import { type ListItem } from "${folder}";',
+	SlotRender: 'import { type SlotRender } from "${folder}";',
 };
 
 export default function buildCode(template: Template, options?: BuildOptions): string {
@@ -80,13 +80,15 @@ function buildTemplate(template: Template, imports: Set<string>, b: Builder) {
 			b.append(script.substring(marker, i));
 
 			// TODO: Support other params, like the user setting $context
-			b.append(
-				`$parent: ParentNode,
-				$anchor: Node | null,
-				${current.params || "$props?: Record<PropertyKey, any>"},
-				$context?: Record<PropertyKey, any>,
-				$slots?: Record<string, SlotRender>`,
-			);
+			let params = [
+				"$parent: ParentNode",
+				"$anchor: Node | null",
+				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, SlotRender>`,
+			];
+			b.append(params.join(",\n"));
 
 			marker = i + "/* @params */".length;
 		} else if (script.substring(i, i + "/* @start */".length) === "/* @start */") {
@@ -112,6 +114,8 @@ function buildTemplate(template: Template, imports: Set<string>, b: Builder) {
 				const status: BuildStatus = {
 					imports,
 					props: current.props || [],
+					contextProps: current.contextProps || [],
+					slotProps: current.slotProps || [],
 					styleHash: current.style?.hash || "",
 					varNames: {},
 					fragmentStack: [],

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

@@ -1,4 +1,4 @@
-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 trimMatched from "../../utils/trimMatched";
@@ -6,7 +6,7 @@ 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";
@@ -16,8 +16,6 @@ export default function buildComponentNode(
 	node: ElementNode,
 	status: BuildStatus,
 	b: Builder,
-	parentName: string,
-	anchorName: string,
 	root = false,
 ) {
 	b.append("");
@@ -30,7 +28,7 @@ export default function buildComponentNode(
 		// TODO: defaults etc props
 		//status.imports.add("$watch");
 		//b.append(`const ${propsName} = $watch({});`);
-		b.append(`const ${propsName} = {};`);
+		b.append(`const ${propsName}: any = {};`);
 		for (let { name, value } of node.attributes) {
 			if (name === "self" && node.tagName === ":component") {
 				// Ignore this special attribute
@@ -80,14 +78,18 @@ export default function buildComponentNode(
 	const componentHasSlots = node.children.length;
 	const slotsName = componentHasSlots ? nextVarName("slots", status) : "undefined";
 	if (componentHasSlots) {
-		b.append(`const ${slotsName} = {};`);
+		b.append(`const ${slotsName}: Record<string, SlotRender> = {};`);
 		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}"] = ($sparent: ParentNode, $sanchor: Node | null, $sprops: Record<PropertyKey, any>, $context: Record<PropertyKey, any>) => {`,
-				);
+				const slotParams = [
+					"$sparent: ParentNode",
+					"$sanchor: Node | null",
+					"//@ts-ignore\n$sprops?: Record<PropertyKey, any>",
+					"//@ts-ignore\n$context?: Record<PropertyKey, any>",
+				];
+				b.append(`${slotsName}["${slotName}"] = (\n${slotParams.join(",\n")}\n) => {`);
 
 				buildFragment(slot, status, b, "$sparent", "$sanchor");
 

package/src/compile/build/client/buildControlNode.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 BuildStatus from "./BuildStatus";
+import { type BuildStatus } from "./BuildStatus";
 import buildAwaitNode from "./buildAwaitNode";
 import buildForNode from "./buildForNode";
 import buildHtmlNode from "./buildHtmlNode";
@@ -9,16 +9,10 @@ import buildReplaceNode from "./buildReplaceNode";
 import buildScriptNode from "./buildScriptNode";
 import buildSwitchNode from "./buildSwitchNode";
 
-export default function buildControlNode(
-	node: ControlNode,
-	status: BuildStatus,
-	b: Builder,
-	parentName: string,
-	anchorName: string,
-) {
+export default function buildControlNode(node: ControlNode, status: BuildStatus, b: Builder) {
 	switch (node.operation) {
 		case "@if group": {
-			buildIfNode(node, status, b, parentName, anchorName);
+			buildIfNode(node, status, b);
 			break;
 		}
 		case "@if":
@@ -28,7 +22,8 @@ export default function buildControlNode(
 			break;
 		}
 		case "@switch group": {
-			buildSwitchNode(node, status, b, parentName, anchorName);
+			buildSwitchNode(node, status, b);
+			break;
 		}
 		case "@case":
 		case "@default": {
@@ -36,7 +31,7 @@ export default function buildControlNode(
 			break;
 		}
 		case "@for group": {
-			buildForNode(node, status, b, parentName, anchorName);
+			buildForNode(node, status, b);
 			break;
 		}
 		case "@for":
@@ -45,7 +40,7 @@ export default function buildControlNode(
 			break;
 		}
 		case "@await group": {
-			buildAwaitNode(node, status, b, parentName, anchorName);
+			buildAwaitNode(node, status, b);
 			break;
 		}
 		case "@await":
@@ -55,7 +50,7 @@ export default function buildControlNode(
 			break;
 		}
 		case "@replace group": {
-			buildReplaceNode(node, status, b, parentName, anchorName);
+			buildReplaceNode(node, status, b);
 			break;
 		}
 		case "@replace": {
@@ -63,7 +58,7 @@ export default function buildControlNode(
 			break;
 		}
 		case "@html group": {
-			buildHtmlNode(node, status, b, parentName, anchorName);
+			buildHtmlNode(node, status, b);
 			break;
 		}
 		case "@html": {

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

@@ -1,5 +1,5 @@
-import type ElementNode from "../../types/nodes/ElementNode";
-import type TextNode from "../../types/nodes/TextNode";
+import { type ElementNode } from "../../types/nodes/ElementNode";
+import { type TextNode } from "../../types/nodes/TextNode";
 import Builder from "../../utils/Builder";
 import trimEnd from "../../utils/trimEnd";
 import trimMatched from "../../utils/trimMatched";
@@ -7,19 +7,19 @@ 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 buildMount from "./buildMount";
 import buildNode from "./buildNode";
 import buildRun from "./buildRun";
+import replaceForVarNames from "./replaceForVarNames";
 
 export default function buildElementNode(
 	node: ElementNode,
 	status: BuildStatus,
 	b: Builder,
 	parentName: string,
-	anchorName: string,
 	root = false,
 ) {
 	if (status.inHead) {
@@ -189,7 +189,7 @@ function buildElementAttributes(
 				// Bind the DOM element to a user-defined variable
 				b.append(`${value} = ${varName};`);
 			} else if (name === ":group") {
-				buildBindGroupAttribute(node, varName, name, value, status, b);
+				buildBindGroupAttribute(node, varName, value, status, b);
 			} else if (name === ":value" || name === ":checked") {
 				buildBindAttribute(node, varName, name, value, status, b);
 			} else if (name === ":onmount") {
@@ -198,7 +198,7 @@ function buildElementAttributes(
 				// cleanup function
 				buildMount("elMount", `return (${trimEnd(value.trim(), ";")})(${varName});`, status, b);
 			} else if (name.startsWith("on")) {
-				buildEventAttribute(node, varName, name, value, status, b);
+				buildEventAttribute(varName, name, value, status, b);
 			} else if (name.startsWith(":transition")) {
 				buildTransitionAttribute(node, varName, name, value, status, b);
 			} else if (name === "class") {
@@ -208,7 +208,7 @@ function buildElementAttributes(
 				buildRun("setClasses", `${varName}.className = t_class(${value});`, status, b);
 			} else if (name === ":style") {
 				status.imports.add("t_style");
-				buildRun("setStyles", `${varName}.style = t_style(${value});`, status, b);
+				buildRun("setStyles", `${varName}.setAttribute("style", t_style(${value}));`, status, b);
 			} else if (name.includes("-")) {
 				// Handle data-, aria- etc
 				status.imports.add("t_attribute");
@@ -227,11 +227,12 @@ function buildElementAttributes(
 function buildBindGroupAttribute(
 	node: ElementNode,
 	varName: string,
-	name: string,
 	value: string,
 	status: BuildStatus,
 	b: Builder,
 ) {
+	value = replaceForVarNames(value, status);
+
 	// Automatically add an event to bind the value
 	// TODO: Only tested this with radio buttons
 	let eventName = "change";
@@ -255,6 +256,8 @@ function buildBindAttribute(
 	status: BuildStatus,
 	b: Builder,
 ) {
+	value = replaceForVarNames(value, status);
+
 	// Automatically add an event to bind the value
 	// TODO: Need to check the element to find out what type of event to add
 	let eventName = "input";
@@ -294,21 +297,13 @@ function buildBindAttribute(
 }
 
 function buildEventAttribute(
-	node: ElementNode,
 	varName: string,
 	name: string,
 	value: string,
 	status: BuildStatus,
 	b: Builder,
 ) {
-	// 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`,
-		);
-	}
+	value = replaceForVarNames(value, status);
 
 	// Add an event listener, after the fragment has been added
 	const eventName = name.substring(2);
@@ -324,6 +319,8 @@ function buildTransitionAttribute(
 	status: BuildStatus,
 	b: Builder,
 ) {
+	value = replaceForVarNames(value, status);
+
 	status.imports.add("t_animate");
 
 	// Add an in and out transition, after the fragment has been added
@@ -333,18 +330,18 @@ function buildTransitionAttribute(
 	let exitVarName = nextVarName("trans_out", status);
 
 	if (name === ":transition") {
-		b.append(`const ${entryVarName} = ${getAnimationDetails(value, status)};`);
+		b.append(`const ${entryVarName} = ${getAnimationDetails(value)};`);
 		b.append(`const ${exitVarName} = ${entryVarName};`);
 		b.append(`t_animate(${varName}, ${entryVarName}, ${exitVarName});`);
 	} else if (name === ":transition-in") {
 		let outAttribute = node.attributes.find((a) => a.name === ":transition-out");
 		if (outAttribute && outAttribute.value) {
 			let outValue = trimMatched(outAttribute.value, "{", "}");
-			b.append(`const ${entryVarName} = ${getAnimationDetails(value, status)};`);
-			b.append(`const ${exitVarName} = ${getAnimationDetails(outValue, status)};`);
+			b.append(`const ${entryVarName} = ${getAnimationDetails(value)};`);
+			b.append(`const ${exitVarName} = ${getAnimationDetails(outValue)};`);
 			b.append(`t_animate(${varName}, ${entryVarName}, ${exitVarName});`);
 		} else {
-			b.append(`const ${entryVarName} = ${getAnimationDetails(value, status)};`);
+			b.append(`const ${entryVarName} = ${getAnimationDetails(value)};`);
 			b.append(`t_animate(${varName}, ${entryVarName});`);
 		}
 	} else if (name === ":transition-out") {
@@ -353,7 +350,7 @@ function buildTransitionAttribute(
 			// This has already been handled with :transition-in, above
 			return;
 		} else {
-			b.append(`const ${exitVarName} = ${getAnimationDetails(value, status)};`);
+			b.append(`const ${exitVarName} = ${getAnimationDetails(value)};`);
 			b.append(`t_animate(${varName}, null, ${entryVarName});`);
 		}
 	} else {
@@ -361,7 +358,7 @@ function buildTransitionAttribute(
 	}
 }
 
-function getAnimationDetails(value: string, status: BuildStatus) {
+function getAnimationDetails(value: string) {
 	// HACK: Split by commas, but not when in brackets
 	let parts: string[] = [];
 	let start = 0;

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

@@ -1,11 +1,10 @@
-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 trimAny from "../../utils/trimAny";
 import trimEnd from "../../utils/trimEnd";
 import trimMatched from "../../utils/trimMatched";
 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";
@@ -14,13 +13,7 @@ const forLoopRegex = /for\s*\((.+?);.*?;.*?\)/;
 const forLoopVarsRegex = /(?:let\s+|var\s+){0,1}([^\s,;+=]+)(?:\s*=\s*[^,;]+){0,1}/g;
 const forOfRegex = /for\s*\(\s*(?:let\s*|var\s*){0,1}(.+?)\s+(?:of|in).*?\)/;
 
-export default function buildForNode(
-	node: ControlNode,
-	status: BuildStatus,
-	b: Builder,
-	parentName: string,
-	anchorName: string,
-) {
+export default function buildForNode(node: ControlNode, status: BuildStatus, b: Builder) {
 	const forParentName = node.parentName!;
 	const forAnchorName = node.varName!;