@typed/template 0.2.0 → 0.3.0

package/dist/cjs/internal/render.js

@@ -12,17 +12,19 @@ exports.renderSparsePart = renderSparsePart;
 exports.renderTemplate = void 0;
 exports.renderValues = renderValues;
 var Fx = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("@typed/fx/Fx"));
-var Subject = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("@typed/fx/Subject"));
 var _TypeId = /*#__PURE__*/require("@typed/fx/TypeId");
 var _wire = /*#__PURE__*/require("@typed/wire");
 var _effect = /*#__PURE__*/require("effect");
+var Context = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("effect/Context"));
 var _ReadonlyArray = /*#__PURE__*/require("effect/ReadonlyArray");
+var _Scope = /*#__PURE__*/require("effect/Scope");
 var _Directive = /*#__PURE__*/require("../Directive.js");
 var ElementRef = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("../ElementRef.js"));
+var ElementSource = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("../ElementSource.js"));
 var EventHandler = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("../EventHandler.js"));
 var _RenderEvent = /*#__PURE__*/require("../RenderEvent.js");
-var _TemplateInstance = /*#__PURE__*/require("../TemplateInstance.js");
 var _browser = /*#__PURE__*/require("./browser.js");
+var _EventSource = /*#__PURE__*/require("./EventSource.js");
 var _HydrateContext = /*#__PURE__*/require("./HydrateContext.js");
 var _indexRefCounter = /*#__PURE__*/require("./indexRefCounter.js");
 var _parser = /*#__PURE__*/require("./parser.js");
@@ -30,32 +32,390 @@ var _parts = /*#__PURE__*/require("./parts.js");
 var _utils = /*#__PURE__*/require("./utils.js");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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, () => _parts.AttributePartImpl.browser(templatePart.index, element, templatePart.name, renderContext), f => _effect.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, () => _parts.BooleanPartImpl.browser(templatePart.index, element, templatePart.name, renderContext), f => _effect.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, () => _parts.ClassNamePartImpl.browser(templatePart.index, element, renderContext), f => _effect.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 = (0, _utils.findHoleComment)(node, templatePart.index);
