koba04 / swr-devtools Goto Github PK
View Code? Open in Web Editor NEWA DevTool for SWR
Home Page: https://swr-devtools.vercel.app
License: MIT License
A DevTool for SWR
Home Page: https://swr-devtools.vercel.app
License: MIT License
Currently, SWRDevTools throws an Error when we store non-serializable values like Symbol
into the SWR cache.
https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm
It's a limitation of postMessage
, but I'd like to avoid throwing an Error even though we can't pass the non-serializable values into the devtool panel.
I think it's ok to display a Symbol
object as a string like "Symbol"
.
I'm not sure what the exact issue is, but I just started using SWR and the devtools, and I've noticed that I have to close and re-open my devtools pane after maybe ~30 minutes/1 hour because the Cache and History tabs stop receiving updates.
I'm on version 2.0.0
of swr and 1.2.0
of the devtools installed on Chrome 108.0.5359.124
.
Is there any known issue with this? Let me know if there's more info I can provide to help. When I open the devtools for the extension's service worker I don't see any errors, and I still see the pane connection events being logged even when the SWR devtools pane stops updating.
Currently, swr-devtools
is built as a Component, which is designed to be rendered with an application component.
This has some drawbacks like overwrapping the UI and conflicting CSS styles.
I think a panel in browsers' devtools is the most suitable place for swr-devtools
, so I'll convert this to a Web Extension.
Currently, The DevTools stores the history of updating the cache store by inspecting setter functions.
I think it might be helpful to record histories of fetching results.
It seems that SWR-devtools (with swr 2.x
version) is also working for Production builds.
Is there any option/idea for how to disable it for Production?
Thanks.
swr has already published the version of v1 beta at the npm registry. the v1 version is no longer exposing a global cache object, so I have to find out another way to access the swr cache object.
I guess swr-devtools would require to receive a cache object through an argument like the following.
window.__SWR_DEVTOOLS_EXTENSION__(cache)
To inject the DevTools middleware to the application, we currently have to wrap it with <SWRDevTools>
when rendering. This is a great solution but not perfect due to the restrictions:
It would be great to inject the middleware automatically to all SWR apps, from the extension side. So I opened vercel/swr#2003 to discuss this idea. In extension’s content, we create the middleware and add it to __SWR_DEVTOOLS_USE__
:
global.__SWR_DEVTOOLS_USE__ = global.__SWR_DEVTOOLS_USE__ || []
global.__SWR_DEVTOOLS_USE__.push(devtoolsMiddleware)
And then SWR will always use the middleware if defined.
The only thing is to make sure the injection runs before application code to avoid mismatching of number of hooks. I think "run_at": "document_start"
already does that but not 100% sure.
I've applied overflow: scroll into the header, so the switcher can't overflow from the header. I should the select element insread of div.
Currently, SWR DevTools injects runtime code by inserting a script element from the content script. It's great because applications don't have to set up anything for SWR DevTools. This way is based on what Redux DevTools does.
But I'm not sure this is a good way for that.
But I could also provide the runtime as an npm package.
import { setup } from "swr-devtools";
if (process.env.NODE_ENV === "development") {
// Could use Dynamic Import here
// const module = import("swr-devtools");
setup(cache);
}
In this way, developers have to install swr-devtools
as a dependency. The downside is that I cannot control the version of the runtime code, so SWR Devtools has to care about old versions of the runtime script.
I've opened the SWR dev tool after installing the chrome extension and I don't see any information populating?
I'm running a vite app locally and I've refreshed the page, restarted the app and reloaded the developer console to no avail. Using swr v2.2.5
. I don't have the swr dev tools node module installed as the docs instructed me not to. Using vite v5.2.8
, just a normal TypeScript project.
I have swr hooks all over the page I'm testing this out on. Definitely should pick it up.
using [email protected] and [email protected]
I wrapped the SWRDevTools at the top client component and there's no errors up in chrome console, but it seems nothing happened at the swr panels when I fetch some data.
Is it supported in nextjs app?
Try visiting https://dashboard.clerk.com/ with this extension enabled on Firefox, other browsers/websites not tested.
Currently, SWR Devtools keeps a devtool panel even if a new page is opened. I should reset the panel view at that time.
Currently, the event objects become the various types of objects, which is not type-safe and hard to track the communication between panels and contents.
It would be nice if those has a concrete interface like { type: "***" , payload: { ... } }
Edge version: Version 107.0.1418.62 (Official build) (64-bit)
swr version: "swr": "^2.0.0-rc.3",
code:
import useSWR from 'swr'
const fetcher = (...args) => fetch(...args).then(res => res.json())
export const useCustomSWR=()=>{
const { data } = useSWR('https://jsonplaceholder.typicode.com/todos/1',fetcher)
return { data }
}
import {useCustomSWR} from "./customHook";
function App() {
const {data} = useCustomSWR()
return (
<div className="App">
{data?.userId}
</div>
);
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);`
Currently, SWR DevTools shares the cache store in the Devtools panel between multiple tabs, which is very confusing.
Refactoring to use CSS variables is required to work on this.
useSWRSubscription
uses a special key internally, so DevTools has to handle it correctly.
https://swr.vercel.app/docs/subscription
Trying to get this working with Next.js 11+ and not having any luck.
I downloaded and ran the example site, but when I upgraded it from Next 10.0.6 -> 11.0.0 the Chrome extension stopped working (it just shows "Haven't received any cache data from SWRDevTools"). The React panel continues to work as expected after the upgrade. Tried to figure out what is going wrong, but no luck.
Love the promise of this package! Thanks for all of your work on it, it's the biggest thing I'm missing with SWR.
Hi @koba04
Could you publish the private package and opt-out for PRODUCTION build as react-query devtools does?
https://react-query.tanstack.com/devtools
Let me what you thought about this idea. Thanks.
type Entry = {
key: Key,
value: {
data?: Data,
error?: any,
isLoading: boolean
isValidating: boolean
}
}
$swr${key}
type Entry = {
key: Key,
value: {
error: any,
isValidating: boolean
}
}
{key}
type Entry = {
key: Key,
value: Data
}
$req${key}
type Entry = {
key: Key
value: boolean // isValidating?
}
$err${key}
type Entry = {
key: Key,
value: any
}
{key}
type Entry = {
key: Key,
value: Data
}
Currently, displayed data is reset when we move from Cache/History to Network and vice versa.
To fix this, we have to store state in an upper tree.
I face the following message
error - ReferenceError: window is not defined
at /Users/user/workspace/loan-web/node_modules/swr-devtools/src/createSWRDevTools.ts:88:5
at Map.cache.set (/Users/user/workspace/loan-web/node_modules/swr-devtools/src/swr-cache.ts:23:7)
You need to support the ssr!
Can you fix it?
Error: ❌
Loading: ⏳
Validating:
Infinite: ♾️
This is an awesome project! Do you consider to deploy a demo somewhere while applying updates so that user can play with it online? Thanks
I've got the feedback that SWRDevTools
gets applications slow with large data.
I haven't found out the cause of the problem yet, but stringify
of superjson
seems to be slow, which is introduced by #90.
Chrome 109.0.5414.119 on macOS 13.1 Beta (22C5050e)
DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
at chrome-extension://liidbicegefhheghhjbomajjaehnjned/app.js:2:266743
at rs (chrome-extension://liidbicegefhheghhjbomajjaehnjned/app.js:2:143860)
at xu (chrome-extension://liidbicegefhheghhjbomajjaehnjned/app.js:2:163982)
at chrome-extension://liidbicegefhheghhjbomajjaehnjned/app.js:2:160586
at x (chrome-extension://liidbicegefhheghhjbomajjaehnjned/app.js:2:190548)
at MessagePort.T (chrome-extension://liidbicegefhheghhjbomajjaehnjned/app.js:2:191080)
Hi!
I'm using latest Nextjs, with 2.0.0-beta.6 of SWR and the extension never displays anything.
Do you know how I could debug this?
The request for the revalidateFIrstPage
has been never resolved.
We use Emojis for showing status like isValidating
, error
, infinite keys, and so on. I prefer to use SVG files because it depends on the environment.
I'm using SWR with GraphQL and feel that keys are not easy to read because newlines(\n) are printed as it is.
For example, a key is shown as
@"\n query GetUser(\n $id: ID ) {\n getUser(\n id: $id\n ) {\n name\n }\n }\n",#id:"xyz",
And I prefer
query GetUser(
$id: ID
) {
getUser(
id: $id
) {
name
}
}
id: "xyz"
Is there a plan to enable it?
While reading the source code I played around it a little bit and added dark mode support to the panel. I think it will be more convenient to let users choose the theme of the panel on their own instead of only depending on system's theme.
Currently swr-devtools-panel depends on system's preference to enable dark mode manual dark mode has option for that too.
@koba04, should i open a PR for this.
Hi! I think it would be useful to have a new tab that shows all SWR hooks horizontally like waterfalls, similar to the Chrome DevTools network tab.
I'm happy to work on this feature and contribute a PR :)
I try swr devtool extension but, occur the error and show white screen
content.ts:20 Uncaught Error: Extension context invalidated.
at a (content.ts:20:13)
at content.ts:49:18
and sometime show proper screen but not showing query history.
swr: 2.1.0
next: 13.2.4
I try erase and install all chrom extension
but not work 😢
Although brave browser is a chromium based browser, extension doesn't work on it without using SWRDevTools.
swr version v2
This package does not work with swr v0.x.
I think a lot of projects are currently migrating from swr v0.x to v1.x.
I think it would be more helpful to write down the supported versions.
If web-accessible.js included React, the application is broken by the error due to the mutilple React instances error.
It's very useful that we would filter cache data by an input.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.