@typed/template 0.1.4 → 0.3.0

package/src/Html.ts

@@ -3,14 +3,13 @@
  */
 
 import * as Fx from "@typed/fx/Fx"
-import { Sink } from "@typed/fx/Sink"
+import * as Sink from "@typed/fx/Sink"
 import { TypeId } from "@typed/fx/TypeId"
-import type { Rendered } from "@typed/wire"
-import { Effect, Option } from "effect"
+import * as Effect from "effect/Effect"
+import * as Option from "effect/Option"
 import { join } from "effect/ReadonlyArray"
 import type * as Scope from "effect/Scope"
 import { isDirective } from "./Directive.js"
-import * as ElementRef from "./ElementRef.js"
 import type { ServerEntry } from "./Entry.js"
 import type { HtmlChunk, PartChunk, SparsePartChunk, TextChunk } from "./HtmlChunk.js"
 import { templateToHtmlChunks } from "./HtmlChunk.js"
@@ -23,10 +22,11 @@ import { RenderContext } from "./RenderContext.js"
 import { HtmlRenderEvent, isRenderEvent } from "./RenderEvent.js"
 import type { RenderEvent } from "./RenderEvent.js"
 import { RenderTemplate } from "./RenderTemplate.js"
-import { TemplateInstance } from "./TemplateInstance.js"
 
 const toHtml = (r: RenderEvent) => (r as HtmlRenderEvent).html
 
+const [padStart, padEnd] = [[TYPED_START], [TYPED_END]] as const
+
 /**
  * @since 1.0.0
  */
@@ -38,8 +38,7 @@ export function renderToHtml<R, E>(
       fx.pipe(
         Fx.provide(RenderTemplate.layer(renderHtml(ctx))),
         Fx.map(toHtml),
-        Fx.startWith(TYPED_START),
-        Fx.endWith(TYPED_END)
+        Fx.padWith(padStart, padEnd)
       )
     )
   )
@@ -55,41 +54,30 @@ export function renderToHtmlString<R, E>(
 }
 
 function renderHtml(ctx: RenderContext) {
-  return <Values extends ReadonlyArray<Renderable<any, any>>, T extends Rendered = Rendered>(
+  return <Values extends ReadonlyArray<Renderable<any, any>>>(
     templateStrings: TemplateStringsArray,
-    values: Values,
-    providedRef?: ElementRef.ElementRef<T>
-  ): Effect.Effect<
+    values: Values
+  ): Fx.Fx<
     Scope.Scope | Placeholder.Context<readonly [] extends Values ? never : Values[number]>,
-    never,
-    TemplateInstance<
-      Placeholder.Error<Values[number]>,
-      T
-    >
+    Placeholder.Error<Values[number]>,
+    RenderEvent
   > => {
-    return Effect.gen(function*(_) {
-      const ref = providedRef || (yield* _(ElementRef.make()))
-      const entry = getServerEntry(templateStrings, ctx.templateCache)
-
-      if (values.length === 0) {
-        return TemplateInstance(Fx.succeed(HtmlRenderEvent((entry.chunks[0] as TextChunk).value)), ref as any)
-      } else {
-        return TemplateInstance(
-          Fx.filter(
-            Fx.mergeBuffer(
-              entry.chunks.map((chunk) =>
-                renderChunk<
-                  Placeholder.Context<readonly [] extends Values ? never : Values[number]>,
-                  Placeholder.Error<Values[number]>
-                >(chunk, values)
-              )
-            ),
-            (x) => (x.valueOf() as string).length > 0
-          ) as any,
-          ref as any
-        )
-      }
-    })
+    const entry = getServerEntry(templateStrings, ctx.templateCache)
+    if (values.length === 0) {
+      return Fx.succeed(HtmlRenderEvent((entry.chunks[0] as TextChunk).value))
+    } else {
+      return Fx.filter(
+        Fx.mergeOrdered(
+          entry.chunks.map((chunk) =>
+            renderChunk<
+              Placeholder.Context<readonly [] extends Values ? never : Values[number]>,
+              Placeholder.Error<Values[number]>
+            >(chunk, values)
+          )
+        ),
+        (x) => (x.valueOf() as string).length > 0
+      )
+    }
   }
 }
 
