@typed/template 0.1.0

package/src/Part.ts

@@ -0,0 +1,186 @@
+/**
+ * @since 1.0.0
+ */
+
+import type { Cause } from "effect/Cause"
+import type { Effect } from "effect/Effect"
+import type { Scope } from "effect/Scope"
+import type { ElementSource } from "./ElementSource"
+import type { EventHandler } from "./EventHandler"
+
+/**
+ * @since 1.0.0
+ */
+export type Part =
+  | AttributePart
+  | BooleanPart
+  | ClassNamePart
+  | CommentPart
+  | DataPart
+  | EventPart
+  | NodePart
+  | PropertyPart
+  | RefPart
+  | TextPart
+
+/**
+ * @since 1.0.0
+ */
+export interface AttributePart {
+  readonly _tag: "attribute"
+  readonly name: string
+  readonly value: string | null | undefined
+  readonly index: number
+
+  readonly update: (value: this["value"]) => Effect<Scope, never, void>
+}
+
+/**
+ * @since 1.0.0
+ */
+export interface BooleanPart {
+  readonly _tag: "boolean"
+  readonly name: string
+  readonly value: boolean | null | undefined
+  readonly index: number
+
+  readonly update: (value: this["value"]) => Effect<Scope, never, void>
+}
+
+/**
+ * @since 1.0.0
+ */
+export interface ClassNamePart {
+  readonly _tag: "className"
+  readonly value: ReadonlyArray<string> | null | undefined
+  readonly index: number
+
+  readonly update: (value: this["value"]) => Effect<Scope, never, void>
+}
+
+/**
+ * @since 1.0.0
+ */
+export interface DataPart {
+  readonly _tag: "data"
+  readonly value: Readonly<Record<string, string | undefined>> | null | undefined
+  readonly index: number
+
+  readonly update: (value: this["value"]) => Effect<Scope, never, void>
+}
+
+/**
+ * @since 1.0.0
+ */
+export interface EventPart {
+  readonly _tag: "event"
+  readonly name: string
+  readonly value: EventHandler<unknown, never> | null | undefined
+  readonly index: number
+  readonly onCause: (cause: Cause<unknown>) => Effect<never, never, unknown>
+
+  readonly update: <R = never>(value: EventHandler<R, never> | null | undefined) => Effect<R | Scope, never, void>
+}
+
+/**
+ * @since 1.0.0
+ */
+export interface PropertyPart {
+  readonly _tag: "property"
+  readonly name: string
+  readonly value: unknown
+  readonly index: number
+
+  readonly update: (value: this["value"]) => Effect<Scope, never, void>
+}
+
+/**
+ * @since 1.0.0
+ */
+export interface RefPart<T extends HTMLElement | SVGElement = HTMLElement | SVGElement> {
+  readonly _tag: "ref"
+  readonly value: ElementSource<T>
+  readonly index: number
+}
+
+/**
+ * @since 1.0.0
+ */
+export interface CommentPart {
+  readonly _tag: "comment"
+  readonly value: string | null | undefined
+  readonly index: number
+
+  readonly update: (value: this["value"]) => Effect<Scope, never, void>
+}
+
+/**
+ * @since 1.0.0
+ */
+export interface TextPart {
+  readonly _tag: "text"
+  readonly value: string | null | undefined
+  readonly index: number
+
+  readonly update: (value: this["value"]) => Effect<Scope, never, void>
+}
+
+/**
+ * @since 1.0.0
+ */
+export interface NodePart {
+  readonly _tag: "node"
+  readonly value: unknown
+  readonly index: number
+
+  readonly update: (value: this["value"]) => Effect<Scope, never, void>
+}
+
+/**
+ * @since 1.0.0
+ */
+export type SparsePart = SparseAttributePart | SparseClassNamePart | SparseCommentPart
+
+/**
+ * @since 1.0.0
+ */
+export interface SparseAttributePart {
+  readonly _tag: "sparse/attribute"
+  readonly name: string
+  readonly parts: ReadonlyArray<AttributePart | StaticText>
+
+  readonly update: (value: ReadonlyArray<string>) => Effect<Scope, never, void>
+}
+
+/**
+ * @since 1.0.0
+ */
+export interface SparseClassNamePart {
+  readonly _tag: "sparse/className"
+  readonly parts: ReadonlyArray<ClassNamePart | StaticText>
+
+  readonly update: (value: ReadonlyArray<string>) => Effect<Scope, never, void>
+}
+
+/**
+ * @since 1.0.0
+ */
+export interface SparseCommentPart {
+  readonly _tag: "sparse/comment"
+  readonly parts: ReadonlyArray<CommentPart | StaticText>
+
+  readonly update: (value: ReadonlyArray<string>) => Effect<Scope, never, void>
+}
+
+/**
+ * @since 1.0.0
+ */
+export interface StaticText {
+  readonly _tag: "static/text"
+  readonly value: string
+}
+
+/**
+ * @since 1.0.0
+ */
+export type Parts = ReadonlyArray<Part | SparsePart>

