@typed/template 0.9.6 → 0.10.0

package/src/internal/v2/hydrate.ts

@@ -0,0 +1,289 @@
+import * as Fx from "@typed/fx"
+import { isText } from "@typed/wire"
+import type * as Chunk from "effect/Chunk"
+import { unsafeGet } from "effect/Context"
+import * as Effect from "effect/Effect"
+import { flow } from "effect/Function"
+import * as Scope from "effect/Scope"
+import type { BrowserEntry } from "../../Entry.js"
+import type { Placeholder } from "../../Placeholder.js"
+import type { Renderable } from "../../Renderable.js"
+import type { RenderContext } from "../../RenderContext.js"
+import { DomRenderEvent, type RenderEvent } from "../../RenderEvent.js"
+import type { RenderQueue } from "../../RenderQueue.js"
+import type { RenderTemplate } from "../../RenderTemplate.js"
+import type * as Template from "../../Template.js"
+import { CouldNotFindCommentError, isHydrationError } from "../errors.js"
+import { HydrateContext } from "../HydrateContext.js"
+import { findHydratePath, isCommentWithValue, type ParentChildNodes } from "../utils.js"
+import type { HydrationHole, HydrationNode, HydrationTemplate } from "./hydration-template.js"
+import {
+  findHydrationHole,
+  findHydrationMany,
+  findHydrationTemplate,
+  getChildNodes,
+  getNodes,
+  getPreviousNodes
+} from "./hydration-template.js"
+import { getBrowserEntry } from "./render-entry.js"
+import type { TemplateContext } from "./render.js"
+import {
+  makeTemplateContext,
+  renderTemplate,
+  setupAttrPart,
+  setupBooleanPart,
+  setupClassNamePart,
+  setupCommentPart,
+  setupDataPart,
+  setupEventPart,
+  setupNodePart,
+  setupPropertiesPart,
+  setupPropertyPart,
+  setupRefPart,
+  setupSparseAttrPart,
+  setupSparseClassNamePart,
+  setupSparseCommentPart,
+  setupTextPart
+} from "./render.js"
+
+type HydrateTemplateContext = TemplateContext & {
+  readonly where: HydrationNode
+  readonly manyKey: string | undefined
+  readonly makeHydrateContext: (where: HydrationNode, index: number) => HydrateContext
+}
+
+function findWhere(hydrateCtx: HydrateContext, entry: BrowserEntry): HydrationTemplate | null {
+  // If there is not a manyKey, we can just find the template by its hash
+  if (hydrateCtx.manyKey === undefined) {
+    return findHydrationTemplate(getChildNodes(hydrateCtx.where), entry.template.hash)
+  }
+
+  // If there is a manyKey, we need to find the many node first
+  const many = findHydrationMany(getChildNodes(hydrateCtx.where), hydrateCtx.manyKey)
+
+  if (many === null) return null
+
+  // Then we can find the template by its hash
+  return findHydrationTemplate(getChildNodes(many), entry.template.hash)
+}
+
+export const hydrateTemplate: (document: Document, ctx: RenderContext) => RenderTemplate = (
+  document,
+  renderContext
+) => {
+  const render_ = renderTemplate(document, renderContext)
+
+  return <Values extends ReadonlyArray<Renderable<any, any>>>(
+    templateStrings: TemplateStringsArray,
+    values: Values
+  ): Fx.Fx<
+    RenderEvent,
+    Placeholder.Error<Values[number]>,
+    Scope.Scope | RenderQueue | Placeholder.Context<Values[number]>
+  > => {
+    const entry = getBrowserEntry(document, renderContext, templateStrings)
+
+    return Fx.make((sink) =>
+      Effect.catchAllDefect(
+        Effect.gen(function*() {
+          const ctx = yield* makeTemplateContext(entry.content, document, renderContext, values, sink.onFailure)
+          const hydrateCtx = unsafeGet(ctx.context, HydrateContext)
+
+          // If we're not longer hydrating, just render normally
+          if (hydrateCtx.hydrate === false) {
+            return yield* render_(templateStrings, values).run(sink)
+          }
+
+          const where: HydrationTemplate | null = findWhere(hydrateCtx, entry)
+
+          if (where === null) {
+            hydrateCtx.hydrate = false
+            return yield* render_(templateStrings, values).run(sink)
+          }
+
+          const wire = getWire(where)
+          if (entry.template.parts.length === 0) return yield* sink.onSuccess(DomRenderEvent(wire))
+
+          const makeHydrateContext = (where: HydrationNode): HydrateContext => ({
+            where,
+            parentTemplate: entry.template,
+            hydrate: true
+          })
+
+          const effects = setupParts(entry.template.parts, {
+            ...ctx,
+            where,
+            manyKey: hydrateCtx.manyKey,
+            makeHydrateContext
+          })
+          if (effects.length > 0) {
+            yield* Effect.forEach(effects, flow(Effect.catchAllCause(ctx.onCause), Effect.forkIn(ctx.scope)))
+          }
+
+          // Setup our event listeners for our wire.
+          // We use the parentScope to allow event listeners to exist
+          // beyond the lifetime of the current Fiber, but no further than its parent template.
+          yield* ctx.eventSource.setup(wire, ctx.parentScope)
+
+          // We're done setting up so we can resume in "regular" rendering mode when
+          // and new templates come in.
+          hydrateCtx.hydrate = false
+
+          // Emit our DomRenderEvent
+          yield* sink.onSuccess(DomRenderEvent(wire)).pipe(
+            // Ensure our templates last forever in the DOM environment
+            // so event listeners are kept attached to the current Scope.
+            Effect.zipRight(Effect.never),
+            // Close our scope whenever the current Fiber is interrupted
+            Effect.onExit((exit) => Scope.close(ctx.scope, exit))
+          )
+        }),
+        (defect) =>
+          Effect.gen(function*(_) {
+            if (isHydrationError(defect)) {
+              yield* _(Effect.logError(defect))
+              const hydrateCtx = yield* _(HydrateContext)
+              hydrateCtx.hydrate = false
+              return yield* _(render_(templateStrings, values).run(sink))
+            } else {
+              return yield* _(Effect.die(defect))
+            }
+          })
+      )
+    )
+  }
+}
+
+function setupParts(parts: Template.Template["parts"], ctx: HydrateTemplateContext) {
+  const effects: Array<Effect.Effect<void, any, any>> = []
+
+  for (const [part, path] of parts) {
+    const effect = setupPart(part, path, ctx)
+    if (effect) {
+      effects.push(effect)
+    }
+  }
+
+  return effects
+}
+
+function setupPart(
+  part: Template.PartNode | Template.SparsePartNode,
+  path: Chunk.Chunk<number>,
+  ctx: HydrateTemplateContext
+) {
+  switch (part._tag) {
+    case "attr":
+      return setupAttrPart(part, findHydratePath(ctx.where, path) as any, ctx, ctx.values[part.index])
+    case "boolean-part":
+      return setupBooleanPart(part, findHydratePath(ctx.where, path) as any, ctx, ctx.values[part.index])
+    case "className-part":
+      return setupClassNamePart(part, findHydratePath(ctx.where, path) as any, ctx, ctx.values[part.index])
+    case "comment-part":
+      return setupCommentPart(part, findHydratePath(ctx.where, path) as any, ctx)
+    case "data":
+      return setupDataPart(part, findHydratePath(ctx.where, path) as any, ctx, ctx.values[part.index])
+    case "event":
+      return setupEventPart(part, findHydratePath(ctx.where, path) as any, ctx, ctx.values[part.index])
+    case "node": {
+      const hole = findHydrationHole(getChildNodes(ctx.where), part.index)
+      if (hole === null) {
+        throw new CouldNotFindCommentError(part.index)
+      }
+      return setupHydratedNodePart(part, hole, ctx)
+    }
+    case "properties":
+      return setupPropertiesPart(part, findHydratePath(ctx.where, path) as any, ctx)
+    case "property":
+      return setupPropertyPart(part, findHydratePath(ctx.where, path) as any, ctx, ctx.values[part.index])
+    case "ref":
+      return setupRefPart(part, findHydratePath(ctx.where, path) as any, ctx)
+    case "sparse-attr":
+      return setupSparseAttrPart(part, findHydratePath(ctx.where, path) as any, ctx)
+    case "sparse-class-name":
+      return setupSparseClassNamePart(part, findHydratePath(ctx.where, path) as any, ctx)
+    case "sparse-comment":
+      return setupSparseCommentPart(part, findHydratePath(ctx.where, path) as any, ctx)
+    case "text-part": {
+      const hole = findHydrationHole(getChildNodes(ctx.where), part.index)
+      if (hole === null) throw new CouldNotFindCommentError(part.index)
+      return setupTextPart(part, hole.endComment, ctx)
+    }
+  }
+}
+
+function setupHydratedNodePart(
+  part: Template.NodePart,
+  hole: HydrationHole,
+  ctx: HydrateTemplateContext
+) {
+  const nestedCtx = ctx.makeHydrateContext(hole, part.index)
+  const previousNodes = getPreviousNodes(hole)
+  const text = previousNodes.length === 2 && isCommentWithValue(previousNodes[0], "text") && isText(previousNodes[1])
+    ? previousNodes[1]
+    : null
+  const effect = setupNodePart(part, hole.endComment, ctx, text, text === null ? previousNodes : [text])
+  if (effect === null) return null
+  return Effect.provideService(effect, HydrateContext, nestedCtx)
+}
+
+export function findRootParentChildNodes(where: HTMLElement): ParentChildNodes {
+  const childNodes = findRootChildNodes(where)
+
+  return {
+    parentNode: where,
+    childNodes
+  }
+}
+
+const START = "typed-start"
+const END = "typed-end"
+
+// Finds all of the childNodes between the "typed-start" and "typed-end" comments
+export function findRootChildNodes(where: HTMLElement): Array<Node> {
+  let start = -1
+  let end = -1
+
+  const { childNodes } = where
+  const length = childNodes.length
+
+  for (let i = 0; i < length; i++) {
+    const node = childNodes[i]
+
+    if (node.nodeType === node.COMMENT_NODE && node.nodeValue === START) {
+      start = i
+      break
+    }
+  }
+
+  for (let i = length - 1; i >= Math.max(start, 0); i--) {
+    const node = childNodes[i]
+
+    if (node.nodeType === node.COMMENT_NODE && node.nodeValue === END) {
+      end = i
+      break
+    }
+  }
+
+  // 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 rootChildNodes
+}
+
+function getWire(where: HydrationNode) {
+  const nodes = getNodes(where)
+  if (nodes.length === 1) return nodes[0]
+  return nodes
+}

