@torpor/view 0.0.11 → 0.0.13

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

@@ -1,7 +1,7 @@
 import { type ControlNode } from "../../types/nodes/ControlNode";
 import Builder from "../../utils/Builder";
 
-export default function buildServerScriptNode(node: ControlNode, b: Builder) {
+export default function buildServerScriptNode(node: ControlNode, b: Builder): void {
 	b.append(`${maybeAppend(node.statement, ";")}`);
 }
 

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

@@ -17,7 +17,7 @@ export default function buildServerSlotNode(
 	node: ElementNode,
 	status: BuildServerStatus,
 	b: Builder,
-) {
+): void {
 	// Surround the entire control statement with bracketed comments, so that we
 	// can skip to the end to set the anchor node when hydrating
 	status.output += HYDRATION_START_COMMENT;

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

@@ -9,7 +9,7 @@ export default function buildServerSpecialNode(
 	node: ElementNode,
 	status: BuildServerStatus,
 	b: Builder,
-) {
+): void {
 	switch (node.tagName) {
 		case ":slot": {
 			buildServerSlotNode(node, status, b);

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

@@ -13,7 +13,7 @@ export default function buildServerSwitchNode(
 	node: ControlNode,
 	status: BuildServerStatus,
 	b: Builder,
-) {
+): void {
 	// Surround the entire control statement with bracketed comments, so that we
 	// can skip to the end to set the anchor node when hydrating
 	status.output += HYDRATION_START_COMMENT;

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

@@ -1,7 +1,7 @@
 import { type TextNode } from "../../types/nodes/TextNode";
 import { type BuildServerStatus } from "./BuildServerStatus";
 
-export default function buildServerTextNode(node: TextNode, status: BuildServerStatus) {
+export default function buildServerTextNode(node: TextNode, status: BuildServerStatus): void {
 	let content = node.content || "";
 
 	if (!status.preserveWhitespace) {

package/src/compile/build/utils/isFullyReactive.ts

@@ -5,7 +5,7 @@
  *
  * @returns True if the supplied string is fully reactive
  */
-export default function isFullyReactive(text: string) {
+export default function isFullyReactive(text: string): boolean {
 	// TODO: Need to be more fancy (check that braces match, ignore comments and strings etc)
 	return text.trim().startsWith("{") && text.trim().endsWith("}");
 }

package/src/compile/build/utils/isReactive.ts

@@ -5,7 +5,7 @@
  *
  * @returns True if the supplied string is fully or partially reactive
  */
-export default function isReactive(text: string) {
+export default function isReactive(text: string): boolean {
 	// TODO: Need to be more fancy (check that braces match, ignore comments and strings etc)
 	return text.includes("{") && text.includes("}");
 }

package/src/compile/build/utils/isReactiveAttribute.ts

@@ -10,7 +10,7 @@ import isReactive from "./isReactive";
  *
  * @returns True if the supplied attribute is reactive
  */
-export default function isReactiveAttribute(name: string, value: string) {
+export default function isReactiveAttribute(name: string, value: string): boolean {
 	// TODO: Better checking of whether an attribute is reactive
 	return isFullyReactive(name) || isReactive(value) || name.startsWith("on");
 }

package/src/compile/parse/addSpaceElement.ts

@@ -5,7 +5,10 @@ import isTextNode from "../types/nodes/isTextNode";
 import { type ParseStatus } from "./ParseStatus";
 import consumeSpace from "./utils/consumeSpace";
 
-export default function addSpaceElement(parent: ElementNode | ControlNode, status: ParseStatus) {
+export default function addSpaceElement(
+	parent: ElementNode | ControlNode,
+	status: ParseStatus,
+): void {
 	const content = consumeSpace(status);
 	if (content) {
 		const previousNode = parent.children[parent.children.length - 1];

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/src/compile/parse/parseControl.ts

@@ -34,7 +34,10 @@ const controlOperations = [
 
 const standaloneOperations = ["@key", "@html", "@const", "@console", "@debugger", "@function"];
 
-export default function parseControl(status: ParseStatus, parentNode: ElementNode | ControlNode) {
+export default function parseControl(
+	status: ParseStatus,
+	parentNode: ElementNode | ControlNode,
+): void {
 	const node = parseControlOpen(status);
 	if (!node) {
 		return;

package/src/compile/parse/parseImports.ts

@@ -2,7 +2,7 @@ import trimQuotes from "../utils/trimQuotes";
 import trimStartAndEnd from "../utils/trimStartAndEnd";
 import { type ParseStatus } from "./ParseStatus";
 
-export default function parseImports(status: ParseStatus) {
+export default function parseImports(status: ParseStatus): void {
 	let start = 0;
 	let level = 0;
 	for (let i = 0; i < status.source.length + 1; i++) {

package/src/compile/parse/parseMarkup.ts

@@ -3,7 +3,7 @@ import parseElement from "./parseElement";
 import accept from "./utils/accept";
 import addError from "./utils/addError";
 
-export default function parseMarkup(status: ParseStatus, source: string) {
+export default function parseMarkup(status: ParseStatus, source: string): void {
 	const current = status.components.at(-1);
 	if (!current) return;
 

package/src/compile/parse/parseStyles.ts

@@ -8,7 +8,7 @@ import consumeUntil from "./utils/consumeUntil";
 import expect from "./utils/expect";
 import isSpaceChar from "./utils/isSpaceChar";
 
-export default function parseStyles(source: string, status: ParseStatus) {
+export default function parseStyles(source: string, status: ParseStatus): void {
 	const current = status.components.at(-1);
 	if (!current) return;
 

package/src/compile/parse/scopeStyles.ts

@@ -5,50 +5,42 @@ import { type StyleBlock } from "../types/styles/StyleBlock";
 import trimQuotes from "../utils/trimQuotes";
 import { type ParseStatus } from "./ParseStatus";
 
-export default function scopeStyles(status: ParseStatus) {
+export default function scopeStyles(status: ParseStatus): void {
 	let selectors: string[] = [];
 	for (let component of status.components) {
 		if (component.style && component.markup) {
 			for (let block of component.style.blocks) {
 				collectStyleSelectors(block, selectors);
 			}
-			scopeStylesOnNode(component.markup, selectors, component.style.hash);
+			scopeStylesOnNode(component.markup, selectors);
 		}
 	}
 }
 
-function scopeStylesOnNode(node: TemplateNode, selectors: string[], styleHash: string) {
+function scopeStylesOnNode(node: TemplateNode, selectors: string[]) {
 	if (isElementNode(node)) {
-		let addClass = selectors.includes(node.tagName);
-		if (!addClass) {
+		let scopeStyles = selectors.includes(node.tagName);
+		if (!scopeStyles) {
 			for (let a of node.attributes) {
 				if (a.name === "class" || a.name === ":class") {
-					addClass = true;
+					scopeStyles = true;
 				} else if (a.name === "id" && a.value) {
-					addClass = selectors.includes(`#${trimQuotes(a.value)}`);
+					scopeStyles = selectors.includes(`#${trimQuotes(a.value)}`);
 				} else if (a.name === "class" && a.value) {
 					// TODO: Never getting here?
-					addClass = selectors.includes(`.${trimQuotes(a.value)}`);
+					scopeStyles = selectors.includes(`.${trimQuotes(a.value)}`);
+				}
+				if (scopeStyles) {
+					break;
 				}
-				if (addClass) break;
-			}
-		}
-		if (addClass) {
-			let classAttribute = node.attributes.find((a) => a.name === "class");
-			if (classAttribute && classAttribute.value) {
-				classAttribute.value = `"${trimQuotes(classAttribute.value)} torp-${styleHash}"`;
-			} else {
-				node.attributes.push({
-					name: "class",
-					value: `"torp-${styleHash}"`,
-				});
 			}
 		}
+		node.scopeStyles = scopeStyles;
 	}
 
 	if (isParentNode(node)) {
 		for (let child of node.children) {
-			scopeStylesOnNode(child, selectors, styleHash);
+			scopeStylesOnNode(child, selectors);
 		}
 	}
 }

package/src/compile/parse/slottifyChildNodes.ts

@@ -6,7 +6,7 @@ import isSpecialNode from "../types/nodes/isSpecialNode";
  * Moves any child nodes that aren't already in a <:fill> node into a default
  * <:fill> node
  */
-export default function slottifyChildNodes(node: ElementNode) {
+export default function slottifyChildNodes(node: ElementNode): void {
 	const nonFillNodes = node.children.filter((c) => !isFillNode(c));
 	// TODO: Not if it's only spaces??
 	if (nonFillNodes.length) {

package/src/compile/parse/utils/addError.ts

@@ -8,7 +8,11 @@ import { type ParseStatus } from "../ParseStatus";
  * @param start (Optional) The start position of the error (defaults to the
  * current parse position)
  */
-export default function addError(status: ParseStatus, message: string, start: number = status.i) {
+export default function addError(
+	status: ParseStatus,
+	message: string,
+	start: number = status.i,
+): void {
 	let line = 1;
 	let lastLineStart = 0;
 	for (let i = 0; i < start; i++) {

package/src/compile/parse/utils/consumeUntil.ts

@@ -10,7 +10,7 @@ import { type ParseStatus } from "../ParseStatus";
  * @returns The string of characters from the current parse position to the
  * found character
  */
-export default function consumeUntil(chars: string, status: ParseStatus) {
+export default function consumeUntil(chars: string, status: ParseStatus): string {
 	const start = status.i;
 	for (status.i; status.i < status.source.length; status.i++) {
 		if (chars.includes(status.source[status.i])) {

package/src/compile/parse/utils/isAlphaNumeric.ts

@@ -7,7 +7,7 @@ import isAlphaNumericChar from "./isAlphaNumericChar";
  *
  * @returns True if the supplied string contains only alpha-numeric characters
  */
-export default function isAlphaNumeric(text: string) {
+export default function isAlphaNumeric(text: string): boolean {
 	for (let i = 0; i < text.length; i++) {
 		if (!isAlphaNumericChar(text, i)) {
 			return false;

package/src/compile/parse/utils/isAlphaNumericChar.ts

@@ -6,7 +6,7 @@
  *
  * @returns True if the supplied character is alpha-numeric
  */
-export default function isAlphaNumericChar(text: string, index: number) {
+export default function isAlphaNumericChar(text: string, index: number): boolean {
 	let code = text.charCodeAt(index);
 	return (
 		// 0-9

package/src/compile/parse/utils/isSpace.ts

@@ -7,7 +7,7 @@ import isSpaceChar from "./isSpaceChar";
  *
  * @returns True if the supplied string contains only space characters
  */
-export default function isSpace(text: string) {
+export default function isSpace(text: string): boolean {
 	for (let i = 0; i < text.length; i++) {
 		if (!isSpaceChar(text, i)) {
 			return false;

package/src/compile/parse/utils/isSpaceChar.ts

@@ -6,7 +6,7 @@
  *
  * @returns True if the supplied character is a space
  */
-export default function isSpaceChar(text: string, index: number) {
+export default function isSpaceChar(text: string, index: number): boolean {
 	let code = text.charCodeAt(index);
 	return code === 32 || (code >= 9 && code <= 13);
 }

package/src/compile/types/nodes/TemplateNode.ts

@@ -3,6 +3,9 @@ import { type NodeType } from "./NodeType";
 export type TemplateNode = {
 	type: NodeType;
 
+	// Whether to add a scoped class name
+	scopeStyles?: boolean;
+
 	// This gets set when building
 	// For element and text nodes, it is the name of the element that is created
 	// For control nodes, it is the name of the anchor element

package/src/compile/utils/Builder.ts

@@ -2,11 +2,11 @@ export default class Builder {
 	#text = "";
 	#space = 0;
 
-	prepend(text: string) {
+	prepend(text: string): void {
 		this.#text = text + "\n" + this.#text;
 	}
 
-	append(text: string) {
+	append(text: string): void {
 		text = text.trim();
 		let i = 0;
 		//let newline = !!text.length && !text.endsWith("\n");
@@ -69,7 +69,7 @@ export default class Builder {
 		}
 	}
 
-	toString() {
+	toString(): string {
 		return this.#text;
 	}
 }

package/src/compile/utils/trimEnd.ts

@@ -6,7 +6,7 @@
  *
  * @returns The text without the char on the end
  */
-export default function trimEnd(text: string, char: string) {
+export default function trimEnd(text: string, char: string): string {
 	let end = text.length;
 	while (text[end - 1] === char) {
 		end -= 1;

package/src/compile/utils/trimMatched.ts

@@ -5,7 +5,7 @@
  *
  * @returns The text without the chars at the start or the end
  */
-export default function trimMatched(text: string, startChar: string, endChar: string) {
+export default function trimMatched(text: string, startChar: string, endChar: string): string {
 	let start = 0;
 	let end = text.length;
 	while (text[start] === startChar && text[end - 1] === endChar) {

package/src/compile/utils/trimQuotes.ts

@@ -5,7 +5,7 @@
  *
  * @returns The text without the quotes at the start or the end
  */
-export default function trimQuotes(text: string) {
+export default function trimQuotes(text: string): string {
 	let start = 0;
 	let end = text.length;
 	while (

package/src/compile/utils/trimStart.ts

@@ -6,7 +6,7 @@
  *
  * @returns The text without the char on the start
  */
-export default function trimStart(text: string, char: string) {
+export default function trimStart(text: string, char: string): string {
 	let start = 0;
 	while (text[start] === char) {
 		start += 1;

package/src/compile/utils/trimStartAndEnd.ts

@@ -10,6 +10,6 @@ import trimStart from "./trimStart";
  *
  * @returns The text without the char at the start or the end
  */
-export default function trimStartAndEnd(text: string, startChar: string, endChar: string) {
+export default function trimStartAndEnd(text: string, startChar: string, endChar: string): string {
 	return trimEnd(trimStart(text, startChar), endChar);
 }

package/src/compile/utils/voidTags.ts

@@ -1,5 +1,5 @@
 // From https://developer.mozilla.org/en-US/docs/Glossary/Void_element
-const voidTags = [
+const voidTags: string[] = [
 	"area",
 	"base",
 	"br",

package/src/debug/printHtml.ts

@@ -1,4 +1,4 @@
-export default function printHtml(html: string) {
+export default function printHtml(html: string): string {
 	let lines = html
 		.replaceAll("<", "\n<")
 		.replaceAll(">", ">\n")

package/src/motion/animate.ts

@@ -12,7 +12,7 @@ export default async function animate(
 	enter: boolean,
 	keyframes: Keyframe[] | PropertyIndexedKeyframes | null,
 	options?: number | KeyframeAnimationOptions,
-) {
+): Promise<void> {
 	// This is quite simplistic
 	// We might need to
 	// - store the animation

package/src/render/$mount.ts

@@ -6,6 +6,6 @@ import context from "./context";
  *
  * @param fn The function to run, which may return a cleanup function
  */
-export default function $mount(fn: () => Cleanup | void) {
+export default function $mount(fn: () => Cleanup | void): void {
 	context.mountEffects.push(fn);
 }

package/src/render/$run.ts

@@ -10,7 +10,7 @@ import context from "./context";
  *
  * @param fn The function to run, which may return a cleanup function
  */
-export default function $run(fn: () => Cleanup | void) {
+export default function $run(fn: () => Cleanup | void): void {
 	let effect: Effect = {
 		run: fn,
 		cleanup: null,

package/src/render/$serverMount.ts

@@ -1,3 +1,3 @@
 import { type Cleanup } from "../types/Cleanup";
 
-export default function $serverMount(_: () => Cleanup | void) {}
+export default function $serverMount(_: () => Cleanup | void): void {}

package/src/render/$serverRun.ts

@@ -1,3 +1,3 @@
 import { type Cleanup } from "../types/Cleanup";
 
-export default function $serverRun(_: () => Cleanup | void) {}
+export default function $serverRun(_: () => Cleanup | void): void {}

package/src/render/$stream.ts

@@ -1 +1 @@
-export default function $stream() {}
+export default function $stream(): void {}

package/src/render/addAnimation.ts

@@ -1,7 +1,7 @@
 import { type Animation } from "../types/Animation";
 import context from "./context";
 
-export default function addAnimation(el: HTMLElement, entry?: Animation, exit?: Animation) {
+export default function addAnimation(el: HTMLElement, entry?: Animation, exit?: Animation): void {
 	// Stash the event in context so that it can be added when the fragment is
 	// added to the DOM
 	// NOTE: We don't need to do this for hydration, but it's simpler to do it

package/src/render/addEvent.ts

@@ -4,7 +4,7 @@ export default function addEvent(
 	el: Element,
 	type: string,
 	listener: (this: Element, ev: any) => any,
-) {
+): void {
 	// Stash the event in context so that it can be added when the fragment is
 	// added to the DOM
 	// NOTE: We don't need to do this for hydration, but it's simpler to do it

package/src/render/addFragment.ts

@@ -6,7 +6,7 @@ export default function addFragment(
 	fragment: DocumentFragment,
 	parent: ParentNode,
 	before: Node | null,
-) {
+): void {
 	//console.log(`adding fragment '${fragment.textContent}' to ${printNode(parent)}`);
 	//console.log("before", printNode(before));
 

package/src/render/applyProps.ts

@@ -4,7 +4,7 @@ export default function applyProps(
 	el: Element,
 	props: Record<string, any> | undefined,
 	propNamesUsed: string[],
-) {
+): void {
 	if (props) {
 		for (let [name, value] of Object.entries(props)) {
 			if (!propNamesUsed.includes(name)) {

package/src/render/clearRange.ts

@@ -2,7 +2,7 @@ import { type Range } from "../types/Range";
 import removeEffect from "../watch/removeEffect";
 import context from "./context";
 
-export default function clearRange(range: Range) {
+export default function clearRange(range: Range): void {
 	//console.log(`clearing range ${printNode(range.startNode)} to ${printNode(range.endNode)}`);
 
 	// Clear effects and collect animations that take place within this range and its children

package/src/render/createComment.ts

@@ -1,3 +1,3 @@
-export default function createComment(content?: string) {
+export default function createComment(content?: string): Comment {
 	return document.createComment(content || "");
 }

package/src/render/createElement.ts

@@ -2,7 +2,7 @@ export default function createElement(
 	tagName: string,
 	attributes: Record<string, string>,
 	children: Node[],
-) {
+): HTMLElement {
 	let el = document.createElement(tagName);
 	// Set any attributes that aren't reactive
 	// Reactive attributes will be set in $run effects

package/src/render/createFragment.ts

@@ -1,4 +1,4 @@
-export default function createFragment(children: Node[]) {
+export default function createFragment(children: Node[]): DocumentFragment {
 	let el = document.createDocumentFragment();
 	for (let child of children) {
 		el.appendChild(child);

package/src/render/createText.ts

@@ -1,4 +1,4 @@
-export default function createText(content: string) {
+export default function createText(content: string): Text {
 	return document.createTextNode(isReactiveText(content) ? " " : content);
 }
 

package/src/render/flushMountEffects.ts

@@ -1,7 +1,7 @@
 import $run from "./$run";
 import context from "./context";
 
-export default function flushMountEffects() {
+export default function flushMountEffects(): void {
 	for (let fn of context.mountEffects) {
 		$run(fn);
 	}

package/src/render/getClasses.ts

@@ -1,6 +1,9 @@
-export default function getClasses(value: unknown): string {
+export default function getClasses(value: unknown, styleHash?: string): string {
 	let classes: string[] = [];
 	gatherNames("", value, classes);
+	if (styleHash) {
+		classes.push(styleHash);
+	}
 	return classes.join(" ");
 }
 

package/src/render/hydrate.ts

@@ -13,7 +13,7 @@ export default function hydrate(
 	component: Component,
 	props?: Record<string, any>,
 	slots?: Record<string, SlotRender>,
-) {
+): void {
 	// When mounting, the parent must have no child elements, so  we can just set
 	// the hydration node to the first child node
 	context.hydrationNode = parent.firstChild;

package/src/render/hydrateRoot.ts

@@ -19,7 +19,7 @@ export default function hydrateRoot(
 	component: Component,
 	props?: Record<string, any>,
 	slots?: Record<string, SlotRender>,
-) {
+): void {
 	let html = document.documentElement;
 
 	// With server side rendering, we start hydrating at the <html> element

package/src/render/mount.ts

@@ -13,7 +13,7 @@ export default function mount(
 	component: Component,
 	props?: Record<string, any>,
 	slots?: Record<string, SlotRender>,
-) {
+): void {
 	// The parent node must have no child elements, so that we can hydrate
 	// without worrying about where to start
 	if (parent.childElementCount) {

package/src/render/moveRange.ts

@@ -1,6 +1,6 @@
 import { type Range } from "../types/Range";
 
-export default function moveRange(parent: Node, range: Range, before: ChildNode | null) {
+export default function moveRange(parent: Node, range: Range, before: ChildNode | null): void {
 	const endNode = range.endNode || range.startNode;
 	let currentNode = range.startNode;
 	while (currentNode) {

package/src/render/popRange.ts

@@ -1,6 +1,6 @@
 import { type Range } from "../types/Range";
 import context from "./context";
 
-export default function popRange(oldRange: Range | null) {
+export default function popRange(oldRange: Range | null): void {
 	context.activeRange = oldRange;
 }

package/src/render/runControl.ts

@@ -12,7 +12,7 @@ export default function runControl(
 	range: Range,
 	anchor: Node | null,
 	create: (anchor: Node | null) => void,
-) {
+): void {
 	// Store the index in the range so that it can be accessed by the statement's
 	// branches
 	range.index = -1;

package/src/render/runControlBranch.ts

@@ -4,7 +4,7 @@ import newRange from "./newRange";
 import popRange from "./popRange";
 import pushRange from "./pushRange";
 
-export default function runControlBranch(range: Range, index: number, create: () => void) {
+export default function runControlBranch(range: Range, index: number, create: () => void): void {
 	// Only run the branch if it's not the current branch
 	if (index >= 0 && range.index === index) {
 		return;

package/src/render/runList.ts

@@ -16,7 +16,7 @@ export default function runList(
 	anchor: Node | null,
 	buildItems: () => ListItem[],
 	create: (item: ListItem, anchor: Node | null) => void,
-) {
+): void {
 	const oldRange = pushRange(range, true);
 
 	let listItems: ListItem[] = [];