@typed/template 0.13.0 → 1.0.0-beta.0

package/dist/EventSource.d.ts

@@ -0,0 +1,82 @@
+import * as Effect from "effect/Effect";
+import * as Scope from "effect/Scope";
+import type { EventHandler } from "./EventHandler.js";
+import { type Rendered } from "./Wire.js";
+type EventName = string;
+type Handler<Ev extends Event> = EventHandler<Ev>;
+/**
+ * An interface for managing event listeners on DOM nodes.
+ *
+ * It abstracts the process of adding and removing event listeners, ensuring that they are
+ * properly cleaned up when the scope is closed or the element is removed.
+ *
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import { makeEventSource } from "@typed/template/EventSource"
+ * import * as EventHandler from "@typed/template/EventHandler"
+ * import { Scope } from "effect"
+ *
+ * const program = Effect.gen(function* () {
+ *   const eventSource = makeEventSource()
+ *   const button = document.createElement("button")
+ *
+ *   // Add event listener
+ *   const handler = EventHandler.make((event: MouseEvent) => {
+ *     console.log("Button clicked")
+ *   })
+ *
+ *   const disposable = eventSource.addEventListener(button, "click", handler)
+ *
+ *   // Setup listeners for rendered content
+ *   yield* eventSource.setup(button, yield* Scope.make())
+ *
+ *   // Cleanup
+ *   disposable[Symbol.dispose]()
+ * })
+ * ```
+ *
+ * @since 1.0.0
+ * @category models
+ */
+export interface EventSource {
+    /**
+     * Adds an event listener to a target.
+     */
+    readonly addEventListener: <Ev extends Event>(element: EventTarget, event: EventName, handler: Handler<Ev>) => Disposable;
+    /**
+     * Sets up event listeners for a rendered template within a scope.
+     */
+    readonly setup: (rendered: Rendered, scope: Scope.Scope) => Effect.Effect<void>;
+}
+/**
+ * Creates a new `EventSource`.
+ *
+ * The created `EventSource` can efficiently manage multiple event listeners,
+ * grouping them by event type and handling setup/teardown lifecycles.
+ *
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import { makeEventSource } from "@typed/template/EventSource"
+ * import * as EventHandler from "@typed/template/EventHandler"
+ *
+ * const program = Effect.gen(function* () {
+ *   const eventSource = makeEventSource()
+ *   const element = document.createElement("div")
+ *
+ *   // Add multiple event listeners
+ *   eventSource.addEventListener(element, "click", EventHandler.make(() => console.log("clicked")))
+ *   eventSource.addEventListener(element, "mouseover", EventHandler.make(() => console.log("hovered")))
+ *
+ *   // Setup all listeners
+ *   yield* eventSource.setup(element, yield* Scope.make())
+ * })
+ * ```
+ *
+ * @since 1.0.0
+ * @category constructors
+ */
+export declare function makeEventSource(): EventSource;
+export {};
+//# sourceMappingURL=EventSource.d.ts.map

package/dist/EventSource.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventSource.d.ts","sourceRoot":"","sources":["../src/EventSource.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AAExC,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AACtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAe,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AAEvD,KAAK,SAAS,GAAG,MAAM,CAAC;AAExB,KAAK,OAAO,CAAC,EAAE,SAAS,KAAK,IAAI,YAAY,CAAC,EAAE,CAAC,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,QAAQ,CAAC,gBAAgB,EAAE,CAAC,EAAE,SAAS,KAAK,EAC1C,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC,KACjB,UAAU,CAAC;IAEhB;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,KAAK,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;CACjF;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,eAAe,IAAI,WAAW,CAoF7C"}

package/dist/EventSource.js

