@typed/template 0.3.2 → 0.3.4

package/src/internal/render.ts

@@ -1,12 +1,14 @@
 import * as Fx from "@typed/fx/Fx"
+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 } from "effect"
+import { Effect, ExecutionStrategy, Exit } from "effect"
 import type { Cause } from "effect/Cause"
 import type { Chunk } from "effect/Chunk"
 import * as Context from "effect/Context"
-import { Scope } from "effect/Scope"
+import * as Scope from "effect/Scope"
+import { uncapitalize } from "effect/String"
 import type { Directive } from "../Directive.js"
 import { isDirective } from "../Directive.js"
 import * as ElementRef from "../ElementRef.js"
@@ -49,7 +51,7 @@ import { findHoleComment, findPath } from "./utils.js"
  * @internal
  */
 export type RenderPartContext = {
-  readonly context: Context.Context<Scope>
+  readonly context: Context.Context<Scope.Scope>
   readonly document: Document
   readonly eventSource: EventSource
   readonly refCounter: IndexRefCounter2
@@ -60,6 +62,7 @@ export type RenderPartContext = {
   readonly makeHydrateContext?: (index: number) => HydrateContext
 
   expected: number
+  spreadIndex: number
 }
 
 type RenderPartMap = {
@@ -101,15 +104,16 @@ const RenderPartMap: RenderPartMap = {
   "boolean-part": (templatePart, node, ctx) => {
     const { refCounter, renderContext, values } = ctx
     const element = node as HTMLElement | SVGElement
+    const name = templatePart.name
     const renderable = values[templatePart.index]
     const setValue = (value: boolean | null | undefined) => {
-      element.toggleAttribute(templatePart.name, isNullOrUndefined(value) ? false : Boolean(value))
+      element.toggleAttribute(name, isNullOrUndefined(value) ? false : Boolean(value))
     }
 
     return matchSettablePart(
       renderable,
       setValue,
-      () => BooleanPartImpl.browser(templatePart.index, element, templatePart.name, renderContext),
+      () => BooleanPartImpl.browser(templatePart.index, element, name, renderContext),
       (f) => Effect.zipRight(renderContext.queue.add(element, f), refCounter.release(templatePart.index)),
       () => ctx.expected++
     )
@@ -124,14 +128,13 @@ const RenderPartMap: RenderPartMap = {
         element.classList.remove(...classNames)
         classNames.clear()
       } else {
-        const newClassNames = new Set(Array.isArray(value) ? value : [String(value)])
+        const newClassNames = new Set(
+          Array.isArray(value) ? value.flatMap((x) => splitClassNames(String(x))) : splitClassNames(String(value))
+        )
         const { added, removed } = diffClassNames(classNames, newClassNames)
 
-        if (removed.length > 0) {
-          element.classList.remove(...removed)
-        }
-        if (added.length > 0) element.classList.add(...added)
-
+        element.classList.remove(...removed)
+        element.classList.add(...added)
         classNames = newClassNames
       }
     }
@@ -219,7 +222,7 @@ const RenderPartMap: RenderPartMap = {
 
     const handle = handlePart(
       ctx.values[templatePart.index],
-      (value) => Effect.zipRight(part.update(value as any), ctx.refCounter.release(templatePart.index))
+      Sink.make(ctx.onCause, (value) => Effect.zipRight(part.update(value), ctx.refCounter.release(templatePart.index)))
     )
 
     if (makeHydrateContext) {
@@ -273,18 +276,21 @@ const RenderPartMap: RenderPartMap = {
           ;(element as any)[key] = value
         }
       }
+      const setClassNames = (previous: Set<string>, updated: Set<string>) => {
+        const { added, removed } = diffClassNames(previous, updated)
 
-      const effects: Array<Effect.Effect<any, any, void>> = []
+        element.classList.remove(...removed)
+        element.classList.add(...added)
+        removed.forEach((r) => previous.delete(r))
+        added.forEach((a) => previous.add(a))
+      }
 
-      // We need indexes to track async values that won't conflict
-      // with any other Parts, we can start end of the current values.length
-      // As there should only ever be exactly 1 properties part.
-      let i = ctx.values.length
+      const effects: Array<Effect.Effect<any, any, void>> = []
+      const entries = Object.entries(renderable)
 
       loop:
-      for (const [key, value] of Object.entries(renderable)) {
-        const index = ++i
-
+      for (const [key, value] of entries) {
+        const index = ++ctx.spreadIndex
         switch (key[0]) {
           case "?": {
             const name = key.slice(1)
@@ -315,7 +321,7 @@ const RenderPartMap: RenderPartMap = {
             continue loop
           }
           case "@": {
-            const name = key.slice(1)
+            const name = uncapitalize(key.slice(1))
             const handler = getEventHandler(value, ctx.context, ctx.onCause)
             if (handler) {
               ctx.eventSource.addEventListener(element, name, handler)
@@ -324,7 +330,7 @@ const RenderPartMap: RenderPartMap = {
           }
           case "o": {
             if (key[1] === "n") {
-              const name = key.slice(2)
+              const name = uncapitalize(key.slice(2))
               const handler = getEventHandler(value, ctx.context, ctx.onCause)
               if (handler) {
                 ctx.eventSource.addEventListener(element, name, handler)
@@ -334,15 +340,40 @@ const RenderPartMap: RenderPartMap = {
           }
         }
 
-        const eff = matchSettablePart(
-          value,
-          (value) => setAttribute(key, value),
-          () => AttributePartImpl.browser(index, element, key, ctx.renderContext),
-          (f) => Effect.zipRight(ctx.renderContext.queue.add(element, f), ctx.refCounter.release(index)),
-          () => ctx.expected++
-        )
-        if (eff !== null) {
-          effects.push(eff)
+        const lowerCaseName = key.toLowerCase()
+
+        const isClass = lowerCaseName === "class" || lowerCaseName === "classname"
+
+        if (isClass) {
+          const classNames: Set<string> = new Set()
+          const eff = matchSettablePart(
+            value,
+            (value) => {
+              if (isNullOrUndefined(value)) {
+                element.classList.remove(...classNames)
+                classNames.clear()
+              } else {
+                setClassNames(classNames, new Set(splitClassNames(String(value))))
+              }
+            },
+            () => ClassNamePartImpl.browser(index, element, ctx.renderContext),
+            (f) => Effect.zipRight(ctx.renderContext.queue.add(element, f), ctx.refCounter.release(index)),
+            () => ctx.expected++
+          )
+          if (eff !== null) {
+            effects.push(eff)
+          }
+        } else {
+          const eff = matchSettablePart(
+            value,
+            (value) => setAttribute(key, value),
+            () => AttributePartImpl.browser(index, element, key, ctx.renderContext),
+            (f) => Effect.zipRight(ctx.renderContext.queue.add(element, f), ctx.refCounter.release(index)),
+            () => ctx.expected++
+          )
+          if (eff !== null) {
+            effects.push(eff)
+          }
         }
       }
 
@@ -474,7 +505,10 @@ const RenderPartMap: RenderPartMap = {
 
     return handlePart(
       ctx.values[templatePart.index],
-      (value) => Effect.zipRight(part.update(value as any), ctx.refCounter.release(templatePart.index))
+      Sink.make(
+        ctx.onCause,
+        (value) => Effect.zipRight(part.update(value as any), ctx.refCounter.release(templatePart.index))
+      )
     )
   }
 }
@@ -538,13 +572,15 @@ export const renderTemplate: (document: Document, renderContext: RenderContext)
       return Fx.sync(() => DomRenderEvent(persistent(document.importNode(entry.content, true))))
     }
 
-    return Fx.make<Scope | Placeholder.Context<Values[number]>, Placeholder.Error<Values[number]>, RenderEvent>((
+    return Fx.make<Scope.Scope | Placeholder.Context<Values[number]>, Placeholder.Error<Values[number]>, RenderEvent>((
       sink
     ) => {
       return Effect.gen(function*(_) {
-        const content = document.importNode(entry.content, true)
-        const context = yield* _(Effect.context<Scope>())
+        const context = yield* _(Effect.context<Scope.Scope | Placeholder.Context<Values[number]>>())
+        const parentScope = Context.get(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,
           document,
@@ -553,17 +589,18 @@ export const renderTemplate: (document: Document, renderContext: RenderContext)
           refCounter,
           renderContext,
           onCause: sink.onFailure as any,
+          spreadIndex: values.length,
           values
         }
 
         // Connect our interpolated values to our template parts
-        const effects: Array<Effect.Effect<Scope | Placeholder.Context<Values[number]>, never, void>> = []
+        const effects: Array<Effect.Effect<Scope.Scope | Placeholder.Context<Values[number]>, never, void>> = []
         for (const [part, path] of entry.template.parts) {
           const eff = renderPart2(part, content, path, ctx)
           if (eff !== null) {
             effects.push(
               ...(Array.isArray(eff) ? eff : [eff]) as Array<
-                Effect.Effect<Scope | Placeholder.Context<Values[number]>, never, void>
+                Effect.Effect<Scope.Scope | Placeholder.Context<Values[number]>, never, void>
               >
             )
           }
@@ -571,7 +608,11 @@ export const renderTemplate: (document: Document, renderContext: RenderContext)
 
         // Fork any effects necessary
         if (effects.length > 0) {
-          yield* _(Effect.forkAll(effects))
+          for (const eff of effects) {
+            yield* _(
+              Effect.forkIn(Effect.catchAllCause(eff, ctx.onCause), scope)
+            )
+          }
         }
 
         // If there's anything to wait on and it's not already done, wait for an initial value
@@ -584,14 +625,17 @@ export const renderTemplate: (document: Document, renderContext: RenderContext)
         const wire = persistent(content) as T
 
         // Set the element when it is ready
-        yield* _(ctx.eventSource.setup(wire, Context.get(context, Scope)))
+        yield* _(ctx.eventSource.setup(wire, scope))
 
         // Emit our DomRenderEvent
-        yield* _(sink.onSuccess(DomRenderEvent(wire)))
-
-        // Ensure our templates last forever in the DOM environment
-        // so event listeners are kept attached to the current Scope.
-        yield* _(Effect.never)
+        yield* _(
+          sink.onSuccess(DomRenderEvent(wire)),
+          // Ensure our templates last forever in the DOM environment
+          // so event listeners are kept attached to the current Scope.
+          Effect.zipRight(Effect.never),
+          // Close our scope whenever the current Fiber is interrupted
+          Effect.ensuring(Scope.close(scope, Exit.unit))
+        )
       })
     })
   }
@@ -619,26 +663,26 @@ function getEventHandler<R, E>(
   return null
 }
 
-function handlePart<R, E>(
+function handlePart<R, E, R2>(
   renderable: unknown,
-  update: (u: unknown) => Effect.Effect<Scope, never, unknown>
-): Effect.Effect<R | Scope, E, any> {
+  sink: Sink.Sink<R2, any, any>
+): Effect.Effect<R | R2 | Scope.Scope, never, any> {
   switch (typeof renderable) {
     case "undefined":
     case "object": {
-      if (renderable === null || renderable === undefined) return update(null)
+      if (renderable === null || renderable === undefined) return sink.onSuccess(null)
       else if (Array.isArray(renderable)) {
         return renderable.length === 0
-          ? update(null)
-          : Effect.forkScoped(Fx.observe(Fx.tuple(renderable.map(unwrapRenderable)) as any, update))
+          ? sink.onSuccess(null)
+          : Fx.tuple(renderable.map(unwrapRenderable)).run(sink) as any
       } else if (TypeId in renderable) {
-        return Effect.forkScoped(Fx.observe(renderable as any, update))
+        return (renderable as Fx.Fx<R | R2, any, any>).run(sink)
       } else if (Effect.EffectTypeId in renderable) {
-        return Effect.flatMap(renderable as Effect.Effect<R, E, any>, update)
-      } else return update(renderable)
+        return Effect.matchCauseEffect(renderable as Effect.Effect<R, E, any>, sink)
+      } else return sink.onSuccess(renderable)
     }
     default:
-      return update(renderable)
+      return sink.onSuccess(renderable)
   }
 }
 
@@ -648,7 +692,9 @@ function unwrapRenderable<R, E>(renderable: unknown): Fx.Fx<R, E, any> {
     case "object": {
       if (renderable === null || renderable === undefined) return Fx.succeed(null)
       else if (Array.isArray(renderable)) {
-        return renderable.length === 0 ? Fx.succeed(null) : Fx.tuple(renderable.map(unwrapRenderable)) as any
+        return renderable.length === 0
+          ? Fx.succeed(null)
+          : Fx.map(Fx.tuple(renderable.map(unwrapRenderable)), (xs) => xs.flat()) as any
       } else if (TypeId in renderable) {
         return renderable as any
       } else if (Effect.EffectTypeId in renderable) {
@@ -837,7 +883,7 @@ function matchSettablePart(
   renderable: Renderable<any, any>,
   setValue: (value: any) => void,
   makePart: () => Part,
-  schedule: (f: () => void) => Effect.Effect<Scope, never, void>,
+  schedule: (f: () => void) => Effect.Effect<Scope.Scope, never, void>,
   expect: () => void
 ) {
   return matchRenderable(renderable, {