@typed/template 0.1.0

package/src/ElementSource.ts

@@ -0,0 +1,417 @@
+/**
+ * @since 1.0.0
+ */
+
+import type { EventWithCurrentTarget } from "@typed/dom/EventTarget"
+import { addEventListener } from "@typed/dom/EventTarget"
+import { Filtered } from "@typed/fx/Filtered"
+import * as Fx from "@typed/fx/Fx"
+import { FxEffectBase } from "@typed/fx/internal/protos"
+import * as Versioned from "@typed/fx/Versioned"
+import type { Rendered } from "@typed/wire"
+import { isWire } from "@typed/wire"
+import type { NoSuchElementException } from "effect/Cause"
+import type { DurationInput } from "effect/Duration"
+import * as Effect from "effect/Effect"
+import { pipe } from "effect/Function"
+import * as Scope from "effect/Scope"
+import { adjustTime } from "./internal/utils"
+import { PlaceholderTypeId } from "./Placeholder"
+
+import type * as TQS from "typed-query-selector/parser"
+
+/**
+ * @since 1.0.0
+ */
+export interface ElementSource<
+  T extends Rendered = Element,
+  EventMap extends {} = DefaultEventMap<Rendered.Elements<T>[number]>
+> extends Versioned.Versioned<never, never, never, never, Rendered.Elements<T>, never, never, Rendered.Elements<T>> {
+  readonly selector: Selector
+
+  readonly query: {
+    <S extends string, Ev extends {} = DefaultEventMap<ParseSelector<S, Element>>>(
+      selector: S
+    ): ElementSource<ParseSelector<S, Element>, Ev>
+
+    <Target extends Rendered, EventMap extends {} = DefaultEventMap<Target>>(
+      rendered: Target
+    ): ElementSource<Target, EventMap>
+  }
+
+  readonly elements: Filtered<never, never, Rendered.Elements<T>>
+
+  readonly events: <Type extends keyof EventMap>(
+    type: Type,
+    options?: AddEventListenerOptions
+  ) => Fx.Fx<never, never, EventWithCurrentTarget<Rendered.Elements<T>[number], EventMap[Type]>>
+
+  readonly dispatchEvent: (event: Event, wait?: DurationInput) => Effect.Effect<never, NoSuchElementException, void>
+}
+
+/**
+ * @since 1.0.0
+ */
+export function ElementSource<T extends Rendered, EventMap extends {} = DefaultEventMap<T>>(
+  rootElement: Filtered<never, never, T>
+): ElementSource<T, EventMap> {
+  return new ElementSourceImpl<T, EventMap>(rootElement) as any
+}
+
+/**
+ * @since 1.0.0
+ */
+export type ParseSelector<T extends string, Fallback> = [T] extends [typeof ROOT_CSS_SELECTOR] ? Fallback
+  : Fallback extends globalThis.Element ? TQS.ParseSelector<T, Fallback>
+  : Fallback
+
+/**
+ * @since 1.0.0
+ */
+export type DefaultEventMap<T> = T extends Window ? WindowEventMap
+  : T extends Document ? DocumentEventMap
+  : T extends HTMLVideoElement ? HTMLVideoElementEventMap
+  : T extends HTMLMediaElement ? HTMLMediaElementEventMap
+  : T extends HTMLElement ? HTMLElementEventMap
+  : T extends SVGElement ? SVGElementEventMap
+  : T extends Element ? ElementEventMap & Readonly<Record<string, Event>>
+  : Readonly<Record<string, Event>>
+
+/**
+ * @since 1.0.0
+ */
+export const ROOT_CSS_SELECTOR = `:root` as const
+
+type RenderedWithoutArray = Exclude<Rendered, ReadonlyArray<Rendered>>
+
+/**
+ * @since 1.0.0
+ */
+export function getElements<T extends Rendered>(element: T): ReadonlyArray<Element> {
+  if (Array.isArray(element)) return element.flatMap(getElements)
+  if (isWire(element as RenderedWithoutArray)) {
+    return Array.from((element.valueOf() as DocumentFragment).children)
+  }
+  if (isElement(element as RenderedWithoutArray)) return [element as Element]
+  if (isDocumentFragment(element as RenderedWithoutArray)) {
+    return Array.from((element as DocumentFragment).children)
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  if ((element as Node).parentElement) return [(element as Node).parentElement!]
+
+  return []
+}
+
+function findMostSpecificElement<T extends Element>(cssSelectors: ReadonlyArray<string>) {
+  return function(element: Rendered): T {
+    const elements = getElements(element)
+
+    for (let i = 0; i < cssSelectors.length; ++i) {
+      const cssSelector = dropLast(i, cssSelectors).join(" ")
+
+      for (let j = 0; j < elements.length; ++j) {
+        const node = elements[j].querySelector(cssSelector)
+
+        if (node) return node as T
+      }
+    }
+
+    return element as T
+  }
+}
+
+function findMatchingElements<El extends Element = Element>(cssSelectors: ReadonlyArray<string>) {
+  if (cssSelectors.length === 0) return getElements
+
+  const cssSelector = cssSelectors.join(" ")
+  return function(element: Rendered): ReadonlyArray<El> {
+    const elements = getElements(element)
+    const nodes = elements.flatMap((element) => Array.from(element.querySelectorAll<El>(cssSelector)))
+
+    const matchedElements = elements.filter((element) => element.matches(cssSelector)) as Array<El>
+
+    if (matchedElements.length > 0) return [...matchedElements, ...nodes]
+
+    return nodes
+  }
+}
+
+function dropLast(i: number, cssSelectors: ReadonlyArray<string>) {
+  return cssSelectors.slice(0, cssSelectors.length - i)
+}
+
+function makeEventStream<Ev extends Event>(
+  cssSelectors: ReadonlyArray<string>,
+  eventName: string,
+  options: EventListenerOptions = {}
+) {
+  return function(element: Rendered): Fx.Fx<never, never, Ev> {
+    const { capture } = options
+    const cssSelector = cssSelectors.join(" ")
+    const lastTwoCssSelectors = cssSelectors.slice(-2).join("")
+    const elements = getElements(element)
+
+    const event$ = Fx.merge(
+      elements.map((element) =>
+        Fx.filter(
+          Fx.withScopedFork<never, never, Ev>(({ scope, sink }) =>
+            Effect.zipRight(
+              Effect.provideService(
+                addEventListener(element, {
+                  eventName,
+                  handler: (ev) => sink.onSuccess(ev as any as Ev)
+                }),
+                Scope.Scope,
+                scope
+              ),
+              Effect.never
+            )
+          ),
+          (event: Ev) =>
+            ensureMatches(cssSelector, element, event, capture) ||
+            ensureMatches(lastTwoCssSelectors, element, event, capture)
+        )
+      )
+    )
+
+    if (capture) {
+      return pipe(event$, Fx.map(findCurrentTarget(cssSelector, element)))
+    }
+
+    return event$
+  }
+}
+
+function makeElementEventStream<Ev extends Event>(
+  currentTarget: Element,
+  eventName: string,
+  options: EventListenerOptions = {}
+) {
+  return function(rendered: Rendered): Fx.Fx<never, never, Ev> {
+    const { capture } = options
+    const elements = getElements(rendered)
+
+    const event$ = Fx.merge(
+      elements.map((element) =>
+        Fx.filter(
+          Fx.withScopedFork<never, never, Ev>(({ scope, sink }) =>
+            Effect.zipRight(
+              Effect.provideService(
+                addEventListener(element, {
+                  eventName,
+                  handler: (ev) => sink.onSuccess(ev as any as Ev)
+                }),
+                Scope.Scope,
+                scope
+              ),
+              Effect.never
+            )
+          ),
+          (event: Ev) => event.target ? currentTarget.contains(event.target as Element) : false
+        )
+      )
+    )
+
+    if (capture) {
+      return event$.pipe(Fx.map((ev) => cloneEvent(ev, currentTarget)))
+    }
+
+    return event$
+  }
+}
+
+function findCurrentTarget(cssSelector: string, element: Rendered) {
+  const elements = getElements(element)
+  const length = elements.length
+
+  return function<E extends Event>(event: E): E {
+    for (let i = 0; i < length; ++i) {
+      const element = elements[i]
+      const isCurrentTarget = !cssSelector || element.matches(cssSelector)
+
+      if (isCurrentTarget) return cloneEvent(event, element) as E
+
+      const nodes = element.querySelectorAll(cssSelector)
+
+      for (let i = 0; i < nodes.length; ++i) {
+        const node = nodes[i]
+        const containsEventTarget = node.contains(event.target as Element)
+
+        if (containsEventTarget) return cloneEvent(event, node)
+      }
+    }
+
+    return event
+  }
+}
+
+const EVENT_PROPERTY_TO_REPLACE = "currentTarget"
+
+function cloneEvent<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 ensureMatches(cssSelector: string, element: Element, ev: Event, capture = false): boolean {
+  let target = ev.target as Element
+
+  if (!cssSelector) return (capture && element.contains(target)) || target === element
+
+  for (; target && target !== element; target = target.parentElement as Element) {
+    if (target.matches(cssSelector)) return true
+  }
+
+  return element.matches(cssSelector)
+}
+
+function isDocumentFragment(element: RenderedWithoutArray): element is DocumentFragment {
+  return element.nodeType === element.DOCUMENT_FRAGMENT_NODE
+}
+
+function isElement(element: RenderedWithoutArray): element is Element {
+  return element.nodeType === element.ELEMENT_NODE
+}
+
+/**
+ * @internal
+ * @since 1.0.0
+ */
+// @ts-expect-error
+export class ElementSourceImpl<
+  T extends Rendered,
+  EventMap extends {} = DefaultEventMap<Rendered.Elements<T>[number]>
+> extends FxEffectBase<never, never, Rendered.Elements<T>, never, NoSuchElementException, Rendered.Elements<T>>
+  implements Omit<ElementSource<T, EventMap>, PlaceholderTypeId>
+{
+  readonly [PlaceholderTypeId]!: any
+
+  private bubbleMap = new Map<any, Fx.Fx<never, never, any>>()
+  private captureMap = new Map<any, Fx.Fx<never, never, any>>()
+
+  readonly elements: ElementSource<T, EventMap>["elements"]
+  readonly version: ElementSource<T, EventMap>["version"]
+
+  constructor(readonly rootElement: Filtered<never, never, T>, readonly selector: Selector = CssSelectors([])) {
+    super()
+    this.query = this.query.bind(this)
+    this.events = this.events.bind(this)
+
+    this.elements = this.selector._tag === "css" ?
+      this.rootElement.map(findMatchingElements<any>(this.selector.selectors)) :
+      Filtered(Versioned.of(this.selector.element), (x) => Effect.succeedSome([x])) as any
+
+    this.version = this.elements.version
+  }
+
+  static fromElement<T extends Rendered>(rootElement: T): ElementSource<T> {
+    return new ElementSourceImpl(Filtered(Versioned.of(rootElement), Effect.succeedSome)) as any
+  }
+
+  protected toEffect(): Effect.Effect<never, NoSuchElementException, Rendered.Elements<T>> {
+    return this.elements
+  }
+
+  protected toFx() {
+    return this.elements
+  }
+
+  query<S extends string, Ev extends {} = DefaultEventMap<ParseSelector<S, Element>>>(
+    selector: S
+  ): ElementSource<ParseSelector<S, Element>, Ev> {
+    if (selector === ROOT_CSS_SELECTOR) {
+      return this as any
+    } else if (typeof selector === "string") {
+      if (this.selector._tag === "css") {
+        return new ElementSourceImpl(this.rootElement, CssSelectors([...this.selector.selectors, selector])) as any
+      } else {
+        return ElementSourceImpl.fromElement(this.selector.element).query(selector) as any
+      }
+    } else {
+      return new ElementSourceImpl(this.rootElement, ElementSelector(selector)) as any
+    }
+  }
+
+  events<Type extends keyof EventMap>(
+    type: Type,
+    options?: AddEventListenerOptions
+  ) {
+    const capture = options?.capture === true
+    const map = capture ? this.captureMap : this.bubbleMap
+
+    let current = map.get(type)
+
+    if (current === undefined) {
+      if (this.selector._tag === "css") {
+        current = this.rootElement.map(findMostSpecificElement(this.selector.selectors)).pipe(
+          Fx.switchMap(makeEventStream(this.selector.selectors, type as any, options)),
+          Fx.multicast
+        )
+      } else {
+        current = this.rootElement.pipe(
+          Fx.switchMap(makeElementEventStream(this.selector.element, type as string, options)),
+          Fx.multicast
+        )
+      }
+
+      map.set(type, current)
+    }
+
+    return current
+  }
+
+  dispatchEvent(event: Event, wait?: DurationInput) {
+    return Effect.zipRight(
+      Effect.flatMap(
+        this.elements,
+        (elements) => Effect.sync(() => elements.length > 0 ? elements[0].dispatchEvent(event) : null)
+      ),
+      // Allow time to move forward
+      adjustTime(wait)
+    )
+  }
+}
+
+/**
+ * @since 1.0.0
+ */
+export type Selector = CssSelectors | ElementSelector
+
+/**
+ * @since 1.0.0
+ */
+export interface CssSelectors {
+  readonly _tag: "css"
+  readonly selectors: ReadonlyArray<string>
+}
+
+/**
+ * @since 1.0.0
+ */
+export function CssSelectors(selectors: ReadonlyArray<string>): CssSelectors {
+  return {
+    _tag: "css",
+    selectors
+  }
+}
+
+/**
+ * @since 1.0.0
+ */
+export interface ElementSelector {
+  readonly _tag: "element"
+  readonly element: Element
+}
+
+/**
+ * @since 1.0.0
+ */
+export function ElementSelector(element: Element): ElementSelector {
+  return {
+    _tag: "element",
+    element
+  }
+}

package/src/Entry.ts

@@ -0,0 +1,28 @@
+/**
+ * @since 1.0.0
+ */
+import type { HtmlChunk } from "./HtmlChunk"
+import type { Template } from "./Template"
+
+/**
+ * @since 1.0.0
+ */
+export type Entry = BrowserEntry | ServerEntry
+
+/**
+ * @since 1.0.0
+ */
+export interface BrowserEntry {
+  readonly _tag: "Browser"
+  readonly template: Template
+  readonly content: DocumentFragment
+}
+
+/**
+ * @since 1.0.0
+ */
+export interface ServerEntry {
+  readonly _tag: "Server"
+  readonly template: Template
+  readonly chunks: ReadonlyArray<HtmlChunk>
+}

package/src/EventHandler.ts

@@ -0,0 +1,104 @@
+/**
+ * @since 1.0.0
+ */
+import { type EventWithTarget, isUsingKeyModifier } from "@typed/dom/EventTarget"
+import { type Effect, unit } from "effect/Effect"
+import type { Placeholder } from "./Placeholder"
+
+/**
+ * @since 1.0.0
+ */
+export const EventHandlerTypeId = Symbol.for("./EventHandler")
+/**
+ * @since 1.0.0
+ */
+export type EventHandlerTypeId = typeof EventHandlerTypeId
+
+/**
+ * @since 1.0.0
+ */
+export interface EventHandler<R, E, Ev extends Event = Event> extends Placeholder<R, E, null> {
+  readonly [EventHandlerTypeId]: EventHandlerTypeId
+  readonly handler: (event: Ev) => Effect<R, E, unknown>
+  readonly options: AddEventListenerOptions | undefined
+}
+
+/**
+ * @since 1.0.0
+ */
+export type Context<T> = T extends EventHandler<infer R, infer _E, infer _Ev> ? R : never
+/**
+ * @since 1.0.0
+ */
+export type Error<T> = T extends EventHandler<infer _R, infer E, infer _Ev> ? E : never
+/**
+ * @since 1.0.0
+ */
+export type EventOf<T> = T extends EventHandler<infer _R, infer _E, infer Ev> ? Ev : never
+
+/**
+ * @since 1.0.0
+ */
+export function make<R, E, Ev extends Event>(
+  handler: (event: Ev) => Effect<R, E, unknown>,
+  options?: AddEventListenerOptions
+): EventHandler<R, E, Ev> {
+  return {
+    [EventHandlerTypeId]: EventHandlerTypeId,
+    handler,
+    options
+  } as any
+}
+
+/**
+ * @since 1.0.0
+ */
+export function preventDefault<R, E, Ev extends Event>(
+  handler: (event: Ev) => Effect<R, E, unknown>,
+  options?: AddEventListenerOptions
+): EventHandler<R, E, Ev> {
+  return make((ev) => (ev.preventDefault(), handler(ev)), options)
+}
+
+/**
+ * @since 1.0.0
+ */
+export function stopPropagation<R, E, Ev extends Event>(
+  handler: (event: Ev) => Effect<R, E, unknown>,
+  options?: AddEventListenerOptions
+): EventHandler<R, E, Ev> {
+  return make((ev) => (ev.stopPropagation(), handler(ev)), options)
+}
+
+/**
+ * @since 1.0.0
+ */
+export function stopImmediatePropagation<R, E, Ev extends Event>(
+  handler: (event: Ev) => Effect<R, E, unknown>,
+  options?: AddEventListenerOptions
+): EventHandler<R, E, Ev> {
+  return make((ev) => (ev.stopImmediatePropagation(), handler(ev)), options)
+}
+
+/**
+ * @since 1.0.0
+ */
+export function target<T extends HTMLElement>() {
+  return <R, E, Ev extends Event>(
+    handler: (event: EventWithTarget<T, Ev>) => Effect<R, E, unknown>,
+    options?: AddEventListenerOptions
+  ): EventHandler<R, E, EventWithTarget<T, Ev>> => {
+    return make(handler, options)
+  }
+}
+
+/**
+ * @since 1.0.0
+ */
+export function keys<Keys extends ReadonlyArray<string>>(...keys: Keys) {
+  return <R, E>(
+    handler: (event: KeyboardEvent & { key: Keys[number] }) => Effect<R, E, unknown>,
+    options?: AddEventListenerOptions
+  ): EventHandler<R, E, KeyboardEvent> =>
+    make((ev: KeyboardEvent) => !isUsingKeyModifier(ev) && keys.includes(ev.key) ? handler(ev as any) : unit, options)
+}