@xylabs/react-pixel-debugger 3.0.1 → 3.0.3

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 (37) hide show
  1. package/dist/browser/PixelEvent.cjs +19 -0
  2. package/dist/browser/PixelEvent.cjs.map +1 -0
  3. package/dist/browser/components/PixelDebugger.cjs +105 -0
  4. package/dist/browser/components/PixelDebugger.cjs.map +1 -0
  5. package/dist/browser/components/PixelDebugger.js +33 -8
  6. package/dist/browser/components/PixelDebugger.js.map +1 -1
  7. package/dist/browser/components/PixelDebuggerProvider.cjs +33 -0
  8. package/dist/browser/components/PixelDebuggerProvider.cjs.map +1 -0
  9. package/dist/browser/components/PixelDebuggerProvider.js +3 -2
  10. package/dist/browser/components/PixelDebuggerProvider.js.map +1 -1
  11. package/dist/browser/components/PixelDebuggerToggle.cjs +38 -0
  12. package/dist/browser/components/PixelDebuggerToggle.cjs.map +1 -0
  13. package/dist/browser/components/PixelDebuggerToggle.js +3 -2
  14. package/dist/browser/components/PixelDebuggerToggle.js.map +1 -1
  15. package/dist/browser/components/index.cjs +132 -0
  16. package/dist/browser/components/index.cjs.map +1 -0
  17. package/dist/browser/components/index.js +108 -3
  18. package/dist/browser/components/index.js.map +1 -1
  19. package/dist/browser/hooks/index.cjs +49 -0
  20. package/dist/browser/hooks/index.cjs.map +1 -0
  21. package/dist/browser/hooks/index.js +25 -1
  22. package/dist/browser/hooks/index.js.map +1 -1
  23. package/dist/browser/hooks/usePixelAltSendHandler.cjs +47 -0
  24. package/dist/browser/hooks/usePixelAltSendHandler.cjs.map +1 -0
  25. package/dist/browser/hooks/usePixelAltSendHandler.js +2 -1
  26. package/dist/browser/hooks/usePixelAltSendHandler.js.map +1 -1
  27. package/dist/browser/index.cjs +133 -0
  28. package/dist/browser/index.cjs.map +1 -0
  29. package/dist/browser/index.js +109 -3
  30. package/dist/browser/index.js.map +1 -1
  31. package/package.json +19 -13
  32. package/dist/browser/components/PixelDebugger.stories.js +0 -34
  33. package/dist/browser/components/PixelDebugger.stories.js.map +0 -1
  34. package/dist/node/components/PixelDebugger.stories.js +0 -58
  35. package/dist/node/components/PixelDebugger.stories.js.map +0 -1
  36. package/dist/node/components/PixelDebugger.stories.mjs +0 -34
  37. package/dist/node/components/PixelDebugger.stories.mjs.map +0 -1
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __copyProps = (to, from, except, desc) => {
7
+ if (from && typeof from === "object" || typeof from === "function") {
8
+ for (let key of __getOwnPropNames(from))
9
+ if (!__hasOwnProp.call(to, key) && key !== except)
10
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
11
+ }
12
+ return to;
13
+ };
14
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
15
+
16
+ // src/PixelEvent.ts
17
+ var PixelEvent_exports = {};
18
+ module.exports = __toCommonJS(PixelEvent_exports);
19
+ //# sourceMappingURL=PixelEvent.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/PixelEvent.ts"],"sourcesContent":["export interface PixelEvent {\n event: string\n fields?: unknown\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
@@ -0,0 +1,105 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/components/PixelDebugger.tsx
21
+ var PixelDebugger_exports = {};
22
+ __export(PixelDebugger_exports, {
23
+ PixelDebugger: () => PixelDebugger
24
+ });
25
+ module.exports = __toCommonJS(PixelDebugger_exports);
26
+ var import_material = require("@mui/material");
27
+ var import_react_button = require("@xylabs/react-button");
28
+ var import_react_flexbox = require("@xylabs/react-flexbox");
29
+ var import_react_pixel = require("@xylabs/react-pixel");
30
+ var import_react_portal = require("@xylabs/react-portal");
31
+ var import_react2 = require("react");
32
+
33
+ // src/hooks/usePixelAltSendHandler.ts
34
+ var import_pixel = require("@xylabs/pixel");
35
+ var import_react = require("react");
36
+ var usePixelAltSendHandler = (altHandler) => {
37
+ const [pixelSend, setPixelSend] = (0, import_react.useState)();
38
+ (0, import_react.useEffect)(() => {
39
+ if (!pixelSend && import_pixel.XyPixel.instance.send) {
40
+ const oldHandler = import_pixel.XyPixel.instance.send.bind(import_pixel.XyPixel.instance);
41
+ setPixelSend(oldHandler);
42
+ } else {
43
+ import_pixel.XyPixel.instance.send = async (event, fields, eventId) => {
44
+ altHandler(event, fields);
45
+ return await pixelSend?.(event, fields, eventId);
46
+ };
47
+ }
48
+ return () => {
49
+ if (pixelSend) {
50
+ import_pixel.XyPixel.instance.send = pixelSend;
51
+ }
52
+ };
53
+ }, [pixelSend, altHandler]);
54
+ };
55
+
56
+ // src/components/PixelDebugger.tsx
57
+ var import_jsx_runtime = require("react/jsx-runtime");
58
+ var PixelDebugger = () => {
59
+ const { isDebugging } = (0, import_react2.useContext)(import_react_pixel.DebugUserEventsContext);
60
+ const theme = (0, import_material.useTheme)();
61
+ const [displayEvents, setDisplayEvents] = (0, import_react2.useState)(false);
62
+ const [events, setEvents] = (0, import_react2.useState)([]);
63
+ usePixelAltSendHandler((event, fields) => {
64
+ setEvents((events2) => [{ event, fields }, ...events2]);
65
+ });
66
+ if (!isDebugging) {
67
+ return null;
68
+ }
69
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_portal.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { bottom: 0, left: 0, position: "fixed", width: 350 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Badge, { badgeContent: events.length, color: "primary", sx: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
70
+ import_material.Card,
71
+ {
72
+ variant: "outlined",
73
+ sx: {
74
+ backdropFilter: "blur(16px) saturate(180%)",
75
+ backgroundColor: "rgba(18, 18, 18, .70)",
76
+ overflowY: "auto",
77
+ width: "100%"
78
+ },
79
+ color: theme.palette.primary.main,
80
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { alignItems: "stretch", sx: { flexFlow: "column", maxHeight: 400 }, children: [
81
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexCol, { alignItems: "stretch", sx: { flex: "0 1 auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_button.ButtonEx, { variant: "text", onClick: () => setDisplayEvents(!displayEvents), children: "XY Pixel Debugger" }) }),
82
+ displayEvents && !!events.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
83
+ import_react_flexbox.FlexCol,
84
+ {
85
+ alignItems: "stretch",
86
+ alignContent: "start",
87
+ padding: 2,
88
+ sx: { cursor: "pointer", flex: "1 1 auto", overflowY: "auto", userSelect: "none" },
89
+ children: events.map((e, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PixelEventDetails, { events, index, ...e }, `${e.event}-${index}`))
90
+ }
91
+ ),
92
+ displayEvents && !events.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "subtitle2", children: "No Events" })
93
+ ] })
94
+ }
95
+ ) }) }) });
96
+ };
97
+ var PixelEventDetails = ({ event, fields, index, events }) => {
98
+ const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
99
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { alignItems: "stretch", marginBottom: 0.5, onClick: () => setIsOpen(!isOpen), children: [
100
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "subtitle2", children: event }),
101
+ isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { marginBottom: 0.5, variant: "caption", children: JSON.stringify(fields, null, 2) }),
102
+ events[index + 1] && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Divider, {})
103
+ ] });
104
+ };
105
+ //# sourceMappingURL=PixelDebugger.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/PixelDebugger.tsx","../../../src/hooks/usePixelAltSendHandler.ts"],"sourcesContent":["import { Badge, Card, Divider, Typography, useTheme } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { Portal } from '@xylabs/react-portal'\nimport { useContext, useState } from 'react'\n\nimport { usePixelAltSendHandler } from '../hooks'\nimport { PixelEvent } from '../PixelEvent'\n\nexport const PixelDebugger: React.FC = () => {\n const { isDebugging } = useContext(DebugUserEventsContext)\n //TODO - when adding in the location hook to detect location change, was dropping the setEvents in usePixelAltSendHand\n const theme = useTheme()\n const [displayEvents, setDisplayEvents] = useState(false)\n const [events, setEvents] = useState<PixelEvent[]>([])\n\n usePixelAltSendHandler((event: string, fields?: Record<string, unknown>) => {\n setEvents((events) => [{ event, fields }, ...events])\n })\n\n if (!isDebugging) {\n return null\n }\n\n return (\n <Portal>\n <div style={{ bottom: 0, left: 0, position: 'fixed', width: 350 }}>\n <Badge badgeContent={events.length} color=\"primary\" sx={{ width: '100%' }}>\n <Card\n variant=\"outlined\"\n sx={{\n backdropFilter: 'blur(16px) saturate(180%)',\n backgroundColor: 'rgba(18, 18, 18, .70)',\n overflowY: 'auto',\n width: '100%',\n }}\n color={theme.palette.primary.main}\n >\n <FlexCol alignItems=\"stretch\" sx={{ flexFlow: 'column', maxHeight: 400 }}>\n <FlexCol alignItems=\"stretch\" sx={{ flex: '0 1 auto' }}>\n <ButtonEx variant=\"text\" onClick={() => setDisplayEvents(!displayEvents)}>\n XY Pixel Debugger\n </ButtonEx>\n </FlexCol>\n {displayEvents && !!events.length && (\n <FlexCol\n alignItems=\"stretch\"\n alignContent=\"start\"\n padding={2}\n sx={{ cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' }}\n >\n {events.map((e, index) => (\n <PixelEventDetails key={`${e.event}-${index}`} events={events} index={index} {...e} />\n ))}\n </FlexCol>\n )}\n {displayEvents && !events.length && <Typography variant=\"subtitle2\">No Events</Typography>}\n </FlexCol>\n </Card>\n </Badge>\n </div>\n </Portal>\n )\n}\n\nconst PixelEventDetails: React.FC<PixelEvent & { events: PixelEvent[]; index: number }> = ({ event, fields, index, events }) => {\n const [isOpen, setIsOpen] = useState(false)\n return (\n <FlexCol alignItems=\"stretch\" marginBottom={0.5} onClick={() => setIsOpen(!isOpen)}>\n <Typography variant=\"subtitle2\">{event}</Typography>\n {isOpen && (\n <Typography marginBottom={0.5} variant=\"caption\">\n {JSON.stringify(fields, null, 2)}\n </Typography>\n )}\n {events[index + 1] && <Divider />}\n </FlexCol>\n )\n}\n","import { XyPixel } from '@xylabs/pixel'\nimport { useEffect, useState } from 'react'\n\nexport const usePixelAltSendHandler = (altHandler: (event: string, fields?: Record<string, unknown>) => void) => {\n const [pixelSend, setPixelSend] = useState<typeof XyPixel.instance.send>()\n useEffect(() => {\n if (!pixelSend && XyPixel.instance.send) {\n const oldHandler = XyPixel.instance.send.bind(XyPixel.instance)\n setPixelSend(oldHandler)\n } else {\n XyPixel.instance.send = async (event: string, fields?: Record<string, unknown>, eventId?: string) => {\n altHandler(event, fields)\n return await pixelSend?.(event, fields, eventId)\n }\n }\n return () => {\n //restore send on unmount\n if (pixelSend) {\n XyPixel.instance.send = pixelSend\n }\n }\n }, [pixelSend, altHandler])\n}\n"],"mappings":"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","names":["import_react","events"]}
@@ -1,16 +1,41 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
1
+ // src/components/PixelDebugger.tsx
2
2
  import { Badge, Card, Divider, Typography, useTheme } from "@mui/material";
