@har-analyzer/components 0.0.8 → 0.0.9

package/README.md

@@ -114,6 +114,31 @@ function App() {
 
 ---
 
+### HARAnalyzerPreferencesProvider
+
+Provides a persistent context for managing user preferences (like theme, content width, table preferences and board layouts). By default, preferences rely on browser storage. However, you can provide a custom async store (e.g., to save preferences to a backend database or external extension API) by wrapping your application in `HARAnalyzerPreferencesProvider`.
+
+```jsx
+import HARAnalyzerPreferencesProvider from '@har-analyzer/components/har-analyzer-preferences';
+
+// Optional: Custom external store
+const customStore = {
+  getPreference: async (key) => fetch(`/api/prefs/${key}`).then(res => res.text()),
+  setPreference: async (key, value) => { await fetch(`/api/prefs/${key}`, { method: 'POST', body: value }) }
+};
+
+function App() {
+  return (
+    <HARAnalyzerPreferencesProvider store={customStore}>
+      <HARAnalyzer appName="HAR Analyzer" />;
+    </HARAnalyzerPreferencesProvider>
+  );
+}
+
+```
+
+---
+
 ### HAR Utilities
 
 Various types and utilities for working with HTTP Archive (.har) files are directly exported.

package/dist/har-analyzer-preferences.d.ts

@@ -0,0 +1,18 @@
+import { Dispatch } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+import { SetStateAction } from 'react';
+
+declare function HARAnalyzerPreferencesProvider({ store, children }: PropsWithChildren<{
+    store: UserPreferenceStore;
+}>): JSX.Element;
+export default HARAnalyzerPreferencesProvider;
+
+export declare function useHARAnalyzerPreferences<T>(preferenceKey: string, defaultValue: T): readonly [T, Dispatch<SetStateAction<T>>];
+
+declare interface UserPreferenceStore {
+    getPreference: (key: string) => Promise<string | undefined>;
+    setPreference: (key: string, value: string) => Promise<void>;
+}
+
+export { }

package/dist/har-analyzer-preferences.js

@@ -0,0 +1,97 @@
+import { jsx as v } from "react/jsx-runtime";
+import { createContext as D, use as E, useState as F, useCallback as h, useEffect as m } from "react";
+function x(t, e) {
+  try {
+    return JSON.parse(t ?? "");
+  } catch (r) {
+    return console.warn("Failed to parse JSON string:", t, "Error:", r), e;
+  }
+}
+async function i(t, e) {
+  return new Promise((r, n) => {
+    t.addEventListener("success", () => {
+      r(t.result);
+    }), t.addEventListener("error", () => {
+      n(e);
+    });
+  });
+}
+var y = function(t, e, r, n, o) {
+  if (n === "m") throw new TypeError("Private method is not writable");
+  if (n === "a" && !o) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof e == "function" ? t !== e || !o : !e.has(t)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return n === "a" ? o.call(t, r) : o ? o.value = r : e.set(t, r), r;
+}, a = function(t, e, r, n) {
+  if (r === "a" && !n) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof e == "function" ? t !== e || !n : !e.has(t)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return r === "m" ? n : r === "a" ? n.call(t) : n ? n.value : e.get(t);
+}, s, l, c, d, b, g;
+class A {
+  constructor({ name: e }) {
+    s.add(this), l.set(this, void 0), c.set(this, void 0), y(this, l, e, "f");
+  }
+  async getItem(e) {
+    const r = await a(this, s, "m", d).call(this);
+    return i(r.get(e), "Failed to get item");
+  }
+  async setItem(e, r) {
+    const n = await a(this, s, "m", d).call(this);
+    return i(n.put(r, e), "Failed to set item");
+  }
+  async removeItem(e) {
+    const r = await a(this, s, "m", d).call(this);
+    return i(r.delete(e), "Failed to remove item");
+  }
+  async clear() {
+    const e = await a(this, s, "m", d).call(this);
+    return i(e.clear(), "Failed to clear store");
+  }
+}
+l = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), s = /* @__PURE__ */ new WeakSet(), d = async function() {
+  return (await a(this, s, "m", b).call(this)).transaction("store", "readwrite").objectStore("store");
+}, b = async function() {
+  return a(this, c, "f") === void 0 && y(this, c, a(this, s, "m", g).call(this), "f"), a(this, c, "f");
+}, g = async function() {
+  const e = indexedDB.open(a(this, l, "f"), 1);
+  return e.addEventListener("upgradeneeded", () => {
+    e.result.createObjectStore("store");
+  }), i(e, "Failed to open IndexedDB");
+};
+const _ = new A({ name: "node_modules/local-db-storage" }), p = {
+  get: async (t) => await _.getItem(t),
+  set: async (t, e) => {
+    await _.setItem(t, e);
+  }
+}, P = D(void 0);
+function T({ store: t, children: e }) {
+  return /* @__PURE__ */ v(P, { value: t, children: e });
+}
+const C = {
+  getPreference: p.get,
+  setPreference: p.set
+};
+function z(t, e) {
+  let r = E(P);
+  r || (console.warn("Invoked outside of HARAnalyzerPreferencesProvider. Falling back to use fallback preferences store."), r = C);
+  const [n, o] = F(e), f = h(async () => {
+    const u = await r.getPreference(t), S = x(u, e);
+    o(S);
+  }, [r, t, e]);
+  m(() => {
+    f();
+  }, [f]);
+  const w = h(async () => {
+    try {
+      await r.setPreference(t, JSON.stringify(n));
+    } catch (u) {
+      console.error(`Failed to update preference for key ${t}:`, u);
+    }
+  }, [r, t, n]);
+  return m(() => {
+    w();
+  }, [w]), [n, o];
+}
+export {
+  T as default,
+  z as useHARAnalyzerPreferences
+};

