make Keyed a class

Author: tombl

src/client/parts.ts

@@ -6,6 +6,7 @@ import {
 	is_renderable,
 	single_part_template,
 	unwrap_html,
+	unwrap_keyed,
 	type Displayable,
 	type Key,
 	type Renderable,
@@ -120,7 +121,7 @@ export function create_child_part(
 			let i = 0
 			let end = span._start
 			for (const item of value) {
-				const key = is_keyed(item) ? item._key : (item as Key)
+				const key = is_keyed(item) ? unwrap_keyed(item) : (item as Key)
 				if (entries.length <= i) {
 					const span = create_span_after(end)
 					entries[i] = { _span: span, _part: create_child_part(span), _key: key }

src/client/root.ts

@@ -6,6 +6,7 @@ import {
 	is_renderable,
 	single_part_template,
 	unwrap_html,
+	unwrap_keyed,
 	type Displayable,
 	type Key,
 	type Renderable,
@@ -97,7 +98,7 @@ function hydrate_child_part(span: Span, value: unknown) {
 		let end = span._start
 
 		for (const item of value) {
-			const key = is_keyed(item) ? item._key : (item as Key)
+			const key = is_keyed(item) ? unwrap_keyed(item) : (item as Key)
 
 			const start = end.nextSibling
 			assert(start && is_comment(start) && start.data === '?[')

src/shared.ts

@@ -32,6 +32,7 @@ export function assert(value: unknown, message?: string): asserts value {
 }
 
 export let unwrap_html: (value: HTML) => { _statics: TemplateStringsArray; _dynamics: unknown[] }
+export let unwrap_keyed: (value: Keyed) => Key
 
 export class HTML {
 	#statics: TemplateStringsArray
@@ -58,20 +59,26 @@ export function single_part_template(part: Displayable): HTML {
 }
 
 export type Key = string | number | bigint | boolean | symbol | object | null
-export interface Keyed extends Renderable {
-	[keyed_tag]: true
-	/** @internal */ _key: Key
+
+export class Keyed implements Renderable {
+	#key: Key
+	#displayable: Displayable
+	constructor(displayable: Displayable, key: Key) {
+		this.#key = key
+		this.#displayable = displayable
+	}
+	render(): Displayable {
+		return this.#displayable
+	}
+	static {
+		unwrap_keyed = value => value.#key
+	}
 }
 
-const keyed_tag: unique symbol = Symbol()
 export function keyed(displayable: Displayable, key: Key): Keyed {
-	return {
-		[keyed_tag]: true,
-		_key: key,
-		render: () => displayable,
-	}
+	return new Keyed(displayable, key)
 }
 
-export function is_keyed(value: any): value is Keyed {
-	return typeof value === 'object' && value !== null && keyed_tag in value
+export function is_keyed(value: unknown): value is Keyed {
+	return value instanceof Keyed
 }