@typed/template 0.9.6 → 0.11.0

package/src/Html.ts

@@ -6,51 +6,62 @@ import type { CurrentEnvironment } from "@typed/environment"
 import * as Fx from "@typed/fx/Fx"
 import * as Sink from "@typed/fx/Sink"
 import { TypeId } from "@typed/fx/TypeId"
+import { join } from "effect/Array"
 import * as Effect from "effect/Effect"
 import * as Layer from "effect/Layer"
 import * as Option from "effect/Option"
-import { join } from "effect/ReadonlyArray"
+import type * as Record from "effect/Record"
 import type * as Scope from "effect/Scope"
 import { isDirective } from "./Directive.js"
 import type { ServerEntry } from "./Entry.js"
 import type { HtmlChunk, PartChunk, SparsePartChunk, TextChunk } from "./HtmlChunk.js"
 import { templateToHtmlChunks } from "./HtmlChunk.js"
-import { parse } from "./internal/parser.js"
+import { parse } from "./internal/parser2.js"
 import { partNodeToPart } from "./internal/server.js"
-import { TEXT_START, TYPED_HOLE } from "./Meta.js"
+import { isNullOrUndefined } from "./internal/v2/helpers.js"
+import { TEXT_START, TYPED_HOLE_END, TYPED_HOLE_START } from "./Meta.js"
 import type { Placeholder } from "./Placeholder.js"
 import type { Renderable } from "./Renderable.js"
 import * as RenderContext from "./RenderContext.js"
-import { HtmlRenderEvent, isRenderEvent } from "./RenderEvent.js"
+import { HtmlRenderEvent, isHtmlRenderEvent } from "./RenderEvent.js"
 import type { RenderEvent } from "./RenderEvent.js"
+import * as RenderQueue from "./RenderQueue.js"
 import { RenderTemplate } from "./RenderTemplate.js"
 
-const toHtml = (r: RenderEvent) => (r as HtmlRenderEvent).html
+const toHtml = (r: RenderEvent | null) => r === null ? "" : (r as HtmlRenderEvent).html
 
 /**
  * @since 1.0.0
  */
-export const serverLayer: Layer.Layer<RenderContext.RenderContext | RenderTemplate | CurrentEnvironment> = Layer
-  .provideMerge(
-    RenderTemplate.layer(RenderContext.RenderContext.with(renderHtmlTemplate)),
-    RenderContext.server
-  )
+export const serverLayer: Layer.Layer<
+  | RenderContext.RenderContext
+  | RenderQueue.RenderQueue
+  | RenderTemplate
+  | CurrentEnvironment
+> = Layer.provideMerge(
+  RenderTemplate.layer(RenderContext.RenderContext.with(renderHtmlTemplate)),
+  RenderContext.server
+).pipe(Layer.provideMerge(RenderQueue.sync))
 
 /**
  * @since 1.0.0
  */
-export const staticLayer: Layer.Layer<RenderContext.RenderContext | RenderTemplate | CurrentEnvironment> = Layer
-  .provideMerge(
-    RenderTemplate.layer(RenderContext.RenderContext.with(renderHtmlTemplate)),
-    RenderContext.static
-  )
+export const staticLayer: Layer.Layer<
+  | RenderContext.RenderContext
+  | RenderQueue.RenderQueue
+  | RenderTemplate
+  | CurrentEnvironment
+> = Layer.provideMerge(
+  RenderTemplate.layer(RenderContext.RenderContext.with(renderHtmlTemplate)),
+  RenderContext.static
+).pipe(Layer.provideMerge(RenderQueue.sync))
 
 /**
  * @since 1.0.0
  */
 export function renderToHtml<E, R>(
-  fx: Fx.Fx<RenderEvent, E, R>
-): Fx.Fx<string, E, R | RenderTemplate | RenderContext.RenderContext> {
+  fx: Fx.Fx<RenderEvent | null, E, R>
+): Fx.Fx<string, E, R> {
   return Fx.map(fx, toHtml)
 }
 