@@ -125,7 +113,7 @@ function renderObject<R, E>(renderable: object | null | undefined) {
   if (renderable === null || renderable === undefined) {
     return Fx.succeed(HtmlRenderEvent(TEXT_START))
   } else if (Array.isArray(renderable)) {
-    return Fx.mergeBuffer(renderable.map(renderNode)) as any
+    return Fx.mergeOrdered(renderable.map(renderNode)) as any
   } else if (Fx.isFx<R, E, Renderable>(renderable)) {
     return Fx.concatMap(takeOneIfNotRenderEvent(renderable), renderNode as any)
   } else if (Effect.isEffect(renderable)) {
@@ -146,7 +134,7 @@ function renderPart<R, E>(
 
   // Refs and events are not rendered into HTML
   if (isDirective<R, E>(renderable)) {
-    return Fx.fromSink((sink: Sink<E, RenderEvent>) => {
+    return Fx.make((sink: Sink.Sink<never, E, RenderEvent>) => {
       const part = partNodeToPart(
         node,
         (value) => sink.onSuccess(HtmlRenderEvent(render(value)))
@@ -155,8 +143,21 @@ function renderPart<R, E>(
       return Effect.catchAllCause(renderable(part), sink.onFailure)
     })
   } else if (node._tag === "node") {
-    return Fx.endWith(renderNode<R, E>(renderable), HtmlRenderEvent(TYPED_HOLE(node.index)))
+    return Fx.append(renderNode<R, E>(renderable), HtmlRenderEvent(TYPED_HOLE(node.index)))
+  } else if (node._tag === "properties") {
+    if (renderable == null) return Fx.empty
+    return Fx.map(
+      Fx.take(
+        Fx.struct(
+          Object.fromEntries(Object.entries(renderable).map(([k, v]) => [k, unwrapRenderable(v)] as const))
+        ),
+        1
+      ),
+      render
+    ) as any
   } else {
+    if (renderable === null) return Fx.succeed(HtmlRenderEvent(render(renderable)))
+
     const html = Fx.filterMap(Fx.take(unwrapRenderable<R, E>(renderable), 1), (value) => {
       const s = render(value)
 
@@ -164,7 +165,7 @@ function renderPart<R, E>(
     })
 
     if (node._tag === "text-part") {
-      return Fx.endWith(Fx.startWith(html, HtmlRenderEvent(TEXT_START)), HtmlRenderEvent(TYPED_HOLE(node.index)))
+      return Fx.append(Fx.prepend(html, HtmlRenderEvent(TEXT_START)), HtmlRenderEvent(TYPED_HOLE(node.index)))
     }
 
     return html
@@ -179,14 +180,14 @@ function renderSparsePart<R, E>(
 
   return Fx.map(
     Fx.take(
-      Fx.combine(
+      Fx.tuple(
         node.nodes.map((node) => {
           if (node._tag === "text") return Fx.succeed(node.value)
 
           const renderable: Renderable<any, any> = (values as any)[node.index]
 
           if (isDirective<R, E>(renderable)) {
-            return Fx.fromSink<R, E, unknown>((sink: Sink<E, unknown>) =>
+            return Fx.make<R, E, unknown>((sink: Sink.Sink<never, E, unknown>) =>
               Effect.catchAllCause(
                 renderable(partNodeToPart(node, (value) => sink.onSuccess(value))),
                 sink.onFailure
@@ -204,17 +205,15 @@ function renderSparsePart<R, E>(
 }
 
 function takeOneIfNotRenderEvent<R, E, A>(fx: Fx.Fx<R, E, A>): Fx.Fx<R, E, A> {
-  return Fx.withEarlyExit(({ fork, sink }) =>
-    Fx.run(
-      fx,
-      Sink(
-        sink.onFailure,
-        (event) => isRenderEvent(event) ? sink.onSuccess(event) : Effect.zipRight(sink.onSuccess(event), sink.earlyExit)
-      )
-    ).pipe(
-      fork,
-      Effect.fromFiberEffect
-    )
+  return Fx.make<R, E, A>((sink) =>
+    Sink.withEarlyExit(sink, (sink) =>
+      fx.run(
+        Sink.make(
+          sink.onFailure,
+          (event) =>
+            isRenderEvent(event) ? sink.onSuccess(event) : Effect.zipRight(sink.onSuccess(event), sink.earlyExit)
+        )
+      ))
   )
 }
 
@@ -233,6 +232,8 @@ function getServerEntry(
       chunks: templateToHtmlChunks(template)
     }
 
+    templateCache.set(templateStrings, entry)
+
     return entry
   } else {
     return cached
@@ -245,7 +246,7 @@ function unwrapRenderable<R, E>(renderable: Renderable<any, any>): Fx.Fx<R, E, a
     case "object": {
       if (renderable === null || renderable === undefined) return Fx.succeed(null)
       else if (Array.isArray(renderable)) {
-        return Fx.combine(renderable.map(unwrapRenderable)) as any
+        return Fx.tuple(renderable.map(unwrapRenderable)) as any
       } else if (TypeId in renderable) {
         return renderable as any
       } else if (Effect.EffectTypeId in renderable) {

package/src/HtmlChunk.ts

@@ -64,7 +64,9 @@ export type AttrValue = string | null | undefined | ReadonlyArray<AttrValue>
  * @since 1.0.0
  */
 export function templateToHtmlChunks({ hash, nodes }: Template) {
-  return fuseTextChunks(nodes.flatMap((node) => nodeToHtmlChunk(node, hash)))
+  const chunks = fuseTextChunks(nodes.flatMap((node) => nodeToHtmlChunk(node, hash)))
+
+  return chunks
 }
 
 function fuseTextChunks(chunks: Array<HtmlChunk>): ReadonlyArray<HtmlChunk> {
@@ -94,6 +96,7 @@ type NodeMap = {
 }
 
 const nodeMap: NodeMap = {
+  doctype: (node) => [new TextChunk(`<!DOCTYPE ${node.name}>`)],
   element: elementToHtmlChunks,
   node: (node) => [new PartChunk(node, String)],
   "self-closing-element": selfClosingElementToHtmlChunks,
@@ -201,6 +204,17 @@ const attrMap: AttrMap = {
     new PartChunk(attr, (value) => value == null ? `` : datasetToString(value as Readonly<Record<string, string>>)),
   event: () => new TextChunk(""),
   property: (attr) => new PartChunk(attr, (value) => (value == null ? `` : ` ${attr.name}="${escape(value)}"`)),
+  properties: (attr) =>
+    new PartChunk(
+      attr,
+      (
+        value
+      ) => (value == null
+        ? ``
+        : " " + Object.entries(value).map(([key, value]) =>
+          value === true ? key : value === false ? "" : `${key}="${escape(value)}"`
+        ).join(" "))
+    ),
   ref: () => new TextChunk(""),
   "sparse-attr": (attr) =>
     new SparsePartChunk(attr, (values) => {

package/src/Hydrate.ts

@@ -49,5 +49,5 @@ export function hydrate<R, E, T extends RenderEvent | null>(
 export function hydrateLayer<R, E, T extends RenderEvent | null>(
   rendered: Fx.Fx<R, E, T>
 ) {
-  return Fx.drainLayer(Fx.switchMapCause(hydrate(rendered), Effect.logError))
+  return Fx.drainLayer(Fx.switchMapCause(hydrate(rendered), (cause) => Fx.fromEffect(Effect.logError(cause))))
 }

package/src/Many.ts

@@ -2,44 +2,54 @@
  * @since 1.0.0
  */
 import type * as AsyncData from "@typed/async-data/AsyncData"
-import type * as Computed from "@typed/fx/Computed"
+import * as RefAsyncData from "@typed/fx/AsyncData"
 import * as Fx from "@typed/fx/Fx"
-import * as RefAsyncData from "@typed/fx/RefAsyncData"
 import * as RefSubject from "@typed/fx/RefSubject"
-import { makeHold } from "@typed/fx/Subject"
+import type { Scope } from "effect"
 import * as Effect from "effect/Effect"
 import { dual } from "effect/Function"
+import type { NoInfer } from "effect/Types"
 import { RenderContext } from "./RenderContext.js"
 import { type RenderEvent } from "./RenderEvent.js"
 
 /**
  * @since 1.0.0
  */
-export function many<R, E, A, B, R2, E2>(
+export function many<R, E, A, B extends PropertyKey, R2, E2>(
   values: Fx.Fx<R, E, ReadonlyArray<A>>,
-  getKey: (a: A) => B,
-  f: (a: RefSubject.RefSubject<never, never, A>, key: B) => Fx.Fx<R2, E2, RenderEvent>
-): Fx.Fx<R | R2 | RenderContext, E | E2, RenderEvent | ReadonlyArray<RenderEvent>> {
+  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>> {
   return Fx.fromFxEffect(
-    RenderContext.with((ctx): Fx.Fx<R | R2 | RenderContext, E | E2, RenderEvent | ReadonlyArray<RenderEvent>> => {
-      if (ctx.environment === "browser") {
-        return Fx.keyed(values, getKey, f)
-      }
-
-      return Fx.fromFxEffect(
-        Effect.map(Fx.first(values), (values) =>
-          values._tag === "None" ? Fx.empty : Fx.mergeBuffer(
-            values.value.map((value) => {
-              const ref = RefSubject.unsafeMake(Effect.succeed(value), makeHold())
+    RenderContext.with(
+      (ctx): Fx.Fx<R | R2 | RenderContext | Scope.Scope, E | E2, RenderEvent | ReadonlyArray<RenderEvent>> => {
+        // When rendering HTML, we want to ensure that we order our HTML events in the same order
+        // as the templates are defined which is why we use mergeOrdered. We also want to ensure that
+        // our templates end, so we take only the first of our source values and also ensure that a subscription
+        // to our RefSubjects only include its first event.
+        if (ctx.environment === "server" || ctx.environment === "static") {
+          return Fx.fromFxEffect(
+            Effect.map(Fx.first(values), (values) =>
+              Fx.mergeOrdered(
+                values.map((value) =>
+                  Fx.fromFxEffect(Effect.map(RefSubject.of(value), (ref) => f(RefSubject.take(ref, 1), getKey(value))))
+                )
+              ))
+          )
+        }
 
-              return f({ ...ref, ...Fx.take(ref, 1) } as RefSubject.RefSubject<never, never, A>, getKey(value))
-            })
-          ))
-      )
-    })
+        // In other environments we just used Fx.keyed to allow indefinite subscriptions to RefSubjects
+        return Fx.keyed(values, {
+          getKey,
+          onValue: f
+        })
+      }
+    )
   )
 }
 
+type TODO = any
+
 /**
  * @since 1.0.0
  */
@@ -47,18 +57,18 @@ export const manyAsyncData: {
   <
     E1,
     A,
-    B,
-    NoData extends Fx.FxInput<any, any, any>,
-    Loading extends Fx.FxInput<any, any, any>,
-    Failure extends Fx.FxInput<any, any, any>,
-    Success extends Fx.FxInput<any, any, any>
+    B extends PropertyKey,
+    NoData extends Fx.Fx<any, any, any>,
+    Loading extends Fx.Fx<any, any, any>,
+    Failure extends Fx.Fx<any, any, any>,
+    Success extends Fx.Fx<any, any, any>
   >(
     getKey: (a: A) => B,
     matchers: {
       NoData: () => NoData
-      Loading: (data: RefAsyncData.LoadingComputed) => Loading
-      Failure: (data: Computed.Computed<never, never, E1>, computed: RefAsyncData.FailureComputed<E1>) => Failure
-      Success: (value: Computed.Computed<never, never, A>, computed: RefAsyncData.SuccessComputed) => Success
+      Loading: (todo: TODO) => Loading
+      Failure: (data: RefSubject.Computed<never, never, E1>, computed: TODO) => Failure
+      Success: (value: RefSubject.Computed<never, never, A>, computed: TODO) => Success
     }
   ): <R, E>(
     fx: Fx.Fx<R, E, AsyncData.AsyncData<E1, ReadonlyArray<A>>>
@@ -73,7 +83,7 @@ export const manyAsyncData: {
     E,
     E1,
     A,
-    B,
+    B extends PropertyKey,
     NoData extends Fx.Fx<any, any, any>,
     Loading extends Fx.Fx<any, any, any>,
     Failure extends Fx.Fx<any, any, any>,
@@ -83,9 +93,9 @@ export const manyAsyncData: {
     getKey: (a: A) => B,
     matchers: {
       NoData: () => NoData
-      Loading: (data: RefAsyncData.LoadingComputed) => Loading
-      Failure: (data: Computed.Computed<never, never, E1>, computed: RefAsyncData.FailureComputed<E1>) => Failure
-      Success: (value: Computed.Computed<never, never, A>, computed: RefAsyncData.SuccessComputed) => Success
+      Loading: (data: TODO) => Loading
+      Failure: (data: RefSubject.Computed<never, never, E1>, computed: TODO) => Failure
+      Success: (value: RefSubject.Computed<never, never, A>, computed: TODO) => Success
     }
   ): Fx.Fx<
     R | Fx.Fx.Context<NoData | Loading | Failure | Success>,
@@ -99,26 +109,26 @@ export const manyAsyncData: {
     E,
     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>,
-    B
+    Success extends Fx.Fx<any, any, RenderEvent>
   >(
     fx: Fx.Fx<R, E, AsyncData.AsyncData<E1, ReadonlyArray<A>>>,
+    getKey: (a: A) => B,
     matchers: {
-      NoData: () => NoData
-      Loading: (data: RefAsyncData.LoadingComputed) => Loading
-      Failure: (data: Computed.Computed<never, never, E1>, computed: RefAsyncData.FailureComputed<E1>) => Failure
-      Success: (value: Computed.Computed<never, never, A>, computed: RefAsyncData.SuccessComputed) => Success
-    },
-    getKey: (a: A) => B
+      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
+    }
   ): Fx.Fx<
     R | Fx.Fx.Context<NoData | Loading | Failure | Success>,
     E | Fx.Fx.Error<NoData | Loading | Failure | Success>,
     Fx.Fx.Success<NoData | Loading | Failure | Success>
   > => {
-    return RefAsyncData.matchKeyed(fx, {
+    return RefAsyncData.matchAsyncData(fx, {
       NoData: matchers.NoData,
       Loading: matchers.Loading,
       Failure: matchers.Failure,