@typed/template 0.14.0 → 1.0.0-beta.0

package/src/compiler-tools.ts

@@ -1,250 +0,0 @@
-/**
- * A collection of tools utilized by @typed/compiler to setup templates imperatively.
- * This is not intended for direct usage by end-users and the API surface is not guaranteed
- * to have the same stabilitiy as the rest of the library.
- *
- * @since 1.0.0
- */
-
-import type { Option } from "effect"
-import type * as Cause from "effect/Cause"
-import type * as Chunk from "effect/Chunk"
-import type * as Effect from "effect/Effect"
-import type * as Scope from "effect/Scope"
-import type * as internalHydrateContext from "./internal/HydrateContext.js"
-import * as utils from "./internal/utils.js"
-import * as hydrationTemplate from "./internal/v2/hydration-template.js"
-import * as render from "./internal/v2/render.js"
-import type { Placeholder } from "./Placeholder.js"
-import type { Renderable } from "./Renderable.js"
-import type { RenderContext } from "./RenderContext.js"
-import type { RenderQueue } from "./RenderQueue.js"
-import type * as Template from "./Template.js"
-
-/**
- * @since 1.0.0
- */
-export interface TemplateContext extends render.TemplateContext {}
-
-/**
- * @since 1.0.0
- */
-export interface HydrateContext extends internalHydrateContext.HydrateContext {}
-
-/**
- * @since 1.0.0
- */
-export interface HydrationTemplate extends hydrationTemplate.HydrationTemplate {}
-
-/**
- * @since 1.0.0
- */
-export type HydrationNode = hydrationTemplate.HydrationNode
-
-/**
- * @since 1.0.0
- */
-export interface HydrationHole extends hydrationTemplate.HydrationHole {}
-
-/**
- * @since 1.0.0
- */
-export interface HydrationMany extends hydrationTemplate.HydrationMany {}
-
-/**
- * @since 1.0.0
- */
-export interface HydrationElement extends hydrationTemplate.HydrationElement {}
-
-/**
- * @since 1.0.0
- */
-export interface HydrationLiteral extends hydrationTemplate.HydrationLiteral {}
-
-/**
- * @since 1.0.0
- */
-export const makeTemplateContext: <Values extends ReadonlyArray<Renderable<any, any>>>(
-  document: Document,
-  renderContext: RenderContext,
-  values: ReadonlyArray<Renderable<any, any>>,
-  onCause: (cause: Cause.Cause<Placeholder.Error<Values[number]>>) => Effect.Effect<unknown, never, never>
-) => Effect.Effect<TemplateContext, never, Scope.Scope | RenderQueue | Placeholder.Context<Values[number]>> =
-  render.makeTemplateContext
-
-/**
- * @since 1.0.0
- */
-export const setupAttrPart: (
-  { index, name }: Pick<Template.AttrPartNode, "index" | "name">,
-  element: HTMLElement | SVGElement,
-  ctx: TemplateContext,
-  renderable: Renderable<any, any>
-) => Effect.Effect<void, any, any> | null = render.setupAttrPart
-
-/**
- * @since 1.0.0
- */
-export const setupBooleanPart: (
-  { index, name }: Pick<Template.BooleanPartNode, "index" | "name">,
-  element: HTMLElement | SVGElement,
-  ctx: TemplateContext,
-  renderable: Renderable<any, any>
-) => Effect.Effect<void, any, any> | null = render.setupBooleanPart
-
-/**
- * @since 1.0.0
- */
-export const setupClassNamePart: (
-  { index }: Pick<Template.ClassNamePartNode, "index">,
-  element: HTMLElement | SVGElement,
-  ctx: TemplateContext,
-  renderable: Renderable<any, any>
-) => Effect.Effect<void, any, any> | null = render.setupClassNamePart
-
-/**
- * @since 1.0.0
- */
-export const setupCommentPart: (
-  { index }: Pick<Template.CommentPartNode, "index">,
-  comment: Comment,
-  ctx: render.TemplateContext,
-  renderable: Renderable<any, any>
-) => Effect.Effect<void, any, any> | null = render.setupCommentPart
-
-/**
- * @since 1.0.0
- */
-export const setupDataPart: (
-  { index }: Pick<Template.DataPartNode, "index">,
-  element: HTMLElement | SVGElement,
-  ctx: TemplateContext,
-  renderable: Renderable<any, any>
-) => Effect.Effect<void, any, any> | null = render.setupDataPart
-
-/**
- * @since 1.0.0
- */
-export const setupEventPart: (
-  { index, name }: Pick<Template.EventPartNode, "index" | "name">,
-  element: HTMLElement | SVGElement,
-  ctx: TemplateContext,
-  renderable: Renderable<any, any>
-) => Effect.Effect<unknown, unknown, unknown> | null = render.setupEventPart
-
-/**
- * @since 1.0.0
- */
-export const setupNodePart: (
-  { index }: Template.NodePart,
-  comment: Comment,
-  ctx: TemplateContext,
-  text: Text | null,
-  nodes: Array<Node>
-) => Effect.Effect<void, any, any> | null = render.setupNodePart
-
-/**
- * @since 1.0.0
- */
-export const setupHydratedNodePart: (
-  part: Template.NodePart,
-  hole: hydrationTemplate.HydrationHole,
-  ctx: render.HydrateTemplateContext
-) => Effect.Effect<void, any, any> | null = render.setupHydratedNodePart
-
-/**
- * @since 1.0.0
- */
-export const setupPropertyPart: (
-  { index, name }: Pick<Template.PropertyPartNode, "index" | "name">,
-  element: HTMLElement | SVGElement,
-  ctx: TemplateContext,
-  renderable: Renderable<any, any>
-) => Effect.Effect<void, any, any> | null = render.setupPropertyPart
-
-/**
- * @since 1.0.0
- */
-export const setupRefPart: (
-  { index }: Pick<Template.RefPartNode, "index">,
-  element: HTMLElement | SVGElement,
-  renderable: Renderable<any, any>
-) => Effect.Effect<void, any, any> | null = render.setupRefPart
-
-/**
- * @since 1.0.0
- */
-export const setupPropertiesPart: (
-  element: HTMLElement | SVGElement,
-  ctx: render.TemplateContext,
-  renderable: Renderable<any, any>
-) => Effect.Effect<Array<void>, any, any> | null = render.setupPropertiesPart
-
-/**
- * @since 1.0.0
- */
-export const setupSparseAttrPart: (
-  { name, nodes }: Pick<Template.SparseAttrNode, "name" | "nodes">,
-  element: HTMLElement | SVGElement,
-  ctx: render.TemplateContext
-) => Effect.Effect<void, any, any> = render.setupSparseAttrPart
-
-/**
- * @since 1.0.0
- */
-export const setupSparseClassNamePart: (
-  { nodes }: Pick<Template.SparseClassNameNode, "nodes">,
-  element: HTMLElement | SVGElement,
-  ctx: render.TemplateContext
-) => Effect.Effect<void, any, any> = render.setupSparseClassNamePart
-
-/**
- * @since 1.0.0
- */
-export const setupSparseCommentPart: (
-  { nodes }: Template.SparseCommentNode,
-  comment: Comment,
-  ctx: render.TemplateContext
-) => Effect.Effect<void, any, any> = render.setupSparseCommentPart
-
-/**
- * @since 1.0.0
- */
-export const setupTextPart: (
-  { index }: Template.TextPartNode,
-  comment: Comment,
-  ctx: render.TemplateContext
-) => Effect.Effect<void, any, any> | null = render.setupTextPart
-
-/**
- * @since 1.0.0
- */
-export const findHydrationHole: (
-  nodes: Array<hydrationTemplate.HydrationNode>,
-  index: number
-) => hydrationTemplate.HydrationHole | null = hydrationTemplate.findHydrationHole
-
-/**
- * @since 1.0.0
- */
-export const getChildNodes: (node: hydrationTemplate.HydrationNode) => Array<hydrationTemplate.HydrationNode> =
-  hydrationTemplate.getChildNodes
-
-/**
- * @since 1.0.0
- */
-export const findHydratePath: (node: hydrationTemplate.HydrationNode, path: Chunk.Chunk<number>) => Node =
-  utils.findHydratePath
-
-/**
- * @since 1.0.0
- */
-export const attemptHydration: (
-  ctx: TemplateContext,
-  hash: string
-) => Option.Option<
-  {
-    readonly where: HydrationTemplate
-    readonly hydrateCtx: HydrateContext
-  }
-> = render.attemptHydration

