@typed/template 0.9.6 → 0.10.0

package/src/Hydrate.ts

@@ -11,9 +11,10 @@ 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"
-import { findRootParentChildNodes, hydrateTemplate } from "./internal/hydrate.js"
 import { HydrateContext } from "./internal/HydrateContext.js"
-import { attachRoot } from "./internal/render.js"
+import { hydrateTemplate } from "./internal/v2/hydrate.js"
+import { getHydrationRoot } from "./internal/v2/hydration-template.js"
+import { attachRoot } from "./internal/v2/render.js"
 import type { ToRendered } from "./Render.js"
 import * as RenderContext from "./RenderContext.js"
 import { type RenderEvent } from "./RenderEvent.js"
@@ -24,7 +25,7 @@ import { RenderTemplate } from "./RenderTemplate.js"
  */
 export const hydrateLayer = (
   window: Window & GlobalThis,
-  options?: DomServicesElementParams & { readonly skipRenderScheduling?: boolean }
+  options?: DomServicesElementParams
 ): Layer.Layer<
   | RenderTemplate
   | RenderContext.RenderContext
@@ -32,15 +33,19 @@ export const hydrateLayer = (
   | DomServices
 > =>
   Layer.provideMerge(
-    RenderTemplate.layer(Effect.contextWith((context: Context.Context<Document | RenderContext.RenderContext>) => {
-      const [document, ctx] = Context.getMany(
-        context,
-        Document,
-        RenderContext.RenderContext
-      )
+    RenderTemplate.layer(
+      Effect.contextWith(
+        (context: Context.Context<Document | RenderContext.RenderContext>) => {
+          const [document, ctx] = Context.getMany(
+            context,
+            Document,
+            RenderContext.RenderContext
+          )
 
-      return hydrateTemplate(document, ctx)
-    })),
+          return hydrateTemplate(document, ctx)
+        }
+      )
+    ),
     RenderContext.dom(window, options)
   )
 
@@ -57,8 +62,7 @@ export function hydrate<R, E, T extends RenderEvent | null>(
       RootElement
     )
     const ctx: HydrateContext = {
-      where: findRootParentChildNodes(rootElement),
-      rootIndex: -1,
+      where: getHydrationRoot(rootElement),
       parentTemplate: null,
       hydrate: true
     }
@@ -76,5 +80,7 @@ export function hydrate<R, E, T extends RenderEvent | null>(
 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))))
+  return Fx.drainLayer(
+    Fx.switchMapCause(hydrate(rendered), (cause) => Fx.fromEffect(Effect.logError(`Hydration Failure`, cause)))
+  )
 }

package/src/Many.ts

@@ -6,12 +6,11 @@ import type { Progress } from "@typed/async-data/Progress"
 import * as RefAsyncData from "@typed/fx/AsyncData"
 import * as Fx from "@typed/fx/Fx"
 import * as RefSubject from "@typed/fx/RefSubject"
-import type { Scope } from "effect"
 import { get, getOption } from "effect/Context"
 import * as Effect from "effect/Effect"
 import { dual } from "effect/Function"
 import { isSome } from "effect/Option"
-import type { NoInfer } from "effect/Types"
+import type * as Scope from "effect/Scope"
 import { HydrateContext } from "./internal/HydrateContext.js"
 import { MANY_HOLE } from "./Meta.js"
 import { RenderContext } from "./RenderContext.js"
@@ -23,7 +22,7 @@ import { HtmlRenderEvent, type RenderEvent } from "./RenderEvent.js"
 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<NoInfer<A>>, key: B) => Fx.Fx<RenderEvent, E2, R2>