@@ -0,0 +1,127 @@
+import * as Effect from "effect/Effect";
+import * as Fiber from "effect/Fiber";
+import * as Scope from "effect/Scope";
+import { getElements } from "./Wire.js";
+const disposable = (f) => ({ [Symbol.dispose]: f });
+const dispose = (d) => d[Symbol.dispose]();
+/**
+ * Creates a new `EventSource`.
+ *
+ * The created `EventSource` can efficiently manage multiple event listeners,
+ * grouping them by event type and handling setup/teardown lifecycles.
+ *
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import { makeEventSource } from "@typed/template/EventSource"
+ * import * as EventHandler from "@typed/template/EventHandler"
+ *
+ * const program = Effect.gen(function* () {
+ *   const eventSource = makeEventSource()
+ *   const element = document.createElement("div")
+ *
+ *   // Add multiple event listeners
+ *   eventSource.addEventListener(element, "click", EventHandler.make(() => console.log("clicked")))
+ *   eventSource.addEventListener(element, "mouseover", EventHandler.make(() => console.log("hovered")))
+ *
+ *   // Setup all listeners
+ *   yield* eventSource.setup(element, yield* Scope.make())
+ * })
+ * ```
+ *
+ * @since 1.0.0
+ * @category constructors
+ */
+export function makeEventSource() {
+    const listeners = new Map();
+    function addEventListener(element, event, handler) {
+        const sets = listeners.get(event);
+        const entry = [element, handler];
+        const isOnce = handler.options?.once === true;
+        const normal = sets?.[0] ?? new Set();
+        const once = sets?.[1] ?? new Set();
+        if (sets === undefined) {
+            listeners.set(event, [normal, once]);
+        }
+        if (isOnce) {
+            once.add(entry);
+            return disposable(() => once.delete(entry));
+        }
+        else {
+            normal.add(entry);
+            return disposable(() => normal.delete(entry));
+        }
+    }
+    function setupListeners(element, run) {
+        const disposables = [];
+        for (const [event, sets] of listeners) {
+            for (const handlers of sets) {
+                if (handlers.size === 0)
+                    continue;
+                const listener = (ev) => run(Effect.forEach(handlers, ([el, { handler }]) => {
+                    const match = ev.target === el || el.contains(ev.target);
+                    return match ? handler(proxyCurrentTarget(ev, el)) : Effect.void;
+                }));
+                element.addEventListener(event, listener, getDerivedAddEventListenerOptions(handlers));
+                disposables.push(disposable(() => element.removeEventListener(event, listener)));
+            }
+        }
+        return disposables;
+    }
+    function setup(rendered, scope) {
+        if (listeners.size === 0)
+            return Effect.void;
+        const elements = getElements(rendered);
+        if (elements.length === 0)
+            return Effect.void;
+        const disposables = [];
+        const fibers = new Map();
+        const run = (effect) => {
+            const id = Symbol();
+            const fiber = Effect.runFork(Effect.onExit(effect, () => Effect.sync(() => fibers.delete(id))));
+            fibers.set(id, fiber);
+            return fiber;
+        };
+        if (listeners.size > 0) {
+            for (const element of elements) {
+                // eslint-disable-next-line no-restricted-syntax
+                disposables.push(...setupListeners(element, run));
+            }
+        }
+        return Scope.addFinalizer(scope, Effect.suspend(() => {
+            disposables.forEach(dispose);
+            if (fibers.size === 0)
+                return Effect.void;
+            return Fiber.interruptAll(fibers.values());
+        }));
+    }
+    return {
+        addEventListener,
+        setup,
+    };
+}
+function proxyCurrentTarget(event, currentTarget) {
+    return new Proxy(event, {
+        get(target, property) {
+            if (property === "currentTarget")
+                return currentTarget;
+            const value = target[property];
+            if (typeof value === "function")
+                return value.bind(event);
+            return value;
+        },
+    });
+}
+function getDerivedAddEventListenerOptions(entries) {
+    let once = true;
+    let passive = true;
+    for (const h of entries) {
+        if (h[1].options?.once !== true)
+            once = false;
+        if (h[1].options?.passive !== true)
+            passive = false;
+        if (!once && !passive)
+            break;
+    }
+    return { once, passive };
+}

package/dist/Html.d.ts