package/src/internal/EventSource.ts

@@ -1,188 +0,0 @@
-import type { Rendered } from "@typed/wire"
-import * as Effect from "effect/Effect"
-import * as Fiber from "effect/Fiber"
-import * as Runtime from "effect/Runtime"
-import * as Scope from "effect/Scope"
-import { getElements } from "../ElementSource.js"
-import type { EventHandler } from "../EventHandler.js"
-
-type EventName = string
-
-type Handler<Ev extends Event> = EventHandler<Ev>
-
-export interface EventSource {
-  readonly addEventListener: <Ev extends Event>(
-    element: Element,
-    event: EventName,
-    handler: Handler<Ev>
-  ) => void
-
-  readonly setup: (rendered: Rendered, scope: Scope.Scope) => Effect.Effect<void>
-}
-
-type Entry = readonly [Element, Handler<any>]
-type Run = <E, A>(effect: Effect.Effect<A, E>) => Fiber.RuntimeFiber<A, E>
-
-const disposable = (f: () => void): Disposable => ({
-  [Symbol.dispose]: f
-})
-
-const dispose = (d: Disposable): void => d[Symbol.dispose]()
-
-export function makeEventSource(): EventSource {
-  const bubbleListeners = new Map<
-    EventName,
-    readonly [normal: Set<Entry>, once: Set<Entry>]
-  >()
-  const captureListeners = new Map<
-    EventName,
-    readonly [normal: Set<Entry>, once: Set<Entry>]
-  >()
-
-  function addListener(
-    listeners: Map<
-      EventName,
-      readonly [normal: Set<Entry>, once: Set<Entry>]
-    >,
-    event: EventName,
-    entry: Entry
-  ): void {
-    const sets = listeners.get(event)
-    const isOnce = entry[1].options?.once === true
-    if (sets === undefined) {
-      const normal = new Set<Entry>()
-      const once = new Set<Entry>()
-      if (isOnce) {
-        once.add(entry)
-      } else {
-        normal.add(entry)
-      }
-      listeners.set(event, [normal, once])
-    } else {
-      const [normal, once] = sets
-      if (isOnce) {
-        once.add(entry)
-      } else {
-        normal.add(entry)
-      }
-    }
-  }
-
-  function addEventListener<Ev extends Event>(
-    element: Element,
-    event: EventName,
-    handler: Handler<Ev>
-  ): void {
-    if (handler.options?.capture === true) {
-      return addListener(captureListeners, event, [element, handler])
-    } else {
-      return addListener(bubbleListeners, event, [element, handler])
-    }
-  }
-
-  function setupBubbleListeners(element: Element, run: Run) {
-    const disposables: Array<Disposable> = []
-
-    for (const [event, sets] of bubbleListeners) {
-      for (const handlers of sets) {
-        if (handlers.size === 0) continue
-        const listener = (ev: Event) =>
-          run(
-            Effect.forEach(
-              handlers,
-              ([el, { handler }]) => ev.target === el || el.contains(ev.target as Node) ? handler(ev) : Effect.void
-            )
-          )
-
-        element.addEventListener(event, listener, getDerivedAddEventListenerOptions(handlers))
-        disposables.push(disposable(() => element.removeEventListener(event, listener)))
-      }
-    }
-
-    return disposables
-  }
-
-  function setupCaptureListeners(element: Element, run: Run) {
-    const disposables: Array<Disposable> = []
-
-    for (const [event, sets] of captureListeners) {
-      for (const handlers of sets) {
-        if (handlers.size === 0) continue
-        const listener = (ev: Event) =>
-          run(
-            Effect.forEach(handlers, ([el, { handler }]) =>
-              ev.target === el || el.contains(ev.target as Node)
-                ? handler(proxyCurrentTargetForCaptureEvents(ev, el))
-                : Effect.void)
-          )
-        element.addEventListener(event, listener, getDerivedAddEventListenerOptions(handlers))
-        disposables.push(disposable(() => element.removeEventListener(event, listener)))
-      }
-    }
-
-    return disposables
-  }
-
-  function setup(rendered: Rendered, scope: Scope.Scope) {
-    const hasBubbleListeners = bubbleListeners.size > 0
-    const hasCaptureListeners = captureListeners.size > 0
-    const elements = getElements(rendered)
-
-    if (elements.length === 0 || (!hasBubbleListeners && !hasCaptureListeners)) {
-      return Effect.void
-    }
-
-    return Effect.flatMap(Effect.runtime<never>(), (runtime) => {
-      const disposables: Array<Disposable> = []
-      const fibers = new Map<symbol, Fiber.RuntimeFiber<any, any>>()
-      const runFork = Runtime.runFork(runtime)
-      const run: Run = <E, A>(effect: Effect.Effect<A, E>) => {
-        const id = Symbol()
-        const fiber = runFork(Effect.onExit(effect, () => Effect.sync(() => fibers.delete(id))))
-        fibers.set(id, fiber)
-        return fiber
-      }
-
-      for (const element of elements) {
-        if (hasBubbleListeners) {
-          disposables.push(...setupBubbleListeners(element, run))
-        }
-        if (hasCaptureListeners) {
-          disposables.push(...setupCaptureListeners(element, run))
-        }
-      }
-
-      return Scope.addFinalizer(
-        scope,
-        Effect.suspend(() => {
-          disposables.forEach(dispose)
-          if (fibers.size === 0) return Effect.void
-          return Fiber.interruptAll(fibers.values())
-        })
-      )
-    })
-  }
-
-  return {
-    addEventListener,
-    setup
-  }
-}
-
-const EVENT_PROPERTY_TO_REPLACE = "currentTarget"
-
-function proxyCurrentTargetForCaptureEvents<E extends Event>(event: E, currentTarget: Element): E {
-  return new Proxy(event, {
-    get(target: E, property: string | symbol) {
-      return property === EVENT_PROPERTY_TO_REPLACE ? currentTarget : target[property as keyof E]
-    }
-  })
-}
-
-function getDerivedAddEventListenerOptions(entries: Set<Entry>): AddEventListenerOptions {
-  const hs = Array.from(entries)
-  return {
-    once: hs.every((h) => h[1].options?.once === true),
-    passive: hs.every((h) => h[1].options?.passive === true)
-  }
-}

