foss-design 0.4.2 → 0.6.0

package/dist/runtime/index.js

@@ -467,6 +467,77 @@ var FrameInspector = class {
 };
 var SWALLOWED = ["pointerdown", "mousedown", "pointerup", "mouseup", "dblclick", "submit"];
 
+// src/runtime/public.ts
+var ATTRS = ["src", "srcset", "poster", "href", "xlink:href"];
+var LOADS_HREF = /* @__PURE__ */ new Set(["link", "image", "use", "feimage"]);
+function servePublicFolder(folder) {
+  if (!folder?.files.length) return;
+  const files = new Set(folder.files);
+  const base = new URL(folder.base, location.href);
+  const resolve = (value) => {
+    if (!value.startsWith("/") || value.startsWith("//")) return null;
+    const [, pathname = "", suffix = ""] = /^([^?#]*)(.*)$/.exec(value) ?? [];
+    let rel;
+    try {
+      rel = decodeURIComponent(pathname.slice(1));
+    } catch {
+      return null;
+    }
+    return files.has(rel) ? new URL(pathname.slice(1), base).href + suffix : null;
+  };
+  const rewrite = (name, value) => {
+    if (name !== "srcset") return resolve(value);
+    let changed = false;
+    const next = value.split(",").map((candidate) => {
+      const [url = "", ...rest] = candidate.trim().split(/\s+/);
+      const resolved = resolve(url);
+      if (!resolved) return candidate;
+      changed = true;
+      return [resolved, ...rest].join(" ");
+    }).join(", ");
+    return changed ? next : null;
+  };
+  const applies = (element, name) => name.endsWith("href") ? LOADS_HREF.has(element.localName.toLowerCase()) : true;
+  const setAttribute = Element.prototype.setAttribute;
+  Element.prototype.setAttribute = function(name, value) {
+    const lower = name.toLowerCase();
+    const next = ATTRS.includes(lower) && applies(this, lower) ? rewrite(lower, String(value)) : null;
+    setAttribute.call(this, name, next ?? value);
+  };
+  const fix = (element) => {
+    for (const name of ATTRS) {
+      const value = element.getAttribute(name);
+      if (value === null || !applies(element, name)) continue;
+      const next = rewrite(name, value);
+      if (next !== null) setAttribute.call(element, name, next);
+    }
+  };
+  const fixTree = (root) => {
+    fix(root);
+    for (const element of root.querySelectorAll("[src], [srcset], [poster], [href]")) fix(element);
+  };
+  new MutationObserver((records) => {
+    for (const record of records) {
+      if (record.type === "attributes") fix(record.target);
+      for (const node of record.addedNodes) if (node.nodeType === Node.ELEMENT_NODE) fixTree(node);
+    }
+  }).observe(document, {
+    subtree: true,
+    childList: true,
+    attributes: true,
+    attributeFilter: ["src", "srcset", "poster", "href"]
+  });
+  if (document.documentElement) fixTree(document.documentElement);
+  const fetch2 = window.fetch.bind(window);
+  window.fetch = (input, init) => {
+    const raw = typeof input === "string" ? input : input instanceof URL ? input.href : null;
+    let path = raw;
+    if (raw && input instanceof URL && input.origin === location.origin) path = input.pathname + input.search;
+    const resolved = path ? resolve(path) : null;
+    return fetch2(resolved ?? input, init);
+  };
+}
+
 // src/runtime/typography.tsx
 import { useEffect, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -566,6 +637,7 @@ var config = window.__DESIGN__ ?? { key: "", canvas: "", id: "", props: {} };
 var embedded = window.parent !== window;
 var query = new URLSearchParams(window.location.search);
 var capture = query.has("capture");
+servePublicFolder(config.public);
 var theme = config.theme ?? (query.get("theme") === "dark" ? "dark" : "light");
 var themeListeners = /* @__PURE__ */ new Set();
 function applyTheme(next) {
@@ -594,8 +666,9 @@ function useTheme() {
   );
 }
 function go(target) {
-  if (embedded) post({ type: "go", target });
-  else console.info(`[design] go("${target}") works inside the canvas viewer`);
+  const message = `go("${target}") is no longer supported: link to the screen instead (<a href="/\u2026">, or history.pushState in code) and give it a "route" in canvas.json`;
+  recordError(message);
+  throw new Error(message);
 }
 function useScreen() {
   return { canvas: config.canvas, id: config.id, props: config.props };
@@ -701,11 +774,13 @@ async function takeSnapshot() {
   }
 }
 function keepLinksInFrame() {
-  const report = (target, form) => post({
+  const report = (target, form, raw, pushed = false) => post({
     type: "link",
     href: target.href,
     path: target.origin === location.origin ? target.pathname + target.search + target.hash : null,
-    form
+    form,
+    raw,
+    pushed
   });
   const onClick = (event) => {
     if (event.defaultPrevented || event.button > 1) return;
@@ -716,7 +791,7 @@ function keepLinksInFrame() {
     const samePage = target.origin === location.origin && target.pathname === location.pathname && target.search === location.search;
     if (samePage && target.hash) return;
     event.preventDefault();
-    report(target, false);
+    report(target, false, link.getAttribute("href") ?? "");
   };
   window.addEventListener("click", onClick);
   window.addEventListener("auxclick", onClick);
@@ -724,8 +799,32 @@ function keepLinksInFrame() {
     const form = event.target;
     if (event.defaultPrevented || form.method === "dialog") return;
     event.preventDefault();
-    report(new URL(form.getAttribute("action") || location.href, location.href), true);
+    const action = form.getAttribute("action") ?? "";
+    report(new URL(action || location.href, location.href), true, action);
+  });
+  const navigation = window.navigation;
+  navigation?.addEventListener("navigate", (event) => {
+    const nav = event;
+    if (!nav.cancelable || nav.destination.sameDocument || nav.downloadRequest !== null) return;
+    if (nav.navigationType === "reload") return;
+    const target = new URL(nav.destination.url);
+    if (target.pathname === location.pathname && target.search === location.search) return;
+    event.preventDefault();
+    report(
+      target,
+      false,
+      target.origin === location.origin ? target.pathname + target.search + target.hash : target.href
+    );
   });
+  for (const name of ["pushState", "replaceState"]) {
+    const original = history[name].bind(history);
+    history[name] = (data, unused, url) => {
+      original(data, unused, url);
+      if (url === void 0 || url === null) return;
+      const raw = String(url);
+      report(new URL(raw, location.href), false, raw, true);
+    };
+  }
 }
 var booted = false;
 var hmrBound = false;