@myop/sdk 0.3.34 → 0.4.0-beta.0

package/dist/cjs/{_MyopHelpers.08d1cf5d.js → _MyopHelpers.efed13e4.js}

@@ -38,12 +38,17 @@ var helpers_exports = {};
 __export(helpers_exports, {
   CloudRepository: () => CloudRepository,
   ComponentConfig: () => ComponentConfig,
+  DELIVERY_HOST: () => DELIVERY_HOST,
   SkinConfig: () => SkinConfig,
   addClass: () => addClass,
   applyStylesheet: () => applyStylesheet,
   applyStylesheetLink: () => applyStylesheetLink,
   changeSkinUrlByTokenizer: () => changeSkinUrlByTokenizer,
   createIframeSkinByTokenizer: () => createIframeSkinByTokenizer,
+  delivery: () => delivery,
+  deliveryOff: () => deliveryOff,
+  deliveryRefresh: () => deliveryRefresh,
+  deliveryStats: () => deliveryStats,
   enableLocalDev: () => enableLocalDev,
   enableSelfHosted: () => enableSelfHosted,
   exec: () => exec,
@@ -357,6 +362,114 @@ var PropConfigBehaviorTypes = {
   "code": "code"
 };
 
+// src/helpers/deliveryStore.ts
+var DB_NAME = "myop-delivery";
+var STORE = "components";
+var DB_VERSION = 1;
+var dbPromise = null;
+function openDb() {
+  if (dbPromise) return dbPromise;
+  dbPromise = new Promise((resolve) => {
+    try {
+      if (typeof indexedDB === "undefined") return resolve(null);
+      const req = indexedDB.open(DB_NAME, DB_VERSION);
+      req.onupgradeneeded = () => {
+        const db = req.result;
+        if (!db.objectStoreNames.contains(STORE)) db.createObjectStore(STORE, { keyPath: "key" });
+      };
+      req.onsuccess = () => resolve(req.result);
+      req.onerror = () => resolve(null);
+      req.onblocked = () => resolve(null);
+    } catch (e) {
+      resolve(null);
+    }
+  });
+  return dbPromise;
+}
+function tx(mode, fn) {
+  return openDb().then((db) => new Promise((resolve) => {
+    if (!db) return resolve(null);
+    try {
+      const t = db.transaction(STORE, mode);
+      const req = fn(t.objectStore(STORE));
+      req.onsuccess = () => resolve(req.result);
+      req.onerror = () => resolve(null);
+      t.onabort = () => resolve(null);
+    } catch (e) {
+      resolve(null);
+    }
+  }));
+}
+var HINT_PREFIX = "myop.d.";
+function writeHint(key, tag, expiresAt) {
+  try {
+    localStorage.setItem(HINT_PREFIX + key, JSON.stringify({ t: tag, e: expiresAt }));
+  } catch (e) {
+  }
+}
+function clearHint(key) {
+  try {
+    localStorage.removeItem(HINT_PREFIX + key);
+  } catch (e) {
+  }
+}
+var memory = /* @__PURE__ */ new Map();
+var deliveryStore = {
+  key(host, componentId, env, preview, opt) {
+    return "".concat(host, "|").concat(componentId, "|").concat(env, "|").concat(preview ? "preview" : "live", "|").concat(opt || "raw");
+  },
+  async get(key) {
+    const m = memory.get(key);
+    if (m) return m;
+    const e = await tx("readonly", (s) => s.get(key));
+    if (e) {
+      memory.set(key, e);
+      writeHint(key, e.tag, e.storedAt + e.windowMs);
+    }
+    return e;
+  },
+  async put(entry) {
+    memory.set(entry.key, entry);
+    writeHint(entry.key, entry.tag, entry.storedAt + entry.windowMs);
+    await tx("readwrite", (s) => s.put(entry));
+  },
+  async drop(key) {
+    memory.delete(key);
+    clearHint(key);
+    await tx("readwrite", (s) => s.delete(key));
+  },
+  /** Still usable without asking the server? */
+  fresh(e) {
+    return !!e && Date.now() - e.storedAt < e.windowMs;
+  },
+  /**
+   * The window this response licenses: the server's freshness minus what a CDN already
+   * spent. Returns 0 when the server said nothing about caching, which means "do not
+   * hold this" — the safe reading, and what production sends today.
+   */
+  windowFrom(headers) {
+    const cc = headers.get("cache-control") || "";
+    if (/no-store|no-cache/i.test(cc)) return 0;
+    const m = /s-maxage\s*=\s*(\d+)/i.exec(cc) || /max-age\s*=\s*(\d+)/i.exec(cc);
+    if (!m) return 0;
+    const total = Number(m[1]);
+    const age = Number(headers.get("age") || 0);
+    return Math.max(0, total - (isNaN(age) ? 0 : age)) * 1e3;
+  },
+  /** For tests and for `refresh()`: forget everything this browser holds. */
+  async clear() {
+    memory.clear();
+    try {
+      for (let i = localStorage.length - 1; i >= 0; i--) {
+        const k = localStorage.key(i);
+        if (k && k.startsWith(HINT_PREFIX)) localStorage.removeItem(k);
+      }
+    } catch (e) {
+    }
+    await tx("readwrite", (s) => s.clear());
+  }
+};
+
 // src/helpers/CloudRepository.ts
 var convertV2VariantToComponentConfig = (config) => {
   return {
@@ -442,6 +555,45 @@ var _CloudRepository = class _CloudRepository {
     __publicField(this, "_envExplicitlySet", false);
     __publicField(this, "_staticMode", false);
     __publicField(this, "_queryParams", {});
+    /**
+     * Opt-in delivery settings, set by myop.delivery(). Off means: this file behaves
+     * EXACTLY as it did before — same host, same URL, same everything.
+     */
+    __publicField(this, "_delivery", { minify: false, host: null, cache: false });
+    /**
+     * What actually happened, for myop.delivery.stats(). `fellBack` is the number that
+     * matters: it is how you find out the lane is unhealthy without waiting for a
+     * bug report, because a fallback is INVISIBLE to the page (it still renders).
+     */
+    __publicField(this, "_deliveryStats", {
+      requests: 0,
+      viaDelivery: 0,
+      fellBack: 0,
+      lastError: null,
+      /** where the last loads were answered from — the number the client window exists to move */
+      fromMemory: 0,
+      fromStorage: 0,
+      fromNetwork: 0,
+      /** re-checks after the window ended, and how many were answered "nothing changed" */
+      revalidations: 0,
+      unchanged: 0,
+      bytesSaved: 0
+    });
+    /**
+     * Local serves waiting to be reported: componentId -> {env, count}.
+     *
+     * THE MEASUREMENT PROBLEM THIS SOLVES. The better this cache works, the more usage
+     * vanishes: a visitor inside their freshness window renders the page with no request,
+     * so neither the server nor the CDN can see them. Left alone, a successful rollout
+     * looks in the ledger exactly like customers leaving.
+     *
+     * So local serves are counted here and reported afterwards, batched, on a path that
+     * never blocks rendering: flushed when the page is hidden (keepalive, so it survives
+     * the tab closing) and opportunistically whenever the SDK is talking to the server
+     * anyway. Nothing is sent while the page is loading, which is the point of the window.
+     */
+    __publicField(this, "_localServes", /* @__PURE__ */ new Map());
+    __publicField(this, "_flushBound", false);
   }
   static get Main() {
     const globalMain = getGlobalMain();
@@ -454,6 +606,120 @@ var _CloudRepository = class _CloudRepository {
     }
     return _CloudRepository._main;
   }
+  /**
+   * How big the component we are NOT re-downloading is. Deliberately measured from what
+   * we hold rather than from Content-Length: once a response is compressed the header is
+   * not readable cross-origin, so reading it there reported 0 every single time.
+   */
+  static sizeOfHeld(e) {
+    var _a, _b, _c, _d, _e;
+    try {
+      return (((_e = (_d = (_c = (_b = (_a = e == null ? void 0 : e.config) == null ? void 0 : _a.type) == null ? void 0 : _b.skins) == null ? void 0 : _c[0]) == null ? void 0 : _d.loader) == null ? void 0 : _e.HTML) || "").length;
+    } catch (e2) {
+      return 0;
+    }
+  }
+  /**
+   * Turn on the opt-in delivery path.
+   *
+   * Opting in IS choosing the delivery stack: this points /consume at `host` (a second,
+   * complete stack reading the same data) and asks for the minified artifact. Leave this
+   * uncalled and nothing about the SDK changes.
+   *
+   * Deliberately mutates THIS instance rather than constructing a new repository:
+   * CloudRepository.Main is a global singleton shared across bundles (see getGlobalMain),
+   * so a second instance would be ignored by every component already using the first.
+   */
+  setDelivery(opts = {}) {
+    if (opts.minify !== void 0) this._delivery.minify = !!opts.minify;
+    if (opts.host !== void 0) this._delivery.host = opts.host;
+    if (opts.cache !== void 0) this._delivery.cache = !!opts.cache;
+  }
+  deliveryStats() {
+    var _a;
+    return __spreadProps(__spreadValues({}, this._deliveryStats), {
+      host: (_a = this._delivery.host) != null ? _a : _CloudRepository.DEFAULT_HOST,
+      minify: this._delivery.minify,
+      cache: this._delivery.cache
+    });
+  }
+  /**
+   * Forget what this browser holds, so the next load asks the server.
+   * `refresh()` with no ids drops everything; the counterpart to the window for the case
+   * where a change has to be visible on THIS load — right after someone publishes.
+   */
+  async refreshDelivery() {
+    await deliveryStore.clear();
+  }
+  noteLocalServe(componentId, env) {
+    const cur = this._localServes.get(componentId);
+    if (cur) cur.count++;
+    else this._localServes.set(componentId, { env, count: 1 });
+    this.bindFlush();
+  }
+  /** Report on page-hide, which is the only event that reliably fires on mobile. */
+  bindFlush() {
+    if (this._flushBound || typeof document === "undefined") return;
+    this._flushBound = true;
+    const onHide = () => {
+      if (document.visibilityState === "hidden") this.flushLocalServes();
+    };
+    document.addEventListener("visibilitychange", onHide);
+    window.addEventListener("pagehide", () => this.flushLocalServes());
+  }
+  /**
+   * Send what we have. `keepalive` is what makes this work at page-hide: the request
+   * outlives the document. Failure is ignored — a lost usage report must never be
+   * visible to a visitor, and the next page load will report its own.
+   */
+  flushLocalServes() {
+    if (!this._localServes.size) return;
+    const batch = [...this._localServes.entries()].map(([id, v]) => "".concat(id, ":").concat(v.env, ":").concat(v.count)).join(",");
+    this._localServes.clear();
+    try {
+      const url = "".concat(this.deliveryHost(), "/clientUsage?b=").concat(encodeURIComponent(batch));
+      fetch(url, { keepalive: true, mode: "cors", credentials: "omit" }).catch(() => {
+      });
+    } catch (e) {
+    }
+  }
+  /** Where /consume should be fetched from right now. */
+  deliveryHost() {
+    return this._delivery.host || this._baseUrl;
+  }
+  /**
+   * Fetch a delivery URL with ONE fallback to the default host.
+   *
+   * The fallback is the kill switch: break or disable the lane and every client drifts
+   * back to cloud.myop.dev on its own, with no customer deploy. It must therefore be
+   * genuinely silent to the page and genuinely LOUD in stats() — a fallback that nobody
+   * counts is an outage nobody notices.
+   *
+   * Only transport failures and 5xx fall back. A 404 is an answer: the component really
+   * is missing, and retrying elsewhere would only hide it.
+   */
+  async deliveryFetch(path) {
+    var _a;
+    if (this._localServes.size) this.flushLocalServes();
+    const host = this.deliveryHost();
+    const primary = "".concat(host).concat(path);
+    this._deliveryStats.requests++;
+    const usingLane = host !== this._baseUrl;
+    try {
+      const res = await fetch(primary);
+      if (res.ok || res.status < 500 || !usingLane) {
+        if (usingLane && res.ok) this._deliveryStats.viaDelivery++;
+        return res;
+      }
+      this._deliveryStats.lastError = "HTTP ".concat(res.status, " from ").concat(host);
+    } catch (e) {
+      if (!usingLane) throw e;
+      this._deliveryStats.lastError = String((_a = e == null ? void 0 : e.message) != null ? _a : e);
+    }
+    this._deliveryStats.fellBack++;
+    console.warn("[myop] delivery host failed (".concat(this._deliveryStats.lastError, ") \u2014 falling back to ").concat(this._baseUrl));
+    return await fetch("".concat(this._baseUrl).concat(path));
+  }
   /**
    * Enable static mode for self-hosted component registries.
    * In static mode, URLs are constructed as file paths instead of query params:
@@ -549,12 +815,68 @@ var _CloudRepository = class _CloudRepository {
               const qs = new URLSearchParams(this._queryParams).toString();
               if (qs) url += "?".concat(qs);
             } else {
-              url = "".concat(this._baseUrl, "/consume?id=").concat(componentId, "&env=").concat(env);
+              url = "/consume?id=".concat(componentId, "&env=").concat(env);
               if (usePreview) {
                 url += "&preview=true";
               }
+              if (this._delivery.minify && !usePreview) {
+                url += "&opt=min";
+              }
+            }
+            const cacheable = this._delivery.cache && !this._staticMode && !usePreview;
+            const storeKey = cacheable ? deliveryStore.key(
+              this.deliveryHost(),
+              componentId,
+              env,
+              usePreview,
+              this._delivery.minify ? "min" : "raw"
+            ) : "";
+            let held = cacheable ? await deliveryStore.get(storeKey) : null;
+            if (held && deliveryStore.fresh(held)) {
+              this._deliveryStats.fromStorage++;
+              this.noteLocalServe(componentId, env);
+              this.variants[cacheKey].resolved = held.config;
+              resolve(held.config);
+              return;
+            }
+            if (held && held.tag) {
+              const checkUrl = "/consume?ids=".concat(componentId, "&env=").concat(env) + (this._delivery.minify ? "&opt=min" : "") + "&have=".concat(encodeURIComponent(held.tag));
+              this._deliveryStats.revalidations++;
+              try {
+                const check = await this.deliveryFetch(checkUrl);
+                if (check.ok) {
+                  const body = await check.json();
+                  if ((body.unchanged || []).includes(componentId)) {
+                    this._deliveryStats.unchanged++;
+                    this._deliveryStats.bytesSaved += _CloudRepository.sizeOfHeld(held);
+                    held.storedAt = Date.now();
+                    held.windowMs = deliveryStore.windowFrom(check.headers) || held.windowMs;
+                    await deliveryStore.put(held);
+                    this.variants[cacheKey].resolved = held.config;
+                    resolve(held.config);
+                    return;
+                  }
+                  const item = (body.items || [])[0];
+                  if (item) {
+                    const cfg = convertV2VariantToComponentConfig(item);
+                    this._deliveryStats.fromNetwork++;
+                    await deliveryStore.put({
+                      key: storeKey,
+                      config: cfg,
+                      tag: item.tag || null,
+                      storedAt: Date.now(),
+                      windowMs: deliveryStore.windowFrom(check.headers),
+                      host: this.deliveryHost()
+                    });
+                    this.variants[cacheKey].resolved = cfg;
+                    resolve(cfg);
+                    return;
+                  }
+                }
+              } catch (e) {
+              }
             }
-            const res = await fetch(url);
+            const res = this._staticMode ? await fetch(url) : await this.deliveryFetch(url);
             if (!res.ok) {
               reject(new Error('Failed to load component "'.concat(componentId, '" (').concat(res.status).concat(this._staticMode ? " from ".concat(url) : "", ")")));
               return;
@@ -570,6 +892,17 @@ var _CloudRepository = class _CloudRepository {
               return;
             }
             const componentConfig = convertV2VariantToComponentConfig(variant);
+            this._deliveryStats.fromNetwork++;
+            if (cacheable) {
+              await deliveryStore.put({
+                key: storeKey,
+                config: componentConfig,
+                tag: variant.tag || null,
+                storedAt: Date.now(),
+                windowMs: deliveryStore.windowFrom(res.headers),
+                host: this.deliveryHost()
+              });
+            }
             this.variants[cacheKey].resolved = componentConfig;
             resolve(componentConfig);
           } catch (e) {
@@ -704,6 +1037,8 @@ var _CloudRepository = class _CloudRepository {
   }
 };
 __publicField(_CloudRepository, "_main", null);
+/** The host every request goes to unless delivery() moved it. Never changes. */
+__publicField(_CloudRepository, "DEFAULT_HOST", "https://cloud.myop.dev");
 var CloudRepository = _CloudRepository;
 var v2_CloudRepository = CloudRepository;
 
@@ -734,6 +1069,26 @@ var enableSelfHosted = (cdnUrl, queryParams) => {
     _cloudRepository.setQueryParams(queryParams);
   }
 };
+var DELIVERY_HOST = "https://delivery.myop.dev";
+var delivery = (opts = {}) => {
+  var _a, _b;
+  const wantsLane = opts.minify !== false || opts.cache === true;
+  _cloudRepository.setDelivery({
+    minify: (_a = opts.minify) != null ? _a : false,
+    cache: (_b = opts.cache) != null ? _b : false,
+    host: opts.host !== void 0 ? opts.host : wantsLane ? DELIVERY_HOST : null
+  });
+  return deliveryStats();
+};
+var deliveryRefresh = async () => {
+  await _cloudRepository.refreshDelivery();
+  return deliveryStats();
+};
+var deliveryStats = () => _cloudRepository.deliveryStats();
+var deliveryOff = () => {
+  _cloudRepository.setDelivery({ minify: false, cache: false, host: null });
+  return deliveryStats();
+};
 var setCloudRepository = (repository) => {
   _cloudRepository = repository;
 };
@@ -759,12 +1114,17 @@ defineDynamicImport("MyopHelpers", helpers_exports);
 export {
   CloudRepository,
   ComponentConfig,
+  DELIVERY_HOST,
   SkinConfig,
   addClass,
   applyStylesheet,
   applyStylesheetLink,
   changeSkinUrlByTokenizer,
   createIframeSkinByTokenizer,
+  delivery,
+  deliveryOff,
+  deliveryRefresh,
+  deliveryStats,
   enableLocalDev,
   enableSelfHosted,
   exec,