feat: create vue devtools plugin

lib/devtools.ts

@@ -0,0 +1,65 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable no-param-reassign */
+import { App, PluginDescriptor, setupDevtoolsPlugin, DevtoolsPluginApi } from '@vue/devtools-api';
+import { watch } from 'vue';
+
+import { defaultConfig } from '@/config';
+
+type AnyFunction = (...args: any[]) => any;
+
+type HookType<
+  TApi extends DevtoolsPluginApi<unknown>,
+  THookName extends keyof TApi['on'],
+  T = TApi['on'][THookName],
+> = T extends AnyFunction ? Parameters<T>[0] : never;
+
+const inspectorId = 'swr-vue-inspector';
+
+export function setupDevtools(app: App) {
+  const setupPluginSettings: PluginDescriptor = {
+    id: 'swr-vue-devtools-plugin',
+    label: 'Stale-While-Revalidate Vue',
+    packageName: 'swr-vue',
+    homepage: 'https://edumudu.github.io/swr-vue/',
+    app,
+  };
+
+  const isSwrInspector = (id: string) => id === inspectorId;
+
+  setupDevtoolsPlugin(setupPluginSettings, (api) => {
+    const handleGetInspectorTree: HookType<typeof api, 'getInspectorTree'> = (payload) => {
+      if (!isSwrInspector(inspectorId)) return;
+
+      payload.rootNodes = [
+        {
+          id: 'root',
+          label: 'Global scope',
+        },
+      ];
+    };
+
+    const handleGetInspectorState: HookType<typeof api, 'getInspectorState'> = (payload) => {
+      if (!isSwrInspector(inspectorId) || payload.nodeId !== 'root') return;
+
+      const entries = Array.from(defaultConfig.cacheProvider.entries(), ([key, value]) => ({
+        key,
+        value,
+      }));
+
+      payload.state = {
+        'Global cache': entries,
+      };
+    };
+
+    api.addInspector({
+      id: inspectorId,
+      label: 'SWR',
+      icon: 'archive',
+    });
+
+    api.on.getInspectorTree(handleGetInspectorTree);
+    api.on.getInspectorState(handleGetInspectorState);
+
+    watch(defaultConfig.cacheProvider, () => api.sendInspectorState(inspectorId), { deep: true });
+  });
+}

lib/index.ts

@@ -1 +1,2 @@
 export * from './composables';
+export * from './devtools';

lib/types/lib.ts

@@ -18,6 +18,7 @@ export type SWRFetcher<Data> =
   | (() => FetcherResponse<Data>);
 
 export interface CacheProvider<Data = CacheState> {
+  entries(): IterableIterator<[string, Data]>;
   keys(): IterableIterator<string>;
   has(key: Key): boolean;
   get(key: Key): Data | undefined;

package.json

@@ -71,14 +71,15 @@
     "vite": "^3.1.0",
     "vite-plugin-dts": "^1.4.1",
     "vitepress": "1.0.0-alpha.4",
-    "vitest": "^0.23.2",
-    "vue": "^3.2.37",
+    "vitest": "^0.24.3",
+    "vue": "^3.2.41",
     "vue-tsc": "^0.38.2"
   },
   "peerDependencies": {
     "vue": "^3.2.33"
   },
   "dependencies": {
+    "@vue/devtools-api": "^6.4.3",
     "@vueuse/core": "^9.1.1"
   },
   "lint-staged": {