+    const renderable = values[templatePart.index];
+    const setValue = value => {
+      comment.textContent = isNullOrUndefined(value) ? "" : String(value);
+    };
+    return matchSettablePart(renderable, setValue, () => _parts.CommentPartImpl.browser(templatePart.index, comment, renderContext), f => _effect.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, () => _parts.DataPartImpl.browser(templatePart.index, element, ctx.renderContext), f => _effect.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 = (0, _browser.makeRenderNodePart)(templatePart.index, node, ctx.renderContext, ctx.document, false);
+    ctx.expected++;
+    return handlePart(ctx.values[templatePart.index], value => _effect.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, () => _parts.PropertyPartImpl.browser(templatePart.index, element, templatePart.name, ctx.renderContext), f => _effect.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.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), () => _parts.BooleanPartImpl.browser(index, element, name, ctx.renderContext), f => _effect.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), () => _parts.PropertyPartImpl.browser(index, element, name, ctx.renderContext), f => _effect.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), () => _parts.AttributePartImpl.browser(index, element, key, ctx.renderContext), f => _effect.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 ((0, _Directive.isDirective)(renderable)) {
+      return renderable(new _parts.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.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 _parts.AttributePartImpl(templatePart.name, node.index, ({
+          value
+        }) => setValue(value, index), null), f => _effect.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.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 _parts.CommentPartImpl(node.index, ({
+          value
+        }) => setValue(value, index), null), f => _effect.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 = _parts.TextPartImpl.browser(ctx.document, templatePart.index, node, ctx.renderContext);
+    ctx.expected++;
+    return handlePart(ctx.values[templatePart.index], value => _effect.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.
  */
-const renderTemplate = (document, ctx) => (templateStrings, values, providedRef) => _effect.Effect.gen(function* (_) {
-  const elementRef = providedRef || (yield* _(ElementRef.make()));
-  const events = Fx.map(elementRef, _RenderEvent.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* _((0, _indexRefCounter.indexRefCounter)(parts.length));
-    // Do the work
-    yield* _(renderValues(values, parts, refCounter, errors.onFailure));
-    // Wait for initial work to be completed
-    yield* _(refCounter.wait);
+const renderTemplate = (document, renderContext) => (templateStrings, values) => {
+  const entry = getBrowserEntry(document, renderContext, templateStrings);
+  if (values.length === 0) {
+    return Fx.sync(() => (0, _RenderEvent.DomRenderEvent)((0, _wire.persistent)(document.importNode(entry.content, true))));
   }
-  // Set the element when it is ready
-  yield* _(ElementRef.set(elementRef, (0, _wire.persistent)(content)));
-  // Return the Template instance
-  return (0, _TemplateInstance.TemplateInstance)(Fx.merge([events, errors]), elementRef);
-});
+  return Fx.make(sink => {
+    return _effect.Effect.gen(function* (_) {
+      const content = document.importNode(entry.content, true);
+      const context = yield* _(_effect.Effect.context());
+      const refCounter = yield* _((0, _indexRefCounter.indexRefCounter2)());
+      const ctx = {
+        context,
+        document,
+        eventSource: (0, _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, (0, _utils.findPath)(content, path), ctx);
+        if (eff !== null) {
+          effects.push(...(Array.isArray(eff) ? eff : [eff]));
+        }
+      }
+      // Fork any effects necessary
+      if (effects.length > 0) {
+        yield* _(_effect.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 = (0, _wire.persistent)(content);
+      // Set the element when it is ready
+      yield* _(ctx.eventSource.setup(wire, Context.get(context, _Scope.Scope)));
+      // Emity our DomRenderEvent
+      yield* _(sink.onSuccess((0, _RenderEvent.DomRenderEvent)(wire)));
+      // Ensure our templates last forever in the DOM environment
+      // so event listeners are kept attached to the current Scope.
+      yield* _(_effect.Effect.never);
+    });
+  });
+};
 exports.renderTemplate = renderTemplate;
-function renderValues(values, parts, refCounter, onCause, makeHydrateContext) {
+function renderValues(values, parts, refCounter, ctx, makeHydrateContext) {
   return _effect.Effect.all(parts.map((part, index) => {
     switch (part._tag) {
       case "sparse/attribute":
@@ -65,7 +425,7 @@ function renderValues(values, parts, refCounter, onCause, makeHydrateContext) {
           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);
     }
   }));
 }
@@ -73,30 +433,40 @@ function renderSparsePart(values, part, refCounter) {
   const indexes = part.parts.flatMap(p => p._tag === "static/text" ? [] : [p.index]);
   return _effect.Effect.forkScoped(Fx.observe(unwrapSparsePartRenderables(part.parts.map(p => p._tag === "static/text" ? Fx.succeed(p.value) : values[p.index]), part), value => _effect.Effect.tap(part.update(value), () => _effect.Effect.forEach(indexes, a => refCounter.release(a)))));
 }
-function renderPart(values, part, refCounter, onCause, hydrateCtx) {
+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 ((0, _Directive.isDirective)(renderable)) {
-    return renderable(part).pipe(_effect.Effect.tap(() => refCounter.release(partIndex)), _effect.Effect.forkScoped);
+    return renderable(part).pipe(_effect.Effect.flatMap(() => refCounter.release(partIndex)), _effect.Effect.forkScoped);
   } else if (part._tag === "ref") {
     return refCounter.release(partIndex);
   } else if (part._tag === "event") {
-    return _effect.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.Effect.tap(part.update(value), () => refCounter.release(partIndex))).pipe(_HydrateContext.HydrateContext.provide(hydrateCtx()), _effect.Effect.forkScoped);
+    return handlePart(renderable, value => _effect.Effect.flatMap(part.update(value), () => refCounter.release(partIndex))).pipe(_HydrateContext.HydrateContext.provide(hydrateCtx()), _effect.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.Effect.tap(part.update(value), () => refCounter.release(partIndex)));
+    return handlePart(renderable, value => _effect.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.Effect.tap(part.update(value), () => refCounter.release(part.index)));
+  }
+  return _effect.Effect.succeed(void 0);
+}
+function getEventHandler(renderable, ctx, onCause) {
   if (renderable && typeof renderable === "object") {
     if (EventHandler.EventHandlerTypeId in renderable) {
-      return EventHandler.make(ev => _effect.Effect.catchAllCause(renderable.handler(ev), onCause), renderable.options);
+      return EventHandler.make(ev => _effect.Effect.provide(_effect.Effect.catchAllCause(renderable.handler(ev), onCause), ctx), renderable.options);
     } else if (_effect.Effect.EffectTypeId in renderable) {
-      return EventHandler.make(() => _effect.Effect.catchAllCause(renderable, onCause));
+      return EventHandler.make(() => _effect.Effect.provide(_effect.Effect.catchAllCause(renderable, onCause), ctx));
     }
   }
   return null;
@@ -107,7 +477,7 @@ function handlePart(renderable, update) {
     case "object":
       {
         if (renderable === null || renderable === undefined) return update(null);else if (Array.isArray(renderable)) {
-          return renderable.length === 0 ? update(null) : _effect.Effect.forkScoped(Fx.observe(Fx.combine(renderable.map(unwrapRenderable)), update));
+          return renderable.length === 0 ? update(null) : _effect.Effect.forkScoped(Fx.observe(Fx.tuple(renderable.map(unwrapRenderable)), update));
         } else if (_TypeId.TypeId in renderable) {
           return _effect.Effect.forkScoped(Fx.observe(renderable, update));
         } else if (_effect.Effect.EffectTypeId in renderable) {
@@ -124,7 +494,7 @@ function unwrapRenderable(renderable) {
     case "object":
       {
         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.TypeId in renderable) {
           return renderable;
         } else if (_effect.Effect.EffectTypeId in renderable) {
@@ -136,7 +506,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];
@@ -191,29 +561,31 @@ function getBrowserEntry(document, ctx, templateStrings) {
     return cached;
   }
 }
-function buildParts(document, ctx, template, content, ref, onCause, isHydrating) {
-  return _effect.Effect.all(template.parts.map(([part, path]) => buildPartWithNode(document, ctx, part, (0, _utils.findPath)(content, path), ref, onCause, isHydrating)));
+function buildParts(document, ctx, template, content, eventSource, onCause, isHydrating) {
+  return template.parts.map(([part, path]) => buildPartWithNode(document, ctx, part, (0, _utils.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.Effect.succeed(_parts.AttributePartImpl.browser(part.index, node, part.name, ctx));
+      return _parts.AttributePartImpl.browser(part.index, node, part.name, ctx);
     case "boolean-part":
-      return _effect.Effect.succeed(_parts.BooleanPartImpl.browser(part.index, node, part.name, ctx));
+      return _parts.BooleanPartImpl.browser(part.index, node, part.name, ctx);
     case "className-part":
-      return _effect.Effect.succeed(_parts.ClassNamePartImpl.browser(part.index, node, ctx));
+      return _parts.ClassNamePartImpl.browser(part.index, node, ctx);
     case "comment-part":
-      return _effect.Effect.succeed(_parts.CommentPartImpl.browser(part.index, node, ctx));
+      return _parts.CommentPartImpl.browser(part.index, node, ctx);
     case "data":
-      return _effect.Effect.succeed(_parts.DataPartImpl.browser(part.index, node, ctx));
+      return _parts.DataPartImpl.browser(part.index, node, ctx);
     case "event":
-      return _parts.EventPartImpl.browser(part.name, part.index, ref, node, onCause);
+      return new _parts.EventPartImpl(part.name, part.index, ElementSource.fromElement(node), onCause, handler => eventSource.addEventListener(node, part.name, handler));
     case "node":
-      return _effect.Effect.succeed((0, _browser.makeRenderNodePart)(part.index, node, ctx, document, isHydrating));
+      return (0, _browser.makeRenderNodePart)(part.index, node, ctx, document, isHydrating);
     case "property":
-      return _effect.Effect.succeed(_parts.PropertyPartImpl.browser(part.index, node, part.name, ctx));
+      return _parts.PropertyPartImpl.browser(part.index, node, part.name, ctx);
+    case "properties":
+      return _parts.PropertiesPartImpl.browser(part.index, node, ctx);
     case "ref":
-      return _effect.Effect.succeed(new _parts.RefPartImpl(ref.query(node), part.index));
+      return new _parts.RefPartImpl(ElementSource.fromElement(node), part.index);
     case "sparse-attr":
       {
         const parts = Array(part.nodes.length);
@@ -229,7 +601,7 @@ function buildPartWithNode(document, ctx, part, node, ref, onCause, isHydrating)
             }) => sparse.update((0, _ReadonlyArray.replace)(sparse.value, i, value || "")), sparse.value[i]));
           }
         }
-        return _effect.Effect.succeed(sparse);
+        return sparse;
       }
     case "sparse-class-name":
       {
@@ -248,7 +620,7 @@ function buildPartWithNode(document, ctx, part, node, ref, onCause, isHydrating)
             }) => sparse.update((0, _ReadonlyArray.replace)(sparse.value, i, value || "")), []));
           }
         }
-        return _effect.Effect.succeed(sparse);
+        return sparse;
       }
     case "sparse-comment":
       {
@@ -265,10 +637,10 @@ function buildPartWithNode(document, ctx, part, node, ref, onCause, isHydrating)
             }) => sparse.update((0, _ReadonlyArray.replace)(sparse.value, i, value || "")), sparse.value[i]));
           }
         }
-        return _effect.Effect.succeed(sparse);
+        return sparse;
       }
     case "text-part":
-      return _effect.Effect.succeed(_parts.TextPartImpl.browser(document, part.index, node, ctx));
+      return _parts.TextPartImpl.browser(document, part.index, node, ctx);
   }
 }
 function buildTemplate(document, {
@@ -296,6 +668,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";
@@ -329,4 +728,38 @@ 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.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.Effect.isEffect(renderable)) {
+    return matches.Effect(renderable);
+  } else if ((0, _Directive.isDirective)(renderable)) {
+    return matches.Directive(renderable);
+  } else {
+    return matches.Otherwise(renderable);
+  }
+}
 //# sourceMappingURL=render.js.map