@typed/template 0.2.0 → 0.3.0

package/src/RenderTemplate.ts

@@ -4,30 +4,22 @@
 
 import * as Context from "@typed/context"
 import * as Fx from "@typed/fx/Fx"
-import type { Rendered } from "@typed/wire"
-import type * as Effect from "effect/Effect"
 import type { Scope } from "effect/Scope"
-import type { ElementRef } from "./ElementRef.js"
 import type { Placeholder } from "./Placeholder.js"
 import type { Renderable } from "./Renderable.js"
 import type { RenderEvent } from "./RenderEvent.js"
-import type { TemplateInstance } from "./TemplateInstance.js"
 
 /**
  * @since 1.0.0
  */
 export interface RenderTemplate {
-  <Values extends ReadonlyArray<Renderable<any, any>>, T extends Rendered = Rendered>(
+  <Values extends ReadonlyArray<Renderable<any, any>>>(
     templateStrings: TemplateStringsArray,
-    values: Values,
-    ref?: ElementRef<T>
-  ): Effect.Effect<
-    Scope | Placeholder.Context<readonly [] extends Values ? never : Values[number]>,
-    never,
-    TemplateInstance<
-      Placeholder.Error<Values[number]>,
-      T
-    >
+    values: Values
+  ): Fx.Fx<
+    Scope | Placeholder.Context<Values[number]>,
+    Placeholder.Error<Values[number]>,
+    RenderEvent
   >
 }
 
@@ -38,51 +30,14 @@ export const RenderTemplate: Context.Tagged<RenderTemplate, RenderTemplate> = Co
   RenderTemplate,
   RenderTemplate
 >(
-  "./RenderTemplate.js"
+  "@typed/template/RenderTemplate"
 )
-
-/**
- * @since 1.0.0
- */
-export interface TemplateFx<R, E, T extends Rendered = Rendered> extends
-  Fx.Fx<
-    RenderTemplate | Scope | R,
-    E,
-    RenderEvent
-  >
-{
-  readonly instance: Effect.Effect<
-    RenderTemplate | Scope | R,
-    never,
-    TemplateInstance<
-      E,
-      T
-    >
-  >
-}
-
 /**
  * @since 1.0.0
  */
 export function html<const Values extends ReadonlyArray<Renderable<any, any>>>(
   template: TemplateStringsArray,
   ...values: Values
-): TemplateFx<Placeholder.Context<Values[number]>, Placeholder.Error<Values[number]>> {
-  const instance = RenderTemplate.withEffect((render) => render(template, values))
-
-  return Object.assign(Fx.fromFxEffect(instance), { instance })
-}
-
-/**
- * @since 1.0.0
- */
-export function as<T extends Rendered = Rendered>(ref: ElementRef<T>) {
-  return function html<const Values extends ReadonlyArray<Renderable<any, any>>>(
-    template: TemplateStringsArray,
-    ...values: Values
-  ): TemplateFx<Placeholder.Context<Values[number]>, Placeholder.Error<Values[number]>, T> {
-    const instance = RenderTemplate.withEffect((render) => render(template, values, ref))
-
-    return Object.assign(Fx.fromFxEffect(instance), { instance })
-  }
+): Fx.Fx<RenderTemplate | Scope | Placeholder.Context<Values[number]>, Placeholder.Error<Values[number]>, RenderEvent> {
+  return Fx.fromFxEffect(RenderTemplate.with((render) => render(template, values)))
 }

package/src/Renderable.ts

@@ -12,7 +12,8 @@ import type { RenderEvent } from "./RenderEvent.js"
  */
 export type Renderable<R = never, E = never> =
   | Renderable.Value
-  | { readonly [key: string]: Renderable.Value } // TODO: Should we manage data attributes this way?
+  | Placeholder<R, E, any>
+  | { readonly [key: string]: Renderable<R, E> | Placeholder<R, E, any> | unknown } // TODO: Should we manage data attributes this way?
   | Placeholder<R, E, any>
   | Effect<R, E, any>
   | Fx<R, E, any>

package/src/Template.ts

@@ -32,6 +32,7 @@ export type Node =
   | TextNode
   | NodePart
   | Comment
+  | DocType
 
 /**
  * @since 1.0.0
@@ -44,6 +45,7 @@ export type PartNode =
   | EventPartNode
   | NodePart
   | PropertyPartNode
+  | PropertiesPartNode
   | RefPartNode
   | TextPartNode
   | CommentPartNode
@@ -96,6 +98,18 @@ export class TextOnlyElement {
   ) {}
 }
 
+/**
+ * @since 1.0.0
+ */
+export class DocType {
+  readonly _tag = "doctype"
+  constructor(
+    readonly name: string,
+    readonly publicType?: string,
+    readonly systemId?: string
+  ) {}
+}
+
 /**
  * @since 1.0.0
  */