package/dist/har-analyzer.js

@@ -1,88 +1,88 @@
 import { jsx as e, jsxs as i, Fragment as F } from "react/jsx-runtime";
 import { useEffect as N, useState as a } from "react";
-import v from "@cloudscape-design/components/app-layout";
-import { I18nProvider as D } from "@cloudscape-design/components/i18n";
-import R from "@cloudscape-design/components/i18n/messages/all.en";
-import { u as p } from "./chunks/index2.js";
-import T from "@cloudscape-design/components/header";
-import { borderWidthAlert as b, colorBorderDividerDefault as y } from "@cloudscape-design/design-tokens";
+import R from "@cloudscape-design/components/app-layout";
+import { I18nProvider as v } from "@cloudscape-design/components/i18n";
+import y from "@cloudscape-design/components/i18n/messages/all.en";
+import { useHARAnalyzerPreferences as p } from "./har-analyzer-preferences.js";
+import D from "@cloudscape-design/components/header";
+import { borderWidthAlert as T, colorBorderDividerDefault as b } from "@cloudscape-design/design-tokens";
 import { H as E } from "./chunks/index.js";
-import l from "@cloudscape-design/components/box";
-import c from "@cloudscape-design/components/button";
+import c from "@cloudscape-design/components/box";
+import l from "@cloudscape-design/components/button";
 import M from "@cloudscape-design/components/modal";
-import { V as u } from "./chunks/vertical-gap.js";
-import f from "@cloudscape-design/components/toggle";
-import { Mode as m, applyMode as S } from "@cloudscape-design/global-styles";
-import W from "./har-file-uploader.js";
-import I from "./har-content-viewer.js";
+import { V as f } from "./chunks/vertical-gap.js";
+import u from "@cloudscape-design/components/toggle";
+import { Mode as m, applyMode as W } from "@cloudscape-design/global-styles";
+import I from "./har-file-uploader.js";
+import S from "./har-content-viewer.js";
 function A() {
   return p("isFullContentWidth", !1);
 }