package/src/internal/v2/hydration-template.ts

@@ -0,0 +1,308 @@
+import { isComment, isElement, toHtml } from "@typed/wire"
+import { type Inspectable, NodeInspectSymbol } from "effect/Inspectable"
+import { CouldNotFindRootElement, CouldNotFindTemplateEndError } from "../errors"
+
+const TYPED_TEMPLATE_PREFIX = `typed-`
+const TYPED_TEMPLATE_END_PREFIX = `/typed-`
+const MANY_PREFIX = `many`
+const HOLE_PREFIX = `hole`
+
+export function getHydrationRoot(root: HTMLElement): HydrationElement {
+  const childNodes = Array.from(root.childNodes)
+  let hydrationNodes = getHydrationNodes(childNodes)
+
+  // If your whole template is wrapped in a single hole, unwrap it.
+  if (hydrationNodes.length === 1 && hydrationNodes[0]._tag === "hole") {
+    hydrationNodes = getChildNodes(hydrationNodes[0])
+  }
+
+  return new HydrationElement(root, hydrationNodes)
+}
+
+function getHydrationNodes(nodes: Array<Node>): Array<HydrationNode> {
+  const out: Array<HydrationNode> = []
+
+  for (let i = 0; i < nodes.length; ++i) {
+    const node = nodes[i]
+
+    if (isComment(node)) {
+      if (node.data.startsWith(TYPED_TEMPLATE_PREFIX)) {
+        const hash = node.data.slice(TYPED_TEMPLATE_PREFIX.length)
+        const endIndex = getTemplateEndIndex(nodes, i, hash)
+        const childNodes = nodes.slice(i + 1, endIndex)
+
+        out.push(new HydrationTemplate(hash, getHydrationNodes(childNodes)))
+
+        i = endIndex
+      } else if (node.data.startsWith(MANY_PREFIX)) {
+        const last = out.pop()
+        out.push(new HydrationMany(node.data.slice(MANY_PREFIX.length), node, last ? [last] : []))
+      } else if (node.data.startsWith(HOLE_PREFIX)) {
+        const index = parseInt(node.data.slice(HOLE_PREFIX.length), 10)
+        const endIndex = getHoleEndIndex(nodes, i, index)
+        const endComment = nodes[endIndex] as Comment
+        out.push(new HydrationHole(index, node, endComment, getHydrationNodes(nodes.slice(i + 1, endIndex))))
+        i = endIndex
+      } else {
+        out.push(new HydrationLiteral(node))
+      }
+    } else if (isElement(node)) {
+      out.push(new HydrationElement(node, getHydrationNodes(Array.from(node.childNodes))))
+    } else {
+      out.push(new HydrationLiteral(node))
+    }
+  }
+
+  return out
+}
+
+function getTemplateEndIndex(nodes: Array<Node>, start: number, hash: string): number {
+  const endHash = TYPED_TEMPLATE_END_PREFIX + hash
+
+  for (let i = start; i < nodes.length; ++i) {
+    const node = nodes[i]
+
+    if (isComment(node) && node.data === endHash) {
+      return i
+    }
+  }
+
+  throw new CouldNotFindTemplateEndError(hash)
+}
+
+function getHoleEndIndex(nodes: Array<Node>, start: number, index: number): number {
+  const endHash = `/hole${index}`
+
+  let templateDepth = 0
+
+  for (let i = start; i < nodes.length; ++i) {
+    const node = nodes[i]
+
+    if (isComment(node)) {
+      if (templateDepth === 0 && node.data === endHash) return i
+      else if (node.data.startsWith(TYPED_TEMPLATE_PREFIX)) templateDepth++
+      else if (node.data.startsWith(TYPED_TEMPLATE_END_PREFIX)) templateDepth--
+    }
+  }
+
+  throw new CouldNotFindRootElement(index)
+}
+
+export class HydrationElement implements Inspectable {
+  readonly _tag = "element" as const
+
+  constructor(
+    readonly parentNode: Element,
+    readonly childNodes: Array<HydrationNode>
+  ) {}
+
+  toJSON(): unknown {
+    return {
+      _tag: this._tag,
+      parentNode: toHtml(this.parentNode),
+      childNodes: this.childNodes.map((n) => n.toJSON())
+    }
+  }
+
+  [NodeInspectSymbol]() {
+    return JSON.stringify(this.toJSON(), null, 2)
+  }
+}
+
+export class HydrationTemplate implements Inspectable {
+  readonly _tag = "template" as const
+
+  constructor(
+    readonly hash: string,
+    readonly childNodes: Array<HydrationNode>
+  ) {}
+
+  toJSON(): unknown {
+    return {
+      _tag: this._tag,
+      hash: this.hash,
+      childNodes: this.childNodes.map((n) => n.toJSON())
+    }
+  }
+
+  [NodeInspectSymbol]() {
+    return JSON.stringify(this.toJSON(), null, 2)
+  }
+}
+
+export type HydrationNode = HydrationElement | HydrationTemplate | HydrationMany | HydrationHole | HydrationLiteral
+
+export class HydrationMany implements Inspectable {
+  readonly _tag = "many" as const
+
+  constructor(
+    readonly key: string,
+    readonly comment: Comment,
+    readonly childNodes: Array<HydrationNode>
+  ) {}
+
+  toJSON(): unknown {
+    return {
+      _tag: this._tag,
+      key: this.key,
+      childNodes: this.childNodes.map((n) => n.toJSON())
+    }
+  }
+
+  [NodeInspectSymbol]() {
+    return JSON.stringify(this.toJSON(), null, 2)
+  }
+}
+
+export class HydrationHole implements Inspectable {
+  readonly _tag = "hole" as const
+
+  constructor(
+    readonly index: number,
+    readonly startComment: Comment,
+    readonly endComment: Comment,
+    readonly childNodes: Array<HydrationNode>
+  ) {}
+
+  toJSON(): unknown {
+    return {
+      _tag: this._tag,
+      index: this.index,
+      childNodes: this.childNodes.map((n) => n.toJSON())
+    }
+  }
+
+  [NodeInspectSymbol]() {
+    return JSON.stringify(this.toJSON(), null, 2)
+  }
+}
+
+export class HydrationLiteral implements Inspectable {
+  readonly _tag = "literal" as const
+
+  constructor(
+    readonly node: Node
+  ) {}
+
+  toJSON(): unknown {
+    return {
+      _tag: this._tag,
+      node: toHtml(this.node)
+    }
+  }
+
+  [NodeInspectSymbol]() {
+    return JSON.stringify(this.toJSON(), null, 2)
+  }
+}
+
+export function getChildNodes(node: HydrationNode): Array<HydrationNode> {
+  switch (node._tag) {
+    case "literal":
+      return []
+    case "hole":
+    case "element":
+    case "template":
+    case "many":
+      return node.childNodes
+  }
+}
+
+export function findHydrationTemplate(
+  nodes: Array<HydrationNode>,
+  templateHash: string
+): HydrationTemplate | null {
+  const toProcess: Array<HydrationNode> = [...nodes]
+
+  while (toProcess.length > 0) {
+    const node = toProcess.shift()!
+
+    if (node._tag === "template" && node.hash === templateHash) {
+      return node
+    } else if (node._tag === "element") {
+      toProcess.push(...node.childNodes)
+    }
+  }
+
+  return null
+}
+
+export function findHydrationMany(
+  nodes: Array<HydrationNode>,
+  key: string
+): HydrationMany | null {
+  for (let i = 0; i < nodes.length; ++i) {
+    const node = nodes[i]
+    if (node._tag === "many" && node.key === key) {
+      return node
+    }
+  }
+
+  return null
+}
+
+export function findHydrationHole(nodes: Array<HydrationNode>, index: number): HydrationHole | null {
+  for (const node of nodes) {
+    if (node._tag === "hole" && node.index === index) {
+      return node
+    } else if (node._tag === "element") {
+      const found = findHydrationHole(node.childNodes, index)
+      if (found !== null) {
+        return found
+      }
+    }
+  }
+
+  return null
+}
+
+export function findHydrationNode(
+  node: HydrationNode,
+  index: number,
+  manyKey?: string
+): HydrationHole | HydrationMany | null {
+  const childNodes = getChildNodes(node)
+  const found = manyKey === undefined
+    ? findHydrationHole(childNodes, index)
+    : findHydrationMany(childNodes, manyKey)
+
+  return found
+}
+
+export function getNodes(node: HydrationNode): Array<Node> {
+  switch (node._tag) {
+    case "element":
+      return [node.parentNode]
+    case "literal":
+      return [node.node]
+    case "hole":
+      return [node.startComment, ...node.childNodes.flatMap(getNodes), node.endComment]
+    case "many":
+      return [...node.childNodes.flatMap(getNodes), node.comment]
+    case "template":
+      return node.childNodes.flatMap(getNodes)
+  }
+}
+
+export function getNodesExcludingStartComment(node: HydrationNode): Array<Node> {
+  switch (node._tag) {
+    case "element":
+      return [node.parentNode]
+    case "literal":
+      return [node.node]
+    case "hole":
+      return [...node.childNodes.flatMap(getNodesExcludingStartComment), node.endComment]
+    case "many":
+      return [...node.childNodes.flatMap(getNodesExcludingStartComment), node.comment]
+    case "template":
+      return node.childNodes.flatMap(getNodesExcludingStartComment)
+  }
+}
+
+export function getPreviousNodes(hole: HydrationHole | HydrationMany): Array<Node> {
+  const predicate: (n: Node) => boolean = hole._tag === "hole"
+    ? (n) => n !== hole.startComment && n !== hole.startComment
+    : (n) => n !== hole.comment
+
+  return hole.childNodes.flatMap(getNodes).filter(predicate)
+}