3
3
  import { ButtonEx } from "@xylabs/react-button";
4
4
  import { FlexCol } from "@xylabs/react-flexbox";
5
5
  import { DebugUserEventsContext } from "@xylabs/react-pixel";
6
6
  import { Portal } from "@xylabs/react-portal";
7
- import { useContext, useState } from "react";
8
- import { usePixelAltSendHandler } from "../hooks";
9
- const PixelDebugger = () => {
7
+ import { useContext, useState as useState2 } from "react";
8
+
9
+ // src/hooks/usePixelAltSendHandler.ts
10
+ import { XyPixel } from "@xylabs/pixel";
11
+ import { useEffect, useState } from "react";
12
+ var usePixelAltSendHandler = (altHandler) => {
13
+ const [pixelSend, setPixelSend] = useState();
14
+ useEffect(() => {
15
+ if (!pixelSend && XyPixel.instance.send) {
16
+ const oldHandler = XyPixel.instance.send.bind(XyPixel.instance);
17
+ setPixelSend(oldHandler);
18
+ } else {
19
+ XyPixel.instance.send = async (event, fields, eventId) => {
20
+ altHandler(event, fields);
21
+ return await pixelSend?.(event, fields, eventId);
22
+ };
23
+ }
24
+ return () => {
25
+ if (pixelSend) {
26
+ XyPixel.instance.send = pixelSend;
27
+ }
28
+ };
29
+ }, [pixelSend, altHandler]);
30
+ };
31
+
32
+ // src/components/PixelDebugger.tsx
33
+ import { jsx, jsxs } from "react/jsx-runtime";
34
+ var PixelDebugger = () => {
10
35
  const { isDebugging } = useContext(DebugUserEventsContext);
11
36
  const theme = useTheme();
12
- const [displayEvents, setDisplayEvents] = useState(false);
13
- const [events, setEvents] = useState([]);
37
+ const [displayEvents, setDisplayEvents] = useState2(false);
38
+ const [events, setEvents] = useState2([]);
14
39
  usePixelAltSendHandler((event, fields) => {
15
40
  setEvents((events2) => [{ event, fields }, ...events2]);
16
41
  });
@@ -45,8 +70,8 @@ const PixelDebugger = () => {
45
70
  }
46
71
  ) }) }) });