-const g = "top-navigation", d = "blur(16px)";
-function L({
+function U() {
+  return p("isDarkTheme", !1);
+}
+const k = "top-navigation", d = "blur(16px)";
+function _({
   logo: t,
-  appName: r,
-  utilities: o
+  appName: o,
+  utilities: r
 }) {
   return /* @__PURE__ */ e(
     "nav",
     {
-      id: g,
+      id: k,
       style: {
         position: "sticky",
         top: 0,
         zIndex: 1002,
         padding: "0.5rem 1rem",
-        borderBlockEnd: `${b} solid ${y}`,
+        borderBlockEnd: `${T} solid ${b}`,
         backdropFilter: d,
         WebkitBackdropFilter: d
         // for Safari
       },
-      children: /* @__PURE__ */ e(T, { actions: o, children: /* @__PURE__ */ i(E, { children: [
+      children: /* @__PURE__ */ e(D, { actions: r, children: /* @__PURE__ */ i(E, { children: [
         t,
-        r
+        o
       ] }) })
     }
   );
 }
-function U() {
-  const [t, r] = A();
-  return /* @__PURE__ */ e(f, { onChange: ({ detail: o }) => {
-    r(o.checked);
+function x() {
+  const [t, o] = A();
+  return /* @__PURE__ */ e(u, { onChange: ({ detail: r }) => {
+    o(r.checked);
   }, checked: t, children: "Use entire screen width" });
 }
-function _() {
-  return p("isDarkTheme", !1);
-}
-function x() {
-  const [t, r] = _();
+function L() {
+  const [t, o] = U();
   return N(() => {
-    const o = t ? m.Dark : m.Light;
-    S(o);
-  }, [t]), /* @__PURE__ */ e(f, { onChange: ({ detail: o }) => {
-    r(o.checked);
+    const r = t ? m.Dark : m.Light;
+    W(r);
+  }, [t]), /* @__PURE__ */ e(u, { onChange: ({ detail: r }) => {
+    o(r.checked);
   }, checked: t, children: "Use dark theme" });
 }
 function V() {
-  const [t, r] = a(!1), o = () => {
-    r(!0);
+  const [t, o] = a(!1), r = () => {
+    o(!0);
   }, n = () => {
-    r(!1);
+    o(!1);
   };
   return /* @__PURE__ */ i(F, { children: [
-    /* @__PURE__ */ e(c, { iconName: "settings", variant: "icon", onClick: o }),
+    /* @__PURE__ */ e(l, { iconName: "settings", variant: "icon", onClick: r }),
     /* @__PURE__ */ i(
       M,
       {
         visible: t,
         onDismiss: n,
         header: "Manage your preferences",
-        footer: /* @__PURE__ */ e(l, { float: "right", children: /* @__PURE__ */ e(c, { variant: "primary", onClick: n, children: "Ok" }) }),
+        footer: /* @__PURE__ */ e(c, { float: "right", children: /* @__PURE__ */ e(l, { variant: "primary", onClick: n, children: "Ok" }) }),
         children: [
-          /* @__PURE__ */ e(l, { margin: { top: "m" } }),
-          /* @__PURE__ */ i(u, { size: "m", children: [
-            /* @__PURE__ */ e(x, {}),
-            /* @__PURE__ */ e(U, {})
+          /* @__PURE__ */ e(c, { margin: { top: "m" } }),
+          /* @__PURE__ */ i(f, { size: "m", children: [
+            /* @__PURE__ */ e(L, {}),
+            /* @__PURE__ */ e(x, {})
           ] })
         ]
       }
@@ -91,37 +91,37 @@ function V() {
 }
 function w({
   logo: t,
-  appName: r,
-  content: o
+  appName: o,
+  content: r
 }) {
   const [n] = A();
-  return /* @__PURE__ */ i(D, { locale: "en", messages: [R], children: [
-    /* @__PURE__ */ e(L, { logo: t, appName: r, utilities: /* @__PURE__ */ e(V, {}) }),
+  return /* @__PURE__ */ i(v, { locale: "en", messages: [y], children: [
+    /* @__PURE__ */ e(_, { logo: t, appName: o, utilities: /* @__PURE__ */ e(V, {}) }),
     /* @__PURE__ */ e(
-      v,
+      R,
       {
-        headerSelector: `#${g}`,
+        headerSelector: `#${k}`,
         navigationHide: !0,
         toolsHide: !0,
         maxContentWidth: n ? Number.MAX_VALUE : void 0,
-        content: o
+        content: r
       }
     )
   ] });
 }
 const h = "unknown.har";
-function ne({ logo: t, appName: r = "HAR Analyzer" }) {
-  const [o, n] = a(h), [s, k] = a();
+function ne({ logo: t, appName: o = "HAR Analyzer" }) {
+  const [r, n] = a(h), [s, C] = a();
   return /* @__PURE__ */ e(
     w,
     {
       logo: t,
-      appName: r,
-      content: /* @__PURE__ */ i(u, { children: [
-        /* @__PURE__ */ e(W, { onChange: ({ harContent: C, harFileName: H }) => {
-          k(C), n(H ?? h);
+      appName: o,
+      content: /* @__PURE__ */ i(f, { children: [
+        /* @__PURE__ */ e(I, { onChange: ({ harContent: g, harFileName: H }) => {
+          C(g), n(H ?? h);
         } }),
-        s && /* @__PURE__ */ e(I, { harFileName: o, harContent: s })
+        s && /* @__PURE__ */ e(S, { harFileName: r, harContent: s })
       ] })
     }
   );

package/dist/har-content-viewer.js

@@ -5,9 +5,10 @@ import $ from "@cloudscape-design/board-components/board-item";
 import b from "@cloudscape-design/components/button";
 import H from "@cloudscape-design/components/header";
 import { u as C } from "./chunks/index.js";
-import { u as B, H as z } from "./chunks/index2.js";
-import L from "./har-entry-viewer.js";
-import { a as _ } from "./chunks/har.js";
+import z from "./har-entries-viewer.js";
+import B from "./har-entry-viewer.js";
+import { useHARAnalyzerPreferences as _ } from "./har-analyzer-preferences.js";
+import { a as L } from "./chunks/har.js";
 const F = {
   dragHandleAriaLabel: "Drag handle",
   dragHandleAriaDescription: "Use Space or Enter to activate drag, arrow keys to move, Space or Enter to submit, or Escape to discard. Be sure to temporarily disable any screen reader navigation feature that may interfere with the functionality of the arrow keys.",
@@ -15,8 +16,8 @@ const F = {
   resizeHandleAriaDescription: "Use Space or Enter to activate resize, arrow keys to move, Space or Enter to submit, or Escape to discard. Be sure to temporarily disable any screen reader navigation feature that may interfere with the functionality of the arrow keys."
 };
 function d(e, n, t) {
-  const i = n.length > 0 ? `Conflicts with ${n.map((r) => r.id).join(", ")}.` : "", s = t.length > 0 ? `Disturbed ${t.length} items.` : "";
-  return [e, i, s].filter(Boolean).join(" ");
+  const r = n.length > 0 ? `Conflicts with ${n.map((i) => i.id).join(", ")}.` : "", s = t.length > 0 ? `Disturbed ${t.length} items.` : "";
+  return [e, r, s].filter(Boolean).join(" ");
 }
 const N = {
   liveAnnouncementDndStarted: (e) => e === "resize" ? "Resizing" : "Dragging",
@@ -29,8 +30,8 @@ const N = {
     );
   },
   liveAnnouncementDndItemResized: (e) => {
-    const n = e.isMinimalColumnsReached ? " (minimal)" : "", t = e.isMinimalRowsReached ? " (minimal)" : "", i = e.direction === "horizontal" ? `columns ${e.placement.width}${n}` : `rows ${e.placement.height}${t}`;
-    return d(`Item resized to ${i}.`, e.conflicts, e.disturbed);
+    const n = e.isMinimalColumnsReached ? " (minimal)" : "", t = e.isMinimalRowsReached ? " (minimal)" : "", r = e.direction === "horizontal" ? `columns ${e.placement.width}${n}` : `rows ${e.placement.height}${t}`;
+    return d(`Item resized to ${r}.`, e.conflicts, e.disturbed);
   },
   liveAnnouncementDndItemInserted: (e) => {
     const n = `column ${e.placement.x + 1}`, t = `row ${e.placement.y + 1}`;
@@ -47,7 +48,7 @@ function T(e) {
   const {
     components: n,
     definitions: t,
-    onDefinitionsChange: i,
+    onDefinitionsChange: r,
     empty: s
   } = e;
   return /* @__PURE__ */ o(
@@ -55,14 +56,14 @@ function T(e) {
     {
       i18nStrings: N,
       items: t,
-      renderItem: ({ id: r }, { removeItem: c }) => {
+      renderItem: ({ id: i }, { removeItem: c }) => {
         const {
           title: m,
           content: l,
           actions: u,
           counter: f,
           canRemove: h
-        } = n[r] ?? {};
+        } = n[i] ?? {};
         return /* @__PURE__ */ o(
           $,
           {
@@ -73,15 +74,15 @@ function T(e) {
           }
         );
       },
-      onItemsChange: ({ detail: { items: r } }) => {
-        i(r);
+      onItemsChange: ({ detail: { items: i } }) => {
+        r(i);
       },
       empty: s
     }
   );
 }
 function k(e, n) {
-  return B(`boardDefinitionsPreference_${e}`, n);
+  return _(`boardDefinitionsPreference_${e}`, n);
 }
 const v = 6, D = "har-entries-viewer", E = "selected-har-entry-viewer", R = [
   {
@@ -97,25 +98,25 @@ const v = 6, D = "har-entries-viewer", E = "selected-har-entry-viewer", R = [
     columnSpan: 12
   }
 ];
-function K(e) {
-  const { harFileName: n, harContent: t } = e, i = I(() => _(t), [t]), [s, r] = g(), [c, m] = g(R);
+function Q(e) {
+  const { harFileName: n, harContent: t } = e, r = I(() => L(t), [t]), [s, i] = g(), [c, m] = g(R);
   S(() => {
-    r(void 0);
-  }, [i]);
+    i(void 0);
+  }, [r]);
   const [l, u] = k(
     "har-contents-viewer",
     O
   ), f = (a) => {
     m(a), a.length > 1 && u(a);
   }, h = (a) => {
-    r(a), c.length === 1 && m(l);
+    i(a), c.length === 1 && m(l);
   }, {
     HAREntriesFilters: p,
     filteredHAREntries: A
-  } = C(i), y = {
+  } = C(r), y = {
     [D]: {
       title: n,
-      counter: `(${A.length} / ${i.length})`,
+      counter: `(${A.length} / ${r.length})`,
       actions: /* @__PURE__ */ o(p, {}),
       content: /* @__PURE__ */ o(
         z,
@@ -127,7 +128,7 @@ function K(e) {
     },
     [E]: s ? {
       title: "Details",
-      content: /* @__PURE__ */ o(L, { harEntry: s }),
+      content: /* @__PURE__ */ o(B, { harEntry: s }),
       canRemove: !0
     } : {
       title: "Select an entry to see details",
@@ -145,5 +146,5 @@ function K(e) {
   );
 }
 export {
-  K as default
+  Q as default
 };