@xylabs/react-pixel-debugger 5.3.24 → 5.4.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 (8) hide show
  1. package/dist/browser/components/PixelDebugger.d.ts.map +1 -1
  2. package/dist/browser/components/PixelDebuggerToggle.d.ts.map +1 -1
  3. package/dist/browser/index.mjs +5 -5
  4. package/dist/browser/index.mjs.map +1 -1
  5. package/package.json +19 -18
  6. package/src/components/PixelDebugger.tsx +2 -2
  7. package/src/components/PixelDebuggerProvider.tsx +1 -1
  8. package/src/components/PixelDebuggerToggle.tsx +2 -2
package/dist/browser/components/PixelDebugger.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PixelDebugger.d.ts","sourceRoot":"","sources":["../../../src/components/PixelDebugger.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA+B,MAAM,OAAO,CAAA;AAKnD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EA+DjC,CAAA"}
1
+ {"version":3,"file":"PixelDebugger.d.ts","sourceRoot":"","sources":["../../../src/components/PixelDebugger.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAK5C,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EA+DjC,CAAA"}
package/dist/browser/components/PixelDebuggerToggle.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PixelDebuggerToggle.d.ts","sourceRoot":"","sources":["../../../src/components/PixelDebuggerToggle.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAGzD,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAWtD,CAAA"}
1
+ {"version":3,"file":"PixelDebuggerToggle.d.ts","sourceRoot":"","sources":["../../../src/components/PixelDebuggerToggle.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAGzD,OAAO,KAAc,MAAM,OAAO,CAAA;AAElC,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAWtD,CAAA"}
package/dist/browser/index.mjs CHANGED
@@ -7,7 +7,7 @@ import { ButtonEx } from "@xylabs/react-button";
7
7
  import { FlexCol } from "@xylabs/react-flexbox";
8
8
  import { DebugUserEventsContext } from "@xylabs/react-pixel";
9
9
  import { Portal } from "@xylabs/react-portal";
10
- import React, { useContext, useState as useState2 } from "react";
10
+ import React, { use, useState as useState2 } from "react";
11
11
 
12
12
  // src/hooks/usePixelAltSendHandler.ts
13
13
  import { XyPixel } from "@xylabs/pixel";
@@ -37,7 +37,7 @@ var usePixelAltSendHandler = /* @__PURE__ */ __name((altHandler) => {
37
37
 
38
38
  // src/components/PixelDebugger.tsx
39
39
  var PixelDebugger = /* @__PURE__ */ __name(() => {
40
- const { isDebugging } = useContext(DebugUserEventsContext);
40
+ const { isDebugging } = use(DebugUserEventsContext);
41
41
  const theme = useTheme();
42
42
  const [displayEvents, setDisplayEvents] = useState2(false);
43
43
  const [events, setEvents] = useState2([]);
@@ -135,7 +135,7 @@ var PixelDebuggerProvider = /* @__PURE__ */ __name(({ children }) => {
135
135
  isDebugging,
136
136
  setIsDebugging
137
137
  ]);
138
- return /* @__PURE__ */ React2.createElement(DebugUserEventsContext2.Provider, {
138
+ return /* @__PURE__ */ React2.createElement(DebugUserEventsContext2, {
139
139
  value
140
140
  }, children);
141
141
  }, "PixelDebuggerProvider");
@@ -144,9 +144,9 @@ var PixelDebuggerProvider = /* @__PURE__ */ __name(({ children }) => {
144
144
  import { FormControl, FormLabel, Switch } from "@mui/material";
145
145
  import { FlexRow } from "@xylabs/react-flexbox";
146
146
  import { DebugUserEventsContext as DebugUserEventsContext3 } from "@xylabs/react-pixel";
147
- import React3, { useContext as useContext2 } from "react";
147
+ import React3, { use as use2 } from "react";
148
148
  var PixelDebuggerToggle = /* @__PURE__ */ __name(({ ...props }) => {
149
- const { setIsDebugging, isDebugging } = useContext2(DebugUserEventsContext3);
149
+ const { setIsDebugging, isDebugging } = use2(DebugUserEventsContext3);
150
150
  return /* @__PURE__ */ React3.createElement(FlexRow, props, /* @__PURE__ */ React3.createElement(FormControl, null, /* @__PURE__ */ React3.createElement(FormLabel, null, "Enable Debugger"), /* @__PURE__ */ React3.createElement(Switch, {
151
151
  checked: isDebugging,
152
152
  onClick: /* @__PURE__ */ __name(() => setIsDebugging(!isDebugging), "onClick")
package/dist/browser/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/PixelDebugger.tsx","../../src/hooks/usePixelAltSendHandler.ts","../../src/components/PixelDebuggerProvider.tsx","../../src/components/PixelDebuggerToggle.tsx"],"sourcesContent":["import {\n Badge, Card, Divider, Typography, useTheme,\n} 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 React, { useContext, useState } from 'react'\n\nimport { usePixelAltSendHandler } from '../hooks/index.ts'\nimport type { PixelEvent } from '../PixelEvent.ts'\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={{\n bottom: 0, left: 0, position: 'fixed', width: 350,\n }}\n >\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\n alignItems=\"stretch\"\n sx={{ flexFlow: 'column', maxHeight: 400 }}\n >\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 > 0 && (\n <FlexCol\n alignItems=\"stretch\"\n alignContent=\"start\"\n padding={2}\n sx={{\n cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none',\n }}\n >\n {events.map((e, index) => (\n\n <PixelEventDetails key={`${e.event}-${index}`} events={events} index={index} {...e} />\n ))}\n </FlexCol>\n )}\n {displayEvents && events.length === 0 && <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 }> = ({\n event, fields, index, events,\n}) => {\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 type { JsonObject } from '@xylabs/object'\nimport { 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 // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect\n setPixelSend(oldHandler)\n } else {\n XyPixel.instance.send = async (event: string, fields?: JsonObject, 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 type { WithChildren } from '@xylabs/react-shared'\nimport { useLocalStorage } from '@xylabs/react-shared'\nimport React, { useMemo } from 'react'\n\nexport const PixelDebuggerProvider: React.FC<WithChildren> = ({ children }) => {\n const [isDebugging, setIsDebugging] = useLocalStorage<boolean>('isDebuggingPixel', false)\n const value = useMemo(() => ({ isDebugging, setIsDebugging }), [isDebugging, setIsDebugging])\n return <DebugUserEventsContext.Provider value={value}>{children}</DebugUserEventsContext.Provider>\n}\n","import {\n FormControl, FormLabel, Switch,\n} from '@mui/material'\nimport type { BusyBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport React, { 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,SACEA,OAAOC,MAAMC,SAASC,YAAYC,gBAC7B;AACP,SAASC,gBAAgB;AACzB,SAASC,eAAe;AACxB,SAASC,8BAA8B;AACvC,SAASC,cAAc;AACvB,OAAOC,SAASC,YAAYC,YAAAA,iBAAgB;;;ACN5C,SAASC,eAAe;AACxB,SAASC,WAAWC,gBAAgB;AAE7B,IAAMC,yBAAyB,wBAACC,eAAAA;AACrC,QAAM,CAACC,WAAWC,YAAAA,IAAgBC,SAAAA;AAClCC,YAAU,MAAA;AACR,QAAI,CAACH,aAAaI,QAAQC,SAASC,MAAM;AACvC,YAAMC,aAAaH,QAAQC,SAASC,KAAKE,KAAKJ,QAAQC,QAAQ;AAE9DJ,mBAAaM,UAAAA;IACf,OAAO;AACLH,cAAQC,SAASC,OAAO,OAAOG,OAAeC,QAAqBC,YAAAA;AACjEZ,mBAAWU,OAAOC,MAAAA;AAClB,eAAO,MAAMV,YAAYS,OAAOC,QAAQC,OAAAA;MAC1C;IACF;AACA,WAAO,MAAA;AAEL,UAAIX,WAAW;AACbI,gBAAQC,SAASC,OAAON;MAC1B;IACF;EACF,GAAG;IAACA;IAAWD;GAAW;AAC5B,GApBsC;;;ADQ/B,IAAMa,gBAA0B,6BAAA;AACrC,QAAM,EAAEC,YAAW,IAAKC,WAAWC,sBAAAA;AAEnC,QAAMC,QAAQC,SAAAA;AACd,QAAM,CAACC,eAAeC,gBAAAA,IAAoBC,UAAS,KAAA;AACnD,QAAM,CAACC,QAAQC,SAAAA,IAAaF,UAAuB,CAAA,CAAE;AAErDG,yBAAuB,CAACC,OAAeC,WAAAA;AACrCH,cAAUD,CAAAA,YAAU;MAAC;QAAEG;QAAOC;MAAO;SAAMJ;KAAO;EACpD,CAAA;AAEA,MAAI,CAACR,aAAa;AAChB,WAAO;EACT;AAEA,SACE,sBAAA,cAACa,QAAAA,MACC,sBAAA,cAACC,OAAAA;IAAIC,OAAO;MACVC,QAAQ;MAAGC,MAAM;MAAGC,UAAU;MAASC,OAAO;IAChD;KAEE,sBAAA,cAACC,OAAAA;IAAMC,cAAcb,OAAOc;IAAQC,OAAM;IAAUC,IAAI;MAAEL,OAAO;IAAO;KACtE,sBAAA,cAACM,MAAAA;IACCC,SAAQ;IACRF,IAAI;MACFG,gBAAgB;MAChBC,iBAAiB;MACjBC,WAAW;MACXV,OAAO;IACT;IACAI,OAAOpB,MAAM2B,QAAQC,QAAQC;KAE7B,sBAAA,cAACC,SAAAA;IACCC,YAAW;IACXV,IAAI;MAAEW,UAAU;MAAUC,WAAW;IAAI;KAEzC,sBAAA,cAACH,SAAAA;IAAQC,YAAW;IAAUV,IAAI;MAAEa,MAAM;IAAW;KACnD,sBAAA,cAACC,UAAAA;IAASZ,SAAQ;IAAOa,SAAS,6BAAMjC,iBAAiB,CAACD,aAAAA,GAAxB;KAAwC,mBAAA,CAAA,GAI3EA,iBAAiBG,OAAOc,SAAS,KAChC,sBAAA,cAACW,SAAAA;IACCC,YAAW;IACXM,cAAa;IACbC,SAAS;IACTjB,IAAI;MACFkB,QAAQ;MAAWL,MAAM;MAAYR,WAAW;MAAQc,YAAY;IACtE;KAECnC,OAAOoC,IAAI,CAACC,GAAGC,UAEd,sBAAA,cAACC,mBAAAA;IAAkBC,KAAK,GAAGH,EAAElC,KAAK,IAAImC,KAAAA;IAAStC;IAAgBsC;IAAe,GAAGD;QAItFxC,iBAAiBG,OAAOc,WAAW,KAAK,sBAAA,cAAC2B,YAAAA;IAAWvB,SAAQ;KAAY,WAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAOvF,GA/DuC;AAiEvC,IAAMqB,oBAAoF,wBAAC,EACzFpC,OAAOC,QAAQkC,OAAOtC,OAAM,MAC7B;AACC,QAAM,CAAC0C,QAAQC,SAAAA,IAAa5C,UAAS,KAAA;AACrC,SACE,sBAAA,cAAC0B,SAAAA;IAAQC,YAAW;IAAUkB,cAAc;IAAKb,SAAS,6BAAMY,UAAU,CAACD,MAAAA,GAAjB;KACxD,sBAAA,cAACD,YAAAA;IAAWvB,SAAQ;KAAaf,KAAAA,GAChCuC,UACC,sBAAA,cAACD,YAAAA;IAAWG,cAAc;IAAK1B,SAAQ;KACpC2B,KAAKC,UAAU1C,QAAQ,MAAM,CAAA,CAAA,GAGjCJ,OAAOsC,QAAQ,CAAA,KAAM,sBAAA,cAACS,SAAAA,IAAAA,CAAAA;AAG7B,GAf0F;;;AE7E1F,SAASC,0BAAAA,+BAA8B;AAEvC,SAASC,uBAAuB;AAChC,OAAOC,UAASC,eAAe;AAExB,IAAMC,wBAAgD,wBAAC,EAAEC,SAAQ,MAAE;AACxE,QAAM,CAACC,aAAaC,cAAAA,IAAkBC,gBAAyB,oBAAoB,KAAA;AACnF,QAAMC,QAAQC,QAAQ,OAAO;IAAEJ;IAAaC;EAAe,IAAI;IAACD;IAAaC;GAAe;AAC5F,SAAO,gBAAAI,OAAA,cAACC,wBAAuBC,UAAQ;IAACJ;KAAeJ,QAAAA;AACzD,GAJ6D;;;ACL7D,SACES,aAAaC,WAAWC,cACnB;AAEP,SAASC,eAAe;AACxB,SAASC,0BAAAA,+BAA8B;AACvC,OAAOC,UAASC,cAAAA,mBAAkB;AAE3B,IAAMC,sBAA8C,wBAAC,EAAE,GAAGC,MAAAA,MAAO;AACtE,QAAM,EAAEC,gBAAgBC,YAAW,IAAKC,YAAWC,uBAAAA;AAEnD,SACE,gBAAAC,OAAA,cAACC,SAAYN,OACX,gBAAAK,OAAA,cAACE,aAAAA,MACC,gBAAAF,OAAA,cAACG,WAAAA,MAAU,iBAAA,GACX,gBAAAH,OAAA,cAACI,QAAAA;IAAOC,SAASR;IAAaS,SAAS,6BAAMV,eAAe,CAACC,WAAAA,GAAtB;;AAI/C,GAX2D;","names":["Badge","Card","Divider","Typography","useTheme","ButtonEx","FlexCol","DebugUserEventsContext","Portal","React","useContext","useState","XyPixel","useEffect","useState","usePixelAltSendHandler","altHandler","pixelSend","setPixelSend","useState","useEffect","XyPixel","instance","send","oldHandler","bind","event","fields","eventId","PixelDebugger","isDebugging","useContext","DebugUserEventsContext","theme","useTheme","displayEvents","setDisplayEvents","useState","events","setEvents","usePixelAltSendHandler","event","fields","Portal","div","style","bottom","left","position","width","Badge","badgeContent","length","color","sx","Card","variant","backdropFilter","backgroundColor","overflowY","palette","primary","main","FlexCol","alignItems","flexFlow","maxHeight","flex","ButtonEx","onClick","alignContent","padding","cursor","userSelect","map","e","index","PixelEventDetails","key","Typography","isOpen","setIsOpen","marginBottom","JSON","stringify","Divider","DebugUserEventsContext","useLocalStorage","React","useMemo","PixelDebuggerProvider","children","isDebugging","setIsDebugging","useLocalStorage","value","useMemo","React","DebugUserEventsContext","Provider","FormControl","FormLabel","Switch","FlexRow","DebugUserEventsContext","React","useContext","PixelDebuggerToggle","props","setIsDebugging","isDebugging","useContext","DebugUserEventsContext","React","FlexRow","FormControl","FormLabel","Switch","checked","onClick"]}
1
+ {"version":3,"sources":["../../src/components/PixelDebugger.tsx","../../src/hooks/usePixelAltSendHandler.ts","../../src/components/PixelDebuggerProvider.tsx","../../src/components/PixelDebuggerToggle.tsx"],"sourcesContent":["import {\n Badge, Card, Divider, Typography, useTheme,\n} 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 React, { use, useState } from 'react'\n\nimport { usePixelAltSendHandler } from '../hooks/index.ts'\nimport type { PixelEvent } from '../PixelEvent.ts'\n\nexport const PixelDebugger: React.FC = () => {\n const { isDebugging } = use(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={{\n bottom: 0, left: 0, position: 'fixed', width: 350,\n }}\n >\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\n alignItems=\"stretch\"\n sx={{ flexFlow: 'column', maxHeight: 400 }}\n >\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 > 0 && (\n <FlexCol\n alignItems=\"stretch\"\n alignContent=\"start\"\n padding={2}\n sx={{\n cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none',\n }}\n >\n {events.map((e, index) => (\n\n <PixelEventDetails key={`${e.event}-${index}`} events={events} index={index} {...e} />\n ))}\n </FlexCol>\n )}\n {displayEvents && events.length === 0 && <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 }> = ({\n event, fields, index, events,\n}) => {\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 type { JsonObject } from '@xylabs/object'\nimport { 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 // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect\n setPixelSend(oldHandler)\n } else {\n XyPixel.instance.send = async (event: string, fields?: JsonObject, 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 type { WithChildren } from '@xylabs/react-shared'\nimport { useLocalStorage } from '@xylabs/react-shared'\nimport React, { useMemo } from 'react'\n\nexport const PixelDebuggerProvider: React.FC<WithChildren> = ({ children }) => {\n const [isDebugging, setIsDebugging] = useLocalStorage<boolean>('isDebuggingPixel', false)\n const value = useMemo(() => ({ isDebugging, setIsDebugging }), [isDebugging, setIsDebugging])\n return <DebugUserEventsContext value={value}>{children}</DebugUserEventsContext>\n}\n","import {\n FormControl, FormLabel, Switch,\n} from '@mui/material'\nimport type { BusyBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport React, { use } from 'react'\n\nexport const PixelDebuggerToggle: React.FC<BusyBoxProps> = ({ ...props }) => {\n const { setIsDebugging, isDebugging } = use(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":["Badge","Card","Divider","Typography","useTheme","ButtonEx","FlexCol","DebugUserEventsContext","Portal","React","use","useState","XyPixel","useEffect","useState","usePixelAltSendHandler","altHandler","pixelSend","setPixelSend","useState","useEffect","XyPixel","instance","send","oldHandler","bind","event","fields","eventId","PixelDebugger","isDebugging","use","DebugUserEventsContext","theme","useTheme","displayEvents","setDisplayEvents","useState","events","setEvents","usePixelAltSendHandler","event","fields","Portal","div","style","bottom","left","position","width","Badge","badgeContent","length","color","sx","Card","variant","backdropFilter","backgroundColor","overflowY","palette","primary","main","FlexCol","alignItems","flexFlow","maxHeight","flex","ButtonEx","onClick","alignContent","padding","cursor","userSelect","map","e","index","PixelEventDetails","key","Typography","isOpen","setIsOpen","marginBottom","JSON","stringify","Divider","DebugUserEventsContext","useLocalStorage","React","useMemo","PixelDebuggerProvider","children","isDebugging","setIsDebugging","useLocalStorage","value","useMemo","React","DebugUserEventsContext","FormControl","FormLabel","Switch","FlexRow","DebugUserEventsContext","React","use","PixelDebuggerToggle","props","setIsDebugging","isDebugging","use","DebugUserEventsContext","React","FlexRow","FormControl","FormLabel","Switch","checked","onClick"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xylabs/react-pixel-debugger",
3
- "version": "5.3.24",
3
+ "version": "5.4.0-rc.1",
4
4
  "description": "Common React library for all XY Labs projects that use React",
5
5
  "keywords": [
6
6
  "utility",
@@ -37,31 +37,32 @@
37
37
  "packages/*"
38
38
  ],
39
39
  "dependencies": {
40
- "@xylabs/object": "^4.5.1",
40
+ "@xylabs/object": "^4.5.10",
41
41
  "@xylabs/pixel": "^2.0.6",
42
- "@xylabs/react-button": "^5.3.24",
43
- "@xylabs/react-flexbox": "^5.3.24",
44
- "@xylabs/react-pixel": "^5.3.24",
45
- "@xylabs/react-portal": "^5.3.24",
46
- "@xylabs/react-shared": "^5.3.24"
42
+ "@xylabs/react-button": "^5.4.0-rc.1",
43
+ "@xylabs/react-flexbox": "^5.4.0-rc.1",
44
+ "@xylabs/react-pixel": "^5.4.0-rc.1",
45
+ "@xylabs/react-portal": "^5.4.0-rc.1",
46
+ "@xylabs/react-shared": "^5.4.0-rc.1"
47
47
  },
48
48
  "devDependencies": {
49
- "@mui/material": "^6.4.6",
50
- "@storybook/react": "^8.6.2",
51
- "@types/react": "^18.3.18",
52
- "@xylabs/ts-scripts-yarn3": "^5.0.37",
53
- "@xylabs/tsconfig-react": "^5.0.37",
54
- "react": "^18.3.1",
55
- "react-dom": "^18.3.1",
56
- "storybook": "^8.6.2",
49
+ "@mui/material": "^6.4.7",
50
+ "@storybook/react": "^8.6.4",
51
+ "@types/react": "^19.0.10",
52
+ "@xylabs/ts-scripts-yarn3": "^5.1.14",
53
+ "@xylabs/tsconfig-react": "^5.1.14",
54
+ "react": "^19.0.0",
55
+ "react-dom": "^19.0.0",
56
+ "storybook": "^8.6.4",
57
57
  "typescript": "^5.8.2"
58
58
  },
59
59
  "peerDependencies": {
60
60
  "@mui/material": "^6",
61
- "react": "^18",
62
- "react-dom": "^18"
61
+ "react": "^19",
62
+ "react-dom": "^19"
63
63
  },
64
64
  "publishConfig": {
65
65
  "access": "public"
66
- }
66
+ },
67
+ "stableVersion": "5.3.25"
67
68
  }
package/src/components/PixelDebugger.tsx CHANGED
@@ -5,13 +5,13 @@ import { ButtonEx } from '@xylabs/react-button'
5
5
  import { FlexCol } from '@xylabs/react-flexbox'
6
6
  import { DebugUserEventsContext } from '@xylabs/react-pixel'
7
7
  import { Portal } from '@xylabs/react-portal'
8
- import React, { useContext, useState } from 'react'
8
+ import React, { use, useState } from 'react'
9
9
 
10
10
  import { usePixelAltSendHandler } from '../hooks/index.ts'
11
11
  import type { PixelEvent } from '../PixelEvent.ts'
12
12
 
13
13
  export const PixelDebugger: React.FC = () => {
14
- const { isDebugging } = useContext(DebugUserEventsContext)
14
+ const { isDebugging } = use(DebugUserEventsContext)
15
15
  // TODO - when adding in the location hook to detect location change, was dropping the setEvents in usePixelAltSendHand
16
16
  const theme = useTheme()
17
17
  const [displayEvents, setDisplayEvents] = useState(false)
package/src/components/PixelDebuggerProvider.tsx CHANGED
@@ -6,5 +6,5 @@ import React, { useMemo } from 'react'
6
6
  export const PixelDebuggerProvider: React.FC<WithChildren> = ({ children }) => {
7
7
  const [isDebugging, setIsDebugging] = useLocalStorage<boolean>('isDebuggingPixel', false)
8
8
  const value = useMemo(() => ({ isDebugging, setIsDebugging }), [isDebugging, setIsDebugging])
9
- return <DebugUserEventsContext.Provider value={value}>{children}</DebugUserEventsContext.Provider>
9
+ return <DebugUserEventsContext value={value}>{children}</DebugUserEventsContext>
10
10
  }
package/src/components/PixelDebuggerToggle.tsx CHANGED
@@ -4,10 +4,10 @@ import {
4
4
  import type { BusyBoxProps } from '@xylabs/react-flexbox'
5
5
  import { FlexRow } from '@xylabs/react-flexbox'
6
6
  import { DebugUserEventsContext } from '@xylabs/react-pixel'
7
- import React, { useContext } from 'react'
7
+ import React, { use } from 'react'
8
8
 
9
9
  export const PixelDebuggerToggle: React.FC<BusyBoxProps> = ({ ...props }) => {
10
- const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext)
10
+ const { setIsDebugging, isDebugging } = use(DebugUserEventsContext)
11
11
 
12
12
  return (
13
13
  <FlexRow {...props}>