@typed/template 0.9.6 → 0.10.0

package/src/internal/server.ts

@@ -1,112 +1,7 @@
-import * as Effect from "effect/Effect"
-import type { HtmlChunk, PartChunk, SparsePartChunk } from "../HtmlChunk.js"
-import type {
-  AttributePart,
-  ClassNamePart,
-  CommentPart,
-  Part,
-  SparseAttributePart,
-  SparseClassNamePart,
-  SparseCommentPart,
-  SparsePart,
-  StaticText
-} from "../Part.js"
-import type { Renderable } from "../Renderable.js"
-import type { PartNode, SparseAttrNode, SparseClassNameNode, SparseCommentNode, SparsePartNode } from "../Template.js"
-import {
-  AttributePartImpl,
-  BooleanPartImpl,
-  ClassNamePartImpl,
-  CommentPartImpl,
-  DataPartImpl,
-  NodePartImpl,
-  PropertiesPartImpl,
-  PropertyPartImpl,
-  SparseAttributePartImpl,
-  SparseClassNamePartImpl,
-  SparseCommentPartImpl,
-  StaticTextImpl,
-  TextPartImpl
-} from "./parts.js"
-
-export type RenderChunk<R, E> =
-  | TextRenderChunk
-  | PartRenderChunk<R, E>
-  | SparsePartRenderChunk<R, E>
-
-export class TextRenderChunk {
-  readonly type = "text"
-
-  constructor(
-    readonly index: number,
-    readonly value: string
-  ) {}
-}
-
-export class PartRenderChunk<R, E> {
-  readonly type = "part"
-
-  constructor(
-    readonly index: number,
-    readonly chunk: PartChunk,
-    readonly part: Part,
-    readonly renderable: Renderable<R, E>
-  ) {}
-}
-
-export class SparsePartRenderChunk<R, E> {
-  readonly type = "sparse-part"
-
-  constructor(
-    readonly index: number,
-    readonly chunk: SparsePartChunk,
-    readonly part: SparsePart,
-    readonly renderables: Array<Renderable<R, E>>
-  ) {}
-}
-
-type RenderChunkMap = {
-  readonly [K in HtmlChunk["_tag"]]: <R, E>(
-    chunk: Extract<HtmlChunk, { _tag: K }>,
-    index: number,
-    values: ReadonlyArray<Renderable<any, any>>,
-    onChunk: (index: number, value: string) => Effect.Effect<void>
-  ) => RenderChunk<R, E>
-}
-
-const renderChunkMap: RenderChunkMap = {
-  text: (chunk, index) => new TextRenderChunk(index, chunk.value),
-  part: (chunk, index, values, onChunk) =>
-    new PartRenderChunk(
-      index,
-      chunk,
-      partNodeToPart(chunk.node, (v) => onChunk(index, chunk.render(v))),
-      values[chunk.node.index]
-    ),
-  "sparse-part": (chunk, index, values, onChunk) =>
-    new SparsePartRenderChunk(
-      index,
-      chunk,
-      sparsePartNodeToPart(chunk.node, (v) => onChunk(index, chunk.render(v))),
-      // @ts-ignore Type Instantiation is excessively deep and possibly infinite
-      chunk.node.nodes.map((n) => (n._tag === "text" ? n.value : values[n.index]))
-    )
-}
-
-export function htmlChunksToRenderChunks<R, E>(
-  chunks: ReadonlyArray<HtmlChunk>,
-  values: ReadonlyArray<Renderable<R, E>>,
-  onChunk: (index: number, value: string) => Effect.Effect<void>
-) {
-  const output: Array<RenderChunk<R, E>> = Array(chunks.length)
-
-  for (let i = 0; i < chunks.length; i++) {
-    // @ts-ignore Type Instantiation is excessively deep and possibly infinite
-    output[i] = renderChunkMap[chunks[i]._tag](chunks[i] as any, i, values, onChunk)
-  }
-
-  return output
-}
+import type * as Effect from "effect/Effect"
+import type { Part } from "../Part.js"
+import type { PartNode } from "../Template.js"
+import * as impls from "./server-parts.js"
 
 type PartNodeMap = {
   readonly [K in PartNode["_tag"]]: (
@@ -116,21 +11,22 @@ type PartNodeMap = {
 }
 
 const partNodeMap: PartNodeMap = {
-  attr: (node, onChunk) => new AttributePartImpl(node.name, node.index, ({ value }) => onChunk(value), null),
-  "boolean-part": (node, onChunk) => new BooleanPartImpl(node.name, node.index, ({ value }) => onChunk(value), null),
-  "className-part": (node, onChunk) => new ClassNamePartImpl(node.index, ({ value }) => onChunk(value), null),
-  "comment-part": (node, onChunk) => new CommentPartImpl(node.index, ({ value }) => onChunk(value), null),
-  "data": (node, onChunk) => new DataPartImpl(node.index, ({ value }) => onChunk(value), null),
-  "event": () => {
+  attr: (node, onChunk) => new impls.AttributePartImpl(node.name, node.index, ({ value }) => onChunk(value), null),
+  "boolean-part": (node, onChunk) =>
+    new impls.BooleanPartImpl(node.name, node.index, ({ value }) => onChunk(value), null),
+  "className-part": (node, onChunk) => new impls.ClassNamePartImpl(node.index, ({ value }) => onChunk(value), []),
+  "comment-part": (node, onChunk) => new impls.CommentPartImpl(node.index, ({ value }) => onChunk(value), null),
+  data: (node, onChunk) => new impls.DataPartImpl(node.index, ({ value }) => onChunk(value), null),
+  event: () => {
     throw new Error("Events are not utilized on the server")
   },
-  "node": (node, onChunk) => new NodePartImpl(node.index, ({ value }) => onChunk(value), null),
-  "property": (node, onChunk) => new PropertyPartImpl(node.name, node.index, ({ value }) => onChunk(value), null),
-  "ref": () => {
+  node: (node, onChunk) => new impls.NodePartImpl(node.index, ({ value }) => onChunk(value), null),
+  property: (node, onChunk) => new impls.PropertyPartImpl(node.name, node.index, ({ value }) => onChunk(value), null),
+  ref: () => {
     throw new Error("Refs are not utilized on the server")
   },
-  "text-part": (node, onChunk) => new TextPartImpl(node.index, ({ value }) => onChunk(value), null),
-  "properties": (node, onChunk) => new PropertiesPartImpl(node.index, ({ value }) => onChunk(value), null)
+  "text-part": (node, onChunk) => new impls.TextPartImpl(node.index, ({ value }) => onChunk(value), null),
+  properties: (node, onChunk) => new impls.PropertiesPartImpl(node.index, ({ value }) => onChunk(value), [])
 }
 
 export function partNodeToPart(
@@ -139,155 +35,3 @@ export function partNodeToPart(
 ): Part {
   return partNodeMap[node._tag](node as any, onChunk)
 }
-
-function sparsePartNodeToPart(
-  node: SparsePartNode,
-  onChunk: (value: string | null) => Effect.Effect<void>
-) {
-  if (node._tag === "sparse-attr") {
-    return renderSparseAttr(node, onChunk)
-  } else if (node._tag === "sparse-class-name") {
-    return renderSparseClassName(node, onChunk)
-  } else {
-    return renderSparseComment(node, onChunk)
-  }
-}
-
-function renderSparseAttr(
-  attrNode: SparseAttrNode,
-  setAttribute: (value: string | null) => Effect.Effect<void>
-): SparseAttributePart {
-  const { nodes } = attrNode
-  const values: Map<number, string | null> = new Map()
-
-  function getValue() {
-    return (part.value = Array.from({ length: nodes.length }, (_, i) => values.get(i) || ""))
-  }
-
-  function setValue(value: string | null, index: number) {
-    return Effect.suspend(() => {
-      values.set(index, value)
-
-      if (values.size === nodes.length) return setAttribute(getValue().join(""))
-
-      return Effect.unit
-    })
-  }
-
-  const parts: Array<StaticText | AttributePart> = []
-
-  let partIndex = 0
-  for (let i = 0; i < nodes.length; i++) {
-    const node = nodes[i]
-
-    if (node._tag === "text") {
-      values.set(i, node.value)
-      parts.push(new StaticTextImpl(node.value))
-    } else {
-      parts.push(
-        new AttributePartImpl(
-          node.name,
-          partIndex++,
-          ({ value }) => setValue(value || "", i),
-          null
-        )
-      )
-    }
-  }
-
-  const part = new SparseAttributePartImpl(attrNode.name, parts, ({ value }) => setAttribute(value.join("")))
-
-  return part
-}
-
-function renderSparseClassName(
-  classNameNode: SparseClassNameNode,
-  setClassName: (value: string | null) => Effect.Effect<void>
-): SparseClassNamePart {
-  const { nodes } = classNameNode
-  const values: Map<number, string | null> = new Map()
-
-  function getValue() {
-    return (part.value = Array.from({ length: nodes.length }, (_, i) => values.get(i) || ""))
-  }
-
-  function setValue(value: string | null, index: number) {
-    return Effect.suspend(() => {
-      values.set(index, value)
-
-      if (values.size === nodes.length) return setClassName(getValue().join(""))
-
-      return Effect.unit
-    })
-  }
-
-  const parts: Array<StaticText | ClassNamePart> = []
-
-  let partIndex = 0
-  for (let i = 0; i < nodes.length; i++) {
-    const node = nodes[i]
-
-    if (node._tag === "text") {
-      values.set(i, node.value)
-      parts.push(new StaticTextImpl(node.value))
-    } else {
-      parts.push(
-        new ClassNamePartImpl(
-          partIndex++,
-          ({ value }) => setValue(value?.join(" ") || null, i),
-          null
-        )
-      )
-    }
-  }
-
-  const part = new SparseClassNamePartImpl(parts, ({ value }) => setClassName(value.join("")), [])
-
-  return part
-}
-
-function renderSparseComment(
-  commentNode: SparseCommentNode,
-  setComment: (value: string | null) => Effect.Effect<void>
-): SparseCommentPart {
-  const { nodes } = commentNode
-  const values: Map<number, string | null | undefined> = new Map()
-
-  function getValue(): ReadonlyArray<string> {
-    return (part.value = Array.from({ length: nodes.length }, (_, i) => values.get(i) || ""))
-  }
-
-  function setValue(value: string | null | undefined, index: number) {
-    return Effect.suspend(() => {
-      values.set(index, value)
-
-      if (values.size === nodes.length) return setComment(getValue().join(""))
-
-      return Effect.unit
-    })
-  }
-
-  const parts: Array<StaticText | CommentPart> = []
-
-  let partIndex = 0
-  for (let i = 0; i < nodes.length; i++) {
-    const node = nodes[i]
-
-    if (node._tag === "text") {
-      values.set(i, node.value)
-      parts.push(new StaticTextImpl(node.value))
-    } else {
-      parts.push(
-        new CommentPartImpl(
-          partIndex++,
-          ({ value }) => setValue(value, i),
-          null
-        )
-      )
-    }
-  }
-
-  const part = new SparseCommentPartImpl(parts, ({ value }) => setComment(value.join("")), [])
-
-  return part
-}

package/src/internal/utils.ts

@@ -3,8 +3,11 @@ import * as Chunk from "effect/Chunk"
 import type * as Duration from "effect/Duration"
 import * as Effect from "effect/Effect"
 import { isSome } from "effect/Option"
+import { uncapitalize } from "effect/String"
 import { TestClock } from "effect/TestClock"
 import { TEXT_START, TYPED_START } from "../Meta.js"
+import { CouldNotFindCommentError } from "./errors.js"
+import { getNodesExcludingStartComment, type HydrationNode } from "./v2/hydration-template.js"
 
 export function isComment(node: Node): node is Comment {
   return node.nodeType === node.COMMENT_NODE
@@ -33,19 +36,31 @@ export function findHoleComment(parent: Element, index: number) {
     }
   }
 
-  throw new Error(`Unable to find hole comment for index ${index}`)
+  throw new CouldNotFindCommentError(index)
 }
 
 const previousComments = new Set([TEXT_START, TYPED_START])
 
-export function getPreviousNodes(comment: Node, index: number) {
+export function getPreviousNodes(comment: Node, index: number, hash?: string) {
   const nodes: Array<Node> = []
   let node = comment.previousSibling
   const previousHole = `hole${index - 1}`
+  const typedHash = hash ? `typed-${hash}` : ""
 
   previousComments.add(previousHole)
 
-  while (node && !previousComments.has(String(node.nodeValue))) {
+  while (node) {
+    if (isComment(node)) {
+      if (previousComments.has(node.data)) {
+        break
+      }
+
+      if (node.data === typedHash) {
+        nodes.unshift(node)
+        break
+      }
+    }
+
     nodes.unshift(node)
     node = node.previousSibling
   }
@@ -58,20 +73,81 @@ export function getPreviousNodes(comment: Node, index: number) {
 export const findPath = (node: ParentChildNodes, path: Chunk.Chunk<number>): Node =>
   Chunk.reduce(path, node, ({ childNodes }, index) => childNodes[index]) as Node
 
+export const findHydratePath = (
+  node: HydrationNode,
+  path: Chunk.Chunk<number>
+): Node => {
+  if (Chunk.isEmpty(path)) {
+    return getNodesExcludingStartComment(node)[0]
+  }
+
+  const [first, ...rest] = path
+
+  // Hydration adds an extra starting comment node which should not be included in the path
+  let current: Node = getNodesExcludingStartComment(node)[first]
+  for (const index of rest) {
+    current = Array.from(current.childNodes).filter(isNotStartComment)[index]
+  }
+
+  return current
+}
+
+function isNotStartComment(node: Node) {
+  return !isComment(node) || !node.data.startsWith("hole")
+}
+
 export interface ParentChildNodes {
   readonly parentNode: Node | null
   readonly childNodes: ArrayLike<Node>
 }
 
 export function adjustTime(input?: Duration.DurationInput) {
-  return Effect.gen(function*(_) {
-    const ctx = yield* _(Effect.context<never>())
+  return Effect.gen(function*() {
+    const ctx = yield* Effect.context<never>()
     const testClock = getOption(ctx, TestClock)
 
     if (isSome(testClock)) {
-      yield* _(testClock.value.adjust(input ?? 1))
+      yield* testClock.value.adjust(input ?? 1)
     } else if (input) {
-      yield* _(Effect.sleep(input))
+      yield* Effect.sleep(input)
     }
   })
 }
+
+export function keyToPartType(key: string) {
+  switch (key[0]) {
+    case "?":
+      return ["boolean", key.slice(1)] as const
+    case ".": {
+      const propertyName = key.slice(1)
+
+      if (propertyName === "data") {
+        return ["data"] as const
+      } else if (
+        propertyName === "props" || propertyName === "properties"
+      ) {
+        return ["properties"] as const
+      } else {
+        return ["property", propertyName] as const
+      }
+    }
+    case "@":
+      return ["event", uncapitalize(key.slice(1))] as const
+    case "o": {
+      if (key[1] === "n") {
+        const name = uncapitalize(key.slice(2))
+        return ["event", name] as const
+      }
+    }
+  }
+
+  const lower = key.toLowerCase()
+
+  if (lower === "ref") {
+    return ["ref"] as const
+  } else if (lower === "class" || lower === "classname") {
+    return ["class"] as const
+  } else {
+    return ["attr", key] as const
+  }
+}

package/src/internal/v2/SyncPart.ts

@@ -0,0 +1,112 @@
+/**
+ * @since 1.0.0
+ */
+
+/**
+ * @since 1.0.0
+ */
+export type SyncPart =
+  | AttributeSyncPart
+  | BooleanSyncPart
+  | ClassNameSyncPart
+  | CommentSyncPart
+  | DataSyncPart
+  | NodeSyncPart
+  | PropertySyncPart
+  | TextSyncPart
+
+/**
+ * @since 1.0.0
+ */
+export interface AttributeSyncPart {
+  readonly _tag: "attribute"
+  readonly name: string
+  readonly value: string | null | undefined
+  readonly index: number
+
+  readonly update: (value: this["value"]) => boolean
+}
+
+/**
+ * @since 1.0.0
+ */
+export interface BooleanSyncPart {
+  readonly _tag: "boolean"
+  readonly name: string
+  readonly value: boolean | null | undefined
+  readonly index: number
+
+  readonly update: (value: this["value"]) => boolean
+}
+
+/**
+ * @since 1.0.0
+ */
+export interface ClassNameSyncPart {
+  readonly _tag: "className"
+  readonly value: ReadonlyArray<string>
+  readonly index: number
+
+  readonly update: (value: this["value"]) => boolean
+}
+
+/**
+ * @since 1.0.0
+ */
+export interface DataSyncPart {
+  readonly _tag: "data"
+  readonly value: Readonly<Record<string, string | undefined>> | null | undefined
+  readonly index: number
+
+  readonly update: (value: this["value"]) => boolean
+}
+
+/**
+ * @since 1.0.0
+ */
+export interface PropertySyncPart {
+  readonly _tag: "property"
+  readonly name: string
+  readonly value: unknown
+  readonly index: number
+
+  readonly update: (value: this["value"]) => boolean
+}
+
+/**
+ * @since 1.0.0
+ */
+export interface CommentSyncPart {
+  readonly _tag: "comment"
+  readonly value: string | null | undefined
+  readonly index: number
+
+  readonly update: (value: this["value"]) => boolean
+}
+
+/**
+ * @since 1.0.0
+ */
+export interface TextSyncPart {
+  readonly _tag: "text"
+  readonly value: string | null | undefined
+  readonly index: number
+
+  readonly update: (value: this["value"]) => boolean
+}
+
+/**
+ * @since 1.0.0
+ */
+export interface NodeSyncPart {
+  readonly _tag: "node"
+  readonly value: unknown
+  readonly index: number
+
+  readonly update: (value: this["value"]) => boolean
+}
+
+/**
+ * @since 1.0.0
+ */
+export type SyncParts = ReadonlyArray<SyncPart>

package/src/internal/v2/helpers.ts

@@ -0,0 +1,13 @@
+import { hasProperty } from "effect/Predicate"
+
+export function isNullOrUndefined<T>(value: T | null | undefined): value is null | undefined {
+  return value === null || value === undefined
+}
+
+export function renderToString(value: unknown): string {
+  return isNullOrUndefined(value)
+    ? ""
+    : hasProperty(value, "toString") && typeof value.toString === "function"
+    ? value.toString()
+    : String(value)
+}