@typed/template 0.3.6 → 0.3.8

package/src/Test.ts

@@ -10,6 +10,7 @@ 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 * as Cause from "effect/Cause"
 import * as Effect from "effect/Effect"
 import * as Either from "effect/Either"
@@ -17,7 +18,9 @@ import * as Fiber from "effect/Fiber"
 import type * as Scope from "effect/Scope"
 import * as ElementRef from "./ElementRef.js"
 import { ROOT_CSS_SELECTOR } from "./ElementSource.js"
-import { adjustTime } from "./internal/utils.js"
+import { renderToHtmlString } from "./Html.js"
+import { hydrate } from "./Hydrate.js"
+import { adjustTime, isCommentWithValue } from "./internal/utils.js"
 import { render } from "./Render.js"
 import * as RenderContext from "./RenderContext.js"
 import type { RenderEvent } from "./RenderEvent.js"
@@ -172,3 +175,89 @@ function getOrMakeWindow(
     import("happy-dom").then((happyDOM) => new happyDOM.Window(options) as any as Window & GlobalThis)
   )
 }
+
+/**
+ * @since 1.0.0
+ */
+export interface TestHydrate<E, Elements> extends TestRender<E> {
+  readonly elements: Elements
+}
+
+/**
+ * @since 1.0.0
+ */
+export function testHydrate<R, E, Elements>(
+  fx: Fx.Fx<R, E, RenderEvent>,
+  f: (rendered: Rendered, window: Window & GlobalThis) => Elements,
+  options?:
+    & HappyDOMOptions
+    & { readonly [K in keyof DomServicesElementParams]?: (document: Document) => DomServicesElementParams[K] }
+) {
+  return Effect.gen(function*(_) {
+    const window = yield* _(getOrMakeWindow(options))
+    const { body } = window.document
+
+    const html = yield* _(
+      renderToHtmlString(fx),
+      Effect.provide(RenderContext.server)
+    )
+
+    body.innerHTML = html
+
+    const rendered = Array.from(body.childNodes)
+
+    // Remove the typed-start
+    if (isCommentWithValue(rendered[0], "typed-start")) {
+      rendered.shift()
+    }
+    // Remove the typed-end
+    if (isCommentWithValue(rendered[rendered.length - 1], "typed-end")) {
+      rendered.pop()
+    }
+
+    const elements = f(rendered.length === 1 ? rendered[0] : rendered, window)
+
+    const elementRef = yield* _(ElementRef.make())
+    const errors = yield* _(RefSubject.make<never, never, ReadonlyArray<E>>(Effect.succeed([])))
+    const fiber = yield* _(
+      fx,
+      hydrate,
+      (x) =>
+        x.run(Sink.make(
+          (cause) =>
+            Cause.failureOrCause(cause).pipe(
+              Either.match({
+                onLeft: (error) => RefArray.append(errors, error),
+                onRight: (cause) => errors.onFailure(cause)
+              })
+            ),
+          (rendered) => ElementRef.set(elementRef, rendered)
+        )),
+      Effect.forkScoped,
+      Effect.provide(RenderContext.dom(window, { skipRenderScheduling: true }))
+    )
+
+    const test: TestHydrate<E, Elements> = {
+      elements,
+      window,
+      document: window.document,
+      elementRef,
+      errors,
+      lastError: RefArray.last(errors),
+      interrupt: Fiber.interrupt(fiber),
+      makeEvent: (type, init) => new window.Event(type, init),
+      makeCustomEvent: (type, init) => new window.CustomEvent(type, init),
+      dispatchEvent: (options) => dispatchEvent(test, options),
+      click: (options) => click(test, options)
+    }
+
+    // Allow our fibers to start
+    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)))
+
+    return test
+  })
+}

package/src/internal/HydrateContext.ts

@@ -10,7 +10,9 @@ export type HydrateContext = {
   readonly where: ParentChildNodes
   readonly rootIndex: number
   readonly parentTemplate: Template | null
-  readonly childIndex?: number
+
+  // Used to match sibling components using many() to the correct elements
+  readonly manyIndex?: string
 
   /**@internal */
   hydrate: boolean

package/src/internal/errors.ts

@@ -10,6 +10,13 @@ export class CouldNotFindRootElement extends Error {
   }
 }
 
+export class CouldNotFindManyCommentError extends Error {
+  constructor(readonly manyIndex: string) {
+    super(`Could not find comment for many part ${manyIndex}`)
+  }
+}
+
 export function isHydrationError(e: unknown): e is CouldNotFindCommentError | CouldNotFindRootElement {
-  return e instanceof CouldNotFindCommentError || e instanceof CouldNotFindRootElement
+  return e instanceof CouldNotFindCommentError || e instanceof CouldNotFindRootElement ||
+    e instanceof CouldNotFindManyCommentError
 }

package/src/internal/hydrate.ts

@@ -13,7 +13,7 @@ import { unsafeGet } from "@typed/context"
 import { Either, ExecutionStrategy, Exit } from "effect"
 import * as Scope from "effect/Scope"
 import type { Template } from "../Template.js"
-import { CouldNotFindCommentError, CouldNotFindRootElement } from "./errors.js"
+import { CouldNotFindCommentError, CouldNotFindManyCommentError, CouldNotFindRootElement } from "./errors.js"
 import { makeEventSource } from "./EventSource.js"
 import { HydrateContext } from "./HydrateContext.js"
 import type { RenderPartContext } from "./render.js"
@@ -22,8 +22,8 @@ import {
   findPath,
   getPreviousNodes,
   isComment,
+  isCommentStartingWithValue,
   isCommentWithValue,
-  isHtmlElement,
   type ParentChildNodes
 } from "./utils.js"
 