@@ -110,6 +124,7 @@ export type Attribute =
   | DataPartNode
   | EventPartNode
   | PropertyPartNode
+  | PropertiesPartNode
   | RefPartNode
 
 /**
@@ -219,6 +234,17 @@ export class PropertyPartNode {
   ) {}
 }
 
+/**
+ * @since 1.0.0
+ */
+export class PropertiesPartNode {
+  readonly _tag = "properties" as const
+
+  constructor(
+    readonly index: number
+  ) {}
+}
+
 /**
  * @since 1.0.0
  */

package/src/TemplateInstance.ts

@@ -8,14 +8,14 @@ import type * as Versioned from "@typed/fx/Versioned"
 import type { Rendered } from "@typed/wire"
 import type { NoSuchElementException } from "effect/Cause"
 import type * as Effect from "effect/Effect"
+import type { Scope } from "effect/Scope"
 import { type ElementRef, ElementRefTypeId } from "./ElementRef.js"
-import type { Placeholder } from "./Placeholder.js"
 import type { RenderEvent } from "./RenderEvent.js"
 
 /**
  * @since 1.0.0
  */
-export const TemplateInstanceTypeId = Symbol.for("./TemplateInstance.js")
+export const TemplateInstanceTypeId = Symbol.for("@typed/template/TemplateInstance")
 /**
  * @since 1.0.0
  */
@@ -25,7 +25,7 @@ export type TemplateInstanceTypeId = typeof TemplateInstanceTypeId
  * @since 1.0.0
  */
 export interface TemplateInstance<E, T extends Rendered = Rendered>
