@xylabs/react-pixel-debugger 3.0.4 → 3.0.5

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 (93) hide show
  1. package/dist/browser/PixelEvent.cjs +2 -0
  2. package/dist/browser/PixelEvent.cjs.map +1 -1
  3. package/dist/browser/PixelEvent.d.cts +5 -0
  4. package/dist/browser/PixelEvent.d.cts.map +1 -0
  5. package/dist/browser/components/PixelDebugger.cjs +35 -9
  6. package/dist/browser/components/PixelDebugger.cjs.map +1 -1
  7. package/dist/browser/components/PixelDebugger.d.cts +3 -0
  8. package/dist/browser/components/PixelDebugger.d.cts.map +1 -0
  9. package/dist/browser/components/PixelDebuggerProvider.cjs +4 -2
  10. package/dist/browser/components/PixelDebuggerProvider.cjs.map +1 -1
  11. package/dist/browser/components/PixelDebuggerProvider.d.cts +4 -0
  12. package/dist/browser/components/PixelDebuggerProvider.d.cts.map +1 -0
  13. package/dist/browser/components/PixelDebuggerToggle.cjs +4 -2
  14. package/dist/browser/components/PixelDebuggerToggle.cjs.map +1 -1
  15. package/dist/browser/components/PixelDebuggerToggle.d.cts +4 -0
  16. package/dist/browser/components/PixelDebuggerToggle.d.cts.map +1 -0
  17. package/dist/browser/components/index.cjs +115 -4
  18. package/dist/browser/components/index.cjs.map +1 -1
  19. package/dist/browser/components/index.d.cts +4 -0
  20. package/dist/browser/components/index.d.cts.map +1 -0
  21. package/dist/browser/hooks/index.cjs +32 -2
  22. package/dist/browser/hooks/index.cjs.map +1 -1
  23. package/dist/browser/hooks/index.d.cts +2 -0
  24. package/dist/browser/hooks/index.d.cts.map +1 -0
  25. package/dist/browser/hooks/usePixelAltSendHandler.cjs +3 -1
  26. package/dist/browser/hooks/usePixelAltSendHandler.cjs.map +1 -1
  27. package/dist/browser/hooks/usePixelAltSendHandler.d.cts +2 -0
  28. package/dist/browser/hooks/usePixelAltSendHandler.d.cts.map +1 -0
  29. package/dist/browser/index.cjs +116 -4
  30. package/dist/browser/index.cjs.map +1 -1
  31. package/dist/browser/index.d.cts +4 -0
  32. package/dist/browser/index.d.cts.map +1 -0
  33. package/dist/node/PixelEvent.cjs +19 -0
  34. package/dist/node/PixelEvent.cjs.map +1 -0
  35. package/dist/node/PixelEvent.d.cts +5 -0
  36. package/dist/node/PixelEvent.d.cts.map +1 -0
  37. package/dist/node/PixelEvent.js +0 -18
  38. package/dist/node/PixelEvent.js.map +1 -1
  39. package/dist/node/components/PixelDebugger.cjs +109 -0
  40. package/dist/node/components/{PixelDebugger.mjs.map → PixelDebugger.cjs.map} +1 -1
  41. package/dist/node/components/PixelDebugger.d.cts +3 -0
  42. package/dist/node/components/PixelDebugger.d.cts.map +1 -0
  43. package/dist/node/components/PixelDebugger.js +34 -59
  44. package/dist/node/components/PixelDebugger.js.map +1 -1
  45. package/dist/node/components/PixelDebuggerProvider.cjs +37 -0
  46. package/dist/node/components/{PixelDebuggerProvider.mjs.map → PixelDebuggerProvider.cjs.map} +1 -1
  47. package/dist/node/components/PixelDebuggerProvider.d.cts +4 -0
  48. package/dist/node/components/PixelDebuggerProvider.d.cts.map +1 -0
  49. package/dist/node/components/PixelDebuggerProvider.js +7 -32
  50. package/dist/node/components/PixelDebuggerProvider.js.map +1 -1
  51. package/dist/node/components/PixelDebuggerToggle.cjs +42 -0
  52. package/dist/node/components/{PixelDebuggerToggle.mjs.map → PixelDebuggerToggle.cjs.map} +1 -1
  53. package/dist/node/components/PixelDebuggerToggle.d.cts +4 -0
  54. package/dist/node/components/PixelDebuggerToggle.d.cts.map +1 -0
  55. package/dist/node/components/PixelDebuggerToggle.js +11 -36
  56. package/dist/node/components/PixelDebuggerToggle.js.map +1 -1
  57. package/dist/node/components/index.cjs +138 -0
  58. package/dist/node/components/index.cjs.map +1 -0
  59. package/dist/node/components/index.d.cts +4 -0
  60. package/dist/node/components/index.d.cts.map +1 -0
  61. package/dist/node/components/index.js +48 -77
  62. package/dist/node/components/index.js.map +1 -1
  63. package/dist/node/hooks/index.cjs +53 -0
  64. package/dist/node/hooks/index.cjs.map +1 -0
  65. package/dist/node/hooks/index.d.cts +2 -0
  66. package/dist/node/hooks/index.d.cts.map +1 -0
  67. package/dist/node/hooks/index.js +10 -37
  68. package/dist/node/hooks/index.js.map +1 -1
  69. package/dist/node/hooks/usePixelAltSendHandler.cjs +51 -0
  70. package/dist/node/hooks/{index.mjs.map → usePixelAltSendHandler.cjs.map} +1 -1
  71. package/dist/node/hooks/usePixelAltSendHandler.d.cts +2 -0
  72. package/dist/node/hooks/usePixelAltSendHandler.d.cts.map +1 -0
  73. package/dist/node/hooks/usePixelAltSendHandler.js +10 -35
  74. package/dist/node/hooks/usePixelAltSendHandler.js.map +1 -1
  75. package/dist/node/index.cjs +140 -0
  76. package/dist/node/index.cjs.map +1 -0
  77. package/dist/node/index.d.cts +4 -0
  78. package/dist/node/index.d.cts.map +1 -0
  79. package/dist/node/index.js +48 -78
  80. package/dist/node/index.js.map +1 -1
  81. package/package.json +15 -14
  82. package/dist/node/PixelEvent.mjs +0 -1
  83. package/dist/node/PixelEvent.mjs.map +0 -1
  84. package/dist/node/components/PixelDebugger.mjs +0 -84
  85. package/dist/node/components/PixelDebuggerProvider.mjs +0 -12
  86. package/dist/node/components/PixelDebuggerToggle.mjs +0 -17
  87. package/dist/node/components/index.mjs +0 -109
  88. package/dist/node/components/index.mjs.map +0 -1
  89. package/dist/node/hooks/index.mjs +0 -26
  90. package/dist/node/hooks/usePixelAltSendHandler.mjs +0 -26
  91. package/dist/node/hooks/usePixelAltSendHandler.mjs.map +0 -1
  92. package/dist/node/index.mjs +0 -110
  93. package/dist/node/index.mjs.map +0 -1
