@solidjs/web 2.0.0-rc.3 → 2.0.0-rc.5

package/frames/dist/client.dev.js

@@ -178,7 +178,18 @@ function createFrameHost(options = {}) {
       store.version = version;
       clearStreamRecords(store.records);
     }
-    Object.assign(store.records, records);
+    const assets = records["seg::assets"];
+    const previous = assets && store.records["seg::assets"];
+    if (!previous || previous === assets) {
+      Object.assign(store.records, records);
+    } else {
+      for (const name in assets) {
+        const values = assets[name];
+        if (Array.isArray(values)) {
+          previous[name] ? previous[name].push(...values) : previous[name] = values;
+        }
+      }
+    }
     return true;
   };
   return {
@@ -270,7 +281,7 @@ class FrameImpl {
   #slotRegions = new Map();
   #slotResolvedRefs = new Map();
   #slotNodes = new Map();
-  #processedAssets = new Set();
+  #processedAssets = new WeakSet();
   #recordRefresh = null;
   #disposed = false;
   #styleFlush = () => {
@@ -371,6 +382,7 @@ class FrameImpl {
     this.#revealed.clear();
     this.#fallbackShown.clear();
     this.#appliedHoles.clear();
+    this.#processedAssets = new WeakSet();
     this.#errorNotified = false;
     clearStreamRecords(this.#store, root);
   }
@@ -431,12 +443,17 @@ class FrameImpl {
       }
     }
     for (const key in this.#store) {
-      if (this.#processedAssets.has(key) || !key.endsWith(":assets")) continue;
-      this.#processedAssets.add(key);
       const record = this.#store[key];
-      if (record && record.modules) {
+      if (!key.endsWith(":assets") || !record || this.#processedAssets.has(record)) {
+        continue;
+      }
+      this.#processedAssets.add(record);
+      if (record.modules) {
         for (const href of record.modules) ensureModulePreload(href);
       }
+      if (record.preloads) {
+        for (const entry of record.preloads) ensurePreload(entry);
+      }
     }
     this.#syncSlots();
   }
@@ -910,12 +927,28 @@ function parseFragment(html) {
   template.innerHTML = html;
   return template.content;
 }
-function findHeadElement(selector, attr, value) {
-  for (const node of document.head.querySelectorAll(selector)) {
-    if (node.getAttribute(attr) === value) return node;
+const PRELOAD_QUALIFIERS = ["as", "crossorigin", "type", "media", "imagesrcset", "imagesizes"];
+function findHeadElement(selector, attr, value, qualifiers) {
+  candidate: for (const node of document.head.querySelectorAll(selector)) {
+    if (node.getAttribute(attr) !== value) continue;
+    if (!qualifiers) return node;
+    for (let i = 0; i < PRELOAD_QUALIFIERS.length; i++) {
+      const name = PRELOAD_QUALIFIERS[i];
+      if (node.getAttribute(name) !== (qualifiers[name] ?? null)) continue candidate;
+    }
+    return node;
   }
   return null;
 }
+function ensurePreload(entry) {
+  const attrs = entry.attrs;
+  if (findHeadElement('link[rel="preload"]', "href", entry.href, attrs)) return;
+  const link = document.createElement("link");
+  link.rel = "preload";
+  for (const name in attrs) link.setAttribute(name, attrs[name]);
+  link.setAttribute("href", entry.href);
+  document.head.appendChild(link);
+}
 function ensureStylesheet(entry, onSettle) {
   const href = typeof entry === "string" ? entry : entry.href;
   let link = findHeadElement('link[rel="stylesheet"]', "href", href);

package/frames/dist/client.js

@@ -175,7 +175,18 @@ function createFrameHost(options = {}) {
       store.version = version;
       clearStreamRecords(store.records);
     }
-    Object.assign(store.records, records);
+    const assets = records["seg::assets"];
+    const previous = assets && store.records["seg::assets"];
+    if (!previous || previous === assets) {
+      Object.assign(store.records, records);
+    } else {
+      for (const name in assets) {
+        const values = assets[name];
+        if (Array.isArray(values)) {
+          previous[name] ? previous[name].push(...values) : previous[name] = values;
+        }
+      }
+    }
     return true;
   };
   return {
@@ -267,7 +278,7 @@ class FrameImpl {
   #slotRegions = new Map();
   #slotResolvedRefs = new Map();
   #slotNodes = new Map();
-  #processedAssets = new Set();
+  #processedAssets = new WeakSet();
   #recordRefresh = null;
   #disposed = false;
   #styleFlush = () => {
@@ -368,6 +379,7 @@ class FrameImpl {
     this.#revealed.clear();
     this.#fallbackShown.clear();
     this.#appliedHoles.clear();
+    this.#processedAssets = new WeakSet();
     this.#errorNotified = false;
     clearStreamRecords(this.#store, root);
   }
@@ -427,12 +439,17 @@ class FrameImpl {
       }
     }
     for (const key in this.#store) {
-      if (this.#processedAssets.has(key) || !key.endsWith(":assets")) continue;
-      this.#processedAssets.add(key);
       const record = this.#store[key];
-      if (record && record.modules) {
+      if (!key.endsWith(":assets") || !record || this.#processedAssets.has(record)) {
+        continue;
+      }
+      this.#processedAssets.add(record);
+      if (record.modules) {
         for (const href of record.modules) ensureModulePreload(href);
       }
+      if (record.preloads) {
+        for (const entry of record.preloads) ensurePreload(entry);
+      }
     }
     this.#syncSlots();
   }
@@ -900,12 +917,28 @@ function parseFragment(html) {
   template.innerHTML = html;
   return template.content;
 }
-function findHeadElement(selector, attr, value) {
-  for (const node of document.head.querySelectorAll(selector)) {
-    if (node.getAttribute(attr) === value) return node;
+const PRELOAD_QUALIFIERS = ["as", "crossorigin", "type", "media", "imagesrcset", "imagesizes"];
+function findHeadElement(selector, attr, value, qualifiers) {
+  candidate: for (const node of document.head.querySelectorAll(selector)) {
+    if (node.getAttribute(attr) !== value) continue;
+    if (!qualifiers) return node;
+    for (let i = 0; i < PRELOAD_QUALIFIERS.length; i++) {
+      const name = PRELOAD_QUALIFIERS[i];
+      if (node.getAttribute(name) !== (qualifiers[name] ?? null)) continue candidate;
+    }
+    return node;
   }
   return null;
 }
+function ensurePreload(entry) {
+  const attrs = entry.attrs;
+  if (findHeadElement('link[rel="preload"]', "href", entry.href, attrs)) return;
+  const link = document.createElement("link");
+  link.rel = "preload";
+  for (const name in attrs) link.setAttribute(name, attrs[name]);
+  link.setAttribute("href", entry.href);
+  document.head.appendChild(link);
+}
 function ensureStylesheet(entry, onSettle) {
   const href = typeof entry === "string" ? entry : entry.href;
   let link = findHeadElement('link[rel="stylesheet"]', "href", href);