@xylabs/react-pixel-debugger 2.19.1 → 3.1.0-rc.1

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 (66) hide show
  1. package/dist/PixelEvent.d.mts.map +1 -0
  2. package/dist/PixelEvent.d.ts +5 -0
  3. package/dist/PixelEvent.d.ts.map +1 -0
  4. package/dist/components/PixelDebugger.d.ts.map +1 -0
  5. package/dist/components/PixelDebugger.stories.d.ts +5 -0
  6. package/dist/components/PixelDebugger.stories.d.ts.map +1 -0
  7. package/dist/components/PixelDebuggerProvider.d.ts.map +1 -0
  8. package/dist/components/PixelDebuggerToggle.d.ts.map +1 -0
  9. package/dist/components/index.d.ts.map +1 -0
  10. package/dist/hooks/index.d.ts.map +1 -0
  11. package/dist/hooks/usePixelAltSendHandler.d.ts.map +1 -0
  12. package/dist/index.d.mts.map +1 -0
  13. package/dist/{esm/index.js → index.d.ts} +1 -1
  14. package/dist/index.d.ts.map +1 -0
  15. package/dist/index.js +140 -0
  16. package/dist/index.js.map +1 -0
  17. package/dist/index.mjs +110 -0
  18. package/dist/index.mjs.map +1 -0
  19. package/package.json +29 -18
  20. package/dist/cjs/PixelEvent.js +0 -3
  21. package/dist/cjs/PixelEvent.js.map +0 -1
  22. package/dist/cjs/components/PixelDebugger.js +0 -36
  23. package/dist/cjs/components/PixelDebugger.js.map +0 -1
  24. package/dist/cjs/components/PixelDebuggerProvider.js +0 -12
  25. package/dist/cjs/components/PixelDebuggerProvider.js.map +0 -1
  26. package/dist/cjs/components/PixelDebuggerToggle.js +0 -16
  27. package/dist/cjs/components/PixelDebuggerToggle.js.map +0 -1
  28. package/dist/cjs/components/index.js +0 -7
  29. package/dist/cjs/components/index.js.map +0 -1
  30. package/dist/cjs/hooks/index.js +0 -5
  31. package/dist/cjs/hooks/index.js.map +0 -1
  32. package/dist/cjs/hooks/usePixelAltSendHandler.js +0 -29
  33. package/dist/cjs/hooks/usePixelAltSendHandler.js.map +0 -1
  34. package/dist/cjs/index.js +0 -7
  35. package/dist/cjs/index.js.map +0 -1
  36. package/dist/esm/PixelEvent.js +0 -2
  37. package/dist/esm/PixelEvent.js.map +0 -1
  38. package/dist/esm/components/PixelDebugger.js +0 -32
  39. package/dist/esm/components/PixelDebugger.js.map +0 -1
  40. package/dist/esm/components/PixelDebuggerProvider.js +0 -8
  41. package/dist/esm/components/PixelDebuggerProvider.js.map +0 -1
  42. package/dist/esm/components/PixelDebuggerToggle.js +0 -10
  43. package/dist/esm/components/PixelDebuggerToggle.js.map +0 -1
  44. package/dist/esm/components/index.js +0 -4
  45. package/dist/esm/components/index.js.map +0 -1
  46. package/dist/esm/hooks/index.js +0 -2
  47. package/dist/esm/hooks/index.js.map +0 -1
  48. package/dist/esm/hooks/usePixelAltSendHandler.js +0 -24
  49. package/dist/esm/hooks/usePixelAltSendHandler.js.map +0 -1
  50. package/dist/esm/index.js.map +0 -1
  51. package/dist/types/PixelEvent.d.ts.map +0 -1
  52. package/dist/types/components/PixelDebugger.d.ts.map +0 -1
  53. package/dist/types/components/PixelDebuggerProvider.d.ts.map +0 -1
  54. package/dist/types/components/PixelDebuggerToggle.d.ts.map +0 -1
  55. package/dist/types/components/index.d.ts.map +0 -1
  56. package/dist/types/hooks/index.d.ts.map +0 -1
  57. package/dist/types/hooks/usePixelAltSendHandler.d.ts.map +0 -1
  58. package/dist/types/index.d.ts.map +0 -1
  59. /package/dist/{types/PixelEvent.d.ts → PixelEvent.d.mts} +0 -0
  60. /package/dist/{types/components → components}/PixelDebugger.d.ts +0 -0
  61. /package/dist/{types/components → components}/PixelDebuggerProvider.d.ts +0 -0
  62. /package/dist/{types/components → components}/PixelDebuggerToggle.d.ts +0 -0
  63. /package/dist/{types/components → components}/index.d.ts +0 -0
  64. /package/dist/{types/hooks → hooks}/index.d.ts +0 -0
  65. /package/dist/{types/hooks → hooks}/usePixelAltSendHandler.d.ts +0 -0
  66. /package/dist/{types/index.d.ts → index.d.mts} +0 -0
