@torpor/view 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@torpor/view",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Torpor's view library, for writing and mounting components",
   "type": "module",
   "main": "dist/index.cjs",
@@ -35,7 +35,7 @@
     "@testing-library/user-event": "^14.6.1",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^24.0.3",
+    "@types/node": "^24.0.4",
     "fast-glob": "^3.3.3",
     "jsdom": "^26.1.0",
     "sucrase": "^3.35.0",
@@ -43,7 +43,7 @@
     "tsup": "^8.5.0",
     "tsx": "^4.20.3",
     "typescript": "^5.8.3",
-    "vitest": "^3.2.3"
+    "vitest": "^3.2.4"
   },
   "scripts": {
     "build": "tsc --noEmit && tsup && tsx ./scripts/copyToRepl.ts",

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

@@ -15,7 +15,11 @@ export default function buildAddFragment(
 		const fragment = node.fragment;
 		const fragmentName = `t_fragment_${fragment.number}`;
 		status.imports.add("t_add_fragment");
-		b.append(`t_add_fragment(${fragmentName}, ${parentName}, ${anchorName});`);
+		let params = [fragmentName, parentName, anchorName];
+		if (fragment.endVarName) {
+			params.push(fragment.endVarName);
+		}
+		b.append(`t_add_fragment(${params.join(", ")});`);
 		// TODO: Don't need to do this if the last thing we hydrated was the end node
 		if (fragment.endVarName) {
 			status.imports.add("t_next");

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

@@ -31,10 +31,12 @@ const importsMap: Record<string, string> = {
 	t_anchor: 'import { t_anchor } from "${folder}";',
 	t_child: 'import { t_child } from "${folder}";',
 	t_next: 'import { t_next } from "${folder}";',
+	t_skip: 'import { t_skip } from "${folder}";',
 	t_frg: 'import { t_frg } from "${folder}";',
 	t_elm: 'import { t_elm } from "${folder}";',
 	t_txt: 'import { t_txt } from "${folder}";',
 	t_cmt: 'import { t_cmt } from "${folder}";',
+	t_print: 'import { t_print } from "${folder}";',
 	ListItem: 'import { type ListItem } from "${folder}";',
 	SlotRender: 'import { type SlotRender } from "${folder}";',
 };

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

@@ -153,4 +153,5 @@ export default function buildComponentNode(
 	}
 
 	b.append(`${componentName}(${renderParams});`);
+	b.append("");
 }

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

@@ -71,7 +71,8 @@ export default function buildControlNode(node: ControlNode, status: BuildStatus,
 			buildScriptNode(node, b);
 			break;
 		}
-		case "@function": {
+		case "@function":
+		case "@async function": {
 			b.append("");
 			buildScriptNode(node, b);
 			b.append("");

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

@@ -119,14 +119,21 @@ function maybeAddRootNodeDeclaration(
 	} else {
 		status.imports.add("t_root");
 		const rootName = `t_root_${fragment.number}`;
-		const rootPath = `t_root(${fragmentName})`;
+		const params = [fragmentName];
+		if (firstNode.type === "text") {
+			params.push("true");
+		}
+		const rootPath = `t_root(${params.join(", ")})`;
 		// 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);`);
+		// HACK: pretend we don't have the text param, so that subsequent t_root
+		// uses will be shortened, even if we don't know they are text nodes
+		varPaths.set(`t_root(${fragmentName})`, rootName);
+
+		printDebug(rootName, status, b);
 	}
 }
 
@@ -389,8 +396,9 @@ function declareElementFragmentVars(
 						b.append("// @ts-ignore");
 					}
 					b.append(`const ${node.varName} = ${varPath} as ${elementTypeName(node)};`);
+
+					printDebug(node.varName, status, b);
 				}
-				//b.append(`console.log("${node.varName}", ${node.varName}, ${node.varName}.textContent);`);
 			}
 		}
 	}
@@ -500,7 +508,8 @@ function declareTextFragmentVars(
 					b.append("// @ts-ignore");
 				}
 				b.append(`const ${node.varName} = ${varPath};`);
