@typed/template 0.3.0 → 0.3.1

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>(