-  extends Versioned.Versioned<never, never, never, E, RenderEvent, never, E | NoSuchElementException, T>
+  extends Versioned.Versioned<never, never, Scope, E, RenderEvent, never, E | NoSuchElementException, T>
 {
   readonly [TemplateInstanceTypeId]: TemplateInstanceTypeId
 
@@ -42,16 +42,16 @@ export interface TemplateInstance<E, T extends Rendered = Rendered>
  * @since 1.0.0
  */
 export function TemplateInstance<T extends Rendered = Rendered, E = never>(
-  events: Fx.Fx<never, E, RenderEvent>,
+  events: Fx.Fx<Scope, E, RenderEvent>,
   ref: ElementRef<T>
 ): TemplateInstance<E, T> {
   return new TemplateInstanceImpl(events, ref) as any
 }
 
-// @ts-expect-error placeholder issues
+// @ts-expect-error does not implement Placeholder
 class TemplateInstanceImpl<E, T extends Rendered>
-  extends FxEffectBase<never, E, RenderEvent, never, E | NoSuchElementException, T>
-  implements Omit<TemplateInstance<E, T>, keyof Placeholder<never, E, RenderEvent>>
+  extends FxEffectBase<Scope, E, RenderEvent, never, E | NoSuchElementException, T>
+  implements TemplateInstance<E, T>
 {
   readonly [TemplateInstanceTypeId]: TemplateInstanceTypeId = TemplateInstanceTypeId
   query: TemplateInstance<E, T>["query"]
@@ -61,7 +61,7 @@ class TemplateInstanceImpl<E, T extends Rendered>
   version: Effect.Effect<never, never, number>
 
   constructor(
-    readonly i0: Fx.Fx<never, E, RenderEvent>,
+    readonly i0: Fx.Fx<Scope, E, RenderEvent>,
     readonly i1: ElementRef<T>
   ) {
     super()
@@ -73,7 +73,7 @@ class TemplateInstanceImpl<E, T extends Rendered>
     this.version = this.i1[ElementRefTypeId].version
   }
 
-  toFx(): Fx.Fx<never, E, RenderEvent> {
+  toFx(): Fx.Fx<Scope, E, RenderEvent> {
     return this.i0
   }
 

package/src/Test.ts

@@ -6,17 +6,15 @@ import type { DomServices, DomServicesElementParams } from "@typed/dom/DomServic
 import type { GlobalThis } from "@typed/dom/GlobalThis"
 import type { Window } from "@typed/dom/Window"
 import type { CurrentEnvironment } from "@typed/environment"
-import type { Computed } from "@typed/fx/Computed"
-import type { Filtered } from "@typed/fx/Filtered"
 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 * as Cause from "effect/Cause"
 import * as Effect from "effect/Effect"
 import * as Either from "effect/Either"
 import * as Fiber from "effect/Fiber"
 import type * as Scope from "effect/Scope"
-import * as happyDOM from "happy-dom"
 import type IHappyDOMOptions from "happy-dom/lib/window/IHappyDOMOptions.js"
 import * as ElementRef from "./ElementRef.js"
 import { ROOT_CSS_SELECTOR } from "./ElementSource.js"
@@ -36,11 +34,11 @@ import type { RenderTemplate } from "./RenderTemplate.js"
  * @since 1.0.0
  */
 export interface TestRender<E> {
-  readonly window: Window & GlobalThis & Pick<happyDOM.Window, "happyDOM">
+  readonly window: Window & GlobalThis
   readonly document: Document
   readonly elementRef: ElementRef.ElementRef
-  readonly errors: Computed<never, never, ReadonlyArray<E>>
-  readonly lastError: Filtered<never, never, E>
+  readonly errors: RefSubject.Computed<never, never, ReadonlyArray<E>>
+  readonly lastError: RefSubject.Filtered<never, never, E>
   readonly interrupt: Effect.Effect<never, never, void>
   readonly makeEvent: (type: string, eventInitDict?: EventInit) => Event
   readonly makeCustomEvent: <A>(type: string, eventInitDict?: CustomEventInit<A>) => CustomEvent<A>
@@ -62,24 +60,25 @@ export function testRender<R, E>(
   TestRender<E>
 > {
   return Effect.gen(function*(_) {
-    const window = makeWindow(options)
+    const window = yield* _(getOrMakeWindow(options))
     const elementRef = yield* _(ElementRef.make())
-    const errors = yield* _(RefArray.make<never, never, E>(Effect.succeed([])))
+    const errors = yield* _(RefSubject.make<never, never, ReadonlyArray<E>>(Effect.succeed([])))
     const fiber = yield* _(
       fx,
       render,
-      Fx.run(Sink.Sink(
-        (cause) =>
-          Cause.failureOrCause(cause).pipe(
-            Either.match({
-              onLeft: (error) => RefArray.append(errors, error),
-              onRight: (cause) => errors.onFailure(cause)
-            })
-          ),
-        (rendered) => ElementRef.set(elementRef, rendered)
-      )),
+      (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.browser(window, { skipRenderScheduling: true }))
+      Effect.provide(RenderContext.dom(window, { skipRenderScheduling: true }))
     )
 
     const test: TestRender<E> = {
@@ -99,6 +98,9 @@ export function testRender<R, E>(
     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
   })
 }
@@ -146,6 +148,23 @@ export function click<E>(
 
 // internals
 
-function makeWindow(options?: IHappyDOMOptions) {
-  return new happyDOM.Window(options) as any as Window & GlobalThis & Pick<happyDOM.Window, "happyDOM">
+function getOrMakeWindow(options?: IHappyDOMOptions) {
+  if (typeof window !== "undefined" && typeof document !== "undefined") {
+    return Effect.gen(function*(_) {
+      window.document.head.innerHTML = ""
+      window.document.body.innerHTML = ""
+      yield* _(Effect.addFinalizer(() =>
+        Effect.sync(() => {
+          window.document.head.innerHTML = ""
+          window.document.body.innerHTML = ""
+        })
+      ))
+
+      return window
+    })
+  }
+
+  return Effect.promise(() =>
+    import("happy-dom").then((happyDOM) => new happyDOM.Window(options) as any as Window & GlobalThis)
+  )
 }

package/src/index.ts

@@ -60,7 +60,3 @@ export * from "./RenderEvent.js"
  * @since 1.0.0
  */
 export * from "./RenderTemplate.js"
-/**
- * @since 1.0.0
- */
-export * from "./TemplateInstance.js"

package/src/internal/EventSource.ts

@@ -0,0 +1,153 @@
+import type { Rendered } from "@typed/wire"
+import { Effect, Scope } from "effect"
+import type * as Fiber from "effect/Fiber"
+import * as Runtime from "effect/Runtime"
+import { getElements } from "../ElementSource"
+import type { EventHandler } from "../EventHandler"
+
+type EventName = string
+
+type Handler<Ev extends Event> = EventHandler<never, never, 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<never, never, void>
+}
+
+type Entry = readonly [Element, Handler<any>]
+type Run = <E, A>(effect: Effect.Effect<never, E, A>) => Fiber.RuntimeFiber<E, A>
+
+const disposable = (f: () => void): Disposable => ({
+  [Symbol.dispose]: f
+})
+
+export function makeEventSource(): EventSource {
+  const bubbleListeners = new Map<
+    EventName,
+    Set<Entry>
+  >()
+  const captureListeners = new Map<
+    EventName,
+    Set<Entry>
+  >()
+
+  function addListener(
+    listeners: Map<
+      EventName,
+      Set<Entry>
+    >,
+    event: EventName,
+    entry: Entry
+  ): void {
+    const set = listeners.get(event)
+    if (set === undefined) {
+      const set = new Set<Entry>()
+      set.add(entry)
+      listeners.set(event, set)
+    } else {
+      set.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, handlers] of bubbleListeners) {
+      const listener = (ev: Event) =>
+        run(
+          Effect.forEach(handlers, ([el, handler]) =>
+            ev.target === el || el.contains(ev.target as Node) ? handler.handler(ev) : Effect.unit)
+        )
+      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, handlers] of captureListeners) {
+      const listener = (ev: Event) =>
+        run(
+          Effect.forEach(handlers, ([el, handler]) =>
+            ev.target === el || el.contains(ev.target as Node)
+              ? handler.handler(proxyCurrentTargetForCaptureEvents(ev, el))
+              : Effect.unit)
+        )
+      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
+
+    if (!hasBubbleListeners && !hasCaptureListeners) {
+      return Effect.unit
+    }
+
+    return Effect.flatMap(Effect.runtime<never>(), (runtime) => {
+      const elements = getElements(rendered)
+      const disposables: Array<Disposable> = []
+      const runFork = Runtime.runFork(runtime)
+      const run: Run = <E, A>(effect: Effect.Effect<never, E, A>) =>
+        runFork(Effect.fromFiberEffect(Effect.forkIn(effect, scope)))
+
+      for (const element of elements) {
+        if (hasBubbleListeners) {
+          disposables.push(...setupBubbleListeners(element, run))
+        }
+        if (hasCaptureListeners) {
+          disposables.push(...setupCaptureListeners(element, run))
+        }
+      }
+
+      return Scope.addFinalizer(scope, Effect.sync(() => disposables.forEach((d) => d[Symbol.dispose]())))
+    })
+  }
+
+  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.some((h) => h[1].options?.once === true),
+    passive: hs.every((h) => h[1].options?.passive === true)
+  }
+}

package/src/internal/browser.ts

@@ -1,7 +1,6 @@
 import { diffable, isComment } from "@typed/wire"
 import udomdiff from "udomdiff"
 import type { RenderContext } from "../RenderContext.js"
-import type { RenderEvent } from "../RenderEvent.js"
 import { isRenderEvent } from "../RenderEvent.js"
 import { NodePartImpl } from "./parts.js"
 import { findHoleComment, isCommentWithValue } from "./utils.js"
@@ -19,16 +18,20 @@ export function makeRenderNodePart(
 
   return new NodePartImpl(index, ({ part, value }) => {
     return ctx.queue.add(part, () => {
-      matchValue(value, (content) => {
-        if (text === undefined) {
-          text = document.createTextNode("")
+      matchValue(
+        value,
+        (content) => {
+          if (text === undefined) {
+            text = document.createTextNode("")
+          }
+          text.textContent = content
+
+          nodes = diffChildren(comment, nodes, [text], document)
+        },
+        (updatedNodes) => {
+          nodes = diffChildren(comment, nodes, updatedNodes, document)
         }
-        text.textContent = content
-
-        nodes = diffChildren(comment, nodes, [text], document)
-      }, (updatedNodes) => {
-        nodes = diffChildren(comment, nodes, updatedNodes, document)
-      })
+      )
     })
   }, nodes)
 }
@@ -83,22 +86,12 @@ export function diffChildren(
     comment.parentNode!,
     // Document Fragments cannot be removed, so we filter them out
     currentNodes.filter((x) => x.nodeType !== x.DOCUMENT_FRAGMENT_NODE),
-    nextNodes.flatMap(flattenRenderEvent),
+    nextNodes,
     diffable(document),
     comment
   )
 }
 
-function flattenRenderEvent(x: Node | RenderEvent): Array<Node> {
-  if (isRenderEvent(x)) {
-    const value = x.valueOf()
-
-    return Array.isArray(value) ? value : [value]
-  } else {
-    return [x]
-  }
-}
-
 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
@@ -117,16 +110,24 @@ function matchValue<A, B>(value: unknown, onText: (text: string) => A, onNodes:
         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((x) => (x === null ? [] : [isRenderEvent(x) ? x.valueOf() : x]))
-          )
+          return onNodes(value.flatMap(renderEventToArray))
         } // in all other cases the content is stringified as is
         else return onText(String(value))
       } else {
-        return onNodes([isRenderEvent(value) ? (value.valueOf() as Node) : (value as Node)])
+        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]
+}