@tanstack/devtools 0.5.0 → 0.5.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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { createComponent,
|
|
1
|
+
import { createComponent, delegateEvents } from "solid-js/web";
|
|
2
2
|
import { createMemo, useContext, createContext, createSignal, createEffect, onCleanup } from "solid-js";
|
|
3
3
|
const PiPContext = createContext(void 0);
|
|
4
4
|
const PiPProvider = (props) => {
|
|
@@ -29,7 +29,6 @@ const PiPProvider = (props) => {
|
|
|
29
29
|
});
|
|
30
30
|
pip.document.head.innerHTML = "";
|
|
31
31
|
pip.document.body.innerHTML = "";
|
|
32
|
-
clearDelegatedEvents(pip.document);
|
|
33
32
|
pip.document.title = "TanStack Devtools";
|
|
34
33
|
pip.document.body.style.margin = "0";
|
|
35
34
|
pip.addEventListener("pagehide", () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pip-context.js","sources":["../../../src/context/pip-context.tsx"],"sourcesContent":["import {\n createContext,\n createEffect,\n createMemo,\n createSignal,\n onCleanup,\n useContext,\n} from 'solid-js'\nimport {
|
|
1
|
+
{"version":3,"file":"pip-context.js","sources":["../../../src/context/pip-context.tsx"],"sourcesContent":["import {\n createContext,\n createEffect,\n createMemo,\n createSignal,\n onCleanup,\n useContext,\n} from 'solid-js'\nimport { delegateEvents } from 'solid-js/web'\nimport type { Accessor, JSX } from 'solid-js'\n\ninterface PiPProviderProps {\n children: JSX.Element\n // localStore: StorageObject<string>\n // setLocalStore: StorageSetter<string, unknown>\n disabled?: boolean\n}\n\ntype PiPContextType = {\n pipWindow: Window | null\n requestPipWindow: (settings: string) => void\n closePipWindow: () => void\n disabled: boolean\n}\n\nconst PiPContext = createContext<Accessor<PiPContextType> | undefined>(\n undefined,\n)\n\nexport const PiPProvider = (props: PiPProviderProps) => {\n // Expose pipWindow that is currently active\n const [pipWindow, setPipWindow] = createSignal<Window | null>(null)\n\n // Close pipWindow programmatically\n const closePipWindow = () => {\n const w = pipWindow()\n if (w != null) {\n w.close()\n setPipWindow(null)\n }\n }\n\n // Open new pipWindow\n const requestPipWindow = (settings: string) => {\n // We don't want to allow multiple requests.\n if (pipWindow() != null) {\n return\n }\n\n const pip = window.open('', 'TSDT-Devtools-Panel', `${settings},popup`)\n\n if (!pip) {\n throw new Error(\n 'Failed to open popup. Please allow popups for this site to view the devtools in picture-in-picture mode.',\n )\n }\n\n const meta = typeof import.meta !== 'undefined' ? import.meta : null\n\n meta?.hot?.on('vite:beforeUpdate', () => {\n localStorage.setItem('pip_open', 'false')\n closePipWindow()\n })\n window.addEventListener('beforeunload', () => {\n localStorage.setItem('pip_open', 'false')\n closePipWindow()\n })\n // Remove existing styles\n pip.document.head.innerHTML = ''\n // Remove existing body\n pip.document.body.innerHTML = ''\n\n pip.document.title = 'TanStack Devtools'\n pip.document.body.style.margin = '0'\n\n // Detect when window is closed by user\n pip.addEventListener('pagehide', () => {\n localStorage.setItem('pip_open', 'false')\n closePipWindow()\n })\n\n // It is important to copy all parent window styles. Otherwise, there would be no CSS available at all\n // https://developer.chrome.com/docs/web-platform/document-picture-in-picture/#copy-style-sheets-to-the-picture-in-picture-window\n ;[...document.styleSheets].forEach((styleSheet) => {\n try {\n const cssRules = [...styleSheet.cssRules]\n .map((rule) => rule.cssText)\n .join('')\n const style = document.createElement('style')\n const style_node = styleSheet.ownerNode\n let style_id = ''\n\n if (style_node && 'id' in style_node) {\n style_id = style_node.id\n }\n\n if (style_id) {\n style.setAttribute('id', style_id)\n }\n style.textContent = cssRules\n pip.document.head.appendChild(style)\n } catch (e) {\n const link = document.createElement('link')\n if (styleSheet.href == null) {\n return\n }\n\n link.rel = 'stylesheet'\n link.type = styleSheet.type\n link.media = styleSheet.media.toString()\n link.href = styleSheet.href\n pip.document.head.appendChild(link)\n }\n })\n delegateEvents(\n [\n 'focusin',\n 'focusout',\n 'pointermove',\n 'keydown',\n 'pointerdown',\n 'pointerup',\n 'click',\n 'mousedown',\n 'input',\n ],\n pip.document,\n )\n\n setPipWindow(pip)\n }\n\n createEffect(() => {\n // Setup mutation observer for goober styles with id `_goober\n const gooberStyles = document.querySelector('#_goober')\n const w = pipWindow()\n if (gooberStyles && w) {\n const observer = new MutationObserver(() => {\n const pip_style = w.document.querySelector('#_goober')\n if (pip_style) {\n pip_style.textContent = gooberStyles.textContent\n }\n })\n observer.observe(gooberStyles, {\n childList: true, // observe direct children\n subtree: true, // and lower descendants too\n characterDataOldValue: true, // pass old data to callback\n })\n onCleanup(() => {\n observer.disconnect()\n })\n }\n })\n\n const value = createMemo(() => ({\n pipWindow: pipWindow(),\n requestPipWindow,\n closePipWindow,\n disabled: props.disabled ?? false,\n }))\n\n return (\n <PiPContext.Provider value={value}>{props.children}</PiPContext.Provider>\n )\n}\n\nexport const usePiPWindow = () => {\n const context = createMemo(() => {\n const ctx = useContext(PiPContext)\n if (!ctx) {\n throw new Error('usePiPWindow must be used within a PiPProvider')\n }\n return ctx()\n })\n return context\n}\n"],"names":["PiPContext","createContext","undefined","PiPProvider","props","pipWindow","setPipWindow","createSignal","closePipWindow","w","close","requestPipWindow","settings","pip","window","open","Error","meta","import","hot","on","localStorage","setItem","addEventListener","document","head","innerHTML","body","title","style","margin","styleSheets","forEach","styleSheet","cssRules","map","rule","cssText","join","createElement","style_node","ownerNode","style_id","id","setAttribute","textContent","appendChild","e","link","href","rel","type","media","toString","delegateEvents","createEffect","gooberStyles","querySelector","observer","MutationObserver","pip_style","observe","childList","subtree","characterDataOldValue","onCleanup","disconnect","value","createMemo","disabled","_$createComponent","Provider","children","usePiPWindow","context","ctx","useContext"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
onCleanup,
|
|
7
7
|
useContext,
|
|
8
8
|
} from 'solid-js'
|
|
9
|
-
import {
|
|
9
|
+
import { delegateEvents } from 'solid-js/web'
|
|
10
10
|
import type { Accessor, JSX } from 'solid-js'
|
|
11
11
|
|
|
12
12
|
interface PiPProviderProps {
|
|
@@ -69,8 +69,6 @@ export const PiPProvider = (props: PiPProviderProps) => {
|
|
|
69
69
|
pip.document.head.innerHTML = ''
|
|
70
70
|
// Remove existing body
|
|
71
71
|
pip.document.body.innerHTML = ''
|
|
72
|
-
// Clear Delegated Events
|
|
73
|
-
clearDelegatedEvents(pip.document)
|
|
74
72
|
|
|
75
73
|
pip.document.title = 'TanStack Devtools'
|
|
76
74
|
pip.document.body.style.margin = '0'
|