@reckona/mreact-devtools 0.0.152 → 0.0.153

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/overlay.d.ts.map +1 -1
  2. package/dist/overlay.js +17 -1
  3. package/dist/overlay.js.map +1 -1
  4. package/package.json +1 -1
  5. package/src/overlay.ts +19 -1
package/dist/overlay.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../src/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,QAAQ,EAEd,MAAM,YAAY,CAAC;AAEpB,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAE5E,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAC;AAEjE,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAChC,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,IAAI,IAAI,CAAC;IAChB,OAAO,EAAE,WAAW,CAAC;CACtB;AAeD,wBAAgB,oBAAoB,CAClC,OAAO,GAAE,sBAA2B,GACnC,sBAAsB,CAiIxB"}
1
+ {"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../src/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,QAAQ,EAEd,MAAM,YAAY,CAAC;AAEpB,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAE5E,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAC;AAEjE,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAChC,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,IAAI,IAAI,CAAC;IAChB,OAAO,EAAE,WAAW,CAAC;CACtB;AAgBD,wBAAgB,oBAAoB,CAClC,OAAO,GAAE,sBAA2B,GACnC,sBAAsB,CAiIxB"}
package/dist/overlay.js CHANGED
@@ -5,6 +5,7 @@ const tabs = [
5
5
  { label: "Router", tab: "router" },
6
6
  ];
7
7
  const defaultMaxEvents = 200;
