@xylabs/react-pixel-debugger 3.1.0-rc.2 → 3.1.0-rc.4

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 (73) hide show
  1. package/dist/PixelEvent.js +17 -0
  2. package/dist/PixelEvent.js.map +1 -0
  3. package/dist/PixelEvent.mjs +1 -0
  4. package/dist/PixelEvent.mjs.map +1 -0
  5. package/dist/components/PixelDebugger.js +83 -0
  6. package/dist/components/PixelDebugger.js.map +1 -0
  7. package/dist/components/PixelDebugger.mjs +59 -0
  8. package/dist/components/PixelDebugger.mjs.map +1 -0
  9. package/dist/components/PixelDebugger.stories.js +58 -0
  10. package/dist/components/PixelDebugger.stories.js.map +1 -0
  11. package/dist/components/PixelDebugger.stories.mjs +34 -0
  12. package/dist/components/PixelDebugger.stories.mjs.map +1 -0
  13. package/dist/components/PixelDebuggerProvider.js +35 -0
  14. package/dist/components/PixelDebuggerProvider.js.map +1 -0
  15. package/dist/components/PixelDebuggerProvider.mjs +11 -0
  16. package/dist/components/PixelDebuggerProvider.mjs.map +1 -0
  17. package/dist/components/PixelDebuggerToggle.js +40 -0
  18. package/dist/components/PixelDebuggerToggle.js.map +1 -0
  19. package/dist/components/PixelDebuggerToggle.mjs +16 -0
  20. package/dist/components/PixelDebuggerToggle.mjs.map +1 -0
  21. package/dist/components/index.js +27 -0
  22. package/dist/components/index.js.map +1 -0
  23. package/dist/components/index.mjs +4 -0
  24. package/dist/components/index.mjs.map +1 -0
  25. package/dist/esm/PixelEvent.d.ts +5 -0
  26. package/dist/esm/PixelEvent.d.ts.map +1 -0
  27. package/dist/esm/PixelEvent.js +1 -0
  28. package/dist/esm/PixelEvent.js.map +1 -0
  29. package/dist/esm/components/PixelDebugger.d.ts +3 -0
  30. package/dist/esm/components/PixelDebugger.d.ts.map +1 -0
  31. package/dist/esm/components/PixelDebugger.js +59 -0
  32. package/dist/esm/components/PixelDebugger.js.map +1 -0
  33. package/dist/esm/components/PixelDebugger.stories.d.ts +5 -0
  34. package/dist/esm/components/PixelDebugger.stories.d.ts.map +1 -0
  35. package/dist/esm/components/PixelDebugger.stories.js +34 -0
  36. package/dist/esm/components/PixelDebugger.stories.js.map +1 -0
  37. package/dist/esm/components/PixelDebuggerProvider.d.ts +4 -0
  38. package/dist/esm/components/PixelDebuggerProvider.d.ts.map +1 -0
  39. package/dist/esm/components/PixelDebuggerProvider.js +11 -0
  40. package/dist/esm/components/PixelDebuggerProvider.js.map +1 -0
  41. package/dist/esm/components/PixelDebuggerToggle.d.ts +4 -0
  42. package/dist/esm/components/PixelDebuggerToggle.d.ts.map +1 -0
  43. package/dist/esm/components/PixelDebuggerToggle.js +16 -0
  44. package/dist/esm/components/PixelDebuggerToggle.js.map +1 -0
  45. package/dist/esm/components/index.d.ts +4 -0
  46. package/dist/esm/components/index.d.ts.map +1 -0
  47. package/dist/esm/components/index.js +4 -0
  48. package/dist/esm/components/index.js.map +1 -0
  49. package/dist/esm/hooks/index.d.ts +2 -0
  50. package/dist/esm/hooks/index.d.ts.map +1 -0
  51. package/dist/esm/hooks/index.js +2 -0
  52. package/dist/esm/hooks/index.js.map +1 -0
  53. package/dist/esm/hooks/usePixelAltSendHandler.d.ts +2 -0
  54. package/dist/esm/hooks/usePixelAltSendHandler.d.ts.map +1 -0
  55. package/dist/esm/hooks/usePixelAltSendHandler.js +25 -0
  56. package/dist/esm/hooks/usePixelAltSendHandler.js.map +1 -0
  57. package/dist/esm/index.d.ts +4 -0
  58. package/dist/esm/index.d.ts.map +1 -0
  59. package/dist/esm/index.js +4 -0
  60. package/dist/esm/index.js.map +1 -0
  61. package/dist/hooks/index.js +23 -0
  62. package/dist/hooks/index.js.map +1 -0
  63. package/dist/hooks/index.mjs +2 -0
  64. package/dist/hooks/index.mjs.map +1 -0
  65. package/dist/hooks/usePixelAltSendHandler.js +49 -0
  66. package/dist/hooks/usePixelAltSendHandler.js.map +1 -0
  67. package/dist/hooks/usePixelAltSendHandler.mjs +25 -0
  68. package/dist/hooks/usePixelAltSendHandler.mjs.map +1 -0
  69. package/dist/index.js +7 -120
  70. package/dist/index.js.map +1 -1
  71. package/dist/index.mjs +3 -109
  72. package/dist/index.mjs.map +1 -1
  73. package/package.json +10 -10
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/PixelDebugger.stories.tsx"],"sourcesContent":["import { Meta, StoryFn } from '@storybook/react'\nimport { PixelApi, XyPixel } from '@xylabs/pixel'\nimport { useEffect, useState } from 'react'\n\nimport { PixelDebugger, PixelDebuggerToggle } from './index'\nimport { PixelDebuggerProvider } from './PixelDebuggerProvider'\n\nconst StorybookEntry = {\n argTypes: {},\n component: PixelDebuggerToggle,\n parameters: {\n docs: {\n page: null,\n },\n },\n title: 'pixel-debugger/PixelDebuggerToggle',\n} as Meta<typeof PixelDebuggerToggle>\n\nconst Template: StoryFn<typeof PixelDebuggerToggle> = (args) => {\n const [pixel, setPixel] = useState<XyPixel>()\n useEffect(() => {\n XyPixel.selectApi(new PixelApi('local'))\n setPixel(XyPixel.init('storybookPixel'))\n }, [])\n return pixel ? (\n <PixelDebuggerProvider>\n <PixelDebuggerToggle {...args} />\n <PixelDebugger />\n </PixelDebuggerProvider>\n ) : (\n <></>\n )\n}\n\nconst Default = Template.bind({})\nDefault.args = {}\n\nexport { Default }\n\n// eslint-disable-next-line import/no-default-export\nexport default StorybookEntry\n"],"mappings":"AAyBI,SAKA,UAJE,KADF;AAxBJ,SAAS,UAAU,eAAe;AAClC,SAAS,WAAW,gBAAgB;AAEpC,SAAS,eAAe,2BAA2B;AACnD,SAAS,6BAA6B;AAEtC,MAAM,iBAAiB;AAAA,EACrB,UAAU,CAAC;AAAA,EACX,WAAW;AAAA,EACX,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,OAAO;AACT;AAEA,MAAM,WAAgD,CAAC,SAAS;AAC9D,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAkB;AAC5C,YAAU,MAAM;AACd,YAAQ,UAAU,IAAI,SAAS,OAAO,CAAC;AACvC,aAAS,QAAQ,KAAK,gBAAgB,CAAC;AAAA,EACzC,GAAG,CAAC,CAAC;AACL,SAAO,QACL,qBAAC,yBACC;AAAA,wBAAC,uBAAqB,GAAG,MAAM;AAAA,IAC/B,oBAAC,iBAAc;AAAA,KACjB,IAEA,gCAAE;AAEN;AAEA,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;AAChC,QAAQ,OAAO,CAAC;AAKhB,IAAO,gCAAQ;","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"}
@@ -0,0 +1,11 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { DebugUserEventsContext } from "@xylabs/react-pixel";
3
+ import { useLocalStorage } from "@xylabs/react-shared";
4
+ const PixelDebuggerProvider = ({ children }) => {
5
+ const [isDebugging, setIsDebugging] = useLocalStorage("isDebuggingPixel", false);
6
+ return /* @__PURE__ */ jsx(DebugUserEventsContext.Provider, { value: { isDebugging, setIsDebugging }, children });
7
+ };
8
+ export {
9
+ PixelDebuggerProvider
10
+ };
11
+ //# sourceMappingURL=PixelDebuggerProvider.js.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":"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":[]}
@@ -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"}
@@ -0,0 +1,16 @@
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { FormControl, FormLabel, Switch } from "@mui/material";
3
+ import { FlexRow } from "@xylabs/react-flexbox";
4
+ import { DebugUserEventsContext } from "@xylabs/react-pixel";
5
+ import { useContext } from "react";
6
+ const PixelDebuggerToggle = ({ ...props }) => {
7
+ const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext);
8
+ return /* @__PURE__ */ jsx(FlexRow, { ...props, children: /* @__PURE__ */ jsxs(FormControl, { children: [
9
+ /* @__PURE__ */ jsx(FormLabel, { children: "Enable Debugger" }),
10
+ /* @__PURE__ */ jsx(Switch, { checked: isDebugging, onClick: () => setIsDebugging(!isDebugging) })
11
+ ] }) });
12
+ };
13
+ export {
14
+ PixelDebuggerToggle
15
+ };
16
+ //# sourceMappingURL=PixelDebuggerToggle.js.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":"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":[]}
@@ -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"}
@@ -0,0 +1,4 @@
1
+ export * from "./PixelDebugger";
2
+ export * from "./PixelDebuggerProvider";
3
+ export * from "./PixelDebuggerToggle";
4
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from './PixelDebugger'\nexport * from './PixelDebuggerProvider'\nexport * from './PixelDebuggerToggle'\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;","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"}
@@ -0,0 +1,2 @@
1
+ export * from "./usePixelAltSendHandler";
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/hooks/index.ts"],"sourcesContent":["export * from './usePixelAltSendHandler'\n"],"mappings":"AAAA,cAAc;","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"}
@@ -0,0 +1,25 @@
1
+ import { XyPixel } from "@xylabs/pixel";
2
+ import { useEffect, useState } from "react";
3
+ const usePixelAltSendHandler = (altHandler) => {
4
+ const [pixelSend, setPixelSend] = useState();
5
+ useEffect(() => {
6
+ if (!pixelSend && XyPixel.instance.send) {
7
+ const oldHandler = XyPixel.instance.send.bind(XyPixel.instance);
8
+ setPixelSend(oldHandler);
9
+ } else {
10
+ XyPixel.instance.send = async (event, fields, eventId) => {
11
+ altHandler(event, fields);
12
+ return await pixelSend?.(event, fields, eventId);
13
+ };
14
+ }
15
+ return () => {
16
+ if (pixelSend) {
17
+ XyPixel.instance.send = pixelSend;
18
+ }
19
+ };
20
+ }, [pixelSend, altHandler]);
21
+ };
22
+ export {
23
+ usePixelAltSendHandler
24
+ };
25
+ //# sourceMappingURL=usePixelAltSendHandler.js.map
@@ -0,0 +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,SAAS,eAAe;AACxB,SAAS,WAAW,gBAAgB;AAE7B,MAAM,yBAAyB,CAAC,eAA0E;AAC/G,QAAM,CAAC,WAAW,YAAY,IAAI,SAAuC;AACzE,YAAU,MAAM;AACd,QAAI,CAAC,aAAa,QAAQ,SAAS,MAAM;AACvC,YAAM,aAAa,QAAQ,SAAS,KAAK,KAAK,QAAQ,QAAQ;AAC9D,mBAAa,UAAU;AAAA,IACzB,OAAO;AACL,cAAQ,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,gBAAQ,SAAS,OAAO;AAAA,MAC1B;AAAA,IACF;AAAA,EACF,GAAG,CAAC,WAAW,UAAU,CAAC;AAC5B;","names":[]}
@@ -0,0 +1,4 @@
1
+ export * from './components';
2
+ export * from './hooks';
3
+ export * from './PixelEvent';
4
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA"}
@@ -0,0 +1,4 @@
1
+ export * from "./components";
2
+ export * from "./hooks";
3
+ export * from "./PixelEvent";
4
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/index.ts"],"sourcesContent":["export * from './components'\nexport * from './hooks'\nexport * from './PixelEvent'\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
@@ -0,0 +1,23 @@
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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
15
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
16
+ var hooks_exports = {};
17
+ module.exports = __toCommonJS(hooks_exports);
18
+ __reExport(hooks_exports, require("./usePixelAltSendHandler"), module.exports);
19
+ // Annotate the CommonJS export names for ESM import in node:
20
+ 0 && (module.exports = {
21
+ ...require("./usePixelAltSendHandler")
22
+ });
23
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/hooks/index.ts"],"sourcesContent":["export * from './usePixelAltSendHandler'\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,0BAAc,qCAAd;","names":[]}
@@ -0,0 +1,2 @@
1
+ export * from "./usePixelAltSendHandler";
2
+ //# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/hooks/index.ts"],"sourcesContent":["export * from './usePixelAltSendHandler'\n"],"mappings":"AAAA,cAAc;","names":[]}
@@ -0,0 +1,49 @@
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
+ var usePixelAltSendHandler_exports = {};
20
+ __export(usePixelAltSendHandler_exports, {
21
+ usePixelAltSendHandler: () => usePixelAltSendHandler
22
+ });
23
+ module.exports = __toCommonJS(usePixelAltSendHandler_exports);
24
+ var import_pixel = require("@xylabs/pixel");
25
+ var import_react = require("react");
26
+ const usePixelAltSendHandler = (altHandler) => {
27
+ const [pixelSend, setPixelSend] = (0, import_react.useState)();
28
+ (0, import_react.useEffect)(() => {
29
+ if (!pixelSend && import_pixel.XyPixel.instance.send) {
30
+ const oldHandler = import_pixel.XyPixel.instance.send.bind(import_pixel.XyPixel.instance);
31
+ setPixelSend(oldHandler);
32
+ } else {
33
+ import_pixel.XyPixel.instance.send = async (event, fields, eventId) => {
34
+ altHandler(event, fields);
35
+ return await pixelSend?.(event, fields, eventId);
36
+ };
37
+ }
38
+ return () => {
39
+ if (pixelSend) {
40
+ import_pixel.XyPixel.instance.send = pixelSend;
41
+ }
42
+ };
43
+ }, [pixelSend, altHandler]);
44
+ };
45
+ // Annotate the CommonJS export names for ESM import in node:
46
+ 0 && (module.exports = {
47
+ usePixelAltSendHandler
48
+ });
49
+ //# sourceMappingURL=usePixelAltSendHandler.js.map
@@ -0,0 +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":[]}
@@ -0,0 +1,25 @@
1
+ import { XyPixel } from "@xylabs/pixel";
2
+ import { useEffect, useState } from "react";
3
+ const usePixelAltSendHandler = (altHandler) => {
4
+ const [pixelSend, setPixelSend] = useState();
5
+ useEffect(() => {
6
+ if (!pixelSend && XyPixel.instance.send) {
7
+ const oldHandler = XyPixel.instance.send.bind(XyPixel.instance);
8
+ setPixelSend(oldHandler);
9
+ } else {
10
+ XyPixel.instance.send = async (event, fields, eventId) => {
11
+ altHandler(event, fields);
12
+ return await pixelSend?.(event, fields, eventId);
13
+ };
14
+ }
15
+ return () => {
16
+ if (pixelSend) {
17
+ XyPixel.instance.send = pixelSend;
18
+ }
19
+ };
20
+ }, [pixelSend, altHandler]);
21
+ };
22
+ export {
23
+ usePixelAltSendHandler
24
+ };
25
+ //# sourceMappingURL=usePixelAltSendHandler.mjs.map
@@ -0,0 +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,SAAS,eAAe;AACxB,SAAS,WAAW,gBAAgB;AAE7B,MAAM,yBAAyB,CAAC,eAA0E;AAC/G,QAAM,CAAC,WAAW,YAAY,IAAI,SAAuC;AACzE,YAAU,MAAM;AACd,QAAI,CAAC,aAAa,QAAQ,SAAS,MAAM;AACvC,YAAM,aAAa,QAAQ,SAAS,KAAK,KAAK,QAAQ,QAAQ;AAC9D,mBAAa,UAAU;AAAA,IACzB,OAAO;AACL,cAAQ,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,gBAAQ,SAAS,OAAO;AAAA,MAC1B;AAAA,IACF;AAAA,EACF,GAAG,CAAC,WAAW,UAAU,CAAC;AAC5B;","names":[]}
package/dist/index.js CHANGED
@@ -3,10 +3,6 @@ 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
- };
10
6
  var __copyProps = (to, from, except, desc) => {
11
7
  if (from && typeof from === "object" || typeof from === "function") {
12
8
  for (let key of __getOwnPropNames(from))
@@ -15,126 +11,17 @@ var __copyProps = (to, from, except, desc) => {
15
11
  }
16
12
  return to;
17
13
  };
14
+ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
18
15
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
-
20
- // src/index.ts
21
16
  var src_exports = {};
22
- __export(src_exports, {
23
- PixelDebugger: () => PixelDebugger,
24
- PixelDebuggerProvider: () => PixelDebuggerProvider,
25
- PixelDebuggerToggle: () => PixelDebuggerToggle,
26
- usePixelAltSendHandler: () => usePixelAltSendHandler
27
- });
28
17
  module.exports = __toCommonJS(src_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
- };
18
+ __reExport(src_exports, require("./components"), module.exports);
19
+ __reExport(src_exports, require("./hooks"), module.exports);
20
+ __reExport(src_exports, require("./PixelEvent"), module.exports);
133
21
  // Annotate the CommonJS export names for ESM import in node:
134
22
  0 && (module.exports = {
135
- PixelDebugger,
136
- PixelDebuggerProvider,
137
- PixelDebuggerToggle,
138
- usePixelAltSendHandler
23
+ ...require("./components"),
24
+ ...require("./hooks"),
25
+ ...require("./PixelEvent")
139
26
  });
140
27
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/components/PixelDebugger.tsx","../src/hooks/usePixelAltSendHandler.ts","../src/components/PixelDebuggerProvider.tsx","../src/components/PixelDebuggerToggle.tsx"],"sourcesContent":["export * from './components'\nexport * from './hooks'\nexport * from './PixelEvent'\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
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export * from './components'\nexport * from './hooks'\nexport * from './PixelEvent'\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,yBAAd;AACA,wBAAc,oBADd;AAEA,wBAAc,yBAFd;","names":[]}
package/dist/index.mjs CHANGED
@@ -1,110 +1,4 @@
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
- usePixelAltSendHandler
109
- };
1
+ export * from "./components";
2
+ export * from "./hooks";
3
+ export * from "./PixelEvent";
110
4
  //# sourceMappingURL=index.mjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/PixelDebugger.tsx","../src/hooks/usePixelAltSendHandler.ts","../src/components/PixelDebuggerProvider.tsx","../src/components/PixelDebuggerToggle.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","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":["useState","useState","events","DebugUserEventsContext","jsx","DebugUserEventsContext","useContext","jsx","jsxs"]}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export * from './components'\nexport * from './hooks'\nexport * from './PixelEvent'\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}