+  f: (a: RefSubject.RefSubject<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(
@@ -37,7 +36,7 @@ export function many<A, E, R, B extends PropertyKey, R2, E2>(
             return Fx.keyed(values, {
               getKey,
               onValue: (ref, key) =>
-                Fx.provideService(f(ref, key), HydrateContext, { ...hydrateContext.value, manyIndex: key.toString() })
+                Fx.provideService(f(ref, key), HydrateContext, { ...hydrateContext.value, manyKey: key.toString() })
             })
           }
 
@@ -55,10 +54,16 @@ export function many<A, E, R, B extends PropertyKey, R2, E2>(
         return Fx.fromFxEffect(
           Effect.map(Fx.first(values), (values) =>
             Fx.mergeOrdered(
-              values.map((value) =>
+              values.map((value, i) =>
                 Fx.fromFxEffect(Effect.map(RefSubject.of(value), (ref) => {
                   const key = getKey(value)
-                  return Fx.append(f(RefSubject.take(ref, 1), key), HtmlRenderEvent(MANY_HOLE(key)))
+                  return Fx.append(
+                    Fx.map(
+                      f(RefSubject.take(ref, 1), key),
+                      (r) => HtmlRenderEvent((r as HtmlRenderEvent).html, false)
+                    ),
+                    HtmlRenderEvent(MANY_HOLE(key), i === values.length - 1)
+                  )
                 }))
               )
             ))
@@ -68,8 +73,6 @@ export function many<A, E, R, B extends PropertyKey, R2, E2>(
   )
 }
 
-type TODO = any
-
 /**
  * @since 1.0.0
  */
@@ -86,9 +89,9 @@ export const manyAsyncData: {
     getKey: (a: A) => B,
     matchers: {
       NoData: () => NoData
-      Loading: (todo: TODO) => Loading
-      Failure: (data: RefSubject.Computed<E1>, computed: TODO) => Failure
-      Success: (value: RefSubject.Computed<A>, computed: TODO) => Success
+      Loading: (data: RefSubject.Filtered<Progress>) => Loading
+      Failure: (data: RefSubject.Computed<E1>) => Failure
+      Success: (value: RefSubject.Computed<A>) => Success
     }
   ): <E, R>(
     fx: Fx.Fx<AsyncData.AsyncData<ReadonlyArray<A>, E1>, E, R>
@@ -113,9 +116,9 @@ export const manyAsyncData: {
     getKey: (a: A) => B,
     matchers: {
       NoData: () => NoData
-      Loading: (data: TODO) => Loading
-      Failure: (data: RefSubject.Computed<E1>, computed: TODO) => Failure
-      Success: (value: RefSubject.Computed<A>, computed: TODO) => Success
+      Loading: (data: RefSubject.Filtered<Progress>) => Loading
+      Failure: (data: RefSubject.Computed<E1>) => Failure
+      Success: (value: RefSubject.Computed<A>) => Success
     }
   ): Fx.Fx<
     Fx.Fx.Success<NoData | Loading | Failure | Success>,

package/src/Meta.ts

@@ -29,7 +29,14 @@ export const TEXT_START = "<!--text-->"
 /**
  * @since 1.0.0
  */
-export const TYPED_HOLE = (index: number) => `<!--hole${index}-->`
+export const TYPED_HOLE_START = (index: number) => `<!--hole${index}-->`
+
+// Used to mark where a NodePart is in the DOM. It can be found directly after the
+// elements or text nodes it is managing.
+/**
+ * @since 1.0.0
+ */
+export const TYPED_HOLE_END = (index: number) => `<!--/hole${index}-->`
 
 /**
  * Used to mark separation between the start and end of a template.

package/src/Parser.ts

@@ -11,4 +11,4 @@ export {
    * @since 1.0.0
    */
   templateHash
-} from "./internal/parser.js"
+} from "./internal/parser2.js"

package/src/Part.ts

@@ -20,9 +20,9 @@ export type Part =
   | EventPart
   | NodePart
   | PropertyPart
+  | PropertiesPart
   | RefPart
   | TextPart
-  | PropertiesPart
 
 /**
  * @since 1.0.0
@@ -33,7 +33,7 @@ export interface AttributePart {
   readonly value: string | null | undefined
   readonly index: number
 
-  readonly update: (value: this["value"]) => Effect<void, never, Scope>
+  readonly update: (value: this["value"], priority?: number) => Effect<void, never, Scope>
 }
 
 /**
@@ -45,7 +45,7 @@ export interface BooleanPart {
   readonly value: boolean | null | undefined
   readonly index: number
 
-  readonly update: (value: this["value"]) => Effect<void, never, Scope>
+  readonly update: (value: this["value"], priority?: number) => Effect<void, never, Scope>
 }
 
 /**
@@ -53,10 +53,10 @@ export interface BooleanPart {
  */
 export interface ClassNamePart {
   readonly _tag: "className"
-  readonly value: ReadonlyArray<string> | null | undefined
+  readonly value: ReadonlyArray<string>
   readonly index: number
 
-  readonly update: (value: this["value"]) => Effect<void, never, Scope>
+  readonly update: (value: this["value"], priority?: number) => Effect<void, never, Scope>
 }
 
 /**
@@ -67,7 +67,7 @@ export interface DataPart {
   readonly value: Readonly<Record<string, string | undefined>> | null | undefined
   readonly index: number
 
-  readonly update: (value: this["value"]) => Effect<void, never, Scope>
+  readonly update: (value: this["value"], priority?: number) => Effect<void, never, Scope>
 }
 
 /**
@@ -92,7 +92,18 @@ export interface PropertyPart {
   readonly value: unknown
   readonly index: number
 
-  readonly update: (value: this["value"]) => Effect<void, never, Scope>
+  readonly update: (value: this["value"], priority?: number) => Effect<void, never, Scope>
+}
+
+/**
+ * @since 1.0.0
+ */
+export interface PropertiesPart {
+  readonly _tag: "properties"
+  readonly value: Record<string, any> | null | undefined
+  readonly index: number
+
+  readonly update: (value: this["value"], priority?: number) => Effect<void, never, Scope>
 }
 
 /**
@@ -112,7 +123,7 @@ export interface CommentPart {
   readonly value: string | null | undefined
   readonly index: number
 
-  readonly update: (value: this["value"]) => Effect<void, never, Scope>
+  readonly update: (value: this["value"], priority?: number) => Effect<void, never, Scope>
 }
 
 /**
@@ -123,7 +134,7 @@ export interface TextPart {
   readonly value: string | null | undefined
   readonly index: number
 
-  readonly update: (value: this["value"]) => Effect<void, never, Scope>
+  readonly update: (value: this["value"], priority?: number) => Effect<void, never, Scope>
 }
 
 /**
@@ -134,65 +145,10 @@ export interface NodePart {
   readonly value: unknown
   readonly index: number
 
-  readonly update: (value: this["value"]) => Effect<void, never, Scope>
-}
-
-/**
- * @since 1.0.0
- */
-export interface PropertiesPart {
-  readonly _tag: "properties"
-  readonly value: Readonly<Record<string, any>> | null | undefined
-  readonly index: number
-
-  readonly update: (value: this["value"]) => Effect<void, never, Scope>
-}
-
-/**
- * @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<void, never, Scope>
-}
-
-/**
- * @since 1.0.0
- */
-export interface SparseClassNamePart {
-  readonly _tag: "sparse/className"
-  readonly parts: ReadonlyArray<ClassNamePart | StaticText>
-
-  readonly update: (value: ReadonlyArray<string>) => Effect<void, never, Scope>
-}
-
-/**
- * @since 1.0.0
- */
-export interface SparseCommentPart {
-  readonly _tag: "sparse/comment"
-  readonly parts: ReadonlyArray<CommentPart | StaticText>
-
-  readonly update: (value: ReadonlyArray<string>) => Effect<void, never, Scope>
-}
-
-/**
- * @since 1.0.0
- */
-export interface StaticText {
-  readonly _tag: "static/text"
-  readonly value: string
+  readonly update: (value: this["value"], priority?: number) => Effect<void, never, Scope>
 }
 
 /**
  * @since 1.0.0
  */
-export type Parts = ReadonlyArray<Part | SparsePart>
+export type Parts = ReadonlyArray<Part>

package/src/Placeholder.ts

@@ -2,10 +2,8 @@
  * @since 1.0.0
  */
 
+import * as Fx from "@typed/fx"
 import "./internal/module-augmentation.js"
-import type { Fx } from "@typed/fx/Fx"
-import { isFx } from "@typed/fx/Fx"
-import * as RefSubject from "@typed/fx/RefSubject"
 import * as Effect from "effect/Effect"
 import type * as Scope from "effect/Scope"
 
@@ -41,36 +39,40 @@ export namespace Placeholder {
     | Placeholder<A, never, any>
     | Placeholder<A>
     | Placeholder<A, any>
+    | Effect.Effect<A, any, any>
+    // Null/Undefined cannot be modified globally to make them placeholders
+    | ([A] extends [null] ? null : never)
+    | ([A] extends [undefined] ? undefined : never)
 
   /**
    * @since 1.0.0
    */
   export type Context<T> = [T] extends [never] ? never
-    : [T] extends [Placeholder<infer _A, infer _E, infer R>] ? R
+    : T extends Effect.Effect<infer _A, infer _E, infer R> ? R
+    : 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 _A, infer E, infer _R>] ? E
+    : T extends Effect.Effect<infer _A, infer E, infer _R> ? E
+    : 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 A, infer _E, infer _R>] ? A
+    : T extends Effect.Effect<infer A, infer _E, infer _R> ? A
+    : T extends Placeholder<infer A, infer _E, infer _R> ? A
     : never
 
-  /**
-   * @since 1.0.0
-   */
-  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>)
+  export function asRef<A, E = never, R = never>(
+    placeholder: Fx.Fx<A, E, R> | Effect.Effect<A, E, R> | Placeholder<A, E, R> | A
+  ): Effect.Effect<Fx.RefSubject.RefSubject<A, E, never>, never, Scope.Scope | R> {
+    if (Fx.isFx(placeholder) || Effect.isEffect(placeholder)) {
+      return Fx.RefSubject.make(placeholder)
     } else {
-      return RefSubject.of<A, E>(placeholder as A)
+      return Fx.RefSubject.of(placeholder as A)
     }
   }
 }