8
+ const maxEventDetailsLength = 4_000;
8
9
  export function mountDevtoolsOverlay(options = {}) {
9
10
  const ownerDocument = options.document ?? documentFromGlobal();
10
11
  const maxEvents = normalizeMaxEvents(options.maxEvents);
@@ -158,7 +159,22 @@ function renderEvent(doc, event) {
158
159
  }
159
160
  function eventDetails(event) {
160
161
  const { package: _packageName, timestamp: _timestamp, type: _type, ...details } = event;
161
- return Object.keys(details).length === 0 ? "{}" : JSON.stringify(details);
162
+ if (Object.keys(details).length === 0) {
163
+ return "{}";
164
+ }
165
+ let serialized;
166
+ try {
167
+ serialized = JSON.stringify(details);
168
+ }
169
+ catch {
170
+ serialized = "[unserializable]";
171
+ }
172
+ if (serialized === undefined) {
173
+ return "{}";
174
+ }
175
+ return serialized.length > maxEventDetailsLength
176
+ ? `${serialized.slice(0, maxEventDetailsLength)}...`
177
+ : serialized;
162
178
  }
163
179
  function eventTab(event) {
164
180
  const search = `${event.package} ${event.type}`.toLowerCase();
package/dist/overlay.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"overlay.js","sourceRoot":"","sources":["../src/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,oBAAoB,EACpB,eAAe,GAGhB,MAAM,YAAY,CAAC;AAuBpB,MAAM,IAAI,GAA6B;IACrC,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,UAAU,EAAE;IACtC,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE;IAChC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE;CACnC,CAAC;AAEF,MAAM,gBAAgB,GAAG,GAAG,CAAC;AAE7B,MAAM,UAAU,oBAAoB,CAClC,UAAkC,EAAE;IAEpC,MAAM,aAAa,GAAG,OAAO,CAAC,QAAQ,IAAI,kBAAkB,EAAE,CAAC;IAC/D,MAAM,SAAS,GAAG,kBAAkB,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IACxD,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,IAAI,oBAAoB,EAAE,IAAI,eAAe,CAAC,cAAc,EAAE,CAAC,CAAC;IACjG,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC;IACnD,MAAM,OAAO,GAAG,aAAa,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IACvD,MAAM,OAAO,GAAG,aAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACnD,MAAM,SAAS,GAAG,aAAa,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IACpD,IAAI,SAAS,GAAuB,UAAU,CAAC;IAC/C,IAAI,QAAQ,GAAG,KAAK,CAAC;IACrB,IAAI,eAAe,GAAG,KAAK,CAAC;IAE5B,OAAO,CAAC,OAAO,CAAC,qBAAqB,GAAG,EAAE,CAAC;IAC3C,OAAO,CAAC,YAAY,CAAC,YAAY,EAAE,iBAAiB,CAAC,CAAC;IACtD,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE;QAC3B,UAAU,EAAE,SAAS;QACrB,MAAM,EAAE,mBAAmB;QAC3B,YAAY,EAAE,KAAK;QACnB,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,+BAA+B;QAC1C,KAAK,EAAE,SAAS;QAChB,OAAO,EAAE,MAAM;QACf,IAAI,EAAE,oEAAoE;QAC1E,GAAG,EAAE,KAAK;QACV,SAAS,EAAE,gCAAgC;QAC3C,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,OAAO;QACjB,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,gCAAgC;QACvC,MAAM,EAAE,YAAY;KACrB,CAAC,CAAC;IACH,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE;QAC3B,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,KAAK;QACV,mBAAmB,EAAE,2BAA2B;KACjD,CAAC,CAAC;IACH,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,EAAE;QAC7B,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,KAAK;QACV,SAAS,EAAE,MAAM;QACjB,MAAM,EAAE,GAAG;QACX,QAAQ,EAAE,MAAM;QAChB,OAAO,EAAE,GAAG;KACb,CAAC,CAAC;IAEH,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IACnC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,WAAW,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;QAC/C,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnB,IAAI,MAAM,CAAC,MAAM,GAAG,SAAS,EAAE,CAAC;YAC9B,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;QAC9C,CAAC;QACD,cAAc,EAAE,CAAC;IACnB,CAAC,CAAC,CAAC;IAEH,MAAM,EAAE,CAAC;IAET,OAAO;QACL,QAAQ;QACR,OAAO;YACL,QAAQ,GAAG,IAAI,CAAC;YAChB,WAAW,EAAE,CAAC;YACd,OAAO,CAAC,MAAM,EAAE,CAAC;QACnB,CAAC;QACD,OAAO;KACR,CAAC;IAEF,SAAS,MAAM;QACb,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO;QACT,CAAC;QAED,OAAO,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,SAAS,CAAC,aAAa,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;QAC7E,MAAM,aAAa,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,SAAS,CAAC,CAAC,OAAO,EAAE,CAAC;QAE7F,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC/B,MAAM,KAAK,GAAG,aAAa,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YAChD,KAAK,CAAC,WAAW,GAAG,WAAW,CAAC;YAChC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE;gBACzB,KAAK,EAAE,SAAS;gBAChB,OAAO,EAAE,UAAU;aACpB,CAAC,CAAC;YACH,SAAS,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;YACjC,OAAO;QACT,CAAC;QAED,SAAS,CAAC,eAAe,CAAC,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IAChG,CAAC;IAED,SAAS,cAAc;QACrB,IAAI,eAAe,IAAI,QAAQ,EAAE,CAAC;YAChC,OAAO;QACT,CAAC;QAED,eAAe,GAAG,IAAI,CAAC;QACvB,cAAc,CAAC,GAAG,EAAE;YAClB,eAAe,GAAG,KAAK,CAAC;YACxB,MAAM,EAAE,CAAC;QACX,CAAC,CAAC,CAAC;IACL,CAAC;IAED,SAAS,SAAS,CAAC,GAAa,EAAE,UAAyB;QACzD,MAAM,MAAM,GAAG,GAAG,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC3C,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,UAAU,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC;QAClF,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC;QACvB,MAAM,CAAC,WAAW,GAAG,GAAG,UAAU,CAAC,KAAK,IAAI,KAAK,EAAE,CAAC;QACpD,MAAM,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,UAAU,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC;QAC1E,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE;YAC1B,UAAU,EAAE,UAAU,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YAChE,MAAM,EAAE,mBAAmB;YAC3B,YAAY,EAAE,KAAK;YACnB,KAAK,EAAE,UAAU,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YAC3D,MAAM,EAAE,SAAS;YACjB,IAAI,EAAE,SAAS;YACf,SAAS,EAAE,MAAM;YACjB,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,SAAS;YAClB,YAAY,EAAE,UAAU;YACxB,UAAU,EAAE,QAAQ;SACrB,CAAC,CAAC;QACH,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;YACpC,SAAS,GAAG,UAAU,CAAC,GAAG,CAAC;YAC3B,MAAM,EAAE,CAAC;QACX,CAAC,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC;IAChB,CAAC;AACH,CAAC;AAED,SAAS,WAAW,CAAC,GAAa,EAAE,KAAoB;IACtD,MAAM,IAAI,GAAG,GAAG,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,KAAK,GAAG,GAAG,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACvC,MAAM,IAAI,GAAG,GAAG,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,OAAO,GAAG,GAAG,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAEzC,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC;IAC/B,IAAI,CAAC,WAAW,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,eAAe,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACjG,OAAO,CAAC,WAAW,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IAE1C,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE;QACxB,UAAU,EAAE,SAAS;QACrB,MAAM,EAAE,mBAAmB;QAC3B,YAAY,EAAE,KAAK;QACnB,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,KAAK;QACV,OAAO,EAAE,KAAK;KACf,CAAC,CAAC;IACH,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE;QACzB,KAAK,EAAE,SAAS;QAChB,UAAU,EAAE,KAAK;QACjB,YAAY,EAAE,UAAU;KACzB,CAAC,CAAC;IACH,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE;QACxB,KAAK,EAAE,SAAS;QAChB,YAAY,EAAE,UAAU;KACzB,CAAC,CAAC;IACH,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE;QAC3B,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,GAAG;QACX,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,UAAU;KACvB,CAAC,CAAC;IAEH,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC;IAElC,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAS,YAAY,CAAC,KAAoB;IACxC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,OAAO,EAAE,GAAG,KAAK,CAAC;IAExF,OAAO,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;AAC5E,CAAC;AAED,SAAS,QAAQ,CAAC,KAAoB;IACpC,MAAM,MAAM,GAAG,GAAG,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;IAE9D,IAAI,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC;QAC3F,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,IAAI,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC;QAC5D,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,OAAO,UAAU,CAAC;AACpB,CAAC;AAED,SAAS,eAAe,CAAC,SAA6B;IACpD,OAAO,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;AAChF,CAAC;AAED,SAAS,kBAAkB,CAAC,KAAyB;IACnD,OAAO,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,GAAG,CAAC;QAC/D,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;QACnB,CAAC,CAAC,gBAAgB,CAAC;AACvB,CAAC;AAED,SAAS,kBAAkB;IACzB,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACpC,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;IACvE,CAAC;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC","sourcesContent":["import {\n createDevtools,\n getInstalledDevtools,\n installDevtools,\n type Devtools,\n type DevtoolsEvent,\n} from \"./index.js\";\n\nexport type { Devtools, DevtoolsEvent, DevtoolsListener } from \"./index.js\";\n\nexport type DevtoolsOverlayTab = \"query\" | \"reactive\" | \"router\";\n\nexport interface DevtoolsOverlayOptions {\n devtools?: Devtools | undefined;\n document?: Document | undefined;\n maxEvents?: number | undefined;\n}\n\nexport interface MountedDevtoolsOverlay {\n devtools: Devtools;\n dispose(): void;\n element: HTMLElement;\n}\n\ninterface TabDefinition {\n label: string;\n tab: DevtoolsOverlayTab;\n}\n\nconst tabs: readonly TabDefinition[] = [\n { label: \"Reactive\", tab: \"reactive\" },\n { label: \"Query\", tab: \"query\" },\n { label: \"Router\", tab: \"router\" },\n];\n\nconst defaultMaxEvents = 200;\n\nexport function mountDevtoolsOverlay(\n options: DevtoolsOverlayOptions = {},\n): MountedDevtoolsOverlay {\n const ownerDocument = options.document ?? documentFromGlobal();\n const maxEvents = normalizeMaxEvents(options.maxEvents);\n const devtools = options.devtools ?? getInstalledDevtools() ?? installDevtools(createDevtools());\n const events = devtools.events().slice(-maxEvents);\n const element = ownerDocument.createElement(\"section\");\n const tabList = ownerDocument.createElement(\"nav\");\n const eventList = ownerDocument.createElement(\"ol\");\n let activeTab: DevtoolsOverlayTab = \"reactive\";\n let disposed = false;\n let renderScheduled = false;\n\n element.dataset.mreactDevtoolsOverlay = \"\";\n element.setAttribute(\"aria-label\", \"mreact devtools\");\n Object.assign(element.style, {\n background: \"#10151f\",\n border: \"1px solid #3b4350\",\n borderRadius: \"8px\",\n bottom: \"16px\",\n boxShadow: \"0 18px 50px rgb(0 0 0 / 0.35)\",\n color: \"#eef2f8\",\n display: \"grid\",\n font: \"12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace\",\n gap: \"8px\",\n maxHeight: \"min(420px, calc(100vh - 32px))\",\n overflow: \"hidden\",\n padding: \"10px\",\n position: \"fixed\",\n right: \"16px\",\n width: \"min(520px, calc(100vw - 32px))\",\n zIndex: \"2147483647\",\n });\n Object.assign(tabList.style, {\n display: \"grid\",\n gap: \"6px\",\n gridTemplateColumns: \"repeat(3, minmax(0, 1fr))\",\n });\n Object.assign(eventList.style, {\n display: \"grid\",\n gap: \"6px\",\n listStyle: \"none\",\n margin: \"0\",\n overflow: \"auto\",\n padding: \"0\",\n });\n\n element.append(tabList, eventList);\n ownerDocument.body.append(element);\n\n const unsubscribe = devtools.subscribe((event) => {\n events.push(event);\n if (events.length > maxEvents) {\n events.splice(0, events.length - maxEvents);\n }\n scheduleRender();\n });\n\n render();\n\n return {\n devtools,\n dispose() {\n disposed = true;\n unsubscribe();\n element.remove();\n },\n element,\n };\n\n function render(): void {\n if (disposed) {\n return;\n }\n\n tabList.replaceChildren(...tabs.map((tab) => renderTab(ownerDocument, tab)));\n const visibleEvents = [...events].filter((event) => eventTab(event) === activeTab).reverse();\n\n if (visibleEvents.length === 0) {\n const empty = ownerDocument.createElement(\"li\");\n empty.textContent = \"No events\";\n Object.assign(empty.style, {\n color: \"#9aa8bc\",\n padding: \"12px 4px\",\n });\n eventList.replaceChildren(empty);\n return;\n }\n\n eventList.replaceChildren(...visibleEvents.map((event) => renderEvent(ownerDocument, event)));\n }\n\n function scheduleRender(): void {\n if (renderScheduled || disposed) {\n return;\n }\n\n renderScheduled = true;\n queueMicrotask(() => {\n renderScheduled = false;\n render();\n });\n }\n\n function renderTab(doc: Document, definition: TabDefinition): HTMLButtonElement {\n const button = doc.createElement(\"button\");\n const count = events.filter((event) => eventTab(event) === definition.tab).length;\n button.type = \"button\";\n button.textContent = `${definition.label} ${count}`;\n button.setAttribute(\"aria-pressed\", String(definition.tab === activeTab));\n Object.assign(button.style, {\n background: definition.tab === activeTab ? \"#d8e7ff\" : \"#1b2330\",\n border: \"1px solid #3b4350\",\n borderRadius: \"6px\",\n color: definition.tab === activeTab ? \"#111827\" : \"#d8e7ff\",\n cursor: \"pointer\",\n font: \"inherit\",\n minHeight: \"32px\",\n overflow: \"hidden\",\n padding: \"6px 8px\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n });\n button.addEventListener(\"click\", () => {\n activeTab = definition.tab;\n render();\n });\n\n return button;\n }\n}\n\nfunction renderEvent(doc: Document, event: DevtoolsEvent): HTMLLIElement {\n const item = doc.createElement(\"li\");\n const title = doc.createElement(\"div\");\n const meta = doc.createElement(\"div\");\n const details = doc.createElement(\"pre\");\n\n title.textContent = event.type;\n meta.textContent = [event.package, formatTimestamp(event.timestamp)].filter(Boolean).join(\" | \");\n details.textContent = eventDetails(event);\n\n Object.assign(item.style, {\n background: \"#161d28\",\n border: \"1px solid #303846\",\n borderRadius: \"6px\",\n display: \"grid\",\n gap: \"3px\",\n padding: \"8px\",\n });\n Object.assign(title.style, {\n color: \"#ffffff\",\n fontWeight: \"700\",\n overflowWrap: \"anywhere\",\n });\n Object.assign(meta.style, {\n color: \"#9aa8bc\",\n overflowWrap: \"anywhere\",\n });\n Object.assign(details.style, {\n color: \"#c8d7ec\",\n margin: \"0\",\n overflow: \"auto\",\n whiteSpace: \"pre-wrap\",\n });\n\n item.append(title, meta, details);\n\n return item;\n}\n\nfunction eventDetails(event: DevtoolsEvent): string {\n const { package: _packageName, timestamp: _timestamp, type: _type, ...details } = event;\n\n return Object.keys(details).length === 0 ? \"{}\" : JSON.stringify(details);\n}\n\nfunction eventTab(event: DevtoolsEvent): DevtoolsOverlayTab {\n const search = `${event.package} ${event.type}`.toLowerCase();\n\n if (search.includes(\"router\") || search.includes(\"route\") || search.includes(\"navigation\")) {\n return \"router\";\n }\n\n if (search.includes(\"query\") || search.includes(\"mutation\")) {\n return \"query\";\n }\n\n return \"reactive\";\n}\n\nfunction formatTimestamp(timestamp: number | undefined): string {\n return typeof timestamp === \"number\" ? new Date(timestamp).toISOString() : \"\";\n}\n\nfunction normalizeMaxEvents(value: number | undefined): number {\n return Number.isFinite(value) && value !== undefined && value > 0\n ? Math.floor(value)\n : defaultMaxEvents;\n}\n\nfunction documentFromGlobal(): Document {\n if (typeof document === \"undefined\") {\n throw new Error(\"mountDevtoolsOverlay requires a browser document.\");\n }\n\n return document;\n}\n"]}
1
+ {"version":3,"file":"overlay.js","sourceRoot":"","sources":["../src/overlay.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n createDevtools,\n getInstalledDevtools,\n installDevtools,\n type Devtools,\n type DevtoolsEvent,\n} from \"./index.js\";\n\nexport type { Devtools, DevtoolsEvent, DevtoolsListener } from \"./index.js\";\n\nexport type DevtoolsOverlayTab = \"query\" | \"reactive\" | \"router\";\n\nexport interface DevtoolsOverlayOptions {\n devtools?: Devtools | undefined;\n document?: Document | undefined;\n maxEvents?: number | undefined;\n}\n\nexport interface MountedDevtoolsOverlay {\n devtools: Devtools;\n dispose(): void;\n element: HTMLElement;\n}\n\ninterface TabDefinition {\n label: string;\n tab: DevtoolsOverlayTab;\n}\n\nconst tabs: readonly TabDefinition[] = [\n { label: \"Reactive\", tab: \"reactive\" },\n { label: \"Query\", tab: \"query\" },\n { label: \"Router\", tab: \"router\" },\n];\n\nconst defaultMaxEvents = 200;\nconst maxEventDetailsLength = 4_000;\n\nexport function mountDevtoolsOverlay(\n options: DevtoolsOverlayOptions = {},\n): MountedDevtoolsOverlay {\n const ownerDocument = options.document ?? documentFromGlobal();\n const maxEvents = normalizeMaxEvents(options.maxEvents);\n const devtools = options.devtools ?? getInstalledDevtools() ?? installDevtools(createDevtools());\n const events = devtools.events().slice(-maxEvents);\n const element = ownerDocument.createElement(\"section\");\n const tabList = ownerDocument.createElement(\"nav\");\n const eventList = ownerDocument.createElement(\"ol\");\n let activeTab: DevtoolsOverlayTab = \"reactive\";\n let disposed = false;\n let renderScheduled = false;\n\n element.dataset.mreactDevtoolsOverlay = \"\";\n element.setAttribute(\"aria-label\", \"mreact devtools\");\n Object.assign(element.style, {\n background: \"#10151f\",\n border: \"1px solid #3b4350\",\n borderRadius: \"8px\",\n bottom: \"16px\",\n boxShadow: \"0 18px 50px rgb(0 0 0 / 0.35)\",\n color: \"#eef2f8\",\n display: \"grid\",\n font: \"12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace\",\n gap: \"8px\",\n maxHeight: \"min(420px, calc(100vh - 32px))\",\n overflow: \"hidden\",\n padding: \"10px\",\n position: \"fixed\",\n right: \"16px\",\n width: \"min(520px, calc(100vw - 32px))\",\n zIndex: \"2147483647\",\n });\n Object.assign(tabList.style, {\n display: \"grid\",\n gap: \"6px\",\n gridTemplateColumns: \"repeat(3, minmax(0, 1fr))\",\n });\n Object.assign(eventList.style, {\n display: \"grid\",\n gap: \"6px\",\n listStyle: \"none\",\n margin: \"0\",\n overflow: \"auto\",\n padding: \"0\",\n });\n\n element.append(tabList, eventList);\n ownerDocument.body.append(element);\n\n const unsubscribe = devtools.subscribe((event) => {\n events.push(event);\n if (events.length > maxEvents) {\n events.splice(0, events.length - maxEvents);\n }\n scheduleRender();\n });\n\n render();\n\n return {\n devtools,\n dispose() {\n disposed = true;\n unsubscribe();\n element.remove();\n },\n element,\n };\n\n function render(): void {\n if (disposed) {\n return;\n }\n\n tabList.replaceChildren(...tabs.map((tab) => renderTab(ownerDocument, tab)));\n const visibleEvents = [...events].filter((event) => eventTab(event) === activeTab).reverse();\n\n if (visibleEvents.length === 0) {\n const empty = ownerDocument.createElement(\"li\");\n empty.textContent = \"No events\";\n Object.assign(empty.style, {\n color: \"#9aa8bc\",\n padding: \"12px 4px\",\n });\n eventList.replaceChildren(empty);\n return;\n }\n\n eventList.replaceChildren(...visibleEvents.map((event) => renderEvent(ownerDocument, event)));\n }\n\n function scheduleRender(): void {\n if (renderScheduled || disposed) {\n return;\n }\n\n renderScheduled = true;\n queueMicrotask(() => {\n renderScheduled = false;\n render();\n });\n }\n\n function renderTab(doc: Document, definition: TabDefinition): HTMLButtonElement {\n const button = doc.createElement(\"button\");\n const count = events.filter((event) => eventTab(event) === definition.tab).length;\n button.type = \"button\";\n button.textContent = `${definition.label} ${count}`;\n button.setAttribute(\"aria-pressed\", String(definition.tab === activeTab));\n Object.assign(button.style, {\n background: definition.tab === activeTab ? \"#d8e7ff\" : \"#1b2330\",\n border: \"1px solid #3b4350\",\n borderRadius: \"6px\",\n color: definition.tab === activeTab ? \"#111827\" : \"#d8e7ff\",\n cursor: \"pointer\",\n font: \"inherit\",\n minHeight: \"32px\",\n overflow: \"hidden\",\n padding: \"6px 8px\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n });\n button.addEventListener(\"click\", () => {\n activeTab = definition.tab;\n render();\n });\n\n return button;\n }\n}\n\nfunction renderEvent(doc: Document, event: DevtoolsEvent): HTMLLIElement {\n const item = doc.createElement(\"li\");\n const title = doc.createElement(\"div\");\n const meta = doc.createElement(\"div\");\n const details = doc.createElement(\"pre\");\n\n title.textContent = event.type;\n meta.textContent = [event.package, formatTimestamp(event.timestamp)].filter(Boolean).join(\" | \");\n details.textContent = eventDetails(event);\n\n Object.assign(item.style, {\n background: \"#161d28\",\n border: \"1px solid #303846\",\n borderRadius: \"6px\",\n display: \"grid\",\n gap: \"3px\",\n padding: \"8px\",\n });\n Object.assign(title.style, {\n color: \"#ffffff\",\n fontWeight: \"700\",\n overflowWrap: \"anywhere\",\n });\n Object.assign(meta.style, {\n color: \"#9aa8bc\",\n overflowWrap: \"anywhere\",\n });\n Object.assign(details.style, {\n color: \"#c8d7ec\",\n margin: \"0\",\n overflow: \"auto\",\n whiteSpace: \"pre-wrap\",\n });\n\n item.append(title, meta, details);\n\n return item;\n}\n\nfunction eventDetails(event: DevtoolsEvent): string {\n const { package: _packageName, timestamp: _timestamp, type: _type, ...details } = event;\n\n if (Object.keys(details).length === 0) {\n return \"{}\";\n }\n\n let serialized: string;\n try {\n serialized = JSON.stringify(details);\n } catch {\n serialized = \"[unserializable]\";\n }\n\n if (serialized === undefined) {\n return \"{}\";\n }\n\n return serialized.length > maxEventDetailsLength\n ? `${serialized.slice(0, maxEventDetailsLength)}...`\n : serialized;\n}\n\nfunction eventTab(event: DevtoolsEvent): DevtoolsOverlayTab {\n const search = `${event.package} ${event.type}`.toLowerCase();\n\n if (search.includes(\"router\") || search.includes(\"route\") || search.includes(\"navigation\")) {\n return \"router\";\n }\n\n if (search.includes(\"query\") || search.includes(\"mutation\")) {\n return \"query\";\n }\n\n return \"reactive\";\n}\n\nfunction formatTimestamp(timestamp: number | undefined): string {\n return typeof timestamp === \"number\" ? new Date(timestamp).toISOString() : \"\";\n}\n\nfunction normalizeMaxEvents(value: number | undefined): number {\n return Number.isFinite(value) && value !== undefined && value > 0\n ? Math.floor(value)\n : defaultMaxEvents;\n}\n\nfunction documentFromGlobal(): Document {\n if (typeof document === \"undefined\") {\n throw new Error(\"mountDevtoolsOverlay requires a browser document.\");\n }\n\n return document;\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reckona/mreact-devtools",
3
- "version": "0.0.152",
3
+ "version": "0.0.153",
4
4
  "description": "Runtime event bridge for mreact developer tooling.",
5
5
  "keywords": [
6
6
  "debugging",
package/src/overlay.ts CHANGED
@@ -34,6 +34,7 @@ const tabs: readonly TabDefinition[] = [
34
34
  ];
35
35
 
36
36
  const defaultMaxEvents = 200;
37
+ const maxEventDetailsLength = 4_000;
37
38
 
38
39
  export function mountDevtoolsOverlay(
39
40
  options: DevtoolsOverlayOptions = {},
@@ -210,7 +211,24 @@ function renderEvent(doc: Document, event: DevtoolsEvent): HTMLLIElement {
210
211
  function eventDetails(event: DevtoolsEvent): string {
211
212
  const { package: _packageName, timestamp: _timestamp, type: _type, ...details } = event;
212
213
 
213
- return Object.keys(details).length === 0 ? "{}" : JSON.stringify(details);
214
+ if (Object.keys(details).length === 0) {
215
+ return "{}";
216
+ }
217
+
218
+ let serialized: string;
219
+ try {
220
+ serialized = JSON.stringify(details);
221
+ } catch {
222
+ serialized = "[unserializable]";
223
+ }
224
+
225
+ if (serialized === undefined) {
226
+ return "{}";
227
+ }
228
+
229
+ return serialized.length > maxEventDetailsLength
230
+ ? `${serialized.slice(0, maxEventDetailsLength)}...`
231
+ : serialized;
214
232
  }
215
233
 
216
234
  function eventTab(event: DevtoolsEvent): DevtoolsOverlayTab {