@@ -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"}
@@ -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"}
@@ -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"}
@@ -0,0 +1,5 @@
1
+ declare const StorybookEntry: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@xylabs/react-flexbox").BusyBoxProps>;
2
+ declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("@xylabs/react-flexbox").BusyBoxProps>;
3
+ export { Default };
4
+ export default StorybookEntry;
5
+ //# sourceMappingURL=PixelDebugger.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PixelDebugger.stories.d.ts","sourceRoot":"","sources":["../../src/components/PixelDebugger.stories.tsx"],"names":[],"mappings":"AAOA,QAAA,MAAM,cAAc,iJASiB,CAAA;AAkBrC,QAAA,MAAM,OAAO,6IAAoB,CAAA;AAGjC,OAAO,EAAE,OAAO,EAAE,CAAA;AAGlB,eAAe,cAAc,CAAA"}
@@ -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 @@
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 @@
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 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAA"}
@@ -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 @@
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"}
@@ -1,4 +1,4 @@
1
1
  export * from './components';
2
2
  export * from './hooks';
3
3
  export * from './PixelEvent';
4
- //# sourceMappingURL=index.js.map
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"}
package/dist/index.js ADDED
@@ -0,0 +1,140 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/index.ts
21
+ var src_exports = {};
22
+ __export(src_exports, {
23
+ PixelDebugger: () => PixelDebugger,
24
+ PixelDebuggerProvider: () => PixelDebuggerProvider,
25
+ PixelDebuggerToggle: () => PixelDebuggerToggle,
26
+ usePixelAltSendHandler: () => usePixelAltSendHandler
27
+ });
28
+ 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
+ };
133
+ // Annotate the CommonJS export names for ESM import in node:
134
+ 0 && (module.exports = {
135
+ PixelDebugger,
136
+ PixelDebuggerProvider,
137
+ PixelDebuggerToggle,
138
+ usePixelAltSendHandler
139
+ });
140
+ //# sourceMappingURL=index.js.map
@@ -0,0 +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"]}
package/dist/index.mjs ADDED
@@ -0,0 +1,110 @@
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
+ };
110
+ //# sourceMappingURL=index.mjs.map
@@ -0,0 +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":";AAAA,SAAS,OAAO,MAAM,SAAS,YAAY,gBAAgB;AAC3D,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,8BAA8B;AACvC,SAAS,cAAc;AACvB,SAAS,YAAY,YAAAA,iBAAgB;;;ACLrC,SAAS,eAAe;AACxB,SAAS,WAAW,gBAAgB;AAE7B,IAAM,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;;;ADiBY,SAEI,KAFJ;AA7BL,IAAM,gBAA0B,MAAM;AAC3C,QAAM,EAAE,YAAY,IAAI,WAAW,sBAAsB;AAEzD,QAAM,QAAQ,SAAS;AACvB,QAAM,CAAC,eAAe,gBAAgB,IAAIC,UAAS,KAAK;AACxD,QAAM,CAAC,QAAQ,SAAS,IAAIA,UAAuB,CAAC,CAAC;AAErD,yBAAuB,CAAC,OAAe,WAAqC;AAC1E,cAAU,CAACC,YAAW,CAAC,EAAE,OAAO,OAAO,GAAG,GAAGA,OAAM,CAAC;AAAA,EACtD,CAAC;AAED,MAAI,CAAC,aAAa;AAChB,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,UACC,8BAAC,SAAI,OAAO,EAAE,QAAQ,GAAG,MAAM,GAAG,UAAU,SAAS,OAAO,IAAI,GAC9D,8BAAC,SAAM,cAAc,OAAO,QAAQ,OAAM,WAAU,IAAI,EAAE,OAAO,OAAO,GACtE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,IAAI;AAAA,QACF,gBAAgB;AAAA,QAChB,iBAAiB;AAAA,QACjB,WAAW;AAAA,QACX,OAAO;AAAA,MACT;AAAA,MACA,OAAO,MAAM,QAAQ,QAAQ;AAAA,MAE7B,+BAAC,WAAQ,YAAW,WAAU,IAAI,EAAE,UAAU,UAAU,WAAW,IAAI,GACrE;AAAA,4BAAC,WAAQ,YAAW,WAAU,IAAI,EAAE,MAAM,WAAW,GACnD,8BAAC,YAAS,SAAQ,QAAO,SAAS,MAAM,iBAAiB,CAAC,aAAa,GAAG,+BAE1E,GACF;AAAA,QACC,iBAAiB,CAAC,CAAC,OAAO,UACzB;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,cAAa;AAAA,YACb,SAAS;AAAA,YACT,IAAI,EAAE,QAAQ,WAAW,MAAM,YAAY,WAAW,QAAQ,YAAY,OAAO;AAAA,YAEhF,iBAAO,IAAI,CAAC,GAAG,UACd,oBAAC,qBAA8C,QAAgB,OAAe,GAAG,KAAzD,GAAG,EAAE,KAAK,IAAI,KAAK,EAAyC,CACrF;AAAA;AAAA,QACH;AAAA,QAED,iBAAiB,CAAC,OAAO,UAAU,oBAAC,cAAW,SAAQ,aAAY,uBAAS;AAAA,SAC/E;AAAA;AAAA,EACF,GACF,GACF,GACF;AAEJ;AAEA,IAAM,oBAAoF,CAAC,EAAE,OAAO,QAAQ,OAAO,OAAO,MAAM;AAC9H,QAAM,CAAC,QAAQ,SAAS,IAAID,UAAS,KAAK;AAC1C,SACE,qBAAC,WAAQ,YAAW,WAAU,cAAc,KAAK,SAAS,MAAM,UAAU,CAAC,MAAM,GAC/E;AAAA,wBAAC,cAAW,SAAQ,aAAa,iBAAM;AAAA,IACtC,UACC,oBAAC,cAAW,cAAc,KAAK,SAAQ,WACpC,eAAK,UAAU,QAAQ,MAAM,CAAC,GACjC;AAAA,IAED,OAAO,QAAQ,CAAC,KAAK,oBAAC,WAAQ;AAAA,KACjC;AAEJ;;;AE/EA,SAAS,0BAAAE,+BAA8B;AACvC,SAAS,uBAAqC;AAIrC,gBAAAC,YAAA;AAFF,IAAM,wBAAgD,CAAC,EAAE,SAAS,MAAM;AAC7E,QAAM,CAAC,aAAa,cAAc,IAAI,gBAAyB,oBAAoB,KAAK;AACxF,SAAO,gBAAAA,KAACD,wBAAuB,UAAvB,EAAgC,OAAO,EAAE,aAAa,eAAe,GAAI,UAAS;AAC5F;;;ACNA,SAAS,aAAa,WAAW,cAAc;AAC/C,SAAuB,eAAe;AACtC,SAAS,0BAAAE,+BAA8B;AACvC,SAAS,cAAAC,mBAAkB;AAOrB,SACE,OAAAC,MADF,QAAAC,aAAA;AALC,IAAM,sBAA8C,CAAC,EAAE,GAAG,MAAM,MAAM;AAC3E,QAAM,EAAE,gBAAgB,YAAY,IAAIF,YAAWD,uBAAsB;AAEzE,SACE,gBAAAE,KAAC,WAAS,GAAG,OACX,0BAAAC,MAAC,eACC;AAAA,oBAAAD,KAAC,aAAU,6BAAe;AAAA,IAC1B,gBAAAA,KAAC,UAAO,SAAS,aAAa,SAAS,MAAM,eAAe,CAAC,WAAW,GAAG;AAAA,KAC7E,GACF;AAEJ;","names":["useState","useState","events","DebugUserEventsContext","jsx","DebugUserEventsContext","useContext","jsx","jsxs"]}
package/package.json CHANGED
@@ -13,18 +13,18 @@
13
13
  "packages/*"
