@typed/template 0.6.0 → 0.8.0

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"
 
@@ -42,8 +43,8 @@ export interface TestRender<E> {
   readonly window: Window & GlobalThis
   readonly document: Document
   readonly elementRef: ElementRef.ElementRef
-  readonly errors: RefSubject.Computed<never, never, ReadonlyArray<E>>
-  readonly lastError: RefSubject.Filtered<never, never, E>
+  readonly errors: RefSubject.Computed<ReadonlyArray<E>>
+  readonly lastError: RefSubject.Filtered<E>
   readonly interrupt: Effect.Effect<void>
   readonly makeEvent: (type: string, eventInitDict?: EventInit) => Event
   readonly makeCustomEvent: <A>(type: string, eventInitDict?: CustomEventInit<A>) => CustomEvent<A>
@@ -54,20 +55,20 @@ export interface TestRender<E> {
 /**
  * @since 1.0.0
  */
-export function testRender<R, E>(
-  fx: Fx.Fx<R, E, RenderEvent>,
+export function testRender<E, R>(
+  fx: Fx.Fx<RenderEvent, E, R>,
   options?:
     & HappyDOMOptions
     & { readonly [K in keyof DomServicesElementParams]?: (document: Document) => DomServicesElementParams[K] }
 ): 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))
     const elementRef = yield* _(ElementRef.make())
-    const errors = yield* _(RefSubject.make<never, never, ReadonlyArray<E>>(Effect.succeed([])))
+    const errors = yield* _(RefSubject.make<ReadonlyArray<E>>(Effect.succeed([])))
     const fiber = yield* _(
       fx,
       render,
@@ -83,7 +84,7 @@ export function testRender<R, E>(
           (rendered) => ElementRef.set(elementRef, rendered)
         )),
       Effect.forkScoped,
-      Effect.provide(RenderContext.dom(window, { skipRenderScheduling: true }))
+      Effect.provide(renderLayer(window, { skipRenderScheduling: true }))
     )
 
     const test: TestRender<E> = {
@@ -187,19 +188,28 @@ export interface TestHydrate<E, Elements> extends TestRender<E> {
  * @since 1.0.0
  */
 export function testHydrate<R, E, Elements>(
-  fx: Fx.Fx<R, E, RenderEvent>,
+  fx: Fx.Fx<RenderEvent, E, R>,
   f: (rendered: Rendered, window: Window & GlobalThis) => 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
@@ -218,7 +228,7 @@ export function testHydrate<R, E, Elements>(
     const elements = f(rendered.length === 1 ? rendered[0] : rendered, window)
 
     const elementRef = yield* _(ElementRef.make())
-    const errors = yield* _(RefSubject.make<never, never, ReadonlyArray<E>>(Effect.succeed([])))
+    const errors = yield* _(RefSubject.make<ReadonlyArray<E>>(Effect.succeed([])))
     const fiber = yield* _(
       fx,
       hydrate,
@@ -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/EventSource.ts

@@ -7,7 +7,7 @@ import type { EventHandler } from "../EventHandler.js"
 
 type EventName = string
 
-type Handler<Ev extends Event> = EventHandler<never, never, Ev>
+type Handler<Ev extends Event> = EventHandler<Ev>
 
 export interface EventSource {
   readonly addEventListener: <Ev extends Event>(

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"
@@ -40,16 +40,13 @@ export const hydrateTemplate: (document: Document, ctx: RenderContext) => Render
   return <Values extends ReadonlyArray<Renderable<any, any>>>(
     templateStrings: TemplateStringsArray,
     values: Values
-  ): Fx.Fx<
-    Scope.Scope | Placeholder.Context<Values[number]>,
-    Placeholder.Error<Values[number]>,
-    RenderEvent
-  > => {
+  ): 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
@@ -82,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,
@@ -109,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/module-augmentation.ts

@@ -1,44 +1,44 @@
 import type { Placeholder } from "../Placeholder.js"
 
 declare global {
-  export interface String extends Placeholder<never, never, string> {}
+  export interface String extends Placeholder<string> {}
 
-  export interface Number extends Placeholder<never, never, number> {}
+  export interface Number extends Placeholder<number> {}
 
-  export interface Boolean extends Placeholder<never, never, boolean> {}
+  export interface Boolean extends Placeholder<boolean> {}
 
-  export interface Symbol extends Placeholder<never, never, symbol> {}
+  export interface Symbol extends Placeholder<symbol> {}
 
-  export interface BigInt extends Placeholder<never, never, bigint> {}
+  export interface BigInt extends Placeholder<bigint> {}
 
   export interface Array<T> extends
     Placeholder<
-      Placeholder.Context<T>,
+      Array<Placeholder.Success<T>>,
       Placeholder.Error<T>,
-      Array<Placeholder.Success<T>>
+      Placeholder.Context<T>
     >
   {}
 
   export interface ReadonlyArray<T> extends
     Placeholder<
-      Placeholder.Context<T>,
+      ReadonlyArray<Placeholder.Success<T>>,
       Placeholder.Error<T>,
-      ReadonlyArray<Placeholder.Success<T>>
+      Placeholder.Context<T>
     >
   {}
 
   // DOM types
-  export interface Node extends Placeholder<never, never, Node> {}
+  export interface Node extends Placeholder<Node> {}
 
-  export interface DocumentFragment extends Placeholder<never, never, DocumentFragment> {}
+  export interface DocumentFragment extends Placeholder<DocumentFragment> {}
 
-  export interface Element extends Placeholder<never, never, Element> {}
+  export interface Element extends Placeholder<Element> {}
 
-  export interface HTMLElement extends Placeholder<never, never, HTMLElement> {}
+  export interface HTMLElement extends Placeholder<HTMLElement> {}
 
-  export interface SVGElement extends Placeholder<never, never, SVGElement> {}
+  export interface SVGElement extends Placeholder<SVGElement> {}
 }
 
 declare module "@typed/fx/Fx" {
-  export interface Fx<R, E, A> extends Placeholder<R, E, A> {}
+  export interface Fx<A, E, R> extends Placeholder<A, E, R> {}
 }

package/src/internal/parts.ts

@@ -295,7 +295,7 @@ export class EventPartImpl implements EventPart {
     readonly index: number,
     readonly source: ElementSource<any>,
     readonly onCause: <E>(cause: Cause<E>) => Effect.Effect<unknown>,
-    readonly addEventListener: <Ev extends Event>(handler: EventHandler<never, never, Ev>) => void
+    readonly addEventListener: <Ev extends Event>(handler: EventHandler<Ev>) => void
   ) {
   }
 }

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"
@@ -570,17 +570,18 @@ export const renderTemplate: (document: Document, renderContext: RenderContext)
       return Fx.sync(() => DomRenderEvent(persistent(document.importNode(entry.content, true))))
     }
 
-    return Fx.make<Scope.Scope | Placeholder.Context<Values[number]>, Placeholder.Error<Values[number]>, RenderEvent>((
+    return Fx.make<RenderEvent, Placeholder.Error<Values[number]>, Scope.Scope | Placeholder.Context<Values[number]>>((
       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 })
           }
         }
 
@@ -640,7 +639,7 @@ export const renderTemplate: (document: Document, renderContext: RenderContext)
     })
   }
 
-function getEventHandler<R, E>(
+function getEventHandler<E, R>(
   renderable: any,
   ctx: Context.Context<any> | Context.Context<never>,
   onCause: (cause: Cause<E>) => Effect.Effect<unknown>
@@ -650,10 +649,10 @@ function getEventHandler<R, E>(
       return EventHandler.make(
         (ev) =>
           Effect.provide(
-            Effect.catchAllCause((renderable as EventHandler.EventHandler<R, E>).handler(ev), onCause),
+            Effect.catchAllCause((renderable as EventHandler.EventHandler<Event, E, R>).handler(ev), onCause),
             ctx as any
           ),
-        (renderable as EventHandler.EventHandler<R, E>).options
+        (renderable as EventHandler.EventHandler<Event, E, R>).options
       )
     } else if (Effect.EffectTypeId in renderable) {
       return EventHandler.make(() => Effect.provide(Effect.catchAllCause(renderable, onCause), ctx))
@@ -665,7 +664,7 @@ function getEventHandler<R, E>(
 
 function handlePart<R, E, R2>(
   renderable: unknown,
-  sink: Sink.Sink<R2, any, any>
+  sink: Sink.Sink<any, any, R2>
 ): Effect.Effect<any, never, R | R2 | Scope.Scope> {
   switch (typeof renderable) {
     case "undefined":
@@ -676,7 +675,7 @@ function handlePart<R, E, R2>(
           ? sink.onSuccess(null)
           : Fx.tuple(renderable.map(unwrapRenderable)).run(sink) as any
       } else if (TypeId in renderable) {
-        return (renderable as Fx.Fx<R | R2, any, any>).run(sink)
+        return (renderable as Fx.Fx<any, any, R | R2>).run(sink)
       } else if (Effect.EffectTypeId in renderable) {
         return Effect.matchCauseEffect(renderable as Effect.Effect<any, E, R>, sink)
       } else return sink.onSuccess(renderable)
@@ -686,7 +685,7 @@ function handlePart<R, E, R2>(
   }
 }
 
-function unwrapRenderable<R, E>(renderable: unknown): Fx.Fx<R, E, any> {
+function unwrapRenderable<E, R>(renderable: unknown): Fx.Fx<any, E, R> {
   switch (typeof renderable) {
     case "undefined":
     case "object": {
@@ -698,7 +697,7 @@ function unwrapRenderable<R, E>(renderable: unknown): Fx.Fx<R, E, any> {
       } else if (TypeId in renderable) {
         return renderable as any
       } else if (Effect.EffectTypeId in renderable) {
-        return Fx.fromFxEffect(Effect.map(renderable as any, unwrapRenderable<R, E>))
+        return Fx.fromFxEffect(Effect.map(renderable as any, unwrapRenderable<E, R>))
       } else return Fx.succeed(renderable as any)
     }
     default:

package/src/internal/server.ts

@@ -77,7 +77,6 @@ type RenderChunkMap = {
 const renderChunkMap: RenderChunkMap = {
   text: (chunk, index) => new TextRenderChunk(index, chunk.value),
   part: (chunk, index, values, onChunk) =>
-    // @ts-expect-error
     new PartRenderChunk(
       index,
       chunk,
@@ -85,7 +84,6 @@ const renderChunkMap: RenderChunkMap = {
       values[chunk.node.index]
     ),
   "sparse-part": (chunk, index, values, onChunk) =>
-    // @ts-expect-error
     new SparsePartRenderChunk(
       index,
       chunk,