make HTML a class

Author: tombl

src/client/parts.ts

@@ -5,6 +5,7 @@ import {
 	is_keyed,
 	is_renderable,
 	single_part_template,
+	unwrap_html,
 	type Displayable,
 	type Key,
 	type Renderable,
@@ -172,7 +173,7 @@ export function create_child_part(
 		}
 
 		if (is_html(value)) {
-			const { _dynamics: dynamics, _statics: statics } = value
+			const { _statics: statics, _dynamics: dynamics } = unwrap_html(value)
 			const template = compile_template(statics)
 
 			assert(

src/client/root.ts

@@ -5,6 +5,7 @@ import {
 	is_keyed,
 	is_renderable,
 	single_part_template,
+	unwrap_html,
 	type Displayable,
 	type Key,
 	type Renderable,
@@ -111,7 +112,8 @@ function hydrate_child_part(span: Span, value: unknown) {
 	}
 
 	if (is_html(value)) {
-		template = compile_template(value._statics)
+		const { _statics: statics, _dynamics: dynamics } = unwrap_html(value)
+		template = compile_template(statics)
 
 		const node_by_part: Array<Node | Span> = []
 
@@ -180,7 +182,7 @@ function hydrate_child_part(span: Span, value: unknown) {
 								_start: child.previousSibling,
 								_end: end,
 							},
-							value._dynamics[dynamic_index],
+							dynamics[dynamic_index],
 						),
 					]
 				case PART_DIRECTIVE:

src/index.ts

@@ -1,6 +1,6 @@
 export { html, keyed, type Displayable, type HTML, type Renderable } from './shared.ts'
 
-import { is_html } from './shared.ts'
+import { is_html, unwrap_html } from './shared.ts'
 
 if (__DEV__) {
 	type JsonML = string | readonly [tag: string, attrs?: Record<string, any>, ...children: JsonML[]]
@@ -13,11 +13,11 @@ if (__DEV__) {
 	;((globalThis as { devtoolsFormatters?: Formatter[] }).devtoolsFormatters ??= []).push({
 		header(value) {
 			if (!is_html(value)) return null
+			const { _statics: statics, _dynamics: dynamics } = unwrap_html(value)
 
 			const children: JsonML[] = []
-			for (let i = 0; i < value._dynamics.length; i++)
-				children.push(value._statics[i], ['object', { object: value._dynamics[i] }])
-			children.push(value._statics[value._statics.length - 1])
+			for (let i = 0; i < dynamics.length; i++) children.push(statics[i], ['object', { object: dynamics[i] }])
+			children.push(statics[statics.length - 1])
 
 			return ['span', {}, 'html`', ...children, '`']
 		},

src/server.ts

@@ -1,4 +1,13 @@
-import { assert, is_html, is_iterable, is_renderable, lexer, single_part_template, type Displayable } from './shared.ts'
+import {
+	assert,
+	is_html,
+	is_iterable,
+	is_renderable,
+	lexer,
+	single_part_template,
+	unwrap_html,
+	type Displayable,
+} from './shared.ts'
 
 interface PartRenderer {
 	replace_start: number
@@ -153,7 +162,7 @@ function* render_child(value: unknown): Generator<string, void, void> {
 	if (is_iterable(value)) {
 		for (const item of value) yield* render_child(item)
 	} else if (is_html(value)) {
-		const { _statics: statics, _dynamics: dynamics } = value
+		const { _statics: statics, _dynamics: dynamics } = unwrap_html(value)
 		const template = compile_template(statics)
 
 		assert(

src/shared.ts

@@ -31,23 +31,26 @@ export function assert(value: unknown, message?: string): asserts value {
 	}
 }
 
-export interface HTML {
-	[html_tag]: true
-	/* @internal */ _statics: TemplateStringsArray
-	/* @internal */ _dynamics: unknown[]
+export let unwrap_html: (value: HTML) => { _statics: TemplateStringsArray; _dynamics: unknown[] }
+
+export class HTML {
+	#statics: TemplateStringsArray
+	#dynamics: unknown[]
+	constructor(statics: TemplateStringsArray, dynamics: unknown[]) {
+		this.#statics = statics
+		this.#dynamics = dynamics
+	}
+	static {
+		unwrap_html = value => ({ _statics: value.#statics, _dynamics: value.#dynamics })
+	}
 }
 
-const html_tag: unique symbol = Symbol()
 export function html(statics: TemplateStringsArray, ...dynamics: unknown[]): HTML {
-	return {
-		[html_tag]: true,
-		_dynamics: dynamics,
-		_statics: statics,
-	}
+	return new HTML(statics, dynamics)
 }
 
 export function is_html(value: unknown): value is HTML {
-	return typeof value === 'object' && value !== null && html_tag in value
+	return value instanceof HTML
 }
 
 export function single_part_template(part: Displayable): HTML {