From 98205779cd3cda1b8c1d7119b5751e05eb74dda8 Mon Sep 17 00:00:00 2001 From: Dmitrii Derepko Date: Sat, 3 Jun 2023 00:29:07 +0300 Subject: [PATCH 01/18] Support calling api with method --- .../yii-dev-panel/src/Module/Inspector/API/Inspector.ts | 4 ++-- .../src/Module/Inspector/Pages/FileExplorerPage.tsx | 9 ++++++++- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/yii-dev-panel/src/Module/Inspector/API/Inspector.ts b/packages/yii-dev-panel/src/Module/Inspector/API/Inspector.ts index 49af0b8c..bad9afa1 100644 --- a/packages/yii-dev-panel/src/Module/Inspector/API/Inspector.ts +++ b/packages/yii-dev-panel/src/Module/Inspector/API/Inspector.ts @@ -100,8 +100,8 @@ export const inspectorApi = createApi({ query: (command) => `files?path=${command}`, transformResponse: (result: Response) => result.data || [], }), - getClass: builder.query({ - query: (command) => `files?class=${command}`, + getClass: builder.query({ + query: ({className, methodName = ''}) => `files?class=${className}&method=${methodName}`, transformResponse: (result: Response) => result.data || [], }), getTranslations: builder.query({ diff --git a/packages/yii-dev-panel/src/Module/Inspector/Pages/FileExplorerPage.tsx b/packages/yii-dev-panel/src/Module/Inspector/Pages/FileExplorerPage.tsx index 776099b9..45fec286 100644 --- a/packages/yii-dev-panel/src/Module/Inspector/Pages/FileExplorerPage.tsx +++ b/packages/yii-dev-panel/src/Module/Inspector/Pages/FileExplorerPage.tsx @@ -83,6 +83,7 @@ export const FileExplorerPage = () => { const [searchParams, setSearchParams] = useSearchParams(); const path = searchParams.get('path') || '/'; const className = searchParams.get('class') || ''; + const methodName = searchParams.get('method') || ''; const [lazyGetFilesQuery, getFilesQueryInfo] = useLazyGetFilesQuery(); const [lazyGetClassQuery, getClassQueryInfo] = useLazyGetClassQuery(); @@ -92,7 +93,9 @@ export const FileExplorerPage = () => { useEffect(() => { (async () => { const response = - className !== '' ? await lazyGetClassQuery(className) : await lazyGetFilesQuery(parseFilePath(path)); + className !== '' + ? await lazyGetClassQuery({className, methodName}) + : await lazyGetFilesQuery(parseFilePath(path)); if (Array.isArray(response.data)) { const rows = sortTree(response.data); @@ -105,6 +108,10 @@ export const FileExplorerPage = () => { useLayoutEffect(() => { if (file) { + if (file.startLine) { + scrollToAnchor(25, `L${file.startLine}`); + return; + } const lines = parsePathLineAnchor(window.location.hash); scrollToAnchor(25, lines && `L${lines[0]}`); } From 88c1e118cab883d69e6c4c9c544f7055e6d8c1c7 Mon Sep 17 00:00:00 2001 From: Dmitrii Derepko Date: Sat, 3 Jun 2023 00:29:25 +0300 Subject: [PATCH 02/18] Add new page for event listeners --- .../yii-dev-panel-sdk/src/Pages/Layout.tsx | 1 + .../src/Module/Inspector/API/Inspector.ts | 16 ++- .../src/Module/Inspector/Pages/EventsPage.tsx | 97 +++++++++++++++++++ .../src/Module/Inspector/Pages/index.ts | 1 + .../src/Module/Inspector/router.tsx | 4 + 5 files changed, 118 insertions(+), 1 deletion(-) create mode 100644 packages/yii-dev-panel/src/Module/Inspector/Pages/EventsPage.tsx diff --git a/packages/yii-dev-panel-sdk/src/Pages/Layout.tsx b/packages/yii-dev-panel-sdk/src/Pages/Layout.tsx index b3cd6545..e9427855 100644 --- a/packages/yii-dev-panel-sdk/src/Pages/Layout.tsx +++ b/packages/yii-dev-panel-sdk/src/Pages/Layout.tsx @@ -34,6 +34,7 @@ const pages = [ link: '#', items: [ {name: 'Routes', link: '/inspector/routes'}, + {name: 'Events', link: '/inspector/events'}, {name: 'Parameters', link: '/inspector/parameters'}, {name: 'Configuration', link: '/inspector/configuration'}, {name: 'Container', link: '/inspector/container'}, diff --git a/packages/yii-dev-panel/src/Module/Inspector/API/Inspector.ts b/packages/yii-dev-panel/src/Module/Inspector/API/Inspector.ts index bad9afa1..c289073f 100644 --- a/packages/yii-dev-panel/src/Module/Inspector/API/Inspector.ts +++ b/packages/yii-dev-panel/src/Module/Inspector/API/Inspector.ts @@ -18,6 +18,8 @@ export type InspectorFile = { export type InspectorFileContent = { directory: string; content: string; + startLine?: number; + endLine?: number; } & InspectorFile; export type ConfigurationType = Record; @@ -49,7 +51,6 @@ type ComposerResponse = { }; }; - type CurlBuilderResponse = { command: string; }; @@ -59,6 +60,14 @@ type CheckRouteResponse = { action: string[]; }; +export type ListenerType = { + event: [string, string] | string; +}; +type EventsResponse = { + console: ListenerType[]; + web: ListenerType[]; +}; + type Response = { data: T; }; @@ -142,6 +151,10 @@ export const inspectorApi = createApi({ query: (route) => `route/check?route=${route}`, transformResponse: (result: Response) => result.data, }), + getEvents: builder.query({ + query: () => `events`, + transformResponse: (result: Response) => result.data, + }), getPhpInfo: builder.query({ query: () => `phpinfo`, transformResponse: (result: Response) => result.data || [], @@ -220,4 +233,5 @@ export const { useGetComposerInspectQuery, usePostComposerRequirePackageMutation, usePostCurlBuildMutation, + useGetEventsQuery, } = inspectorApi; diff --git a/packages/yii-dev-panel/src/Module/Inspector/Pages/EventsPage.tsx b/packages/yii-dev-panel/src/Module/Inspector/Pages/EventsPage.tsx new file mode 100644 index 00000000..d29efd8e --- /dev/null +++ b/packages/yii-dev-panel/src/Module/Inspector/Pages/EventsPage.tsx @@ -0,0 +1,97 @@ +import {OpenInNew} from '@mui/icons-material'; +import {Button, List, ListItem, Tooltip} from '@mui/material'; +import {CodeHighlight} from '@yiisoft/yii-dev-panel-sdk/Component/CodeHighlight'; +import {FullScreenCircularProgress} from '@yiisoft/yii-dev-panel-sdk/Component/FullScreenCircularProgress'; +import {serializeCallable} from '@yiisoft/yii-dev-panel-sdk/Helper/callableSerializer'; +import {ListenerType, useGetEventsQuery} from '@yiisoft/yii-dev-panel/Module/Inspector/API/Inspector'; +import {useEffect, useState} from 'react'; + +export const EventsPage = () => { + const {data, isLoading, isSuccess} = useGetEventsQuery(); + const [events, setEvents] = useState([]); + const [url, setUrl] = useState(''); + + useEffect(() => { + if (!isSuccess) { + return; + } + // const events = collectGroupsAndRoutes(data); + console.log(data?.web); + + // @ts-ignore + setEvents(Object.entries(data.web)); + }, [isSuccess, data]); + + // const onSubmitHandler = async (event: {preventDefault: () => void}) => { + // event.preventDefault(); + // console.log('route', url); + // + // // const result = await checkRouteQuery(url); + // // console.log(result.data); + // }; + + if (isLoading) { + return ; + } + + return ( + <> + {/*

{'Check route'}

*/} + {/**/} + {/* setUrl(event.target.value)}*/} + {/* />*/} + {/* */} + {/* */} + {/* */} + {/**/} + {/**/} + {/* Add an HTTP verb in the beginning of the path such as GET, POST, PUT, PATCH and etc. to check different*/} + {/* methods.
*/} + {/* Default method is GET and it can be omitted.*/} + {/**/} + +

{'Event listeners'}

+ + {events.map((event) => ( + <> +

{event[0]}

+ + {event[1].map((item: any) => ( + <> + {/**/} + {Array.isArray(item) && ( + + + + )} + {/**/} + + + + + ))} + + + ))} + + ); +}; diff --git a/packages/yii-dev-panel/src/Module/Inspector/Pages/index.ts b/packages/yii-dev-panel/src/Module/Inspector/Pages/index.ts index 98bc7917..56697476 100644 --- a/packages/yii-dev-panel/src/Module/Inspector/Pages/index.ts +++ b/packages/yii-dev-panel/src/Module/Inspector/Pages/index.ts @@ -6,6 +6,7 @@ export {ConfigurationPage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/C export {ContainerEntryPage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/ContainerEntryPage'; export {ContainerPage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/ContainerPage'; export {DatabasePage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/DatabasePage'; +export {EventsPage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/EventsPage'; export {FileExplorerPage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/FileExplorerPage'; export * as GitPages from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/Git'; export {ParametersPage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/ParametersPage'; diff --git a/packages/yii-dev-panel/src/Module/Inspector/router.tsx b/packages/yii-dev-panel/src/Module/Inspector/router.tsx index f19da62f..448d7185 100644 --- a/packages/yii-dev-panel/src/Module/Inspector/router.tsx +++ b/packages/yii-dev-panel/src/Module/Inspector/router.tsx @@ -32,6 +32,10 @@ export const routes = [ path: 'routes', element: , }, + { + path: 'events', + element: , + }, { path: 'files', element: , From fbe50aa71a8d88efee98be1fb27e607e9387b020 Mon Sep 17 00:00:00 2001 From: Dmitrii Derepko Date: Sat, 3 Jun 2023 01:29:31 +0300 Subject: [PATCH 03/18] Enhance UI --- .../src/Helper/callableSerializer.ts | 2 +- .../src/Module/Inspector/Pages/EventsPage.tsx | 16 +++++++++++----- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/yii-dev-panel-sdk/src/Helper/callableSerializer.ts b/packages/yii-dev-panel-sdk/src/Helper/callableSerializer.ts index 76a458cd..8fb0abbb 100644 --- a/packages/yii-dev-panel-sdk/src/Helper/callableSerializer.ts +++ b/packages/yii-dev-panel-sdk/src/Helper/callableSerializer.ts @@ -1,7 +1,7 @@ export const serializeCallable = (raw: any): string => { switch (true) { case Array.isArray(raw) && raw.length === 2: - return raw.join('::'); + return raw.join('::') + '()'; case typeof raw === 'string': return raw; default: diff --git a/packages/yii-dev-panel/src/Module/Inspector/Pages/EventsPage.tsx b/packages/yii-dev-panel/src/Module/Inspector/Pages/EventsPage.tsx index d29efd8e..6626f885 100644 --- a/packages/yii-dev-panel/src/Module/Inspector/Pages/EventsPage.tsx +++ b/packages/yii-dev-panel/src/Module/Inspector/Pages/EventsPage.tsx @@ -1,5 +1,5 @@ import {OpenInNew} from '@mui/icons-material'; -import {Button, List, ListItem, Tooltip} from '@mui/material'; +import {Button, IconButton, List, ListItem, Tooltip, Typography} from '@mui/material'; import {CodeHighlight} from '@yiisoft/yii-dev-panel-sdk/Component/CodeHighlight'; import {FullScreenCircularProgress} from '@yiisoft/yii-dev-panel-sdk/Component/FullScreenCircularProgress'; import {serializeCallable} from '@yiisoft/yii-dev-panel-sdk/Helper/callableSerializer'; @@ -62,11 +62,18 @@ export const EventsPage = () => { {events.map((event) => ( <> -

{event[0]}

+ + {event[0]} + + + + + + + {event[1].map((item: any) => ( <> - {/**/} {Array.isArray(item) && ( )} - {/**/} Date: Sat, 3 Jun 2023 12:59:52 +0300 Subject: [PATCH 04/18] Enhance UI --- .../src/Module/Inspector/API/Inspector.ts | 12 +- .../src/Module/Inspector/Pages/EventsPage.tsx | 150 +++++++++++------- 2 files changed, 97 insertions(+), 65 deletions(-) diff --git a/packages/yii-dev-panel/src/Module/Inspector/API/Inspector.ts b/packages/yii-dev-panel/src/Module/Inspector/API/Inspector.ts index c289073f..c63c7206 100644 --- a/packages/yii-dev-panel/src/Module/Inspector/API/Inspector.ts +++ b/packages/yii-dev-panel/src/Module/Inspector/API/Inspector.ts @@ -60,12 +60,16 @@ type CheckRouteResponse = { action: string[]; }; -export type ListenerType = { +export type EventListenerType = { event: [string, string] | string; }; -type EventsResponse = { - console: ListenerType[]; - web: ListenerType[]; + +export type EventListenersType = Record; + +export type EventsResponse = { + common: EventListenersType; + console: EventListenersType; + web: EventListenersType; }; type Response = { diff --git a/packages/yii-dev-panel/src/Module/Inspector/Pages/EventsPage.tsx b/packages/yii-dev-panel/src/Module/Inspector/Pages/EventsPage.tsx index 6626f885..8f4f2ff4 100644 --- a/packages/yii-dev-panel/src/Module/Inspector/Pages/EventsPage.tsx +++ b/packages/yii-dev-panel/src/Module/Inspector/Pages/EventsPage.tsx @@ -1,67 +1,27 @@ import {OpenInNew} from '@mui/icons-material'; -import {Button, IconButton, List, ListItem, Tooltip, Typography} from '@mui/material'; +import {TabContext, TabPanel} from '@mui/lab'; +import TabList from '@mui/lab/TabList'; +import {Button, IconButton, List, ListItem, Tab, Tooltip, Typography} from '@mui/material'; +import Box from '@mui/material/Box'; import {CodeHighlight} from '@yiisoft/yii-dev-panel-sdk/Component/CodeHighlight'; import {FullScreenCircularProgress} from '@yiisoft/yii-dev-panel-sdk/Component/FullScreenCircularProgress'; import {serializeCallable} from '@yiisoft/yii-dev-panel-sdk/Helper/callableSerializer'; -import {ListenerType, useGetEventsQuery} from '@yiisoft/yii-dev-panel/Module/Inspector/API/Inspector'; -import {useEffect, useState} from 'react'; - -export const EventsPage = () => { - const {data, isLoading, isSuccess} = useGetEventsQuery(); - const [events, setEvents] = useState([]); - const [url, setUrl] = useState(''); - - useEffect(() => { - if (!isSuccess) { - return; - } - // const events = collectGroupsAndRoutes(data); - console.log(data?.web); - - // @ts-ignore - setEvents(Object.entries(data.web)); - }, [isSuccess, data]); - - // const onSubmitHandler = async (event: {preventDefault: () => void}) => { - // event.preventDefault(); - // console.log('route', url); - // - // // const result = await checkRouteQuery(url); - // // console.log(result.data); - // }; - - if (isLoading) { - return ; - } +import { + EventListenersType, + EventsResponse, + useGetEventsQuery, +} from '@yiisoft/yii-dev-panel/Module/Inspector/API/Inspector'; +import React, {SyntheticEvent, useEffect, useState} from 'react'; +type EventListenersProps = { + eventListeners: EventListenersType; +}; +const EventListeners = React.memo(({eventListeners}: EventListenersProps) => { + const events = Object.entries(eventListeners); return ( <> - {/*

{'Check route'}

*/} - {/**/} - {/* setUrl(event.target.value)}*/} - {/* />*/} - {/* */} - {/* */} - {/* */} - {/**/} - {/**/} - {/* Add an HTTP verb in the beginning of the path such as GET, POST, PUT, PATCH and etc. to check different*/} - {/* methods.
*/} - {/* Default method is GET and it can be omitted.*/} - {/**/} - -

{'Event listeners'}

- - {events.map((event) => ( - <> + {events.map((event, index) => ( + {event[0]} @@ -72,8 +32,8 @@ export const EventsPage = () => { - {event[1].map((item: any) => ( - <> + {event[1].map((item: any, index) => ( + {Array.isArray(item) && ( + + {entries.filter(filterDebugEntry(filters, currentPageRequestIds)).map((entry) => ( + + ))} + + + ); +}; diff --git a/packages/yii-dev-toolbar/src/Module/Toolbar/Component/Toolbar/DebugToolbar.tsx b/packages/yii-dev-toolbar/src/Module/Toolbar/Component/Toolbar/DebugToolbar.tsx index 145df03e..0aac3c49 100644 --- a/packages/yii-dev-toolbar/src/Module/Toolbar/Component/Toolbar/DebugToolbar.tsx +++ b/packages/yii-dev-toolbar/src/Module/Toolbar/Component/Toolbar/DebugToolbar.tsx @@ -1,25 +1,15 @@ -import { - Badge, - ButtonGroup, - IconButton, - ListItemIcon, - ListItemText, - Menu, - MenuItem, - Paper, - Portal, - Tooltip, -} from '@mui/material'; +import ListIcon from '@mui/icons-material/List'; +import {ButtonGroup, Paper, Portal} from '@mui/material'; import Box from '@mui/material/Box'; -import {TooltipProps, tooltipClasses} from '@mui/material/Tooltip'; -import {styled} from '@mui/material/styles'; +import SpeedDial from '@mui/material/SpeedDial'; +import SpeedDialAction from '@mui/material/SpeedDialAction'; import {setToolbarOpen} from '@yiisoft/yii-dev-panel-sdk/API/Application/ApplicationContext'; -import {changeEntryAction, useDebugEntry} from '@yiisoft/yii-dev-panel-sdk/API/Debug/Context'; +import {addCurrentPageRequestId, changeEntryAction, useDebugEntry} from '@yiisoft/yii-dev-panel-sdk/API/Debug/Context'; import {DebugEntry, debugApi, useGetDebugQuery} from '@yiisoft/yii-dev-panel-sdk/API/Debug/Debug'; -import {DebugChip} from '@yiisoft/yii-dev-panel-sdk/Component/DebugChip'; import {YiiIcon} from '@yiisoft/yii-dev-panel-sdk/Component/SvgIcon/YiiIcon'; import {isDebugEntryAboutConsole, isDebugEntryAboutWeb} from '@yiisoft/yii-dev-panel-sdk/Helper/debugEntry'; import * as serviceWorkerRegistration from '@yiisoft/yii-dev-panel-sdk/serviceWorkerRegistration'; +import {DebugEntriesListModal} from '@yiisoft/yii-dev-toolbar/Module/Toolbar/Component/DebugEntriesListModal'; import {CommandItem} from '@yiisoft/yii-dev-toolbar/Module/Toolbar/Component/Toolbar/Console/CommandItem'; import {DateItem} from '@yiisoft/yii-dev-toolbar/Module/Toolbar/Component/Toolbar/DateItem'; import {EventsItem} from '@yiisoft/yii-dev-toolbar/Module/Toolbar/Component/Toolbar/EventsItem'; @@ -33,45 +23,6 @@ import {useSelector} from '@yiisoft/yii-dev-toolbar/store'; import {useCallback, useEffect, useState} from 'react'; import {useDispatch} from 'react-redux'; -const HtmlTooltip = styled(({className, ...props}: TooltipProps) => ( - -))(({theme}) => ({ - [`& .${tooltipClasses.tooltip}`]: { - backgroundColor: '#f5f5f9', - color: 'rgba(0, 0, 0, 0.87)', - maxWidth: '100%', - fontSize: theme.typography.pxToRem(12), - border: '1px solid #dadde9', - }, -})); - -type EntriesListProps = { - entries: DebugEntry[]; - onClick: (entry: DebugEntry) => void; -}; -const EntriesList = ({entries = [], onClick}: EntriesListProps) => { - const currentEntry = useDebugEntry(); - if (entries.length === 0) { - return null; - } - return ( - <> - {entries.map((entry) => ( - onClick(entry)} - selected={currentEntry && entry.id === currentEntry.id} - > - - - - - - ))} - - ); -}; - let serviceWorker = navigator?.serviceWorker; export const DebugToolbar = () => { @@ -82,65 +33,68 @@ export const DebugToolbar = () => { }, onUpdate: (registration) => { console.log('onUpdate', registration); - if (registration && registration.waiting) { - registration.waiting.postMessage({type: 'SKIP_WAITING'}); - } + // if (registration && registration.waiting) { + // registration.waiting.postMessage({type: 'SKIP_WAITING'}); + // } }, }; serviceWorkerRegistration.register(config); - console.log('[START] Listen to message'); + console.debug('[START] Listen to message'); const onMessageHandler = (event) => { - console.log('[EVENT] Listen to message', event.data); - debugApi.util.invalidateTags(['debug/list']); + if (!event.data.payload || !('x-debug-id' in event.data.payload.headers)) { + return; + } + console.debug('[EVENT] Listen to message', event.data); + dispatch(debugApi.util.invalidateTags(['debug/list'])); + dispatch(addCurrentPageRequestId(event.data.payload.headers['x-debug-id'])); }; serviceWorker?.addEventListener('message', onMessageHandler); return () => { - console.log('[STOP] Listen to message'); + console.debug('[STOP] Listen to message'); // serviceWorkerRegistration.unregister(); serviceWorker?.removeEventListener('message', onMessageHandler); }; }, []); - const initialState = useSelector((state) => state.application.toolbarOpen); - const [checked, setChecked] = useState(initialState); + const [isToolbarOpened, setIsToolbarOpened] = useState( + useSelector((state) => state.application.toolbarOpen), + ); const getDebugQuery = useGetDebugQuery(); const debugEntry = useDebugEntry(); const dispatch = useDispatch(); const [selectedEntry, setSelectedEntry] = useState(debugEntry); - const [entries, setEntries] = useState([]); useEffect(() => { if (!getDebugQuery.isFetching && getDebugQuery.data && getDebugQuery.data.length > 0) { - setEntries(getDebugQuery.data.slice(0, 50)); setSelectedEntry(getDebugQuery.data[0]); } }, [getDebugQuery.isFetching]); const onToolbarClickHandler = () => { - setChecked((v) => { + setIsToolbarOpened((v) => { dispatch(setToolbarOpen(!v)); return !v; }); }; - const [anchorEl, setAnchorEl] = useState(null); - - const onMouseEnterHandler = useCallback((event) => { - if (anchorEl !== event.currentTarget) { - setAnchorEl(event.currentTarget); - } + const onChangeHandler = useCallback((entry: DebugEntry) => { + setSelectedEntry(entry); + setIsToolbarOpened(true); + dispatch(setToolbarOpen(true)); + dispatch(changeEntryAction(entry)); }, []); - const onMouseLeaveHandler = useCallback(() => { - setAnchorEl(null); + const [open, setOpen] = useState(false); + + const handleClickOpen = useCallback(() => { + setOpen(true); }, []); - const onChangeHandler = useCallback((entry: DebugEntry) => { - setSelectedEntry(entry); - dispatch(changeEntryAction(entry)); + const handleClose = useCallback(() => { + setOpen(false); }, []); return ( @@ -150,10 +104,10 @@ export const DebugToolbar = () => { component={Box} elevation={10} sx={{ - position: !checked ? 'fixed' : 'sticky', + position: !isToolbarOpened ? 'fixed' : 'sticky', bottom: 0, right: 0, - width: !checked ? 'initial' : '100%', + width: !isToolbarOpened ? 'initial' : '100%', transition: 'width 350ms ease-in-out', py: 1, px: 0.5, @@ -167,7 +121,7 @@ export const DebugToolbar = () => { > @@ -195,37 +149,44 @@ export const DebugToolbar = () => { - - + - - + } + > + } + tooltipTitle="List all debug entries" + /> + )} - - - + ); }; From 394c77baa43ca86f3c465d94fc0b9ff1201f23da Mon Sep 17 00:00:00 2001 From: Dmitrii Derepko Date: Mon, 5 Jun 2023 01:11:36 +0300 Subject: [PATCH 18/18] Remove console logs --- .../Component/DebugEntriesListModal.tsx | 2 -- .../Component/Toolbar/DebugToolbar.tsx | 23 ++++--------------- 2 files changed, 4 insertions(+), 21 deletions(-) diff --git a/packages/yii-dev-toolbar/src/Module/Toolbar/Component/DebugEntriesListModal.tsx b/packages/yii-dev-toolbar/src/Module/Toolbar/Component/DebugEntriesListModal.tsx index 38651eda..eaf7d60c 100644 --- a/packages/yii-dev-toolbar/src/Module/Toolbar/Component/DebugEntriesListModal.tsx +++ b/packages/yii-dev-toolbar/src/Module/Toolbar/Component/DebugEntriesListModal.tsx @@ -71,8 +71,6 @@ export const DebugEntriesListModal = ({onClick, onClose, open}: DebugEntriesList const [filters, setFilters] = useState(() => ['web', 'console', 'current']); const currentPageRequestIds = useCurrentPageRequestIds(); - console.log('currentPageRequestIds', currentPageRequestIds); - const handleFormat = (event: MouseEvent, newFormats: string[]) => { setFilters(newFormats); }; diff --git a/packages/yii-dev-toolbar/src/Module/Toolbar/Component/Toolbar/DebugToolbar.tsx b/packages/yii-dev-toolbar/src/Module/Toolbar/Component/Toolbar/DebugToolbar.tsx index 0aac3c49..be6a6bf9 100644 --- a/packages/yii-dev-toolbar/src/Module/Toolbar/Component/Toolbar/DebugToolbar.tsx +++ b/packages/yii-dev-toolbar/src/Module/Toolbar/Component/Toolbar/DebugToolbar.tsx @@ -8,7 +8,6 @@ import {addCurrentPageRequestId, changeEntryAction, useDebugEntry} from '@yiisof import {DebugEntry, debugApi, useGetDebugQuery} from '@yiisoft/yii-dev-panel-sdk/API/Debug/Debug'; import {YiiIcon} from '@yiisoft/yii-dev-panel-sdk/Component/SvgIcon/YiiIcon'; import {isDebugEntryAboutConsole, isDebugEntryAboutWeb} from '@yiisoft/yii-dev-panel-sdk/Helper/debugEntry'; -import * as serviceWorkerRegistration from '@yiisoft/yii-dev-panel-sdk/serviceWorkerRegistration'; import {DebugEntriesListModal} from '@yiisoft/yii-dev-toolbar/Module/Toolbar/Component/DebugEntriesListModal'; import {CommandItem} from '@yiisoft/yii-dev-toolbar/Module/Toolbar/Component/Toolbar/Console/CommandItem'; import {DateItem} from '@yiisoft/yii-dev-toolbar/Module/Toolbar/Component/Toolbar/DateItem'; @@ -27,33 +26,19 @@ let serviceWorker = navigator?.serviceWorker; export const DebugToolbar = () => { useEffect(() => { - const config = { - onSuccess: (registration: ServiceWorkerRegistration) => { - console.log('onSuccess', registration); - }, - onUpdate: (registration) => { - console.log('onUpdate', registration); - // if (registration && registration.waiting) { - // registration.waiting.postMessage({type: 'SKIP_WAITING'}); - // } - }, - }; - - serviceWorkerRegistration.register(config); - - console.debug('[START] Listen to message'); + // console.debug('[START] Listen to message'); const onMessageHandler = (event) => { if (!event.data.payload || !('x-debug-id' in event.data.payload.headers)) { return; } - console.debug('[EVENT] Listen to message', event.data); + // console.debug('[EVENT] Listen to message', event.data); dispatch(debugApi.util.invalidateTags(['debug/list'])); dispatch(addCurrentPageRequestId(event.data.payload.headers['x-debug-id'])); }; serviceWorker?.addEventListener('message', onMessageHandler); + return () => { - console.debug('[STOP] Listen to message'); - // serviceWorkerRegistration.unregister(); + // console.debug('[STOP] Listen to message'); serviceWorker?.removeEventListener('message', onMessageHandler); }; }, []);