@typed/template 0.2.0 → 0.3.0

package/dist/esm/internal/render.js

@@ -1,45 +1,387 @@
 import * as Fx from "@typed/fx/Fx";
-import * as Subject from "@typed/fx/Subject";
 import { TypeId } from "@typed/fx/TypeId";
 import { persistent } from "@typed/wire";
 import { Effect } from "effect";
+import * as Context from "effect/Context";
 import { replace } from "effect/ReadonlyArray";
+import { Scope } from "effect/Scope";
 import { isDirective } from "../Directive.js";
 import * as ElementRef from "../ElementRef.js";
+import * as ElementSource from "../ElementSource.js";
 import * as EventHandler from "../EventHandler.js";
 import { DomRenderEvent } from "../RenderEvent.js";
-import { TemplateInstance } from "../TemplateInstance.js";
 import { makeRenderNodePart } from "./browser.js";
+import { makeEventSource } from "./EventSource.js";
 import { HydrateContext } from "./HydrateContext.js";
-import { indexRefCounter } from "./indexRefCounter.js";
+import { indexRefCounter2 } from "./indexRefCounter.js";
 import { parse } from "./parser.js";
-import { AttributePartImpl, BooleanPartImpl, ClassNamePartImpl, CommentPartImpl, DataPartImpl, EventPartImpl, PropertyPartImpl, RefPartImpl, SparseAttributePartImpl, SparseClassNamePartImpl, SparseCommentPartImpl, StaticTextImpl, TextPartImpl } from "./parts.js";
-import { findPath } from "./utils.js";
+import { AttributePartImpl, BooleanPartImpl, ClassNamePartImpl, CommentPartImpl, DataPartImpl, EventPartImpl, PropertiesPartImpl, PropertyPartImpl, RefPartImpl, SparseAttributePartImpl, SparseClassNamePartImpl, SparseCommentPartImpl, StaticTextImpl, TextPartImpl } from "./parts.js";
+import { findHoleComment, findPath } from "./utils.js";
+const RenderPartMap = {
+    "attr": (templatePart, node, ctx) => {
+        const { document, refCounter, renderContext, values } = ctx;
+        const element = node;
+        const attr = createAttribute(document, element, templatePart.name);
+        const renderable = values[templatePart.index];
+        let isSet = true;
+        const setValue = (value) => {
+            if (isNullOrUndefined(value)) {
+                element.removeAttribute(templatePart.name);
+                isSet = false;
+            }
+            else {
+                attr.value = String(value);
+                if (isSet === false) {
+                    element.setAttributeNode(attr);
+                    isSet = true;
+                }
+            }
+        };
+        return matchSettablePart(renderable, setValue, () => AttributePartImpl.browser(templatePart.index, element, templatePart.name, renderContext), (f) => Effect.zipRight(renderContext.queue.add(element, f), refCounter.release(templatePart.index)), () => ctx.expected++);
+    },
+    "boolean-part": (templatePart, node, ctx) => {
+        const { refCounter, renderContext, values } = ctx;
+        const element = node;
+        const renderable = values[templatePart.index];
+        const setValue = (value) => {
+            element.toggleAttribute(templatePart.name, isNullOrUndefined(value) ? false : Boolean(value));
+        };
+        return matchSettablePart(renderable, setValue, () => BooleanPartImpl.browser(templatePart.index, element, templatePart.name, renderContext), (f) => Effect.zipRight(renderContext.queue.add(element, f), refCounter.release(templatePart.index)), () => ctx.expected++);
+    },
+    "className-part": (templatePart, node, ctx) => {
+        const { refCounter, renderContext, values } = ctx;
+        const element = node;
+        const renderable = values[templatePart.index];
+        let classNames = new Set();
+        const setValue = (value) => {
+            if (isNullOrUndefined(value)) {
+                element.classList.remove(...classNames);
+                classNames.clear();
+            }
+            else {
+                const newClassNames = new Set(Array.isArray(value) ? value : [String(value)]);
+                const { added, removed } = diffClassNames(classNames, newClassNames);
+                if (removed.length > 0) {
+                    element.classList.remove(...removed);
+                }
+                if (added.length > 0)
+                    element.classList.add(...added);
+                classNames = newClassNames;
+            }
+        };
+        return matchSettablePart(renderable, setValue, () => ClassNamePartImpl.browser(templatePart.index, element, renderContext), (f) => Effect.zipRight(renderContext.queue.add(element, f), refCounter.release(templatePart.index)), () => ctx.expected++);
+    },
+    "comment-part": (templatePart, node, ctx) => {
+        const { refCounter, renderContext, values } = ctx;
+        const comment = findHoleComment(node, templatePart.index);
+        const renderable = values[templatePart.index];
+        const setValue = (value) => {
+            comment.textContent = isNullOrUndefined(value) ? "" : String(value);
+        };
+        return matchSettablePart(renderable, setValue, () => CommentPartImpl.browser(templatePart.index, comment, renderContext), (f) => Effect.zipRight(renderContext.queue.add(comment, f), refCounter.release(templatePart.index)), () => ctx.expected++);
+    },
+    "data": (templatePart, node, ctx) => {
+        const element = node;
+        const renderable = ctx.values[templatePart.index];
+        const previousKeys = new Set(Object.keys(element.dataset));
+        const setValue = (value) => {
+            if (isNullOrUndefined(value)) {
+                for (const key of previousKeys) {
+                    delete element.dataset[key];
+                }
+                previousKeys.clear();
+            }
+            else {
+                for (const key of previousKeys) {
+                    if (!(key in value)) {
+                        delete element.dataset[key];
+                        previousKeys.delete(key);
+                    }
+                }
+                for (const key of Object.keys(value)) {
+                    if (!previousKeys.has(key)) {
+                        previousKeys.add(key);
+                    }
+                    element.dataset[key] = value[key] || "";
+                }
+            }
+        };
+        return matchSettablePart(renderable, setValue, () => DataPartImpl.browser(templatePart.index, element, ctx.renderContext), (f) => Effect.zipRight(ctx.renderContext.queue.add(element, f), ctx.refCounter.release(templatePart.index)), () => ctx.expected++);
+    },
+    "event": (templatePart, node, ctx) => {
+        const element = node;
+        const renderable = ctx.values[templatePart.index];
+        const handler = getEventHandler(renderable, ctx.context, ctx.onCause);
+        if (handler) {
+            ctx.eventSource.addEventListener(element, templatePart.name, handler);
+        }
+        return null;
+    },
+    "node": (templatePart, node, ctx) => {
+        const part = makeRenderNodePart(templatePart.index, node, ctx.renderContext, ctx.document, false);
+        ctx.expected++;
+        return handlePart(ctx.values[templatePart.index], (value) => Effect.zipRight(part.update(value), ctx.refCounter.release(templatePart.index)));
+    },
+    "property": (templatePart, node, ctx) => {
+        const element = node;
+        const renderable = ctx.values[templatePart.index];
+        const setValue = (value) => {
+            if (isNullOrUndefined(value)) {
+                delete element[templatePart.name];
+            }
+            else {
+                ;
+                element[templatePart.name] = value;
+            }
+        };
+        return matchSettablePart(renderable, setValue, () => PropertyPartImpl.browser(templatePart.index, element, templatePart.name, ctx.renderContext), (f) => Effect.zipRight(ctx.renderContext.queue.add(element, f), ctx.refCounter.release(templatePart.index)), () => ctx.expected++);
+    },
+    "properties": (templatePart, node, ctx) => {
+        const renderable = ctx.values[templatePart.index];
+        if (isNullOrUndefined(renderable))
+            return null;
+        else if (Fx.isFx(renderable) || Effect.isEffect(renderable)) {
+            throw new Error(`Properties Part must utilize an Record of renderable values.`);
+        }
+        else if (typeof renderable === "object" && !Array.isArray(renderable)) {
+            const element = node;
+            const toggleBoolean = (key, value) => {
+                element.toggleAttribute(key, isNullOrUndefined(value) ? false : Boolean(value));
+            };
+            const setAttribute = (key, value) => {
+                if (isNullOrUndefined(value)) {
+                    element.removeAttribute(key);
+                }
+                else {
+                    element.setAttribute(key, String(value));
+                }
+            };
+            const setProperty = (key, value) => {
+                if (isNullOrUndefined(value)) {
+                    delete element[key];
+                }
+                else {
+                    ;
+                    element[key] = value;
+                }
+            };
+            const effects = [];
+            // 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;
+            loop: for (const [key, value] of Object.entries(renderable)) {
+                const index = ++i;
+                switch (key[0]) {
+                    case "?": {
+                        const name = key.slice(1);
+                        const eff = matchSettablePart(value, (value) => toggleBoolean(name, value), () => BooleanPartImpl.browser(index, element, name, ctx.renderContext), (f) => Effect.zipRight(ctx.renderContext.queue.add(element, f), ctx.refCounter.release(index)), () => ctx.expected++);
+                        if (eff !== null) {
+                            effects.push(eff);
+                        }
+                        continue loop;
+                    }
+                    case ".": {
+                        const name = key.slice(1);
+                        const eff = matchSettablePart(value, (value) => setProperty(name, value), () => PropertyPartImpl.browser(index, element, name, ctx.renderContext), (f) => Effect.zipRight(ctx.renderContext.queue.add(element, f), ctx.refCounter.release(index)), () => ctx.expected++);
+                        if (eff !== null) {
+                            effects.push(eff);
+                        }
+                        continue loop;
+                    }
+                    case "@": {
+                        const name = key.slice(1);
+                        const handler = getEventHandler(value, ctx.context, ctx.onCause);
+                        if (handler) {
+                            ctx.eventSource.addEventListener(element, name, handler);
+                        }
+                        continue loop;
+                    }
+                    case "o": {
+                        if (key[1] === "n") {
+                            const name = key.slice(2);
+                            const handler = getEventHandler(value, ctx.context, ctx.onCause);
+                            if (handler) {
+                                ctx.eventSource.addEventListener(element, name, handler);
+                            }
+                        }
+                        continue loop;
+                    }
+                }
+                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);
+                }
+            }
+            return effects;
+        }
+        else {
+            return null;
+        }
+    },
+    "ref": (templatePart, node, ctx) => {
+        const element = node;
+        const renderable = ctx.values[templatePart.index];
+        if (isDirective(renderable)) {
+            return renderable(new RefPartImpl(ElementSource.fromElement(element), templatePart.index));
+        }
+        else if (ElementRef.isElementRef(renderable)) {
+            return ElementRef.set(renderable, element);
+        }
+        return null;
+    },
+    "sparse-attr": (templatePart, node, ctx) => {
+        const values = Array.from({ length: templatePart.nodes.length }, () => "");
+        const element = node;
+        const attr = createAttribute(ctx.document, element, templatePart.name);
+        const setValue = (value, index) => Effect.suspend(() => {
+            values[index] = value || "";
+            return ctx.renderContext.queue.add(element, () => attr.value = values.join(""));
+        });
+        const effects = [];
+        for (let i = 0; i < templatePart.nodes.length; ++i) {
+            const node = templatePart.nodes[i];
+            if (node._tag === "text") {
+                values[i] = node.value;
+            }
+            else {
+                const renderable = ctx.values[node.index];
+                const index = i;
+                const effect = matchSettablePart(renderable, (value) => setValue(value, index), () => new AttributePartImpl(templatePart.name, node.index, ({ value }) => setValue(value, index), null), (f) => Effect.zipRight(ctx.renderContext.queue.add(element, f), ctx.refCounter.release(node.index)), () => ctx.expected++);
+                if (effect !== null) {
+                    effects.push(effect);
+                }
+            }
+        }
+        return effects;
+    },
+    "sparse-class-name": (templatePart, node, ctx) => {
+        const element = node;
+        const effects = templatePart.nodes.flatMap((node) => {
+            if (node._tag === "text") {
+                const split = splitClassNames(node.value);
+                if (split.length > 0)
+                    element.classList.add(...split);
+                return [];
+            }
+            else {
+                const eff = RenderPartMap[node._tag](node, element, ctx);
+                if (eff === null)
+                    return [];
+                return Array.isArray(eff) ? eff : [eff];
+            }
+        });
+        return effects;
+    },
+    "sparse-comment": (templatePart, node, ctx) => {
+        const values = Array.from({ length: templatePart.nodes.length }, () => "");
+        const comment = node;
+        const setValue = (value, index) => Effect.suspend(() => {
+            values[index] = value || "";
+            return ctx.renderContext.queue.add(comment, () => comment.textContent = values.join(""));
+        });
+        const effects = [];
+        for (let i = 0; i < templatePart.nodes.length; ++i) {
+            const node = templatePart.nodes[i];
+            if (node._tag === "text") {
+                values[i] = node.value;
+            }
+            else {
+                const renderable = ctx.values[node.index];
+                const index = i;
+                const effect = matchSettablePart(renderable, (value) => setValue(value, index), () => new CommentPartImpl(node.index, ({ value }) => setValue(value, index), null), (f) => Effect.zipRight(ctx.renderContext.queue.add(comment, f), ctx.refCounter.release(node.index)), () => ctx.expected++);
+                if (effect !== null) {
+                    effects.push(effect);
+                }
+            }
+        }
+        return effects;
+    },
+    "text-part": (templatePart, node, ctx) => {
+        const part = TextPartImpl.browser(ctx.document, templatePart.index, node, ctx.renderContext);
+        ctx.expected++;
+        return handlePart(ctx.values[templatePart.index], (value) => Effect.zipRight(part.update(value), ctx.refCounter.release(templatePart.index)));
+    }
+};
+const SPACE_REGEXP = /\s+/g;
+function splitClassNames(value) {
+    return value.split(SPACE_REGEXP).flatMap((a) => {
+        const trimmed = a.trim();
+        return trimmed.length > 0 ? [trimmed] : [];
+    });
+}
+function isNullOrUndefined(value) {
+    return value === null || value === undefined;
+}
+function diffClassNames(oldClassNames, newClassNames) {
+    const added = [];
+    const removed = [];
+    for (const className of oldClassNames) {
+        if (!newClassNames.has(className)) {
+            removed.push(className);
+        }
+    }
+    for (const className of newClassNames) {
+        if (!oldClassNames.has(className) && className.trim()) {
+            added.push(className);
+        }
+    }
+    return { added, removed };
+}
 /**
  * Here for "standard" browser rendering, a TemplateInstance is effectively a live
  * view into the contents rendered by the Template.
  */