@@ -12,6 +12,8 @@ var __copyProps = (to, from, except, desc) => {
12
12
  return to;
13
13
  };
14
14
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
15
+
16
+ // src/PixelEvent.ts
15
17
  var PixelEvent_exports = {};
16
18
  module.exports = __toCommonJS(PixelEvent_exports);
17
19
  //# sourceMappingURL=PixelEvent.cjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/PixelEvent.ts"],"sourcesContent":["export interface PixelEvent {\n event: string\n fields?: unknown\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
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,5 @@
1
+ export interface PixelEvent {
2
+ event: string;
3
+ fields?: unknown;
4
+ }
5
+ //# sourceMappingURL=PixelEvent.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PixelEvent.d.ts","sourceRoot":"","sources":["../../src/PixelEvent.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB"}
@@ -16,25 +16,51 @@ var __copyProps = (to, from, except, desc) => {
16
16
  return to;
17
17
  };
18
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/components/PixelDebugger.tsx
19
21
  var PixelDebugger_exports = {};
20
22
  __export(PixelDebugger_exports, {
21
23
  PixelDebugger: () => PixelDebugger
22
24
  });
23
25
  module.exports = __toCommonJS(PixelDebugger_exports);
24
- var import_jsx_runtime = require("react/jsx-runtime");
25
26
  var import_material = require("@mui/material");