package/src/internal/HydrateContext.ts

@@ -1,22 +0,0 @@
-import { Tagged } from "@typed/context"
-import type { HydrationNode } from "./v2/hydration-template.js"
-
-/**
- * Used Internally to pass context down to components for hydration
- * @internal
- */
-export type HydrateContext = {
-  readonly where: HydrationNode
-
-  // Used to match sibling components using many() to the correct elements
-  readonly manyKey?: string
-
-  /**@internal */
-  hydrate: boolean
-}
-
-/**
- * Used Internally to pass context down to components for hydration
- * @internal
- */
-export const HydrateContext = Tagged<HydrateContext>("@typed/html/HydrateContext")

package/src/internal/browser.ts

@@ -1,138 +0,0 @@
-import { diffable, isComment } from "@typed/wire"
-import udomdiff from "udomdiff"
-import { isRenderEvent } from "../RenderEvent.js"
-import type { RenderQueue } from "../RenderQueue.js"
-import { convertCharacterEntities } from "./character-entities.js"
-import { NodePartImpl } from "./server-parts.js"
-import { findHoleComment, isCommentWithValue } from "./utils.js"
-
-export function makeRenderNodePart(
-  index: number,
-  parent: HTMLElement | SVGElement,
-  queue: RenderQueue,
-  document: Document,
-  isHydrating: boolean
-) {
-  const comment = findHoleComment(parent, index)
-  let text: Text | null = isHydrating ? getPreviousTextSibling(comment) : null
-  let nodes = isHydrating ? findPreviousNodes(comment, index) : []
-
-  return new NodePartImpl(index, ({ part, value }, priority) => {
-    return queue.add(
-      part,
-      () => {
-        matchValue(
-          value,
-          (content) => {
-            if (text === null) {
-              text = document.createTextNode("")
-            }
-            text.textContent = convertCharacterEntities(content)
-
-            nodes = diffChildren(comment, nodes, [text], document)
-          },
-          (updatedNodes) => {
-            nodes = diffChildren(comment, nodes, updatedNodes, document)
-          }
-        )
-      },
-      priority
-    )
-  }, nodes)
-}
-
-export function getPreviousTextSibling(node: Node | null) {
-  if (!node) return null
-
-  if (node && node.nodeType === node.TEXT_NODE) {
-    // During hydration there should be a comment to separate these values
-    if (
-      node.previousSibling &&
-      isComment(node.previousSibling) &&
-      isCommentWithValue(node.previousSibling, "text")
-    ) {
-      return node as Text
-    }
-  }
-
-  return null
-}
-
-export function notIsEmptyTextNode(node: Node) {
-  if (node.nodeType === node.TEXT_NODE) {
-    return node.nodeValue?.trim() === ""
-  }
-
-  return true
-}
-
-export function findPreviousNodes(comment: Comment, index: number) {
-  const previousIndex = `hole${index - 1}`
-
-  const nodes: Array<Node> = []
-
-  let node = comment.previousSibling
-  while (node && !isCommentWithValue(node, previousIndex) && !isCommentWithValue(node, "text")) {
-    nodes.unshift(node)
-    node = node.previousSibling
-  }
-
-  return nodes
-}
-
-export function diffChildren(
-  comment: Comment,
-  currentNodes: Array<Node>,
-  nextNodes: Array<Node>,
-  document: Document
-) {
-  return udomdiff(
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    comment.parentNode!,
-    // Document Fragments cannot be removed, so we filter them out
-    currentNodes.filter((x) => x.nodeType !== x.DOCUMENT_FRAGMENT_NODE),
-    nextNodes,
-    diffable(document),
-    comment
-  )
-}
-
-function matchValue<A, B>(value: unknown, onText: (text: string) => A, onNodes: (nodes: Array<Node>) => B): A | B {
-  switch (typeof value) {
-    // primitives are handled as text content
-    case "string":
-    case "symbol":
-    case "number":
-    case "bigint":
-    case "boolean":
-      return onText(String(value))
-    case "undefined":
-    case "object": {
-      if (!value) {
-        return onNodes([])
-      } else if (Array.isArray(value)) {
-        // arrays can be used to cleanup, if empty
-        if (value.length === 0) return onNodes([])
-        // or diffed, if these contains nodes or "wires"
-        else if (value.some((x) => typeof x === "object")) {
-          return onNodes(value.flatMap(renderEventToArray))
-        } // in all other cases the content is stringified as is
-        else return onText(String(value))
-      } else {
-        return onNodes(renderEventToArray(value))
-      }
-    }
-    case "function":
-      return onNodes([])
-  }
-}
-
-function renderEventToArray(x: unknown): Array<Node> {
-  if (x === null || x === undefined) return []
-  if (isRenderEvent(x)) {
-    const value = x.valueOf()
-    return Array.isArray(value) ? value : [value]
-  }
-
-  return [x as Node]
-}