package/src/Placeholder.ts

@@ -0,0 +1,70 @@
+/**
+ * @since 1.0.0
+ */
+
+import "./internal/module-augmentation"
+import type { Fx } from "@typed/fx/Fx"
+import { isFx } from "@typed/fx/Fx"
+import * as RefSubject from "@typed/fx/RefSubject"
+import type { Scope } from "effect"
+import { Effect } from "effect"
+
+/**
+ * @since 1.0.0
+ */
+export const PlaceholderTypeId = Symbol.for("./Placholder")
+/**
+ * @since 1.0.0
+ */
+export type PlaceholderTypeId = typeof PlaceholderTypeId
+
+/**
+ * @since 1.0.0
+ */
+export interface Placeholder<out R = never, out E = never, out A = unknown> {
+  readonly [PlaceholderTypeId]: {
+    readonly _R: (_: never) => R
+    readonly _E: (_: never) => E
+    readonly _A: (_: never) => A
+  }
+}
+
+/**
+ * @since 1.0.0
+ */
+export namespace Placeholder {
+  /**
+   * @since 1.0.0
+   */
+  export type Any<A = any> =
+    | Placeholder<any, any, A>
+    | Placeholder<any, never, A>
+    | Placeholder<never, never, A>
+    | Placeholder<never, any, A>
+
+  /**
+   * @since 1.0.0
+   */
+  export type Context<T> = [T] extends [never] ? never : T extends Placeholder<infer R, infer _E, infer _A> ? R : never
+  /**
+   * @since 1.0.0
+   */
+  export type Error<T> = [T] extends [never] ? never : T extends Placeholder<infer _R, infer E, infer _A> ? E : never
+  /**
+   * @since 1.0.0
+   */
+  export type Success<T> = [T] extends [never] ? never : T extends Placeholder<infer _R, infer _E, infer A> ? A : never
+
+  /**
+   * @since 1.0.0
+   */
+  export function asRef<R = never, E = never, A = never>(
+    placeholder: Placeholder<R, E, A>
+  ): Effect.Effect<R | Scope.Scope, never, RefSubject.RefSubject<never, E, A>> {
+    if (isFx<R, E, A>(placeholder) || Effect.isEffect(placeholder)) {
+      return RefSubject.make(placeholder as Fx<R, E, A>)
+    } else {
+      return RefSubject.of(placeholder as A)
+    }
+  }
+}

package/src/Platform.ts

@@ -0,0 +1,71 @@
+/**
+ * @since 1.0.0
+ */
+
+import * as Headers from "@effect/platform/Http/Headers"
+import type { ServerRequest } from "@effect/platform/Http/ServerRequest"
+import * as HttpServer from "@effect/platform/HttpServer"
+import type * as Fx from "@typed/fx/Fx"
+import { toStream } from "@typed/fx/Stream"
+import { Effect, Option, Stream } from "effect"
+import { renderToHtml } from "./Html"
+import type * as RenderContext from "./RenderContext"
+import type { RenderEvent } from "./RenderEvent"
+import type { RenderTemplate } from "./RenderTemplate"
+
+const HTML_CONTENT_TYPE = "text/html"
+const CAMEL_CASE_CONTENT_TYPE = { contentType: HTML_CONTENT_TYPE }
+const HYPHENATED_CONTENT_TYPE = { "content-type": HTML_CONTENT_TYPE }
+
+/**
+ * @since 1.0.0
+ */
+export function htmlResponse<R, E>(
+  fx: Fx.Fx<R, E, RenderEvent>,
+  options?: HttpServer.response.Options
+): Effect.Effect<RenderContext.RenderContext | Exclude<R, RenderTemplate>, E, HttpServer.response.ServerResponse> {
+  return Effect.contextWithEffect((ctx) =>
+    HttpServer.response.stream(
+      Stream.provideContext(Stream.encodeText(toStream(renderToHtml(fx))), ctx),
+      {
+        ...CAMEL_CASE_CONTENT_TYPE,
+        ...options,
+        headers: { ...HYPHENATED_CONTENT_TYPE, ...options?.headers }
+      }
+    )
+  )
+}
+
+/**
+ * @since 1.0.0
+ */
+export function htmlResponseString(
+  html: string,
+  options?: HttpServer.response.Options
+): HttpServer.response.ServerResponse {
+  return HttpServer.response.raw(
+    html,
+    {
+      ...CAMEL_CASE_CONTENT_TYPE,
+      ...options,
+      headers: { ...HYPHENATED_CONTENT_TYPE, ...options?.headers }
+    }
+  )
+}
+
+/**
+ * @since 1.0.0
+ */
+export function getUrlFromServerRequest(request: ServerRequest): URL {
+  const { headers } = request
+  const host = Headers.get(headers, "x-forwarded-host").pipe(
+    Option.orElse(() => Headers.get(headers, "host")),
+    Option.getOrElse(() => "localhost")
+  )
+  const protocol = Headers.get(headers, "x-forwarded-proto").pipe(
+    Option.orElse(() => Headers.get(headers, "protocol")),
+    Option.getOrElse(() => "http")
+  )
+
+  return new URL(request.url, `${protocol}://${host}`)
+}

