@typed/template 0.3.0 → 0.3.2

package/src/internal/EventSource.ts

@@ -1,6 +1,6 @@
 import type { Rendered } from "@typed/wire"
 import { Effect, Scope } from "effect"
-import type * as Fiber from "effect/Fiber"
+import * as Fiber from "effect/Fiber"
 import * as Runtime from "effect/Runtime"
 import { getElements } from "../ElementSource"
 import type { EventHandler } from "../EventHandler"
@@ -26,31 +26,44 @@ const disposable = (f: () => void): Disposable => ({
   [Symbol.dispose]: f
 })
 
+const dispose = (d: Disposable): void => d[Symbol.dispose]()
+
 export function makeEventSource(): EventSource {
   const bubbleListeners = new Map<
     EventName,
-    Set<Entry>
+    readonly [normal: Set<Entry>, once: Set<Entry>]
   >()
   const captureListeners = new Map<
     EventName,
-    Set<Entry>
+    readonly [normal: Set<Entry>, once: Set<Entry>]
   >()
 
   function addListener(
     listeners: Map<
       EventName,
-      Set<Entry>
+      readonly [normal: Set<Entry>, once: Set<Entry>]
     >,
     event: EventName,
     entry: Entry
   ): void {
-    const set = listeners.get(event)
-    if (set === undefined) {
-      const set = new Set<Entry>()
-      set.add(entry)
-      listeners.set(event, set)
+    const sets = listeners.get(event)
+    const isOnce = entry[1].options?.once === true
+    if (sets === undefined) {
+      const normal = new Set<Entry>()
+      const once = new Set<Entry>()
+      if (isOnce) {
+        once.add(entry)
+      } else {
+        normal.add(entry)
+      }
+      listeners.set(event, [normal, once])
     } else {
-      set.add(entry)
+      const [normal, once] = sets
+      if (isOnce) {
+        once.add(entry)
+      } else {
+        normal.add(entry)
+      }
     }
   }
 
@@ -69,14 +82,16 @@ export function makeEventSource(): EventSource {
   function setupBubbleListeners(element: Element, run: Run) {
     const disposables: Array<Disposable> = []
 
-    for (const [event, handlers] of bubbleListeners) {
-      const listener = (ev: Event) =>
-        run(
-          Effect.forEach(handlers, ([el, handler]) =>
-            ev.target === el || el.contains(ev.target as Node) ? handler.handler(ev) : Effect.unit)
-        )
-      element.addEventListener(event, listener, getDerivedAddEventListenerOptions(handlers))
-      disposables.push(disposable(() => element.removeEventListener(event, listener)))
+    for (const [event, sets] of bubbleListeners) {
+      for (const handlers of sets) {
+        const listener = (ev: Event) =>
+          run(
+            Effect.forEach(handlers, ([el, handler]) =>
+              ev.target === el || el.contains(ev.target as Node) ? handler.handler(ev) : Effect.unit)
+          )
+        element.addEventListener(event, listener, getDerivedAddEventListenerOptions(handlers))
+        disposables.push(disposable(() => element.removeEventListener(event, listener)))
+      }
     }
 
     return disposables
@@ -85,16 +100,18 @@ export function makeEventSource(): EventSource {
   function setupCaptureListeners(element: Element, run: Run) {
     const disposables: Array<Disposable> = []
 
-    for (const [event, handlers] of captureListeners) {
-      const listener = (ev: Event) =>
-        run(
-          Effect.forEach(handlers, ([el, handler]) =>
-            ev.target === el || el.contains(ev.target as Node)
-              ? handler.handler(proxyCurrentTargetForCaptureEvents(ev, el))
-              : Effect.unit)
-        )
-      element.addEventListener(event, listener, getDerivedAddEventListenerOptions(handlers))
-      disposables.push(disposable(() => element.removeEventListener(event, listener)))
+    for (const [event, sets] of captureListeners) {
+      for (const handlers of sets) {
+        const listener = (ev: Event) =>
+          run(
+            Effect.forEach(handlers, ([el, handler]) =>
+              ev.target === el || el.contains(ev.target as Node)
+                ? handler.handler(proxyCurrentTargetForCaptureEvents(ev, el))
+                : Effect.unit)
+          )
+        element.addEventListener(event, listener, getDerivedAddEventListenerOptions(handlers))
+        disposables.push(disposable(() => element.removeEventListener(event, listener)))
+      }
     }
 
     return disposables
@@ -103,17 +120,22 @@ export function makeEventSource(): EventSource {
   function setup(rendered: Rendered, scope: Scope.Scope) {
     const hasBubbleListeners = bubbleListeners.size > 0
     const hasCaptureListeners = captureListeners.size > 0
+    const elements = getElements(rendered)
 
-    if (!hasBubbleListeners && !hasCaptureListeners) {
+    if (elements.length === 0 || (!hasBubbleListeners && !hasCaptureListeners)) {
       return Effect.unit
     }
 
     return Effect.flatMap(Effect.runtime<never>(), (runtime) => {
-      const elements = getElements(rendered)
       const disposables: Array<Disposable> = []
+      const fibers = new Map<symbol, Fiber.RuntimeFiber<any, any>>()
       const runFork = Runtime.runFork(runtime)
-      const run: Run = <E, A>(effect: Effect.Effect<never, E, A>) =>
-        runFork(Effect.fromFiberEffect(Effect.forkIn(effect, scope)))
+      const run: Run = <E, A>(effect: Effect.Effect<never, E, A>) => {
+        const id = Symbol()
+        const fiber = runFork(Effect.onExit(effect, () => Effect.sync(() => fibers.delete(id))))
+        fibers.set(id, fiber)
+        return fiber
+      }
 
       for (const element of elements) {
         if (hasBubbleListeners) {
@@ -124,7 +146,14 @@ export function makeEventSource(): EventSource {
         }
       }
 
-      return Scope.addFinalizer(scope, Effect.sync(() => disposables.forEach((d) => d[Symbol.dispose]())))
+      return Scope.addFinalizer(
+        scope,
+        Effect.suspend(() => {
+          disposables.forEach(dispose)
+          if (fibers.size === 0) return Effect.unit
+          return Fiber.interruptAll(fibers.values())
+        })
+      )
     })
   }
 
@@ -147,7 +176,7 @@ function proxyCurrentTargetForCaptureEvents<E extends Event>(event: E, currentTa
 function getDerivedAddEventListenerOptions(entries: Set<Entry>): AddEventListenerOptions {
   const hs = Array.from(entries)
   return {
-    once: hs.some((h) => h[1].options?.once === true),
+    once: hs.every((h) => h[1].options?.once === true),
     passive: hs.every((h) => h[1].options?.passive === true)
   }
 }

package/src/internal/chunks.ts

@@ -55,6 +55,22 @@ export const getAllTextUntilElementClose = (tagName: string) => {
 
 export const getWhitespace = chunker(/(\s+)/g)
 
+const tagNameRegexCache = new Map<string, ReturnType<typeof chunker>>()
+
+const tagNameRegex = (tagName: string) => {
+  return `(<\\/\\s*${tagName}\\s*>)`
+}
+
+export const getClosingTagName = (tagName: string) => {
+  const current = tagNameRegexCache.get(tagName)
+  if (current !== undefined) {
+    return current
+  }
+  const matcher = chunker(new RegExp(tagNameRegex(tagName), "gi"))
+  tagNameRegexCache.set(tagName, matcher)
+  return matcher
+}
+
 function chunker(regex: RegExp) {
   return (str: string, pos: number): TextChunk | undefined => {
     regex.lastIndex = pos

package/src/internal/errors.ts

@@ -9,3 +9,7 @@ export class CouldNotFindRootElement extends Error {
     super(`Could not find root elements for part ${partIndex}`)
   }
 }
+
+export function isHydrationError(e: unknown): e is CouldNotFindCommentError | CouldNotFindRootElement {
+  return e instanceof CouldNotFindCommentError || e instanceof CouldNotFindRootElement
+}

package/src/internal/hydrate.ts

@@ -1,5 +1,4 @@
 import * as Fx from "@typed/fx/Fx"
-import type { Cause } from "effect"
 import * as Effect from "effect/Effect"
 import type { Placeholder } from "../Placeholder.js"
 import type { Renderable } from "../Renderable.js"
@@ -7,16 +6,18 @@ import type { RenderContext } from "../RenderContext.js"
 import type { RenderEvent } from "../RenderEvent.js"
 import { DomRenderEvent } from "../RenderEvent.js"
 import type { RenderTemplate } from "../RenderTemplate.js"
-import { indexRefCounter } from "./indexRefCounter.js"
+import { indexRefCounter2 } from "./indexRefCounter.js"
 
 import { unsafeGet } from "@typed/context"
 
+import { Either } from "effect"
 import { Scope } from "effect/Scope"
 import type { Template } from "../Template.js"
 import { CouldNotFindCommentError, CouldNotFindRootElement } from "./errors.js"
-import { type EventSource, makeEventSource } from "./EventSource.js"
+import { makeEventSource } from "./EventSource.js"
 import { HydrateContext } from "./HydrateContext.js"
-import { buildParts, getBrowserEntry, renderTemplate, renderValues } from "./render.js"
+import type { RenderPartContext } from "./render.js"
+import { getBrowserEntry, renderPart2, renderTemplate } from "./render.js"
 import {
   findPath,
   getPreviousNodes,
@@ -26,8 +27,6 @@ import {
   type ParentChildNodes
 } from "./utils.js"
 
-// TODO: Handle missing comment errors
-
 /**
  * Here for "standard" browser rendering, a TemplateInstance is effectively a live
  * view into the contents rendered by the Template.
@@ -48,7 +47,6 @@ export const hydrateTemplate: (document: Document, ctx: RenderContext) => Render
   > => {
     return Fx.make((sink) =>
       Effect.gen(function*(_) {
-        const eventSource = makeEventSource()
         const context = yield* _(Effect.context<Scope>())
         const hydrateCtx = unsafeGet(context, HydrateContext)
         const scope = unsafeGet(context, Scope)
@@ -58,38 +56,71 @@ export const hydrateTemplate: (document: Document, ctx: RenderContext) => Render
           return render_(templateStrings, values)
         }
 
-        const { parts, template, where, wire } = getHydrateEntry({
+        const either = getHydrateEntry({
           ...hydrateCtx,
           document,
           renderContext,
-          eventSource,
-          strings: templateStrings,
-          onCause: sink.onFailure
+          strings: templateStrings
         })
 
-        // If there are parts we need to render them before constructing our Wire
-        if (parts.length > 0) {
-          const refCounter = yield* _(indexRefCounter(parts.length))
-
-          // Do the work
-          yield* _(
-            renderValues(values, parts, refCounter, context, (index: number): HydrateContext => ({
-              where,
-              rootIndex: index,
-              parentTemplate: template,
-              hydrate: true
-            }))
-          )
-
-          // Wait for initial work to be completed
-          yield* _(refCounter.wait)
+        if (Either.isLeft(either)) {
+          hydrateCtx.hydrate = false
+          return render_(templateStrings, values)
         }
 
-        hydrateCtx.hydrate = false
+        const { template, where, wire } = either.right
 
-        yield* _(eventSource.setup(wire, scope))
+        if (values.length === 0) return yield* _(sink.onSuccess(DomRenderEvent(wire)), Effect.zipRight(Effect.never))
+
+        const makeHydrateContext = (index: number): HydrateContext => ({
+          where,
+          rootIndex: index,
+          parentTemplate: template,
+          hydrate: true
+        })
+
+        const refCounter = yield* _(indexRefCounter2())
+        const ctx: RenderPartContext = {
+          context,
+          document,
+          eventSource: makeEventSource(),
+          expected: 0,
+          refCounter,
+          renderContext,
+          onCause: sink.onFailure,
+          values,
+          makeHydrateContext
+        }
 
+        // Connect our interpolated values to our template parts
+        const effects: Array<Effect.Effect<Scope | Placeholder.Context<Values[number]>, never, void>> = []
+        for (const [part, path] of template.parts) {
+          const eff = renderPart2(part, where, path, ctx)
+          if (eff !== null) {
+            effects.push(
+              ...(Array.isArray(eff) ? eff : [eff]) as Array<
+                Effect.Effect<Scope | Placeholder.Context<Values[number]>, never, void>
+              >
+            )
+          }
+        }
+
+        // Fork any effects necessary
+        if (effects.length > 0) {
+          yield* _(Effect.forkAll(effects))
+        }
+
+        // Set the element when it is ready
+        yield* _(ctx.eventSource.setup(wire, scope))
+
+        // Emit our DomRenderEvent
         yield* _(sink.onSuccess(DomRenderEvent(wire)))
+
+        // Stop hydrating
+        hydrateCtx.hydrate = false
+
+        // Ensure our templates last forever in the DOM environment
+        // so event listeners are kept attached to the current Scope.
         yield* _(Effect.never)
       })
     )
@@ -110,65 +141,76 @@ const END = "typed-end"
 
 // Finds all of the childNodes between the "typed-start" and "typed-end" comments
 export function findRootChildNodes(where: HTMLElement): Array<Node> {
-  const childNodes: Array<Node> = []
+  let start = -1
+  let end = -1
 
-  let start = 0
-  let end = childNodes.length
+  const { childNodes } = where
+  const length = childNodes.length
 
-  for (let i = 0; i < where.childNodes.length; i++) {
-    const node = where.childNodes[i]
+  for (let i = 0; i < length; i++) {
+    const node = childNodes[i]
 
-    if (node.nodeType === node.COMMENT_NODE) {
-      if (node.nodeValue === START) {
-        start = i
-        break
-      }
+    if (node.nodeType === node.COMMENT_NODE && node.nodeValue === START) {
+      start = i
+      break
     }
   }
 
-  for (let i = where.childNodes.length - 1; i >= start; i--) {
-    const node = where.childNodes[i]
+  for (let i = length - 1; i >= start; i--) {
+    const node = childNodes[i]
 
-    if (node.nodeType === node.COMMENT_NODE) {
-      if (node.nodeValue === END) {
-        end = i
-        break
-      }
+    if (node.nodeType === node.COMMENT_NODE && node.nodeValue === END) {
+      end = i
+      break
     }
   }
 
-  for (let i = start + 1; i <= end; i++) {
-    childNodes.push(where.childNodes[i])
+  // If we can't find the start and end comments, just return all childNodes
+  if (start === -1 && end === -1) {
+    return Array.from(childNodes)
+  }
+
+  start = start === -1 ? 0 : start
+  end = end === -1 ? length - 1 : end
+
+  const rootChildNodes: Array<Node> = Array(end - start)
+
+  for (let i = start + 1, j = 0; i <= end; i++) {
+    rootChildNodes[j++] = childNodes[i]
   }
 
-  return childNodes
+  return rootChildNodes
 }
 
 export function findTemplateResultPartChildNodes(
   where: ParentChildNodes,
   parentTemplate: Template,
-  childTemplate: Template | null,
+  childTemplate: Template,
   partIndex: number,
   childIndex?: number
-) {
+): Either.Either<CouldNotFindRootElement | CouldNotFindCommentError, ParentChildNodes> {
   const [, path] = parentTemplate.parts[partIndex]
   const parentNode = findPath(where, path) as HTMLElement
-  const childNodes = findPartChildNodes(parentNode, childTemplate?.hash, partIndex)
+  const childNodesEither = findPartChildNodes(parentNode, childTemplate.hash, partIndex)
+  if (Either.isLeft(childNodesEither)) return Either.left(childNodesEither.left)
+
+  const childNodes = childNodesEither.right
   const parentChildNodes = {
     parentNode,
     childNodes: childIndex !== undefined ? [childNodes[childIndex]] : childNodes
   }
 
-  return parentChildNodes
+  return Either.right(parentChildNodes)
 }
 
 export function findPartChildNodes(
   { childNodes }: ParentChildNodes,
-  hash: string | null | undefined,
+  hash: string,
   partIndex: number
-) {
-  const [comment, index] = findPartComment(childNodes, partIndex)
-
+): Either.Either<CouldNotFindRootElement | CouldNotFindCommentError, Array<Node>> {
+  const either = findPartComment(childNodes, partIndex)
+  if (Either.isLeft(either)) return Either.left(either.left)
+  const [comment, index] = either.right
   const nodes: Array<Node> = []
   const previousHoleValue = `hole${partIndex - 1}`
 
@@ -183,37 +225,38 @@ export function findPartChildNodes(
       }
     }
   } else {
-    return [...getPreviousNodes(comment, partIndex), comment]
+    return Either.right([...getPreviousNodes(comment, partIndex), comment])
   }
 
   if (nodes.length === 0) {
-    throw new CouldNotFindRootElement(partIndex)
+    return Either.left(new CouldNotFindRootElement(partIndex))
   }
 
   nodes.push(comment)
 
-  return nodes
+  return Either.right(nodes)
 }
 
-export function findPartComment(childNodes: ArrayLike<Node>, partIndex: number) {
+export function findPartComment(
+  childNodes: ArrayLike<Node>,
+  partIndex: number
+): Either.Either<CouldNotFindCommentError, readonly [Comment, number]> {
   const search = partIndex === -1 ? `typed-end` : `hole${partIndex}`
 
   for (let i = 0; i < childNodes.length; ++i) {
     const node = childNodes[i]
 
     if (isCommentWithValue(node, search)) {
-      return [node, i] as const
+      return Either.right([node, i] as const)
     }
   }
 
-  throw new CouldNotFindCommentError(partIndex)
+  return Either.left(new CouldNotFindCommentError(partIndex))
 }
 
 export function getHydrateEntry({
   childIndex,
   document,
-  eventSource,
-  onCause,
   parentTemplate,
   renderContext,
   rootIndex,
@@ -226,18 +269,21 @@ export function getHydrateEntry({
   rootIndex: number
   parentTemplate: Template | null
   strings: TemplateStringsArray
-  eventSource: EventSource
-  onCause: (cause: Cause.Cause<any>) => Effect.Effect<never, never, void>
   childIndex?: number
-}) {
+}): Either.Either<
+  CouldNotFindRootElement | CouldNotFindCommentError,
+  { readonly template: Template; readonly wire: Node | Array<Node>; readonly where: ParentChildNodes }
+> {
   const { template } = getBrowserEntry(document, renderContext, strings)
 
   if (parentTemplate) {
-    where = findTemplateResultPartChildNodes(where, parentTemplate, template, rootIndex, childIndex)
+    const either = findTemplateResultPartChildNodes(where, parentTemplate, template, rootIndex, childIndex)
+    if (Either.isLeft(either)) {
+      return Either.left(either.left)
+    }
+    where = either.right
   }
 
-  const parts = buildParts(document, renderContext, template, where, eventSource, onCause, true)
-
   const wire = (() => {
     if (!parentTemplate) {
       const childNodes = Array.from(where.childNodes).filter((node) =>
@@ -260,10 +306,11 @@ export function getHydrateEntry({
     )
   })()
 
-  return {
-    template,
-    wire,
-    parts,
-    where
-  } as const
+  return Either.right(
+    {
+      template,
+      wire,
+      where
+    } as const
+  )
 }

package/src/internal/parser.ts

@@ -4,6 +4,7 @@ import * as Option from "effect/Option"
 import * as Template from "../Template.js"
 import type { TextChunk } from "./chunks.js"
 import {
+  getClosingTagName,
   getPart,
   getStrictPart,
   getTextUntilCloseBrace,
@@ -90,6 +91,7 @@ const isSelfClosingTagEndToken: TextPredicate = (input, pos) =>
   input[pos] === chars.slash && input[pos + 1] === chars.greaterThan
 const isCommentEndToken: TextPredicate = (input, pos) =>
   input[pos] === chars.hypen && input[pos + 1] === chars.hypen && input[pos + 2] === chars.greaterThan
+const isGreaterThanToken: TextPredicate = (input, pos) => input[pos] === chars.greaterThan
 
 type Context = "unknown" | "element"
 
@@ -248,8 +250,10 @@ class ParserImpl implements Parser {
       if (nextChar == "-") {
         this.consumeAmount(2)
         return [this.parseComment()]
-      } else {
+      } else if (nextChar.toLowerCase() === "d") {
         return [this.parseDocType()]
+      } else {
+        throw new SyntaxError(`Unknown comment type ${nextChar}`)
       }
     } else if (nextChar === "/") { // Self-closing tag
       return this.selfClosingTagEnd()
@@ -312,10 +316,17 @@ class ParserImpl implements Parser {
       this.path.pop()
       const element = new Template.ElementNode(tagName, attributes, children)
 
+      this.skipWhitespace()
+      this.consumeClosingTag(tagName)
+
       return element
     }
   }
 
+  private consumeClosingTag(tagName: string) {
+    this.chunk(getClosingTagName(tagName))
+  }
+
   private parseSelfClosingElement(tagName: string): Template.SelfClosingElementNode {
     const attributes = this.parseAttributes()
 
@@ -352,7 +363,7 @@ class ParserImpl implements Parser {
   }
 
   private parseDocType(): Template.DocType {
-    this.parseTextUntil((char) => char === chars.greaterThan)
+    this.parseTextUntil(isGreaterThanToken)
     this.consumeAmount(1)
     this.skipWhitespace()
 
@@ -523,20 +534,18 @@ class ParserImpl implements Parser {
   }
 
   private parseTextUntil(predicate: (char: string, pos: number) => boolean) {
-    let text = ""
-
+    const start = this.pos
+    let i = 0
     while (this.pos < this.length) {
-      const char = this.nextChar()
-
       if (predicate(this.input, this.pos)) {
         break
       }
 
-      text += char
+      i++
       this.consumeAmount(1)
     }
 
-    return text
+    return this.input.slice(start, start + i)
   }
 
   private parseTextUntilMany<const T extends Predicates>(