@solidjs/web 2.0.0-beta.31 → 2.0.0-beta.32

package/frames/dist/client.cjs

@@ -96,9 +96,7 @@ function createFrameHost(options = {}) {
     if (store.version !== undefined && version < store.version) return false;
     if (store.version === undefined || version > store.version) {
       store.version = version;
-      for (const key of Object.keys(store.records)) {
-        if (key.startsWith("seg:") || key === ":error") delete store.records[key];
-      }
+      clearStreamRecords(store.records);
     }
     Object.assign(store.records, records);
     return true;
@@ -176,6 +174,7 @@ class FrameImpl {
   #store = Object.create(null);
   #appliedRootValue;
   #hasContent = false;
+  #errorNotified = false;
   #revealed = new Set();
   #fallbackShown = new Set();
   #slots;
@@ -195,10 +194,12 @@ class FrameImpl {
   #claimTree = (node, direct) => {
     const handlers = claimHandlers();
     if (!handlers) return;
-    const run = () => direct ? claimNode(handlers, node) : claimTree(handlers, node);
-    const scope = this.#options.ownerScope;
-    scope ? scope(run) : run();
+    this.#scoped(() => direct ? claimNode(handlers, node) : claimTree(handlers, node));
   };
+  #scoped(fn) {
+    const scope = this.#options.ownerScope;
+    return scope ? scope(fn) : fn();
+  }
   constructor(element, start, end, options = {}) {
     this.#element = element;
     this.#start = start;
@@ -259,15 +260,9 @@ class FrameImpl {
       return;
     } else if (v > this.#version) {
       this.#version = v;
-      this.#revealed.clear();
-      this.#fallbackShown.clear();
-      for (const key of Object.keys(this.#store)) {
-        if (key.startsWith("seg:") || key === ":error") {
-          delete this.#store[key];
-        }
-      }
+      this.#resetStreamState();
     }
-    for (const key of Object.keys(write.r)) {
+    for (const key in write.r) {
       const incoming = write.r[key];
       if (incoming && incoming.kind === "slot" && key.charCodeAt(0) === 115  && key.startsWith("slot:")) {
         const existing = this.#store[key];
@@ -279,6 +274,12 @@ class FrameImpl {
     }
     this.#flush();
   }
+  #resetStreamState(root) {
+    this.#revealed.clear();
+    this.#fallbackShown.clear();
+    this.#errorNotified = false;
+    clearStreamRecords(this.#store, root);
+  }
   #flush() {
     if (this.#disposed) return;
     const version = this.#version;
@@ -289,10 +290,14 @@ class FrameImpl {
       this.#appliedRootValue = root.value;
       this.#applied(version, reason);
     }
+    if (this.#store[":error"] && !this.#errorNotified) {
+      this.#errorNotified = true;
+      this.#applied(version, "error");
+    }
     let progressed = true;
     while (progressed) {
       progressed = false;
-      for (const key of Object.keys(this.#store)) {
+      for (const key in this.#store) {
         const name = segmentName(key);
         if (name === null || this.#revealed.has(name)) continue;
         if (this.#segmentReady(name)) {
@@ -301,7 +306,7 @@ class FrameImpl {
           progressed = true;
         }
       }
-      for (const key of Object.keys(this.#store)) {
+      for (const key in this.#store) {
         const m = /^seg:([^:]+):fallback$/.exec(key);
         if (!m) continue;
         const name = m[1];
@@ -313,7 +318,7 @@ class FrameImpl {
         }
       }
     }
-    for (const key of Object.keys(this.#store)) {
+    for (const key in this.#store) {
       if (this.#processedAssets.has(key) || !key.endsWith(":assets")) continue;
       this.#processedAssets.add(key);
       const record = this.#store[key];
@@ -345,6 +350,7 @@ class FrameImpl {
       const callback = this.#resolveSlot(propOf(occurrence));
       if (!callback) continue;
       const record = this.#resolveSlotRecord(occurrence);
+      if (record && record.kind === "slot" && this.#refsUnresolved(record.args)) continue;
       const prev = this.#slotNodes.get(occurrence);
       const prevFirst = Array.isArray(prev) ? prev[0] : prev;
       const zombie = this.#mountedSlots.has(occurrence) && prevFirst && !prevFirst.parentNode;
@@ -400,15 +406,7 @@ class FrameImpl {
     const cleanups = this.#slotCleanups.get(occurrence) ?? [];
     let existing = [];
     let end = null;
-    if (start) {
-      const endData = slotEnd(occurrence);
-      let n = start.nextSibling;
-      while (n && !(n.nodeType === COMMENT_NODE && n.data === endData)) {
-        existing.push(n);
-        n = n.nextSibling;
-      }
-      end = n;
-    }
+    if (start) end = eachInRange(start, occurrence, n => existing.push(n));
     const ctx = {
       frame: this.#options.claimScope ?? this.#options.id,
       key: occurrence,
@@ -423,23 +421,16 @@ class FrameImpl {
       } : undefined
     };
     const props = record && record.kind === "slot" ? this.#resolveArgs(occurrence, record.args) : {};
-    const scope = this.#options.ownerScope;
-    const content = scope ? scope(() => callback(props, ctx)) : callback(props, ctx);
+    const content = this.#scoped(() => callback(props, ctx));
     this.#slotArgs.set(occurrence, record);
     if (cleanups.length) this.#slotCleanups.set(occurrence, cleanups);
     if (content == null) return null;
     return Array.isArray(content) ? content : [content];
   }
   #replaceRange(key, start, nodes) {
-    const end = slotEnd(key);
     const parent = start.parentNode;
-    let n = start.nextSibling;
-    while (n && !(n.nodeType === COMMENT_NODE && n.data === end)) {
-      const next = n.nextSibling;
-      parent.removeChild(n);
-      n = next;
-    }
-    for (const node of nodes) parent.insertBefore(node, n);
+    const end = eachInRange(start, key, n => parent.removeChild(n));
+    for (const node of nodes) parent.insertBefore(node, end);
   }
   #unmountSlot(key) {
     this.#mountedSlots.delete(key);
@@ -451,9 +442,7 @@ class FrameImpl {
     this.#runSlotCleanups(key);
     const regions = this.#slotRegions.get(key);
     if (regions) {
-      for (const {
-        frame
-      } of regions.values()) frame?.dispose();
+      disposeRegions(regions);
       this.#slotRegions.delete(key);
     }
   }
@@ -463,15 +452,26 @@ class FrameImpl {
     this.#slotCleanups.delete(key);
     for (const fn of cleanups) fn();
   }
+  #refsUnresolved(args) {
+    const {
+      host,
+      id
+    } = this.#options;
+    if (host) for (const key in args) {
+      if (isDataRef(args[key]) && host.resolve(args[key], id) === undefined) return true;
+    }
+    return false;
+  }
+  #regionsFor(slotKey) {
+    let regions = this.#slotRegions.get(slotKey);
+    if (!regions) this.#slotRegions.set(slotKey, regions = new Map());
+    return regions;
+  }
   #resolveArgs(slotKey, args) {
     const host = this.#options.host;
-    let regions = this.#slotRegions.get(slotKey);
-    if (!regions) {
-      regions = new Map();
-      this.#slotRegions.set(slotKey, regions);
-    }
+    const regions = this.#regionsFor(slotKey);
     const props = {};
-    for (const key of Object.keys(args)) {
+    for (const key in args) {
       const value = args[key];
       if (isDataRef(value)) {
         const resolved = host ? host.resolve(value, this.#options.id) : undefined;
@@ -501,17 +501,8 @@ class FrameImpl {
   }
   #discoverRegions(slotKey, start) {
     if (!start) return;
-    let regions = this.#slotRegions.get(slotKey);
-    if (!regions) {
-      regions = new Map();
-      this.#slotRegions.set(slotKey, regions);
-    }
-    const endData = slotEnd(slotKey);
-    let n = start.nextSibling;
-    while (n && !(n.nodeType === COMMENT_NODE && n.data === endData)) {
-      collectRegionElements(n, regions);
-      n = n.nextSibling;
-    }
+    const regions = this.#regionsFor(slotKey);
+    eachInRange(start, slotKey, n => collectRegionElements(n, regions));
   }
   #refArgsUnchanged(occurrence, record) {
     const old = this.#slotArgs.get(occurrence);
@@ -527,11 +518,11 @@ class FrameImpl {
       const va = a[key];
       const vb = b[key];
       if (va === vb) continue;
-      if (!va || !vb || typeof va !== "object" || typeof vb !== "object") return false;
-      if (typeof va.$frame === "string" && typeof vb.$frame === "string") continue;
-      if (typeof va.$ref === "string" && typeof vb.$ref === "string" && cache && key in cache) {
+      if (isFrameRef(va) && isFrameRef(vb)) continue;
+      if (isDataRef(va) && isDataRef(vb) && cache && key in cache) {
         const host = this.#options.host;
         const next = host ? host.resolve(vb, this.#options.id) : undefined;
+        if (isAsyncLike(next) || isAsyncLike(cache[key])) return false;
         try {
           if (JSON.stringify(next) === JSON.stringify(cache[key])) continue;
         } catch (e) {
@@ -547,7 +538,7 @@ class FrameImpl {
     if (!args) return;
     const regions = this.#slotRegions.get(occurrence);
     if (!regions) return;
-    for (const key of Object.keys(args)) {
+    for (const key in args) {
       const value = args[key];
       if (!isFrameRef(value)) continue;
       const entry = regions.get(key);
@@ -597,11 +588,8 @@ class FrameImpl {
       this.#element.setAttribute(FRAME_ID_ATTR, id);
     }
     this.#version = undefined;
-    this.#revealed.clear();
-    this.#fallbackShown.clear();
-    for (const key of Object.keys(this.#store)) {
-      if (key.startsWith("seg:") || key === ":error") delete this.#store[key];
-    }
+    this.#appliedRootValue = undefined;
+    this.#resetStreamState(true);
     if (host) host.register(id, this);
   }
   rebase() {
@@ -621,11 +609,7 @@ class FrameImpl {
     }
     for (const key of [...this.#slotCleanups.keys()]) this.#runSlotCleanups(key);
     for (const key of this.#mountedSlots) this.#removeSlotRecord(key);
-    for (const regions of this.#slotRegions.values()) {
-      for (const {
-        frame
-      } of regions.values()) frame?.dispose();
-    }
+    for (const regions of this.#slotRegions.values()) disposeRegions(regions);
     this.#slotRegions.clear();
     this.#mountedSlots.clear();
   }
@@ -647,13 +631,7 @@ class FrameImpl {
     }
   }
   #clearContent() {
-    const parent = this.#parent();
-    let n = this.#firstContent();
-    while (n && n !== this.#end) {
-      const next = n.nextSibling;
-      parent.removeChild(n);
-      n = next;
-    }
+    removeUntil(this.#parent(), this.#firstContent(), this.#end);
   }
   #claimContent() {
     if (!claimHandlers()) return;
@@ -670,9 +648,7 @@ class FrameImpl {
     const assets = this.#store[`seg:${name}:assets`];
     if (assets && assets.styles) {
       let ready = true;
-      for (const entry of assets.styles) {
-        if (!ensureStylesheet(entry, this.#styleFlush)) ready = false;
-      }
+      for (const entry of assets.styles) ready = ensureStylesheet(entry, this.#styleFlush) && ready;
       if (!ready) return false;
     }
     if (!this.#findPlaceholder(name)) return false;
@@ -686,12 +662,7 @@ class FrameImpl {
     const content = this.#store[`seg:${name}`];
     const closing = rangeClose(tpl, placeholderId(name));
     const parent = tpl.parentNode;
-    let n = tpl.nextSibling;
-    while (n && n !== closing) {
-      const next = n.nextSibling;
-      parent.removeChild(n);
-      n = next;
-    }
+    removeUntil(parent, tpl.nextSibling, closing);
     if (this.#options.reveal) {
       const fallbackFrag = tpl.content.cloneNode(true);
       this.#claimTree(fallbackFrag);
@@ -740,9 +711,7 @@ function createFrameElement(options) {
   const frame = new FrameImpl(el, null, null, options);
   return {
     element: el,
-    get frame() {
-      return frame;
-    },
+    frame,
     dispose() {
       frame.dispose();
       el.remove();
@@ -762,15 +731,30 @@ function segmentName(key) {
   const m = /^seg:([^:]+)$/.exec(key);
   return m ? m[1] : null;
 }
+function isAsyncLike(v) {
+  return !!v && (typeof v.then === "function" || typeof v[Symbol.asyncIterator] === "function");
+}
 function propOf(occurrence) {
   const hash = occurrence.indexOf("#");
   return hash === -1 ? occurrence : occurrence.slice(0, hash);
 }
 function isDataRef(value) {
-  return typeof value === "object" && value !== null && typeof value.$ref === "string";
+  return !!value && typeof value.$ref === "string";
 }
 function isFrameRef(value) {
-  return typeof value === "object" && value !== null && typeof value.$frame === "string";
+  return !!value && typeof value.$frame === "string";
+}
+function disposeRegions(regions) {
+  for (const {
+    frame
+  } of regions.values()) frame?.dispose();
+}
+function removeUntil(parent, n, stop) {
+  while (n && n !== stop) {
+    const next = n.nextSibling;
+    parent.removeChild(n);
+    n = next;
+  }
 }
 function parseFragment(html) {
   const template = document.createElement("template");
@@ -778,9 +762,8 @@ function parseFragment(html) {
   return template.content;
 }
 function findHeadElement(selector, attr, value) {
-  const nodes = document.head.querySelectorAll(selector);
-  for (let i = 0; i < nodes.length; i++) {
-    if (nodes[i].getAttribute(attr) === value) return nodes[i];
+  for (const node of document.head.querySelectorAll(selector)) {
+    if (node.getAttribute(attr) === value) return node;
   }
   return null;
 }
@@ -829,7 +812,7 @@ function applyInlineStyles(inlineStyles) {
   }
 }
 function isPlaceholderStart(node, id) {
-  return node.nodeType === ELEMENT_NODE && node.tagName === "TEMPLATE" && node.getAttribute("id") === id;
+  return node.tagName === "TEMPLATE" && node.id === id;
 }
 function rangeClose(start, id) {
   let n = start.nextSibling;
@@ -885,6 +868,21 @@ function renameRegion(entry, childId) {
   entry.childId = childId;
   if (entry.frame) entry.frame.rebind(childId);else entry.element.setAttribute(FRAME_ID_ATTR, childId);
 }
+function eachInRange(start, key, cb) {
+  const end = slotEnd(key);
+  let n = start.nextSibling;
+  while (n && !(n.nodeType === COMMENT_NODE && n.data === end)) {
+    const next = n.nextSibling;
+    cb(n);
+    n = next;
+  }
+  return n;
+}
+function clearStreamRecords(records, root) {
+  for (const key in records) {
+    if (key.startsWith("seg:") || key === ":error" || root && key === "") delete records[key];
+  }
+}
 function argsEquivalent(a, b) {
   if (a === b) return true;
   if (!a || !b) return false;
@@ -895,9 +893,7 @@ function argsEquivalent(a, b) {
     const va = a[key];
     const vb = b[key];
     if (va === vb) continue;
-    if (va && vb && typeof va === "object" && typeof vb === "object" && typeof va.$frame === "string" && va.$frame === vb.$frame) {
-      continue;
-    }
+    if (isFrameRef(va) && va.$frame === vb?.$frame) continue;
     return false;
   }
   return true;
@@ -1260,7 +1256,7 @@ function createServerComponentHandler({
     showing(address, functionId) {
       bindingFor(address, functionId);
       const comp = componentFor(functionId);
-      if ((typeof comp === "function" || typeof comp === "object" && comp !== null) && !comp[COMPONENT_BINDING]) {
+      if (comp && (typeof comp === "function" || typeof comp === "object") && !comp[COMPONENT_BINDING]) {
         comp[COMPONENT_BINDING] = {
           component: comp,
           address
@@ -1352,6 +1348,9 @@ function createJSONDataTable(options) {
   };
 }
 
+function asyncArg(value) {
+  return value;
+}
 let sharedHost;
 const tables = new Map();
 function tableFor(id) {
@@ -1428,8 +1427,26 @@ function claimRender(prefix, existing, render) {
 function liveSlotProps(initial, ctx) {
   const [args, setArgs] = solidJs.createSignal(initial);
   ctx.onUpdate(next => setArgs(() => next));
+  return slotArgsProxy(args);
+}
+function isAsyncValue(v) {
+  return v !== null && typeof v === "object" && (typeof v.then === "function" || typeof v[Symbol.asyncIterator] === "function");
+}
+function slotArgsProxy(args) {
+  const owner = solidJs.getOwner();
+  const asyncReads = new Map();
   return new Proxy({}, {
-    get: (_, key) => args()[key],
+    get: (_, key) => {
+      const v = args()[key];
+      if (!isAsyncValue(v)) return v;
+      let read = asyncReads.get(key);
+      if (!read) {
+        const make = () => solidJs.createMemo(() => args()[key]);
+        read = owner ? solidJs.runWithOwner(owner, make) : make();
+        asyncReads.set(key, read);
+      }
+      return read();
+    },
     has: (_, key) => key in args(),
     ownKeys: () => Reflect.ownKeys(args()),
     getOwnPropertyDescriptor: (_, key) => key in args() ? {
@@ -1447,6 +1464,7 @@ function isReactiveContent(value) {
 }
 function slotsFor(props) {
   const bindings = new Map();
+  const fillScopes = new Map();
   return new Proxy({}, {
     get(_, prop) {
       if (typeof prop !== "string" || !(prop in props)) return undefined;
@@ -1457,6 +1475,19 @@ function slotsFor(props) {
           bindings.delete(key);
           prev.dispose();
         }
+        const prevFill = key !== undefined && fillScopes.get(key);
+        if (prevFill) {
+          fillScopes.delete(key);
+          prevFill.dispose();
+        }
+        const fillOwner = streamInvoke ? solidJs.createOwner() : null;
+        if (fillOwner && key !== undefined && ctx) {
+          fillScopes.set(key, fillOwner);
+          ctx.onCleanup(() => {
+            if (fillScopes.get(key) === fillOwner) fillScopes.delete(key);
+            fillOwner.dispose();
+          });
+        }
         const settle = out => {
           const existing = ctx && ctx.existing || [];
           if (existing.length) {
@@ -1469,13 +1500,13 @@ function slotsFor(props) {
         const evaluate = () => {
           const v = props[prop];
           if (typeof v === "function" && ctx && ctx.invoked) {
-            return v(ctx.onUpdate ? liveSlotProps(slotProps, ctx) : slotProps);
+            return v(ctx.onUpdate ? liveSlotProps(slotProps, ctx) : slotArgsProxy(() => slotProps));
           }
           return v;
         };
         const adopted = !!(ctx && ctx.frame && ctx.adopted && ctx.existing && ctx.existing.length);
         const prefix = ctx && ctx.frame ? `sc-${ctx.frame}-${ctx.key}-` : "";
-        const value = adopted ? claimRender(prefix, ctx.existing, evaluate) : evaluate();
+        const value = fillOwner ? solidJs.runWithOwner(fillOwner, () => adopted ? claimRender(prefix, ctx.existing, evaluate) : evaluate()) : adopted ? claimRender(prefix, ctx.existing, evaluate) : evaluate();
         if (!isReactiveContent(value)) {
           return settle(normalizeSlotContent(value));
         }
@@ -1500,29 +1531,61 @@ function slotsFor(props) {
 function revealSeam(owner) {
   return seam => solidJs.runWithOwner(owner, () => web$1.insert(seam.before.parentNode, solidJs.createLoadingBoundary(() => seam.content(), () => seam.fallback), seam.before));
 }
+let streamInvoke = false;
 function boundaryScope(owner) {
-  return fn => solidJs.getOwner() ? fn() : solidJs.runWithOwner(owner, fn);
-}
-function followBinding(frame, binding) {
-  solidJs.createRenderEffect(binding, address => frame.rebind(address));
+  return fn => {
+    if (solidJs.getOwner()) return fn();
+    streamInvoke = true;
+    try {
+      return solidJs.runWithOwner(owner, fn);
+    } finally {
+      streamInvoke = false;
+    }
+  };
 }
 function boundaryComponent(host, fnId) {
   return (props, binding) => {
     const owner = solidJs.getOwner();
+    const id = binding ? binding() : fnId;
+    let applied = !tables.has(id);
+    let release;
+    const arm = () => new Promise(r => release = r);
+    const mountGate = applied ? undefined : arm();
+    let setGate;
     const {
       element,
       frame,
       dispose
     } = createFrameElement({
       host,
-      id: binding ? binding() : fnId,
+      id,
       slots: slotsFor(props),
       ownerScope: boundaryScope(owner),
-      reveal: revealSeam(owner)
+      reveal: revealSeam(owner),
+      onApply: () => {
+        applied = true;
+        if (release) {
+          release();
+          release = undefined;
+        }
+        setGate && setGate(undefined);
+      }
     });
-    if (binding) followBinding(frame, binding);
+    const [gatePromise, setGatePromise] = solidJs.createSignal(applied ? undefined : mountGate);
+    setGate = setGatePromise;
+    if (binding) {
+      solidJs.createRenderEffect(binding, (address, prev) => {
+        if (prev !== undefined && address !== prev && tables.has(address)) {
+          applied = false;
+          setGatePromise(arm());
+        }
+        frame.rebind(address);
+      });
+    }
     solidJs.onCleanup(dispose);
-    return element;
+    if (applied && !binding) return element;
+    const gate = solidJs.createMemo(() => gatePromise());
+    return solidJs.createMemo(() => (gate(), element));
   };
 }
 const claimedBoundaries = new Set();
@@ -1590,6 +1653,17 @@ function adoptBoundary(host, id, el, props, binding) {
   claimedBoundaries.add(id);
   const address = binding ? binding() : documentAddress(id);
   const appliedRecords = new Set();
+  const claimedFragments = new Set();
+  const claimRegionFragments = root => {
+    const fr = globalThis._$HY?.fr;
+    if (!fr || !fr.claim) return;
+    root.querySelectorAll('template[id^="pl-"]').forEach(tpl => {
+      const fragId = tpl.id.slice(3);
+      if (claimedFragments.has(fragId)) return;
+      claimedFragments.add(fragId);
+      fr.claim(fragId);
+    });
+  };
   const drainRecords = () => {
     const hy = globalThis._$HY;
     if (!hy || !hy.r) return;
@@ -1621,8 +1695,20 @@ function adoptBoundary(host, id, el, props, binding) {
       }
     }
   };
+  claimRegionFragments(el);
+  const fr = globalThis._$HY?.fr;
+  const unsubscribe = fr ? fr.subscribe((_fragId, parent) => {
+    if (fr.claim && parent && el.contains(parent)) claimRegionFragments(parent);
+    drainRecords();
+  }) : undefined;
+  solidJs.onCleanup(() => {
+    unsubscribe && unsubscribe();
+    if (fr && fr.release) for (const fragId of claimedFragments) fr.release(fragId);
+  });
   drainRecords();
   const owner = solidJs.getOwner();
+  let release;
+  let setGate;
   const frame = createFrame(el, {
     adopt: true,
     host,
@@ -1630,6 +1716,13 @@ function adoptBoundary(host, id, el, props, binding) {
     slots: slotsFor(props),
     ownerScope: boundaryScope(owner),
     reveal: revealSeam(owner),
+    onApply: () => {
+      if (release) {
+        release();
+        release = undefined;
+      }
+      setGate && setGate(undefined);
+    },
     ...{
       recordsPending: () => {
         if (document.readyState === "loading") return true;
@@ -1640,7 +1733,19 @@ function adoptBoundary(host, id, el, props, binding) {
       claimScope: id
     }
   });
-  if (binding) followBinding(frame, binding);
+  if (binding) {
+    const arm = () => new Promise(r => release = r);
+    const [gatePromise, setGatePromise] = solidJs.createSignal(undefined);
+    setGate = setGatePromise;
+    const gate = solidJs.createMemo(() => gatePromise());
+    solidJs.createRenderEffect(binding, (address, prev) => {
+      if (prev !== undefined && address !== prev && tables.has(address)) {
+        setGatePromise(arm());
+      }
+      frame.rebind(address);
+    });
+    solidJs.createRenderEffect(() => (gate(), undefined), () => {});
+  }
   solidJs.onCleanup(() => frame.dispose());
   return el;
 }
@@ -1684,10 +1789,10 @@ function installServerComponents(host = getFrameHost()) {
 exports.FRAME_APPLIED_EVENT = FRAME_APPLIED_EVENT;
 exports.FRAME_STREAM_HEADER = FRAME_STREAM_HEADER;
 exports.applyFrameResponse = applyFrameResponse;
+exports.asyncArg = asyncArg;
 exports.createFrame = createFrame;
 exports.createFrameElement = createFrameElement;
 exports.createFrameHost = createFrameHost;
-exports.createJSONDataTable = createJSONDataTable;
 exports.createServerComponentHandler = createServerComponentHandler;
 exports.getFrameHost = getFrameHost;
 exports.installServerComponents = installServerComponents;