38 lines
1.0 KiB
JavaScript
38 lines
1.0 KiB
JavaScript
import {useEffect} from 'react';
|
|
import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
|
|
import 'react-tabs/style/react-tabs.css';
|
|
|
|
import styles from './devtools.module.css';
|
|
|
|
import TabComponents from './devtools/components.js';
|
|
|
|
export default function Devtools({
|
|
eventsChannel,
|
|
}) {
|
|
useEffect(() => {
|
|
if (import.meta.hot) {
|
|
const updating = new Set(TabComponents.map(([path]) => path));
|
|
import.meta.hot.on('vite:afterUpdate', ({updates}) => {
|
|
if (updates.some(({path}) => updating.has(path))) {
|
|
import.meta.hot.invalidate();
|
|
}
|
|
});
|
|
}
|
|
}, []);
|
|
return (
|
|
<div className={styles.devtools}>
|
|
<Tabs>
|
|
<TabList>
|
|
{TabComponents.map(([path, {displayName}]) => <Tab key={path}>{displayName}</Tab>)}
|
|
</TabList>
|
|
{TabComponents.map(([path, TabComponent]) => (
|
|
<TabPanel key={path}>
|
|
<TabComponent
|
|
eventsChannel={eventsChannel}
|
|
/>
|
|
</TabPanel>
|
|
))}
|
|
</Tabs>
|
|
</div>
|
|
);
|
|
} |