@typed/template 0.9.6 → 0.10.0

package/src/Renderable.ts

@@ -10,7 +10,7 @@ import type { RenderEvent } from "./RenderEvent.js"
 /**
  * @since 1.0.0
  */
-export type Renderable<R = never, E = never> =
+export type Renderable<E = never, R = never> =
   | Renderable.Value
   | Placeholder<any, E, R>
   | { readonly [key: string]: Renderable<E, R> | Placeholder<any, E, R> | unknown } // TODO: Should we manage data attributes this way?

package/src/Template.ts

@@ -2,11 +2,12 @@
  * @since 1.0.0
  */
 import type { Chunk } from "effect/Chunk"
+import { type Inspectable, NodeInspectSymbol } from "effect/Inspectable"
 
 /**
  * @since 1.0.0
  */
-export class Template {
+export class Template implements Inspectable {
   readonly _tag = "template"
 
   constructor(
@@ -16,6 +17,19 @@ export class Template {
     /// any nodes/elements into the template.
     readonly parts: ReadonlyArray<readonly [part: PartNode | SparsePartNode, path: Chunk<number>]>
   ) {}
+
+  toJSON() {
+    return {
+      _tag: "template",
+      nodes: this.nodes,
+      hash: this.hash,
+      parts: this.parts.map(([part, path]) => [part, path.toJSON()])
+    }
+  }
+
+  [NodeInspectSymbol]() {
+    return this.toJSON()
+  }
 }
 
 /**

package/src/Test.ts

@@ -10,22 +10,23 @@ import * as Fx from "@typed/fx/Fx"
 import * as RefArray from "@typed/fx/RefArray"
 import * as RefSubject from "@typed/fx/RefSubject"
 import * as Sink from "@typed/fx/Sink"
-import { type Rendered } from "@typed/wire"
-import { Layer } from "effect"
+import { isComment, type Rendered } from "@typed/wire"
 import * as Cause from "effect/Cause"
 import type { DurationInput } from "effect/Duration"
 import * as Effect from "effect/Effect"
 import * as Either from "effect/Either"
 import * as Fiber from "effect/Fiber"
+import * as Layer from "effect/Layer"
 import type * as Scope from "effect/Scope"
 import * as ElementRef from "./ElementRef.js"
 import { ROOT_CSS_SELECTOR } from "./ElementSource.js"
-import { renderToHtmlString, serverLayer } from "./Html.js"
+import { renderToHtml, renderToHtmlString, serverLayer, staticLayer } from "./Html.js"
 import { hydrate, hydrateLayer } from "./Hydrate.js"
 import { adjustTime } from "./internal/utils.js"
 import { render, renderLayer } from "./Render.js"
 import type * as RenderContext from "./RenderContext.js"
 import type { RenderEvent } from "./RenderEvent.js"
+import * as RenderQueue from "./RenderQueue.js"
 import type { RenderTemplate } from "./RenderTemplate.js"
 
 // TODO: Instrument RenderTemplate to log info about when specific values are hanging for too long
@@ -65,14 +66,17 @@ export function testRender<E, R>(
 ): Effect.Effect<
   TestRender<E>,
   never,
-  Scope.Scope | Exclude<R, RenderTemplate | RenderContext.RenderContext | CurrentEnvironment | DomServices>
+  | Scope.Scope
+  | Exclude<
+    R,
+    RenderTemplate | RenderContext.RenderContext | CurrentEnvironment | DomServices
+  >
 > {
-  return Effect.gen(function*(_) {
-    const window = yield* _(getOrMakeWindow(options))
-    const elementRef = yield* _(ElementRef.make())
-    const errors = yield* _(RefSubject.make<ReadonlyArray<E>>(Effect.succeed([])))
-    const fiber = yield* _(
-      fx,
+  return Effect.gen(function*() {
+    const window = yield* getOrMakeWindow(options)
+    const elementRef = yield* ElementRef.make()
+    const errors = yield* RefSubject.make<ReadonlyArray<E>>(Effect.succeed([]))
+    const fiber = yield* fx.pipe(
       render,
       (x) =>
         x.run(Sink.make(
@@ -86,7 +90,7 @@ export function testRender<E, R>(
           (rendered) => ElementRef.set(elementRef, rendered)
         )),
       Effect.forkScoped,
-      Effect.provide(renderLayer(window, { skipRenderScheduling: true }))
+      Effect.provide(Layer.mergeAll(renderLayer(window)))
     )
 
     const test: TestRender<E> = {
@@ -103,17 +107,20 @@ export function testRender<E, R>(
     }
 
     // Allow our fibers to start
-    yield* _(adjustTime(1))
-    yield* _(adjustTime(1))
+    yield* adjustTime(1)
+    yield* adjustTime(1)
 
     // Await the first render
-    yield* _(
+    yield* Effect.race(
       Fx.first(elementRef),
-      Effect.race(Effect.delay(Effect.dieMessage(`Rendering taking too long`), options?.renderTimeout ?? 1000))
+      Effect.flatMap(
+        Effect.sleep(options?.renderTimeout ?? 1000),
+        (_) => Effect.dieMessage(`Rendering taking too long`)
+      )
     )
 
     return test
-  })
+  }).pipe(Effect.provide(RenderQueue.sync))
 }
 
 /**
@@ -126,7 +133,15 @@ export type EventOptions = {
 }
 
 // TODO: Find more events to add here
-const NON_BUBBLING_EVENTS = new Set(["focus", "blur"])
+const NON_BUBBLING_EVENTS = new Set([
+  "focus",
+  "blur",
+  "loadstart",
+  "progress",
+  "error",
+  "load",
+  "loadend"
+])
 
 /**
  * @since 1.0.0
@@ -159,19 +174,19 @@ export function click<E>(
 
 // internals
 
-function getOrMakeWindow(
+export function getOrMakeWindow(
   options?: HappyDOMOptions
 ): Effect.Effect<Window & GlobalThis, never, Scope.Scope> {
   if (typeof window !== "undefined" && typeof document !== "undefined") {
-    return Effect.gen(function*(_) {
+    return Effect.gen(function*() {
       window.document.head.innerHTML = ""
       window.document.body.innerHTML = ""
-      yield* _(Effect.addFinalizer(() =>
+      yield* Effect.addFinalizer(() =>
         Effect.sync(() => {
           window.document.head.innerHTML = ""
           window.document.body.innerHTML = ""
         })
-      ))
+      )
 
       return window
     })
@@ -201,30 +216,34 @@ export function testHydrate<R, E, Elements>(
 ): Effect.Effect<
   TestHydrate<E, Elements>,
   E,
-  Scope.Scope | Exclude<R, RenderTemplate | RenderContext.RenderContext | CurrentEnvironment | DomServices>
+  | Scope.Scope
+  | Exclude<
+    R,
+    RenderContext.RenderContext | RenderQueue.RenderQueue | RenderTemplate | CurrentEnvironment | DomServices
+  >
+  | Exclude<R, RenderContext.RenderContext | RenderTemplate | CurrentEnvironment | DomServices>
 > {
-  return Effect.gen(function*(_) {
-    const window = yield* _(getOrMakeWindow(options))
+  return Effect.gen(function*() {
+    const window = yield* getOrMakeWindow(options)
     const { body } = window.document
 
-    const html = yield* _(
+    const html = yield* Effect.provide(
       renderToHtmlString(fx),
-      Effect.provide(serverLayer.pipe(
+      serverLayer.pipe(
         // Add DomServices to the layer for the types
         Layer.provideMerge(domServices()),
         Layer.provideMerge(Window.layer(window)),
         Layer.provideMerge(GlobalThis.layer(window))
-      ))
+      )
     )
 
     body.innerHTML = html
 
     const rendered = Array.from(body.childNodes)
-    const elements = f(rendered.length === 1 ? rendered[0] : rendered, window)
-    const elementRef = yield* _(ElementRef.make())
-    const errors = yield* _(RefSubject.make<ReadonlyArray<E>>(Effect.succeed([])))
-    const fiber = yield* _(
-      fx,
+    const elements = f(fromRendered(rendered), window)
+    const elementRef = yield* ElementRef.make()
+    const errors = yield* RefSubject.make<ReadonlyArray<E>>(Effect.succeed([]))
+    const fiber = yield* fx.pipe(
       hydrate,
       (x) =>
         x.run(Sink.make(
@@ -234,13 +253,17 @@ export function testHydrate<R, E, Elements>(
               Cause.failureOrCause(cause).pipe(
                 Either.match({
                   onLeft: (error) => RefArray.append(errors, error),
-                  onRight: (cause) => errors.onFailure(cause)
+                  onRight: (cause) => elementRef[ElementRef.ElementRefTypeId].onFailure(cause)
                 })
               )
             ),
-          (rendered) => ElementRef.set(elementRef, rendered)
+          (rendered) =>
+            ElementRef.set(
+              elementRef,
+              fromRendered(rendered)
+            )
         )),
-      Effect.provide(hydrateLayer(window, { skipRenderScheduling: true })),
+      Effect.provide(hydrateLayer(window)),
       Effect.forkScoped
     )
 
@@ -259,12 +282,73 @@ export function testHydrate<R, E, Elements>(
     }
 
     // Allow our fibers to start
-    yield* _(adjustTime(1))
-    yield* _(adjustTime(1))
+    yield* adjustTime(1)
+    yield* adjustTime(1)
 
     // Await the first render
-    yield* _(Fx.first(elementRef), Effect.race(Effect.delay(Effect.dieMessage(`Rendering taking too long`), 1000)))
+    yield* Effect.race(Fx.first(elementRef), Effect.delay(Effect.dieMessage(`Rendering taking too long`), 1000))
 
     return test
   })
 }
+
+function fromRendered(rendered: Rendered) {
+  const elements = Array.isArray(rendered)
+    ? rendered.filter((x) => isComment(x) ? !(x.data.startsWith("typed") || x.data.startsWith("/typed")) : true)
+    : rendered
+
+  return Array.isArray(elements) && elements.length === 1
+    ? elements[0]
+    : elements
+}
+
+const typedTemplateStartCommentRegex =
+  /<!--typed-((?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{4}|[A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{2}={2}))-->/g
+const typedTemplateEndCommentRegex =
+  /<!--\/typed-((?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{4}|[A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{2}={2}))-->/g
+
+export function isTemplateStartComment(comment: Comment) {
+  return typedTemplateStartCommentRegex.test(`${comment.nodeValue}`)
+}
+
+export function isTemplateEndComment(comment: Comment) {
+  return typedTemplateEndCommentRegex.test(`${comment.nodeValue}`)
+}
+
+export function stripTypedTemplateComments(html: string) {
+  return html.replace(typedTemplateStartCommentRegex, "").replace(typedTemplateEndCommentRegex, "")
+}
+
+/**
+ * @since 1.0.0
+ */
+export function testHtmlString<E, R>(
+  fx: Fx.Fx<RenderEvent, E, R>
+): Effect.Effect<
+  string,
+  E,
+  | Scope.Scope
+  | Exclude<
+    R,
+    RenderContext.RenderContext | RenderQueue.RenderQueue | RenderTemplate | CurrentEnvironment
+  >
+> {
+  return Effect.provide(renderToHtmlString(fx), staticLayer)
+}
+
+/**
+ * @since 1.0.0
+ */
+export function testHtmlChunks<E, R>(
+  fx: Fx.Fx<RenderEvent, E, R>
+): Effect.Effect<
+  ReadonlyArray<string>,
+  E,
+  | Scope.Scope
+  | Exclude<
+    R,
+    RenderContext.RenderContext | RenderQueue.RenderQueue | RenderTemplate | CurrentEnvironment
+  >
+> {
+  return Fx.toReadonlyArray(Fx.provide(Fx.map(renderToHtml(fx), stripTypedTemplateComments), serverLayer))
+}

package/src/Vitest.ts

@@ -7,30 +7,35 @@ import * as TestClock from "effect/TestClock"
 import * as TestContext from "effect/TestContext"
 import type * as TestServices from "effect/TestServices"
 import * as vitest from "vitest"
+import * as RenderQueue from "./RenderQueue.js"
+
+const describeConcurrent = vitest.describe.concurrent
+const expect = vitest.expect
 
 export {
   /**
    * @since 1.0.0
    */
-  describe,
+  describeConcurrent as describe,
   /**
    * @since 1.0.0
    */
   expect
-} from "vitest"
+}
 
 /**
  * @since 1.0.0
  */
 export function it<E, A>(
   name: string,
-  test: () => Effect.Effect<A, E, Scope>,
+  test: () => Effect.Effect<A, E, Scope | RenderQueue.RenderQueue>,
   options?: vitest.TestOptions
 ) {
-  return vitest.it(
+  return vitest.it.concurrent(
     name,
     () =>
       test().pipe(
+        Effect.provide(RenderQueue.sync),
         Effect.scoped,
         Effect.runPromise
       ),
@@ -40,13 +45,14 @@ export function it<E, A>(
 
 it.only = function it<E, A>(
   name: string,
-  test: () => Effect.Effect<A, E, Scope>,
+  test: () => Effect.Effect<A, E, Scope | RenderQueue.RenderQueue>,
   options?: vitest.TestOptions
 ) {
   return vitest.it.only(
     name,
     () =>
       test().pipe(
+        Effect.provide(RenderQueue.sync),
         Effect.scoped,
         Effect.runPromise
       ),
@@ -56,13 +62,14 @@ it.only = function it<E, A>(
 
 it.skip = function it<E, A>(
   name: string,
-  test: () => Effect.Effect<A, E, Scope>,
+  test: () => Effect.Effect<A, E, Scope | RenderQueue.RenderQueue>,
   options?: vitest.TestOptions
 ) {
   return vitest.it.skip(
     name,
     () =>
       test().pipe(
+        Effect.provide(RenderQueue.sync),
         Effect.scoped,
         Effect.runPromise
       ),
@@ -77,13 +84,14 @@ export function test<E, A>(
   name: string,
   test: (options: {
     readonly clock: TestClock.TestClock
-  }) => Effect.Effect<A, E, Scope | TestServices.TestServices>,
+  }) => Effect.Effect<A, E, Scope | RenderQueue.RenderQueue | TestServices.TestServices>,
   options?: vitest.TestOptions
 ) {
-  return vitest.it(
+  return vitest.it.concurrent(
     name,
     () =>
       TestClock.testClockWith((clock) => test({ clock })).pipe(
+        Effect.provide(RenderQueue.sync),
         Effect.provide(TestContext.TestContext),
         Effect.scoped,
         Effect.runPromise
@@ -96,13 +104,14 @@ test.only = function test<E, A>(
   name: string,
   test: (options: {
     readonly clock: TestClock.TestClock
-  }) => Effect.Effect<A, E, Scope | TestServices.TestServices>,
+  }) => Effect.Effect<A, E, Scope | RenderQueue.RenderQueue | TestServices.TestServices>,
   options?: vitest.TestOptions
 ) {
   return vitest.it.only(
     name,
     () =>
       TestClock.testClockWith((clock) => test({ clock })).pipe(
+        Effect.provide(RenderQueue.sync),
         Effect.provide(TestContext.TestContext),
         Effect.scoped,
         Effect.runPromise
@@ -115,13 +124,14 @@ test.skip = function test<E, A>(
   name: string,
   test: (options: {
     readonly clock: TestClock.TestClock
-  }) => Effect.Effect<A, E, Scope | TestServices.TestServices>,
+  }) => Effect.Effect<A, E, Scope | RenderQueue.RenderQueue | TestServices.TestServices>,
   options?: vitest.TestOptions
 ) {
   return vitest.it.skip(
     name,
     () =>
       TestClock.testClockWith((clock) => test({ clock })).pipe(
+        Effect.provide(RenderQueue.sync),
         Effect.provide(TestContext.TestContext),
         Effect.scoped,
         Effect.runPromise

package/src/index.ts

@@ -52,6 +52,10 @@ export * from "./Renderable.js"
  * @since 1.0.0
  */
 export * as RenderContext from "./RenderContext.js"
+/**
+ * @since 1.0.0
+ */
+export * as RenderQueue from "./RenderQueue.js"
 /**
  * @since 1.0.0
  */

package/src/internal/EventSource.ts

@@ -1,7 +1,8 @@
 import type { Rendered } from "@typed/wire"
-import { Effect, Scope } from "effect"
+import * as Effect from "effect/Effect"
 import * as Fiber from "effect/Fiber"
 import * as Runtime from "effect/Runtime"
+import * as Scope from "effect/Scope"
 import { getElements } from "../ElementSource.js"
 import type { EventHandler } from "../EventHandler.js"
 
@@ -84,11 +85,15 @@ export function makeEventSource(): EventSource {
 
     for (const [event, sets] of bubbleListeners) {
       for (const handlers of sets) {
+        if (handlers.size === 0) continue
         const listener = (ev: Event) =>
           run(
-            Effect.forEach(handlers, ([el, handler]) =>
-              ev.target === el || el.contains(ev.target as Node) ? handler.handler(ev) : Effect.unit)
+            Effect.forEach(
+              handlers,
+              ([el, { handler }]) => ev.target === el || el.contains(ev.target as Node) ? handler(ev) : Effect.void
+            )
           )
+
         element.addEventListener(event, listener, getDerivedAddEventListenerOptions(handlers))
         disposables.push(disposable(() => element.removeEventListener(event, listener)))
       }
@@ -102,12 +107,13 @@ export function makeEventSource(): EventSource {
 
     for (const [event, sets] of captureListeners) {
       for (const handlers of sets) {
+        if (handlers.size === 0) continue
         const listener = (ev: Event) =>
           run(
-            Effect.forEach(handlers, ([el, handler]) =>
+            Effect.forEach(handlers, ([el, { handler }]) =>
               ev.target === el || el.contains(ev.target as Node)
-                ? handler.handler(proxyCurrentTargetForCaptureEvents(ev, el))
-                : Effect.unit)
+                ? handler(proxyCurrentTargetForCaptureEvents(ev, el))
+                : Effect.void)
           )
         element.addEventListener(event, listener, getDerivedAddEventListenerOptions(handlers))
         disposables.push(disposable(() => element.removeEventListener(event, listener)))
@@ -123,7 +129,7 @@ export function makeEventSource(): EventSource {
     const elements = getElements(rendered)
 
     if (elements.length === 0 || (!hasBubbleListeners && !hasCaptureListeners)) {
-      return Effect.unit
+      return Effect.void
     }
 
     return Effect.flatMap(Effect.runtime<never>(), (runtime) => {
@@ -150,7 +156,7 @@ export function makeEventSource(): EventSource {
         scope,
         Effect.suspend(() => {
           disposables.forEach(dispose)
-          if (fibers.size === 0) return Effect.unit
+          if (fibers.size === 0) return Effect.void
           return Fiber.interruptAll(fibers.values())
         })
       )

package/src/internal/HydrateContext.ts

@@ -1,18 +1,17 @@
 import { Tagged } from "@typed/context"
 import type { Template } from "../Template.js"
-import type { ParentChildNodes } from "./utils.js"
+import type { HydrationNode } from "./v2/hydration-template.js"
 
 /**
  * Used Internally to pass context down to components for hydration
  * @internal
  */
 export type HydrateContext = {
-  readonly where: ParentChildNodes
-  readonly rootIndex: number
+  readonly where: HydrationNode
   readonly parentTemplate: Template | null
 
   // Used to match sibling components using many() to the correct elements
-  readonly manyIndex?: string
+  readonly manyKey?: string
 
   /**@internal */
   hydrate: boolean

package/src/internal/browser.ts

@@ -1,38 +1,43 @@
 import { diffable, isComment } from "@typed/wire"
 import udomdiff from "udomdiff"
-import type { RenderContext } from "../RenderContext.js"
 import { isRenderEvent } from "../RenderEvent.js"
-import { NodePartImpl } from "./parts.js"
+import type { RenderQueue } from "../RenderQueue.js"
+import { convertCharacterEntities } from "./character-entities.js"
+import { NodePartImpl } from "./server-parts.js"
 import { findHoleComment, isCommentWithValue } from "./utils.js"
 
 export function makeRenderNodePart(
   index: number,
   parent: HTMLElement | SVGElement,
-  ctx: RenderContext,
+  queue: RenderQueue,
   document: Document,
   isHydrating: boolean
 ) {
   const comment = findHoleComment(parent, index)
-  let text: Text
+  let text: Text | null = isHydrating ? getPreviousTextSibling(comment) : null
   let nodes = isHydrating ? findPreviousNodes(comment, index) : []
 
-  return new NodePartImpl(index, ({ part, value }) => {
-    return ctx.queue.add(part, () => {
-      matchValue(
-        value,
-        (content) => {
-          if (text === undefined) {
-            text = document.createTextNode("")
+  return new NodePartImpl(index, ({ part, value }, priority) => {
+    return queue.add(
+      part,
+      () => {
+        matchValue(
+          value,
+          (content) => {
+            if (text === null) {
+              text = document.createTextNode("")
+            }
+            text.textContent = convertCharacterEntities(content)
+
+            nodes = diffChildren(comment, nodes, [text], document)
+          },
+          (updatedNodes) => {
+            nodes = diffChildren(comment, nodes, updatedNodes, document)
           }
-          text.textContent = content
-
-          nodes = diffChildren(comment, nodes, [text], document)
-        },
-        (updatedNodes) => {
-          nodes = diffChildren(comment, nodes, updatedNodes, document)
-        }
-      )
-    })
+        )
+      },
+      priority
+    )
   }, nodes)
 }
 
@@ -54,7 +59,7 @@ export function getPreviousTextSibling(node: Node | null) {
 }
 
 export function notIsEmptyTextNode(node: Node) {
-  if (node.nodeType === node.COMMENT_NODE) {
+  if (node.nodeType === node.TEXT_NODE) {
     return node.nodeValue?.trim() === ""
   }