@typed/template 0.9.6 → 0.11.0

package/src/RenderContext.ts

@@ -9,16 +9,11 @@ import { GlobalThis } from "@typed/dom/GlobalThis"
 import { Window } from "@typed/dom/Window"
 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 * 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"
 
-// TODO: We should probably have a more explicit environment type between DOM/HTML rendering
-
 /**
  * The context in which templates are rendered within
  * @since 1.0.0
@@ -38,11 +33,6 @@ export interface RenderContext {
    * Cache for individual templates.
    */
   readonly templateCache: WeakMap<TemplateStringsArray, Entry>
-
-  /**
-   * Queue for work to be batched
-   */
-  readonly queue: RenderQueue
 }
 
 /**
@@ -50,44 +40,26 @@ export interface RenderContext {
  * @since 1.0.0
  */
 export const RenderContext: Context.Tagged<RenderContext, RenderContext> = Context.Tagged<RenderContext>(
-  "./RenderContext.js"
+  "@typed/template/RenderContext"
 )
 
 /**
  * @since 1.0.0
  */
-export interface RenderQueue {
-  readonly add: (part: unknown, task: () => void) => Effect.Effect<void, never, Scope.Scope>
-}
-
-/**
- * @since 1.0.0
- */
-export type RenderContextOptions = IdleRequestOptions & {
+export type RenderContextOptions = {
   readonly environment: Environment
-  readonly scope: Scope.Scope
-}
-
-/**
- * @since 1.0.0
- */
-export function make({ ...options }: Omit<RenderContextOptions, "scope">, skipRenderScheduling?: boolean) {
-  return Effect.scopeWith((scope) => Effect.succeed(unsafeMake({ ...options, scope }, skipRenderScheduling)))
 }
 
 /**
  * @since 1.0.0
  */
-export function unsafeMake({
-  environment,
-  scope,
-  ...options
-}: RenderContextOptions, skipRenderScheduling?: boolean): RenderContext {
+export function make({
+  environment
+}: RenderContextOptions): RenderContext {
   return {
     environment,
     renderCache: new WeakMap(),
-    templateCache: new WeakMap(),
-    queue: new RenderQueueImpl(scope, options, skipRenderScheduling ?? false)
+    templateCache: new WeakMap()
   }
 }
 
@@ -108,9 +80,9 @@ export function getTemplateCache(
   return Option.fromNullable(templateCache.get(key))
 }
 
-const buildWithCurrentEnvironment = (environment: Environment, skipRenderScheduling?: boolean) =>
+const buildWithCurrentEnvironment = (environment: Environment) =>
   Layer.mergeAll(
-    RenderContext.scoped(make({ environment }, skipRenderScheduling)),
+    RenderContext.layer(make({ environment })),
     CurrentEnvironment.layer(environment)
   )
 
@@ -119,14 +91,14 @@ const buildWithCurrentEnvironment = (environment: Environment, skipRenderSchedul
  */
 export const dom: (
   window: Window & GlobalThis,
-  options?: DomServicesElementParams & { readonly skipRenderScheduling?: boolean }
-) => Layer.Layer<RenderContext | CurrentEnvironment | DomServices> = (window, options) =>
+  options?: DomServicesElementParams
+) => Layer.Layer<RenderContext | CurrentEnvironment | DomServices> = (
+  window,
+  options
+) =>
   Layer.provideMerge(
     Layer.mergeAll(
-      buildWithCurrentEnvironment(
-        "dom",
-        options?.skipRenderScheduling
-      ),
+      buildWithCurrentEnvironment("dom"),
       domServices(options)
     ),
     Layer.mergeAll(Window.layer(window), GlobalThis.layer(window))
@@ -147,103 +119,3 @@ export {
    */
   static_ as static
 }
-
-class RenderQueueImpl implements RenderQueue {
-  queue = new Map<unknown, () => void>()
-  scheduled = false
-  run: Effect.Effect<void, never, Scope.Scope>
-
-  constructor(
-    readonly scope: Scope.Scope,
-    readonly options?: IdleRequestOptions,
-    readonly skipRenderScheduling: boolean = false
-  ) {
-    this.add.bind(this)
-
-    this.run = typeof requestAnimationFrame === "undefined" ? this.runIdle : this.runAnimationFrame
-  }
-
-  add(part: unknown, task: () => void) {
-    if (this.skipRenderScheduling) return Effect.sync(task)
-
-    return Effect.suspend(() => {
-      this.queue.set(part, task)
-
-      return Effect.zipRight(
-        Effect.addFinalizer(() =>
-          Effect.sync(() => {
-            const currentTask = this.queue.get(part)
-
-            // If the current task is still the same we'll delete it from the queue
-            if (currentTask === task) {
-              this.queue.delete(part)
-            }
-          })
-        ),
-        this.scheduleNextRun
-      )
-    })
-  }
-
-  scheduleNextRun = Effect.suspend(() => {
-    if (this.queue.size === 0 || this.scheduled) return Effect.unit
-
-    this.scheduled = true
-
-    return this.run.pipe(
-      Scope.extend(this.scope),
-      Effect.forkIn(this.scope)
-    )
-  })
-
-  runIdle: Effect.Effect<void, never, Scope.Scope> = Effect.suspend(() => {
-    return Effect.flatMap(
-      Idle.whenIdle(this.options),
-      (deadline) =>
-        Effect.suspend(() => {
-          const iterator = this.queue.entries()
-
-          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.runIdle
-          }
-
-          this.scheduled = false
-
-          return Effect.unit
-        })
-    )
-  })
-
-  runAnimationFrame: Effect.Effect<void, never, Scope.Scope> = Effect.zipRight(
-    Effect.async<void>((cb) => {
-      const id = requestAnimationFrame(() => cb(Effect.unit))
-      return 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/RenderEvent.ts

@@ -35,16 +35,18 @@ export function DomRenderEvent(rendered: Rendered): DomRenderEvent {
 export type HtmlRenderEvent = {
   readonly _tag: "html"
   readonly html: string
+  readonly done: boolean
   readonly valueOf: () => string
 }
 
 /**
  * @since 1.0.0
  */
-export function HtmlRenderEvent(html: string): HtmlRenderEvent {
+export function HtmlRenderEvent(html: string, done: boolean): HtmlRenderEvent {
   return {
     _tag: "html",
     html,
+    done,
     valueOf: () => html
   }
 }
@@ -56,6 +58,13 @@ export function isRenderEvent(value: unknown): value is RenderEvent {
   return isTaggedObject(value) && (value._tag === "html" || value._tag === "dom")
 }
 
+/**
+ * @since 1.0.0
+ */
+export function isHtmlRenderEvent(value: unknown): value is HtmlRenderEvent {
+  return isTaggedObject(value) && value._tag === "html"
+}
+
 function isTaggedObject(
   value: unknown
 ): value is Record<string, unknown> & { readonly _tag: unknown } {

package/src/RenderQueue.ts

@@ -0,0 +1,445 @@
+/**
+ * The context in which templates are rendered within
+ * @since 1.0.0
+ */
+
+import * as Context from "@typed/context"
+import * as Idle from "@typed/fx/Idle"
+import * as Effect from "effect/Effect"
+import * as FiberRef from "effect/FiberRef"
+import { dual } from "effect/Function"
+import type * as Layer from "effect/Layer"
+import * as Scope from "effect/Scope"
+
+/**
+ * @since 1.0.0
+ */
+export const DEFAULT_PRIORITY = 10
+
+/**
+ * The context in which templates are rendered within
+ * @since 1.0.0
+ */
+export const RenderQueue: Context.Tagged<RenderQueue, RenderQueue> = Context.Tagged<RenderQueue>(
+  "@typed/template/RenderQueue"
+)
+
+/**
+ * @since 1.0.0
+ */
+export const currentPriority: FiberRef.FiberRef<number> = FiberRef.unsafeMake(DEFAULT_PRIORITY)
+
+/**
+ * @since 1.0.0
+ */
+export interface RenderQueue {
+  readonly add: (part: unknown, task: () => void, priority: number) => Effect.Effect<void, never, Scope.Scope>
+}
+
+/**
+ * @since 1.0.0
+ */
+export interface IdleRenderQueueOptions extends IdleRequestOptions {
+  readonly scope: Scope.Scope
+}
+
+/**
+ * @since 1.0.0
+ */
+export const unsafeMakeIdleRenderQueue = ({ scope, ...options }: IdleRenderQueueOptions): RenderQueue =>
+  new IdleImpl(scope, options)
+
+/**
+ * @since 1.0.0
+ */
+export const unsafeMakeRafRenderQueue = (scope: Scope.Scope): RenderQueue => new RafImpl(scope)
+
+/**
+ * @since 1.0.0
+ */
+export const unsafeMakeMicrotaskRenderQueue = (scope: Scope.Scope): RenderQueue => new MicroTaskImpl(scope)
+
+/**
+ * @since 1.0.0
+ */
+export const unsafeMakeSyncRenderQueue = (): RenderQueue => new SyncImpl()
+
+/**
+ * @since 1.0.0
+ */
+export const idle = (options?: IdleRequestOptions): Layer.Layer<RenderQueue> =>
+  RenderQueue.scoped(
+    Effect.scopeWith((scope) => Effect.succeed(unsafeMakeIdleRenderQueue({ scope, ...options })))
+  )
+
+/**
+ * @since 1.0.0
+ */
+export const raf: Layer.Layer<RenderQueue> = RenderQueue.scoped(
+  Effect.scopeWith((scope) => Effect.succeed(unsafeMakeRafRenderQueue(scope)))
+)
+
+/**
+ * @since 1.0.0
+ */
+export const microtask: Layer.Layer<RenderQueue> = RenderQueue.scoped(
+  Effect.scopeWith((scope) => Effect.succeed(unsafeMakeMicrotaskRenderQueue(scope)))
+)
+
+/**
+ * @since 1.0.0
+ */
+export const sync: Layer.Layer<RenderQueue> = RenderQueue.layer(Effect.sync(unsafeMakeSyncRenderQueue))
+
+const MICRO_TASK_END = DEFAULT_PRIORITY - 1
+const RAF_END = DEFAULT_PRIORITY + 9
+const IDLE_START = RAF_END + 1
+
+/**
+ * @since 1.0.0
+ */
+export const mixed = (options?: IdleRequestOptions): Layer.Layer<RenderQueue> =>
+  RenderQueue.scoped(Effect.gen(function*() {
+    const scope = yield* Effect.scope
+    const queues: Array<readonly [priorityRange: readonly [number, number], RenderQueue]> = [
+      [[-1, -1], new SyncImpl()],
+      [[0, MICRO_TASK_END], new MicroTaskImpl(scope)],
+      [[DEFAULT_PRIORITY, RAF_END], new RafImpl(scope)],
+      [[IDLE_START, Number.MAX_SAFE_INTEGER], new IdleImpl(scope, options)]
+    ]
+
+    return new MixedImpl(queues)
+  }))
+
+/**
+ * @since 1.0.0
+ */
+export const Priority = {
+  Sync: -1,
+  /**
+   * @example
+   * RenderPriority.MicroTask(0-9)
+   */
+  MicroTask: (priority: number) => Math.min(Math.max(0, priority), MICRO_TASK_END),
+  /**
+   * @example
+   * RenderPriority.Raf(0-9)
+   */
+  Raf: (priority: number) => Math.min(Math.max(DEFAULT_PRIORITY, DEFAULT_PRIORITY + priority), RAF_END),
+  /**
+   * @example
+   * RenderPriority.Idle(0-9)
+   */
+  Idle: (priority: number) => Math.max(IDLE_START, IDLE_START + priority)
+} as const
+
+class PriorityQueue {
+  tasks: Map<unknown, () => void> = new Map()
+  priority: Map<unknown, number> = new Map<unknown, number>()
+  priorities: Map<number, Set<unknown>> = new Map()
+
+  add(part: unknown, task: () => void, priority: number) {
+    this.tasks.set(part, task)
+    this.setPriority(part, priority)
+  }
+
+  get(part: unknown) {
+    return this.tasks.get(part)
+  }
+
+  delete(part: unknown) {
+    this.tasks.delete(part)
+    const priority = this.priority.get(part)
+    if (priority === undefined) {
+      return false
+    } else {
+      this.priorities.get(priority)?.delete(part)
+      this.priority.delete(part)
+      return true
+    }
+  }
+
+  get isEmpty() {
+    return this.priorities.size === 0
+  }
+
+  *entries() {
+    for (const priority of Array.from(this.priorities.keys()).sort((a, b) => a - b)) {
+      const parts = this.priorities.get(priority)!
+      this.priorities.delete(priority)
+      yield this.getTasks(parts)
+    }
+  }
+
+  private getTasks(parts: Set<unknown>) {
+    return Array.from(parts.values()).flatMap((part) => {
+      const task = this.tasks.get(part)
+      if (task === undefined) return []
+      this.tasks.delete(part)
+      this.priority.delete(part)
+      return [task]
+    })
+  }
+
+  private setPriority(task: unknown, priority: number) {
+    const current = this.priority.get(task)
+    if (current === undefined) {
+      this.priority.set(task, priority)
+      this.addTaskToPriority(task, priority)
+      return priority
+    } else if (priority < current) {
+      this.priorities.get(current)?.delete(task)
+      this.priority.set(task, priority)
+      this.addTaskToPriority(task, priority)
+      return priority
+    } else {
+      return current
+    }
+  }
+
+  private addTaskToPriority(task: unknown, priority: number) {
+    let set = this.priorities.get(priority)
+    if (set === undefined) {
+      set = new Set()
+      this.priorities.set(priority, set)
+    }
+    set.add(task)
+  }
+}
+
+abstract class BaseImpl implements RenderQueue {
+  queue = new PriorityQueue()
+  scheduled = false
+
+  constructor(readonly scope: Scope.Scope) {
+    this.add.bind(this)
+  }
+
+  add(part: unknown, task: () => void, priority: number) {
+    return Effect.suspend(() => {
+      this.queue.add(part, task, priority)
+
+      return Effect.zipRight(
+        Effect.addFinalizer(() =>
+          Effect.sync(() => {
+            const currentTask = this.queue.get(part)
+            // If the current task is still the same we'll delete it from the queue
+            if (currentTask === task) {
+              this.queue.delete(part)
+            }
+          })
+        ),
+        this.scheduleNextRun
+      )
+    })
+  }
+
+  scheduleNextRun = Effect.suspend(() => {
+    if (this.queue.isEmpty || this.scheduled) return Effect.void
+
+    this.scheduled = true
+
+    return this.run.pipe(
+      Scope.extend(this.scope),
+      Effect.forkIn(this.scope)
+    )
+  })
+
+  abstract run: Effect.Effect<void, never, Scope.Scope>
+
+  protected runTasks = (iterator: Iterator<Array<() => void>>) => {
+    const result = iterator.next()
+
+    if (result.done) return false
+    else {
+      for (const task of result.value) {
+        this.tryRunTask(task)
+      }
+
+      return true
+    }
+  }
+
+  protected tryRunTask = (task: () => void) => {
+    try {
+      task()
+    } catch (error) {
+      // TODO: We should probably be able to report this back to a template
+      console.error(error)
+    }
+  }
+}
+
+class IdleImpl extends BaseImpl implements RenderQueue {
+  constructor(
+    scope: Scope.Scope,
+    readonly options?: IdleRequestOptions
+  ) {
+    super(scope)
+  }
+
+  run: Effect.Effect<void, never, Scope.Scope> = Effect.suspend(() => {
+    return Effect.flatMap(
+      Idle.whenIdle(this.options),
+      (deadline) =>
+        Effect.suspend(() => {
+          const iterator = this.queue.entries()
+
+          while (Idle.shouldContinue(deadline) && this.runTasks(iterator)) {
+            // Continue
+          }
+
+          // If we have more work to do, schedule another run
+          if (!this.queue.isEmpty) {
+            return this.run
+          }
+
+          this.scheduled = false
+
+          return Effect.void
+        })
+    )
+  })
+}
+
+class RafImpl extends BaseImpl implements RenderQueue {
+  private _set: ((callback: FrameRequestCallback) => number) | typeof setTimeout
+  private _clear: (handle: number) => void
+
+  constructor(
+    readonly scope: Scope.Scope
+  ) {
+    super(scope)
+
+    const [set, clear] = typeof globalThis.requestAnimationFrame === "function"
+      ? [requestAnimationFrame.bind(globalThis), cancelAnimationFrame.bind(globalThis)]
+      : [setTimeout, clearTimeout]
+    this._set = set
+    this._clear = clear
+  }
+
+  run: Effect.Effect<void> = Effect.async((cb) => {
+    const id = this._set(() => {
+      this.runAllTasks()
+      return cb(Effect.void)
+    })
+    return Effect.sync(() => {
+      this.scheduled = false
+      this._clear(id)
+    })
+  })
+
+  private runAllTasks = () => {
+    const iterator = this.queue.entries()
+    while (this.runTasks(iterator)) {
+      // Continue
+    }
+
+    this.scheduled = false
+  }
+}
+
+const noOp = () => void 0
+
+class MicroTaskImpl extends BaseImpl implements RenderQueue {
+  private _set: { (callback: VoidFunction): void; (callback: () => void): void } | typeof setTimeout
+  private _clear:
+    | { (id: number | undefined): void; (timeoutId: string | number | NodeJS.Timeout | undefined): void }
+    | (() => undefined)
+
+  constructor(
+    readonly scope: Scope.Scope
+  ) {
+    super(scope)
+
+    const [set, clear] = typeof globalThis.queueMicrotask === "function"
+      ? [globalThis.queueMicrotask.bind(globalThis), noOp]
+      : [setTimeout, clearTimeout]
+    this._set = set
+    this._clear = clear
+  }
+
+  run: Effect.Effect<void> = Effect.async((cb) => {
+    const id = this._set(() => {
+      this.runAllTasks()
+      return cb(Effect.void)
+    })
+    return Effect.sync(() => {
+      this.scheduled = false
+      id && this._clear(id)
+    })
+  })
+
+  private runAllTasks = () => {
+    const iterator = this.queue.entries()
+    while (this.runTasks(iterator)) {
+      // Continue
+    }
+
+    this.scheduled = false
+  }
+}
+
+class SyncImpl implements RenderQueue {
+  constructor() {
+    this.add.bind(this)
+  }
+
+  add(_: unknown, task: () => void) {
+    return Effect.sync(task)
+  }
+}
+
+class MixedImpl implements RenderQueue {
+  private _priorityCache = new Map<number, RenderQueue>()
+
+  constructor(
+    readonly queues: Array<readonly [priorityRange: readonly [number, number], RenderQueue]>
+  ) {
+    this.queues.sort(([a], [b]) => a[0] - b[0])
+
+    this.add.bind(this)
+  }
+
+  add(part: unknown, task: () => void, priority: number) {
+    let queue = this.getQueueForPriority(priority)
+
+    if (queue === undefined) {
+      queue = this.queues[this.queues.length - 1][1]
+    }
+
+    return queue.add(part, task, priority)
+  }
+
+  private getQueueForPriority(priority: number) {
+    if (this._priorityCache.has(priority)) {
+      return this._priorityCache.get(priority)!
+    }
+
+    const q = this.queues.find(([range]) => priority >= range[0] && priority <= range[1])
+
+    if (q) {
+      this._priorityCache.set(priority, q[1])
+      return q[1]
+    }
+
+    return q
+  }
+}
+
+/**
+ * @since 1.0.0
+ */
+export const withCurrentPriority = <A, E, R>(f: (priority: number) => Effect.Effect<A, E, R>) =>
+  Effect.flatMap(FiberRef.get(currentPriority), f)
+
+/**
+ * @since 1.0.0
+ */
+export const usingCurrentPriority: {
+  (priority: number): <A, E, R>(effect: Effect.Effect<A, E, R>) => Effect.Effect<A, E, R>
+  <A, E, R>(effect: Effect.Effect<A, E, R>, priority: number): Effect.Effect<A, E, R>
+} = dual(
+  2,
+  <A, E, R>(effect: Effect.Effect<A, E, R>, priority: number) => Effect.locally(effect, currentPriority, priority)
+)

package/src/RenderTemplate.ts

@@ -8,6 +8,7 @@ import type { Scope } from "effect/Scope"
 import type { Placeholder } from "./Placeholder.js"
 import type { Renderable } from "./Renderable.js"
 import type { RenderEvent } from "./RenderEvent.js"
+import type { RenderQueue } from "./RenderQueue.js"
 
 /**
  * @since 1.0.0
@@ -16,7 +17,7 @@ export interface RenderTemplate {
   <Values extends ReadonlyArray<Renderable<any, any>>>(
     templateStrings: TemplateStringsArray,
     values: Values
-  ): Fx.Fx<RenderEvent, Placeholder.Error<Values[number]>, Scope | Placeholder.Context<Values[number]>>
+  ): Fx.Fx<RenderEvent, Placeholder.Error<Values[number]>, Scope | RenderQueue | Placeholder.Context<Values[number]>>
 }
 
 /**
@@ -34,6 +35,10 @@ export const RenderTemplate: Context.Tagged<RenderTemplate, RenderTemplate> = Co
 export function html<const Values extends ReadonlyArray<Renderable<any, any>>>(
   template: TemplateStringsArray,
   ...values: Values
-): Fx.Fx<RenderEvent, Placeholder.Error<Values[number]>, RenderTemplate | Scope | Placeholder.Context<Values[number]>> {
+): Fx.Fx<
+  RenderEvent,
+  Placeholder.Error<Values[number]>,
+  RenderTemplate | RenderQueue | Scope | Placeholder.Context<Values[number]>
+> {
   return Fx.fromFxEffect(RenderTemplate.with((render) => render(template, values)))
 }