14
14
  ],
15
15
  "dependencies": {
16
- "@xylabs/react-button": "~2.19.1",
17
- "@xylabs/react-flexbox": "~2.19.1",
18
- "@xylabs/react-pixel": "~2.19.1",
19
- "@xylabs/react-portal": "~2.19.1",
20
- "@xylabs/react-shared": "~2.19.1"
16
+ "@xylabs/react-button": "~3.1.0-rc.1",
17
+ "@xylabs/react-flexbox": "~3.1.0-rc.1",
18
+ "@xylabs/react-pixel": "~3.1.0-rc.1",
19
+ "@xylabs/react-portal": "~3.1.0-rc.1",
20
+ "@xylabs/react-shared": "~3.1.0-rc.1"
21
21
  },
22
22
  "description": "Common React library for all XY Labs projects that use React",
23
23
  "devDependencies": {
24
24
  "@storybook/react": "^7.4.3",
25
25
  "@xylabs/pixel": "^1.4.14",
26
- "@xylabs/ts-scripts-yarn3": "^2.19.12",
27
- "@xylabs/tsconfig-react": "^2.19.12",
26
+ "@xylabs/ts-scripts-yarn3": "^3.0.28",
27
+ "@xylabs/tsconfig-react": "^3.0.28",
28
28
  "react": "^18.2.0",
29
29
  "react-dom": "^18.2.0",
30
30
  "typescript": "^5.2.2"
@@ -39,27 +39,37 @@
39
39
  "react-dom": "^18",
40
40
  "react-router-dom": "^6"
41
41
  },
