@typed/template 0.2.0 → 0.3.1

package/src/internal/hydrate.ts

@@ -1,23 +1,23 @@
 import * as Fx from "@typed/fx/Fx"
-import * as Subject from "@typed/fx/Subject"
-import type { Rendered } from "@typed/wire"
-import type { Cause } from "effect"
-import { Effect } from "effect"
-import * as ElementRef from "../ElementRef.js"
+import * as Effect from "effect/Effect"
 import type { Placeholder } from "../Placeholder.js"
 import type { Renderable } from "../Renderable.js"
 import type { RenderContext } from "../RenderContext.js"
+import type { RenderEvent } from "../RenderEvent.js"
 import { DomRenderEvent } from "../RenderEvent.js"
 import type { RenderTemplate } from "../RenderTemplate.js"
-import { TemplateInstance } from "../TemplateInstance.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 { 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,
@@ -27,67 +27,105 @@ 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.
  */
-export const hydrateTemplate: (document: Document, ctx: RenderContext) => RenderTemplate =
-  (document, renderContext) =>
-  <Values extends ReadonlyArray<Renderable<any, any>>, T extends Rendered = Rendered>(
-    templateStrings: TemplateStringsArray,
-    values: Values,
-    providedRef?: ElementRef.ElementRef<T>
-  ) => {
-    return Effect.gen(function*(_) {
-      const context = yield* _(Effect.context<never>())
-      const hydrateCtx = unsafeGet(context, HydrateContext)
-
-      // If we're not longer hydrating, just render normally
-      if (!hydrateCtx.hydrate) {
-        return yield* _(renderTemplate(document, renderContext)(templateStrings, values, providedRef))
-      }
-
-      const elementRef = providedRef || (yield* _(ElementRef.make<T>()))
-      const events = Fx.map(elementRef, DomRenderEvent)
-      const errors = Subject.make<Placeholder.Error<Values[number]>, never>()
-
-      const { getParts, template, where, wire } = getHydrateEntry({
-        ...hydrateCtx,
-        document,
-        renderContext,
-        elementRef,
-        strings: templateStrings,
-        onCause: errors.onFailure
-      })
-      const parts = yield* _(getParts)
-
-      // If there are parts we need to render them before constructing our Wire
-      if (parts.length > 0) {
-        const refCounter = yield* _(indexRefCounter(parts.length))
+export const hydrateTemplate: (document: Document, ctx: RenderContext) => RenderTemplate = (
+  document,
+  renderContext
+) => {
+  const render_ = renderTemplate(document, renderContext)
 
-        // Do the work
-        yield* _(renderValues(values, parts, refCounter, errors.onFailure, (index: number): HydrateContext => ({
+  return <Values extends ReadonlyArray<Renderable<any, any>>>(
+    templateStrings: TemplateStringsArray,
+    values: Values
+  ): Fx.Fx<
+    Scope | Placeholder.Context<Values[number]>,
+    Placeholder.Error<Values[number]>,
+    RenderEvent
+  > => {
+    return Fx.make((sink) =>
+      Effect.gen(function*(_) {
+        const context = yield* _(Effect.context<Scope>())
+        const hydrateCtx = unsafeGet(context, HydrateContext)
+        const scope = unsafeGet(context, Scope)
+
+        // If we're not longer hydrating, just render normally
+        if (hydrateCtx.hydrate === false) {
+          return render_(templateStrings, values)
+        }
+
+        const either = getHydrateEntry({
+          ...hydrateCtx,
+          document,
+          renderContext,
+          strings: templateStrings
+        })
+
+        if (Either.isLeft(either)) {
+          hydrateCtx.hydrate = false
+          return render_(templateStrings, values)
+        }
+
+        const { template, where, wire } = either.right
+
+        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
-        })))
-
-        // Wait for initial work to be completed
-        yield* _(refCounter.wait)
-      }
-
-      hydrateCtx.hydrate = false
-
-      // Set the element when it is ready
-      yield* _(ElementRef.set(elementRef, wire as T))
-
-      // Return the Template instance
-      return TemplateInstance(Fx.merge([events, errors]), elementRef)
-    })
+        })
+
+        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)
+      })
+    )
   }