@@ -0,0 +1,122 @@
+import * as Effect from "effect/Effect";
+import * as Layer from "effect/Layer";
+import * as ServiceMap from "effect/ServiceMap";
+import { Fx } from "@typed/fx";
+import { type RenderEvent } from "./RenderEvent.js";
+import { RenderTemplate } from "./RenderTemplate.js";
+/**
+ * Renders a stream of `RenderEvent`s into a stream of HTML strings.
+ *
+ * This function transforms the output of a template rendering process (which produces `RenderEvent`s)
+ * into a stream of strings suitable for HTML output (e.g., for Server-Side Rendering).
+ *
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import { html } from "@typed/template"
+ * import { renderToHtml, HtmlRenderTemplate } from "@typed/template/Html"
+ * import { Fx } from "@typed/fx"
+ * import { Layer } from "effect"
+ *
+ * const program = Effect.gen(function* () {
+ *   const template = html`<div>Hello, ${"world"}!</div>`
+ *
+ *   // Render to HTML string stream
+ *   const htmlStream = renderToHtml(template).pipe(
+ *     Fx.provide(HtmlRenderTemplate)
+ *   )
+ *
+ *   // Collect all HTML chunks
+ *   const chunks = yield* Fx.collectAll(htmlStream)
+ *   console.log(chunks.join("")) // "<div>Hello, world!</div>"
+ * })
+ * ```
+ *
+ * @param fx - The `Fx` stream of `RenderEvent`s to render.
+ * @returns An `Fx` stream of HTML strings.
+ * @since 1.0.0
+ * @category rendering
+ */
+export declare function renderToHtml<E, R>(fx: Fx.Fx<RenderEvent | null | undefined, E, R>): Fx.Fx<string, E, R>;
+/**
+ * Renders a stream of `RenderEvent`s into a single HTML string.
+ *
+ * This is a convenience function that collects all events from `renderToHtml` and joins them
+ * into a single string. It is an Effect that resolves when the stream completes.
+ *
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import { html } from "@typed/template"
+ * import { renderToHtmlString, HtmlRenderTemplate } from "@typed/template/Html"
+ * import { Fx } from "@typed/fx"
+ * import { Layer } from "effect"
+ *
+ * const program = Effect.gen(function* () {
+ *   const template = html`<div>
+ *     <h1>Hello</h1>
+ *     <p>World</p>
+ *   </div>`
+ *
+ *   // Render to single HTML string
+ *   const htmlString = yield* renderToHtmlString(template).pipe(
+ *     Fx.provide(HtmlRenderTemplate)
+ *   )
+ *
+ *   console.log(htmlString)
+ *   // "<div><h1>Hello</h1><p>World</p></div>"
+ * })
+ * ```
+ *
+ * @param fx - The `Fx` stream of `RenderEvent`s to render.
+ * @returns An `Effect` that resolves to the full HTML string.
+ * @since 1.0.0
+ * @category rendering
+ */
+export declare function renderToHtmlString<E, R>(fx: Fx.Fx<RenderEvent | null | undefined, E, R>): Effect.Effect<string, E, R>;
+/**
+ * A boolean service that indicates whether the current rendering context is static.
+ *
+ * If `true`, the HTML renderer will optimize for static output, potentially skipping
+ * dynamic placeholder generation or other interactive features not needed for static HTML.
+ */
+export declare const StaticRendering: ServiceMap.Reference<boolean>;
+/**
+ * A Layer that provides the `RenderTemplate` service implemented for HTML string generation.
+ *
+ * Using this layer enables templates to be rendered as HTML strings (e.g., for SSR)
+ * rather than DOM nodes. It sets the `RefSubject.CurrentComputedBehavior` to `"one"`, indicating
+ * a single-pass render approach typical for HTML generation.
+ *
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import { html } from "@typed/template"
+ * import { renderToHtmlString, HtmlRenderTemplate } from "@typed/template/Html"
+ * import { Fx } from "@typed/fx"
+ * import { Layer } from "effect"
+ *
+ * const program = Effect.gen(function* () {
+ *   const template = html`<div>Hello, ${"world"}!</div>`
+ *
+ *   const htmlString = yield* renderToHtmlString(template).pipe(
+ *     Fx.provide(HtmlRenderTemplate)
+ *   )
+ *
+ *   // Use for SSR
+ *   return htmlString
+ * })
+ * ```
+ *
+ * @since 1.0.0
+ * @category layers
+ */
+export declare const HtmlRenderTemplate: Layer.Layer<RenderTemplate, never, never>;
+/**
+ * A variant of `HtmlRenderTemplate` that enables static rendering optimizations.
+ *
+ * This layer provides the `RenderTemplate` service for HTML generation but also
+ * sets `StaticRendering` to `true`, enabling optimizations for static content.
+ */
+export declare const StaticHtmlRenderTemplate: Layer.Layer<RenderTemplate, never, never>;
+//# sourceMappingURL=Html.d.ts.map