42
- "browser": "dist/esm/index.js",
43
- "docs": "dist/docs.json",
44
42
  "exports": {
45
43
  ".": {
46
44
  "node": {
47
- "import": "./dist/esm/index.js",
48
- "require": "./dist/cjs/index.js"
45
+ "import": {
46
+ "types": "./dist/index.d.mts",
47
+ "default": "./dist/index.mjs"
48
+ },
49
+ "require": {
50
+ "types": "./dist/index.d.ts",
51
+ "default": "./dist/index.js"
52
+ }
49
53
  },
50
54
  "browser": {
51
- "import": "./dist/esm/index.js",
52
- "require": "./dist/cjs/index.js"
55
+ "import": {
56
+ "types": "./dist/index.d.mts",
57
+ "default": "./dist/index.mjs"
58
+ },
59
+ "require": {
60
+ "types": "./dist/index.d.ts",
61
+ "default": "./dist/index.js"
62
+ }
53
63
  },
54
- "default": "./dist/esm/index.js"
64
+ "default": "./dist/index.mjs"
55
65
  },
56
66
  "./dist/docs.json": {
57
67
  "default": "./dist/docs.json"
58
68
  },
59
69
  "./package.json": "./package.json"
60
70
  },
61
- "main": "dist/cjs/index.js",
62
- "module": "dist/esm/index.js",
71
+ "main": "dist/index.js",
72
+ "module": "dist/index.mjs",
63
73
  "homepage": "https://xylabs.com",
64
74
  "keywords": [
65
75
  "utility",
@@ -75,6 +85,7 @@
75
85
  "url": "https://github.com/xylabs/sdk-react.git"
76
86
  },
77
87
  "sideEffects": false,
78
- "types": "dist/types/index.d.ts",
79
- "version": "2.19.1"
88
+ "types": "dist/index.d.ts",
89
+ "version": "3.1.0-rc.1",
90
+ "stableVersion": "3.0.0"
80
91
  }
