@tanstack/devtools
Advanced tools
| import { createComponent, delegateEvents } from 'solid-js/web'; | ||
| import { createContext, createSignal, createEffect, onCleanup, createMemo, useContext } from 'solid-js'; | ||
| import { createStore } from 'solid-js/store'; | ||
| // src/constants.ts | ||
| var PLUGIN_CONTAINER_ID = "plugin-container"; | ||
| var PLUGIN_TITLE_CONTAINER_ID = "plugin-title-container"; | ||
| // src/utils/storage.ts | ||
| var getStorageItem = (key) => localStorage.getItem(key); | ||
| var setStorageItem = (key, value) => { | ||
| try { | ||
| localStorage.setItem(key, value); | ||
| } catch (_e) { | ||
| return; | ||
| } | ||
| }; | ||
| var TANSTACK_DEVTOOLS = "tanstack_devtools"; | ||
| var TANSTACK_DEVTOOLS_STATE = "tanstack_devtools_state"; | ||
| var TANSTACK_DEVTOOLS_SETTINGS = "tanstack_devtools_settings"; | ||
| var PiPContext = createContext(void 0); | ||
| var PiPProvider = (props) => { | ||
| const [pipWindow, setPipWindow] = createSignal(null); | ||
| const closePipWindow = () => { | ||
| const w = pipWindow(); | ||
| if (w != null) { | ||
| w.close(); | ||
| setPipWindow(null); | ||
| } | ||
| }; | ||
| const requestPipWindow = (settings) => { | ||
| if (pipWindow() != null) { | ||
| return; | ||
| } | ||
| const pip = window.open("", "TSDT-Devtools-Panel", `${settings},popup`); | ||
| if (!pip) { | ||
| throw new Error("Failed to open popup. Please allow popups for this site to view the devtools in picture-in-picture mode."); | ||
| } | ||
| if (import.meta.hot && typeof import.meta.hot.on === "function") { | ||
| import.meta.hot.on("vite:beforeUpdate", () => { | ||
| localStorage.setItem("pip_open", "false"); | ||
| closePipWindow(); | ||
| }); | ||
| } | ||
| window.addEventListener("beforeunload", () => { | ||
| localStorage.setItem("pip_open", "false"); | ||
| closePipWindow(); | ||
| }); | ||
| pip.document.head.innerHTML = ""; | ||
| pip.document.body.innerHTML = ""; | ||
| pip.document.title = "TanStack Devtools"; | ||
| pip.document.body.style.margin = "0"; | ||
| pip.addEventListener("pagehide", () => { | ||
| localStorage.setItem("pip_open", "false"); | ||
| closePipWindow(); | ||
| }); | ||
| [...document.styleSheets].forEach((styleSheet) => { | ||
| try { | ||
| const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join(""); | ||
| const style = document.createElement("style"); | ||
| const style_node = styleSheet.ownerNode; | ||
| let style_id = ""; | ||
| if (style_node && "id" in style_node) { | ||
| style_id = style_node.id; | ||
| } | ||
| if (style_id) { | ||
| style.setAttribute("id", style_id); | ||
| } | ||
| style.textContent = cssRules; | ||
| pip.document.head.appendChild(style); | ||
| } catch (e) { | ||
| const link = document.createElement("link"); | ||
| if (styleSheet.href == null) { | ||
| return; | ||
| } | ||
| link.rel = "stylesheet"; | ||
| link.type = styleSheet.type; | ||
| link.media = styleSheet.media.toString(); | ||
| link.href = styleSheet.href; | ||
| pip.document.head.appendChild(link); | ||
| } | ||
| }); | ||
| delegateEvents(["focusin", "focusout", "pointermove", "keydown", "pointerdown", "pointerup", "click", "mousedown", "input"], pip.document); | ||
| setPipWindow(pip); | ||
| }; | ||
| createEffect(() => { | ||
| const gooberStyles = document.querySelector("#_goober"); | ||
| const w = pipWindow(); | ||
| if (gooberStyles && w) { | ||
| const observer = new MutationObserver(() => { | ||
| const pip_style = w.document.querySelector("#_goober"); | ||
| if (pip_style) { | ||
| pip_style.textContent = gooberStyles.textContent; | ||
| } | ||
| }); | ||
| observer.observe(gooberStyles, { | ||
| childList: true, | ||
| // observe direct children | ||
| subtree: true, | ||
| // and lower descendants too | ||
| characterDataOldValue: true | ||
| // pass old data to callback | ||
| }); | ||
| onCleanup(() => { | ||
| observer.disconnect(); | ||
| }); | ||
| } | ||
| }); | ||
| const value = createMemo(() => ({ | ||
| pipWindow: pipWindow(), | ||
| requestPipWindow, | ||
| closePipWindow, | ||
| disabled: props.disabled ?? false | ||
| })); | ||
| return createComponent(PiPContext.Provider, { | ||
| value, | ||
| get children() { | ||
| return props.children; | ||
| } | ||
| }); | ||
| }; | ||
| var usePiPWindow = () => { | ||
| const context = createMemo(() => { | ||
| const ctx = useContext(PiPContext); | ||
| if (!ctx) { | ||
| throw new Error("usePiPWindow must be used within a PiPProvider"); | ||
| } | ||
| return ctx(); | ||
| }); | ||
| return context; | ||
| }; | ||
| // src/utils/constants.ts | ||
| var MAX_ACTIVE_PLUGINS = 3; | ||
| // src/utils/sanitize.ts | ||
| var tryParseJson = (json) => { | ||
| if (!json) return void 0; | ||
| try { | ||
| return JSON.parse(json); | ||
| } catch (_e) { | ||
| return void 0; | ||
| } | ||
| }; | ||
| var uppercaseFirstLetter = (value) => value.charAt(0).toUpperCase() + value.slice(1); | ||
| var getAllPermutations = (arr) => { | ||
| const res = []; | ||
| function permutate(arr2, start) { | ||
| if (start === arr2.length - 1) { | ||
| res.push([...arr2]); | ||
| return; | ||
| } | ||
| for (let i = start; i < arr2.length; i++) { | ||
| [arr2[start], arr2[i]] = [arr2[i], arr2[start]]; | ||
| permutate(arr2, start + 1); | ||
| [arr2[start], arr2[i]] = [arr2[i], arr2[start]]; | ||
| } | ||
| } | ||
| permutate(arr, 0); | ||
| return res; | ||
| }; | ||
| // src/context/devtools-store.ts | ||
| var keyboardModifiers = [ | ||
| "Alt", | ||
| "Control", | ||
| "Meta", | ||
| "Shift", | ||
| "CtrlOrMeta" | ||
| ]; | ||
| var initialState = { | ||
| settings: { | ||
| defaultOpen: false, | ||
| hideUntilHover: false, | ||
| position: "bottom-right", | ||
| panelLocation: "bottom", | ||
| openHotkey: ["Control", "~"], | ||
| inspectHotkey: ["Shift", "Alt", "CtrlOrMeta"], | ||
| requireUrlFlag: false, | ||
| urlFlag: "tanstack-devtools", | ||
| theme: typeof window !== "undefined" && typeof window.matchMedia !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light", | ||
| triggerHidden: false, | ||
| customTrigger: void 0 | ||
| }, | ||
| state: { | ||
| activeTab: "plugins", | ||
| height: 400, | ||
| activePlugins: [], | ||
| persistOpen: false | ||
| } | ||
| }; | ||
| // src/utils/get-default-active-plugins.ts | ||
| function getDefaultActivePlugins(plugins) { | ||
| if (plugins.length === 0) { | ||
| return []; | ||
| } | ||
| if (plugins.length === 1) { | ||
| return [plugins[0].id]; | ||
| } | ||
| return plugins.filter((plugin) => plugin.defaultOpen === true).slice(0, MAX_ACTIVE_PLUGINS).map((plugin) => plugin.id); | ||
| } | ||
| // src/context/devtools-context.tsx | ||
| var DevtoolsContext = createContext(); | ||
| var getSettings = () => { | ||
| const settingsString = getStorageItem(TANSTACK_DEVTOOLS_SETTINGS); | ||
| const settings = tryParseJson(settingsString); | ||
| return { | ||
| ...settings | ||
| }; | ||
| }; | ||
| var generatePluginId = (plugin, index) => { | ||
| if (plugin.id) { | ||
| return plugin.id; | ||
| } | ||
| if (typeof plugin.name === "string") { | ||
| return `${plugin.name.toLowerCase().replace(" ", "-")}-${index}`; | ||
| } | ||
| return index.toString(); | ||
| }; | ||
| function getStateFromLocalStorage(plugins) { | ||
| const existingStateString = getStorageItem(TANSTACK_DEVTOOLS_STATE); | ||
| const existingState = tryParseJson(existingStateString); | ||
| const pluginIds = plugins?.map((plugin, i) => generatePluginId(plugin, i)) || []; | ||
| if (existingState?.activePlugins) { | ||
| const originalLength = existingState.activePlugins.length; | ||
| existingState.activePlugins = existingState.activePlugins.filter((id) => pluginIds.includes(id)); | ||
| if (existingState.activePlugins.length !== originalLength) { | ||
| setStorageItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(existingState)); | ||
| } | ||
| } | ||
| return existingState; | ||
| } | ||
| var getExistingStateFromStorage = (config, plugins) => { | ||
| const existingState = getStateFromLocalStorage(plugins); | ||
| const settings = getSettings(); | ||
| const pluginsWithIds = plugins?.map((plugin, i) => { | ||
| const id = generatePluginId(plugin, i); | ||
| return { | ||
| ...plugin, | ||
| id | ||
| }; | ||
| }) || []; | ||
| let activePlugins = existingState?.activePlugins || []; | ||
| const shouldFillWithDefaultOpenPlugins = activePlugins.length === 0 && pluginsWithIds.length > 0; | ||
| if (shouldFillWithDefaultOpenPlugins) { | ||
| activePlugins = getDefaultActivePlugins(pluginsWithIds); | ||
| } | ||
| const state = { | ||
| ...initialState, | ||
| plugins: pluginsWithIds, | ||
| state: { | ||
| ...initialState.state, | ||
| ...existingState, | ||
| activePlugins | ||
| }, | ||
| settings: { | ||
| ...initialState.settings, | ||
| ...config, | ||
| ...settings | ||
| } | ||
| }; | ||
| return state; | ||
| }; | ||
| var DevtoolsProvider = (props) => { | ||
| const [store, setStore] = createStore(getExistingStateFromStorage(props.config, props.plugins)); | ||
| const updatePlugins = (newPlugins) => { | ||
| const pluginsWithIds = newPlugins.map((plugin, i) => { | ||
| const id = generatePluginId(plugin, i); | ||
| return { | ||
| ...plugin, | ||
| id | ||
| }; | ||
| }); | ||
| setStore("plugins", pluginsWithIds); | ||
| }; | ||
| createEffect(() => { | ||
| if (props.onSetPlugins) { | ||
| props.onSetPlugins(updatePlugins); | ||
| } | ||
| }); | ||
| const value = { | ||
| store, | ||
| setStore: (updater) => { | ||
| const newState = updater(store); | ||
| const { | ||
| settings, | ||
| state: internalState | ||
| } = newState; | ||
| setStorageItem(TANSTACK_DEVTOOLS_SETTINGS, JSON.stringify(settings)); | ||
| setStorageItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(internalState)); | ||
| setStore((prev) => ({ | ||
| ...prev, | ||
| ...newState | ||
| })); | ||
| } | ||
| }; | ||
| return createComponent(DevtoolsContext.Provider, { | ||
| value, | ||
| get children() { | ||
| return props.children; | ||
| } | ||
| }); | ||
| }; | ||
| export { DevtoolsContext, DevtoolsProvider, MAX_ACTIVE_PLUGINS, PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID, PiPProvider, TANSTACK_DEVTOOLS, getAllPermutations, initialState, keyboardModifiers, uppercaseFirstLetter, usePiPWindow }; |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
+3
-3
@@ -1,3 +0,3 @@ | ||
| import { initialState, DevtoolsProvider, PiPProvider } from './chunk/KKMMZ2TR.js'; | ||
| export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/KKMMZ2TR.js'; | ||
| import { initialState, DevtoolsProvider, PiPProvider } from './chunk/ULTYUGME.js'; | ||
| export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/ULTYUGME.js'; | ||
| import { render, createComponent, Portal } from 'solid-js/web'; | ||
@@ -33,3 +33,3 @@ import { lazy } from 'solid-js'; | ||
| const _self$ = this; | ||
| this.#Component = lazy(() => import('./devtools/MLU6VAGA.js')); | ||
| this.#Component = lazy(() => import('./devtools/BX2FS55Z.js')); | ||
| const Devtools = this.#Component; | ||
@@ -36,0 +36,0 @@ this.#eventBus = new ClientEventBus(this.#eventBusConfig); |
+1
-1
@@ -62,3 +62,3 @@ import { ClientEventBusConfig } from '@tanstack/devtools-event-bus/client'; | ||
| * The hotkey to open the source inspector | ||
| * @default ["Shift", "CtrlOrMeta"] | ||
| * @default ["Shift", "Alt", "CtrlOrMeta"] | ||
| */ | ||
@@ -65,0 +65,0 @@ inspectHotkey: Array<KeyboardKey>; |
+3
-3
@@ -1,3 +0,3 @@ | ||
| import { initialState, DevtoolsProvider, PiPProvider } from './chunk/KKMMZ2TR.js'; | ||
| export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/KKMMZ2TR.js'; | ||
| import { initialState, DevtoolsProvider, PiPProvider } from './chunk/ULTYUGME.js'; | ||
| export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/ULTYUGME.js'; | ||
| import { render, createComponent, Portal } from 'solid-js/web'; | ||
@@ -33,3 +33,3 @@ import { lazy } from 'solid-js'; | ||
| const _self$ = this; | ||
| this.#Component = lazy(() => import('./devtools/MLU6VAGA.js')); | ||
| this.#Component = lazy(() => import('./devtools/BX2FS55Z.js')); | ||
| const Devtools = this.#Component; | ||
@@ -36,0 +36,0 @@ this.#eventBus = new ClientEventBus(this.#eventBusConfig); |
+2
-2
@@ -1,3 +0,3 @@ | ||
| import { initialState } from './chunk/KKMMZ2TR.js'; | ||
| export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/KKMMZ2TR.js'; | ||
| import { initialState } from './chunk/ULTYUGME.js'; | ||
| export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/ULTYUGME.js'; | ||
| import 'solid-js/web'; | ||
@@ -4,0 +4,0 @@ import 'solid-js'; |
+1
-1
| { | ||
| "name": "@tanstack/devtools", | ||
| "version": "0.10.7", | ||
| "version": "0.10.8", | ||
| "description": "TanStack Devtools is a set of tools for building advanced devtools for your application.", | ||
@@ -5,0 +5,0 @@ "author": "Tanner Linsley", |
@@ -57,3 +57,3 @@ import type { TabName } from '../tabs' | ||
| * The hotkey to open the source inspector | ||
| * @default ["Shift", "CtrlOrMeta"] | ||
| * @default ["Shift", "Alt", "CtrlOrMeta"] | ||
| */ | ||
@@ -104,3 +104,3 @@ inspectHotkey: Array<KeyboardKey> | ||
| openHotkey: ['Control', '~'], | ||
| inspectHotkey: ['Shift', 'CtrlOrMeta'], | ||
| inspectHotkey: ['Shift', 'Alt', 'CtrlOrMeta'], | ||
| requireUrlFlag: false, | ||
@@ -107,0 +107,0 @@ urlFlag: 'tanstack-devtools', |
| import { createComponent, delegateEvents } from 'solid-js/web'; | ||
| import { createContext, createSignal, createEffect, onCleanup, createMemo, useContext } from 'solid-js'; | ||
| import { createStore } from 'solid-js/store'; | ||
| // src/constants.ts | ||
| var PLUGIN_CONTAINER_ID = "plugin-container"; | ||
| var PLUGIN_TITLE_CONTAINER_ID = "plugin-title-container"; | ||
| // src/utils/storage.ts | ||
| var getStorageItem = (key) => localStorage.getItem(key); | ||
| var setStorageItem = (key, value) => { | ||
| try { | ||
| localStorage.setItem(key, value); | ||
| } catch (_e) { | ||
| return; | ||
| } | ||
| }; | ||
| var TANSTACK_DEVTOOLS = "tanstack_devtools"; | ||
| var TANSTACK_DEVTOOLS_STATE = "tanstack_devtools_state"; | ||
| var TANSTACK_DEVTOOLS_SETTINGS = "tanstack_devtools_settings"; | ||
| var PiPContext = createContext(void 0); | ||
| var PiPProvider = (props) => { | ||
| const [pipWindow, setPipWindow] = createSignal(null); | ||
| const closePipWindow = () => { | ||
| const w = pipWindow(); | ||
| if (w != null) { | ||
| w.close(); | ||
| setPipWindow(null); | ||
| } | ||
| }; | ||
| const requestPipWindow = (settings) => { | ||
| if (pipWindow() != null) { | ||
| return; | ||
| } | ||
| const pip = window.open("", "TSDT-Devtools-Panel", `${settings},popup`); | ||
| if (!pip) { | ||
| throw new Error("Failed to open popup. Please allow popups for this site to view the devtools in picture-in-picture mode."); | ||
| } | ||
| if (import.meta.hot && typeof import.meta.hot.on === "function") { | ||
| import.meta.hot.on("vite:beforeUpdate", () => { | ||
| localStorage.setItem("pip_open", "false"); | ||
| closePipWindow(); | ||
| }); | ||
| } | ||
| window.addEventListener("beforeunload", () => { | ||
| localStorage.setItem("pip_open", "false"); | ||
| closePipWindow(); | ||
| }); | ||
| pip.document.head.innerHTML = ""; | ||
| pip.document.body.innerHTML = ""; | ||
| pip.document.title = "TanStack Devtools"; | ||
| pip.document.body.style.margin = "0"; | ||
| pip.addEventListener("pagehide", () => { | ||
| localStorage.setItem("pip_open", "false"); | ||
| closePipWindow(); | ||
| }); | ||
| [...document.styleSheets].forEach((styleSheet) => { | ||
| try { | ||
| const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join(""); | ||
| const style = document.createElement("style"); | ||
| const style_node = styleSheet.ownerNode; | ||
| let style_id = ""; | ||
| if (style_node && "id" in style_node) { | ||
| style_id = style_node.id; | ||
| } | ||
| if (style_id) { | ||
| style.setAttribute("id", style_id); | ||
| } | ||
| style.textContent = cssRules; | ||
| pip.document.head.appendChild(style); | ||
| } catch (e) { | ||
| const link = document.createElement("link"); | ||
| if (styleSheet.href == null) { | ||
| return; | ||
| } | ||
| link.rel = "stylesheet"; | ||
| link.type = styleSheet.type; | ||
| link.media = styleSheet.media.toString(); | ||
| link.href = styleSheet.href; | ||
| pip.document.head.appendChild(link); | ||
| } | ||
| }); | ||
| delegateEvents(["focusin", "focusout", "pointermove", "keydown", "pointerdown", "pointerup", "click", "mousedown", "input"], pip.document); | ||
| setPipWindow(pip); | ||
| }; | ||
| createEffect(() => { | ||
| const gooberStyles = document.querySelector("#_goober"); | ||
| const w = pipWindow(); | ||
| if (gooberStyles && w) { | ||
| const observer = new MutationObserver(() => { | ||
| const pip_style = w.document.querySelector("#_goober"); | ||
| if (pip_style) { | ||
| pip_style.textContent = gooberStyles.textContent; | ||
| } | ||
| }); | ||
| observer.observe(gooberStyles, { | ||
| childList: true, | ||
| // observe direct children | ||
| subtree: true, | ||
| // and lower descendants too | ||
| characterDataOldValue: true | ||
| // pass old data to callback | ||
| }); | ||
| onCleanup(() => { | ||
| observer.disconnect(); | ||
| }); | ||
| } | ||
| }); | ||
| const value = createMemo(() => ({ | ||
| pipWindow: pipWindow(), | ||
| requestPipWindow, | ||
| closePipWindow, | ||
| disabled: props.disabled ?? false | ||
| })); | ||
| return createComponent(PiPContext.Provider, { | ||
| value, | ||
| get children() { | ||
| return props.children; | ||
| } | ||
| }); | ||
| }; | ||
| var usePiPWindow = () => { | ||
| const context = createMemo(() => { | ||
| const ctx = useContext(PiPContext); | ||
| if (!ctx) { | ||
| throw new Error("usePiPWindow must be used within a PiPProvider"); | ||
| } | ||
| return ctx(); | ||
| }); | ||
| return context; | ||
| }; | ||
| // src/utils/constants.ts | ||
| var MAX_ACTIVE_PLUGINS = 3; | ||
| // src/utils/sanitize.ts | ||
| var tryParseJson = (json) => { | ||
| if (!json) return void 0; | ||
| try { | ||
| return JSON.parse(json); | ||
| } catch (_e) { | ||
| return void 0; | ||
| } | ||
| }; | ||
| var uppercaseFirstLetter = (value) => value.charAt(0).toUpperCase() + value.slice(1); | ||
| var getAllPermutations = (arr) => { | ||
| const res = []; | ||
| function permutate(arr2, start) { | ||
| if (start === arr2.length - 1) { | ||
| res.push([...arr2]); | ||
| return; | ||
| } | ||
| for (let i = start; i < arr2.length; i++) { | ||
| [arr2[start], arr2[i]] = [arr2[i], arr2[start]]; | ||
| permutate(arr2, start + 1); | ||
| [arr2[start], arr2[i]] = [arr2[i], arr2[start]]; | ||
| } | ||
| } | ||
| permutate(arr, 0); | ||
| return res; | ||
| }; | ||
| // src/context/devtools-store.ts | ||
| var keyboardModifiers = [ | ||
| "Alt", | ||
| "Control", | ||
| "Meta", | ||
| "Shift", | ||
| "CtrlOrMeta" | ||
| ]; | ||
| var initialState = { | ||
| settings: { | ||
| defaultOpen: false, | ||
| hideUntilHover: false, | ||
| position: "bottom-right", | ||
| panelLocation: "bottom", | ||
| openHotkey: ["Control", "~"], | ||
| inspectHotkey: ["Shift", "CtrlOrMeta"], | ||
| requireUrlFlag: false, | ||
| urlFlag: "tanstack-devtools", | ||
| theme: typeof window !== "undefined" && typeof window.matchMedia !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light", | ||
| triggerHidden: false, | ||
| customTrigger: void 0 | ||
| }, | ||
| state: { | ||
| activeTab: "plugins", | ||
| height: 400, | ||
| activePlugins: [], | ||
| persistOpen: false | ||
| } | ||
| }; | ||
| // src/utils/get-default-active-plugins.ts | ||
| function getDefaultActivePlugins(plugins) { | ||
| if (plugins.length === 0) { | ||
| return []; | ||
| } | ||
| if (plugins.length === 1) { | ||
| return [plugins[0].id]; | ||
| } | ||
| return plugins.filter((plugin) => plugin.defaultOpen === true).slice(0, MAX_ACTIVE_PLUGINS).map((plugin) => plugin.id); | ||
| } | ||
| // src/context/devtools-context.tsx | ||
| var DevtoolsContext = createContext(); | ||
| var getSettings = () => { | ||
| const settingsString = getStorageItem(TANSTACK_DEVTOOLS_SETTINGS); | ||
| const settings = tryParseJson(settingsString); | ||
| return { | ||
| ...settings | ||
| }; | ||
| }; | ||
| var generatePluginId = (plugin, index) => { | ||
| if (plugin.id) { | ||
| return plugin.id; | ||
| } | ||
| if (typeof plugin.name === "string") { | ||
| return `${plugin.name.toLowerCase().replace(" ", "-")}-${index}`; | ||
| } | ||
| return index.toString(); | ||
| }; | ||
| function getStateFromLocalStorage(plugins) { | ||
| const existingStateString = getStorageItem(TANSTACK_DEVTOOLS_STATE); | ||
| const existingState = tryParseJson(existingStateString); | ||
| const pluginIds = plugins?.map((plugin, i) => generatePluginId(plugin, i)) || []; | ||
| if (existingState?.activePlugins) { | ||
| const originalLength = existingState.activePlugins.length; | ||
| existingState.activePlugins = existingState.activePlugins.filter((id) => pluginIds.includes(id)); | ||
| if (existingState.activePlugins.length !== originalLength) { | ||
| setStorageItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(existingState)); | ||
| } | ||
| } | ||
| return existingState; | ||
| } | ||
| var getExistingStateFromStorage = (config, plugins) => { | ||
| const existingState = getStateFromLocalStorage(plugins); | ||
| const settings = getSettings(); | ||
| const pluginsWithIds = plugins?.map((plugin, i) => { | ||
| const id = generatePluginId(plugin, i); | ||
| return { | ||
| ...plugin, | ||
| id | ||
| }; | ||
| }) || []; | ||
| let activePlugins = existingState?.activePlugins || []; | ||
| const shouldFillWithDefaultOpenPlugins = activePlugins.length === 0 && pluginsWithIds.length > 0; | ||
| if (shouldFillWithDefaultOpenPlugins) { | ||
| activePlugins = getDefaultActivePlugins(pluginsWithIds); | ||
| } | ||
| const state = { | ||
| ...initialState, | ||
| plugins: pluginsWithIds, | ||
| state: { | ||
| ...initialState.state, | ||
| ...existingState, | ||
| activePlugins | ||
| }, | ||
| settings: { | ||
| ...initialState.settings, | ||
| ...config, | ||
| ...settings | ||
| } | ||
| }; | ||
| return state; | ||
| }; | ||
| var DevtoolsProvider = (props) => { | ||
| const [store, setStore] = createStore(getExistingStateFromStorage(props.config, props.plugins)); | ||
| const updatePlugins = (newPlugins) => { | ||
| const pluginsWithIds = newPlugins.map((plugin, i) => { | ||
| const id = generatePluginId(plugin, i); | ||
| return { | ||
| ...plugin, | ||
| id | ||
| }; | ||
| }); | ||
| setStore("plugins", pluginsWithIds); | ||
| }; | ||
| createEffect(() => { | ||
| if (props.onSetPlugins) { | ||
| props.onSetPlugins(updatePlugins); | ||
| } | ||
| }); | ||
| const value = { | ||
| store, | ||
| setStore: (updater) => { | ||
| const newState = updater(store); | ||
| const { | ||
| settings, | ||
| state: internalState | ||
| } = newState; | ||
| setStorageItem(TANSTACK_DEVTOOLS_SETTINGS, JSON.stringify(settings)); | ||
| setStorageItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(internalState)); | ||
| setStore((prev) => ({ | ||
| ...prev, | ||
| ...newState | ||
| })); | ||
| } | ||
| }; | ||
| return createComponent(DevtoolsContext.Provider, { | ||
| value, | ||
| get children() { | ||
| return props.children; | ||
| } | ||
| }); | ||
| }; | ||
| export { DevtoolsContext, DevtoolsProvider, MAX_ACTIVE_PLUGINS, PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID, PiPProvider, TANSTACK_DEVTOOLS, getAllPermutations, initialState, keyboardModifiers, uppercaseFirstLetter, usePiPWindow }; |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Network access
Supply chain riskThis module accesses the network.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Network access
Supply chain riskThis module accesses the network.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
551977
0.01%