+}
 
 export function findRootParentChildNodes(where: HTMLElement): ParentChildNodes {
   const childNodes = findRootChildNodes(where)
@@ -103,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}`
 
@@ -176,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,
-  elementRef,
-  onCause,
   parentTemplate,
   renderContext,
   rootIndex,
@@ -219,18 +269,21 @@ export function getHydrateEntry({
   rootIndex: number
   parentTemplate: Template | null
   strings: TemplateStringsArray
-  elementRef: ElementRef.ElementRef<any>
-  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 getParts = buildParts(document, renderContext, template, where, elementRef, onCause, true)
-
   const wire = (() => {
     if (!parentTemplate) {
       const childNodes = Array.from(where.childNodes).filter((node) =>
@@ -253,10 +306,11 @@ export function getHydrateEntry({
     )
   })()
 
-  return {
-    template,
-    wire,
-    getParts,
-    where
-  } as const
+  return Either.right(
+    {
+      template,
+      wire,
+      where
+    } as const
+  )
 }

package/src/internal/indexRefCounter.ts

@@ -1,5 +1,6 @@
 import * as Deferred from "effect/Deferred"
 import * as Effect from "effect/Effect"
+import * as Option from "effect/Option"
 
 export type IndexRefCounter = {
   release: (index: number) => Effect.Effect<never, never, void>
@@ -15,13 +16,16 @@ export function indexRefCounter(expected: number): Effect.Effect<
   IndexRefCounter
 > {
   return Effect.map(Deferred.make<never, void>(), (deferred) => {
+    const done = Deferred.succeed(deferred, undefined)
     const indexes = new Set<number>(Array.from({ length: expected }, (_, i) => i))
 
     function release(index: number) {
       return Effect.suspend(() => {
         if (indexes.delete(index) && indexes.size === 0) {
-          return Deferred.succeed(deferred, undefined)
-        } else return Effect.unit
+          return done
+        } else {
+          return Effect.unit
+        }
       })
     }
 
@@ -31,3 +35,60 @@ export function indexRefCounter(expected: number): Effect.Effect<
     }
   })
 }
+
+export type IndexRefCounter2 = {
+  release: (index: number) => Effect.Effect<never, never, void>
+  expect: (count: number) => Effect.Effect<never, never, boolean>
+  wait: Effect.Effect<never, never, void>
+}
+
+/**
+ * @internal
+ */
+export function indexRefCounter2(): Effect.Effect<
+  never,
+  never,
+  IndexRefCounter2
+> {
+  return Effect.map(Deferred.make<never, void>(), (deferred) => {
+    let expected: Option.Option<number> = Option.none<number>()
+    const done = Deferred.succeed(deferred, undefined)
+    const indexes = new Set<number>()
+
+    function isDone() {
+      if (Option.isSome(expected)) {
+        return indexes.size === expected.value
+      } else {
+        return false
+      }
+    }
+
+    function release(index: number) {
+      return Effect.suspend(() => {
+        indexes.add(index)
+        if (isDone()) {
+          return done
+        } else {
+          return Effect.succeed(false)
+        }
+      })
+    }
+
+    function expect(count: number) {
+      return Effect.suspend(() => {
+        expected = Option.some(count)
+        if (isDone()) {
+          return Effect.as(done, false)
+        } else {
+          return Effect.succeed(true)
+        }
+      })
+    }
+
+    return {
+      release,
+      expect,
+      wait: Deferred.await(deferred)
+    }
+  })
+}

package/src/internal/module-augmentation.ts

@@ -42,7 +42,3 @@ declare global {
 declare module "@typed/fx/Fx" {
   export interface Fx<R, E, A> extends Placeholder<R, E, A> {}
 }
-
-declare module "effect/Effect" {
-  export interface Effect<R, E, A> extends Placeholder<R, E, A> {}
-}