@typed/template 0.7.0 → 0.8.0

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<T, E, R>
-): Fx.Fx<ToRendered<T>, E, Exclude<R, RenderTemplate> | Document | RenderContext | RootElement> {
+): 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<T, E, R>
+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/Test.ts

@@ -2,15 +2,16 @@
  * @since 1.0.0
  */
 import type { Document } from "@typed/dom/Document"
-import type { DomServices, DomServicesElementParams } from "@typed/dom/DomServices"
-import type { GlobalThis } from "@typed/dom/GlobalThis"
-import type { Window } from "@typed/dom/Window"
+import { type DomServices, domServices, type DomServicesElementParams } from "@typed/dom/DomServices"
+import { GlobalThis } from "@typed/dom/GlobalThis"
+import { Window } from "@typed/dom/Window"
 import type { CurrentEnvironment } from "@typed/environment"
 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 { type Rendered } from "@typed/wire"
+import { Layer } from "effect"
 import * as Cause from "effect/Cause"
 import * as Effect from "effect/Effect"
 import * as Either from "effect/Either"
@@ -18,11 +19,11 @@ import * as Fiber from "effect/Fiber"
 import type * as Scope from "effect/Scope"
 import * as ElementRef from "./ElementRef.js"
 import { ROOT_CSS_SELECTOR } from "./ElementSource.js"
-import { renderToHtmlString } from "./Html.js"
-import { hydrate } from "./Hydrate.js"
+import { renderToHtmlString, serverLayer } from "./Html.js"
+import { hydrate, hydrateLayer } from "./Hydrate.js"
 import { adjustTime, isCommentWithValue } from "./internal/utils.js"
-import { render } from "./Render.js"
-import * as RenderContext from "./RenderContext.js"
+import { render, renderLayer } from "./Render.js"
+import type * as RenderContext from "./RenderContext.js"
 import type { RenderEvent } from "./RenderEvent.js"
 import type { RenderTemplate } from "./RenderTemplate.js"
 
@@ -62,7 +63,7 @@ export function testRender<E, R>(
 ): Effect.Effect<
   TestRender<E>,
   never,
