@pinia/colada-devtools 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023-present Eduardo San Martin Morote
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,21 @@
+# Pinia Colada Devtools
+
+## Development
+
+```sh
+pnpm run dev
+```
+
+## Build and test
+
+Build the package:
+
+```sh
+pnpm run build
+```
+
+Then test it on the playground (root folder):
+
+```sh
+pnpm run play # at root
+```

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { PublicProps } from 'vue';
+
+export declare const PiniaColadaDevtools: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+export { }

package/dist/index.js

@@ -0,0 +1,466 @@
+import { defineComponent as F, ref as T, onMounted as $, renderSlot as X, createCommentVNode as N, useTemplateRef as Z, shallowRef as A, watch as q, onBeforeUnmount as ee, createBlock as W, openBlock as O, Teleport as te, createElementVNode as ne, nextTick as B, readonly as H, getCurrentInstance as oe, toRef as re, customRef as ie, getCurrentScope as ae, onScopeDispose as se, computed as J, toValue as C, unref as M, withCtx as le, createElementBlock as ue } from "vue";
+import { useQueryCache as ce } from "@pinia/colada";
+import { addDevtoolsInfo as de, DuplexChannel as fe, createQueryEntryPayload as y, DEVTOOLS_INFO_KEY as b, useEventListener as pe } from "@pinia/colada-devtools/shared";
+const ve = /* @__PURE__ */ F({
+  __name: "ClientOnly",
+  setup(e) {
+    const t = T(!1);
+    return $(() => {
+      t.value = !0;
+    }), (r, s) => t.value ? X(r.$slots, "default", { key: 0 }) : N("", !0);
+  }
+}), me = [".isPip", ".port"], ye = /* @__PURE__ */ F({
+  __name: "PiniaColadaDevtools",
+  setup(e) {
+    const t = ce();
+    de(t), t.$onAction(({ name: n, after: o, onError: f, args: h }) => {
+      if (n === "remove") {
+        const [a] = h;
+        o(() => {
+          i.emit("queries:delete", y(a));
+        });
+      } else if (n === "track" || n === "untrack" || n === "cancel" || n === "invalidate" || n === "fetch" || n === "setEntryState") {
+        const [a] = h;
+        if (n === "fetch") {
+          const v = y(a);
+          v.asyncStatus = "loading", i.emit("queries:update", v);
+        }
+        o(() => {
+          var v;
+          a[b].simulate = null, i.emit("queries:update", y(a)), n === "fetch" && ((v = a.options) == null ? void 0 : v.staleTime) != null && Number.isFinite(a.options.staleTime) && setTimeout(() => {
+            i.emit("queries:update", y(a));
+          }, a.options.staleTime);
+        }), f(() => {
+          i.emit("queries:update", y(a));
+        });
+      } else if (n === "create")
+        o((a) => {
+          i.emit("queries:update", y(a));
+        });
+      else if (n === "setQueryData") {
+        const [a] = h;
+        o(() => {
+          const v = t.getEntries({ key: a, exact: !0 })[0];
+          v && i.emit("queries:update", y(v));
+        });
+      }
+    });
+    const r = Z("devtools"), s = A(new MessageChannel()), i = new fe(s.value.port1);
+    q(
+      s,
+      (n) => {
+        i.setPort(n.port1);
+      },
+      { flush: "sync" }
+    ), i.on("ping", () => {
+      console.log("[App] Received ping from devtools"), i.emit("pong");
+    }), i.on("pong", () => {
+      console.log("[App] Received pong from devtools");
+    }), i.on("queries:refetch", (n) => {
+      t.invalidateQueries({ key: n, exact: !0, active: null, stale: null });
+    }), i.on("queries:invalidate", (n) => {
+      t.invalidateQueries({ key: n, exact: !0 });
+    }), i.on("queries:reset", (n) => {
+      const o = t.getEntries({ key: n, exact: !0 })[0];
+      o && (t.cancel(o), t.setEntryState(o, {
+        status: "pending",
+        data: void 0,
+        error: null
+      }));
+    }), i.on("queries:set:state", (n, o) => {
+      const f = t.getEntries({ key: n, exact: !0 })[0];
+      f && (t.setEntryState(f, o), i.emit("queries:update", y(f)));
+    }), i.on("queries:simulate:loading", (n) => {
+      const o = t.getEntries({ key: n, exact: !0 })[0];
+      o && (o.asyncStatus.value = "loading", o[b].simulate = "loading", i.emit("queries:update", y(o)));
+    }), i.on("queries:simulate:loading:stop", (n) => {
+      const o = t.getEntries({ key: n, exact: !0 })[0];
+      o && o[b].simulate === "loading" && (o.asyncStatus.value = "idle", o[b].simulate = null, i.emit("queries:update", y(o)));
+    }), i.on("queries:simulate:error", (n) => {
+      const o = t.getEntries({ key: n, exact: !0 })[0];
+      o && (t.cancel(o), t.setEntryState(o, {
+        ...o.state.value,
+        status: "error",
+        error: new Error("Simulated error")
+      }), o[b].simulate = "error", i.emit("queries:update", y(o)));
+    }), i.on("queries:simulate:error:stop", (n) => {
+      const o = t.getEntries({ key: n, exact: !0 })[0];
+      o && o[b].simulate === "error" && (t.cancel(o), t.setEntryState(o, {
+        ...o.state.value,
+        status: o.state.value.data !== void 0 ? "success" : "pending",
+        error: null
+      }), o[b].simulate = null, i.emit("queries:update", y(o)));
+    });
+    const u = A(null);
+    q(u, () => {
+      s.value = new MessageChannel();
+    }), pe(
+      window,
+      "unload",
+      () => {
+        var n;
+        (n = u.value) == null || n.close();
+      },
+      { passive: !0 }
+    ), ee(() => {
+      var n;
+      (n = u.value) == null || n.close();
+    });
+    function g() {
+      var n;
+      (n = u.value) == null || n.close(), u.value = null;
+    }
+    function c() {
+      const n = r.value;
+      if (!n || !n.shadowRoot)
+        throw new Error("No devtools elemnt found for Pinia Colada devtools");
+      const o = n.shadowRoot.getElementById("root");
+      if (!o)
+        throw new Error("No devtools root element found for Pinia Colada devtools");
+      const f = Math.max(o.offsetWidth, 400), h = Math.max(o.offsetHeight, 400), a = window.open(
+        "",
+        "pinia-colada-devtools",
+        `popup,width=${f},height=${h}`
+      );
+      if (!a)
+        throw new Error("Failed to open PiP window for Pinia Colada devtools");
+      u.value = a, a.document.head.innerHTML = "", a.document.body.innerHTML = "", a.document.title = "🍹 Pinia Colada Devtools", a.document.body.style.margin = "0", d(n, a.document), a.addEventListener(
+        "unload",
+        () => {
+          u.value = null;
+        },
+        { passive: !0 }
+      );
+    }
+    function d(n, o = document) {
+      if (!n || !n.shadowRoot)
+        throw new Error("No devtools element found for Pinia Colada devtools");
+      const f = o.getElementById("__pc-tw-properties") ?? o.createElement("style");
+      f.setAttribute("id", "__pc-tw-properties");
+      const h = [...n.shadowRoot.styleSheets].flatMap((a) => [...a.cssRules]).filter((a) => a instanceof CSSPropertyRule).map((a) => a.cssText).join("");
+      f.textContent = h, o.head.appendChild(f);
+    }
+    function p() {
+      u.value ? g() : c();
+    }
+    async function w() {
+      d(r.value), i.emit("queries:all", t.getEntries({}).map(y)), i.emit(
+        "mutations:all",
+        // FIXME: mutations
+        t.getEntries({}).map(y)
+      );
+    }
+    return (n, o) => (O(), W(te, {
+      to: u.value ? u.value.document.body : "body"
+    }, [
+      ne("pinia-colada-devtools-panel", {
+        ref: "devtools",
+        ".isPip": !!u.value,
+        ".port": s.value.port2,
+        onTogglePip: o[0] || (o[0] = (f) => p()),
+        onReady: o[1] || (o[1] = (f) => w())
+      }, null, 40, me)
+    ], 8, ["to"]));
+  }
+});
+function ge(e) {
+  return ae() ? (se(e), !0) : !1;
+}
+const he = typeof window < "u" && typeof document < "u";
+typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
+const we = Object.prototype.toString, Se = (e) => we.call(e) === "[object Object]", Ee = () => {
+};
+function be(...e) {
+  if (e.length !== 1)
+    return re(...e);
+  const t = e[0];
+  return typeof t == "function" ? H(ie(() => ({ get: t, set: Ee }))) : T(t);
+}
+function Ce(e, t) {
+  function r(...s) {
+    return new Promise((i, u) => {
+      Promise.resolve(e(() => t.apply(this, s), { fn: t, thisArg: this, args: s })).then(i).catch(u);
+    });
+  }
+  return r;
+}
+const Q = (e) => e();
+function _e(e = Q, t = {}) {
+  const {
+    initialState: r = "active"
+  } = t, s = be(r === "active");
+  function i() {
+    s.value = !1;
+  }
+  function u() {
+    s.value = !0;
+  }
+  const g = (...c) => {
+    s.value && e(...c);
+  };
+  return { isActive: H(s), pause: i, resume: u, eventFilter: g };
+}
+function k(e) {
+  return Array.isArray(e) ? e : [e];
+}
+function Pe(e) {
+  return oe();
+}
+function qe(e, t, r = {}) {
+  const {
+    eventFilter: s = Q,
+    ...i
+  } = r;
+  return q(
+    e,
+    Ce(
+      s,
+      t
+    ),
+    i
+  );
+}
+function xe(e, t, r = {}) {
+  const {
+    eventFilter: s,
+    initialState: i = "active",
+    ...u
+  } = r, { eventFilter: g, pause: c, resume: d, isActive: p } = _e(s, { initialState: i });
+  return { stop: qe(
+    e,
+    t,
+    {
+      ...u,
+      eventFilter: g
+    }
+  ), pause: c, resume: d, isActive: p };
+}
+function De(e, t = !0, r) {
+  Pe() ? $(e, r) : t ? e() : B(e);
+}
+function Oe(e, t, r) {
+  return q(
+    e,
+    t,
+    {
+      ...r,
+      immediate: !0
+    }
+  );
+}
+const R = he ? window : void 0;
+function Re(e) {
+  var t;
+  const r = C(e);
+  return (t = r == null ? void 0 : r.$el) != null ? t : r;
+}
+function I(...e) {
+  const t = [], r = () => {
+    t.forEach((c) => c()), t.length = 0;
+  }, s = (c, d, p, w) => (c.addEventListener(d, p, w), () => c.removeEventListener(d, p, w)), i = J(() => {
+    const c = k(C(e[0])).filter((d) => d != null);
+    return c.every((d) => typeof d != "string") ? c : void 0;
+  }), u = Oe(
+    () => {
+      var c, d;
+      return [
+        (d = (c = i.value) == null ? void 0 : c.map((p) => Re(p))) != null ? d : [R].filter((p) => p != null),
+        k(C(i.value ? e[1] : e[0])),
+        k(M(i.value ? e[2] : e[1])),
+        // @ts-expect-error - TypeScript gets the correct types, but somehow still complains
+        C(i.value ? e[3] : e[2])
+      ];
+    },
+    ([c, d, p, w]) => {
+      if (r(), !(c != null && c.length) || !(d != null && d.length) || !(p != null && p.length))
+        return;
+      const n = Se(w) ? { ...w } : w;
+      t.push(
+        ...c.flatMap(
+          (o) => d.flatMap(
+            (f) => p.map((h) => s(o, f, h, n))
+          )
+        )
+      );
+    },
+    { flush: "post" }
+  ), g = () => {
+    u(), r();
+  };
+  return ge(r), g;
+}
+const x = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, D = "__vueuse_ssr_handlers__", Te = /* @__PURE__ */ ke();
+function ke() {
+  return D in x || (x[D] = x[D] || {}), x[D];
+}
+function Ne(e, t) {
+  return Te[e] || t;
+}
+function Ae(e) {
+  return e == null ? "any" : e instanceof Set ? "set" : e instanceof Map ? "map" : e instanceof Date ? "date" : typeof e == "boolean" ? "boolean" : typeof e == "string" ? "string" : typeof e == "object" ? "object" : Number.isNaN(e) ? "any" : "number";
+}
+const We = {
+  boolean: {
+    read: (e) => e === "true",
+    write: (e) => String(e)
+  },
+  object: {
+    read: (e) => JSON.parse(e),
+    write: (e) => JSON.stringify(e)
+  },
+  number: {
+    read: (e) => Number.parseFloat(e),
+    write: (e) => String(e)
+  },
+  any: {
+    read: (e) => e,
+    write: (e) => String(e)
+  },
+  string: {
+    read: (e) => e,
+    write: (e) => String(e)
+  },
+  map: {
+    read: (e) => new Map(JSON.parse(e)),
+    write: (e) => JSON.stringify(Array.from(e.entries()))
+  },
+  set: {
+    read: (e) => new Set(JSON.parse(e)),
+    write: (e) => JSON.stringify(Array.from(e))
+  },
+  date: {
+    read: (e) => new Date(e),
+    write: (e) => e.toISOString()
+  }
+}, z = "vueuse-storage";
+function Me(e, t, r, s = {}) {
+  var i;
+  const {
+    flush: u = "pre",
+    deep: g = !0,
+    listenToStorageChanges: c = !0,
+    writeDefaults: d = !0,
+    mergeDefaults: p = !1,
+    shallow: w,
+    window: n = R,
+    eventFilter: o,
+    onError: f = (l) => {
+      console.error(l);
+    },
+    initOnMounted: h
+  } = s, a = (w ? A : T)(t), v = J(() => C(e));
+  if (!r)
+    try {
+      r = Ne("getDefaultStorage", () => {
+        var l;
+        return (l = R) == null ? void 0 : l.localStorage;
+      })();
+    } catch (l) {
+      f(l);
+    }
+  if (!r)
+    return a;
+  const E = C(t), L = Ae(E), _ = (i = s.serializer) != null ? i : We[L], { pause: G, resume: j } = xe(
+    a,
+    () => K(a.value),
+    { flush: u, deep: g, eventFilter: o }
+  );
+  q(v, () => P(), { flush: u }), n && c && De(() => {
+    r instanceof Storage ? I(n, "storage", P, { passive: !0 }) : I(n, z, Y), h && P();
+  }), h || P();
+  function V(l, m) {
+    if (n) {
+      const S = {
+        key: v.value,
+        oldValue: l,
+        newValue: m,
+        storageArea: r
+      };
+      n.dispatchEvent(r instanceof Storage ? new StorageEvent("storage", S) : new CustomEvent(z, {
+        detail: S
+      }));
+    }
+  }
+  function K(l) {
+    try {
+      const m = r.getItem(v.value);
+      if (l == null)
+        V(m, null), r.removeItem(v.value);
+      else {
+        const S = _.write(l);
+        m !== S && (r.setItem(v.value, S), V(m, S));
+      }
+    } catch (m) {
+      f(m);
+    }
+  }
+  function U(l) {
+    const m = l ? l.newValue : r.getItem(v.value);
+    if (m == null)
+      return d && E != null && r.setItem(v.value, _.write(E)), E;
+    if (!l && p) {
+      const S = _.read(m);
+      return typeof p == "function" ? p(S, E) : L === "object" && !Array.isArray(S) ? { ...E, ...S } : S;
+    } else return typeof m != "string" ? m : _.read(m);
+  }
+  function P(l) {
+    if (!(l && l.storageArea !== r)) {
+      if (l && l.key == null) {
+        a.value = E;
+        return;
+      }
+      if (!(l && l.key !== v.value)) {
+        G();
+        try {
+          (l == null ? void 0 : l.newValue) !== _.write(a.value) && (a.value = U(l));
+        } catch (m) {
+          f(m);
+        } finally {
+          l ? B(j) : j();
+        }
+      }
+    }
+  }
+  function Y(l) {
+    P(l.detail);
+  }
+  return a;
+}
+function Fe(e, t, r = {}) {
+  const { window: s = R } = r;
+  return Me(e, t, s == null ? void 0 : s.localStorage, r);
+}
+const Ve = /* @__PURE__ */ F({
+  __name: "PCDevtoolsWrapper",
+  setup(e) {
+    const t = T(!1), r = Fe("pinia-colada-devtools-open", !1);
+    async function s() {
+      if (!t.value && (t.value = !0, !customElements.get("pinia-colada-devtools-panel"))) {
+        const { DevtoolsPanel: u } = await import("@pinia/colada-devtools/panel");
+        customElements.define("pinia-colada-devtools-panel", u);
+      }
+    }
+    async function i() {
+      await s(), r.value = !0;
+    }
+    return $(() => {
+      requestIdleCallback(() => {
+        import("@pinia/colada-devtools/panel");
+      }), r.value && i();
+    }), (u, g) => (O(), W(ve, null, {
+      default: le(() => [
+        M(r) ? N("", !0) : (O(), ue("button", {
+          key: 0,
+          class: "fixed bottom-2 right-2 bg-primary-500 hover:cursor-pointer z-99999",
+          onClick: g[0] || (g[0] = (c) => i())
+        }, " 🍹 Devtools ")),
+        t.value && M(r) ? (O(), W(ye, { key: 1 })) : N("", !0)
+      ]),
+      _: 1
+    }));
+  }
+});
+export {
+  Ve as PiniaColadaDevtools
+};
+//# sourceMappingURL=index.js.map