-export const renderTemplate = (document, ctx) => (templateStrings, values, providedRef) => Effect.gen(function* (_) {
-    const elementRef = providedRef || (yield* _(ElementRef.make()));
-    const events = Fx.map(elementRef, DomRenderEvent);
-    const errors = Subject.make();
-    const entry = getBrowserEntry(document, ctx, templateStrings);
-    const content = document.importNode(entry.content, true); // Clone our template
-    const parts = yield* _(buildParts(document, ctx, entry.template, content, elementRef, errors.onFailure, false)); // Build runtime-variant of parts with our content.
-    // If there are parts we need to render them before constructing our Wire
-    if (parts.length > 0) {
-        const refCounter = yield* _(indexRefCounter(parts.length));
-        // Do the work
-        yield* _(renderValues(values, parts, refCounter, errors.onFailure));
-        // Wait for initial work to be completed
-        yield* _(refCounter.wait);
+export const renderTemplate = (document, renderContext) => (templateStrings, values) => {
+    const entry = getBrowserEntry(document, renderContext, templateStrings);
+    if (values.length === 0) {
+        return Fx.sync(() => DomRenderEvent(persistent(document.importNode(entry.content, true))));
     }
-    // Set the element when it is ready
-    yield* _(ElementRef.set(elementRef, persistent(content)));
-    // Return the Template instance
-    return TemplateInstance(Fx.merge([events, errors]), elementRef);
-});
-export function renderValues(values, parts, refCounter, onCause, makeHydrateContext) {
+    return Fx.make((sink) => {
+        return Effect.gen(function* (_) {
+            const content = document.importNode(entry.content, true);
+            const context = yield* _(Effect.context());
+            const refCounter = yield* _(indexRefCounter2());
+            const ctx = {
+                context,
+                document,
+                eventSource: makeEventSource(),
+                expected: 0,
+                refCounter,
+                renderContext,
+                onCause: sink.onFailure,
+                values
+            };
+            // Connect our interpolated values to our template parts
+            const effects = [];
+            for (const [part, path] of entry.template.parts) {
+                const eff = RenderPartMap[part._tag](part, findPath(content, path), ctx);
+                if (eff !== null) {
+                    effects.push(...(Array.isArray(eff) ? eff : [eff]));
+                }
+            }
+            // Fork any effects necessary
+            if (effects.length > 0) {
+                yield* _(Effect.forkAll(effects));
+            }
+            // If there's anything to wait on and it's not already done, wait for an initial value
+            // for all asynchronous sources.
+            if (ctx.expected > 0 && (yield* _(refCounter.expect(ctx.expected)))) {
+                yield* _(refCounter.wait);
+            }
+            // Create a persistent wire from our content
+            const wire = persistent(content);
+            // Set the element when it is ready
+            yield* _(ctx.eventSource.setup(wire, Context.get(context, Scope)));
+            // Emity 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);
+        });
+    });
+};
+export function renderValues(values, parts, refCounter, ctx, makeHydrateContext) {
     return Effect.all(parts.map((part, index) => {
         switch (part._tag) {
             case "sparse/attribute":
@@ -48,7 +390,7 @@ export function renderValues(values, parts, refCounter, onCause, makeHydrateCont
                 return renderSparsePart(values, part, refCounter);
             }
             default:
-                return renderPart(values, part, refCounter, onCause, makeHydrateContext ? () => makeHydrateContext(index) : undefined);
+                return renderPart(values, part, refCounter, ctx, makeHydrateContext ? () => makeHydrateContext(index) : undefined);
         }
     }));
 }
@@ -56,37 +398,47 @@ export function renderSparsePart(values, part, refCounter) {
     const indexes = part.parts.flatMap((p) => p._tag === "static/text" ? [] : [p.index]);
     return Effect.forkScoped(Fx.observe(unwrapSparsePartRenderables(part.parts.map((p) => p._tag === "static/text" ? Fx.succeed(p.value) : values[p.index]), part), (value) => Effect.tap(part.update(value), () => Effect.forEach(indexes, (a) => refCounter.release(a)))));
 }
-export function renderPart(values, part, refCounter, onCause, hydrateCtx) {
+export function renderPart(values, part, refCounter, ctx, hydrateCtx) {
     const partIndex = part.index;
     const renderable = values[partIndex];
+    if (renderable === null || renderable === undefined)
+        return refCounter.release(partIndex);
     if (isDirective(renderable)) {
-        return renderable(part).pipe(Effect.tap(() => refCounter.release(partIndex)), Effect.forkScoped);
+        return renderable(part).pipe(Effect.flatMap(() => refCounter.release(partIndex)), Effect.forkScoped);
     }
     else if (part._tag === "ref") {
         return refCounter.release(partIndex);
     }
     else if (part._tag === "event") {
-        return Effect.tap(part.update(getEventHandler(values[partIndex], onCause)), () => refCounter.release(partIndex));
+        const handler = getEventHandler(renderable, ctx, part.onCause);
+        if (handler) {
+            part.addEventListener(handler);
+        }
+        return refCounter.release(partIndex);
     }
     else if (part._tag === "node" && hydrateCtx) {
-        if (renderable === null || renderable === undefined)
-            return refCounter.release(partIndex);
-        return handlePart(values[partIndex], (value) => Effect.tap(part.update(value), () => refCounter.release(partIndex))).pipe(HydrateContext.provide(hydrateCtx()), Effect.forkScoped);
+        return handlePart(renderable, (value) => Effect.flatMap(part.update(value), () => refCounter.release(partIndex))).pipe(HydrateContext.provide(hydrateCtx()), Effect.forkScoped);
+    }
+    else if (part._tag === "properties") {
+        return handlePropertiesPart(renderable, part, refCounter);
     }
     else {
-        const renderable = values[partIndex];
-        if (renderable === null || renderable === undefined)
-            return refCounter.release(partIndex);
-        return handlePart(values[partIndex], (value) => Effect.tap(part.update(value), () => refCounter.release(partIndex)));
+        return handlePart(renderable, (value) => Effect.flatMap(part.update(value), () => refCounter.release(partIndex)));
     }
 }
-function getEventHandler(renderable, onCause) {
+function handlePropertiesPart(renderable, part, refCounter) {
+    if (renderable && typeof renderable === "object") {
+        return handlePart(Fx.struct(Object.fromEntries(Object.entries(renderable).map(([k, v]) => [k, unwrapRenderable(v)]))), (value) => Effect.tap(part.update(value), () => refCounter.release(part.index)));
+    }
+    return Effect.succeed(void 0);
+}
+function getEventHandler(renderable, ctx, onCause) {
     if (renderable && typeof renderable === "object") {
         if (EventHandler.EventHandlerTypeId in renderable) {
-            return EventHandler.make((ev) => Effect.catchAllCause(renderable.handler(ev), onCause), renderable.options);
+            return EventHandler.make((ev) => Effect.provide(Effect.catchAllCause(renderable.handler(ev), onCause), ctx), renderable.options);
         }
         else if (Effect.EffectTypeId in renderable) {
-            return EventHandler.make(() => Effect.catchAllCause(renderable, onCause));
+            return EventHandler.make(() => Effect.provide(Effect.catchAllCause(renderable, onCause), ctx));
         }
     }
     return null;
@@ -100,7 +452,7 @@ function handlePart(renderable, update) {
             else if (Array.isArray(renderable)) {
                 return renderable.length === 0
                     ? update(null)
-                    : Effect.forkScoped(Fx.observe(Fx.combine(renderable.map(unwrapRenderable)), update));
+                    : Effect.forkScoped(Fx.observe(Fx.tuple(renderable.map(unwrapRenderable)), update));
             }
             else if (TypeId in renderable) {
                 return Effect.forkScoped(Fx.observe(renderable, update));
@@ -122,7 +474,7 @@ function unwrapRenderable(renderable) {
             if (renderable === null || renderable === undefined)
                 return Fx.succeed(null);
             else if (Array.isArray(renderable)) {
-                return renderable.length === 0 ? Fx.succeed(null) : Fx.combine(renderable.map(unwrapRenderable));
+                return renderable.length === 0 ? Fx.succeed(null) : Fx.tuple(renderable.map(unwrapRenderable));
             }
             else if (TypeId in renderable) {
                 return renderable;
@@ -138,7 +490,7 @@ function unwrapRenderable(renderable) {
     }
 }
 function unwrapSparsePartRenderables(renderables, part) {
-    return Fx.combine(
+    return Fx.tuple(
     // @ts-ignore type too deep
     renderables.map((renderable, i) => {
         const p = part.parts[i];
@@ -196,29 +548,31 @@ export function getBrowserEntry(document, ctx, templateStrings) {
         return cached;
     }
 }
-export function buildParts(document, ctx, template, content, ref, onCause, isHydrating) {
-    return Effect.all(template.parts.map(([part, path]) => buildPartWithNode(document, ctx, part, findPath(content, path), ref, onCause, isHydrating)));
+export function buildParts(document, ctx, template, content, eventSource, onCause, isHydrating) {
+    return template.parts.map(([part, path]) => buildPartWithNode(document, ctx, part, findPath(content, path), eventSource, onCause, isHydrating));
 }
-function buildPartWithNode(document, ctx, part, node, ref, onCause, isHydrating) {
+function buildPartWithNode(document, ctx, part, node, eventSource, onCause, isHydrating) {
     switch (part._tag) {
         case "attr":
-            return Effect.succeed(AttributePartImpl.browser(part.index, node, part.name, ctx));
+            return AttributePartImpl.browser(part.index, node, part.name, ctx);
         case "boolean-part":
-            return Effect.succeed(BooleanPartImpl.browser(part.index, node, part.name, ctx));
+            return BooleanPartImpl.browser(part.index, node, part.name, ctx);
         case "className-part":
-            return Effect.succeed(ClassNamePartImpl.browser(part.index, node, ctx));
+            return ClassNamePartImpl.browser(part.index, node, ctx);
         case "comment-part":
-            return Effect.succeed(CommentPartImpl.browser(part.index, node, ctx));
+            return CommentPartImpl.browser(part.index, node, ctx);
         case "data":
-            return Effect.succeed(DataPartImpl.browser(part.index, node, ctx));
+            return DataPartImpl.browser(part.index, node, ctx);
         case "event":
-            return EventPartImpl.browser(part.name, part.index, ref, node, onCause);
+            return new EventPartImpl(part.name, part.index, ElementSource.fromElement(node), onCause, (handler) => eventSource.addEventListener(node, part.name, handler));
         case "node":
-            return Effect.succeed(makeRenderNodePart(part.index, node, ctx, document, isHydrating));
+            return makeRenderNodePart(part.index, node, ctx, document, isHydrating);
         case "property":
-            return Effect.succeed(PropertyPartImpl.browser(part.index, node, part.name, ctx));
+            return PropertyPartImpl.browser(part.index, node, part.name, ctx);
+        case "properties":
+            return PropertiesPartImpl.browser(part.index, node, ctx);
         case "ref":
-            return Effect.succeed(new RefPartImpl(ref.query(node), part.index));
+            return new RefPartImpl(ElementSource.fromElement(node), part.index);
         case "sparse-attr": {
             const parts = Array(part.nodes.length);
             const sparse = SparseAttributePartImpl.browser(part.name, parts, node, ctx);
@@ -232,7 +586,7 @@ function buildPartWithNode(document, ctx, part, node, ref, onCause, isHydrating)
                     parts.push(new AttributePartImpl(node.name, node.index, ({ value }) => sparse.update(replace(sparse.value, i, value || "")), sparse.value[i]));
                 }
             }
-            return Effect.succeed(sparse);
+            return sparse;
         }
         case "sparse-class-name": {
             const parts = [];
@@ -249,7 +603,7 @@ function buildPartWithNode(document, ctx, part, node, ref, onCause, isHydrating)
                     parts.push(new ClassNamePartImpl(node.index, ({ value }) => sparse.update(replace(sparse.value, i, value || "")), []));
                 }
             }
-            return Effect.succeed(sparse);
+            return sparse;
         }
         case "sparse-comment": {
             const parts = Array(part.nodes.length);
@@ -264,10 +618,10 @@ function buildPartWithNode(document, ctx, part, node, ref, onCause, isHydrating)
                     parts.push(new CommentPartImpl(node.index, ({ value }) => sparse.update(replace(sparse.value, i, value || "")), sparse.value[i]));
                 }
             }
-            return Effect.succeed(sparse);
+            return sparse;
         }
         case "text-part":
-            return Effect.succeed(TextPartImpl.browser(document, part.index, node, ctx));
+            return TextPartImpl.browser(document, part.index, node, ctx);
     }
 }
 export function buildTemplate(document, { nodes }) {
@@ -293,6 +647,33 @@ function buildNode(document, node, isSvgContext) {
         case "comment-part":
         case "node":
             return document.createComment(`hole${node.index}`);
+        case "doctype":
+            return document.implementation.createDocumentType(node.name, docTypeNameToPublicId(node.name), docTypeNameToSystemId(node.name));
+    }
+}
+function docTypeNameToPublicId(name) {
+    switch (name) {
+        case "html":
+            return "-//W3C//DTD HTML 4.01//EN";
+        case "svg":
+            return "-//W3C//DTD SVG 1.1//EN";
+        case "math":
+            return "-//W3C//DTD MathML 2.0//EN";
+        default:
+            return "";
+    }
+}
+function docTypeNameToSystemId(name) {
+    switch (name) {
+        // HTML5
+        case "html":
+            return "http://www.w3.org/TR/html4/strict.dtd";
+        case "svg":
+            return "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";
+        case "math":
+            return "http://www.w3.org/Math/DTD/mathml2/mathml2.dtd";
+        default:
+            return "";
     }
 }
 const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
@@ -326,4 +707,41 @@ function buildTextChild(document, node) {
     }
     return document.createComment(`hole${node.index}`);
 }
+function createAttribute(document, element, name) {
+    return element.getAttributeNode(name) ?? document.createAttribute(name);
+}
+function matchSettablePart(renderable, setValue, makePart, schedule, expect) {
+    return matchRenderable(renderable, {
+        Fx: (fx) => {
+            expect();
+            return Fx.observe(fx, (a) => schedule(() => setValue(a)));
+        },
+        Effect: (effect) => {
+            expect();
+            return Effect.flatMap(effect, (a) => schedule(() => setValue(a)));
+        },
+        Directive: (directive) => {
+            expect();
+            return directive(makePart());
+        },
+        Otherwise: (otherwise) => {
+            setValue(otherwise);
+            return null;
+        }
+    });
+}
+function matchRenderable(renderable, matches) {
+    if (Fx.isFx(renderable)) {
+        return matches.Fx(renderable);
+    }
+    else if (Effect.isEffect(renderable)) {
+        return matches.Effect(renderable);
+    }
+    else if (isDirective(renderable)) {
+        return matches.Directive(renderable);
+    }
+    else {
+        return matches.Otherwise(renderable);
+    }
+}
 //# sourceMappingURL=render.js.map