47
72
  };
48
- const PixelEventDetails = ({ event, fields, index, events }) => {
49
- const [isOpen, setIsOpen] = useState(false);
73
+ var PixelEventDetails = ({ event, fields, index, events }) => {
74
+ const [isOpen, setIsOpen] = useState2(false);
50
75
  return /* @__PURE__ */ jsxs(FlexCol, { alignItems: "stretch", marginBottom: 0.5, onClick: () => setIsOpen(!isOpen), children: [
51
76
  /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: event }),
52
77
  isOpen && /* @__PURE__ */ jsx(Typography, { marginBottom: 0.5, variant: "caption", children: JSON.stringify(fields, null, 2) }),
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/PixelDebugger.tsx"],"sourcesContent":["import { Badge, Card, Divider, Typography, useTheme } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { Portal } from '@xylabs/react-portal'\nimport { useContext, useState } from 'react'\n\nimport { usePixelAltSendHandler } from '../hooks'\nimport { PixelEvent } from '../PixelEvent'\n\nexport const PixelDebugger: React.FC = () => {\n const { isDebugging } = useContext(DebugUserEventsContext)\n //TODO - when adding in the location hook to detect location change, was dropping the setEvents in usePixelAltSendHand\n const theme = useTheme()\n const [displayEvents, setDisplayEvents] = useState(false)\n const [events, setEvents] = useState<PixelEvent[]>([])\n\n usePixelAltSendHandler((event: string, fields?: Record<string, unknown>) => {\n setEvents((events) => [{ event, fields }, ...events])\n })\n\n if (!isDebugging) {\n return null\n }\n\n return (\n <Portal>\n <div style={{ bottom: 0, left: 0, position: 'fixed', width: 350 }}>\n <Badge badgeContent={events.length} color=\"primary\" sx={{ width: '100%' }}>\n <Card\n variant=\"outlined\"\n sx={{\n backdropFilter: 'blur(16px) saturate(180%)',\n backgroundColor: 'rgba(18, 18, 18, .70)',\n overflowY: 'auto',\n width: '100%',\n }}\n color={theme.palette.primary.main}\n >\n <FlexCol alignItems=\"stretch\" sx={{ flexFlow: 'column', maxHeight: 400 }}>\n <FlexCol alignItems=\"stretch\" sx={{ flex: '0 1 auto' }}>\n <ButtonEx variant=\"text\" onClick={() => setDisplayEvents(!displayEvents)}>\n XY Pixel Debugger\n </ButtonEx>\n </FlexCol>\n {displayEvents && !!events.length && (\n <FlexCol\n alignItems=\"stretch\"\n alignContent=\"start\"\n padding={2}\n sx={{ cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' }}\n >\n {events.map((e, index) => (\n <PixelEventDetails key={`${e.event}-${index}`} events={events} index={index} {...e} />\n ))}\n </FlexCol>\n )}\n {displayEvents && !events.length && <Typography variant=\"subtitle2\">No Events</Typography>}\n </FlexCol>\n </Card>\n </Badge>\n </div>\n </Portal>\n )\n}\n\nconst PixelEventDetails: React.FC<PixelEvent & { events: PixelEvent[]; index: number }> = ({ event, fields, index, events }) => {\n const [isOpen, setIsOpen] = useState(false)\n return (\n <FlexCol alignItems=\"stretch\" marginBottom={0.5} onClick={() => setIsOpen(!isOpen)}>\n <Typography variant=\"subtitle2\">{event}</Typography>\n {isOpen && (\n <Typography marginBottom={0.5} variant=\"caption\">\n {JSON.stringify(fields, null, 2)}\n </Typography>\n )}\n {events[index + 1] && <Divider />}\n </FlexCol>\n )\n}\n"],"mappings":"AAuCY,SAEI,KAFJ;AAvCZ,SAAS,OAAO,MAAM,SAAS,YAAY,gBAAgB;AAC3D,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,8BAA8B;AACvC,SAAS,cAAc;AACvB,SAAS,YAAY,gBAAgB;AAErC,SAAS,8BAA8B;AAGhC,MAAM,gBAA0B,MAAM;AAC3C,QAAM,EAAE,YAAY,IAAI,WAAW,sBAAsB;AAEzD,QAAM,QAAQ,SAAS;AACvB,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AACxD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAuB,CAAC,CAAC;AAErD,yBAAuB,CAAC,OAAe,WAAqC;AAC1E,cAAU,CAACA,YAAW,CAAC,EAAE,OAAO,OAAO,GAAG,GAAGA,OAAM,CAAC;AAAA,EACtD,CAAC;AAED,MAAI,CAAC,aAAa;AAChB,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,UACC,8BAAC,SAAI,OAAO,EAAE,QAAQ,GAAG,MAAM,GAAG,UAAU,SAAS,OAAO,IAAI,GAC9D,8BAAC,SAAM,cAAc,OAAO,QAAQ,OAAM,WAAU,IAAI,EAAE,OAAO,OAAO,GACtE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,IAAI;AAAA,QACF,gBAAgB;AAAA,QAChB,iBAAiB;AAAA,QACjB,WAAW;AAAA,QACX,OAAO;AAAA,MACT;AAAA,MACA,OAAO,MAAM,QAAQ,QAAQ;AAAA,MAE7B,+BAAC,WAAQ,YAAW,WAAU,IAAI,EAAE,UAAU,UAAU,WAAW,IAAI,GACrE;AAAA,4BAAC,WAAQ,YAAW,WAAU,IAAI,EAAE,MAAM,WAAW,GACnD,8BAAC,YAAS,SAAQ,QAAO,SAAS,MAAM,iBAAiB,CAAC,aAAa,GAAG,+BAE1E,GACF;AAAA,QACC,iBAAiB,CAAC,CAAC,OAAO,UACzB;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,cAAa;AAAA,YACb,SAAS;AAAA,YACT,IAAI,EAAE,QAAQ,WAAW,MAAM,YAAY,WAAW,QAAQ,YAAY,OAAO;AAAA,YAEhF,iBAAO,IAAI,CAAC,GAAG,UACd,oBAAC,qBAA8C,QAAgB,OAAe,GAAG,KAAzD,GAAG,EAAE,KAAK,IAAI,KAAK,EAAyC,CACrF;AAAA;AAAA,QACH;AAAA,QAED,iBAAiB,CAAC,OAAO,UAAU,oBAAC,cAAW,SAAQ,aAAY,uBAAS;AAAA,SAC/E;AAAA;AAAA,EACF,GACF,GACF,GACF;AAEJ;AAEA,MAAM,oBAAoF,CAAC,EAAE,OAAO,QAAQ,OAAO,OAAO,MAAM;AAC9H,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,SACE,qBAAC,WAAQ,YAAW,WAAU,cAAc,KAAK,SAAS,MAAM,UAAU,CAAC,MAAM,GAC/E;AAAA,wBAAC,cAAW,SAAQ,aAAa,iBAAM;AAAA,IACtC,UACC,oBAAC,cAAW,cAAc,KAAK,SAAQ,WACpC,eAAK,UAAU,QAAQ,MAAM,CAAC,GACjC;AAAA,IAED,OAAO,QAAQ,CAAC,KAAK,oBAAC,WAAQ;AAAA,KACjC;AAEJ;","names":["events"]}
1
+ {"version":3,"sources":["../../../src/components/PixelDebugger.tsx","../../../src/hooks/usePixelAltSendHandler.ts"],"sourcesContent":["import { Badge, Card, Divider, Typography, useTheme } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { Portal } from '@xylabs/react-portal'\nimport { useContext, useState } from 'react'\n\nimport { usePixelAltSendHandler } from '../hooks'\nimport { PixelEvent } from '../PixelEvent'\n\nexport const PixelDebugger: React.FC = () => {\n const { isDebugging } = useContext(DebugUserEventsContext)\n //TODO - when adding in the location hook to detect location change, was dropping the setEvents in usePixelAltSendHand\n const theme = useTheme()\n const [displayEvents, setDisplayEvents] = useState(false)\n const [events, setEvents] = useState<PixelEvent[]>([])\n\n usePixelAltSendHandler((event: string, fields?: Record<string, unknown>) => {\n setEvents((events) => [{ event, fields }, ...events])\n })\n\n if (!isDebugging) {\n return null\n }\n\n return (\n <Portal>\n <div style={{ bottom: 0, left: 0, position: 'fixed', width: 350 }}>\n <Badge badgeContent={events.length} color=\"primary\" sx={{ width: '100%' }}>\n <Card\n variant=\"outlined\"\n sx={{\n backdropFilter: 'blur(16px) saturate(180%)',\n backgroundColor: 'rgba(18, 18, 18, .70)',\n overflowY: 'auto',\n width: '100%',\n }}\n color={theme.palette.primary.main}\n >\n <FlexCol alignItems=\"stretch\" sx={{ flexFlow: 'column', maxHeight: 400 }}>\n <FlexCol alignItems=\"stretch\" sx={{ flex: '0 1 auto' }}>\n <ButtonEx variant=\"text\" onClick={() => setDisplayEvents(!displayEvents)}>\n XY Pixel Debugger\n </ButtonEx>\n </FlexCol>\n {displayEvents && !!events.length && (\n <FlexCol\n alignItems=\"stretch\"\n alignContent=\"start\"\n padding={2}\n sx={{ cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' }}\n >\n {events.map((e, index) => (\n <PixelEventDetails key={`${e.event}-${index}`} events={events} index={index} {...e} />\n ))}\n </FlexCol>\n )}\n {displayEvents && !events.length && <Typography variant=\"subtitle2\">No Events</Typography>}\n </FlexCol>\n </Card>\n </Badge>\n </div>\n </Portal>\n )\n}\n\nconst PixelEventDetails: React.FC<PixelEvent & { events: PixelEvent[]; index: number }> = ({ event, fields, index, events }) => {\n const [isOpen, setIsOpen] = useState(false)\n return (\n <FlexCol alignItems=\"stretch\" marginBottom={0.5} onClick={() => setIsOpen(!isOpen)}>\n <Typography variant=\"subtitle2\">{event}</Typography>\n {isOpen && (\n <Typography marginBottom={0.5} variant=\"caption\">\n {JSON.stringify(fields, null, 2)}\n </Typography>\n )}\n {events[index + 1] && <Divider />}\n </FlexCol>\n )\n}\n","import { XyPixel } from '@xylabs/pixel'\nimport { useEffect, useState } from 'react'\n\nexport const usePixelAltSendHandler = (altHandler: (event: string, fields?: Record<string, unknown>) => void) => {\n const [pixelSend, setPixelSend] = useState<typeof XyPixel.instance.send>()\n useEffect(() => {\n if (!pixelSend && XyPixel.instance.send) {\n const oldHandler = XyPixel.instance.send.bind(XyPixel.instance)\n setPixelSend(oldHandler)\n } else {\n XyPixel.instance.send = async (event: string, fields?: Record<string, unknown>, eventId?: string) => {\n altHandler(event, fields)\n return await pixelSend?.(event, fields, eventId)\n }\n }\n return () => {\n //restore send on unmount\n if (pixelSend) {\n XyPixel.instance.send = pixelSend\n }\n }\n }, [pixelSend, altHandler])\n}\n"],"mappings":"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","names":["useState","useState","events"]}
@@ -0,0 +1,33 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/components/PixelDebuggerProvider.tsx
21
+ var PixelDebuggerProvider_exports = {};
22
+ __export(PixelDebuggerProvider_exports, {
23
+ PixelDebuggerProvider: () => PixelDebuggerProvider
24
+ });
25
+ module.exports = __toCommonJS(PixelDebuggerProvider_exports);
26
+ var import_react_pixel = require("@xylabs/react-pixel");
27
+ var import_react_shared = require("@xylabs/react-shared");
28
+ var import_jsx_runtime = require("react/jsx-runtime");
29
+ var PixelDebuggerProvider = ({ children }) => {
30
+ const [isDebugging, setIsDebugging] = (0, import_react_shared.useLocalStorage)("isDebuggingPixel", false);
31
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_pixel.DebugUserEventsContext.Provider, { value: { isDebugging, setIsDebugging }, children });
32
+ };
33
+ //# sourceMappingURL=PixelDebuggerProvider.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/PixelDebuggerProvider.tsx"],"sourcesContent":["import { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { useLocalStorage, WithChildren } from '@xylabs/react-shared'\n\nexport const PixelDebuggerProvider: React.FC<WithChildren> = ({ children }) => {\n const [isDebugging, setIsDebugging] = useLocalStorage<boolean>('isDebuggingPixel', false)\n return <DebugUserEventsContext.Provider value={{ isDebugging, setIsDebugging }}>{children}</DebugUserEventsContext.Provider>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAAuC;AACvC,0BAA8C;AAIrC;AAFF,IAAM,wBAAgD,CAAC,EAAE,SAAS,MAAM;AAC7E,QAAM,CAAC,aAAa,cAAc,QAAI,qCAAyB,oBAAoB,KAAK;AACxF,SAAO,4CAAC,0CAAuB,UAAvB,EAAgC,OAAO,EAAE,aAAa,eAAe,GAAI,UAAS;AAC5F;","names":[]}
@@ -1,7 +1,8 @@
1
- import { jsx } from "react/jsx-runtime";
1
+ // src/components/PixelDebuggerProvider.tsx
2
2
  import { DebugUserEventsContext } from "@xylabs/react-pixel";
3
3
  import { useLocalStorage } from "@xylabs/react-shared";
4
- const PixelDebuggerProvider = ({ children }) => {
4
+ import { jsx } from "react/jsx-runtime";
5
+ var PixelDebuggerProvider = ({ children }) => {
5
6
  const [isDebugging, setIsDebugging] = useLocalStorage("isDebuggingPixel", false);
6
7
  return /* @__PURE__ */ jsx(DebugUserEventsContext.Provider, { value: { isDebugging, setIsDebugging }, children });
7
8
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/PixelDebuggerProvider.tsx"],"sourcesContent":["import { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { useLocalStorage, WithChildren } from '@xylabs/react-shared'\n\nexport const PixelDebuggerProvider: React.FC<WithChildren> = ({ children }) => {\n const [isDebugging, setIsDebugging] = useLocalStorage<boolean>('isDebuggingPixel', false)\n return <DebugUserEventsContext.Provider value={{ isDebugging, setIsDebugging }}>{children}</DebugUserEventsContext.Provider>\n}\n"],"mappings":"AAKS;AALT,SAAS,8BAA8B;AACvC,SAAS,uBAAqC;AAEvC,MAAM,wBAAgD,CAAC,EAAE,SAAS,MAAM;AAC7E,QAAM,CAAC,aAAa,cAAc,IAAI,gBAAyB,oBAAoB,KAAK;AACxF,SAAO,oBAAC,uBAAuB,UAAvB,EAAgC,OAAO,EAAE,aAAa,eAAe,GAAI,UAAS;AAC5F;","names":[]}
1
+ {"version":3,"sources":["../../../src/components/PixelDebuggerProvider.tsx"],"sourcesContent":["import { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { useLocalStorage, WithChildren } from '@xylabs/react-shared'\n\nexport const PixelDebuggerProvider: React.FC<WithChildren> = ({ children }) => {\n const [isDebugging, setIsDebugging] = useLocalStorage<boolean>('isDebuggingPixel', false)\n return <DebugUserEventsContext.Provider value={{ isDebugging, setIsDebugging }}>{children}</DebugUserEventsContext.Provider>\n}\n"],"mappings":";AAAA,SAAS,8BAA8B;AACvC,SAAS,uBAAqC;AAIrC;AAFF,IAAM,wBAAgD,CAAC,EAAE,SAAS,MAAM;AAC7E,QAAM,CAAC,aAAa,cAAc,IAAI,gBAAyB,oBAAoB,KAAK;AACxF,SAAO,oBAAC,uBAAuB,UAAvB,EAAgC,OAAO,EAAE,aAAa,eAAe,GAAI,UAAS;AAC5F;","names":[]}
@@ -0,0 +1,38 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/components/PixelDebuggerToggle.tsx
21
+ var PixelDebuggerToggle_exports = {};
22
+ __export(PixelDebuggerToggle_exports, {
23
+ PixelDebuggerToggle: () => PixelDebuggerToggle
24
+ });
25
+ module.exports = __toCommonJS(PixelDebuggerToggle_exports);
26
+ var import_material = require("@mui/material");
27
+ var import_react_flexbox = require("@xylabs/react-flexbox");
28
+ var import_react_pixel = require("@xylabs/react-pixel");
29
+ var import_react = require("react");
30
+ var import_jsx_runtime = require("react/jsx-runtime");
31
+ var PixelDebuggerToggle = ({ ...props }) => {
32
+ const { setIsDebugging, isDebugging } = (0, import_react.useContext)(import_react_pixel.DebugUserEventsContext);
33
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexRow, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.FormControl, { children: [
34
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.FormLabel, { children: "Enable Debugger" }),
35
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Switch, { checked: isDebugging, onClick: () => setIsDebugging(!isDebugging) })
36
+ ] }) });
37
+ };
38
+ //# sourceMappingURL=PixelDebuggerToggle.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/PixelDebuggerToggle.tsx"],"sourcesContent":["import { FormControl, FormLabel, Switch } from '@mui/material'\nimport { BusyBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { useContext } from 'react'\n\nexport const PixelDebuggerToggle: React.FC<BusyBoxProps> = ({ ...props }) => {\n const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext)\n\n return (\n <FlexRow {...props}>\n <FormControl>\n <FormLabel>Enable Debugger</FormLabel>\n <Switch checked={isDebugging} onClick={() => setIsDebugging(!isDebugging)} />\n </FormControl>\n </FlexRow>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAA+C;AAC/C,2BAAsC;AACtC,yBAAuC;AACvC,mBAA2B;AAOrB;AALC,IAAM,sBAA8C,CAAC,EAAE,GAAG,MAAM,MAAM;AAC3E,QAAM,EAAE,gBAAgB,YAAY,QAAI,yBAAW,yCAAsB;AAEzE,SACE,4CAAC,gCAAS,GAAG,OACX,uDAAC,+BACC;AAAA,gDAAC,6BAAU,6BAAe;AAAA,IAC1B,4CAAC,0BAAO,SAAS,aAAa,SAAS,MAAM,eAAe,CAAC,WAAW,GAAG;AAAA,KAC7E,GACF;AAEJ;","names":[]}
@@ -1,9 +1,10 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
1
+ // src/components/PixelDebuggerToggle.tsx
2
2
  import { FormControl, FormLabel, Switch } from "@mui/material";
3
3
  import { FlexRow } from "@xylabs/react-flexbox";
4
4
  import { DebugUserEventsContext } from "@xylabs/react-pixel";
5
5
  import { useContext } from "react";
6
- const PixelDebuggerToggle = ({ ...props }) => {
6
+ import { jsx, jsxs } from "react/jsx-runtime";
7
+ var PixelDebuggerToggle = ({ ...props }) => {
7
8
  const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext);
8
9
  return /* @__PURE__ */ jsx(FlexRow, { ...props, children: /* @__PURE__ */ jsxs(FormControl, { children: [
9
10
  /* @__PURE__ */ jsx(FormLabel, { children: "Enable Debugger" }),
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/PixelDebuggerToggle.tsx"],"sourcesContent":["import { FormControl, FormLabel, Switch } from '@mui/material'\nimport { BusyBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { useContext } from 'react'\n\nexport const PixelDebuggerToggle: React.FC<BusyBoxProps> = ({ ...props }) => {\n const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext)\n\n return (\n <FlexRow {...props}>\n <FormControl>\n <FormLabel>Enable Debugger</FormLabel>\n <Switch checked={isDebugging} onClick={() => setIsDebugging(!isDebugging)} />\n </FormControl>\n </FlexRow>\n )\n}\n"],"mappings":"AAUM,SACE,KADF;AAVN,SAAS,aAAa,WAAW,cAAc;AAC/C,SAAuB,eAAe;AACtC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAEpB,MAAM,sBAA8C,CAAC,EAAE,GAAG,MAAM,MAAM;AAC3E,QAAM,EAAE,gBAAgB,YAAY,IAAI,WAAW,sBAAsB;AAEzE,SACE,oBAAC,WAAS,GAAG,OACX,+BAAC,eACC;AAAA,wBAAC,aAAU,6BAAe;AAAA,IAC1B,oBAAC,UAAO,SAAS,aAAa,SAAS,MAAM,eAAe,CAAC,WAAW,GAAG;AAAA,KAC7E,GACF;AAEJ;","names":[]}
1
+ {"version":3,"sources":["../../../src/components/PixelDebuggerToggle.tsx"],"sourcesContent":["import { FormControl, FormLabel, Switch } from '@mui/material'\nimport { BusyBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { useContext } from 'react'\n\nexport const PixelDebuggerToggle: React.FC<BusyBoxProps> = ({ ...props }) => {\n const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext)\n\n return (\n <FlexRow {...props}>\n <FormControl>\n <FormLabel>Enable Debugger</FormLabel>\n <Switch checked={isDebugging} onClick={() => setIsDebugging(!isDebugging)} />\n </FormControl>\n </FlexRow>\n )\n}\n"],"mappings":";AAAA,SAAS,aAAa,WAAW,cAAc;AAC/C,SAAuB,eAAe;AACtC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAOrB,SACE,KADF;AALC,IAAM,sBAA8C,CAAC,EAAE,GAAG,MAAM,MAAM;AAC3E,QAAM,EAAE,gBAAgB,YAAY,IAAI,WAAW,sBAAsB;AAEzE,SACE,oBAAC,WAAS,GAAG,OACX,+BAAC,eACC;AAAA,wBAAC,aAAU,6BAAe;AAAA,IAC1B,oBAAC,UAAO,SAAS,aAAa,SAAS,MAAM,eAAe,CAAC,WAAW,GAAG;AAAA,KAC7E,GACF;AAEJ;","names":[]}
@@ -0,0 +1,132 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/components/index.ts
21
+ var components_exports = {};
22
+ __export(components_exports, {
23
+ PixelDebugger: () => PixelDebugger,
24
+ PixelDebuggerProvider: () => PixelDebuggerProvider,
25
+ PixelDebuggerToggle: () => PixelDebuggerToggle
26
+ });
27
+ module.exports = __toCommonJS(components_exports);
28
+
29
+ // src/components/PixelDebugger.tsx
30
+ var import_material = require("@mui/material");
31
+ var import_react_button = require("@xylabs/react-button");
32
+ var import_react_flexbox = require("@xylabs/react-flexbox");
33
+ var import_react_pixel = require("@xylabs/react-pixel");
34
+ var import_react_portal = require("@xylabs/react-portal");
35
+ var import_react2 = require("react");
36
+
37
+ // src/hooks/usePixelAltSendHandler.ts
38
+ var import_pixel = require("@xylabs/pixel");
39
+ var import_react = require("react");
40
+ var usePixelAltSendHandler = (altHandler) => {
41
+ const [pixelSend, setPixelSend] = (0, import_react.useState)();
42
+ (0, import_react.useEffect)(() => {
43
+ if (!pixelSend && import_pixel.XyPixel.instance.send) {
44
+ const oldHandler = import_pixel.XyPixel.instance.send.bind(import_pixel.XyPixel.instance);
45
+ setPixelSend(oldHandler);
46
+ } else {
47
+ import_pixel.XyPixel.instance.send = async (event, fields, eventId) => {
48
+ altHandler(event, fields);
49
+ return await pixelSend?.(event, fields, eventId);
50
+ };
51
+ }
52
+ return () => {
53
+ if (pixelSend) {
54
+ import_pixel.XyPixel.instance.send = pixelSend;
55
+ }
56
+ };
57
+ }, [pixelSend, altHandler]);
58
+ };
59
+
60
+ // src/components/PixelDebugger.tsx
61
+ var import_jsx_runtime = require("react/jsx-runtime");
62
+ var PixelDebugger = () => {
63
+ const { isDebugging } = (0, import_react2.useContext)(import_react_pixel.DebugUserEventsContext);
64
+ const theme = (0, import_material.useTheme)();
65
+ const [displayEvents, setDisplayEvents] = (0, import_react2.useState)(false);
66
+ const [events, setEvents] = (0, import_react2.useState)([]);
67
+ usePixelAltSendHandler((event, fields) => {
68
+ setEvents((events2) => [{ event, fields }, ...events2]);
69
+ });
70
+ if (!isDebugging) {
71
+ return null;
72
+ }
73
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_portal.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { bottom: 0, left: 0, position: "fixed", width: 350 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Badge, { badgeContent: events.length, color: "primary", sx: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
74
+ import_material.Card,
75
+ {
76
+ variant: "outlined",
77
+ sx: {
78
+ backdropFilter: "blur(16px) saturate(180%)",
79
+ backgroundColor: "rgba(18, 18, 18, .70)",
80
+ overflowY: "auto",
81
+ width: "100%"
82
+ },
83
+ color: theme.palette.primary.main,
84
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { alignItems: "stretch", sx: { flexFlow: "column", maxHeight: 400 }, children: [
85
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexCol, { alignItems: "stretch", sx: { flex: "0 1 auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_button.ButtonEx, { variant: "text", onClick: () => setDisplayEvents(!displayEvents), children: "XY Pixel Debugger" }) }),
86
+ displayEvents && !!events.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
87
+ import_react_flexbox.FlexCol,
88
+ {
89
+ alignItems: "stretch",
90
+ alignContent: "start",
91
+ padding: 2,
92
+ sx: { cursor: "pointer", flex: "1 1 auto", overflowY: "auto", userSelect: "none" },
93
+ children: events.map((e, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PixelEventDetails, { events, index, ...e }, `${e.event}-${index}`))
94
+ }
95
+ ),
96
+ displayEvents && !events.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "subtitle2", children: "No Events" })
97
+ ] })
98
+ }
99
+ ) }) }) });
100
+ };
101
+ var PixelEventDetails = ({ event, fields, index, events }) => {
102
+ const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
103
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { alignItems: "stretch", marginBottom: 0.5, onClick: () => setIsOpen(!isOpen), children: [
104
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "subtitle2", children: event }),
105
+ isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { marginBottom: 0.5, variant: "caption", children: JSON.stringify(fields, null, 2) }),
106
+ events[index + 1] && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Divider, {})
107
+ ] });
108
+ };
109
+
110
+ // src/components/PixelDebuggerProvider.tsx
111
+ var import_react_pixel2 = require("@xylabs/react-pixel");
112
+ var import_react_shared = require("@xylabs/react-shared");
113
+ var import_jsx_runtime2 = require("react/jsx-runtime");
114
+ var PixelDebuggerProvider = ({ children }) => {
115
+ const [isDebugging, setIsDebugging] = (0, import_react_shared.useLocalStorage)("isDebuggingPixel", false);
116
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_pixel2.DebugUserEventsContext.Provider, { value: { isDebugging, setIsDebugging }, children });
117
+ };
118
+
119
+ // src/components/PixelDebuggerToggle.tsx
120
+ var import_material2 = require("@mui/material");
121
+ var import_react_flexbox2 = require("@xylabs/react-flexbox");
122
+ var import_react_pixel3 = require("@xylabs/react-pixel");
123
+ var import_react3 = require("react");
124
+ var import_jsx_runtime3 = require("react/jsx-runtime");
125
+ var PixelDebuggerToggle = ({ ...props }) => {
126
+ const { setIsDebugging, isDebugging } = (0, import_react3.useContext)(import_react_pixel3.DebugUserEventsContext);
127
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_flexbox2.FlexRow, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_material2.FormControl, { children: [
128
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.FormLabel, { children: "Enable Debugger" }),
129
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Switch, { checked: isDebugging, onClick: () => setIsDebugging(!isDebugging) })
130
+ ] }) });
131
+ };
132
+ //# sourceMappingURL=index.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/index.ts","../../../src/components/PixelDebugger.tsx","../../../src/hooks/usePixelAltSendHandler.ts","../../../src/components/PixelDebuggerProvider.tsx","../../../src/components/PixelDebuggerToggle.tsx"],"sourcesContent":["export * from './PixelDebugger'\nexport * from './PixelDebuggerProvider'\nexport * from './PixelDebuggerToggle'\n","import { Badge, Card, Divider, Typography, useTheme } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { Portal } from '@xylabs/react-portal'\nimport { useContext, useState } from 'react'\n\nimport { usePixelAltSendHandler } from '../hooks'\nimport { PixelEvent } from '../PixelEvent'\n\nexport const PixelDebugger: React.FC = () => {\n const { isDebugging } = useContext(DebugUserEventsContext)\n //TODO - when adding in the location hook to detect location change, was dropping the setEvents in usePixelAltSendHand\n const theme = useTheme()\n const [displayEvents, setDisplayEvents] = useState(false)\n const [events, setEvents] = useState<PixelEvent[]>([])\n\n usePixelAltSendHandler((event: string, fields?: Record<string, unknown>) => {\n setEvents((events) => [{ event, fields }, ...events])\n })\n\n if (!isDebugging) {\n return null\n }\n\n return (\n <Portal>\n <div style={{ bottom: 0, left: 0, position: 'fixed', width: 350 }}>\n <Badge badgeContent={events.length} color=\"primary\" sx={{ width: '100%' }}>\n <Card\n variant=\"outlined\"\n sx={{\n backdropFilter: 'blur(16px) saturate(180%)',\n backgroundColor: 'rgba(18, 18, 18, .70)',\n overflowY: 'auto',\n width: '100%',\n }}\n color={theme.palette.primary.main}\n >\n <FlexCol alignItems=\"stretch\" sx={{ flexFlow: 'column', maxHeight: 400 }}>\n <FlexCol alignItems=\"stretch\" sx={{ flex: '0 1 auto' }}>\n <ButtonEx variant=\"text\" onClick={() => setDisplayEvents(!displayEvents)}>\n XY Pixel Debugger\n </ButtonEx>\n </FlexCol>\n {displayEvents && !!events.length && (\n <FlexCol\n alignItems=\"stretch\"\n alignContent=\"start\"\n padding={2}\n sx={{ cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' }}\n >\n {events.map((e, index) => (\n <PixelEventDetails key={`${e.event}-${index}`} events={events} index={index} {...e} />\n ))}\n </FlexCol>\n )}\n {displayEvents && !events.length && <Typography variant=\"subtitle2\">No Events</Typography>}\n </FlexCol>\n </Card>\n </Badge>\n </div>\n </Portal>\n )\n}\n\nconst PixelEventDetails: React.FC<PixelEvent & { events: PixelEvent[]; index: number }> = ({ event, fields, index, events }) => {\n const [isOpen, setIsOpen] = useState(false)\n return (\n <FlexCol alignItems=\"stretch\" marginBottom={0.5} onClick={() => setIsOpen(!isOpen)}>\n <Typography variant=\"subtitle2\">{event}</Typography>\n {isOpen && (\n <Typography marginBottom={0.5} variant=\"caption\">\n {JSON.stringify(fields, null, 2)}\n </Typography>\n )}\n {events[index + 1] && <Divider />}\n </FlexCol>\n )\n}\n","import { XyPixel } from '@xylabs/pixel'\nimport { useEffect, useState } from 'react'\n\nexport const usePixelAltSendHandler = (altHandler: (event: string, fields?: Record<string, unknown>) => void) => {\n const [pixelSend, setPixelSend] = useState<typeof XyPixel.instance.send>()\n useEffect(() => {\n if (!pixelSend && XyPixel.instance.send) {\n const oldHandler = XyPixel.instance.send.bind(XyPixel.instance)\n setPixelSend(oldHandler)\n } else {\n XyPixel.instance.send = async (event: string, fields?: Record<string, unknown>, eventId?: string) => {\n altHandler(event, fields)\n return await pixelSend?.(event, fields, eventId)\n }\n }\n return () => {\n //restore send on unmount\n if (pixelSend) {\n XyPixel.instance.send = pixelSend\n }\n }\n }, [pixelSend, altHandler])\n}\n","import { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { useLocalStorage, WithChildren } from '@xylabs/react-shared'\n\nexport const PixelDebuggerProvider: React.FC<WithChildren> = ({ children }) => {\n const [isDebugging, setIsDebugging] = useLocalStorage<boolean>('isDebuggingPixel', false)\n return <DebugUserEventsContext.Provider value={{ isDebugging, setIsDebugging }}>{children}</DebugUserEventsContext.Provider>\n}\n","import { FormControl, FormLabel, Switch } from '@mui/material'\nimport { BusyBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { useContext } from 'react'\n\nexport const PixelDebuggerToggle: React.FC<BusyBoxProps> = ({ ...props }) => {\n const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext)\n\n return (\n <FlexRow {...props}>\n <FormControl>\n <FormLabel>Enable Debugger</FormLabel>\n <Switch checked={isDebugging} onClick={() => setIsDebugging(!isDebugging)} />\n </FormControl>\n </FlexRow>\n )\n}\n"],"mappings":"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","names":["import_react","events","import_react_pixel","import_jsx_runtime","import_material","import_react_flexbox","import_react_pixel","import_react","import_jsx_runtime"]}
@@ -1,4 +1,109 @@
1
- export * from "./PixelDebugger";
2
- export * from "./PixelDebuggerProvider";
3
- export * from "./PixelDebuggerToggle";
1
+ // src/components/PixelDebugger.tsx
2
+ import { Badge, Card, Divider, Typography, useTheme } from "@mui/material";
3
+ import { ButtonEx } from "@xylabs/react-button";
4
+ import { FlexCol } from "@xylabs/react-flexbox";
5
+ import { DebugUserEventsContext } from "@xylabs/react-pixel";
6
+ import { Portal } from "@xylabs/react-portal";
7
+ import { useContext, useState as useState2 } from "react";
8
+
9
+ // src/hooks/usePixelAltSendHandler.ts
10
+ import { XyPixel } from "@xylabs/pixel";
11
+ import { useEffect, useState } from "react";
12
+ var usePixelAltSendHandler = (altHandler) => {
13
+ const [pixelSend, setPixelSend] = useState();
14
+ useEffect(() => {
15
+ if (!pixelSend && XyPixel.instance.send) {
16
+ const oldHandler = XyPixel.instance.send.bind(XyPixel.instance);
17
+ setPixelSend(oldHandler);
18
+ } else {
19
+ XyPixel.instance.send = async (event, fields, eventId) => {
20
+ altHandler(event, fields);
21
+ return await pixelSend?.(event, fields, eventId);
22
+ };
23
+ }
24
+ return () => {
25
+ if (pixelSend) {
26
+ XyPixel.instance.send = pixelSend;
27
+ }
28
+ };
29
+ }, [pixelSend, altHandler]);
30
+ };
31
+
32
+ // src/components/PixelDebugger.tsx
33
+ import { jsx, jsxs } from "react/jsx-runtime";
34
+ var PixelDebugger = () => {
35
+ const { isDebugging } = useContext(DebugUserEventsContext);
36
+ const theme = useTheme();
37
+ const [displayEvents, setDisplayEvents] = useState2(false);
38
+ const [events, setEvents] = useState2([]);
39
+ usePixelAltSendHandler((event, fields) => {
40
+ setEvents((events2) => [{ event, fields }, ...events2]);
41
+ });
42
+ if (!isDebugging) {
43
+ return null;
44
+ }
45
+ return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx("div", { style: { bottom: 0, left: 0, position: "fixed", width: 350 }, children: /* @__PURE__ */ jsx(Badge, { badgeContent: events.length, color: "primary", sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
46
+ Card,
47
+ {
48
+ variant: "outlined",
49
+ sx: {
50
+ backdropFilter: "blur(16px) saturate(180%)",
51
+ backgroundColor: "rgba(18, 18, 18, .70)",
52
+ overflowY: "auto",
53
+ width: "100%"
54
+ },
55
+ color: theme.palette.primary.main,
56
+ children: /* @__PURE__ */ jsxs(FlexCol, { alignItems: "stretch", sx: { flexFlow: "column", maxHeight: 400 }, children: [
57
+ /* @__PURE__ */ jsx(FlexCol, { alignItems: "stretch", sx: { flex: "0 1 auto" }, children: /* @__PURE__ */ jsx(ButtonEx, { variant: "text", onClick: () => setDisplayEvents(!displayEvents), children: "XY Pixel Debugger" }) }),
58
+ displayEvents && !!events.length && /* @__PURE__ */ jsx(
59
+ FlexCol,
60
+ {
61
+ alignItems: "stretch",
62
+ alignContent: "start",
63
+ padding: 2,
64
+ sx: { cursor: "pointer", flex: "1 1 auto", overflowY: "auto", userSelect: "none" },
65
+ children: events.map((e, index) => /* @__PURE__ */ jsx(PixelEventDetails, { events, index, ...e }, `${e.event}-${index}`))
66
+ }
67
+ ),
68
+ displayEvents && !events.length && /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: "No Events" })
69
+ ] })
70
+ }
71
+ ) }) }) });
72
+ };
73
+ var PixelEventDetails = ({ event, fields, index, events }) => {
74
+ const [isOpen, setIsOpen] = useState2(false);
75
+ return /* @__PURE__ */ jsxs(FlexCol, { alignItems: "stretch", marginBottom: 0.5, onClick: () => setIsOpen(!isOpen), children: [
76
+ /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: event }),
77
+ isOpen && /* @__PURE__ */ jsx(Typography, { marginBottom: 0.5, variant: "caption", children: JSON.stringify(fields, null, 2) }),
78
+ events[index + 1] && /* @__PURE__ */ jsx(Divider, {})
79
+ ] });
80
+ };
81
+
82
+ // src/components/PixelDebuggerProvider.tsx
83
+ import { DebugUserEventsContext as DebugUserEventsContext2 } from "@xylabs/react-pixel";
84
+ import { useLocalStorage } from "@xylabs/react-shared";
85
+ import { jsx as jsx2 } from "react/jsx-runtime";
86
+ var PixelDebuggerProvider = ({ children }) => {
87
+ const [isDebugging, setIsDebugging] = useLocalStorage("isDebuggingPixel", false);
88
+ return /* @__PURE__ */ jsx2(DebugUserEventsContext2.Provider, { value: { isDebugging, setIsDebugging }, children });
89
+ };
90
+
91
+ // src/components/PixelDebuggerToggle.tsx
92
+ import { FormControl, FormLabel, Switch } from "@mui/material";
93
+ import { FlexRow } from "@xylabs/react-flexbox";
94
+ import { DebugUserEventsContext as DebugUserEventsContext3 } from "@xylabs/react-pixel";
95
+ import { useContext as useContext2 } from "react";
96
+ import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
97
+ var PixelDebuggerToggle = ({ ...props }) => {
98
+ const { setIsDebugging, isDebugging } = useContext2(DebugUserEventsContext3);
99
+ return /* @__PURE__ */ jsx3(FlexRow, { ...props, children: /* @__PURE__ */ jsxs2(FormControl, { children: [
100
+ /* @__PURE__ */ jsx3(FormLabel, { children: "Enable Debugger" }),
101
+ /* @__PURE__ */ jsx3(Switch, { checked: isDebugging, onClick: () => setIsDebugging(!isDebugging) })
102
+ ] }) });
103
+ };
104
+ export {
105
+ PixelDebugger,
106
+ PixelDebuggerProvider,
107
+ PixelDebuggerToggle
108
+ };
4
109
  //# sourceMappingURL=index.js.map