@typed/template 0.1.4 → 0.3.0

package/src/RenderContext.ts

@@ -11,10 +11,13 @@ import type { Environment } from "@typed/environment"
 import { CurrentEnvironment } from "@typed/environment"
 import * as Idle from "@typed/fx/Idle"
 import type { Rendered } from "@typed/wire"
-import { Effect, Layer, Option } from "effect"
+import * as Effect from "effect/Effect"
+import * as Layer from "effect/Layer"
+import * as Option from "effect/Option"
 import * as Scope from "effect/Scope"
 import type { Entry } from "./Entry.js"
-import type { Part, SparsePart } from "./Part.js"
+
+// TODO: We should probably have a more explicit environment type between DOM/HTML rendering
 
 /**
  * The context in which templates are rendered within
@@ -54,7 +57,7 @@ export const RenderContext: Context.Tagged<RenderContext, RenderContext> = Conte
  * @since 1.0.0
  */
 export interface RenderQueue {
-  readonly add: (part: Part | SparsePart, task: () => void) => Effect.Effect<Scope.Scope, never, void>
+  readonly add: (part: unknown, task: () => void) => Effect.Effect<Scope.Scope, never, void>
 }
 
 /**
@@ -114,19 +117,19 @@ const buildWithCurrentEnvironment = (environment: Environment, skipRenderSchedul
 /**
  * @since 1.0.0
  */
-export const browser: (
+export const dom: (
   window: Window & GlobalThis,
   options?: DomServicesElementParams & { readonly skipRenderScheduling?: boolean }
 ) => Layer.Layer<never, never, RenderContext | CurrentEnvironment | DomServices> = (window, options) =>
   Layer.provideMerge(
-    Layer.mergeAll(Window.layer(window), GlobalThis.layer(window)),
     Layer.mergeAll(
       buildWithCurrentEnvironment(
-        "browser",
+        "dom",
         options?.skipRenderScheduling
       ),
       domServices(options)
-    )
+    ),
+    Layer.mergeAll(Window.layer(window), GlobalThis.layer(window))
   )
 
 /**
@@ -146,8 +149,9 @@ export {
 }
 
 class RenderQueueImpl implements RenderQueue {
-  queue = new Map<Part | SparsePart, () => void>()
+  queue = new Map<unknown, () => void>()
   scheduled = false
+  run: Effect.Effect<Scope.Scope, never, void>
 
   constructor(
     readonly scope: Scope.Scope,
@@ -155,9 +159,11 @@ class RenderQueueImpl implements RenderQueue {
     readonly skipRenderScheduling: boolean = false
   ) {
     this.add.bind(this)
+
+    this.run = typeof requestAnimationFrame === "undefined" ? this.runIdle : this.runAnimationFrame
   }
 
-  add(part: Part | SparsePart, task: () => void) {
+  add(part: unknown, task: () => void) {
     if (this.skipRenderScheduling) return Effect.sync(task)
 
     return Effect.suspend(() => {
@@ -190,26 +196,20 @@ class RenderQueueImpl implements RenderQueue {
     )
   })
 
-  run: Effect.Effect<Scope.Scope, never, void> = Effect.suspend(() =>
-    Effect.flatMap(
+  runIdle: Effect.Effect<Scope.Scope, never, void> = Effect.suspend(() => {
+    return Effect.flatMap(
       Idle.whenIdle(this.options),
       (deadline) =>
         Effect.suspend(() => {
           const iterator = this.queue.entries()
 
-          while (Idle.shouldContinue(deadline)) {
-            const result = iterator.next()
-
-            if (result.done) break
-            else {
-              const [part, task] = result.value
-              this.queue.delete(part)
-              task()
-            }
+          while (Idle.shouldContinue(deadline) && this.runTask(iterator)) {
+            // Continue
           }
 
+          // If we have more work to do, schedule another run
           if (this.queue.size > 0) {
-            return this.run
+            return this.runIdle
           }
 
           this.scheduled = false
@@ -217,5 +217,33 @@ class RenderQueueImpl implements RenderQueue {
           return Effect.unit
         })
     )
+  })
+
+  runAnimationFrame: Effect.Effect<Scope.Scope, never, void> = Effect.zipRight(
+    Effect.asyncOption<never, never, void>((cb) => {
+      const id = requestAnimationFrame(() => cb(Effect.unit))
+      return Option.some(Effect.sync(() => cancelAnimationFrame(id)))
+    }),
+    Effect.sync(() => {
+      const iterator = this.queue.entries()
+
+      while (this.runTask(iterator)) {
+        // Continue
+      }
+
+      this.scheduled = false
+    })
   )
+
+  private runTask = (iterator: Iterator<[unknown, () => void]>) => {
+    const result = iterator.next()
+
+    if (result.done) return false
+    else {
+      const [part, task] = result.value
+      this.queue.delete(part)
+      task()
+      return true
+    }
+  }
 }

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)
+  }
+}