@torpor/view 0.0.12 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@torpor/view",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "Torpor's view library, for writing and mounting components",
   "type": "module",
   "main": "dist/index.cjs",

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

@@ -146,6 +146,7 @@ function buildElementFragmentText(
 	fragments: Fragment[],
 	currentFragment: Fragment,
 ) {
+	let needsClass = node.scopeStyles;
 	currentFragment.text += `<${node.tagName}`;
 	let attributesText = node.attributes
 		.filter((a) => !a.name.startsWith("on") && !a.name.includes(":"))
@@ -157,6 +158,7 @@ function buildElementFragmentText(
 					return `${a.name}=""`;
 				}
 			} else if (a.name === "class" && node.scopeStyles) {
+				needsClass = false;
 				let value = a.value
 					? `"${trimQuotes(a.value)} torp-${status.styleHash}"`
 					: `"torp-${status.styleHash}"`;
@@ -170,6 +172,9 @@ function buildElementFragmentText(
 	if (attributesText) {
 		currentFragment.text += " " + attributesText;
 	}
+	if (needsClass) {
+		currentFragment.text += ` class="torp-${status.styleHash}"`;
+	}
 	currentFragment.text += ">";
 	for (let child of node.children) {
 		buildNodeFragmentText(child, status, fragments, currentFragment);

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

@@ -73,6 +73,11 @@ function buildServerTemplate(
 		} 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/buildServerElementNode.ts

@@ -40,6 +40,7 @@ export default function buildServerElementNode(
 }
 
 function buildElementAttributes(node: ElementNode, status: BuildServerStatus) {
+	let needsClass = node.scopeStyles;
 	let attributes: string[] = [];
 	for (let { name, value } of node.attributes) {
 		if (name === "self" && node.tagName === ":element") {
@@ -96,6 +97,7 @@ function buildElementAttributes(node: ElementNode, status: BuildServerStatus) {
 				status.imports.add("t_class");
 				if (node.scopeStyles) {
 					value += `, "torp-${status.styleHash}"`;
+					needsClass = false;
 				}
 				attributes.push(`class="\${t_class(${value})}"`);
 			} else if (name === ":style") {
@@ -118,6 +120,7 @@ function buildElementAttributes(node: ElementNode, status: BuildServerStatus) {
 				? `"${trimQuotes(value)} torp-${status.styleHash}"`
 				: `"torp-${status.styleHash}"`;
 			attributes.push(`${name}="${trimQuotes(value).replaceAll('"', """)}"`);
+			needsClass = false;
 		} else if (value != null) {
 			// Just set the attribute
 			// TODO: Probably check if it's a boolean attribute e.g. disabled
@@ -126,5 +129,8 @@ function buildElementAttributes(node: ElementNode, status: BuildServerStatus) {
 			attributes.push(`${name}`);
 		}
 	}
+	if (needsClass) {
+		attributes.push(`class="torp-${status.styleHash}"`);
+	}
 	return attributes.join(" ");
 }

package/src/compile/parse/parseCode.ts

@@ -217,17 +217,21 @@ function parseComponentStyle(status: ParseStatus) {
 			// Skip block comments
 			status.i = status.source.indexOf("*/", status.i) + 1;
 		} else if (char === '"' || char === "'") {
+			styleSource += char;
 			// Skip string contents
 			for (let j = status.i + 1; j < status.source.length; j++) {
+				styleSource += status.source[j];
 				if (status.source[j] === char && status.source[j - 1] !== "\\") {
 					status.i = j;
 					break;
 				}
 			}
 		} else if (char === "`") {
+			styleSource += char;
 			// Skip possibly interpolated string contents
 			let level2 = 0;
 			for (let j = status.i + 1; j < status.source.length; j++) {
+				styleSource += status.source[j];
 				if (status.source[j] === char && status.source[j - 1] !== "\\" && level2 === 0) {
 					status.i = j;
 					break;

package/test/class/class.test.ts

@@ -49,8 +49,13 @@ test("class -- hydrated", async () => {
 });
 
 function check(container: HTMLElement, state: State) {
+	expect(queryByText(container, "From id")).not.toBeNull();
+	expect(queryByText(container, "From id")).toHaveClass("torp-1ljxz83", {
+		exact: true,
+	});
+
 	expect(queryByText(container, "From string")).not.toBeNull();
-	expect(queryByText(container, "From string")).toHaveClass("yo torp-1ljxz83", {
+	expect(queryByText(container, "From string")).toHaveClass("divclass torp-1ljxz83", {
 		exact: true,
 	});
 

package/test/class/components/Class.torp

@@ -1,7 +1,11 @@
 export default function Class() {
 	@render {
 		<div>
-			<div class="yo">
+			<div id="divid">
+				From id
+			</div>
+
+			<div class="divclass">
 				From string
 			</div>
 

package/test/class/components/output/Class-client.ts

@@ -21,10 +21,10 @@ export default function Class(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> <div class="yo torp-1ljxz83"> From string </div> <a> From state </a> <div> From state with scope </div> <div> Class object </div> <div> Class array </div> <div> Class nested </div> </div>`);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div class="torp-1ljxz83"> <div id="divid" class="torp-1ljxz83"> From id </div> <div class="divclass torp-1ljxz83"> From string </div> <a class="torp-1ljxz83"> From state </a> <div class="torp-1ljxz83"> From state with scope </div> <div class="torp-1ljxz83"> Class object </div> <div class="torp-1ljxz83"> Class array </div> <div class="torp-1ljxz83"> Class nested </div> </div>`);
 	// @ts-ignore
 	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
-	const t_a_1 = t_next(t_next(t_next(t_child(t_div_1)))) as HTMLElement;
+	const t_a_1 = t_next(t_next(t_next(t_next(t_next(t_child(t_div_1)))))) as HTMLElement;
 	const t_div_2 = t_next(t_next(t_a_1)) as HTMLDivElement;
 	const t_div_3 = t_next(t_next(t_div_2)) as HTMLDivElement;
 	const t_div_4 = t_next(t_next(t_div_3)) as HTMLDivElement;

package/test/class/components/output/Class-server.ts

@@ -11,7 +11,7 @@ export default function Class(
 
 	/* User interface */
 	let $output = "";
-	$output += `<div> <div class="yo torp-1ljxz83"> From string </div> <a class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83")}"> From state </a> <div class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83")}"> From state with scope </div> <div class="${t_class({ foo: true, bar: false, baz: 5, qux: null }, "torp-1ljxz83")}"> Class object </div> <div class="${t_class([ "foo", false, true && "baz", undefined ], "torp-1ljxz83")}"> Class array </div> <div class="${t_class([ "foo", 0, { bar: true }, "", [1 && "baz", ["qux"]] ], "torp-1ljxz83")}"> Class nested </div> </div>`;
+	$output += `<div class="torp-1ljxz83"> <div id="divid" class="torp-1ljxz83"> From id </div> <div class="divclass torp-1ljxz83"> From string </div> <a class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83")}"> From state </a> <div class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83")}"> From state with scope </div> <div class="${t_class({ foo: true, bar: false, baz: 5, qux: null }, "torp-1ljxz83")}"> Class object </div> <div class="${t_class([ "foo", false, true && "baz", undefined ], "torp-1ljxz83")}"> Class array </div> <div class="${t_class([ "foo", 0, { bar: true }, "", [1 && "baz", ["qux"]] ], "torp-1ljxz83")}"> Class nested </div> </div>`;
 
 	return $output;
 }

package/test/class/components/temp/{Class-client-8c3f9e0257cc2b687e9bb7106cccbab94a4b5adf.ts → Class-client-8bf02b6a0c85674d341617dfb755b285b1af89cf.ts}

@@ -21,10 +21,10 @@ export default function Class(
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
 
-	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div> <div class="yo torp-1ljxz83"> From string </div> <a> From state </a> <div> From state with scope </div> <div> Class object </div> <div> Class array </div> <div> Class nested </div> </div>`);
+	const t_fragment_0 = t_fragment($parent.ownerDocument!, t_fragments, 0, `<div class="torp-1ljxz83"> <div id="divid" class="torp-1ljxz83"> From id </div> <div class="divclass torp-1ljxz83"> From string </div> <a class="torp-1ljxz83"> From state </a> <div class="torp-1ljxz83"> From state with scope </div> <div class="torp-1ljxz83"> Class object </div> <div class="torp-1ljxz83"> Class array </div> <div class="torp-1ljxz83"> Class nested </div> </div>`);
 	// @ts-ignore
 	const t_div_1 = t_root(t_fragment_0) as HTMLDivElement;
-	const t_a_1 = t_next(t_next(t_next(t_child(t_div_1)))) as HTMLElement;
+	const t_a_1 = t_next(t_next(t_next(t_next(t_next(t_child(t_div_1)))))) as HTMLElement;
 	const t_div_2 = t_next(t_next(t_a_1)) as HTMLDivElement;
 	const t_div_3 = t_next(t_next(t_div_2)) as HTMLDivElement;
 	const t_div_4 = t_next(t_next(t_div_3)) as HTMLDivElement;

package/test/class/components/temp/Class-server-dd71b6ec62f40231917a912819520fc614f017ae.ts

@@ -0,0 +1,17 @@
+import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
+import t_class from "../../../../src/render/getClasses";
+
+export default function Class(
+	$props: Record<PropertyKey, any>,
+	// @ts-ignore
+	$context?: Record<PropertyKey, any>,
+	// @ts-ignore
+	$slots?: Record<string, ServerSlotRender>
+) {
+
+	/* User interface */
+	let $output = "";
+	$output += `<div class="torp-1ljxz83"> <div id="divid" class="torp-1ljxz83"> From id </div> <div class="divclass torp-1ljxz83"> From string </div> <a class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83")}"> From state </a> <div class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83")}"> From state with scope </div> <div class="${t_class({ foo: true, bar: false, baz: 5, qux: null }, "torp-1ljxz83")}"> Class object </div> <div class="${t_class([ "foo", false, true && "baz", undefined ], "torp-1ljxz83")}"> Class array </div> <div class="${t_class([ "foo", 0, { bar: true }, "", [1 && "baz", ["qux"]] ], "torp-1ljxz83")}"> Class nested </div> </div>`;
+
+	return $output;
+}

package/test/class/components/temp/Class-server-2218c3284845fdab80d1a41ebace9a9e2ddd6fc1.ts

@@ -1,17 +0,0 @@
-import { type ServerSlotRender } from "../../../../src/types/ServerSlotRender";
-import t_class from "../../../../src/render/getClasses";
-
-export default function Class(
-	$props: Record<PropertyKey, any>,
-	// @ts-ignore
-	$context?: Record<PropertyKey, any>,
-	// @ts-ignore
-	$slots?: Record<string, ServerSlotRender>
-) {
-
-	/* User interface */
-	let $output = "";
-	$output += `<div> <div class="yo torp-1ljxz83"> From string </div> <a class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83")}"> From state </a> <div class="${t_class({ hello: true, red: $props.red, green: $props.green, blue: $props.blue }, "torp-1ljxz83")}"> From state with scope </div> <div class="${t_class({ foo: true, bar: false, baz: 5, qux: null }, "torp-1ljxz83")}"> Class object </div> <div class="${t_class([ "foo", false, true && "baz", undefined ], "torp-1ljxz83")}"> Class array </div> <div class="${t_class([ "foo", 0, { bar: true }, "", [1 && "baz", ["qux"]] ], "torp-1ljxz83")}"> Class nested </div> </div>`;
-
-	return $output;
-}