@jjordy/swr-devtools
Version:
Devtools for SWR
74 lines (73 loc) • 3.86 kB
JavaScript
import React, { useState, useEffect, useRef, useMemo } from "react";
import Data from "./Data";
import Keys from "./Keys";
import Panel from "./Panel";
import { usePrevious } from "./hooks";
import { useSWRConfig } from "swr";
import DefaultOpenComponent from "./DefaultOpenComponent";
export function SWRDevtoolsInternal({ debug = false, position = "right", CustomOpenComponent, openBtnPosition = "left", defaultOpen = false, }) {
const [data, setData] = useState({});
const { cache, mutate } = useSWRConfig();
const [show, toggleShow] = useState(false);
//@ts-ignore
const ReactJson = useRef((props) => React.createElement(React.Fragment, null));
const [toolbarPosition, setToolbarPosition] = useState(position);
const prevPosition = usePrevious(toolbarPosition);
const [selectedCacheItemData, setSelectedCacheItemData] = useState(null);
const [selectedCacheKey, setSelectedCacheKey] = useState(null);
const handleToggleShow = () => toggleShow(!show);
const handlePostMessage = (event) => {
if (debug) {
console.log(event);
}
if (event.data) {
const { key, value } = event.data;
setData({ ...data, [key]: value });
}
};
useEffect(() => {
if (debug) {
console.log("Message listenered added for SWR - Devtools");
}
window.addEventListener("message", handlePostMessage);
return () => {
window.removeEventListener("message", handlePostMessage);
};
}, [handlePostMessage]);
useEffect(() => toggleShow(defaultOpen), [defaultOpen]);
const handleSelectedCacheItem = (key) => {
setSelectedCacheKey(key);
setSelectedCacheItemData(cache.get(key));
};
const clearCacheByKey = (key) => {
cache.set(key, null);
};
const revalidate = (_key) => {
mutate(_key).then((d) => setSelectedCacheItemData(d));
};
const keys = useMemo(() => (data ? Object.keys(data) : []), [data]);
return (React.createElement(React.Fragment, null,
!show && (React.createElement("div", { style: {
position: "fixed",
boxSizing: "border-box",
bottom: 0,
left: openBtnPosition === "left" ? 150 : null,
right: openBtnPosition === "right" ? 150 : null,
zIndex: 999999,
} },
React.createElement("button", { title: "Open SWR Devtools", onClick: handleToggleShow, style: {
border: 0,
backgroundColor: "transparent",
boxSizing: "border-box",
} }, CustomOpenComponent || DefaultOpenComponent))),
React.createElement(Panel, { show: show, debug: debug, toolbarPosition: toolbarPosition, previousToolbarPosition: prevPosition || "", setToolbarPosition: setToolbarPosition, toggleShow: handleToggleShow }, ({ theme, width: panelWidth, resizing }) => (React.createElement("div", { style: {
display: "flex",
height: "100%",
backgroundColor: theme === "Dark" ? "#231f20" : "#FFF",
flex: toolbarPosition === "bottom" ? "1 1 auto" : 0,
} },
React.createElement("div", { style: { position: "relative", boxSizing: "border-box" } },
React.createElement(Keys, { theme: theme, keys: keys, panelWidth: panelWidth, selectedKey: selectedCacheKey, onSelect: handleSelectedCacheItem, onClear: clearCacheByKey, onRevalidate: revalidate },
React.createElement(Data, { theme: theme, resizing: resizing, data: selectedCacheItemData, cacheKey: selectedCacheKey, JsonViewer: ReactJson, toolbarPosition: toolbarPosition }))))))));
}
export default SWRDevtoolsInternal;