@typed/template 0.6.0 → 0.8.0

package/src/Html.ts

@@ -2,10 +2,12 @@
  * @since 1.0.0
  */
 
+import type { CurrentEnvironment } from "@typed/environment"
 import * as Fx from "@typed/fx/Fx"
 import * as Sink from "@typed/fx/Sink"
 import { TypeId } from "@typed/fx/TypeId"
 import * as Effect from "effect/Effect"
+import * as Layer from "effect/Layer"
 import * as Option from "effect/Option"
 import { join } from "effect/ReadonlyArray"
 import type * as Scope from "effect/Scope"
@@ -18,7 +20,7 @@ import { partNodeToPart } from "./internal/server.js"
 import { TEXT_START, TYPED_END, TYPED_HOLE, TYPED_START } from "./Meta.js"
 import type { Placeholder } from "./Placeholder.js"
 import type { Renderable } from "./Renderable.js"
-import { RenderContext } from "./RenderContext.js"
+import * as RenderContext from "./RenderContext.js"
 import { HtmlRenderEvent, isRenderEvent } from "./RenderEvent.js"
 import type { RenderEvent } from "./RenderEvent.js"
 import { RenderTemplate } from "./RenderTemplate.js"
@@ -30,13 +32,30 @@ const [padStart, padEnd] = [[TYPED_START], [TYPED_END]] as const
 /**
  * @since 1.0.0
  */