-				//b.append(`console.log("${node.varName}", ${node.varName}, ${node.varName}.textContent);`);
+
+				printDebug(node.varName, status, b);
 			}
 		}
 	} else {
@@ -636,6 +645,8 @@ function declareParentAndAnchorFragmentVars(
 					b.append(`let ${node.parentName} as HTMLElement;`);
 				} else {
 					b.append(`const ${node.parentName} = ${parentVarPath} as HTMLElement;`);
+
+					printDebug(node.parentName, status, b);
 				}
 				varPaths.set(parentVarPath, node.parentName);
 			} else {
@@ -650,13 +661,20 @@ function declareParentAndAnchorFragmentVars(
 		path.children.push(anchorPath);
 
 		node.varName = nextVarName(`${name}_anchor`, status);
-		const anchorVarPath = getFragmentVarPath(fragment, status, node.varName, anchorPath, varPaths);
+		const anchorVarPath = getFragmentVarPath(
+			fragment,
+			status,
+			`t_anchor(${node.varName}, true)`,
+			anchorPath,
+			varPaths,
+		);
 		if (status.options?.useCreateElement) {
 			b.append(`let ${node.varName};`);
 		} else {
 			status.imports.add("t_anchor");
 			b.append(`const ${node.varName} = t_anchor(${anchorVarPath}) as HTMLElement;`);
-			//b.append(`console.log("${node.varName}", ${node.varName}, ${node.varName}.textContent);`);
+
+			printDebug(node.varName, status, b);
 		}
 	} else {
 		status.imports.add("t_cmt");
@@ -703,8 +721,9 @@ function getFragmentVarPath(
 		varPaths.set(name, name);
 	}
 
-	// Shorten `t_next(t_next(x))` to `t_next(x, 2)`
+	// Shorten `t_next(t_next(x))` to `t_skip(x, 2)`
 	while (varPath.includes("t_next(t_next(")) {
+		status.imports.add("t_skip");
 		const match = varPath.match(/(t_next\(){2,}/)![0];
 		const count = match.length / "t_next(".length;
 		const pos = varPath.indexOf("t_next(t_next(");
@@ -725,9 +744,12 @@ function getFragmentVarPath(
 		}
 		const tail = varPath.substring(end + count);
 		const param = varPath.substring(pos + match.length, end);
-		varPath = `${head}t_next(${param}, ${count})${tail}`;
+		varPath = `${head}t_skip(${param}, ${count})${tail}`;
 	}
 
+	// Set t_next_text back to t_next
+	varPath = varPath.replaceAll("t_next_text", "t_next");
+
 	return varPath;
 }
 
@@ -746,18 +768,14 @@ function getFragmentVarPathPart(
 	}
 	for (let [i, child] of path.children.entries()) {
 		if (i > 0) {
-			status.imports.add("t_next");
-			//if (varPath.startsWith("t_next")) {
-			//	const match = varPath.match(/t_next\(.+?, (\d+)\)/);
-			//	if (match) {
-			//		const count = parseInt(match[1]) + 1;
-			//		varPath = varPath.replace(/t_next\((.+), \d+\)/, `t_next($1, ${count})`);
-			//	} else {
-			//		varPath = varPath.replace(/t_next\((.+)\)/, `t_next($1, 2)`);
-			//	}
-			//} else {
-			varPath = `t_next(${varPath})`;
-			//}
+			if (child.type === "text" || child.type === "space") {
+				// HACK: Using t_next_text just stops t_next(node, true) from
+				// being converted into t_skip
+				varPath = `t_next_text(${varPath}, true)`;
+			} else {
+				status.imports.add("t_next");
+				varPath = `t_next(${varPath})`;
+			}
 		}
 
 		if (i === path.children.length - 1 && child.children.length) {
@@ -767,6 +785,14 @@ function getFragmentVarPathPart(
 	return varPath;
 }
 
+const debug = false;
+function printDebug(varName: string, status: BuildStatus, b: Builder) {
+	if (debug) {
+		status.imports.add("t_print");
+		b.append(`console.log("${varName}:", t_print(${varName}));`);
+	}
+}
+
 /*
 function printPath(path: VariablePath) {
 	let parent = path;

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

@@ -18,7 +18,11 @@ export default function buildRootNode(
 		fragment: node.fragment,
 		path: "0:ch/",
 	});
-	buildNode(node.children[0], status, b, parentName, anchorName, true);
+
+	for (let child of node.children) {
+		buildNode(child, status, b, parentName, anchorName, true);
+	}
+
 	status.fragmentStack.pop();
 
 	buildAddFragment(node, status, b, parentName, anchorName);

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

@@ -18,20 +18,24 @@ const globalStyleRegex = /\:global\((.+)\)/;
 function buildStyleBlock(block: StyleBlock, b: Builder, styleHash: string) {
 	// TODO: This should probably be done while parsing
 	// And handle attribute selectors
-	const selectors = block.selector
-		.split(/([\s*,>+~])/)
-		.filter((s) => !!s.trim())
-		.map((s) => {
-			if (s.length === 1 && "*,>+~".includes(s)) {
-				return s;
-			} else if (globalStyleRegex.test(s)) {
-				return s.match(globalStyleRegex)![1];
-			} else {
-				return `${s}.torp-${styleHash}`;
-			}
-		});
-
-	b.append(`${selectors.join(" ")} {`);
+	if (block.selector.startsWith("@")) {
+		// Just output media queries and properties as-is
+		b.append(`${block.selector} {`);
+	} else {
+		const selectors = block.selector
+			.split(/([\s*,>+~])/)
+			.filter((s) => !!s.trim())
+			.map((s) => {
+				if (s.length === 1 && "*,>+~".includes(s)) {
+					return s;
+				} else if (globalStyleRegex.test(s)) {
+					return s.match(globalStyleRegex)![1];
+				} else {
+					return `${s}.torp-${styleHash}`;
+				}
+			});
+		b.append(`${selectors.join(" ")} {`);
+	}
 	for (let attribute of block.attributes) {
 		buildStyleAttribute(attribute, b);
 	}

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

@@ -126,8 +126,6 @@ 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;
-	}
+	// Add the anchor node
+	status.output += ANCHOR_COMMENT;
 }

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

@@ -77,7 +77,8 @@ export default function buildServerControlNode(
 			buildServerScriptNode(node, b);
 			break;
 		}
-		case "@function": {
+		case "@function":
+		case "@async function": {
 			if (status.output) {
 				b.append(`$output += \`${status.output}\`;`);
 				status.output = "";

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

@@ -1,6 +1,6 @@
 import {
 	ANCHOR_COMMENT,
-	HYDRATION_BRANCH_COMMENT,
+	HYDRATION_BREAK_COMMENT,
 	HYDRATION_END_COMMENT,
 	HYDRATION_START_COMMENT,
 } from "../../types/comments";
@@ -42,7 +42,7 @@ function buildServerForBranch(node: ControlNode, status: BuildServerStatus, b: B
 	b.append(`${node.statement} {`);
 
 	// Separate spaces across boundaries with a careted comment
-	status.output += HYDRATION_BRANCH_COMMENT;
+	status.output += HYDRATION_BREAK_COMMENT;
 
 	for (let child of node.children) {
 		buildServerNode(child, status, b);

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

@@ -1,5 +1,6 @@
 import {
 	ANCHOR_COMMENT,
+	HYDRATION_BREAK_COMMENT,
 	HYDRATION_END_COMMENT,
 	HYDRATION_START_COMMENT,
 } from "../../types/comments";
@@ -40,6 +41,9 @@ export default function buildServerIfNode(
 function buildServerIfBranch(node: ControlNode, status: BuildServerStatus, b: Builder) {
 	b.append(`${node.statement} {`);
 
+	// Separate spaces across boundaries with a careted comment
+	status.output += HYDRATION_BREAK_COMMENT;
+
 	for (let child of node.children) {
 		buildServerNode(child, status, b);
 	}

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

@@ -8,5 +8,7 @@ export default function buildServerRootNode(
 	status: BuildServerStatus,
 	b: Builder,
 ): void {
-	buildServerNode(node.children[0], status, b);
+	for (let child of node.children) {
+		buildServerNode(child, status, b);
+	}
 }

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

@@ -1,5 +1,6 @@
 import {
 	ANCHOR_COMMENT,
+	HYDRATION_BREAK_COMMENT,
 	HYDRATION_END_COMMENT,
 	HYDRATION_START_COMMENT,
 } from "../../types/comments";
@@ -42,6 +43,9 @@ export default function buildServerSwitchNode(
 function buildServerSwitchBranch(node: ControlNode, status: BuildServerStatus, b: Builder) {
 	b.append(`${node.statement} {`);
 
+	// Separate spaces across boundaries with a careted comment
+	status.output += HYDRATION_BREAK_COMMENT;
+
 	for (let child of node.children) {
 		buildServerNode(child, status, b);
 	}

package/src/compile/parse/ParseStatus.ts

@@ -1,6 +1,7 @@
 import { type CompileError } from "../types/CompileError";
 import { type Import } from "../types/Import";
 import { type ElementNode } from "../types/nodes/ElementNode";
+import { type RootNode } from "../types/nodes/RootNode";
 import { type Style } from "../types/styles/Style";
 
 export type ParseStatus = {
@@ -25,7 +26,7 @@ export interface ParseComponentStatus {
 	default?: boolean;
 	/** Params declared by the user in the component's function */
 	params?: string;
-	markup?: ElementNode;
+	markup?: RootNode;
 	stack?: ElementNode[];
 	style?: Style;
 	/** $props that are used in the component's function */

package/src/compile/parse/parseCode.ts

@@ -1,5 +1,6 @@
 import { type TemplateComponent } from "../../types/TemplateComponent";
 import { type ParseResult } from "../types/ParseResult";
+import isElementNode from "../types/nodes/isElementNode";
 import isSpaceNode from "../types/nodes/isSpaceNode";
 import trimQuotes from "../utils/trimQuotes";
 import { type ParseStatus } from "./ParseStatus";
@@ -103,12 +104,7 @@ export default function parseCode(source: string): ParseResult {
 							name: c.name,
 							default: c.default,
 							params: c.params,
-							markup: c.markup
-								? {
-										type: "root",
-										children: [c.markup],
-									}
-								: undefined,
+							markup: c.markup,
 							style: c.style,
 							props: c.props,
 							contextProps: c.contextProps,
@@ -300,8 +296,9 @@ function parseComponentEnd(status: ParseStatus) {
 	// better instead to create whitespace if we don't find it when hydrating...
 	if (
 		current.markup &&
-		current.markup.tagName === "html" &&
-		isSpaceNode(current.markup.children[0])
+		isElementNode(current.markup.children[0]) &&
+		current.markup.children[0].tagName === "html" &&
+		isSpaceNode(current.markup.children[0].children[0])
 	) {
 		current.markup.children.splice(1, 1);
 	}

package/src/compile/parse/parseControl.ts

@@ -1,6 +1,7 @@
 import { type ControlNode } from "../types/nodes/ControlNode";
 import { type ElementNode } from "../types/nodes/ElementNode";
 import { type OperationType } from "../types/nodes/OperationType";
+import { type RootNode } from "../types/nodes/RootNode";
 import isControlNode from "../types/nodes/isControlNode";
 import trimMatched from "../utils/trimMatched";
 import trimStart from "../utils/trimStart";
@@ -30,13 +31,22 @@ const controlOperations = [
 	"@console",
 	"@debugger",
 	"@function",
+	"@async function",
 ];
 
-const standaloneOperations = ["@key", "@html", "@const", "@console", "@debugger", "@function"];
+const standaloneOperations = [
+	"@key",
+	"@html",
+	"@const",
+	"@console",
+	"@debugger",
+	"@function",
+	"@async function",
+];
 
 export default function parseControl(
 	status: ParseStatus,
-	parentNode: ElementNode | ControlNode,
+	parentNode: RootNode | ElementNode | ControlNode,
 ): void {
 	const node = parseControlOpen(status);
 	if (!node) {
@@ -91,7 +101,7 @@ function parseControlOpen(status: ParseStatus): ControlNode | null {
 	for (status.i; status.i < status.source.length; status.i++) {
 		const char = status.source[status.i];
 		if (
-			isSpaceChar(status.source, status.i) ||
+			(isSpaceChar(status.source, status.i) && operation !== "@async") ||
 			(accept(":", status) && operation === "default") ||
 			(accept(".", status) && operation === "@console") ||
 			(accept("(", status, false) && operation === "@html")
@@ -111,7 +121,7 @@ function parseControlOpen(status: ParseStatus): ControlNode | null {
 		statement = parseControlStatement(start, operation, status);
 
 		// Special processing for functions -- read until the closing brace
-		if (operation === "@function") {
+		if (operation === "@function" || operation === "@async function") {
 			statement += ` {${parseInlineScript(status)}}`;
 			accept("}", status);
 		}
@@ -188,7 +198,7 @@ function parseControlStatement(start: number, operation: string, status: ParseSt
  * @param node The control node
  * @param parentNode The parent node
  */
-function wrangleControlNode(node: ControlNode, parentNode: ElementNode | ControlNode) {
+function wrangleControlNode(node: ControlNode, parentNode: RootNode | ElementNode | ControlNode) {
 	// Group
 	// * if/else into an if group
 	// * for into a for group
@@ -274,7 +284,10 @@ function wrangleControlNode(node: ControlNode, parentNode: ElementNode | Control
  * @param status The parse status
  * @param parentNode The parent node
  */
-function parseControlBranches(status: ParseStatus, parentNode: ElementNode | ControlNode) {
+function parseControlBranches(
+	status: ParseStatus,
+	parentNode: RootNode | ElementNode | ControlNode,
+) {
 	// Look ahead and see if we have another control statement
 	// NOTE: We could be more strict here (e.g. we could check that an else is
 	// after an if), but for now we are just leaving it to the JS parser

package/src/compile/parse/parseMarkup.ts

@@ -1,7 +1,10 @@
-import { type ParseStatus } from "./ParseStatus";
+import type { TextNode } from "../types/nodes/TextNode";
+import type { ParseStatus } from "./ParseStatus";
+import parseControl from "./parseControl";
 import parseElement from "./parseElement";
 import accept from "./utils/accept";
-import addError from "./utils/addError";
+import consumeSpace from "./utils/consumeSpace";
+import isSpaceChar from "./utils/isSpaceChar";
 
 export default function parseMarkup(status: ParseStatus, source: string): void {
 	const current = status.components.at(-1);
@@ -20,15 +23,19 @@ export default function parseMarkup(status: ParseStatus, source: string): void {
 		} else if (accept("@/*", status)) {
 			// Swallow block comments
 			status.i = status.source.indexOf("*/", status.i) + 2;
+		} else if (isSpaceChar(status.source, status.i)) {
+			current.markup ??= { type: "root", children: [] };
+			const text: TextNode = { type: "text", content: consumeSpace(status) };
+			current.markup.children.push(text);
 		} else if (accept("<", status, false)) {
 			// Parse the element
-			const start = status.i;
+			current.markup ??= { type: "root", children: [] };
 			const element = parseElement(status);
-			if (current.markup === undefined) {
-				current.markup = element;
-			} else if (!element.tagName.startsWith("/")) {
-				addError(status, `Multiple top-level elements: ${element.tagName}`, start);
-			}
+			current.markup.children.push(element);
+		} else if (accept("@", status, false)) {
+			// Parse the control
+			current.markup ??= { type: "root", children: [] };
+			parseControl(status, current.markup);
 		} else {
 			status.i += 1;
 		}

package/src/compile/types/comments.ts

@@ -1,6 +1,6 @@
 const ANCHOR_COMMENT = "<!>";
 const HYDRATION_START_COMMENT = "<![>";
 const HYDRATION_END_COMMENT = "<!]>";
-const HYDRATION_BRANCH_COMMENT = "<!^>";
+const HYDRATION_BREAK_COMMENT = "<!^>";
 
-export { ANCHOR_COMMENT, HYDRATION_START_COMMENT, HYDRATION_END_COMMENT, HYDRATION_BRANCH_COMMENT };
+export { ANCHOR_COMMENT, HYDRATION_START_COMMENT, HYDRATION_END_COMMENT, HYDRATION_BREAK_COMMENT };

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

@@ -20,4 +20,5 @@ export type OperationType =
 	| "@const"
 	| "@console"
 	| "@debugger"
-	| "@function";
+	| "@function"
+	| "@async function";

package/src/debug/printNode.ts

@@ -1,43 +1,61 @@
-export default function printNode(node: Node | null | undefined) {
-	let textContent = node?.textContent;
-	let paths: string[] = [];
+export default function printNode(node: Node | null | undefined): string {
+	if (!node) {
+		return `\x1b[41m[null]\x1b[0m`;
+	}
 
-	while (node != null) {
-		if (node.nodeType === 1) {
-			// Element
-			let el = node as Element;
-			let p = el.tagName.toLowerCase();
-			if (el.id) p += "#" + el.id;
-			if (el.classList.length) p += "." + Array.from(el.classList).join(".");
-			if (node.parentNode) p += `[${Array.from(node.parentNode.childNodes).indexOf(el)}]`;
-			paths.push(p);
-		} else if (node.nodeType === 3) {
-			// Text
-			let txt = node as Text;
-			let p = "txt";
-			if (node.parentNode) p += `[${Array.from(node.parentNode.childNodes).indexOf(txt)}]`;
-			paths.push(p);
-		} else if (node.nodeType === 8) {
-			// Comment
-			let com = node as Comment;
-			let p = "cmt";
-			if (node.parentNode) p += `[${Array.from(node.parentNode.childNodes).indexOf(com)}]`;
-			paths.push(p);
-		} else if (node.nodeType === 9) {
-			// Document
-			paths.push("#doc");
-		} else if (node.nodeType === 11) {
-			// Document fragment
-			paths.push("#frag");
-		} else {
-			paths.push(node.nodeType + "?");
+	let parent = node;
+	while (parent?.parentNode) {
+		if (parent.parentNode?.nodeType === 1 && parent.parentElement?.tagName === "BODY") {
+			break;
 		}
-		node = node.parentNode;
+		parent = parent.parentNode;
 	}
 
-	return `[ ${paths.reverse().join(" > ") || "null"} -- '${truncate(textContent || "", 40)}' ]`;
+	let status = { p: "" };
+	printChildNode(parent!, node!, status);
+
+	return status.p;
 }
 
-function truncate(input: string, length: number) {
-	return input.length > length ? `${input.substring(0, length)}…` : input;
+function printChildNode(node: Node, target: Node, status: { p: string }) {
+	if (node.nodeType === 1) {
+		// Element
+		let el = node as Element;
+		let p = `<${el.tagName.toLowerCase()}>`;
+		if (node === target) {
+			p = `\x1b[44m${p}\x1b[0m`;
+		}
+		status.p += p;
+	} else if (node.nodeType === 3) {
+		// Text
+		let p = "…";
+		if (node === target) {
+			p = `\x1b[44m${p}\x1b[0m`;
+		}
+		status.p += p;
+	} else if (node.nodeType === 8) {
+		// Comment
+		let com = node as Comment;
+		let p = `<!${com.data}>`;
+		if (node === target) {
+			p = `\x1b[44m${p}\x1b[0m`;
+		}
+		status.p += p;
+	} else if (node.nodeType === 9) {
+		// Document
+	} else if (node.nodeType === 11) {
+		// Document fragment
+	} else {
+	}
+
+	for (let child of node.childNodes) {
+		printChildNode(child, target, status);
+	}
+
+	if (node.nodeType === 1) {
+		// Element
+		let el = node as Element;
+		let p = `</${el.tagName.toLowerCase()}>`;
+		status.p += p;
+	}
 }