package/dist/Html.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Html.d.ts","sourceRoot":"","sources":["../src/Html.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AAKtC,OAAO,KAAK,UAAU,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,EAAE,EAAc,MAAM,WAAW,CAAC;AAa3C,OAAO,EAAsC,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACxF,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AASrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAAE,CAAC,EAC/B,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,WAAW,GAAG,IAAI,GAAG,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC,GAC9C,EAAE,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,CAErB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,CAAC,EACrC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,WAAW,GAAG,IAAI,GAAG,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC,GAC9C,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,CAM7B;AAED;;;;;GAKG;AACH,eAAO,MAAM,eAAe,+BAK3B,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,kBAAkB,2CA+BqD,CAAC;AAErF;;;;;GAKG;AACH,eAAO,MAAM,wBAAwB,2CAEpC,CAAC"}

package/dist/Html.js

@@ -0,0 +1,250 @@
+import * as Effect from "effect/Effect";
+import * as Layer from "effect/Layer";
+import { none, some } from "effect/Option";
+import { isNullish, isObject } from "effect/Predicate";
+import { map as mapRecord } from "effect/Record";
+import * as ServiceMap from "effect/ServiceMap";
+import { Fx, RefSubject } from "@typed/fx";
+import { addTemplateHash, templateToHtmlChunks, } from "./HtmlChunk.js";
+import { renderToString } from "./internal/encoding.js";
+import { TEXT_START, TYPED_NODE_END, TYPED_NODE_START } from "./internal/meta.js";
+import { takeOneIfNotRenderEvent } from "./internal/takeOneIfNotRenderEvent.js";
+import { parse } from "./Parser.js";
+import { HtmlRenderEvent, isHtmlRenderEvent } from "./RenderEvent.js";
+import { RenderTemplate } from "./RenderTemplate.js";
+const toHtmlString = (event) => {
+    if (event === null || event === undefined)
+        return none();
+    const s = event.toString();
+    if (s === "")
+        return none();
+    return some(s);
+};
+/**
+ * Renders a stream of `RenderEvent`s into a stream of HTML strings.
+ *
+ * This function transforms the output of a template rendering process (which produces `RenderEvent`s)
+ * into a stream of strings suitable for HTML output (e.g., for Server-Side Rendering).
+ *
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import { html } from "@typed/template"
+ * import { renderToHtml, HtmlRenderTemplate } from "@typed/template/Html"
+ * import { Fx } from "@typed/fx"
+ * import { Layer } from "effect"
+ *
+ * const program = Effect.gen(function* () {
+ *   const template = html`<div>Hello, ${"world"}!</div>`
+ *
+ *   // Render to HTML string stream
+ *   const htmlStream = renderToHtml(template).pipe(
+ *     Fx.provide(HtmlRenderTemplate)
+ *   )
+ *
+ *   // Collect all HTML chunks
+ *   const chunks = yield* Fx.collectAll(htmlStream)
+ *   console.log(chunks.join("")) // "<div>Hello, world!</div>"
+ * })
+ * ```
+ *
+ * @param fx - The `Fx` stream of `RenderEvent`s to render.
+ * @returns An `Fx` stream of HTML strings.
+ * @since 1.0.0
+ * @category rendering
+ */
+export function renderToHtml(fx) {
+    return Fx.filterMap(fx, toHtmlString);
+}
+/**
+ * Renders a stream of `RenderEvent`s into a single HTML string.
+ *
+ * This is a convenience function that collects all events from `renderToHtml` and joins them
+ * into a single string. It is an Effect that resolves when the stream completes.
+ *
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import { html } from "@typed/template"
+ * import { renderToHtmlString, HtmlRenderTemplate } from "@typed/template/Html"
+ * import { Fx } from "@typed/fx"
+ * import { Layer } from "effect"
+ *
+ * const program = Effect.gen(function* () {
+ *   const template = html`<div>
+ *     <h1>Hello</h1>
+ *     <p>World</p>
+ *   </div>`
+ *
+ *   // Render to single HTML string
+ *   const htmlString = yield* renderToHtmlString(template).pipe(
+ *     Fx.provide(HtmlRenderTemplate)
+ *   )
+ *
+ *   console.log(htmlString)
+ *   // "<div><h1>Hello</h1><p>World</p></div>"
+ * })
+ * ```
+ *
+ * @param fx - The `Fx` stream of `RenderEvent`s to render.
+ * @returns An `Effect` that resolves to the full HTML string.
+ * @since 1.0.0
+ * @category rendering
+ */
+export function renderToHtmlString(fx) {
+    return fx.pipe(renderToHtml, Fx.collectAll, Effect.map((events) => events.join("")));
+}
+/**
+ * A boolean service that indicates whether the current rendering context is static.
+ *
+ * If `true`, the HTML renderer will optimize for static output, potentially skipping
+ * dynamic placeholder generation or other interactive features not needed for static HTML.
+ */
+export const StaticRendering = ServiceMap.Reference("@typed/template/Html/StaticRendering", {
+    defaultValue: () => false,
+});
+/**
+ * A Layer that provides the `RenderTemplate` service implemented for HTML string generation.
+ *
+ * Using this layer enables templates to be rendered as HTML strings (e.g., for SSR)
+ * rather than DOM nodes. It sets the `RefSubject.CurrentComputedBehavior` to `"one"`, indicating
+ * a single-pass render approach typical for HTML generation.
+ *
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import { html } from "@typed/template"
+ * import { renderToHtmlString, HtmlRenderTemplate } from "@typed/template/Html"
+ * import { Fx } from "@typed/fx"
+ * import { Layer } from "effect"
+ *
+ * const program = Effect.gen(function* () {
+ *   const template = html`<div>Hello, ${"world"}!</div>`
+ *
+ *   const htmlString = yield* renderToHtmlString(template).pipe(
+ *     Fx.provide(HtmlRenderTemplate)
+ *   )
+ *
+ *   // Use for SSR
+ *   return htmlString
+ * })
+ * ```
+ *
+ * @since 1.0.0
+ * @category layers
+ */
+export const HtmlRenderTemplate = Layer.effect(RenderTemplate, Effect.gen(function* () {
+    const isStatic = yield* StaticRendering;
+    const entries = new WeakMap();
+    const getChunks = (templateStrings) => {
+        let entry = entries.get(templateStrings);
+        if (entry === undefined) {
+            const template = parse(templateStrings);
+            const chunks = templateToHtmlChunks(template);
+            entry = isStatic ? chunks : addTemplateHash(chunks, template);
+            entries.set(templateStrings, entry);
+        }
+        return entry;
+    };
+    return (template, values) => Fx.mergeOrdered(...getChunks(template).map((chunk, i, chunks) => renderChunk(chunk, values, isStatic, i === chunks.length - 1)));
+})).pipe(Layer.provideMerge(Layer.succeed(RefSubject.CurrentComputedBehavior, "one")));
+/**
+ * A variant of `HtmlRenderTemplate` that enables static rendering optimizations.
+ *
+ * This layer provides the `RenderTemplate` service for HTML generation but also
+ * sets `StaticRendering` to `true`, enabling optimizations for static content.
+ */
+export const StaticHtmlRenderTemplate = HtmlRenderTemplate.pipe(Layer.provideMerge(Layer.succeed(StaticRendering, true)));
+function renderChunk(chunk, values, isStatic, last) {
+    if (chunk._tag === "text") {
+        return Fx.succeed(HtmlRenderEvent(chunk.text, last));
+    }
+    if (chunk._tag === "part") {
+        return renderPart(chunk, values, isStatic, last);
+    }
+    return renderSparsePart(chunk, values, isStatic, last);
+}
+function renderPart(chunk, values, isStatic, last) {
+    const { node, render } = chunk;
+    const renderable = values[node.index];
+    // We don't render ref and event nodes via HTML
+    if (node._tag === "ref" || node._tag === "event")
+        return Fx.empty;
+    // Node need to handle all possible value types including arrays
+    if (node._tag === "node") {
+        return renderNode(renderable, node.index, isStatic, last);
+    }
+    // Properties is entirely recursive
+    if (node._tag === "properties") {
+        const setup = (props) => setupProperties(props, isStatic, last, render);
+        if (isObject(renderable))
+            return setup(renderable);
+        return Fx.switchMap(liftRenderableToFx(renderable, isStatic), (props) => {
+            if (isObject(props))
+                return setup(props);
+            return Fx.empty;
+        });
+    }
+    // Otherwise we're going to coerce to a string
+    return Fx.filterMap(liftRenderableToFx(renderable, isStatic), (value) => {
+        const s = render(value);
+        return s ? some(HtmlRenderEvent(s, last)) : none();
+    });
+}
+function setupProperties(renderable, isStatic, last, render) {
+    const entries = Object.entries(renderable);
+    const length = entries.length;
+    const lastIndex = length - 1;
+    // Order here doesn't matter ??
+    return Fx.mergeAll(...entries.map(([key, renderable], i) => {
+        return Fx.filterMap(liftRenderableToFx(renderable, isStatic), (value) => {
+            const s = render({ [key]: value });
+            return s ? some(HtmlRenderEvent(s, last && i === lastIndex)) : none();
+        });
+    }));
+}
+function renderNode(renderable, index, isStatic, last) {
+    let node = liftRenderableToFx(renderable, isStatic).pipe(Fx.map((x) => (isHtmlRenderEvent(x) ? x : HtmlRenderEvent(renderToString(x, ""), last))));
+    if (!isStatic) {
+        node = addNodePlaceholders(node, index);
+    }
+    return node.pipe(Fx.map((x) => HtmlRenderEvent(x.html, x.last && last)));
+}
+function addNodePlaceholders(fx, index) {
+    return fx.pipe(Fx.map((event) => (isHtmlRenderEvent(event) ? HtmlRenderEvent(event.html, false) : event)), Fx.delimit(HtmlRenderEvent(TYPED_NODE_START(index), false), HtmlRenderEvent(TYPED_NODE_END(index), true)));
+}
+function renderSparsePart(chunk, values, isStatic, last) {
+    const { node, render } = chunk;
+    return Fx.tuple(...node.nodes.map((node) => {
+        if (node._tag === "text")
+            return Fx.succeed(node.value);
+        return liftRenderableToFx(values[node.index], isStatic);
+    })).pipe(Fx.take(1), Fx.map((value) => HtmlRenderEvent(render(value), last)));
+}
+function liftRenderableToFx(renderable, isStatic) {
+    switch (typeof renderable) {
+        case "undefined":
+        case "function":
+        case "object": {
+            if (isNullish(renderable)) {
+                return isStatic ? Fx.empty : Fx.succeed(HtmlRenderEvent(TEXT_START, true));
+            }
+            else if (Array.isArray(renderable)) {
+                return Fx.mergeOrdered(...renderable.map((r) => liftRenderableToFx(r, isStatic)));
+            }
+            else if (Fx.isFx(renderable)) {
+                return takeOneIfNotRenderEvent(renderable);
+            }
+            else if (Effect.isEffect(renderable)) {
+                return Fx.unwrap(Effect.map(renderable, (r) => liftRenderableToFx(r, isStatic)));
+            }
+            else if (isHtmlRenderEvent(renderable)) {
+                return Fx.succeed(renderable);
+            }
+            else
+                return Fx.take(Fx.struct(mapRecord(renderable, (_) => liftRenderableToFx(_, isStatic))), 1);
+        }
+        default:
+            return Fx.succeed(renderable);
+    }
+}