@@ -58,8 +69,8 @@ export function renderToHtml<E, R>(
  * @since 1.0.0
  */
 export function renderToHtmlString<E, R>(
-  fx: Fx.Fx<RenderEvent, E, R>
-): Effect.Effect<string, E, R | RenderTemplate | RenderContext.RenderContext> {
+  fx: Fx.Fx<RenderEvent | null, E, R>
+): Effect.Effect<string, E, R> {
   return Effect.map(Fx.toReadonlyArray(renderToHtml(fx)), join(""))
 }
 
@@ -73,24 +84,28 @@ export function renderHtmlTemplate(ctx: RenderContext.RenderContext) {
   ): Fx.Fx<
     RenderEvent,
     Placeholder.Error<Values[number]>,
-    Scope.Scope | Placeholder.Context<readonly [] extends Values ? never : Values[number]>
+    | Scope.Scope
+    | Placeholder.Context<Values[number]>
   > => {
     const isStatic = ctx.environment === "static" || ctx.environment === "test:static"
     const entry = getServerEntry(templateStrings, ctx.templateCache, isStatic)
 
     if (values.length === 0) {
-      return Fx.succeed(HtmlRenderEvent((entry.chunks[0] as TextChunk).value))
+      return Fx.succeed(
+        HtmlRenderEvent((entry.chunks[0] as TextChunk).value, true)
+      )
     } else {
-      return Fx.filter(
-        Fx.mergeOrdered(
-          entry.chunks.map((chunk) =>
-            renderChunk<
-              Placeholder.Error<Values[number]>,
-              Placeholder.Context<readonly [] extends Values ? never : Values[number]>
-            >(chunk, values, isStatic)
-          )
-        ),
-        (x) => (x.valueOf() as string).length > 0
+      const lastIndex = entry.chunks.length - 1
+      return Fx.mergeOrdered(
+        entry.chunks.map((chunk, i) =>
+          renderChunk<
+            Placeholder.Error<Values[number]>,
+            Placeholder.Context<Values[number]>
+          >(chunk, values, isStatic, i === lastIndex)
+        )
+      ).pipe(
+        Fx.filter((x) => x.html.length > 0),
+        Fx.dropAfter((x) => x.done)
       )
     }
   }
@@ -99,47 +114,70 @@ export function renderHtmlTemplate(ctx: RenderContext.RenderContext) {
 function renderChunk<E, R>(
   chunk: HtmlChunk,
   values: ReadonlyArray<Renderable<any, any>>,
-  isStatic: boolean
-): Fx.Fx<RenderEvent, E, R> {
+  isStatic: boolean,
+  done: boolean
+): Fx.Fx<HtmlRenderEvent, E, R | Scope.Scope> {
   if (chunk._tag === "text") {
-    return Fx.succeed(HtmlRenderEvent(chunk.value))
+    return Fx.succeed(HtmlRenderEvent(chunk.value, done))
   } else if (chunk._tag === "part") {
-    return renderPart<E, R>(chunk, values, isStatic)
+    return renderPart<E, R>(chunk, values, isStatic, done)
   } else {
-    return renderSparsePart<E, R>(chunk, values) as Fx.Fx<RenderEvent, E, R>
+    return renderSparsePart<E, R>(chunk, values, done) as Fx.Fx<
+      HtmlRenderEvent,
+      E,
+      R
+    >
   }
 }
 
-function renderNode<E, R>(renderable: Renderable<any, any>, isStatic: boolean): Fx.Fx<RenderEvent, E, R> {
+function renderNode<E, R>(
+  renderable: Renderable<any, any>,
+  isStatic: boolean,
+  done: boolean
+): Fx.Fx<HtmlRenderEvent, E, R | Scope.Scope> {
   switch (typeof renderable) {
     case "string":
     case "number":
     case "boolean":
     case "bigint":
-      return Fx.succeed(HtmlRenderEvent((isStatic ? "" : TEXT_START) + renderable.toString()))
+      return Fx.succeed(
+        HtmlRenderEvent(
+          (isStatic ? "" : TEXT_START) + renderable.toString(),
+          done
+        )
+      )
     case "undefined":
     case "object":
-      return renderObject(renderable, isStatic)
+      return renderObject(renderable, isStatic, done)
     default:
       return Fx.empty
   }
 }
 
-function renderObject<E, R>(renderable: object | null | undefined, isStatic: boolean) {
-  if (renderable === null || renderable === undefined) {
-    return isStatic ? Fx.empty : Fx.succeed(HtmlRenderEvent(TEXT_START))
+function renderObject<E, R>(
+  renderable: object | null | undefined,
+  isStatic: boolean,
+  done: boolean
+): Fx.Fx<HtmlRenderEvent, E, R | Scope.Scope> {
+  if (isNullOrUndefined(renderable)) {
+    return isStatic ? Fx.empty : Fx.succeed(HtmlRenderEvent(TEXT_START, done))
   } else if (Array.isArray(renderable)) {
-    return Fx.mergeOrdered(renderable.map((r) => renderNode(r, isStatic))) as any
-  } else if (Fx.isFx<R, E, Renderable>(renderable)) {
-    // @ts-ignore Types are to deep to infer
-    return Fx.concatMap(takeOneIfNotRenderEvent(renderable), (r) => renderNode(r, isStatic) as any)
+    const lastIndex = renderable.length - 1
+    return Fx.mergeOrdered(
+      renderable.map((r, i) => renderNode(r, isStatic, done && i === lastIndex))
+    ) as any
   } else if (Effect.isEffect(renderable)) {
-    return Fx.switchMap(
-      Fx.fromEffect(renderable as Effect.Effect<Renderable, E, R>),
-      (r) => renderNode<E, R>(r, isStatic)
+    return Fx.fromFxEffect(
+      Effect.map(renderable as Effect.Effect<Renderable, E, R>, (r) => renderNode<E, R>(r, isStatic, done))
     )
-  } else if (isRenderEvent(renderable)) {
-    return Fx.succeed(renderable)
+  } else if (Fx.isFx<RenderEvent, E, R>(renderable)) {
+    return takeOneIfNotRenderEvent(renderable, isStatic, done)
+  } else if (isHtmlRenderEvent(renderable)) {
+    if (done) {
+      return Fx.succeed(renderable)
+    } else {
+      return Fx.succeed(HtmlRenderEvent(renderable.html, done))
+    }
   } else {
     return Fx.empty
   }
@@ -148,55 +186,95 @@ function renderObject<E, R>(renderable: object | null | undefined, isStatic: boo
 function renderPart<E, R>(
   chunk: PartChunk,
   values: ReadonlyArray<Renderable<any, any>>,
-  isStatic: boolean
-): Fx.Fx<RenderEvent, E, R> {
+  isStatic: boolean,
+  done: boolean
+): Fx.Fx<HtmlRenderEvent, E, R | Scope.Scope> {
   const { node, render } = chunk
   const renderable: Renderable<any, any> = values[node.index]
 
   // Refs and events are not rendered into HTML
   if (isDirective<E, R>(renderable)) {
-    return Fx.make<RenderEvent, E, R>((sink: Sink.Sink<RenderEvent, E>) => {
-      const part = partNodeToPart(
-        node,
-        (value) => sink.onSuccess(HtmlRenderEvent(render(value)))
-      )
+    return Fx.make<HtmlRenderEvent, E, R>(
+      (sink: Sink.Sink<HtmlRenderEvent, E>) => {
+        const part = partNodeToPart(node, (value) => sink.onSuccess(HtmlRenderEvent(render(value), done)))
 
-      return Effect.catchAllCause(renderable(part), sink.onFailure)
-    })
+        return Effect.catchAllCause(renderable(part), sink.onFailure)
+      }
+    )
   } else if (node._tag === "node") {
-    if (isStatic) return renderNode<E, R>(renderable, isStatic)
-    return Fx.append(renderNode<E, R>(renderable, isStatic), HtmlRenderEvent(TYPED_HOLE(node.index)))
+    if (isStatic) return renderNode<E, R>(renderable, isStatic, done)
+    let first = true
+    return Fx.continueWith(
+      Fx.map(renderNode<E, R>(renderable, isStatic, true), (x) => {
+        if (x.done) {
+          const y = HtmlRenderEvent(
+            (first ? TYPED_HOLE_START(node.index) : "") +
+              x.html +
+              TYPED_HOLE_END(node.index),
+            done
+          )
+          first = false
+          return y
+        } else {
+          if (first) {
+            first = false
+            return HtmlRenderEvent(
+              TYPED_HOLE_START(node.index) + x.html,
+              false
+            )
+          }
+          return x
+        }
+      }),
+      () =>
+        first
+          ? Fx.succeed(
+            HtmlRenderEvent(
+              TYPED_HOLE_START(node.index) + TYPED_HOLE_END(node.index),
+              done
+            )
+          )
+          : Fx.empty
+    )
   } else if (node._tag === "properties") {
     if (renderable == null) return Fx.empty
-    return Fx.map(
-      Fx.take(
-        Fx.struct(
-          Object.fromEntries(Object.entries(renderable).map(([k, v]) => [k, unwrapRenderable(v)] as const))
-        ),
-        1
-      ),
-      render
-    ) as any
-  } else {
-    if (renderable === null) return Fx.succeed(HtmlRenderEvent(render(renderable)))
 
-    const html = Fx.filterMap(Fx.take(unwrapRenderable<E, R>(renderable), 1), (value) => {
-      const s = render(value)
+    return Fx.mergeAll(
+      Object.entries(renderable as Record<string, Renderable<any, any>>).map(
+        ([key, renderable]) => {
+          return Fx.filterMap(
+            Fx.take(unwrapRenderable<E, R>(renderable), 1),
+            (value) => {
+              const s = render({ [key]: value })
 
-      return s ? Option.some(HtmlRenderEvent(s)) : Option.none()
-    })
-
-    if (isStatic === false && node._tag === "text-part") {
-      return Fx.append(Fx.prepend(html, HtmlRenderEvent(TEXT_START)), HtmlRenderEvent(TYPED_HOLE(node.index)))
+              return s ? Option.some(HtmlRenderEvent(s, done)) : Option.none()
+            }
+          )
+        }
+      )
+    )
+  } else {
+    if (renderable === null) {
+      return Fx.succeed(HtmlRenderEvent(render(renderable), done))
     }
 
+    const html = Fx.filterMap(
+      Fx.take(unwrapRenderable<E, R>(renderable), 1),
+      (value) => {
+        const s = render(value)
+
+        return s ? Option.some(HtmlRenderEvent(s, done)) : Option.none()
+      }
+    )
+
     return html
   }
 }
 
 function renderSparsePart<E, R>(
   chunk: SparsePartChunk,
-  values: ReadonlyArray<Renderable<any, any>>
+  values: ReadonlyArray<Renderable<any, any>>,
+  done: boolean
 ): Fx.Fx<RenderEvent, E, R> {
   const { node, render } = chunk
 
@@ -211,7 +289,9 @@ function renderSparsePart<E, R>(
           if (isDirective<E, R>(renderable)) {
             return Fx.make<unknown, E, R>((sink: Sink.Sink<unknown, E>) =>
               Effect.catchAllCause(
-                renderable(partNodeToPart(node, (value) => sink.onSuccess(value))),
+                renderable(
+                  partNodeToPart(node, (value) => sink.onSuccess(value))
+                ),
                 sink.onFailure
               )
             )
@@ -222,20 +302,42 @@ function renderSparsePart<E, R>(
       ),
       1
     ),
-    (value) => HtmlRenderEvent(render(value))
+    (value) => HtmlRenderEvent(render(value), done)
   )
 }
 
-function takeOneIfNotRenderEvent<A, E, R>(fx: Fx.Fx<A, E, R>): Fx.Fx<A, E, R> {
-  return Fx.make<A, E, R>((sink) =>
-    Sink.withEarlyExit(sink, (sink) =>
+function takeOneIfNotRenderEvent<A, E, R>(
+  fx: Fx.Fx<A, E, R>,
+  isStatic: boolean,
+  done: boolean
+): Fx.Fx<HtmlRenderEvent, E, R> {
+  return Fx.make<HtmlRenderEvent, E, R>((sink) =>
+    Effect.uninterruptible(Sink.withEarlyExit(sink, (sink) =>
       fx.run(
-        Sink.make(
-          sink.onFailure,
-          (event) =>
-            isRenderEvent(event) ? sink.onSuccess(event) : Effect.zipRight(sink.onSuccess(event), sink.earlyExit)
-        )
-      ))
+        Sink.make(sink.onFailure, (event) => {
+          if (isHtmlRenderEvent(event)) {
+            if (done) {
+              return sink.onSuccess(event)
+            } else {
+              return sink.onSuccess(HtmlRenderEvent(event.html, false))
+            }
+          }
+
+          if (isNullOrUndefined(event)) {
+            return sink.earlyExit
+          }
+
+          return Effect.zipRight(
+            sink.onSuccess(
+              HtmlRenderEvent(
+                (isStatic ? "" : TEXT_START) + String(event),
+                done
+              )
+            ),
+            sink.earlyExit
+          )
+        })
+      )))
   )
 }
 
@@ -262,17 +364,24 @@ function getServerEntry(
   }
 }
 
-function unwrapRenderable<E, R>(renderable: Renderable<any, any>): Fx.Fx<any, E, R> {
+function unwrapRenderable<E, R>(
+  renderable: Renderable<any, any>
+): Fx.Fx<any, E, R> {
   switch (typeof renderable) {
     case "undefined":
     case "object": {
-      if (renderable === null || renderable === undefined) return Fx.succeed(null)
-      else if (Array.isArray(renderable)) {
-        return Fx.tuple(renderable.map(unwrapRenderable)) as any
+      if (isNullOrUndefined(renderable)) {
+        return Fx.null
+      } else if (Array.isArray(renderable)) {
+        return Fx.mergeOrdered(
+          renderable.map((r) => takeOneIfNotRenderEvent(unwrapRenderable(r), true, false))
+        ) as any
+      } else if (Effect.EffectTypeId in renderable) {
+        return Fx.fromFxEffect(
+          Effect.map(renderable as any, unwrapRenderable<any, any>)
+        )
       } else if (TypeId in renderable) {
         return renderable as any
-      } else if (Effect.EffectTypeId in renderable) {
-        return Fx.fromFxEffect(Effect.map(renderable as any, unwrapRenderable<any, any>))
       } else return Fx.succeed(renderable as any)
     }
     default:

package/src/HtmlChunk.ts

@@ -1,7 +1,8 @@
 /**
  * @since 1.0.0
  */
-import { TYPED_HASH } from "./Meta.js"
+import { keyToPartType } from "./internal/utils.js"
+import { isNullOrUndefined } from "./internal/v2/helpers.js"
 import type {
   Attribute,
   ElementNode,
@@ -64,11 +65,27 @@ export type AttrValue = string | null | undefined | ReadonlyArray<AttrValue>
  * @since 1.0.0
  */
 export function templateToHtmlChunks({ hash, nodes }: Template, isStatic: boolean) {
-  const chunks = fuseTextChunks(nodes.flatMap((node) => nodeToHtmlChunk(node, isStatic ? undefined : hash)))
+  if (isStatic) {
+    return fuseTextChunks(nodes.flatMap((node) => nodeToHtmlChunk(node)))
+  }
+
+  const chunks = fuseTextChunks([
+    templateStart(hash),
+    ...nodes.flatMap((node) => nodeToHtmlChunk(node, hash)),
+    templateEnd(hash)
+  ])
 
   return chunks
 }
 
+function templateStart(hash: string): HtmlChunk {
+  return new TextChunk(`<!--typed-${hash}-->`)
+}
+
+function templateEnd(hash: string): HtmlChunk {
+  return new TextChunk(`<!--/typed-${hash}-->`)
+}
+
 function fuseTextChunks(chunks: Array<HtmlChunk>): ReadonlyArray<HtmlChunk> {
   const output: Array<HtmlChunk> = []
 
@@ -124,19 +141,18 @@ function nodeToHtmlChunk(node: Node, hash?: string): Array<HtmlChunk> {
 }
 
 function elementToHtmlChunks(
-  { attributes, children, tagName }: ElementNode,
-  hash?: string
+  { attributes, children, tagName }: ElementNode
 ): Array<HtmlChunk> {
   if (attributes.length === 0) {
     return [
-      new TextChunk(openTag(tagName, hash) + ">"),
+      new TextChunk(openTag(tagName) + ">"),
       ...children.flatMap((c) => nodeToHtmlChunk(c)),
       new TextChunk(closeTag(tagName))
     ]
   }
 
   const chunks: Array<HtmlChunk> = [
-    new TextChunk(openTag(tagName, hash)),
+    new TextChunk(openTag(tagName)),
     ...attributes.map((a) => attributeToHtmlChunk(a)),
     new TextChunk(">"),
     ...children.flatMap((c) => nodeToHtmlChunk(c)),
@@ -147,15 +163,14 @@ function elementToHtmlChunks(
 }
 
 function selfClosingElementToHtmlChunks(
-  { attributes, tagName }: SelfClosingElementNode,
-  hash?: string
+  { attributes, tagName }: SelfClosingElementNode
 ): Array<HtmlChunk> {
   if (attributes.length === 0) {
-    return [new TextChunk(openTag(tagName, hash) + "/>")]
+    return [new TextChunk(openTag(tagName) + " />")]
   }
 
   const chunks: Array<HtmlChunk> = [
-    new TextChunk(openTag(tagName, hash)),
+    new TextChunk(openTag(tagName)),
     ...attributes.map((a) => attributeToHtmlChunk(a)),
     new TextChunk(`/>`)
   ]
@@ -168,19 +183,18 @@ function textToHtmlChunks(text: Text): HtmlChunk {
 }
 
 function textOnlyElementToHtmlChunks(
-  { attributes, children, tagName }: TextOnlyElement,
-  hash?: string
+  { attributes, children, tagName }: TextOnlyElement
 ): Array<HtmlChunk> {
   if (attributes.length === 0) {
     return [
-      new TextChunk(openTag(tagName, hash) + ">"),
+      new TextChunk(openTag(tagName) + ">"),
       ...children.map((c) => textToHtmlChunks(c)),
       new TextChunk(closeTag(tagName))
     ]
   }
 
   const chunks: Array<HtmlChunk> = [
-    new TextChunk(openTag(tagName, hash)),
+    new TextChunk(openTag(tagName)),
     ...attributes.map((a) => attributeToHtmlChunk(a)),
     new TextChunk(">"),
     ...children.map((c) => textToHtmlChunks(c)),
@@ -195,11 +209,11 @@ type AttrMap = {
 }
 
 const attrMap: AttrMap = {
-  attribute: (attr) => new TextChunk(` ${attr.name}="${attr.value}"`),
-  attr: (attr) => new PartChunk(attr, (value) => (value == null ? `` : ` ${attr.name}="${value}"`)),
+  attribute: (attr) => new TextChunk(` ${attr.name}="${escape(attr.value)}"`),
+  attr: (attr) => new PartChunk(attr, (value) => (value == null ? `` : ` ${attr.name}="${escape(value)}"`)),
   boolean: (attr) => new TextChunk(" " + attr.name),
   "boolean-part": (attr) => new PartChunk(attr, (value) => (value ? ` ${attr.name}` : "")),
-  "className-part": (attr) => new PartChunk(attr, (value) => (value ? ` class="${value}"` : "")),
+  "className-part": (attr) => new PartChunk(attr, (value) => (value ? ` class="${escape(value)}"` : "")),
   data: (attr) =>
     new PartChunk(attr, (value) => value == null ? `` : datasetToString(value as Readonly<Record<string, string>>)),
   event: () => new TextChunk(""),
@@ -209,24 +223,45 @@ const attrMap: AttrMap = {
       attr,
       (
         value
-      ) => (value == null
-        ? ``
-        : " " + Object.entries(value).map(([key, value]) =>
-          value === true ? key : value === false ? "" : `${key}="${escape(value)}"`
-        ).join(" "))
+      ) => {
+        if (value == null) return ""
+
+        // Each call has only 1 key-value pair
+        const [k, v] = Object.entries(value)[0]
+
+        if (value == null) return ""
+
+        const [type, key] = keyToPartType(k)
+
+        switch (type) {
+          case "attr":
+          case "property":
+            return v == null ? "" : ` ${key}="${escape(v)}"`
+          case "boolean":
+            return v ? key : ""
+          case "class":
+            return ` class="${escape(v)}"`
+          case "data": {
+            const d = datasetToString(v)
+            return d.length === 0 ? "" : ` ${d}`
+          }
+          default:
+            return ""
+        }
+      }
     ),
   ref: () => new TextChunk(""),
   "sparse-attr": (attr) =>
     new SparsePartChunk(attr, (values) => {
       return values == null
         ? ``
-        : ` ${attr.name}="${Array.isArray(values) ? values.filter(isString).join("") : values}"`
+        : ` ${attr.name}="${Array.isArray(values) ? escape(values.filter(isString).join("")) : escape(values)}"`
     }),
   "sparse-class-name": (attr) =>
     new SparsePartChunk(attr, (values) => {
       return values == null
         ? ``
-        : ` class="${Array.isArray(values) ? values.filter(isString).join(" ") : values}"`
+        : ` class="${Array.isArray(values) ? escape(values.filter(isString).join("")) : escape(values)}"`
     }),
   text: (attr) => new TextChunk(attr.value)
 }
@@ -241,16 +276,14 @@ function isString(value: unknown): value is string {
 
 function datasetToString(dataset: Readonly<Record<string, string | undefined>>) {
   const s = Object.entries(dataset)
-    .map(([key, value]) => (value === undefined ? `data-${key}` : `data-${key}="${value}"`))
+    .map(([key, value]) => (value === undefined ? `data-${key}` : `data-${key}="${escape(value)}"`))
     .join(" ")
 
   return s.length === 0 ? "" : " " + s
 }
 
-function openTag(tagName: string, hash?: string): string {
-  if (hash === undefined) return `<${tagName}`
-
-  return `<${tagName} ${TYPED_HASH(hash)}`
+function openTag(tagName: string): string {
+  return `<${tagName}`
 }
 
 function closeTag(tagName: string): string {
@@ -260,12 +293,26 @@ function closeTag(tagName: string): string {
 /**
  * @since 1.0.0
  */
-export function escape(s: unknown) {
+export function escape(s: unknown): string {
   switch (typeof s) {
     case "string":
     case "number":
     case "boolean":
+    case "bigint":
       return escapeHtml(String(s))
+    case "object": {
+      if (isNullOrUndefined(s)) {
+        return ""
+      } else if (Array.isArray(s)) {
+        return s.map(escape).join("")
+      } else if (s instanceof Date) {
+        return escapeHtml(s.toISOString())
+      } else if (s instanceof RegExp) {
+        return escapeHtml(s.toString())
+      } else {
+        return escapeHtml(JSON.stringify(s))
+      }
+    }
     default:
       return escapeHtml(JSON.stringify(s))
   }