@@ -1,3 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- //# sourceMappingURL=PixelEvent.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PixelEvent.js","sourceRoot":"","sources":["../../src/PixelEvent.ts"],"names":[],"mappings":""}
@@ -1,36 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.PixelDebugger = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const material_1 = require("@mui/material");
6
- const react_button_1 = require("@xylabs/react-button");
7
- const react_flexbox_1 = require("@xylabs/react-flexbox");
8
- const react_pixel_1 = require("@xylabs/react-pixel");
9
- const react_portal_1 = require("@xylabs/react-portal");
10
- const react_1 = require("react");
11
- const hooks_1 = require("../hooks");
12
- const PixelDebugger = () => {
13
- const { isDebugging } = (0, react_1.useContext)(react_pixel_1.DebugUserEventsContext);
14
- //TODO - when adding in the location hook to detect location change, was dropping the setEvents in usePixelAltSendHand
15
- const theme = (0, material_1.useTheme)();
16
- const [displayEvents, setDisplayEvents] = (0, react_1.useState)(false);
17
- const [events, setEvents] = (0, react_1.useState)([]);
18
- (0, hooks_1.usePixelAltSendHandler)((event, fields) => {
19
- setEvents((events) => [{ event, fields }, ...events]);
20
- });
21
- if (!isDebugging) {
22
- return null;
23
- }
24
- return ((0, jsx_runtime_1.jsx)(react_portal_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { style: { bottom: 0, left: 0, position: 'fixed', width: 350 }, children: (0, jsx_runtime_1.jsx)(material_1.Badge, { badgeContent: events.length, color: "primary", sx: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(material_1.Card, { variant: "outlined", sx: {
25
- backdropFilter: 'blur(16px) saturate(180%)',
26
- backgroundColor: 'rgba(18, 18, 18, .70)',
27
- overflowY: 'auto',
28
- width: '100%',
29
- }, color: theme.palette.primary.main, children: (0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexCol, { alignItems: "stretch", sx: { flexFlow: 'column', maxHeight: 400 }, children: [(0, jsx_runtime_1.jsx)(react_flexbox_1.FlexCol, { alignItems: "stretch", sx: { flex: '0 1 auto' }, children: (0, jsx_runtime_1.jsx)(react_button_1.ButtonEx, { variant: "text", onClick: () => setDisplayEvents(!displayEvents), children: "XY Pixel Debugger" }) }), displayEvents && !!events.length && ((0, jsx_runtime_1.jsx)(react_flexbox_1.FlexCol, { alignItems: "stretch", alignContent: "start", padding: 2, sx: { cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' }, children: events.map((e, index) => ((0, jsx_runtime_1.jsx)(PixelEventDetails, Object.assign({ events: events, index: index }, e), `${e.event}-${index}`))) })), displayEvents && !events.length && (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", children: "No Events" })] }) }) }) }) }));
30
- };
31
- exports.PixelDebugger = PixelDebugger;
32
- const PixelEventDetails = ({ event, fields, index, events }) => {
33
- const [isOpen, setIsOpen] = (0, react_1.useState)(false);
34
- return ((0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexCol, { alignItems: "stretch", marginBottom: 0.5, onClick: () => setIsOpen(!isOpen), children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", children: event }), isOpen && ((0, jsx_runtime_1.jsx)(material_1.Typography, { marginBottom: 0.5, variant: "caption", children: JSON.stringify(fields, null, 2) })), events[index + 1] && (0, jsx_runtime_1.jsx)(material_1.Divider, {})] }));
35
- };
36
- //# sourceMappingURL=PixelDebugger.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PixelDebugger.js","sourceRoot":"","sources":["../../../src/components/PixelDebugger.tsx"],"names":[],"mappings":"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"}
@@ -1,12 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.PixelDebuggerProvider = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const react_pixel_1 = require("@xylabs/react-pixel");
6
- const react_shared_1 = require("@xylabs/react-shared");
7
- const PixelDebuggerProvider = ({ children }) => {
8
- const [isDebugging, setIsDebugging] = (0, react_shared_1.useLocalStorage)('isDebuggingPixel', false);
9
- return (0, jsx_runtime_1.jsx)(react_pixel_1.DebugUserEventsContext.Provider, { value: { isDebugging, setIsDebugging }, children: children });
10
- };
11
- exports.PixelDebuggerProvider = PixelDebuggerProvider;
12
- //# sourceMappingURL=PixelDebuggerProvider.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PixelDebuggerProvider.js","sourceRoot":"","sources":["../../../src/components/PixelDebuggerProvider.tsx"],"names":[],"mappings":";;;;AAAA,qDAA4D;AAC5D,uDAAoE;AAE7D,MAAM,qBAAqB,GAA2B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC5E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,8BAAe,EAAU,kBAAkB,EAAE,KAAK,CAAC,CAAA;IACzF,OAAO,uBAAC,oCAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE,YAAG,QAAQ,GAAmC,CAAA;AAC9H,CAAC,CAAA;AAHY,QAAA,qBAAqB,yBAGjC"}
@@ -1,16 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.PixelDebuggerToggle = void 0;
4
- const tslib_1 = require("tslib");
5
- const jsx_runtime_1 = require("react/jsx-runtime");
6
- const material_1 = require("@mui/material");
7
- const react_flexbox_1 = require("@xylabs/react-flexbox");
8
- const react_pixel_1 = require("@xylabs/react-pixel");
9
- const react_1 = require("react");
10
- const PixelDebuggerToggle = (_a) => {
11
- var props = tslib_1.__rest(_a, []);
12
- const { setIsDebugging, isDebugging } = (0, react_1.useContext)(react_pixel_1.DebugUserEventsContext);
13
- return ((0, jsx_runtime_1.jsx)(react_flexbox_1.FlexRow, Object.assign({}, props, { children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, { children: [(0, jsx_runtime_1.jsx)(material_1.FormLabel, { children: "Enable Debugger" }), (0, jsx_runtime_1.jsx)(material_1.Switch, { checked: isDebugging, onClick: () => setIsDebugging(!isDebugging) })] }) })));
14
- };
15
- exports.PixelDebuggerToggle = PixelDebuggerToggle;
16
- //# sourceMappingURL=PixelDebuggerToggle.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PixelDebuggerToggle.js","sourceRoot":"","sources":["../../../src/components/PixelDebuggerToggle.tsx"],"names":[],"mappings":";;;;;AAAA,4CAA8D;AAC9D,yDAA6D;AAC7D,qDAA4D;AAC5D,iCAAkC;AAE3B,MAAM,mBAAmB,GAA2B,CAAC,EAAY,EAAE,EAAE;QAAX,KAAK,sBAAV,EAAY,CAAF;IACpE,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,GAAG,IAAA,kBAAU,EAAC,oCAAsB,CAAC,CAAA;IAE1E,OAAO,CACL,uBAAC,uBAAO,oBAAK,KAAK,cAChB,wBAAC,sBAAW,eACV,uBAAC,oBAAS,kCAA4B,EACtC,uBAAC,iBAAM,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,CAAC,WAAW,CAAC,GAAI,IACjE,IACN,CACX,CAAA;AACH,CAAC,CAAA;AAXY,QAAA,mBAAmB,uBAW/B"}
@@ -1,7 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./PixelDebugger"), exports);
5
- tslib_1.__exportStar(require("./PixelDebuggerProvider"), exports);
6
- tslib_1.__exportStar(require("./PixelDebuggerToggle"), exports);
7
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";;;AAAA,0DAA+B;AAC/B,kEAAuC;AACvC,gEAAqC"}
@@ -1,5 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./usePixelAltSendHandler"), exports);
5
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":";;;AAAA,mEAAwC"}
@@ -1,29 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.usePixelAltSendHandler = void 0;
4
- const tslib_1 = require("tslib");
5
- const pixel_1 = require("@xylabs/pixel");
6
- const react_1 = require("react");
7
- const usePixelAltSendHandler = (altHandler) => {
8
- const [pixelSend, setPixelSend] = (0, react_1.useState)();
9
- (0, react_1.useEffect)(() => {
10
- if (!pixelSend && pixel_1.XyPixel.instance.send) {
11
- const oldHandler = pixel_1.XyPixel.instance.send.bind(pixel_1.XyPixel.instance);
12
- setPixelSend(oldHandler);
13
- }
14
- else {
15
- pixel_1.XyPixel.instance.send = (event, fields, eventId) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
16
- altHandler(event, fields);
17
- return yield (pixelSend === null || pixelSend === void 0 ? void 0 : pixelSend(event, fields, eventId));
18
- });
19
- }
20
- return () => {
21
- //restore send on unmount
22
- if (pixelSend) {
23
- pixel_1.XyPixel.instance.send = pixelSend;
24
- }
25
- };
26
- }, [pixelSend, altHandler]);
27
- };
28
- exports.usePixelAltSendHandler = usePixelAltSendHandler;
29
- //# sourceMappingURL=usePixelAltSendHandler.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"usePixelAltSendHandler.js","sourceRoot":"","sources":["../../../src/hooks/usePixelAltSendHandler.ts"],"names":[],"mappings":";;;;AAAA,yCAAuC;AACvC,iCAA2C;AAEpC,MAAM,sBAAsB,GAAG,CAAC,UAAqE,EAAE,EAAE;IAC9G,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,GAAgC,CAAA;IAC1E,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,IAAI,eAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;YACvC,MAAM,UAAU,GAAG,eAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,eAAO,CAAC,QAAQ,CAAC,CAAA;YAC/D,YAAY,CAAC,UAAU,CAAC,CAAA;SACzB;aAAM;YACL,eAAO,CAAC,QAAQ,CAAC,IAAI,GAAG,CAAO,KAAa,EAAE,MAAgC,EAAE,OAAgB,EAAE,EAAE;gBAClG,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;gBACzB,OAAO,MAAM,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,CAAA,CAAA;YAClD,CAAC,CAAA,CAAA;SACF;QACD,OAAO,GAAG,EAAE;YACV,yBAAyB;YACzB,IAAI,SAAS,EAAE;gBACb,eAAO,CAAC,QAAQ,CAAC,IAAI,GAAG,SAAS,CAAA;aAClC;QACH,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAA;AAC7B,CAAC,CAAA;AAnBY,QAAA,sBAAsB,0BAmBlC"}
package/dist/cjs/index.js DELETED
@@ -1,7 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./components"), exports);
5
- tslib_1.__exportStar(require("./hooks"), exports);
6
- tslib_1.__exportStar(require("./PixelEvent"), exports);
7
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA,uDAA4B;AAC5B,kDAAuB;AACvB,uDAA4B"}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=PixelEvent.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PixelEvent.js","sourceRoot":"","sources":["../../src/PixelEvent.ts"],"names":[],"mappings":""}
@@ -1,32 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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 } from 'react';
8
- import { usePixelAltSendHandler } from '../hooks';
9
- export const PixelDebugger = () => {
10
- const { isDebugging } = useContext(DebugUserEventsContext);
11
- //TODO - when adding in the location hook to detect location change, was dropping the setEvents in usePixelAltSendHand
12
- const theme = useTheme();
13
- const [displayEvents, setDisplayEvents] = useState(false);
14
- const [events, setEvents] = useState([]);
15
- usePixelAltSendHandler((event, fields) => {
16
- setEvents((events) => [{ event, fields }, ...events]);
17
- });
18
- if (!isDebugging) {
19
- return null;
20
- }
21
- return (_jsx(Portal, { children: _jsx("div", { style: { bottom: 0, left: 0, position: 'fixed', width: 350 }, children: _jsx(Badge, { badgeContent: events.length, color: "primary", sx: { width: '100%' }, children: _jsx(Card, { variant: "outlined", sx: {
22
- backdropFilter: 'blur(16px) saturate(180%)',
23
- backgroundColor: 'rgba(18, 18, 18, .70)',
24
- overflowY: 'auto',
25
- width: '100%',
26
- }, color: theme.palette.primary.main, children: _jsxs(FlexCol, { alignItems: "stretch", sx: { flexFlow: 'column', maxHeight: 400 }, children: [_jsx(FlexCol, { alignItems: "stretch", sx: { flex: '0 1 auto' }, children: _jsx(ButtonEx, { variant: "text", onClick: () => setDisplayEvents(!displayEvents), children: "XY Pixel Debugger" }) }), displayEvents && !!events.length && (_jsx(FlexCol, { alignItems: "stretch", alignContent: "start", padding: 2, sx: { cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' }, children: events.map((e, index) => (_jsx(PixelEventDetails, { events: events, index: index, ...e }, `${e.event}-${index}`))) })), displayEvents && !events.length && _jsx(Typography, { variant: "subtitle2", children: "No Events" })] }) }) }) }) }));
27
- };
28
- const PixelEventDetails = ({ event, fields, index, events }) => {
29
- const [isOpen, setIsOpen] = useState(false);
30
- return (_jsxs(FlexCol, { alignItems: "stretch", marginBottom: 0.5, onClick: () => setIsOpen(!isOpen), children: [_jsx(Typography, { variant: "subtitle2", children: event }), isOpen && (_jsx(Typography, { marginBottom: 0.5, variant: "caption", children: JSON.stringify(fields, null, 2) })), events[index + 1] && _jsx(Divider, {})] }));
31
- };
32
- //# sourceMappingURL=PixelDebugger.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PixelDebugger.js","sourceRoot":"","sources":["../../../src/components/PixelDebugger.tsx"],"names":[],"mappings":"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"}
@@ -1,8 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { DebugUserEventsContext } from '@xylabs/react-pixel';
3
- import { useLocalStorage } from '@xylabs/react-shared';
4
- export const PixelDebuggerProvider = ({ children }) => {
5
- const [isDebugging, setIsDebugging] = useLocalStorage('isDebuggingPixel', false);
6
- return _jsx(DebugUserEventsContext.Provider, { value: { isDebugging, setIsDebugging }, children: children });
7
- };
8
- //# sourceMappingURL=PixelDebuggerProvider.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PixelDebuggerProvider.js","sourceRoot":"","sources":["../../../src/components/PixelDebuggerProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAC5D,OAAO,EAAE,eAAe,EAAgB,MAAM,sBAAsB,CAAA;AAEpE,MAAM,CAAC,MAAM,qBAAqB,GAA2B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC5E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,eAAe,CAAU,kBAAkB,EAAE,KAAK,CAAC,CAAA;IACzF,OAAO,KAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE,YAAG,QAAQ,GAAmC,CAAA;AAC9H,CAAC,CAAA"}
@@ -1,10 +0,0 @@
1
- import { jsx as _jsx, jsxs as _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
- export const PixelDebuggerToggle = ({ ...props }) => {
7
- const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext);
8
- return (_jsx(FlexRow, { ...props, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: "Enable Debugger" }), _jsx(Switch, { checked: isDebugging, onClick: () => setIsDebugging(!isDebugging) })] }) }));
9
- };
10
- //# sourceMappingURL=PixelDebuggerToggle.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PixelDebuggerToggle.js","sourceRoot":"","sources":["../../../src/components/PixelDebuggerToggle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC9D,OAAO,EAAgB,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElC,MAAM,CAAC,MAAM,mBAAmB,GAA2B,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC1E,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAA;IAE1E,OAAO,CACL,KAAC,OAAO,OAAK,KAAK,YAChB,MAAC,WAAW,eACV,KAAC,SAAS,kCAA4B,EACtC,KAAC,MAAM,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,CAAC,WAAW,CAAC,GAAI,IACjE,GACN,CACX,CAAA;AACH,CAAC,CAAA"}
@@ -1,4 +0,0 @@
1
- export * from './PixelDebugger';
2
- export * from './PixelDebuggerProvider';
3
- export * from './PixelDebuggerToggle';
4
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA"}
@@ -1,2 +0,0 @@
1
- export * from './usePixelAltSendHandler';
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAA"}
@@ -1,24 +0,0 @@
1
- import { XyPixel } from '@xylabs/pixel';
2
- import { useEffect, useState } from 'react';
3
- export 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
- }
10
- else {
11
- XyPixel.instance.send = async (event, fields, eventId) => {
12
- altHandler(event, fields);
13
- return await pixelSend?.(event, fields, eventId);
14
- };
15
- }
16
- return () => {
17
- //restore send on unmount
18
- if (pixelSend) {
19
- XyPixel.instance.send = pixelSend;
20
- }
21
- };
22
- }, [pixelSend, altHandler]);
23
- };
24
- //# sourceMappingURL=usePixelAltSendHandler.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"usePixelAltSendHandler.js","sourceRoot":"","sources":["../../../src/hooks/usePixelAltSendHandler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,UAAqE,EAAE,EAAE;IAC9G,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAgC,CAAA;IAC1E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;YACvC,MAAM,UAAU,GAAG,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;YAC/D,YAAY,CAAC,UAAU,CAAC,CAAA;SACzB;aAAM;YACL,OAAO,CAAC,QAAQ,CAAC,IAAI,GAAG,KAAK,EAAE,KAAa,EAAE,MAAgC,EAAE,OAAgB,EAAE,EAAE;gBAClG,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;gBACzB,OAAO,MAAM,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,CAAA;YAClD,CAAC,CAAA;SACF;QACD,OAAO,GAAG,EAAE;YACV,yBAAyB;YACzB,IAAI,SAAS,EAAE;gBACb,OAAO,CAAC,QAAQ,CAAC,IAAI,GAAG,SAAS,CAAA;aAClC;QACH,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAA;AAC7B,CAAC,CAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA"}
@@ -1 +0,0 @@
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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"PixelDebugger.d.ts","sourceRoot":"","sources":["../../../src/components/PixelDebugger.tsx"],"names":[],"mappings":";AAUA,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAsDjC,CAAA"}
@@ -1 +0,0 @@
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"}
@@ -1 +0,0 @@
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"}
@@ -1 +0,0 @@
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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAA"}
@@ -1 +0,0 @@
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"}
@@ -1 +0,0 @@
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"}
File without changes
File without changes