-  Scope.Scope | Exclude<Exclude<R, RenderTemplate>, RenderContext.RenderContext | CurrentEnvironment | DomServices>
+  Scope.Scope | Exclude<R, RenderTemplate | RenderContext.RenderContext | CurrentEnvironment | DomServices>
 > {
   return Effect.gen(function*(_) {
     const window = yield* _(getOrMakeWindow(options))
@@ -83,7 +84,7 @@ export function testRender<E, R>(
           (rendered) => ElementRef.set(elementRef, rendered)
         )),
       Effect.forkScoped,
-      Effect.provide(RenderContext.dom(window, { skipRenderScheduling: true }))
+      Effect.provide(renderLayer(window, { skipRenderScheduling: true }))
     )
 
     const test: TestRender<E> = {
@@ -192,14 +193,23 @@ export function testHydrate<R, E, Elements>(
   options?:
     & HappyDOMOptions
     & { readonly [K in keyof DomServicesElementParams]?: (document: Document) => DomServicesElementParams[K] }
-) {
+): Effect.Effect<
+  TestHydrate<E, Elements>,
+  E,
+  Scope.Scope | Exclude<R, RenderTemplate | RenderContext.RenderContext | CurrentEnvironment | DomServices>
+> {
   return Effect.gen(function*(_) {
     const window = yield* _(getOrMakeWindow(options))
     const { body } = window.document
 
     const html = yield* _(
       renderToHtmlString(fx),
-      Effect.provide(RenderContext.server)
+      Effect.provide(serverLayer.pipe(
+        // Add DomServices to the layer for the types
+        Layer.provideMerge(domServices()),
+        Layer.provideMerge(Window.layer(window)),
+        Layer.provideMerge(GlobalThis.layer(window))
+      ))
     )
 
     body.innerHTML = html
@@ -233,8 +243,8 @@ export function testHydrate<R, E, Elements>(
             ),
           (rendered) => ElementRef.set(elementRef, rendered)
         )),
-      Effect.forkScoped,
-      Effect.provide(RenderContext.dom(window, { skipRenderScheduling: true }))
+      Effect.provide(hydrateLayer(window, { skipRenderScheduling: true })),
+      Effect.forkScoped
     )
 
     const test: TestHydrate<E, Elements> = {

package/src/internal/hydrate.ts

@@ -10,7 +10,7 @@ import { indexRefCounter2 } from "./indexRefCounter.js"
 
 import { unsafeGet } from "@typed/context"
 
-import { Either, ExecutionStrategy, Exit } from "effect"
+import { Either, ExecutionStrategy, Exit, Runtime } from "effect"
 import * as Scope from "effect/Scope"
 import type { Template } from "../Template.js"
 import { CouldNotFindCommentError, CouldNotFindManyCommentError, CouldNotFindRootElement } from "./errors.js"
@@ -43,9 +43,10 @@ export const hydrateTemplate: (document: Document, ctx: RenderContext) => Render
   ): Fx.Fx<RenderEvent, Placeholder.Error<Values[number]>, Scope.Scope | Placeholder.Context<Values[number]>> => {
     return Fx.make((sink) =>
       Effect.gen(function*(_) {
-        const context = yield* _(Effect.context<Scope.Scope>())
-        const hydrateCtx = unsafeGet(context, HydrateContext)
-        const parentScope = unsafeGet(context, Scope.Scope)
+        const runtime = yield* _(Effect.runtime<Placeholder.Context<Values[number]> | Scope.Scope>())
+        const runFork = Runtime.runFork(runtime)
+        const hydrateCtx = unsafeGet(runtime.context, HydrateContext)
+        const parentScope = unsafeGet(runtime.context, Scope.Scope)
         const scope = yield* _(Scope.fork(parentScope, ExecutionStrategy.sequential))
 
         // If we're not longer hydrating, just render normally
@@ -78,7 +79,7 @@ export const hydrateTemplate: (document: Document, ctx: RenderContext) => Render
 
         const refCounter = yield* _(indexRefCounter2())
         const ctx: RenderPartContext = {
-          context,
+          context: runtime.context,
           document,
           eventSource: makeEventSource(),
           expected: 0,
@@ -105,7 +106,9 @@ export const hydrateTemplate: (document: Document, ctx: RenderContext) => Render
 
         // Fork any effects necessary
         if (effects.length > 0) {
-          yield* _(Effect.forkAll(effects))
+          for (let i = 0; i < effects.length; i++) {
+            runFork(effects[i], { scope })
+          }
         }
 
         // Set the element when it is ready

package/src/internal/render.ts

@@ -3,7 +3,7 @@ import * as Sink from "@typed/fx/Sink"
 import { TypeId } from "@typed/fx/TypeId"
 import type { Rendered } from "@typed/wire"
 import { persistent } from "@typed/wire"
-import { Effect, ExecutionStrategy, Exit } from "effect"
+import { Effect, ExecutionStrategy, Exit, Runtime } from "effect"
 import type { Cause } from "effect/Cause"
 import type { Chunk } from "effect/Chunk"
 import * as Context from "effect/Context"
@@ -574,13 +574,14 @@ export const renderTemplate: (document: Document, renderContext: RenderContext)
       sink
     ) => {
       return Effect.gen(function*(_) {
-        const context = yield* _(Effect.context<Scope.Scope | Placeholder.Context<Values[number]>>())
-        const parentScope = Context.get(context, Scope.Scope)
+        const runtime = yield* _(Effect.runtime<Scope.Scope | Placeholder.Context<Values[number]>>())
+        const runFork = Runtime.runFork(runtime)
+        const parentScope = Context.get(runtime.context, Scope.Scope)
         const scope = yield* _(Scope.fork(parentScope, ExecutionStrategy.sequential))
         const refCounter = yield* _(indexRefCounter2())
         const content = document.importNode(entry.content, true)
         const ctx: RenderPartContext = {
-          context,
+          context: runtime.context,
           document,
           eventSource: makeEventSource(),
           expected: 0,
@@ -606,10 +607,8 @@ export const renderTemplate: (document: Document, renderContext: RenderContext)
 
         // Fork any effects necessary
         if (effects.length > 0) {
-          for (const eff of effects) {
-            yield* _(
-              Effect.forkIn(Effect.catchAllCause(eff, ctx.onCause), scope)
-            )
+          for (let i = 0; i < effects.length; ++i) {
+            runFork(effects[i], { scope })
           }
         }