vitral 0.1.0 → 0.3.0

package/dist/chunk-I3VSKSAZ.js

@@ -0,0 +1,634 @@
+import {
+  load,
+  loadFile,
+  registerSrc,
+  resolveEntry
+} from "./chunk-TD4S3IHA.js";
+import {
+  injectStyles
+} from "./chunk-ZAC6QQI6.js";
+import {
+  metric
+} from "./chunk-GNHCZRQP.js";
+import {
+  RemoteError,
+  fail,
+  isRemoteError,
+  mounted,
+  report
+} from "./chunk-AKNNHQ2H.js";
+import {
+  protocol
+} from "./chunk-GNPFWISJ.js";
+
+// src/core/events.ts
+var events = {
+  emit: (t, p) => protocol().events.emit(t, p),
+  on: (t, h) => protocol().events.on(t, h),
+  last: (t) => protocol().events.last(t)
+};
+function scopedEvents() {
+  const offs = /* @__PURE__ */ new Set();
+  const track2 = (off) => {
+    const wrapped = () => (offs.delete(wrapped), off());
+    offs.add(wrapped);
+    return wrapped;
+  };
+  return {
+    bus: {
+      emit: (t, p) => events.emit(t, p),
+      last: (t) => events.last(t),
+      on: (t, h) => track2(events.on(t, h))
+    },
+    track: track2,
+    dispose() {
+      for (const off of [...offs]) off();
+    }
+  };
+}
+
+// src/core/hooks.ts
+var ctxHooks = {};
+
+// src/core/navigate.ts
+function navigate(url, options = {}) {
+  const target = new URL(url, location.href);
+  if (target.origin !== location.origin) {
+    location.assign(target.href);
+    return;
+  }
+  if (options.replace) history.replaceState(history.state, "", target.href);
+  else history.pushState(history.state, "", target.href);
+  dispatchEvent(new PopStateEvent("popstate", { state: history.state }));
+  events.emit("vitral:navigate", target.pathname + target.search + target.hash);
+}
+
+// src/core/updates.ts
+var versions = /* @__PURE__ */ new Map();
+var live = /* @__PURE__ */ new Map();
+function track(name, loaded) {
+  versions.set(name, loaded.entry);
+  mounted.set(name, loaded);
+  live.set(name, (live.get(name) ?? 0) + 1);
+  return () => {
+    const n = live.get(name) - 1;
+    if (n) live.set(name, n);
+    else live.delete(name), versions.delete(name), mounted.delete(name);
+  };
+}
+var swaps = null;
+async function refresh(name) {
+  const p = protocol();
+  await p.pending();
+  const entry = p.entry(name);
+  if (entry) p.register(name, entry);
+  await loadFile(name);
+  const started = swaps = [];
+  events.emit("vitral:refresh", name);
+  swaps = null;
+  await Promise.all(started);
+}
+function refreshable(current, name, props, remount) {
+  let gen = 0;
+  const off = events.on("vitral:refresh", (n) => {
+    if (n !== name && !name.startsWith(n + "/")) return;
+    const mine = ++gen;
+    const used = props;
+    const swap = remount(used).then((next) => {
+      if (current.unmount === noop || mine !== gen) return next.unmount();
+      const old = current;
+      current = next;
+      old.unmount();
+      if (props !== used) next.update?.(props);
+    });
+    if (swaps) swaps.push(swap);
+    else swap.catch(console.error);
+  });
+  return {
+    update(next) {
+      props = next;
+      current.update?.(next);
+    },
+    unmount() {
+      off();
+      current.unmount();
+      current = { unmount: noop };
+    }
+  };
+}
+var noop = () => {
+};
+async function checkUpdates() {
+  const p = protocol();
+  const found = [];
+  const { splitName } = await import("./expose-JUOUN5N5.js");
+  const remotes = /* @__PURE__ */ new Map();
+  for (const name of live.keys()) {
+    const root = splitName(name)[0];
+    const entry = versions.get(root) ?? versions.get(name);
+    if (entry) remotes.set(root, entry);
+  }
+  for (const [name, entry] of remotes) versions.set(name, entry);
+  await Promise.all(
+    [...remotes].map(
+      ([name, current]) => resolveEntry(name, p.entry(name)).then(({ entry }) => {
+        if (entry !== current) {
+          versions.set(name, entry);
+          found.push(name);
+          events.emit("vitral:update-available", { name, entry });
+        }
+      }, noop)
+    )
+  );
+  return found;
+}
+function watchUpdates() {
+  let busy = null;
+  const run = () => busy ??= checkUpdates().finally(() => busy = null);
+  const nav = globalThis.navigation;
+  addEventListener("popstate", run);
+  nav?.addEventListener("navigatesuccess", run);
+  return () => {
+    removeEventListener("popstate", run);
+    nav?.removeEventListener("navigatesuccess", run);
+  };
+}
+
+// src/core/mount.ts
+async function mountRemote(target, name, props, options = {}) {
+  return refreshable(await mountOnce(target, name, props, options), name, props, (latest) => mountOnce(target, name, latest, options));
+}
+var frames;
+function setFrameMounter(mounter) {
+  frames = mounter;
+}
+async function mountOnce(target, name, props, options) {
+  const p = protocol();
+  await p.pending();
+  if ((options.isolate ?? registered(name)?.isolate ?? p.settings().isolate) === "iframe") {
+    if (!frames) throw report(new RemoteError("MOUNT_FAILED", name, 'isolate="iframe" precisa de enableIframe(), de vitral/iframe'));
+    return frames(target, name, props, options).catch(fail);
+  }
+  const { module: mod, ...resolved } = await load(name, options.isolate, options.priority);
+  const untrack = track(name, resolved);
+  const isolate = options.isolate ?? resolved.isolate ?? protocol().settings().isolate;
+  const label = resolved.name ?? name;
+  let shadowRoot = null;
+  const el = document.createElement("div");
+  el.setAttribute("data-vitral-root", label);
+  if (resolved.scope) el.setAttribute("data-vitral-scope", resolved.scope);
+  el.style.display = "contents";
+  if (isolate === "shadow") {
+    shadowRoot = target.shadowRoot ?? target.attachShadow({ mode: "open" });
+    shadowRoot.appendChild(el);
+  } else {
+    target.appendChild(el);
+  }
+  let t = performance.now();
+  const [release, portal = document.body] = await injectStyles(resolved, shadowRoot, el, options.styles);
+  metric(name, "css", t);
+  t = performance.now();
+  const scoped = scopedEvents();
+  const on = (type) => (fn) => (el.addEventListener(type, fn), () => el.removeEventListener(type, fn));
+  const ctx = {
+    name: label,
+    baseUrl: new URL(".", resolved.entry).href,
+    events: scoped.bus,
+    shadowRoot,
+    portalContainer: portal,
+    reportError(e) {
+      const err = report(isRemoteError(e) ? e : new RemoteError("RENDER_FAILED", label, String(e?.message ?? e), e), resolved);
+      if (options.onError) options.onError(err);
+      else console.error(err);
+    },
+    navigate,
+    protocol: protocol().protocol,
+    onActivate: on("vitral:activate"),
+    onDeactivate: on("vitral:deactivate")
+  };
+  if (ctxHooks.shared) ctx.shared = ctxHooks.shared(name, scoped.track);
+  let mounted2;
+  try {
+    mounted2 = await mod.mount(el, props, ctx);
+    metric(name, "mount", t);
+  } catch (e) {
+    untrack();
+    scoped.dispose();
+    release();
+    el.remove();
+    throw report(new RemoteError("MOUNT_FAILED", label, "erro ao montar", e), resolved);
+  }
+  let alive = true;
+  return {
+    update(next) {
+      if (alive) mounted2.update?.(next);
+    },
+    unmount() {
+      if (!alive) return;
+      alive = false;
+      try {
+        mounted2.unmount();
+      } finally {
+        untrack();
+        scoped.dispose();
+        release();
+        el.remove();
+      }
+    }
+  };
+}
+function registered(name) {
+  const p = protocol();
+  let n = name;
+  while (n && !p.entry(n)) n = n.slice(0, Math.max(0, n.lastIndexOf("/")));
+  return n ? p.entry(n) : void 0;
+}
+
+// src/core/slot.ts
+function createSlot(target, options) {
+  let { isolate } = options;
+  const key = (o) => o.src ? registerSrc(o.src, o.name) : o.name ?? "";
+  let name = key(options);
+  let props = options.props ?? {};
+  let handle2 = null;
+  let holder = null;
+  let token = 0;
+  let status = "loading";
+  const setStatus = (s, e = null) => {
+    status = s;
+    if (holder) holder.style.display = s === "error" ? "none" : "";
+    options.onStatus?.(s, e);
+  };
+  const teardown = () => {
+    handle2?.unmount();
+    handle2 = null;
+    holder?.remove();
+    holder = null;
+  };
+  const mount = () => {
+    const my = ++token;
+    teardown();
+    holder = document.createElement("div");
+    holder.setAttribute("data-vitral-slot", name);
+    target.appendChild(holder);
+    setStatus("loading");
+    const fail2 = (e) => {
+      if (my !== token) return;
+      setStatus("error", isRemoteError(e) ? e : new RemoteError("MOUNT_FAILED", name, String(e), e));
+    };
+    const initial = props;
+    mountRemote(holder, name, props, { isolate, priority: options.priority, styles: options.styles, onError: fail2 }).then((h) => {
+      if (my !== token) return h.unmount();
+      handle2 = h;
+      if (props !== initial) h.update?.(props);
+      setStatus("ready");
+    }, fail2);
+  };
+  mount();
+  return {
+    update(next) {
+      props = next;
+      handle2?.update?.(next);
+    },
+    set(next) {
+      const nextName = next.src || next.name !== void 0 ? key(next) : name;
+      const changed = nextName !== name || "isolate" in next && next.isolate !== isolate;
+      name = nextName;
+      if ("isolate" in next) isolate = next.isolate;
+      if (changed) mount();
+    },
+    retry: mount,
+    destroy() {
+      token++;
+      teardown();
+    },
+    get status() {
+      return status;
+    }
+  };
+}
+
+// src/core/remote.ts
+function defineRemote(remote) {
+  return remote;
+}
+
+// src/component.ts
+var TEMPLATE = /* @__PURE__ */ Symbol("vitral.html");
+function html(strings, ...values) {
+  return { [TEMPLATE]: true, strings, values };
+}
+function unsafeHTML(markup) {
+  return html(Object.assign([markup], { raw: [markup] }));
+}
+var isTemplate = (v) => typeof v === "object" && v !== null && TEMPLATE in v;
+var escape = (s) => s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+var EVENT_ATTR = /\s+on([a-z][\w:-]*)=(["']?)$/i;
+var HANDLER_PREFIX = "data-vitral-h";
+function toMarkup(value, handlers) {
+  if (value == null || value === false) return "";
+  if (Array.isArray(value)) return value.map((v) => toMarkup(v, handlers)).join("");
+  if (!isTemplate(value)) return escape(String(value));
+  const strings = [...value.strings];
+  let out = "";
+  for (let i = 0; i < strings.length; i++) {
+    let s = strings[i];
+    if (i < value.values.length) {
+      const v = value.values[i];
+      const event = typeof v === "function" ? EVENT_ATTR.exec(s) : null;
+      if (event) {
+        s = s.slice(0, s.length - event[0].length) + ` ${HANDLER_PREFIX}${handlers.length}="${event[1].toLowerCase()}"`;
+        handlers.push(v);
+        if (event[2] && strings[i + 1]?.startsWith(event[2])) strings[i + 1] = strings[i + 1].slice(1);
+        out += s;
+      } else {
+        out += s + toMarkup(v, handlers);
+      }
+    } else {
+      out += s;
+    }
+  }
+  return out;
+}
+function render(view, el) {
+  if (typeof Node !== "undefined" && view instanceof Node) {
+    el.replaceChildren(view);
+    return;
+  }
+  const handlers = [];
+  el.innerHTML = toMarkup(view, handlers);
+  if (!handlers.length) return;
+  for (const node of el.querySelectorAll("*")) {
+    for (const attr of [...node.attributes]) {
+      if (!attr.name.startsWith(HANDLER_PREFIX)) continue;
+      node.addEventListener(attr.value, handlers[Number(attr.name.slice(HANDLER_PREFIX.length))]);
+      node.removeAttribute(attr.name);
+    }
+  }
+}
+function component(options) {
+  const opts = typeof options === "function" ? { render: options } : options;
+  return defineRemote({
+    mount(el, props, ctx) {
+      let current = props;
+      let queued = false;
+      let alive = true;
+      const draw = () => {
+        queued = false;
+        if (alive) render(opts.render(current, state, ctx) ?? "", el);
+      };
+      const initial = typeof opts.state === "function" ? opts.state() : { ...opts.state ?? {} };
+      const state = new Proxy(initial, {
+        set(target, key, value) {
+          if (!Object.is(Reflect.get(target, key), value)) {
+            Reflect.set(target, key, value);
+            if (!queued) {
+              queued = true;
+              queueMicrotask(draw);
+            }
+          }
+          return true;
+        }
+      });
+      draw();
+      const cleanup = opts.mounted?.(el, state, ctx);
+      return {
+        update(next) {
+          current = next;
+          draw();
+        },
+        unmount() {
+          alive = false;
+          cleanup?.();
+          el.replaceChildren();
+        }
+      };
+    }
+  });
+}
+
+// src/core/store.ts
+function createStore(seed = {}) {
+  const slots = /* @__PURE__ */ new Map();
+  const changed = /* @__PURE__ */ new Map();
+  let depth = 0;
+  const slot = (key) => {
+    let x = slots.get(key);
+    if (!x) slots.set(key, x = { s: /* @__PURE__ */ new Set() });
+    return x;
+  };
+  const flush = () => {
+    if (depth) return;
+    const list = [...changed];
+    changed.clear();
+    for (const [x, before] of list) {
+      if (Object.is(x.v, before)) continue;
+      for (const fn of [...x.s]) {
+        try {
+          fn(x.v);
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    }
+  };
+  const write = (x, value, by) => {
+    if ("v" in x && Object.is(x.v, value)) return;
+    if (!changed.has(x)) changed.set(x, x.v);
+    x.v = value;
+    x.b = by;
+    flush();
+  };
+  for (const key in seed) slots.set(key, { v: seed[key], s: /* @__PURE__ */ new Set(), d: true });
+  return {
+    get: (key) => slots.get(key)?.v,
+    set(key, value, token, by) {
+      const x = slot(key);
+      if (x.r && token !== x.t) return false;
+      write(x, value, by);
+      return true;
+    },
+    subscribe(key, fn) {
+      const subs = slot(key).s;
+      const f = (v) => fn(v);
+      subs.add(f);
+      return () => void subs.delete(f);
+    },
+    own(key, value, writable, by) {
+      const x = slot(key);
+      if (x.t) return;
+      if (!x.d) write(x, value, by);
+      x.d = false;
+      x.r = !writable;
+      x.o = by;
+      return x.t = {};
+    },
+    release(key, token) {
+      const x = slots.get(key);
+      if (x && x.t === token) x.t = x.r = x.o = void 0;
+    },
+    batch(fn) {
+      depth++;
+      try {
+        return fn();
+      } finally {
+        depth--;
+        flush();
+      }
+    },
+    list: () => [...slots].filter(([, x]) => "v" in x).map(([key, x]) => ({ key, value: x.v, writable: !x.r, owner: x.o, by: x.b, subscribers: x.s.size }))
+  };
+}
+function hydrate() {
+  try {
+    return JSON.parse(document.querySelector("script[data-vitral-shared]")?.textContent || "{}");
+  } catch (e) {
+    console.error(e);
+  }
+}
+function pageStore() {
+  if (typeof document === "undefined") return createStore();
+  const p = protocol();
+  if (!p.shared) {
+    const store = createStore(hydrate());
+    p.shared = () => store;
+  }
+  return p.shared();
+}
+
+// src/core/shared.ts
+function isDev() {
+  try {
+    return process.env.NODE_ENV !== "production";
+  } catch {
+    return false;
+  }
+}
+function pageStore2() {
+  ctxHooks.shared ??= scopedShared;
+  return pageStore();
+}
+function handle(store, key, by, track2 = (off) => off, token) {
+  const get = () => store.get(key);
+  const set = (value) => {
+    if (store.set(key, value, token, by)) return;
+    const e = new RemoteError("SHARED_READONLY", by || "shared", `s\xF3 o dono altera "${key}"`);
+    if (isDev()) throw e;
+    console.warn(e.message);
+  };
+  return {
+    key,
+    get,
+    set,
+    update: (fn) => set(fn(get())),
+    subscribe(fn) {
+      fn(get());
+      return track2(store.subscribe(key, fn));
+    }
+  };
+}
+function own(key, value, options = {}, by, track2) {
+  const store = pageStore2();
+  const token = store.own(key, value, options.writable !== false, by);
+  if (token) track2?.(() => store.release(key, token));
+  return handle(store, key, by, track2, token);
+}
+function shared(key) {
+  return handle(pageStore2(), key);
+}
+function provide(key, value, options) {
+  return own(key, value, options);
+}
+function batch(fn) {
+  return pageStore2().batch(fn);
+}
+function scopedShared(by, track2) {
+  const api = ((key) => handle(pageStore2(), key, by, track2));
+  api.provide = (key, value, options) => own(key, value, options, by, track2);
+  api.batch = batch;
+  return api;
+}
+function memoSelect() {
+  let last;
+  return (value, select) => {
+    if (!last || !Object.is(last[0], value) || last[1] !== select) {
+      const out = select(value);
+      last = [value, select, last && Object.is(last[2], out) ? last[2] : out];
+    }
+    return last[2];
+  };
+}
+var same = (value) => value;
+
+// src/core/persist.ts
+function persist(value, options = {}) {
+  const key = `vitral:${value.key}:${options.version ?? 1}`;
+  let storage;
+  try {
+    storage = options.storage === "session" ? sessionStorage : localStorage;
+    const saved = storage.getItem(key);
+    if (saved !== null) value.set(JSON.parse(saved));
+  } catch {
+    return value;
+  }
+  value.subscribe((v) => {
+    try {
+      storage.setItem(key, JSON.stringify(v));
+    } catch (e) {
+      console.warn(`[vitral] n\xE3o foi poss\xEDvel guardar "${value.key}"`, e);
+    }
+  });
+  return value;
+}
+function syncTabs(value) {
+  if (typeof BroadcastChannel === "undefined") return value;
+  const channel = new BroadcastChannel(`vitral:${value.key}`);
+  let receiving = false;
+  let first = true;
+  channel.onmessage = (e) => {
+    receiving = true;
+    try {
+      value.set(e.data);
+    } finally {
+      receiving = false;
+    }
+  };
+  value.subscribe((v) => {
+    if (first) return void (first = false);
+    if (receiving) return;
+    try {
+      channel.postMessage(v);
+    } catch (e) {
+      console.warn(`[vitral] "${value.key}" n\xE3o pode ser enviado a outras abas`, e);
+    }
+  });
+  return value;
+}
+function serializeShared(values) {
+  return JSON.stringify(values).replace(/</g, "\\u003c");
+}
+
+export {
+  events,
+  navigate,
+  track,
+  refresh,
+  checkUpdates,
+  watchUpdates,
+  mountRemote,
+  setFrameMounter,
+  createSlot,
+  defineRemote,
+  html,
+  unsafeHTML,
+  render,
+  component,
+  shared,
+  provide,
+  batch,
+  memoSelect,
+  same,
+  persist,
+  syncTabs,
+  serializeShared
+};