perf: cache twc function

package.json

@@ -51,7 +51,7 @@
 		"esbuild": "^0.20.2",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.2.3",
-		"svelte": "5.0.0-next.115",
+		"svelte": "5.0.0-next.123",
 		"tsx": "^4.7.2",
 		"typescript": "^5.4.5",
 		"vite": "^5.2.10"

site/package.json

@@ -19,7 +19,7 @@
 		"highlight.js": "^11.9.0",
 		"postcss": "^8.4.38",
 		"rehype-highlight": "^7.0.0",
-		"svelte": "5.0.0-next.115",
+		"svelte": "5.0.0-next.123",
 		"svelte-check": "^3.6.9",
 		"svelte-twc": "workspace:*",
 		"tailwindcss": "^3.4.3",

src/internal/client.ts

@@ -1,5 +1,3 @@
-// TwcComponent.svelte (Svelte v5.0.0-next.115)
-// Note: compiler output will change before 5.0 is released!
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 export function createTwcComponent(el: keyof HTMLElementTagNameMap, options: { compose: (...args: any[]) => string }) {
@@ -8,7 +6,7 @@ const cls = String.raw({ raw: typeof strings === 'string' ? [strings] : strings
 
 var root = $.template(`<${el}><!></${el}>`);
 
-function TwcComponent($$anchor, $$props) {
+return function TwcComponent($$anchor, $$props) {
 	$.push($$props, true);
 
 	let props = $.rest_props($$props, ["children", "class"]);
@@ -31,7 +29,5 @@ function TwcComponent($$anchor, $$props) {
 
 	$.append($$anchor, div);
 	$.pop();
-}
-
-return TwcComponent;};
+}};
 }

src/internal/server.ts

@@ -1,5 +1,3 @@
-// TwcComponent.svelte (Svelte v5.0.0-next.115)
-// Note: compiler output will change before 5.0 is released!
 import * as $ from "svelte/internal/server";
 export function createTwcComponent(el: keyof HTMLElementTagNameMap, options: { compose: (...args: any[]) => string }) {
 return (strings: string | TemplateStringsArray, ...values: any[]) => {
@@ -16,7 +14,7 @@ return function TwcComponent($$payload, $$props) {
 			{ "class": options.compose(className, cls) }
 		],
 		true,
-		false,
+		true,
 		""
 	)}><!--[-->`;
 

src/utils.ts

@@ -112,25 +112,29 @@ export type HTMLPropsMap = {
 export type Attributes<El extends keyof HTMLElementTagNameMap> = El extends keyof HTMLPropsMap
 	? HTMLPropsMap[El]
 	: HTMLAttributes<HTMLElementTagNameMap[El]>;
+export type HTMLElementTagNames = keyof HTMLElementTagNameMap;
+export type TwcFunction<El extends HTMLElementTagNames> = (
+	strings: TemplateStringsArray,
+	...values: any[]
+) => ComponentType<SvelteComponent<Attributes<El>>>;
 
 export type Twc = {
-	[El in keyof HTMLElementTagNameMap]: (
-		strings: TemplateStringsArray,
-		...values: any[]
-	) => ComponentType<SvelteComponent<Attributes<El>>>;
+	[El in HTMLElementTagNames]: TwcFunction<El>;
 };
 export function createCore(
-	createTwcComponent: (
-		el: keyof HTMLElementTagNameMap,
-		options: TwcOptions
-	) => (strings: TemplateStringsArray, ...values: any[]) => any
+	createTwcComponent: (el: HTMLElementTagNames, options: TwcOptions) => any
 ) {
 	return (options: TwcOptions) => {
+		const cache = new Map<HTMLElementTagNames, TwcFunction<HTMLElementTagNames>>();
 		return new Proxy(
 			{},
 			{
-				get(_, el: keyof HTMLElementTagNameMap) {
-					return createTwcComponent(el, options);
+				get(_, el: HTMLElementTagNames): TwcFunction<HTMLElementTagNames> {
+					const cached = cache.get(el);
+					if (cached) return cached;
+					const component = createTwcComponent(el, options);
+					cache.set(el, component);
+					return component;
 				}
 			}
 		) as Twc;