-export function renderToHtml<R, E>(
-  fx: Fx.Fx<R, E, RenderEvent>
-): Fx.Fx<Exclude<R, RenderTemplate> | RenderContext, E, string> {
+export const serverLayer: Layer.Layer<RenderContext.RenderContext | RenderTemplate | CurrentEnvironment> = Layer
+  .provideMerge(
+    RenderTemplate.layer(RenderContext.RenderContext.with(renderHtml)),
+    RenderContext.server
+  )
+
+/**
+ * @since 1.0.0
+ */
+export const staticLayer: Layer.Layer<RenderContext.RenderContext | RenderTemplate | CurrentEnvironment> = Layer
+  .provideMerge(
+    RenderTemplate.layer(RenderContext.RenderContext.with(renderHtml)),
+    RenderContext.static
+  )
+
+/**
+ * @since 1.0.0
+ */
+export function renderToHtml<E, R>(
+  fx: Fx.Fx<RenderEvent, E, R>
+): Fx.Fx<string, E, R | RenderTemplate | RenderContext.RenderContext> {
   return Fx.fromFxEffect(
-    RenderContext.with((ctx) =>
+    RenderContext.RenderContext.with((ctx) =>
       fx.pipe(
-        Fx.provide(RenderTemplate.layer(renderHtml(ctx))),
         Fx.map(toHtml),
         (x) => ctx.environment === "static" ? x : Fx.padWith(x, padStart, padEnd)
       )
@@ -47,20 +66,20 @@ export function renderToHtml<R, E>(
 /**
  * @since 1.0.0
  */
-export function renderToHtmlString<R, E>(
-  fx: Fx.Fx<R, E, RenderEvent>
-): Effect.Effect<string, E, Exclude<R, RenderTemplate> | RenderContext> {
+export function renderToHtmlString<E, R>(
+  fx: Fx.Fx<RenderEvent, E, R>
+): Effect.Effect<string, E, R | RenderTemplate | RenderContext.RenderContext> {
   return Effect.map(Fx.toReadonlyArray(renderToHtml(fx)), join(""))
 }
 
-function renderHtml(ctx: RenderContext) {
+function renderHtml(ctx: RenderContext.RenderContext) {
   return <Values extends ReadonlyArray<Renderable<any, any>>>(
     templateStrings: TemplateStringsArray,
     values: Values
   ): Fx.Fx<
-    Scope.Scope | Placeholder.Context<readonly [] extends Values ? never : Values[number]>,
+    RenderEvent,
     Placeholder.Error<Values[number]>,
-    RenderEvent
+    Scope.Scope | Placeholder.Context<readonly [] extends Values ? never : Values[number]>
   > => {
     const isStatic = ctx.environment === "static"
     const entry = getServerEntry(templateStrings, ctx.templateCache, isStatic)
@@ -71,8 +90,8 @@ function renderHtml(ctx: RenderContext) {
         Fx.mergeOrdered(
           entry.chunks.map((chunk) =>
             renderChunk<
-              Placeholder.Context<readonly [] extends Values ? never : Values[number]>,
-              Placeholder.Error<Values[number]>
+              Placeholder.Error<Values[number]>,
+              Placeholder.Context<readonly [] extends Values ? never : Values[number]>
             >(chunk, values, isStatic)
           )
         ),
@@ -82,21 +101,21 @@ function renderHtml(ctx: RenderContext) {
   }
 }
 
-function renderChunk<R, E>(
+function renderChunk<E, R>(
   chunk: HtmlChunk,
   values: ReadonlyArray<Renderable<any, any>>,
   isStatic: boolean
-): Fx.Fx<R, E, RenderEvent> {
+): Fx.Fx<RenderEvent, E, R> {
   if (chunk._tag === "text") {
     return Fx.succeed(HtmlRenderEvent(chunk.value))
   } else if (chunk._tag === "part") {
-    return renderPart<R, E>(chunk, values, isStatic)
+    return renderPart<E, R>(chunk, values, isStatic)
   } else {
-    return renderSparsePart<R, E>(chunk, values) as Fx.Fx<R, E, RenderEvent>
+    return renderSparsePart<E, R>(chunk, values) as Fx.Fx<RenderEvent, E, R>
   }
 }
 
-function renderNode<R, E>(renderable: Renderable<any, any>, isStatic: boolean): Fx.Fx<R, E, RenderEvent> {
+function renderNode<E, R>(renderable: Renderable<any, any>, isStatic: boolean): Fx.Fx<RenderEvent, E, R> {
   switch (typeof renderable) {
     case "string":
     case "number":
@@ -111,7 +130,7 @@ function renderNode<R, E>(renderable: Renderable<any, any>, isStatic: boolean):
   }
 }
 
-function renderObject<R, E>(renderable: object | null | undefined, isStatic: boolean) {
+function renderObject<E, R>(renderable: object | null | undefined, isStatic: boolean) {
   if (renderable === null || renderable === undefined) {
     return isStatic ? Fx.empty : Fx.succeed(HtmlRenderEvent(TEXT_START))
   } else if (Array.isArray(renderable)) {
@@ -122,7 +141,7 @@ function renderObject<R, E>(renderable: object | null | undefined, isStatic: boo
   } else if (Effect.isEffect(renderable)) {
     return Fx.switchMap(
       Fx.fromEffect(renderable as Effect.Effect<Renderable, E, R>),
-      (r) => renderNode<R, E>(r, isStatic)
+      (r) => renderNode<E, R>(r, isStatic)
     )
   } else if (isRenderEvent(renderable)) {
     return Fx.succeed(renderable)
@@ -131,17 +150,17 @@ function renderObject<R, E>(renderable: object | null | undefined, isStatic: boo
   }
 }
 
-function renderPart<R, E>(
+function renderPart<E, R>(
   chunk: PartChunk,
   values: ReadonlyArray<Renderable<any, any>>,
   isStatic: boolean
-): Fx.Fx<R, E, RenderEvent> {
+): Fx.Fx<RenderEvent, E, R> {
   const { node, render } = chunk
   const renderable: Renderable<any, any> = values[node.index]
 
   // Refs and events are not rendered into HTML
-  if (isDirective<R, E>(renderable)) {
-    return Fx.make((sink: Sink.Sink<never, E, RenderEvent>) => {
+  if (isDirective<E, R>(renderable)) {
+    return Fx.make<RenderEvent, E, R>((sink: Sink.Sink<RenderEvent, E>) => {
       const part = partNodeToPart(
         node,
         (value) => sink.onSuccess(HtmlRenderEvent(render(value)))
@@ -150,8 +169,8 @@ function renderPart<R, E>(
       return Effect.catchAllCause(renderable(part), sink.onFailure)
     })
   } else if (node._tag === "node") {
-    if (isStatic) return renderNode<R, E>(renderable, isStatic)
-    return Fx.append(renderNode<R, E>(renderable, isStatic), HtmlRenderEvent(TYPED_HOLE(node.index)))
+    if (isStatic) return renderNode<E, R>(renderable, isStatic)
+    return Fx.append(renderNode<E, R>(renderable, isStatic), HtmlRenderEvent(TYPED_HOLE(node.index)))
   } else if (node._tag === "properties") {
     if (renderable == null) return Fx.empty
     return Fx.map(
@@ -166,7 +185,7 @@ function renderPart<R, E>(
   } else {
     if (renderable === null) return Fx.succeed(HtmlRenderEvent(render(renderable)))
 
-    const html = Fx.filterMap(Fx.take(unwrapRenderable<R, E>(renderable), 1), (value) => {
+    const html = Fx.filterMap(Fx.take(unwrapRenderable<E, R>(renderable), 1), (value) => {
       const s = render(value)
 
       return s ? Option.some(HtmlRenderEvent(s)) : Option.none()
@@ -180,10 +199,10 @@ function renderPart<R, E>(
   }
 }
 
-function renderSparsePart<R, E>(
+function renderSparsePart<E, R>(
   chunk: SparsePartChunk,
   values: ReadonlyArray<Renderable<any, any>>
-): Fx.Fx<R, E, RenderEvent> {
+): Fx.Fx<RenderEvent, E, R> {
   const { node, render } = chunk
 
   return Fx.map(
@@ -194,8 +213,8 @@ function renderSparsePart<R, E>(
 
           const renderable: Renderable<any, any> = (values as any)[node.index]
 
-          if (isDirective<R, E>(renderable)) {
-            return Fx.make<R, E, unknown>((sink: Sink.Sink<never, E, unknown>) =>
+          if (isDirective<E, R>(renderable)) {
+            return Fx.make<unknown, E, R>((sink: Sink.Sink<unknown, E>) =>
               Effect.catchAllCause(
                 renderable(partNodeToPart(node, (value) => sink.onSuccess(value))),
                 sink.onFailure
@@ -203,7 +222,7 @@ function renderSparsePart<R, E>(
             )
           }
 
-          return unwrapRenderable<R, E>(renderable)
+          return unwrapRenderable<E, R>(renderable)
         })
       ),
       1
@@ -212,8 +231,8 @@ function renderSparsePart<R, E>(
   )
 }
 
-function takeOneIfNotRenderEvent<R, E, A>(fx: Fx.Fx<R, E, A>): Fx.Fx<R, E, A> {
-  return Fx.make<R, E, A>((sink) =>
+function takeOneIfNotRenderEvent<A, E, R>(fx: Fx.Fx<A, E, R>): Fx.Fx<A, E, R> {
+  return Fx.make<A, E, R>((sink) =>
     Sink.withEarlyExit(sink, (sink) =>
       fx.run(
         Sink.make(
@@ -227,7 +246,7 @@ function takeOneIfNotRenderEvent<R, E, A>(fx: Fx.Fx<R, E, A>): Fx.Fx<R, E, A> {
 
 function getServerEntry(
   templateStrings: TemplateStringsArray,
-  templateCache: RenderContext["templateCache"],
+  templateCache: RenderContext.RenderContext["templateCache"],
   isStatic: boolean
 ): ServerEntry {
   const cached = templateCache.get(templateStrings)
@@ -249,7 +268,7 @@ function getServerEntry(
   }
 }
 
-function unwrapRenderable<R, E>(renderable: Renderable<any, any>): Fx.Fx<R, E, any> {
+function unwrapRenderable<E, R>(renderable: Renderable<any, any>): Fx.Fx<any, E, R> {
   switch (typeof renderable) {
     case "undefined":
     case "object": {

package/src/Hydrate.ts

@@ -4,7 +4,10 @@
 
 import * as Context from "@typed/context"
 import { Document } from "@typed/dom/Document"
+import type { DomServices, DomServicesElementParams } from "@typed/dom/DomServices"
+import type { GlobalThis } from "@typed/dom/GlobalThis"
 import { RootElement } from "@typed/dom/RootElement"
+import type { CurrentEnvironment } from "@typed/environment"
 import * as Fx from "@typed/fx/Fx"
 import * as Effect from "effect/Effect"
 import * as Layer from "effect/Layer"
@@ -12,18 +15,47 @@ import { findRootParentChildNodes, hydrateTemplate } from "./internal/hydrate.js
 import { HydrateContext } from "./internal/HydrateContext.js"
 import { attachRoot } from "./internal/render.js"
 import type { ToRendered } from "./Render.js"
-import { RenderContext } from "./RenderContext.js"
+import * as RenderContext from "./RenderContext.js"
 import { type RenderEvent } from "./RenderEvent.js"
 import { RenderTemplate } from "./RenderTemplate.js"
 
+/**
+ * @since 1.0.0
+ */
+export const hydrateLayer = (
+  window: Window & GlobalThis,
+  options?: DomServicesElementParams & { readonly skipRenderScheduling?: boolean }
+): Layer.Layer<
+  | RenderTemplate
+  | RenderContext.RenderContext
+  | CurrentEnvironment
+  | DomServices
+> =>
+  Layer.provideMerge(
+    RenderTemplate.layer(Effect.contextWith((context: Context.Context<Document | RenderContext.RenderContext>) => {
+      const [document, ctx] = Context.getMany(
+        context,
+        Document,
+        RenderContext.RenderContext
+      )
+
+      return hydrateTemplate(document, ctx)
+    })),
+    RenderContext.dom(window, options)
+  )
+
 /**
  * @since 1.0.0
  */
 export function hydrate<R, E, T extends RenderEvent | null>(
-  rendered: Fx.Fx<R, E, T>
-): Fx.Fx<Exclude<R, RenderTemplate> | Document | RenderContext | RootElement, E, ToRendered<T>> {
+  rendered: Fx.Fx<T, E, R>
+): Fx.Fx<ToRendered<T>, E, R | RenderTemplate | RenderContext.RenderContext | RootElement> {
   return Fx.fromFxEffect(Effect.contextWith((context) => {
-    const [document, renderContext, { rootElement }] = Context.getMany(context, Document, RenderContext, RootElement)
+    const [renderContext, { rootElement }] = Context.getMany(
+      context,
+      RenderContext.RenderContext,
+      RootElement
+    )
     const ctx: HydrateContext = {
       where: findRootParentChildNodes(rootElement),
       rootIndex: -1,
@@ -31,23 +63,18 @@ export function hydrate<R, E, T extends RenderEvent | null>(
       hydrate: true
     }
 
-    const layer = Layer.provideMerge(
-      HydrateContext.layer(ctx),
-      RenderTemplate.layer(hydrateTemplate(document, renderContext))
-    )
-
     return Fx.provide(
       Fx.mapEffect(rendered, (what) => attachRoot(renderContext.renderCache, rootElement, what)),
-      layer
+      HydrateContext.layer(ctx)
     )
-  })) as Fx.Fx<Exclude<R, RenderTemplate> | Document | RenderContext | RootElement, E, ToRendered<T>>
+  }))
 }
 
 /**
  * @since 1.0.0
  */
-export function hydrateLayer<R, E, T extends RenderEvent | null>(
-  rendered: Fx.Fx<R, E, T>
-) {
+export function hydrateToLayer<R, E, T extends RenderEvent | null>(
+  rendered: Fx.Fx<T, E, R>
+): Layer.Layer<never, never, R | RenderTemplate | RenderContext.RenderContext | RootElement> {
   return Fx.drainLayer(Fx.switchMapCause(hydrate(rendered), (cause) => Fx.fromEffect(Effect.logError(cause))))
 }

package/src/Many.ts

@@ -20,14 +20,14 @@ import { HtmlRenderEvent, type RenderEvent } from "./RenderEvent.js"
 /**
  * @since 1.0.0
  */
-export function many<R, E, A, B extends PropertyKey, R2, E2>(
-  values: Fx.Fx<R, E, ReadonlyArray<A>>,
+export function many<A, E, R, B extends PropertyKey, R2, E2>(
+  values: Fx.Fx<ReadonlyArray<A>, E, R>,
   getKey: (a: NoInfer<A>) => B,
-  f: (a: RefSubject.RefSubject<never, never, NoInfer<A>>, key: B) => Fx.Fx<R2, E2, RenderEvent>
-): Fx.Fx<R | R2 | Scope.Scope | RenderContext, E | E2, RenderEvent | ReadonlyArray<RenderEvent>> {
+  f: (a: RefSubject.RefSubject<NoInfer<A>>, key: B) => Fx.Fx<RenderEvent, E2, R2>
+): Fx.Fx<RenderEvent | ReadonlyArray<RenderEvent>, E | E2, R | R2 | Scope.Scope | RenderContext> {
   return Fx.fromFxEffect(
     Effect.contextWith(
-      (context): Fx.Fx<R | R2 | RenderContext | Scope.Scope, E | E2, RenderEvent | ReadonlyArray<RenderEvent>> => {
+      (context): Fx.Fx<RenderEvent | ReadonlyArray<RenderEvent>, E | E2, R | R2 | RenderContext | Scope.Scope> => {
         const ctx = get(context, RenderContext)
         const hydrateContext = getOption(context, HydrateContext)
 
@@ -87,15 +87,15 @@ export const manyAsyncData: {
     matchers: {
       NoData: () => NoData
       Loading: (todo: TODO) => Loading
-      Failure: (data: RefSubject.Computed<never, never, E1>, computed: TODO) => Failure
-      Success: (value: RefSubject.Computed<never, never, A>, computed: TODO) => Success
+      Failure: (data: RefSubject.Computed<E1>, computed: TODO) => Failure
+      Success: (value: RefSubject.Computed<A>, computed: TODO) => Success
     }
-  ): <R, E>(
-    fx: Fx.Fx<R, E, AsyncData.AsyncData<ReadonlyArray<A>, E1>>
+  ): <E, R>(
+    fx: Fx.Fx<AsyncData.AsyncData<ReadonlyArray<A>, E1>, E, R>
   ) => Fx.Fx<
-    R | Fx.Fx.Context<NoData | Loading | Failure | Success>,
+    Fx.Fx.Success<NoData | Loading | Failure | Success>,
     E | Fx.Fx.Error<NoData | Loading | Failure | Success>,
-    Fx.Fx.Success<NoData | Loading | Failure | Success>
+    R | Fx.Fx.Context<NoData | Loading | Failure | Success>
   >
 
   <
@@ -109,18 +109,18 @@ export const manyAsyncData: {
     Failure extends Fx.Fx<any, any, any>,
     Success extends Fx.Fx<any, any, any>
   >(
-    fx: Fx.Fx<R, E, AsyncData.AsyncData<ReadonlyArray<A>, E1>>,
+    fx: Fx.Fx<AsyncData.AsyncData<ReadonlyArray<A>, E1>, E, R>,
     getKey: (a: A) => B,
     matchers: {
       NoData: () => NoData
       Loading: (data: TODO) => Loading
-      Failure: (data: RefSubject.Computed<never, never, E1>, computed: TODO) => Failure
-      Success: (value: RefSubject.Computed<never, never, A>, computed: TODO) => Success
+      Failure: (data: RefSubject.Computed<E1>, computed: TODO) => Failure
+      Success: (value: RefSubject.Computed<A>, computed: TODO) => Success
     }
   ): Fx.Fx<
-    R | Fx.Fx.Context<NoData | Loading | Failure | Success>,
+    Fx.Fx.Success<NoData | Loading | Failure | Success>,
     E | Fx.Fx.Error<NoData | Loading | Failure | Success>,
-    Fx.Fx.Success<NoData | Loading | Failure | Success>
+    R | Fx.Fx.Context<NoData | Loading | Failure | Success>
   >
 } = dual(
   3,
@@ -130,23 +130,23 @@ export const manyAsyncData: {
     E1,
     A,
     B extends PropertyKey,
-    NoData extends Fx.Fx<any, any, RenderEvent>,
-    Loading extends Fx.Fx<any, any, RenderEvent>,
-    Failure extends Fx.Fx<any, any, RenderEvent>,
-    Success extends Fx.Fx<any, any, RenderEvent>
+    NoData extends Fx.Fx<RenderEvent, any, any>,
+    Loading extends Fx.Fx<RenderEvent, any, any>,
+    Failure extends Fx.Fx<RenderEvent, any, any>,
+    Success extends Fx.Fx<RenderEvent, any, any>
   >(
-    fx: Fx.Fx<R, E, AsyncData.AsyncData<ReadonlyArray<A>, E1>>,
+    fx: Fx.Fx<AsyncData.AsyncData<ReadonlyArray<A>, E1>, E, R>,
     getKey: (a: A) => B,
     matchers: {
       NoData: NoData
-      Loading: (data: RefSubject.Filtered<never, never, Progress>) => Loading
-      Failure: (data: RefSubject.Computed<never, never, E1>) => Failure
-      Success: (value: RefSubject.Computed<never, never, A>, key: B) => Success
+      Loading: (data: RefSubject.Filtered<Progress>) => Loading
+      Failure: (data: RefSubject.Computed<E1>) => Failure
+      Success: (value: RefSubject.Computed<A>, key: B) => Success
     }
   ): Fx.Fx<
-    R | Fx.Fx.Context<NoData | Loading | Failure | Success>,
+    RenderEvent | ReadonlyArray<RenderEvent>,
     E | Fx.Fx.Error<NoData | Loading | Failure | Success>,
-    RenderEvent | ReadonlyArray<RenderEvent>
+    R | Fx.Fx.Context<NoData | Loading | Failure | Success>
   > => {
     return RefAsyncData.matchAsyncData(fx, {
       NoData: matchers.NoData,

package/src/Part.ts

@@ -80,7 +80,7 @@ export interface EventPart {
   readonly value: null
   readonly index: number
   readonly onCause: (cause: Cause<unknown>) => Effect<unknown>
-  readonly addEventListener: (handler: EventHandler<never, never, Event>) => void
+  readonly addEventListener: (handler: EventHandler<Event>) => void
 }
 
 /**

package/src/Placeholder.ts

@@ -21,7 +21,7 @@ export type PlaceholderTypeId = typeof PlaceholderTypeId
 /**
  * @since 1.0.0
  */
-export interface Placeholder<out R = never, out E = never, out A = unknown> {
+export interface Placeholder<A = unknown, E = never, R = never> {
   readonly [PlaceholderTypeId]: {
     readonly _R: (_: never) => R
     readonly _E: (_: never) => E
@@ -37,32 +37,32 @@ 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>
+    | Placeholder<A, any, any>
+    | Placeholder<A, never, any>
+    | Placeholder<A>
+    | Placeholder<A, any>
 
   /**
    * @since 1.0.0
    */
-  export type Context<T> = [T] extends [never] ? never : T extends Placeholder<infer R, infer _E, infer _A> ? R : never
+  export type Context<T> = [T] extends [never] ? never : T extends Placeholder<infer _A, infer _E, infer R> ? 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
+  export type Error<T> = [T] extends [never] ? never : T extends Placeholder<infer _A, infer E, infer _R> ? 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
+  export type Success<T> = [T] extends [never] ? never : T extends Placeholder<infer A, infer _E, infer _R> ? A : never
 
   /**
    * @since 1.0.0
    */
-  export function asRef<R = never, E = never, A = never>(
-    placeholder: Placeholder<R, E, A> | Fx<R, E, A> | Effect.Effect<A, E, R> | A
-  ): Effect.Effect<RefSubject.RefSubject<never, E, A>, never, R | Scope.Scope> {
-    if (isFx<R, E, A>(placeholder) || Effect.isEffect(placeholder)) {
-      return RefSubject.make(placeholder as Fx<R, E, A>)
+  export function asRef<A = never, E = never, R = never>(
+    placeholder: Placeholder<A, E, R> | Fx<A, E, R> | Effect.Effect<A, E, R> | A
+  ): Effect.Effect<RefSubject.RefSubject<A, E>, never, R | Scope.Scope> {
+    if (isFx<A, E, R>(placeholder) || Effect.isEffect(placeholder)) {
+      return RefSubject.make(placeholder as Fx<A, E, R>)
     } else {
       return RefSubject.of<A, E>(placeholder as A)
     }

package/src/Platform.ts

@@ -20,10 +20,10 @@ const HYPHENATED_CONTENT_TYPE = { "content-type": HTML_CONTENT_TYPE }
 /**
  * @since 1.0.0
  */
-export function htmlResponse<R, E>(
-  fx: Fx.Fx<R, E, RenderEvent>,
+export function htmlResponse<E, R>(
+  fx: Fx.Fx<RenderEvent, E, R>,
   options?: HttpServer.response.Options
-): Effect.Effect<HttpServer.response.ServerResponse, E, RenderContext.RenderContext | Exclude<R, RenderTemplate>> {
+): Effect.Effect<HttpServer.response.ServerResponse, E, R | RenderTemplate | RenderContext.RenderContext> {
   return Effect.contextWithEffect((ctx) =>
     HttpServer.response.stream(
       Stream.provideContext(Stream.encodeText(toStream(renderToHtml(fx))), ctx),

package/src/Render.ts

@@ -4,13 +4,17 @@
 
 import * as Context from "@typed/context"
 import { Document } from "@typed/dom/Document"
+import type { DomServices, DomServicesElementParams } from "@typed/dom/DomServices"
+import type { GlobalThis } from "@typed/dom/GlobalThis"
 import { RootElement } from "@typed/dom/RootElement"
+import type { CurrentEnvironment } from "@typed/environment"
 import * as Fx from "@typed/fx/Fx"
 import { type Rendered } from "@typed/wire"
-import type { Layer, Scope } from "effect"
+import type { Scope } from "effect"
+import { Layer } from "effect"
 import * as Effect from "effect/Effect"
 import { attachRoot, renderTemplate } from "./internal/render.js"
-import { RenderContext } from "./RenderContext.js"
+import * as RenderContext from "./RenderContext.js"
 import { type RenderEvent } from "./RenderEvent.js"
 import { RenderTemplate } from "./RenderTemplate.js"
 
@@ -19,32 +23,65 @@ import { RenderTemplate } from "./RenderTemplate.js"
  */
 export type ToRendered<T extends RenderEvent | null> = T extends null ? Rendered | null : Rendered
 
+/**
+ * @since 1.0.0
+ */
+export const renderLayer = (
+  window: Window & GlobalThis,
+  options?: DomServicesElementParams & { readonly skipRenderScheduling?: boolean }
+): Layer.Layer<
+  | RenderTemplate
+  | RenderContext.RenderContext
+  | CurrentEnvironment
+  | DomServices
+> =>
+  Layer.provideMerge(
+    RenderTemplate.layer(Effect.contextWith((context: Context.Context<Document | RenderContext.RenderContext>) => {
+      const [document, ctx] = Context.getMany(
+        context,
+        Document,
+        RenderContext.RenderContext
+      )
+
+      return renderTemplate(document, ctx)
+    })),
+    RenderContext.dom(window, options)
+  )
+
 /**
  * @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>> {
+  rendered: Fx.Fx<T, E, R>
+): Fx.Fx<ToRendered<T>, E, R | RenderTemplate | RenderContext.RenderContext | RootElement> {
   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)
+    const [ctx, { rootElement }] = Context.getMany(
+      context,
+      RenderContext.RenderContext,
+      RootElement
     )
+
+    return Fx.mapEffect(rendered, (what) => attachRoot(ctx.renderCache, rootElement, what))
   }))
 }
 
 /**
  * @since 1.0.0
  */
-export function renderLayer<R, E, T extends RenderEvent | null>(
-  rendered: Fx.Fx<R, E, T>
+export function renderToLayer<R, E, T extends RenderEvent | null>(
+  rendered: Fx.Fx<T, E, R>,
+  window: Window & GlobalThis = globalThis.window,
+  options?: DomServicesElementParams & { readonly skipRenderScheduling?: boolean }
 ): Layer.Layer<
+  RenderTemplate | RenderContext.RenderContext | CurrentEnvironment | DomServices,
   never,
-  never,
-  Document | RenderContext | RootElement | Exclude<Exclude<R, RenderTemplate>, Scope.Scope>
+  Exclude<
+    Exclude<R, Scope.Scope>,
+    RenderTemplate | RenderContext.RenderContext | CurrentEnvironment | DomServices
+  >
 > {
-  return Fx.drainLayer(Fx.switchMapCause(render(rendered), (e) => Fx.fromEffect(Effect.logError(e))))
+  return Layer.provideMerge(
+    Fx.drainLayer(Fx.switchMapCause(render(rendered), (e) => Fx.fromEffect(Effect.logError(e)))),
+    renderLayer(window, options)
+  )
 }

package/src/RenderTemplate.ts

@@ -16,11 +16,7 @@ export interface RenderTemplate {
   <Values extends ReadonlyArray<Renderable<any, any>>>(
     templateStrings: TemplateStringsArray,
     values: Values
-  ): Fx.Fx<
-    Scope | Placeholder.Context<Values[number]>,
-    Placeholder.Error<Values[number]>,
-    RenderEvent
-  >
+  ): Fx.Fx<RenderEvent, Placeholder.Error<Values[number]>, Scope | Placeholder.Context<Values[number]>>
 }
 
 /**
@@ -38,6 +34,6 @@ export const RenderTemplate: Context.Tagged<RenderTemplate, RenderTemplate> = Co
 export function html<const Values extends ReadonlyArray<Renderable<any, any>>>(
   template: TemplateStringsArray,
   ...values: Values
-): Fx.Fx<RenderTemplate | Scope | Placeholder.Context<Values[number]>, Placeholder.Error<Values[number]>, RenderEvent> {
+): Fx.Fx<RenderEvent, Placeholder.Error<Values[number]>, RenderTemplate | Scope | Placeholder.Context<Values[number]>> {
   return Fx.fromFxEffect(RenderTemplate.with((render) => render(template, values)))
 }

package/src/Renderable.ts

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