package/src/Platform.ts

@@ -7,11 +7,11 @@ 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 * as Effect from "effect/Effect"
+import * as Option from "effect/Option"
+import * as Stream from "effect/Stream"
 import { renderToHtml } from "./Html.js"
-import type * as RenderContext from "./RenderContext.js"
 import type { RenderEvent } from "./RenderEvent.js"
-import type { RenderTemplate } from "./RenderTemplate.js"
 
 const HTML_CONTENT_TYPE = "text/html"
 const CAMEL_CASE_CONTENT_TYPE = { contentType: HTML_CONTENT_TYPE }
@@ -21,9 +21,9 @@ const HYPHENATED_CONTENT_TYPE = { "content-type": HTML_CONTENT_TYPE }
  * @since 1.0.0
  */
 export function htmlResponse<E, R>(
-  fx: Fx.Fx<RenderEvent, E, R>,
+  fx: Fx.Fx<RenderEvent | null, E, R>,
   options?: HttpServer.response.Options
-): Effect.Effect<HttpServer.response.ServerResponse, E, R | RenderTemplate | RenderContext.RenderContext> {
+): Effect.Effect<HttpServer.response.ServerResponse, E, R> {
   return Effect.contextWithEffect((ctx) =>
     HttpServer.response.stream(
       Stream.provideContext(Stream.encodeText(toStream(renderToHtml(fx))), ctx),

package/src/Render.ts

@@ -10,10 +10,11 @@ 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 { Scope } from "effect"
-import { Layer } from "effect"
 import * as Effect from "effect/Effect"
-import { attachRoot, renderTemplate } from "./internal/render.js"
+import { pipe } from "effect/Function"
+import * as Layer from "effect/Layer"
+import type * as Scope from "effect/Scope"
+import { attachRoot, renderTemplate } from "./internal/v2/render.js"
 import * as RenderContext from "./RenderContext.js"
 import { type RenderEvent } from "./RenderEvent.js"
 import { RenderTemplate } from "./RenderTemplate.js"
@@ -28,7 +29,7 @@ export type ToRendered<T extends RenderEvent | null> = T extends null ? Rendered
  */
 export const renderLayer = (
   window: Window & GlobalThis,
-  options?: DomServicesElementParams & { readonly skipRenderScheduling?: boolean }
+  options?: DomServicesElementParams
 ): Layer.Layer<
   | RenderTemplate
   | RenderContext.RenderContext
@@ -36,15 +37,21 @@ export const renderLayer = (
   | DomServices
 > =>
   Layer.provideMerge(
-    RenderTemplate.layer(Effect.contextWith((context: Context.Context<Document | RenderContext.RenderContext>) => {
-      const [document, ctx] = Context.getMany(
-        context,
-        Document,
-        RenderContext.RenderContext
-      )
+    RenderTemplate.layer(
+      Effect.contextWith(
+        (context: Context.Context<Document | RenderContext.RenderContext>) => {
+          const [document, ctx] = pipe(
+            context,
+            Context.getMany(
+              Document,
+              RenderContext.RenderContext
+            )
+          )
 
-      return renderTemplate(document, ctx)
-    })),
+          return renderTemplate(document, ctx)
+        }
+      )
+    ),
     RenderContext.dom(window, options)
   )
 
@@ -69,19 +76,9 @@ export function render<R, E, T extends RenderEvent | null>(
  * @since 1.0.0
  */
 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,
-  Exclude<
-    Exclude<R, Scope.Scope>,
-    RenderTemplate | RenderContext.RenderContext | CurrentEnvironment | DomServices
-  >
-> {
-  return Layer.provideMerge(
-    Fx.drainLayer(Fx.switchMapCause(render(rendered), (e) => Fx.fromEffect(Effect.logError(e)))),
-    renderLayer(window, options)
+  rendered: Fx.Fx<T, E, R>
+): Layer.Layer<never, never, RenderContext.RenderContext | RenderTemplate | RootElement | Exclude<R, Scope.Scope>> {
+  return Fx.drainLayer(
+    Fx.switchMapCause(render(rendered), (e) => Fx.fromEffect(Effect.logError(`Rendering Failure`, e)))
   )
 }