package/src/Render.ts

@@ -0,0 +1,45 @@
+/**
+ * @since 1.0.0
+ */
+
+import * as Context from "@typed/context"
+import { Document } from "@typed/dom/Document"
+import { RootElement } from "@typed/dom/RootElement"
+import * as Fx from "@typed/fx/Fx"
+import { type Rendered } from "@typed/wire"
+import * as Effect from "effect/Effect"
+import { attachRoot, renderTemplate } from "./internal/render"
+import { RenderContext } from "./RenderContext"
+import { type RenderEvent } from "./RenderEvent"
+import { RenderTemplate } from "./RenderTemplate"
+
+/**
+ * @since 1.0.0
+ */
+export type ToRendered<T extends RenderEvent | null> = T extends null ? Rendered | null : Rendered
+
+/**
+ * @since 1.0.0
+ */
+export function render<R, E, T extends RenderEvent | null>(
+  rendered: Fx.Fx<R, E, T>
+): Fx.Fx<Exclude<R, RenderTemplate> | Document | RenderContext | RootElement, E, ToRendered<T>> {
+  return Fx.fromFxEffect(Effect.contextWith((context) => {
+    const [document, ctx, { rootElement }] = Context.getMany(context, Document, RenderContext, RootElement)
+
+    return Fx.provideService(
+      Fx.mapEffect(rendered, (what) => attachRoot(ctx.renderCache, rootElement, what)),
+      RenderTemplate,
+      renderTemplate(document, ctx)
+    )
+  }))
+}
+
+/**
+ * @since 1.0.0
+ */
+export function renderLayer<R, E, T extends RenderEvent | null>(
+  rendered: Fx.Fx<R, E, T>
+) {
+  return Fx.drainLayer(Fx.switchMapCause(render(rendered), Effect.logError))
+}

package/src/RenderContext.ts

