@xylabs/react-pixel-debugger 3.0.3 → 3.0.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.
- package/dist/browser/PixelEvent.cjs +0 -2
- package/dist/browser/PixelEvent.cjs.map +1 -1
- package/dist/browser/components/PixelDebugger.cjs +9 -35
- package/dist/browser/components/PixelDebugger.cjs.map +1 -1
- package/dist/browser/components/PixelDebugger.js +8 -33
- package/dist/browser/components/PixelDebugger.js.map +1 -1
- package/dist/browser/components/PixelDebuggerProvider.cjs +2 -4
- package/dist/browser/components/PixelDebuggerProvider.cjs.map +1 -1
- package/dist/browser/components/PixelDebuggerProvider.js +2 -3
- package/dist/browser/components/PixelDebuggerProvider.js.map +1 -1
- package/dist/browser/components/PixelDebuggerToggle.cjs +2 -4
- package/dist/browser/components/PixelDebuggerToggle.cjs.map +1 -1
- package/dist/browser/components/PixelDebuggerToggle.js +2 -3
- package/dist/browser/components/PixelDebuggerToggle.js.map +1 -1
- package/dist/browser/components/index.cjs +4 -115
- package/dist/browser/components/index.cjs.map +1 -1
- package/dist/browser/components/index.js +3 -108
- package/dist/browser/components/index.js.map +1 -1
- package/dist/browser/hooks/index.cjs +2 -32
- package/dist/browser/hooks/index.cjs.map +1 -1
- package/dist/browser/hooks/index.js +1 -25
- package/dist/browser/hooks/index.js.map +1 -1
- package/dist/browser/hooks/usePixelAltSendHandler.cjs +1 -3
- package/dist/browser/hooks/usePixelAltSendHandler.cjs.map +1 -1
- package/dist/browser/hooks/usePixelAltSendHandler.js +1 -2
- package/dist/browser/hooks/usePixelAltSendHandler.js.map +1 -1
- package/dist/browser/index.cjs +4 -116
- package/dist/browser/index.cjs.map +1 -1
- package/dist/browser/index.js +3 -109
- package/dist/browser/index.js.map +1 -1
- package/dist/node/PixelEvent.js +2 -0
- package/dist/node/PixelEvent.js.map +1 -1
- package/dist/node/components/PixelDebugger.js +35 -9
- package/dist/node/components/PixelDebugger.js.map +1 -1
- package/dist/node/components/PixelDebugger.mjs +33 -8
- package/dist/node/components/PixelDebugger.mjs.map +1 -1
- package/dist/node/components/PixelDebuggerProvider.js +4 -2
- package/dist/node/components/PixelDebuggerProvider.js.map +1 -1
- package/dist/node/components/PixelDebuggerProvider.mjs +3 -2
- package/dist/node/components/PixelDebuggerProvider.mjs.map +1 -1
- package/dist/node/components/PixelDebuggerToggle.js +4 -2
- package/dist/node/components/PixelDebuggerToggle.js.map +1 -1
- package/dist/node/components/PixelDebuggerToggle.mjs +3 -2
- package/dist/node/components/PixelDebuggerToggle.mjs.map +1 -1
- package/dist/node/components/index.js +118 -7
- package/dist/node/components/index.js.map +1 -1
- package/dist/node/components/index.mjs +108 -3
- package/dist/node/components/index.mjs.map +1 -1
- package/dist/node/hooks/index.js +33 -3
- package/dist/node/hooks/index.js.map +1 -1
- package/dist/node/hooks/index.mjs +25 -1
- package/dist/node/hooks/index.mjs.map +1 -1
- package/dist/node/hooks/usePixelAltSendHandler.js +4 -2
- package/dist/node/hooks/usePixelAltSendHandler.js.map +1 -1
- package/dist/node/hooks/usePixelAltSendHandler.mjs +3 -2
- package/dist/node/hooks/usePixelAltSendHandler.mjs.map +1 -1
- package/dist/node/index.js +120 -7
- package/dist/node/index.js.map +1 -1
- package/dist/node/index.mjs +109 -3
- package/dist/node/index.mjs.map +1 -1
- package/package.json +8 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/PixelDebugger.tsx"],"sourcesContent":["import { Badge, Card, Divider, Typography, useTheme } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { Portal } from '@xylabs/react-portal'\nimport { useContext, useState } from 'react'\n\nimport { usePixelAltSendHandler } from '../hooks'\nimport { PixelEvent } from '../PixelEvent'\n\nexport const PixelDebugger: React.FC = () => {\n const { isDebugging } = useContext(DebugUserEventsContext)\n //TODO - when adding in the location hook to detect location change, was dropping the setEvents in usePixelAltSendHand\n const theme = useTheme()\n const [displayEvents, setDisplayEvents] = useState(false)\n const [events, setEvents] = useState<PixelEvent[]>([])\n\n usePixelAltSendHandler((event: string, fields?: Record<string, unknown>) => {\n setEvents((events) => [{ event, fields }, ...events])\n })\n\n if (!isDebugging) {\n return null\n }\n\n return (\n <Portal>\n <div style={{ bottom: 0, left: 0, position: 'fixed', width: 350 }}>\n <Badge badgeContent={events.length} color=\"primary\" sx={{ width: '100%' }}>\n <Card\n variant=\"outlined\"\n sx={{\n backdropFilter: 'blur(16px) saturate(180%)',\n backgroundColor: 'rgba(18, 18, 18, .70)',\n overflowY: 'auto',\n width: '100%',\n }}\n color={theme.palette.primary.main}\n >\n <FlexCol alignItems=\"stretch\" sx={{ flexFlow: 'column', maxHeight: 400 }}>\n <FlexCol alignItems=\"stretch\" sx={{ flex: '0 1 auto' }}>\n <ButtonEx variant=\"text\" onClick={() => setDisplayEvents(!displayEvents)}>\n XY Pixel Debugger\n </ButtonEx>\n </FlexCol>\n {displayEvents && !!events.length && (\n <FlexCol\n alignItems=\"stretch\"\n alignContent=\"start\"\n padding={2}\n sx={{ cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' }}\n >\n {events.map((e, index) => (\n <PixelEventDetails key={`${e.event}-${index}`} events={events} index={index} {...e} />\n ))}\n </FlexCol>\n )}\n {displayEvents && !events.length && <Typography variant=\"subtitle2\">No Events</Typography>}\n </FlexCol>\n </Card>\n </Badge>\n </div>\n </Portal>\n )\n}\n\nconst PixelEventDetails: React.FC<PixelEvent & { events: PixelEvent[]; index: number }> = ({ event, fields, index, events }) => {\n const [isOpen, setIsOpen] = useState(false)\n return (\n <FlexCol alignItems=\"stretch\" marginBottom={0.5} onClick={() => setIsOpen(!isOpen)}>\n <Typography variant=\"subtitle2\">{event}</Typography>\n {isOpen && (\n <Typography marginBottom={0.5} variant=\"caption\">\n {JSON.stringify(fields, null, 2)}\n </Typography>\n )}\n {events[index + 1] && <Divider />}\n </FlexCol>\n )\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/PixelDebugger.tsx","../../../src/hooks/usePixelAltSendHandler.ts"],"sourcesContent":["import { Badge, Card, Divider, Typography, useTheme } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { Portal } from '@xylabs/react-portal'\nimport { useContext, useState } from 'react'\n\nimport { usePixelAltSendHandler } from '../hooks'\nimport { PixelEvent } from '../PixelEvent'\n\nexport const PixelDebugger: React.FC = () => {\n const { isDebugging } = useContext(DebugUserEventsContext)\n //TODO - when adding in the location hook to detect location change, was dropping the setEvents in usePixelAltSendHand\n const theme = useTheme()\n const [displayEvents, setDisplayEvents] = useState(false)\n const [events, setEvents] = useState<PixelEvent[]>([])\n\n usePixelAltSendHandler((event: string, fields?: Record<string, unknown>) => {\n setEvents((events) => [{ event, fields }, ...events])\n })\n\n if (!isDebugging) {\n return null\n }\n\n return (\n <Portal>\n <div style={{ bottom: 0, left: 0, position: 'fixed', width: 350 }}>\n <Badge badgeContent={events.length} color=\"primary\" sx={{ width: '100%' }}>\n <Card\n variant=\"outlined\"\n sx={{\n backdropFilter: 'blur(16px) saturate(180%)',\n backgroundColor: 'rgba(18, 18, 18, .70)',\n overflowY: 'auto',\n width: '100%',\n }}\n color={theme.palette.primary.main}\n >\n <FlexCol alignItems=\"stretch\" sx={{ flexFlow: 'column', maxHeight: 400 }}>\n <FlexCol alignItems=\"stretch\" sx={{ flex: '0 1 auto' }}>\n <ButtonEx variant=\"text\" onClick={() => setDisplayEvents(!displayEvents)}>\n XY Pixel Debugger\n </ButtonEx>\n </FlexCol>\n {displayEvents && !!events.length && (\n <FlexCol\n alignItems=\"stretch\"\n alignContent=\"start\"\n padding={2}\n sx={{ cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' }}\n >\n {events.map((e, index) => (\n <PixelEventDetails key={`${e.event}-${index}`} events={events} index={index} {...e} />\n ))}\n </FlexCol>\n )}\n {displayEvents && !events.length && <Typography variant=\"subtitle2\">No Events</Typography>}\n </FlexCol>\n </Card>\n </Badge>\n </div>\n </Portal>\n )\n}\n\nconst PixelEventDetails: React.FC<PixelEvent & { events: PixelEvent[]; index: number }> = ({ event, fields, index, events }) => {\n const [isOpen, setIsOpen] = useState(false)\n return (\n <FlexCol alignItems=\"stretch\" marginBottom={0.5} onClick={() => setIsOpen(!isOpen)}>\n <Typography variant=\"subtitle2\">{event}</Typography>\n {isOpen && (\n <Typography marginBottom={0.5} variant=\"caption\">\n {JSON.stringify(fields, null, 2)}\n </Typography>\n )}\n {events[index + 1] && <Divider />}\n </FlexCol>\n )\n}\n","import { XyPixel } from '@xylabs/pixel'\nimport { useEffect, useState } from 'react'\n\nexport const usePixelAltSendHandler = (altHandler: (event: string, fields?: Record<string, unknown>) => void) => {\n const [pixelSend, setPixelSend] = useState<typeof XyPixel.instance.send>()\n useEffect(() => {\n if (!pixelSend && XyPixel.instance.send) {\n const oldHandler = XyPixel.instance.send.bind(XyPixel.instance)\n setPixelSend(oldHandler)\n } else {\n XyPixel.instance.send = async (event: string, fields?: Record<string, unknown>, eventId?: string) => {\n altHandler(event, fields)\n return await pixelSend?.(event, fields, eventId)\n }\n }\n return () => {\n //restore send on unmount\n if (pixelSend) {\n XyPixel.instance.send = pixelSend\n }\n }\n }, [pixelSend, altHandler])\n}\n"],"mappings":"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","names":["useState","useState","events"]}
|
|
@@ -16,15 +16,17 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
16
16
|
return to;
|
|
17
17
|
};
|
|
18
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/components/PixelDebuggerProvider.tsx
|
|
19
21
|
var PixelDebuggerProvider_exports = {};
|
|
20
22
|
__export(PixelDebuggerProvider_exports, {
|
|
21
23
|
PixelDebuggerProvider: () => PixelDebuggerProvider
|
|
22
24
|
});
|
|
23
25
|
module.exports = __toCommonJS(PixelDebuggerProvider_exports);
|
|
24
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
25
26
|
var import_react_pixel = require("@xylabs/react-pixel");
|
|
26
27
|
var import_react_shared = require("@xylabs/react-shared");
|
|
27
|
-
|
|
28
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
29
|
+
var PixelDebuggerProvider = ({ children }) => {
|
|
28
30
|
const [isDebugging, setIsDebugging] = (0, import_react_shared.useLocalStorage)("isDebuggingPixel", false);
|
|
29
31
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_pixel.DebugUserEventsContext.Provider, { value: { isDebugging, setIsDebugging }, children });
|
|
30
32
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/PixelDebuggerProvider.tsx"],"sourcesContent":["import { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { useLocalStorage, WithChildren } from '@xylabs/react-shared'\n\nexport const PixelDebuggerProvider: React.FC<WithChildren> = ({ children }) => {\n const [isDebugging, setIsDebugging] = useLocalStorage<boolean>('isDebuggingPixel', false)\n return <DebugUserEventsContext.Provider value={{ isDebugging, setIsDebugging }}>{children}</DebugUserEventsContext.Provider>\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/PixelDebuggerProvider.tsx"],"sourcesContent":["import { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { useLocalStorage, WithChildren } from '@xylabs/react-shared'\n\nexport const PixelDebuggerProvider: React.FC<WithChildren> = ({ children }) => {\n const [isDebugging, setIsDebugging] = useLocalStorage<boolean>('isDebuggingPixel', false)\n return <DebugUserEventsContext.Provider value={{ isDebugging, setIsDebugging }}>{children}</DebugUserEventsContext.Provider>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAAuC;AACvC,0BAA8C;AAIrC;AAFF,IAAM,wBAAgD,CAAC,EAAE,SAAS,MAAM;AAC7E,QAAM,CAAC,aAAa,cAAc,QAAI,qCAAyB,oBAAoB,KAAK;AACxF,SAAO,4CAAC,0CAAuB,UAAvB,EAAgC,OAAO,EAAE,aAAa,eAAe,GAAI,UAAS;AAC5F;","names":[]}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
// src/components/PixelDebuggerProvider.tsx
|
|
2
2
|
import { DebugUserEventsContext } from "@xylabs/react-pixel";
|
|
3
3
|
import { useLocalStorage } from "@xylabs/react-shared";
|
|
4
|
-
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
var PixelDebuggerProvider = ({ children }) => {
|
|
5
6
|
const [isDebugging, setIsDebugging] = useLocalStorage("isDebuggingPixel", false);
|
|
6
7
|
return /* @__PURE__ */ jsx(DebugUserEventsContext.Provider, { value: { isDebugging, setIsDebugging }, children });
|
|
7
8
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/PixelDebuggerProvider.tsx"],"sourcesContent":["import { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { useLocalStorage, WithChildren } from '@xylabs/react-shared'\n\nexport const PixelDebuggerProvider: React.FC<WithChildren> = ({ children }) => {\n const [isDebugging, setIsDebugging] = useLocalStorage<boolean>('isDebuggingPixel', false)\n return <DebugUserEventsContext.Provider value={{ isDebugging, setIsDebugging }}>{children}</DebugUserEventsContext.Provider>\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/PixelDebuggerProvider.tsx"],"sourcesContent":["import { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { useLocalStorage, WithChildren } from '@xylabs/react-shared'\n\nexport const PixelDebuggerProvider: React.FC<WithChildren> = ({ children }) => {\n const [isDebugging, setIsDebugging] = useLocalStorage<boolean>('isDebuggingPixel', false)\n return <DebugUserEventsContext.Provider value={{ isDebugging, setIsDebugging }}>{children}</DebugUserEventsContext.Provider>\n}\n"],"mappings":";AAAA,SAAS,8BAA8B;AACvC,SAAS,uBAAqC;AAIrC;AAFF,IAAM,wBAAgD,CAAC,EAAE,SAAS,MAAM;AAC7E,QAAM,CAAC,aAAa,cAAc,IAAI,gBAAyB,oBAAoB,KAAK;AACxF,SAAO,oBAAC,uBAAuB,UAAvB,EAAgC,OAAO,EAAE,aAAa,eAAe,GAAI,UAAS;AAC5F;","names":[]}
|
|
@@ -16,17 +16,19 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
16
16
|
return to;
|
|
17
17
|
};
|
|
18
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/components/PixelDebuggerToggle.tsx
|
|
19
21
|
var PixelDebuggerToggle_exports = {};
|
|
20
22
|
__export(PixelDebuggerToggle_exports, {
|
|
21
23
|
PixelDebuggerToggle: () => PixelDebuggerToggle
|
|
22
24
|
});
|
|
23
25
|
module.exports = __toCommonJS(PixelDebuggerToggle_exports);
|
|
24
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
25
26
|
var import_material = require("@mui/material");
|
|
26
27
|
var import_react_flexbox = require("@xylabs/react-flexbox");
|
|
27
28
|
var import_react_pixel = require("@xylabs/react-pixel");
|
|
28
29
|
var import_react = require("react");
|
|
29
|
-
|
|
30
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
31
|
+
var PixelDebuggerToggle = ({ ...props }) => {
|
|
30
32
|
const { setIsDebugging, isDebugging } = (0, import_react.useContext)(import_react_pixel.DebugUserEventsContext);
|
|
31
33
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexRow, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.FormControl, { children: [
|
|
32
34
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.FormLabel, { children: "Enable Debugger" }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/PixelDebuggerToggle.tsx"],"sourcesContent":["import { FormControl, FormLabel, Switch } from '@mui/material'\nimport { BusyBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { useContext } from 'react'\n\nexport const PixelDebuggerToggle: React.FC<BusyBoxProps> = ({ ...props }) => {\n const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext)\n\n return (\n <FlexRow {...props}>\n <FormControl>\n <FormLabel>Enable Debugger</FormLabel>\n <Switch checked={isDebugging} onClick={() => setIsDebugging(!isDebugging)} />\n </FormControl>\n </FlexRow>\n )\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/PixelDebuggerToggle.tsx"],"sourcesContent":["import { FormControl, FormLabel, Switch } from '@mui/material'\nimport { BusyBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { useContext } from 'react'\n\nexport const PixelDebuggerToggle: React.FC<BusyBoxProps> = ({ ...props }) => {\n const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext)\n\n return (\n <FlexRow {...props}>\n <FormControl>\n <FormLabel>Enable Debugger</FormLabel>\n <Switch checked={isDebugging} onClick={() => setIsDebugging(!isDebugging)} />\n </FormControl>\n </FlexRow>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAA+C;AAC/C,2BAAsC;AACtC,yBAAuC;AACvC,mBAA2B;AAOrB;AALC,IAAM,sBAA8C,CAAC,EAAE,GAAG,MAAM,MAAM;AAC3E,QAAM,EAAE,gBAAgB,YAAY,QAAI,yBAAW,yCAAsB;AAEzE,SACE,4CAAC,gCAAS,GAAG,OACX,uDAAC,+BACC;AAAA,gDAAC,6BAAU,6BAAe;AAAA,IAC1B,4CAAC,0BAAO,SAAS,aAAa,SAAS,MAAM,eAAe,CAAC,WAAW,GAAG;AAAA,KAC7E,GACF;AAEJ;","names":[]}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
// src/components/PixelDebuggerToggle.tsx
|
|
2
2
|
import { FormControl, FormLabel, Switch } from "@mui/material";
|
|
3
3
|
import { FlexRow } from "@xylabs/react-flexbox";
|
|
4
4
|
import { DebugUserEventsContext } from "@xylabs/react-pixel";
|
|
5
5
|
import { useContext } from "react";
|
|
6
|
-
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
var PixelDebuggerToggle = ({ ...props }) => {
|
|
7
8
|
const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext);
|
|
8
9
|
return /* @__PURE__ */ jsx(FlexRow, { ...props, children: /* @__PURE__ */ jsxs(FormControl, { children: [
|
|
9
10
|
/* @__PURE__ */ jsx(FormLabel, { children: "Enable Debugger" }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/PixelDebuggerToggle.tsx"],"sourcesContent":["import { FormControl, FormLabel, Switch } from '@mui/material'\nimport { BusyBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { useContext } from 'react'\n\nexport const PixelDebuggerToggle: React.FC<BusyBoxProps> = ({ ...props }) => {\n const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext)\n\n return (\n <FlexRow {...props}>\n <FormControl>\n <FormLabel>Enable Debugger</FormLabel>\n <Switch checked={isDebugging} onClick={() => setIsDebugging(!isDebugging)} />\n </FormControl>\n </FlexRow>\n )\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/PixelDebuggerToggle.tsx"],"sourcesContent":["import { FormControl, FormLabel, Switch } from '@mui/material'\nimport { BusyBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { useContext } from 'react'\n\nexport const PixelDebuggerToggle: React.FC<BusyBoxProps> = ({ ...props }) => {\n const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext)\n\n return (\n <FlexRow {...props}>\n <FormControl>\n <FormLabel>Enable Debugger</FormLabel>\n <Switch checked={isDebugging} onClick={() => setIsDebugging(!isDebugging)} />\n </FormControl>\n </FlexRow>\n )\n}\n"],"mappings":";AAAA,SAAS,aAAa,WAAW,cAAc;AAC/C,SAAuB,eAAe;AACtC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAOrB,SACE,KADF;AALC,IAAM,sBAA8C,CAAC,EAAE,GAAG,MAAM,MAAM;AAC3E,QAAM,EAAE,gBAAgB,YAAY,IAAI,WAAW,sBAAsB;AAEzE,SACE,oBAAC,WAAS,GAAG,OACX,+BAAC,eACC;AAAA,wBAAC,aAAU,6BAAe;AAAA,IAC1B,oBAAC,UAAO,SAAS,aAAa,SAAS,MAAM,eAAe,CAAC,WAAW,GAAG;AAAA,KAC7E,GACF;AAEJ;","names":[]}
|
|
@@ -3,6 +3,10 @@ var __defProp = Object.defineProperty;
|
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
6
10
|
var __copyProps = (to, from, except, desc) => {
|
|
7
11
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
12
|
for (let key of __getOwnPropNames(from))
|
|
@@ -11,17 +15,124 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
11
15
|
}
|
|
12
16
|
return to;
|
|
13
17
|
};
|
|
14
|
-
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
15
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/components/index.ts
|
|
16
21
|
var components_exports = {};
|
|
22
|
+
__export(components_exports, {
|
|
23
|
+
PixelDebugger: () => PixelDebugger,
|
|
24
|
+
PixelDebuggerProvider: () => PixelDebuggerProvider,
|
|
25
|
+
PixelDebuggerToggle: () => PixelDebuggerToggle
|
|
26
|
+
});
|
|
17
27
|
module.exports = __toCommonJS(components_exports);
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
28
|
+
|
|
29
|
+
// src/components/PixelDebugger.tsx
|
|
30
|
+
var import_material = require("@mui/material");
|
|
31
|
+
var import_react_button = require("@xylabs/react-button");
|
|
32
|
+
var import_react_flexbox = require("@xylabs/react-flexbox");
|
|
33
|
+
var import_react_pixel = require("@xylabs/react-pixel");
|
|
34
|
+
var import_react_portal = require("@xylabs/react-portal");
|
|
35
|
+
var import_react2 = require("react");
|
|
36
|
+
|
|
37
|
+
// src/hooks/usePixelAltSendHandler.ts
|
|
38
|
+
var import_pixel = require("@xylabs/pixel");
|
|
39
|
+
var import_react = require("react");
|
|
40
|
+
var usePixelAltSendHandler = (altHandler) => {
|
|
41
|
+
const [pixelSend, setPixelSend] = (0, import_react.useState)();
|
|
42
|
+
(0, import_react.useEffect)(() => {
|
|
43
|
+
if (!pixelSend && import_pixel.XyPixel.instance.send) {
|
|
44
|
+
const oldHandler = import_pixel.XyPixel.instance.send.bind(import_pixel.XyPixel.instance);
|
|
45
|
+
setPixelSend(oldHandler);
|
|
46
|
+
} else {
|
|
47
|
+
import_pixel.XyPixel.instance.send = async (event, fields, eventId) => {
|
|
48
|
+
altHandler(event, fields);
|
|
49
|
+
return await (pixelSend == null ? void 0 : pixelSend(event, fields, eventId));
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
return () => {
|
|
53
|
+
if (pixelSend) {
|
|
54
|
+
import_pixel.XyPixel.instance.send = pixelSend;
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
}, [pixelSend, altHandler]);
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
// src/components/PixelDebugger.tsx
|
|
61
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
62
|
+
var PixelDebugger = () => {
|
|
63
|
+
const { isDebugging } = (0, import_react2.useContext)(import_react_pixel.DebugUserEventsContext);
|
|
64
|
+
const theme = (0, import_material.useTheme)();
|
|
65
|
+
const [displayEvents, setDisplayEvents] = (0, import_react2.useState)(false);
|
|
66
|
+
const [events, setEvents] = (0, import_react2.useState)([]);
|
|
67
|
+
usePixelAltSendHandler((event, fields) => {
|
|
68
|
+
setEvents((events2) => [{ event, fields }, ...events2]);
|
|
69
|
+
});
|
|
70
|
+
if (!isDebugging) {
|
|
71
|
+
return null;
|
|
72
|
+
}
|
|
73
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_portal.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { bottom: 0, left: 0, position: "fixed", width: 350 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Badge, { badgeContent: events.length, color: "primary", sx: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
74
|
+
import_material.Card,
|
|
75
|
+
{
|
|
76
|
+
variant: "outlined",
|
|
77
|
+
sx: {
|
|
78
|
+
backdropFilter: "blur(16px) saturate(180%)",
|
|
79
|
+
backgroundColor: "rgba(18, 18, 18, .70)",
|
|
80
|
+
overflowY: "auto",
|
|
81
|
+
width: "100%"
|
|
82
|
+
},
|
|
83
|
+
color: theme.palette.primary.main,
|
|
84
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { alignItems: "stretch", sx: { flexFlow: "column", maxHeight: 400 }, children: [
|
|
85
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexCol, { alignItems: "stretch", sx: { flex: "0 1 auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_button.ButtonEx, { variant: "text", onClick: () => setDisplayEvents(!displayEvents), children: "XY Pixel Debugger" }) }),
|
|
86
|
+
displayEvents && !!events.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
87
|
+
import_react_flexbox.FlexCol,
|
|
88
|
+
{
|
|
89
|
+
alignItems: "stretch",
|
|
90
|
+
alignContent: "start",
|
|
91
|
+
padding: 2,
|
|
92
|
+
sx: { cursor: "pointer", flex: "1 1 auto", overflowY: "auto", userSelect: "none" },
|
|
93
|
+
children: events.map((e, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PixelEventDetails, { events, index, ...e }, `${e.event}-${index}`))
|
|
94
|
+
}
|
|
95
|
+
),
|
|
96
|
+
displayEvents && !events.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "subtitle2", children: "No Events" })
|
|
97
|
+
] })
|
|
98
|
+
}
|
|
99
|
+
) }) }) });
|
|
100
|
+
};
|
|
101
|
+
var PixelEventDetails = ({ event, fields, index, events }) => {
|
|
102
|
+
const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
|
|
103
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { alignItems: "stretch", marginBottom: 0.5, onClick: () => setIsOpen(!isOpen), children: [
|
|
104
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "subtitle2", children: event }),
|
|
105
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { marginBottom: 0.5, variant: "caption", children: JSON.stringify(fields, null, 2) }),
|
|
106
|
+
events[index + 1] && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Divider, {})
|
|
107
|
+
] });
|
|
108
|
+
};
|
|
109
|
+
|
|
110
|
+
// src/components/PixelDebuggerProvider.tsx
|
|
111
|
+
var import_react_pixel2 = require("@xylabs/react-pixel");
|
|
112
|
+
var import_react_shared = require("@xylabs/react-shared");
|
|
113
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
114
|
+
var PixelDebuggerProvider = ({ children }) => {
|
|
115
|
+
const [isDebugging, setIsDebugging] = (0, import_react_shared.useLocalStorage)("isDebuggingPixel", false);
|
|
116
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_pixel2.DebugUserEventsContext.Provider, { value: { isDebugging, setIsDebugging }, children });
|
|
117
|
+
};
|
|
118
|
+
|
|
119
|
+
// src/components/PixelDebuggerToggle.tsx
|
|
120
|
+
var import_material2 = require("@mui/material");
|
|
121
|
+
var import_react_flexbox2 = require("@xylabs/react-flexbox");
|
|
122
|
+
var import_react_pixel3 = require("@xylabs/react-pixel");
|
|
123
|
+
var import_react3 = require("react");
|
|
124
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
125
|
+
var PixelDebuggerToggle = ({ ...props }) => {
|
|
126
|
+
const { setIsDebugging, isDebugging } = (0, import_react3.useContext)(import_react_pixel3.DebugUserEventsContext);
|
|
127
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_flexbox2.FlexRow, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_material2.FormControl, { children: [
|
|
128
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.FormLabel, { children: "Enable Debugger" }),
|
|
129
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Switch, { checked: isDebugging, onClick: () => setIsDebugging(!isDebugging) })
|
|
130
|
+
] }) });
|
|
131
|
+
};
|
|
21
132
|
// Annotate the CommonJS export names for ESM import in node:
|
|
22
133
|
0 && (module.exports = {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
134
|
+
PixelDebugger,
|
|
135
|
+
PixelDebuggerProvider,
|
|
136
|
+
PixelDebuggerToggle
|
|
26
137
|
});
|
|
27
138
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from './PixelDebugger'\nexport * from './PixelDebuggerProvider'\nexport * from './PixelDebuggerToggle'\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/index.ts","../../../src/components/PixelDebugger.tsx","../../../src/hooks/usePixelAltSendHandler.ts","../../../src/components/PixelDebuggerProvider.tsx","../../../src/components/PixelDebuggerToggle.tsx"],"sourcesContent":["export * from './PixelDebugger'\nexport * from './PixelDebuggerProvider'\nexport * from './PixelDebuggerToggle'\n","import { Badge, Card, Divider, Typography, useTheme } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { Portal } from '@xylabs/react-portal'\nimport { useContext, useState } from 'react'\n\nimport { usePixelAltSendHandler } from '../hooks'\nimport { PixelEvent } from '../PixelEvent'\n\nexport const PixelDebugger: React.FC = () => {\n const { isDebugging } = useContext(DebugUserEventsContext)\n //TODO - when adding in the location hook to detect location change, was dropping the setEvents in usePixelAltSendHand\n const theme = useTheme()\n const [displayEvents, setDisplayEvents] = useState(false)\n const [events, setEvents] = useState<PixelEvent[]>([])\n\n usePixelAltSendHandler((event: string, fields?: Record<string, unknown>) => {\n setEvents((events) => [{ event, fields }, ...events])\n })\n\n if (!isDebugging) {\n return null\n }\n\n return (\n <Portal>\n <div style={{ bottom: 0, left: 0, position: 'fixed', width: 350 }}>\n <Badge badgeContent={events.length} color=\"primary\" sx={{ width: '100%' }}>\n <Card\n variant=\"outlined\"\n sx={{\n backdropFilter: 'blur(16px) saturate(180%)',\n backgroundColor: 'rgba(18, 18, 18, .70)',\n overflowY: 'auto',\n width: '100%',\n }}\n color={theme.palette.primary.main}\n >\n <FlexCol alignItems=\"stretch\" sx={{ flexFlow: 'column', maxHeight: 400 }}>\n <FlexCol alignItems=\"stretch\" sx={{ flex: '0 1 auto' }}>\n <ButtonEx variant=\"text\" onClick={() => setDisplayEvents(!displayEvents)}>\n XY Pixel Debugger\n </ButtonEx>\n </FlexCol>\n {displayEvents && !!events.length && (\n <FlexCol\n alignItems=\"stretch\"\n alignContent=\"start\"\n padding={2}\n sx={{ cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' }}\n >\n {events.map((e, index) => (\n <PixelEventDetails key={`${e.event}-${index}`} events={events} index={index} {...e} />\n ))}\n </FlexCol>\n )}\n {displayEvents && !events.length && <Typography variant=\"subtitle2\">No Events</Typography>}\n </FlexCol>\n </Card>\n </Badge>\n </div>\n </Portal>\n )\n}\n\nconst PixelEventDetails: React.FC<PixelEvent & { events: PixelEvent[]; index: number }> = ({ event, fields, index, events }) => {\n const [isOpen, setIsOpen] = useState(false)\n return (\n <FlexCol alignItems=\"stretch\" marginBottom={0.5} onClick={() => setIsOpen(!isOpen)}>\n <Typography variant=\"subtitle2\">{event}</Typography>\n {isOpen && (\n <Typography marginBottom={0.5} variant=\"caption\">\n {JSON.stringify(fields, null, 2)}\n </Typography>\n )}\n {events[index + 1] && <Divider />}\n </FlexCol>\n )\n}\n","import { XyPixel } from '@xylabs/pixel'\nimport { useEffect, useState } from 'react'\n\nexport const usePixelAltSendHandler = (altHandler: (event: string, fields?: Record<string, unknown>) => void) => {\n const [pixelSend, setPixelSend] = useState<typeof XyPixel.instance.send>()\n useEffect(() => {\n if (!pixelSend && XyPixel.instance.send) {\n const oldHandler = XyPixel.instance.send.bind(XyPixel.instance)\n setPixelSend(oldHandler)\n } else {\n XyPixel.instance.send = async (event: string, fields?: Record<string, unknown>, eventId?: string) => {\n altHandler(event, fields)\n return await pixelSend?.(event, fields, eventId)\n }\n }\n return () => {\n //restore send on unmount\n if (pixelSend) {\n XyPixel.instance.send = pixelSend\n }\n }\n }, [pixelSend, altHandler])\n}\n","import { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { useLocalStorage, WithChildren } from '@xylabs/react-shared'\n\nexport const PixelDebuggerProvider: React.FC<WithChildren> = ({ children }) => {\n const [isDebugging, setIsDebugging] = useLocalStorage<boolean>('isDebuggingPixel', false)\n return <DebugUserEventsContext.Provider value={{ isDebugging, setIsDebugging }}>{children}</DebugUserEventsContext.Provider>\n}\n","import { FormControl, FormLabel, Switch } from '@mui/material'\nimport { BusyBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { useContext } from 'react'\n\nexport const PixelDebuggerToggle: React.FC<BusyBoxProps> = ({ ...props }) => {\n const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext)\n\n return (\n <FlexRow {...props}>\n <FormControl>\n <FormLabel>Enable Debugger</FormLabel>\n <Switch checked={isDebugging} onClick={() => setIsDebugging(!isDebugging)} />\n </FormControl>\n </FlexRow>\n )\n}\n"],"mappings":"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","names":["import_react","events","import_react_pixel","import_jsx_runtime","import_material","import_react_flexbox","import_react_pixel","import_react","import_jsx_runtime"]}
|
|
@@ -1,4 +1,109 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
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 == null ? void 0 : pixelSend(event, fields, eventId));
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
return () => {
|
|
25
|
+
if (pixelSend) {
|
|
26
|
+
XyPixel.instance.send = pixelSend;
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
}, [pixelSend, altHandler]);
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
// src/components/PixelDebugger.tsx
|
|
33
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
34
|
+
var PixelDebugger = () => {
|
|
35
|
+
const { isDebugging } = useContext(DebugUserEventsContext);
|
|
36
|
+
const theme = useTheme();
|
|
37
|
+
const [displayEvents, setDisplayEvents] = useState2(false);
|
|
38
|
+
const [events, setEvents] = useState2([]);
|
|
39
|
+
usePixelAltSendHandler((event, fields) => {
|
|
40
|
+
setEvents((events2) => [{ event, fields }, ...events2]);
|
|
41
|
+
});
|
|
42
|
+
if (!isDebugging) {
|
|
43
|
+
return null;
|
|
44
|
+
}
|
|
45
|
+
return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx("div", { style: { bottom: 0, left: 0, position: "fixed", width: 350 }, children: /* @__PURE__ */ jsx(Badge, { badgeContent: events.length, color: "primary", sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
|
|
46
|
+
Card,
|
|
47
|
+
{
|
|
48
|
+
variant: "outlined",
|
|
49
|
+
sx: {
|
|
50
|
+
backdropFilter: "blur(16px) saturate(180%)",
|
|
51
|
+
backgroundColor: "rgba(18, 18, 18, .70)",
|
|
52
|
+
overflowY: "auto",
|
|
53
|
+
width: "100%"
|
|
54
|
+
},
|
|
55
|
+
color: theme.palette.primary.main,
|
|
56
|
+
children: /* @__PURE__ */ jsxs(FlexCol, { alignItems: "stretch", sx: { flexFlow: "column", maxHeight: 400 }, children: [
|
|
57
|
+
/* @__PURE__ */ jsx(FlexCol, { alignItems: "stretch", sx: { flex: "0 1 auto" }, children: /* @__PURE__ */ jsx(ButtonEx, { variant: "text", onClick: () => setDisplayEvents(!displayEvents), children: "XY Pixel Debugger" }) }),
|
|
58
|
+
displayEvents && !!events.length && /* @__PURE__ */ jsx(
|
|
59
|
+
FlexCol,
|
|
60
|
+
{
|
|
61
|
+
alignItems: "stretch",
|
|
62
|
+
alignContent: "start",
|
|
63
|
+
padding: 2,
|
|
64
|
+
sx: { cursor: "pointer", flex: "1 1 auto", overflowY: "auto", userSelect: "none" },
|
|
65
|
+
children: events.map((e, index) => /* @__PURE__ */ jsx(PixelEventDetails, { events, index, ...e }, `${e.event}-${index}`))
|
|
66
|
+
}
|
|
67
|
+
),
|
|
68
|
+
displayEvents && !events.length && /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: "No Events" })
|
|
69
|
+
] })
|
|
70
|
+
}
|
|
71
|
+
) }) }) });
|
|
72
|
+
};
|
|
73
|
+
var PixelEventDetails = ({ event, fields, index, events }) => {
|
|
74
|
+
const [isOpen, setIsOpen] = useState2(false);
|
|
75
|
+
return /* @__PURE__ */ jsxs(FlexCol, { alignItems: "stretch", marginBottom: 0.5, onClick: () => setIsOpen(!isOpen), children: [
|
|
76
|
+
/* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: event }),
|
|
77
|
+
isOpen && /* @__PURE__ */ jsx(Typography, { marginBottom: 0.5, variant: "caption", children: JSON.stringify(fields, null, 2) }),
|
|
78
|
+
events[index + 1] && /* @__PURE__ */ jsx(Divider, {})
|
|
79
|
+
] });
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
// src/components/PixelDebuggerProvider.tsx
|
|
83
|
+
import { DebugUserEventsContext as DebugUserEventsContext2 } from "@xylabs/react-pixel";
|
|
84
|
+
import { useLocalStorage } from "@xylabs/react-shared";
|
|
85
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
86
|
+
var PixelDebuggerProvider = ({ children }) => {
|
|
87
|
+
const [isDebugging, setIsDebugging] = useLocalStorage("isDebuggingPixel", false);
|
|
88
|
+
return /* @__PURE__ */ jsx2(DebugUserEventsContext2.Provider, { value: { isDebugging, setIsDebugging }, children });
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
// src/components/PixelDebuggerToggle.tsx
|
|
92
|
+
import { FormControl, FormLabel, Switch } from "@mui/material";
|
|
93
|
+
import { FlexRow } from "@xylabs/react-flexbox";
|
|
94
|
+
import { DebugUserEventsContext as DebugUserEventsContext3 } from "@xylabs/react-pixel";
|
|
95
|
+
import { useContext as useContext2 } from "react";
|
|
96
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
97
|
+
var PixelDebuggerToggle = ({ ...props }) => {
|
|
98
|
+
const { setIsDebugging, isDebugging } = useContext2(DebugUserEventsContext3);
|
|
99
|
+
return /* @__PURE__ */ jsx3(FlexRow, { ...props, children: /* @__PURE__ */ jsxs2(FormControl, { children: [
|
|
100
|
+
/* @__PURE__ */ jsx3(FormLabel, { children: "Enable Debugger" }),
|
|
101
|
+
/* @__PURE__ */ jsx3(Switch, { checked: isDebugging, onClick: () => setIsDebugging(!isDebugging) })
|
|
102
|
+
] }) });
|
|
103
|
+
};
|
|
104
|
+
export {
|
|
105
|
+
PixelDebugger,
|
|
106
|
+
PixelDebuggerProvider,
|
|
107
|
+
PixelDebuggerToggle
|
|
108
|
+
};
|
|
4
109
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/
|
|
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"]}
|
package/dist/node/hooks/index.js
CHANGED
|
@@ -3,6 +3,10 @@ var __defProp = Object.defineProperty;
|
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
6
10
|
var __copyProps = (to, from, except, desc) => {
|
|
7
11
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
12
|
for (let key of __getOwnPropNames(from))
|
|
@@ -11,13 +15,39 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
11
15
|
}
|
|
12
16
|
return to;
|
|
13
17
|
};
|
|
14
|
-
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
15
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/hooks/index.ts
|
|
16
21
|
var hooks_exports = {};
|
|
22
|
+
__export(hooks_exports, {
|
|
23
|
+
usePixelAltSendHandler: () => usePixelAltSendHandler
|
|
24
|
+
});
|
|
17
25
|
module.exports = __toCommonJS(hooks_exports);
|
|
18
|
-
|
|
26
|
+
|
|
27
|
+
// src/hooks/usePixelAltSendHandler.ts
|
|
28
|
+
var import_pixel = require("@xylabs/pixel");
|
|
29
|
+
var import_react = require("react");
|
|
30
|
+
var usePixelAltSendHandler = (altHandler) => {
|
|
31
|
+
const [pixelSend, setPixelSend] = (0, import_react.useState)();
|
|
32
|
+
(0, import_react.useEffect)(() => {
|
|
33
|
+
if (!pixelSend && import_pixel.XyPixel.instance.send) {
|
|
34
|
+
const oldHandler = import_pixel.XyPixel.instance.send.bind(import_pixel.XyPixel.instance);
|
|
35
|
+
setPixelSend(oldHandler);
|
|
36
|
+
} else {
|
|
37
|
+
import_pixel.XyPixel.instance.send = async (event, fields, eventId) => {
|
|
38
|
+
altHandler(event, fields);
|
|
39
|
+
return await (pixelSend == null ? void 0 : pixelSend(event, fields, eventId));
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
return () => {
|
|
43
|
+
if (pixelSend) {
|
|
44
|
+
import_pixel.XyPixel.instance.send = pixelSend;
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
}, [pixelSend, altHandler]);
|
|
48
|
+
};
|
|
19
49
|
// Annotate the CommonJS export names for ESM import in node:
|
|
20
50
|
0 && (module.exports = {
|
|
21
|
-
|
|
51
|
+
usePixelAltSendHandler
|
|
22
52
|
});
|
|
23
53
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/hooks/index.ts"],"sourcesContent":["export * from './usePixelAltSendHandler'\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/hooks/index.ts","../../../src/hooks/usePixelAltSendHandler.ts"],"sourcesContent":["export * from './usePixelAltSendHandler'\n","import { XyPixel } from '@xylabs/pixel'\nimport { useEffect, useState } from 'react'\n\nexport const usePixelAltSendHandler = (altHandler: (event: string, fields?: Record<string, unknown>) => void) => {\n const [pixelSend, setPixelSend] = useState<typeof XyPixel.instance.send>()\n useEffect(() => {\n if (!pixelSend && XyPixel.instance.send) {\n const oldHandler = XyPixel.instance.send.bind(XyPixel.instance)\n setPixelSend(oldHandler)\n } else {\n XyPixel.instance.send = async (event: string, fields?: Record<string, unknown>, eventId?: string) => {\n altHandler(event, fields)\n return await pixelSend?.(event, fields, eventId)\n }\n }\n return () => {\n //restore send on unmount\n if (pixelSend) {\n XyPixel.instance.send = pixelSend\n }\n }\n }, [pixelSend, altHandler])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAwB;AACxB,mBAAoC;AAE7B,IAAM,yBAAyB,CAAC,eAA0E;AAC/G,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAuC;AACzE,8BAAU,MAAM;AACd,QAAI,CAAC,aAAa,qBAAQ,SAAS,MAAM;AACvC,YAAM,aAAa,qBAAQ,SAAS,KAAK,KAAK,qBAAQ,QAAQ;AAC9D,mBAAa,UAAU;AAAA,IACzB,OAAO;AACL,2BAAQ,SAAS,OAAO,OAAO,OAAe,QAAkC,YAAqB;AACnG,mBAAW,OAAO,MAAM;AACxB,eAAO,OAAM,uCAAY,OAAO,QAAQ;AAAA,MAC1C;AAAA,IACF;AACA,WAAO,MAAM;AAEX,UAAI,WAAW;AACb,6BAAQ,SAAS,OAAO;AAAA,MAC1B;AAAA,IACF;AAAA,EACF,GAAG,CAAC,WAAW,UAAU,CAAC;AAC5B;","names":[]}
|
|
@@ -1,2 +1,26 @@
|
|
|
1
|
-
|
|
1
|
+
// src/hooks/usePixelAltSendHandler.ts
|
|
2
|
+
import { XyPixel } from "@xylabs/pixel";
|
|
3
|
+
import { useEffect, useState } from "react";
|
|
4
|
+
var usePixelAltSendHandler = (altHandler) => {
|
|
5
|
+
const [pixelSend, setPixelSend] = useState();
|
|
6
|
+
useEffect(() => {
|
|
7
|
+
if (!pixelSend && XyPixel.instance.send) {
|
|
8
|
+
const oldHandler = XyPixel.instance.send.bind(XyPixel.instance);
|
|
9
|
+
setPixelSend(oldHandler);
|
|
10
|
+
} else {
|
|
11
|
+
XyPixel.instance.send = async (event, fields, eventId) => {
|
|
12
|
+
altHandler(event, fields);
|
|
13
|
+
return await (pixelSend == null ? void 0 : pixelSend(event, fields, eventId));
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
return () => {
|
|
17
|
+
if (pixelSend) {
|
|
18
|
+
XyPixel.instance.send = pixelSend;
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
}, [pixelSend, altHandler]);
|
|
22
|
+
};
|
|
23
|
+
export {
|
|
24
|
+
usePixelAltSendHandler
|
|
25
|
+
};
|
|
2
26
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/hooks/
|
|
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,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,OAAM,uCAAY,OAAO,QAAQ;AAAA,MAC1C;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":[]}
|
|
@@ -16,6 +16,8 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
16
16
|
return to;
|
|
17
17
|
};
|
|
18
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/hooks/usePixelAltSendHandler.ts
|
|
19
21
|
var usePixelAltSendHandler_exports = {};
|
|
20
22
|
__export(usePixelAltSendHandler_exports, {
|
|
21
23
|
usePixelAltSendHandler: () => usePixelAltSendHandler
|
|
@@ -23,7 +25,7 @@ __export(usePixelAltSendHandler_exports, {
|
|
|
23
25
|
module.exports = __toCommonJS(usePixelAltSendHandler_exports);
|
|
24
26
|
var import_pixel = require("@xylabs/pixel");
|
|
25
27
|
var import_react = require("react");
|
|
26
|
-
|
|
28
|
+
var usePixelAltSendHandler = (altHandler) => {
|
|
27
29
|
const [pixelSend, setPixelSend] = (0, import_react.useState)();
|
|
28
30
|
(0, import_react.useEffect)(() => {
|
|
29
31
|
if (!pixelSend && import_pixel.XyPixel.instance.send) {
|
|
@@ -32,7 +34,7 @@ const usePixelAltSendHandler = (altHandler) => {
|
|
|
32
34
|
} else {
|
|
33
35
|
import_pixel.XyPixel.instance.send = async (event, fields, eventId) => {
|
|
34
36
|
altHandler(event, fields);
|
|
35
|
-
return await pixelSend
|
|
37
|
+
return await (pixelSend == null ? void 0 : pixelSend(event, fields, eventId));
|
|
36
38
|
};
|
|
37
39
|
}
|
|
38
40
|
return () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/hooks/usePixelAltSendHandler.ts"],"sourcesContent":["import { XyPixel } from '@xylabs/pixel'\nimport { useEffect, useState } from 'react'\n\nexport const usePixelAltSendHandler = (altHandler: (event: string, fields?: Record<string, unknown>) => void) => {\n const [pixelSend, setPixelSend] = useState<typeof XyPixel.instance.send>()\n useEffect(() => {\n if (!pixelSend && XyPixel.instance.send) {\n const oldHandler = XyPixel.instance.send.bind(XyPixel.instance)\n setPixelSend(oldHandler)\n } else {\n XyPixel.instance.send = async (event: string, fields?: Record<string, unknown>, eventId?: string) => {\n altHandler(event, fields)\n return await pixelSend?.(event, fields, eventId)\n }\n }\n return () => {\n //restore send on unmount\n if (pixelSend) {\n XyPixel.instance.send = pixelSend\n }\n }\n }, [pixelSend, altHandler])\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/hooks/usePixelAltSendHandler.ts"],"sourcesContent":["import { XyPixel } from '@xylabs/pixel'\nimport { useEffect, useState } from 'react'\n\nexport const usePixelAltSendHandler = (altHandler: (event: string, fields?: Record<string, unknown>) => void) => {\n const [pixelSend, setPixelSend] = useState<typeof XyPixel.instance.send>()\n useEffect(() => {\n if (!pixelSend && XyPixel.instance.send) {\n const oldHandler = XyPixel.instance.send.bind(XyPixel.instance)\n setPixelSend(oldHandler)\n } else {\n XyPixel.instance.send = async (event: string, fields?: Record<string, unknown>, eventId?: string) => {\n altHandler(event, fields)\n return await pixelSend?.(event, fields, eventId)\n }\n }\n return () => {\n //restore send on unmount\n if (pixelSend) {\n XyPixel.instance.send = pixelSend\n }\n }\n }, [pixelSend, altHandler])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwB;AACxB,mBAAoC;AAE7B,IAAM,yBAAyB,CAAC,eAA0E;AAC/G,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAuC;AACzE,8BAAU,MAAM;AACd,QAAI,CAAC,aAAa,qBAAQ,SAAS,MAAM;AACvC,YAAM,aAAa,qBAAQ,SAAS,KAAK,KAAK,qBAAQ,QAAQ;AAC9D,mBAAa,UAAU;AAAA,IACzB,OAAO;AACL,2BAAQ,SAAS,OAAO,OAAO,OAAe,QAAkC,YAAqB;AACnG,mBAAW,OAAO,MAAM;AACxB,eAAO,OAAM,uCAAY,OAAO,QAAQ;AAAA,MAC1C;AAAA,IACF;AACA,WAAO,MAAM;AAEX,UAAI,WAAW;AACb,6BAAQ,SAAS,OAAO;AAAA,MAC1B;AAAA,IACF;AAAA,EACF,GAAG,CAAC,WAAW,UAAU,CAAC;AAC5B;","names":[]}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
// src/hooks/usePixelAltSendHandler.ts
|
|
1
2
|
import { XyPixel } from "@xylabs/pixel";
|
|
2
3
|
import { useEffect, useState } from "react";
|
|
3
|
-
|
|
4
|
+
var usePixelAltSendHandler = (altHandler) => {
|
|
4
5
|
const [pixelSend, setPixelSend] = useState();
|
|
5
6
|
useEffect(() => {
|
|
6
7
|
if (!pixelSend && XyPixel.instance.send) {
|
|
@@ -9,7 +10,7 @@ const usePixelAltSendHandler = (altHandler) => {
|
|
|
9
10
|
} else {
|
|
10
11
|
XyPixel.instance.send = async (event, fields, eventId) => {
|
|
11
12
|
altHandler(event, fields);
|
|
12
|
-
return await pixelSend
|
|
13
|
+
return await (pixelSend == null ? void 0 : pixelSend(event, fields, eventId));
|
|
13
14
|
};
|
|
14
15
|
}
|
|
15
16
|
return () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/hooks/usePixelAltSendHandler.ts"],"sourcesContent":["import { XyPixel } from '@xylabs/pixel'\nimport { useEffect, useState } from 'react'\n\nexport const usePixelAltSendHandler = (altHandler: (event: string, fields?: Record<string, unknown>) => void) => {\n const [pixelSend, setPixelSend] = useState<typeof XyPixel.instance.send>()\n useEffect(() => {\n if (!pixelSend && XyPixel.instance.send) {\n const oldHandler = XyPixel.instance.send.bind(XyPixel.instance)\n setPixelSend(oldHandler)\n } else {\n XyPixel.instance.send = async (event: string, fields?: Record<string, unknown>, eventId?: string) => {\n altHandler(event, fields)\n return await pixelSend?.(event, fields, eventId)\n }\n }\n return () => {\n //restore send on unmount\n if (pixelSend) {\n XyPixel.instance.send = pixelSend\n }\n }\n }, [pixelSend, altHandler])\n}\n"],"mappings":"AAAA,SAAS,eAAe;AACxB,SAAS,WAAW,gBAAgB;AAE7B,
|
|
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,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,OAAM,uCAAY,OAAO,QAAQ;AAAA,MAC1C;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":[]}
|