@@ -193,20 +193,36 @@ export function findTemplateResultPartChildNodes(
   parentTemplate: Template,
   childTemplate: Template,
   partIndex: number,
-  childIndex?: number
-): Either.Either<CouldNotFindRootElement | CouldNotFindCommentError, ParentChildNodes> {
+  manyIndex?: string
+): Either.Either<CouldNotFindRootElement | CouldNotFindManyCommentError | CouldNotFindCommentError, ParentChildNodes> {
   const [, path] = parentTemplate.parts[partIndex]
   const parentNode = findPath(where, path) as HTMLElement
   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
+
+  if (manyIndex) {
+    const manyChildNodes = findManyChildNodes(childNodes, manyIndex)
+    if (Either.isLeft(manyChildNodes)) return Either.left(manyChildNodes.left)
+    return Either.right<ParentChildNodes>({ parentNode, childNodes: manyChildNodes.right })
   }
 
-  return Either.right(parentChildNodes)
+  return Either.right<ParentChildNodes>({
+    parentNode,
+    childNodes
+  })
+}
+
+export function findManyChildNodes(
+  childNodes: Array<Node>,
+  manyIndex: string
+): Either.Either<CouldNotFindManyCommentError, Array<Node>> {
+  const either = findManyComment(childNodes, manyIndex)
+  if (Either.isLeft(either)) return Either.left(either.left)
+
+  const [, index] = either.right
+  return Either.right(findPreviousManyComment(childNodes.slice(0, index)))
 }
 
 export function findPartChildNodes(
@@ -224,11 +240,10 @@ export function findPartChildNodes(
     for (let i = index; i > -1; --i) {
       const node = childNodes[i]
 
-      if (isHtmlElement(node) && node.dataset.typed === hash) {
-        nodes.unshift(node)
-      } else if (partIndex > 0 && isCommentWithValue(node, previousHoleValue)) {
+      if (partIndex > 0 && isCommentWithValue(node, previousHoleValue)) {
         break
       }
+      nodes.unshift(node)
     }
   } else {
     return Either.right([...getPreviousNodes(comment, partIndex), comment])
@@ -260,9 +275,39 @@ export function findPartComment(
   return Either.left(new CouldNotFindCommentError(partIndex))
 }
 
+export function findManyComment(
+  childNodes: ArrayLike<Node>,
+  manyIndex: string
+): Either.Either<CouldNotFindManyCommentError, readonly [Comment, number]> {
+  const search = `many${manyIndex}`
+
+  for (let i = 0; i < childNodes.length; ++i) {
+    const node = childNodes[i]
+
+    if (isCommentWithValue(node, search)) {
+      return Either.right([node, i] as const)
+    }
+  }
+
+  return Either.left(new CouldNotFindManyCommentError(manyIndex))
+}
+
+export function findPreviousManyComment(
+  childNodes: Array<Node>
+) {
+  for (let i = childNodes.length - 1; i > -1; --i) {
+    const node = childNodes[i]
+
+    if (isCommentStartingWithValue(node, "many")) {
+      return childNodes.slice(i + 1)
+    }
+  }
+  return childNodes
+}
+
 export function getHydrateEntry({
-  childIndex,
   document,
+  manyIndex,
   parentTemplate,
   renderContext,
   rootIndex,
@@ -275,15 +320,15 @@ export function getHydrateEntry({
   rootIndex: number
   parentTemplate: Template | null
   strings: TemplateStringsArray
-  childIndex?: number
+  manyIndex?: string
 }): Either.Either<
-  CouldNotFindRootElement | CouldNotFindCommentError,
+  CouldNotFindRootElement | CouldNotFindCommentError | CouldNotFindManyCommentError,
   { readonly template: Template; readonly wire: Node | Array<Node>; readonly where: ParentChildNodes }
 > {
   const { template } = getBrowserEntry(document, renderContext, strings)
 
   if (parentTemplate) {
-    const either = findTemplateResultPartChildNodes(where, parentTemplate, template, rootIndex, childIndex)
+    const either = findTemplateResultPartChildNodes(where, parentTemplate, template, rootIndex, manyIndex)
     if (Either.isLeft(either)) {
       return Either.left(either.left)
     }

package/src/internal/parser.ts

@@ -715,7 +715,7 @@ function parseTextAndParts<T>(s: string, f: (index: number) => T): Array<Templat
   return out
 }
 
-export const parser: Parser = globalValue(Symbol.for("@typed/template/Parser2"), () => new ParserImpl())
+export const parser: Parser = globalValue(Symbol.for("@typed/template/Parser"), () => new ParserImpl())
 
 const digestSize = 2
 const multiplier = 33

package/src/internal/render.ts

@@ -43,9 +43,7 @@ import {
 import type { ParentChildNodes } from "./utils.js"
 import { findHoleComment, findPath } from "./utils.js"
 
-// TODO: We need to add support for hydration of templates
 // TODO: We need to re-think hydration for dynamic lists, probably just markers should be fine
-// TODO: We need to make Parts synchronous
 
 /**
  * @internal

package/src/internal/utils.ts

@@ -14,6 +14,10 @@ export function isCommentWithValue(node: Node, value: string): node is Comment {
   return isComment(node) && node.nodeValue === value
 }
 
+export function isCommentStartingWithValue(node: Node, value: string): node is Comment {
+  return isComment(node) && (node.nodeValue?.startsWith(value) ?? false)
+}
+
 export function isHtmlElement(node: Node): node is HTMLElement {
   return node.nodeType === node.ELEMENT_NODE
 }