@@ -0,0 +1,221 @@
+/**
+ * The context in which templates are rendered within
+ * @since 1.0.0
+ */
+
+import * as Context from "@typed/context"
+import { type DomServices, domServices, type DomServicesElementParams } from "@typed/dom/DomServices"
+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 { Effect, Layer, Option } from "effect"
+import * as Scope from "effect/Scope"
+import type { Entry } from "./Entry"
+import type { Part, SparsePart } from "./Part"
+
+/**
+ * The context in which templates are rendered within
+ * @since 1.0.0
+ */
+export interface RenderContext {
+  /**
+   * The current environment we are rendering within
+   */
+  readonly environment: Environment
+
+  /**
+   * Cache for root Node's being rendered into.
+   */
+  readonly renderCache: WeakMap<object, Rendered | null>
+
+  /**
+   * Cache for individual templates.
+   */
+  readonly templateCache: WeakMap<TemplateStringsArray, Entry>
+
+  /**
+   * Queue for work to be batched
+   */
+  readonly queue: RenderQueue
+}
+
+/**
+ * The context in which templates are rendered within
+ * @since 1.0.0
+ */
+export const RenderContext: Context.Tagged<RenderContext, RenderContext> = Context.Tagged<RenderContext>(
+  "./RenderContext"
+)
+
+/**
+ * @since 1.0.0
+ */
+export interface RenderQueue {
+  readonly add: (part: Part | SparsePart, task: () => void) => Effect.Effect<Scope.Scope, never, void>
+}
+
+/**
+ * @since 1.0.0
+ */
+export type RenderContextOptions = IdleRequestOptions & {
+  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 {
+  return {
+    environment,
+    renderCache: new WeakMap(),
+    templateCache: new WeakMap(),
+    queue: new RenderQueueImpl(scope, options, skipRenderScheduling ?? false)
+  }
+}
+
+/**
+ * @since 1.0.0
+ */
+export function getRenderCache<T>(renderCache: RenderContext["renderCache"], key: object): Option.Option<T> {
+  return renderCache.has(key) ? Option.some(renderCache.get(key) as T) : Option.none()
+}
+
+/**
+ * @since 1.0.0
+ */
+export function getTemplateCache(
+  templateCache: RenderContext["templateCache"],
+  key: TemplateStringsArray
+): Option.Option<Entry> {
+  return Option.fromNullable(templateCache.get(key))
+}
+
+const buildWithCurrentEnvironment = (environment: Environment, skipRenderScheduling?: boolean) =>
+  Layer.mergeAll(
+    RenderContext.scoped(make({ environment }, skipRenderScheduling)),
+    CurrentEnvironment.layer(environment)
+  )
+
+/**
+ * @since 1.0.0
+ */
+export const browser: (
+  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",
+        options?.skipRenderScheduling
+      ),
+      domServices(options)
+    )
+  )
+
+/**
+ * @since 1.0.0
+ */
+export const server: Layer.Layer<never, never, RenderContext | CurrentEnvironment> = buildWithCurrentEnvironment(
+  "server"
+)
+
+const static_: Layer.Layer<never, never, RenderContext | CurrentEnvironment> = buildWithCurrentEnvironment("static")
+
+export {
+  /**
+   * @since 1.0.0
+   */
+  static_ as static
+}
+
+class RenderQueueImpl implements RenderQueue {
+  queue = new Map<Part | SparsePart, () => void>()
+  scheduled = false
+
+  constructor(
+    readonly scope: Scope.Scope,
+    readonly options?: IdleRequestOptions,
+    readonly skipRenderScheduling: boolean = false
+  ) {
+    this.add.bind(this)
+  }
+
+  add(part: Part | SparsePart, 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)
+    )
+  })
+
+  run: Effect.Effect<Scope.Scope, never, void> = Effect.suspend(() =>
+    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()
+            }
+          }
+
+          if (this.queue.size > 0) {
+            return this.run
+          }
+
+          this.scheduled = false
+
+          return Effect.unit
+        })
+    )
+  )
+}

package/src/RenderEvent.ts

@@ -0,0 +1,67 @@
+/**
+ * @since 1.0.0
+ */
+
+import type { Rendered } from "@typed/wire"
+
+/**
+ * @since 1.0.0
+ */
+export type RenderEvent = DomRenderEvent | HtmlRenderEvent
+
+/**
+ * @since 1.0.0
+ */
+export type DomRenderEvent = {
+  readonly _tag: "dom"
+  readonly rendered: Rendered
+  readonly valueOf: () => Rendered
+}
+
+/**
+ * @since 1.0.0
+ */
+export function DomRenderEvent(rendered: Rendered): DomRenderEvent {
+  return {
+    _tag: "dom",
+    rendered,
+    valueOf: () => rendered
+  }
+}
+
+/**
+ * @since 1.0.0
+ */
+export type HtmlRenderEvent = {
+  readonly _tag: "html"
+  readonly html: string
+  readonly valueOf: () => string
+}
+
+/**
+ * @since 1.0.0
+ */
+export function HtmlRenderEvent(html: string): HtmlRenderEvent {
+  return {
+    _tag: "html",
+    html,
+    valueOf: () => html
+  }
+}
+
+/**
+ * @since 1.0.0
+ */
+export function isRenderEvent(value: unknown): value is RenderEvent {
+  return isTaggedObject(value) && (value._tag === "html" || value._tag === "dom")
+}
+
+function isTaggedObject(
+  value: unknown
+): value is Record<string, unknown> & { readonly _tag: unknown } {
+  return isObject(value) && "_tag" in value
+}
+
+function isObject(value: unknown): value is Record<string, unknown> {
+  return !!value && typeof value === "object"
+}