26
27
  var import_react_button = require("@xylabs/react-button");
27
28
  var import_react_flexbox = require("@xylabs/react-flexbox");
28
29
  var import_react_pixel = require("@xylabs/react-pixel");
29
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");
30
35
  var import_react = require("react");
31
- var import_hooks = require("../hooks");
32
- const PixelDebugger = () => {
33
- const { isDebugging } = (0, import_react.useContext)(import_react_pixel.DebugUserEventsContext);
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);
34
60
  const theme = (0, import_material.useTheme)();
35
- const [displayEvents, setDisplayEvents] = (0, import_react.useState)(false);
36
- const [events, setEvents] = (0, import_react.useState)([]);
37
- (0, import_hooks.usePixelAltSendHandler)((event, fields) => {
61
+ const [displayEvents, setDisplayEvents] = (0, import_react2.useState)(false);
62
+ const [events, setEvents] = (0, import_react2.useState)([]);
63
+ usePixelAltSendHandler((event, fields) => {
38
64
  setEvents((events2) => [{ event, fields }, ...events2]);
39
65
  });
40
66
  if (!isDebugging) {
@@ -68,8 +94,8 @@ const PixelDebugger = () => {
68
94
  }
69
95
  ) }) }) });
70
96
  };
71
- const PixelEventDetails = ({ event, fields, index, events }) => {
72
- const [isOpen, setIsOpen] = (0, import_react.useState)(false);
97
+ var PixelEventDetails = ({ event, fields, index, events }) => {
98
+ const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
73
99
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { alignItems: "stretch", marginBottom: 0.5, onClick: () => setIsOpen(!isOpen), children: [
74
100
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "subtitle2", children: event }),
75
101
  isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.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":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuCY;AAvCZ,sBAA2D;AAC3D,0BAAyB;AACzB,2BAAwB;AACxB,yBAAuC;AACvC,0BAAuB;AACvB,mBAAqC;AAErC,mBAAuC;AAGhC,MAAM,gBAA0B,MAAM;AAC3C,QAAM,EAAE,YAAY,QAAI,yBAAW,yCAAsB;AAEzD,QAAM,YAAQ,0BAAS;AACvB,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AACxD,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAuB,CAAC,CAAC;AAErD,2CAAuB,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,4CAAC,8BACC,sDAAC,SAAI,OAAO,EAAE,QAAQ,GAAG,MAAM,GAAG,UAAU,SAAS,OAAO,IAAI,GAC9D,sDAAC,yBAAM,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,uDAAC,gCAAQ,YAAW,WAAU,IAAI,EAAE,UAAU,UAAU,WAAW,IAAI,GACrE;AAAA,oDAAC,gCAAQ,YAAW,WAAU,IAAI,EAAE,MAAM,WAAW,GACnD,sDAAC,gCAAS,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,4CAAC,qBAA8C,QAAgB,OAAe,GAAG,KAAzD,GAAG,EAAE,KAAK,IAAI,KAAK,EAAyC,CACrF;AAAA;AAAA,QACH;AAAA,QAED,iBAAiB,CAAC,OAAO,UAAU,4CAAC,8BAAW,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,QAAI,uBAAS,KAAK;AAC1C,SACE,6CAAC,gCAAQ,YAAW,WAAU,cAAc,KAAK,SAAS,MAAM,UAAU,CAAC,MAAM,GAC/E;AAAA,gDAAC,8BAAW,SAAQ,aAAa,iBAAM;AAAA,IACtC,UACC,4CAAC,8BAAW,cAAc,KAAK,SAAQ,WACpC,eAAK,UAAU,QAAQ,MAAM,CAAC,GACjC;AAAA,IAED,OAAO,QAAQ,CAAC,KAAK,4CAAC,2BAAQ;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":["import_react","events"]}
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ export declare const PixelDebugger: React.FC;
3
+ //# sourceMappingURL=PixelDebugger.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PixelDebugger.d.ts","sourceRoot":"","sources":["../../../src/components/PixelDebugger.tsx"],"names":[],"mappings":";AAUA,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAsDjC,CAAA"}
@@ -16,15 +16,17 @@ var __copyProps = (to, from, except, desc) => {
16
16
  return to;
17
17
  };
18
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/components/PixelDebuggerProvider.tsx
19
21
  var PixelDebuggerProvider_exports = {};
20
22
  __export(PixelDebuggerProvider_exports, {
21
23
  PixelDebuggerProvider: () => PixelDebuggerProvider
22
24
  });
23
25
  module.exports = __toCommonJS(PixelDebuggerProvider_exports);
24
- var import_jsx_runtime = require("react/jsx-runtime");
25
26
  var import_react_pixel = require("@xylabs/react-pixel");
26
27
  var import_react_shared = require("@xylabs/react-shared");
27
- const PixelDebuggerProvider = ({ children }) => {
28
+ var import_jsx_runtime = require("react/jsx-runtime");
29
+ var PixelDebuggerProvider = ({ children }) => {
28
30
  const [isDebugging, setIsDebugging] = (0, import_react_shared.useLocalStorage)("isDebuggingPixel", false);
29
31
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_pixel.DebugUserEventsContext.Provider, { value: { isDebugging, setIsDebugging }, children });
30
32
  };
@@ -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":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKS;AALT,yBAAuC;AACvC,0BAA8C;AAEvC,MAAM,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
+ {"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":[]}
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { WithChildren } from '@xylabs/react-shared';
3
+ export declare const PixelDebuggerProvider: React.FC<WithChildren>;
4
+ //# sourceMappingURL=PixelDebuggerProvider.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PixelDebuggerProvider.d.ts","sourceRoot":"","sources":["../../../src/components/PixelDebuggerProvider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAmB,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAEpE,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAGxD,CAAA"}
@@ -16,17 +16,19 @@ var __copyProps = (to, from, except, desc) => {
16
16
  return to;
17
17
  };
18
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/components/PixelDebuggerToggle.tsx
19
21
  var PixelDebuggerToggle_exports = {};
20
22
  __export(PixelDebuggerToggle_exports, {
21
23
  PixelDebuggerToggle: () => PixelDebuggerToggle
22
24
  });
23
25
  module.exports = __toCommonJS(PixelDebuggerToggle_exports);
24
- var import_jsx_runtime = require("react/jsx-runtime");
25
26
  var import_material = require("@mui/material");
26
27
  var import_react_flexbox = require("@xylabs/react-flexbox");
27
28
  var import_react_pixel = require("@xylabs/react-pixel");
28
29
  var import_react = require("react");
29
- const PixelDebuggerToggle = ({ ...props }) => {
30
+ var import_jsx_runtime = require("react/jsx-runtime");
31
+ var PixelDebuggerToggle = ({ ...props }) => {
30
32
  const { setIsDebugging, isDebugging } = (0, import_react.useContext)(import_react_pixel.DebugUserEventsContext);
31
33
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexRow, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.FormControl, { children: [
32
34
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.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":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUM;AAVN,sBAA+C;AAC/C,2BAAsC;AACtC,yBAAuC;AACvC,mBAA2B;AAEpB,MAAM,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
+ {"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":[]}
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { BusyBoxProps } from '@xylabs/react-flexbox';
3
+ export declare const PixelDebuggerToggle: React.FC<BusyBoxProps>;
4
+ //# sourceMappingURL=PixelDebuggerToggle.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PixelDebuggerToggle.d.ts","sourceRoot":"","sources":["../../../src/components/PixelDebuggerToggle.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAI7D,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAWtD,CAAA"}
@@ -3,6 +3,10 @@ var __defProp = Object.defineProperty;
3
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
5
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
+ };
6
10
  var __copyProps = (to, from, except, desc) => {
7
11
  if (from && typeof from === "object" || typeof from === "function") {
8
12
  for (let key of __getOwnPropNames(from))
@@ -11,11 +15,118 @@ var __copyProps = (to, from, except, desc) => {
11
15
  }
12
16
  return to;
13
17
  };
14
- var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
15
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/components/index.ts
16
21
  var components_exports = {};
22
+ __export(components_exports, {
23
+ PixelDebugger: () => PixelDebugger,
24
+ PixelDebuggerProvider: () => PixelDebuggerProvider,
25
+ PixelDebuggerToggle: () => PixelDebuggerToggle
26
+ });
17
27
  module.exports = __toCommonJS(components_exports);
18
- __reExport(components_exports, require("./PixelDebugger"), module.exports);
19
- __reExport(components_exports, require("./PixelDebuggerProvider"), module.exports);
20
- __reExport(components_exports, require("./PixelDebuggerToggle"), module.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
+ };
21
132
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from './PixelDebugger'\nexport * from './PixelDebuggerProvider'\nexport * from './PixelDebuggerToggle'\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,4BAAd;AACA,+BAAc,oCADd;AAEA,+BAAc,kCAFd;","names":[]}
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"]}
@@ -0,0 +1,4 @@
1
+ export * from './PixelDebugger';
2
+ export * from './PixelDebuggerProvider';
3
+ export * from './PixelDebuggerToggle';
4
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA"}
@@ -3,6 +3,10 @@ var __defProp = Object.defineProperty;
3
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
5
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
+ };
6
10
  var __copyProps = (to, from, except, desc) => {
7
11
  if (from && typeof from === "object" || typeof from === "function") {
8
12
  for (let key of __getOwnPropNames(from))
@@ -11,9 +15,35 @@ var __copyProps = (to, from, except, desc) => {
11
15
  }
12
16
  return to;
13
17
  };
14
- var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
15
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/hooks/index.ts
16
21
  var hooks_exports = {};
22
+ __export(hooks_exports, {
23
+ usePixelAltSendHandler: () => usePixelAltSendHandler
24
+ });
17
25
  module.exports = __toCommonJS(hooks_exports);
18
- __reExport(hooks_exports, require("./usePixelAltSendHandler"), module.exports);
26
+
27
+ // src/hooks/usePixelAltSendHandler.ts
28
+ var import_pixel = require("@xylabs/pixel");
29
+ var import_react = require("react");
30
+ var usePixelAltSendHandler = (altHandler) => {
31
+ const [pixelSend, setPixelSend] = (0, import_react.useState)();
32
+ (0, import_react.useEffect)(() => {
33
+ if (!pixelSend && import_pixel.XyPixel.instance.send) {
34
+ const oldHandler = import_pixel.XyPixel.instance.send.bind(import_pixel.XyPixel.instance);
35
+ setPixelSend(oldHandler);
36
+ } else {
37
+ import_pixel.XyPixel.instance.send = async (event, fields, eventId) => {
38
+ altHandler(event, fields);
39
+ return await pixelSend?.(event, fields, eventId);
40
+ };
41
+ }
42
+ return () => {
43
+ if (pixelSend) {
44
+ import_pixel.XyPixel.instance.send = pixelSend;
45
+ }
46
+ };
47
+ }, [pixelSend, altHandler]);
48
+ };
19
49
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/hooks/index.ts"],"sourcesContent":["export * from './usePixelAltSendHandler'\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,0BAAc,qCAAd;","names":[]}
1
+ {"version":3,"sources":["../../../src/hooks/index.ts","../../../src/hooks/usePixelAltSendHandler.ts"],"sourcesContent":["export * from './usePixelAltSendHandler'\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":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAwB;AACxB,mBAAoC;AAE7B,IAAM,yBAAyB,CAAC,eAA0E;AAC/G,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAuC;AACzE,8BAAU,MAAM;AACd,QAAI,CAAC,aAAa,qBAAQ,SAAS,MAAM;AACvC,YAAM,aAAa,qBAAQ,SAAS,KAAK,KAAK,qBAAQ,QAAQ;AAC9D,mBAAa,UAAU;AAAA,IACzB,OAAO;AACL,2BAAQ,SAAS,OAAO,OAAO,OAAe,QAAkC,YAAqB;AACnG,mBAAW,OAAO,MAAM;AACxB,eAAO,MAAM,YAAY,OAAO,QAAQ,OAAO;AAAA,MACjD;AAAA,IACF;AACA,WAAO,MAAM;AAEX,UAAI,WAAW;AACb,6BAAQ,SAAS,OAAO;AAAA,MAC1B;AAAA,IACF;AAAA,EACF,GAAG,CAAC,WAAW,UAAU,CAAC;AAC5B;","names":[]}
@@ -0,0 +1,2 @@
1
+ export * from './usePixelAltSendHandler';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAA"}
@@ -16,6 +16,8 @@ var __copyProps = (to, from, except, desc) => {
16
16
  return to;
17
17
  };
18
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/hooks/usePixelAltSendHandler.ts
19
21
  var usePixelAltSendHandler_exports = {};
20
22
  __export(usePixelAltSendHandler_exports, {
21
23
  usePixelAltSendHandler: () => usePixelAltSendHandler
@@ -23,7 +25,7 @@ __export(usePixelAltSendHandler_exports, {
23
25
  module.exports = __toCommonJS(usePixelAltSendHandler_exports);
24
26
  var import_pixel = require("@xylabs/pixel");
25
27
  var import_react = require("react");
26
- const usePixelAltSendHandler = (altHandler) => {
28
+ var usePixelAltSendHandler = (altHandler) => {
27
29
  const [pixelSend, setPixelSend] = (0, import_react.useState)();
28
30
  (0, import_react.useEffect)(() => {
29
31
  if (!pixelSend && import_pixel.XyPixel.instance.send) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/hooks/usePixelAltSendHandler.ts"],"sourcesContent":["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":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwB;AACxB,mBAAoC;AAE7B,MAAM,yBAAyB,CAAC,eAA0E;AAC/G,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAuC;AACzE,8BAAU,MAAM;AACd,QAAI,CAAC,aAAa,qBAAQ,SAAS,MAAM;AACvC,YAAM,aAAa,qBAAQ,SAAS,KAAK,KAAK,qBAAQ,QAAQ;AAC9D,mBAAa,UAAU;AAAA,IACzB,OAAO;AACL,2BAAQ,SAAS,OAAO,OAAO,OAAe,QAAkC,YAAqB;AACnG,mBAAW,OAAO,MAAM;AACxB,eAAO,MAAM,YAAY,OAAO,QAAQ,OAAO;AAAA,MACjD;AAAA,IACF;AACA,WAAO,MAAM;AAEX,UAAI,WAAW;AACb,6BAAQ,SAAS,OAAO;AAAA,MAC1B;AAAA,IACF;AAAA,EACF,GAAG,CAAC,WAAW,UAAU,CAAC;AAC5B;","names":[]}
1
+ {"version":3,"sources":["../../../src/hooks/usePixelAltSendHandler.ts"],"sourcesContent":["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":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwB;AACxB,mBAAoC;AAE7B,IAAM,yBAAyB,CAAC,eAA0E;AAC/G,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAuC;AACzE,8BAAU,MAAM;AACd,QAAI,CAAC,aAAa,qBAAQ,SAAS,MAAM;AACvC,YAAM,aAAa,qBAAQ,SAAS,KAAK,KAAK,qBAAQ,QAAQ;AAC9D,mBAAa,UAAU;AAAA,IACzB,OAAO;AACL,2BAAQ,SAAS,OAAO,OAAO,OAAe,QAAkC,YAAqB;AACnG,mBAAW,OAAO,MAAM;AACxB,eAAO,MAAM,YAAY,OAAO,QAAQ,OAAO;AAAA,MACjD;AAAA,IACF;AACA,WAAO,MAAM;AAEX,UAAI,WAAW;AACb,6BAAQ,SAAS,OAAO;AAAA,MAC1B;AAAA,IACF;AAAA,EACF,GAAG,CAAC,WAAW,UAAU,CAAC;AAC5B;","names":[]}
@@ -0,0 +1,2 @@
1
+ export declare const usePixelAltSendHandler: (altHandler: (event: string, fields?: Record<string, unknown>) => void) => void;
2
+ //# sourceMappingURL=usePixelAltSendHandler.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"usePixelAltSendHandler.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePixelAltSendHandler.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,sBAAsB,uBAAwB,MAAM,WAAW,OAAO,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,SAmB3G,CAAA"}
@@ -3,6 +3,10 @@ var __defProp = Object.defineProperty;
3
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
5
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
+ };
6
10
  var __copyProps = (to, from, except, desc) => {
7
11
  if (from && typeof from === "object" || typeof from === "function") {
8
12
  for (let key of __getOwnPropNames(from))
@@ -11,11 +15,119 @@ var __copyProps = (to, from, except, desc) => {
11
15
  }
12
16
  return to;
13
17
  };
14
- var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
15
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/index.ts
16
21
  var src_exports = {};
22
+ __export(src_exports, {
23
+ PixelDebugger: () => PixelDebugger,
24
+ PixelDebuggerProvider: () => PixelDebuggerProvider,
25
+ PixelDebuggerToggle: () => PixelDebuggerToggle,
26
+ usePixelAltSendHandler: () => usePixelAltSendHandler
27
+ });
17
28
  module.exports = __toCommonJS(src_exports);
18
- __reExport(src_exports, require("./components"), module.exports);
19
- __reExport(src_exports, require("./hooks"), module.exports);
20
- __reExport(src_exports, require("./PixelEvent"), module.exports);
29
+
30
+ // src/components/PixelDebugger.tsx
31
+ var import_material = require("@mui/material");
32
+ var import_react_button = require("@xylabs/react-button");
33
+ var import_react_flexbox = require("@xylabs/react-flexbox");
34
+ var import_react_pixel = require("@xylabs/react-pixel");
35
+ var import_react_portal = require("@xylabs/react-portal");
36
+ var import_react2 = require("react");
37
+
38
+ // src/hooks/usePixelAltSendHandler.ts
39
+ var import_pixel = require("@xylabs/pixel");
40
+ var import_react = require("react");
41
+ var usePixelAltSendHandler = (altHandler) => {
42
+ const [pixelSend, setPixelSend] = (0, import_react.useState)();
43
+ (0, import_react.useEffect)(() => {
44
+ if (!pixelSend && import_pixel.XyPixel.instance.send) {
45
+ const oldHandler = import_pixel.XyPixel.instance.send.bind(import_pixel.XyPixel.instance);
46
+ setPixelSend(oldHandler);
47
+ } else {
48
+ import_pixel.XyPixel.instance.send = async (event, fields, eventId) => {
49
+ altHandler(event, fields);
50
+ return await pixelSend?.(event, fields, eventId);
51
+ };
52
+ }
53
+ return () => {
54
+ if (pixelSend) {
55
+ import_pixel.XyPixel.instance.send = pixelSend;
56
+ }
57
+ };
58
+ }, [pixelSend, altHandler]);
59
+ };
60
+
61
+ // src/components/PixelDebugger.tsx
62
+ var import_jsx_runtime = require("react/jsx-runtime");
63
+ var PixelDebugger = () => {
64
+ const { isDebugging } = (0, import_react2.useContext)(import_react_pixel.DebugUserEventsContext);
65
+ const theme = (0, import_material.useTheme)();
66
+ const [displayEvents, setDisplayEvents] = (0, import_react2.useState)(false);
67
+ const [events, setEvents] = (0, import_react2.useState)([]);
68
+ usePixelAltSendHandler((event, fields) => {
69
+ setEvents((events2) => [{ event, fields }, ...events2]);
70
+ });
71
+ if (!isDebugging) {
72
+ return null;
73
+ }
74
+ 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)(
75
+ import_material.Card,
76
+ {
77
+ variant: "outlined",
78
+ sx: {
79
+ backdropFilter: "blur(16px) saturate(180%)",
80
+ backgroundColor: "rgba(18, 18, 18, .70)",
81
+ overflowY: "auto",
82
+ width: "100%"
83
+ },
84
+ color: theme.palette.primary.main,
85
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { alignItems: "stretch", sx: { flexFlow: "column", maxHeight: 400 }, children: [
86
+ /* @__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" }) }),
87
+ displayEvents && !!events.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
88
+ import_react_flexbox.FlexCol,
89
+ {
90
+ alignItems: "stretch",
91
+ alignContent: "start",
92
+ padding: 2,
93
+ sx: { cursor: "pointer", flex: "1 1 auto", overflowY: "auto", userSelect: "none" },
94
+ children: events.map((e, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PixelEventDetails, { events, index, ...e }, `${e.event}-${index}`))
95
+ }
96
+ ),
97
+ displayEvents && !events.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "subtitle2", children: "No Events" })
98
+ ] })
99
+ }
100
+ ) }) }) });
101
+ };
102
+ var PixelEventDetails = ({ event, fields, index, events }) => {
103
+ const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
104
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { alignItems: "stretch", marginBottom: 0.5, onClick: () => setIsOpen(!isOpen), children: [
105
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "subtitle2", children: event }),
106
+ isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { marginBottom: 0.5, variant: "caption", children: JSON.stringify(fields, null, 2) }),
107
+ events[index + 1] && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Divider, {})
108
+ ] });
109
+ };
110
+
111
+ // src/components/PixelDebuggerProvider.tsx
112
+ var import_react_pixel2 = require("@xylabs/react-pixel");
113
+ var import_react_shared = require("@xylabs/react-shared");
114
+ var import_jsx_runtime2 = require("react/jsx-runtime");
115
+ var PixelDebuggerProvider = ({ children }) => {
116
+ const [isDebugging, setIsDebugging] = (0, import_react_shared.useLocalStorage)("isDebuggingPixel", false);
117
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_pixel2.DebugUserEventsContext.Provider, { value: { isDebugging, setIsDebugging }, children });
118
+ };
119
+
120
+ // src/components/PixelDebuggerToggle.tsx
121
+ var import_material2 = require("@mui/material");
122
+ var import_react_flexbox2 = require("@xylabs/react-flexbox");
123
+ var import_react_pixel3 = require("@xylabs/react-pixel");
124
+ var import_react3 = require("react");
125
+ var import_jsx_runtime3 = require("react/jsx-runtime");
126
+ var PixelDebuggerToggle = ({ ...props }) => {
127
+ const { setIsDebugging, isDebugging } = (0, import_react3.useContext)(import_react_pixel3.DebugUserEventsContext);
128
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_flexbox2.FlexRow, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_material2.FormControl, { children: [
129
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.FormLabel, { children: "Enable Debugger" }),
130
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Switch, { checked: isDebugging, onClick: () => setIsDebugging(!isDebugging) })
131
+ ] }) });
132
+ };
21
133
  //# sourceMappingURL=index.cjs.map