Merge pull request #11 from koba04/feat-web-accessible-resources

feat: stop using web_accessible_resources to inject a runtime script

README.md

@@ -16,11 +16,9 @@
 
 ```js
 import { cache } from "swr";
+import { launch } from "swr-devtools";
 
-if (typeof window !== "undefined") {
-  window.__SWR_DEVTOOLS__?.launch(cache);
-}
-
+launch(cache);
 ```
 
 ## Use this as a React Component

examples/swr-devtools-demo/pages/_app.tsx

@@ -1,15 +1,13 @@
 import "../styles/globals.css";
-import { SWRDevTools, createDevToolsCache } from "swr-devtools";
+import { SWRDevTools, launch } from "swr-devtools";
 import { cache } from "swr";
 
 // The way to use SWR DevTools as a Chrome extension
 if (typeof window !== "undefined") {
-  // @ts-ignore
-  globalThis.__SWR_DEVTOOLS__?.launch(cache);
+  launch(cache);
 }
 
 // The way to use SWR DevTools as a React Component
-const devtoolsSWRCache = createDevToolsCache(cache);
 const DevToolsArea = () => (
   <div
     style={{
@@ -19,7 +17,7 @@ const DevToolsArea = () => (
       height: "400px",
     }}
   >
-    <SWRDevTools cache={devtoolsSWRCache} />
+    <SWRDevTools cache={cache} />
   </div>
 );
 

packages/swr-devtools-extensions/manifest.json

@@ -18,8 +18,5 @@
       "js": ["content.js"],
       "run_at": "document_start"
     }
-  ],
-  "web_accessible_resources": [
-    "runtime.js"
   ]
 }

packages/swr-devtools-extensions/src/app.tsx

@@ -1,7 +1,7 @@
 import ReactDOM from "react-dom";
-import { SWRDevTools, createDevToolsCache } from "swr-devtools";
+import { SWRDevTools } from "swr-devtools";
 
-const cache = createDevToolsCache(new Map() as any);
+const cache = new Map();
 
 const render = () => {
   ReactDOM.render(

packages/swr-devtools-extensions/src/background.ts

@@ -1,15 +1,36 @@
 // background.js
-let panelPort: chrome.runtime.Port | null;
+let panelPort: chrome.runtime.Port | null = null;
+
+const queuedMessages: any[] = [];
+const flushQueuedMessages = () => {
+  if (panelPort === null) {
+    return;
+  }
+  for (const queuedMessage of queuedMessages) {
+    panelPort.postMessage(queuedMessage);
+  }
+  queuedMessages.length = 0;
+};
+const enqueueMessage = (message: any) => {
+  queuedMessages.push(message);
+};
+
 chrome.runtime.onConnect.addListener((port) => {
   // A port between a content page
   if (port.name === "content") {
     port.onMessage.addListener((message) => {
       console.log("sent message from content to panel", message);
-      panelPort?.postMessage(message);
+      if (panelPort === null) {
+        enqueueMessage(message);
+      } else {
+        flushQueuedMessages();
+        panelPort.postMessage(message);
+      }
     });
     // A port between the SWR panel in devtools
   } else if (port.name === "panel") {
     panelPort = port;
+    flushQueuedMessages();
     panelPort.onDisconnect.addListener(() => {
       panelPort = null;
     });

packages/swr-devtools-extensions/src/content.ts

@@ -1,9 +1,3 @@
-// FIXME: Is this injection a recommended way?
-const script = document.createElement("script");
-script.src = chrome.runtime.getURL("runtime.js");
-document.documentElement.appendChild(script);
-script.parentNode?.removeChild(script);
-
 // proxy messages from applications to a background script
 const port = chrome.runtime.connect({ name: "content" });
 window.addEventListener("message", (e) => {

packages/swr-devtools/package.json

@@ -11,14 +11,14 @@
   "peerDependencies": {
     "react": "^17.0.2",
     "styled-components": "^5.3.0",
-    "swr": "^0.4.2"
+    "swr": "^0.5.6"
   },
   "devDependencies": {
     "@types/react": "^17.0.16",
     "@types/styled-components": "^5.1.12",
     "react": "^17.0.2",
     "styled-components": "^5.3.0",
-    "swr": "^0.4.2",
+    "swr": "^0.5.6",
     "typescript": "^4.1.3"
   },
   "dependencies": {

packages/swr-devtools/src/components/SWRDevTool.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import styled, { createGlobalStyle } from "styled-components";
 
-import { DevToolsCache, useDevToolsCache } from "../devtools-cache";
+import { useDevToolsCache, SWRCache } from "../devtools-cache";
 import { Panel } from "./Panel";
 import { Tab } from "./Tab";
 
@@ -20,7 +20,7 @@ const panels: Panel[] = [
 ];
 
 type Props = {
-  cache: DevToolsCache;
+  cache: SWRCache;
   isFixedPosition?: boolean;
 };
 

packages/swr-devtools/src/devtools-cache.ts

@@ -1,17 +1,24 @@
 import { useState, useEffect } from "react";
-import type { CacheInterface } from "swr";
 
 import { injectSWRCache, isMetaCache, SWRCacheData } from "./swr-cache";
 
-export type DevToolsCache<Value = any> = {
+// This is the Cache interface for SWR v1, but this only allows a string as its key
+// https://github.com/vercel/swr/blob/6e25b3b123541db5e042e5d359683575d3631df1/src/types.ts#L183
+export type SWRCache<Data = any> = {
+  get(key: string): Data | null | undefined;
+  set(key: string, value: Data): void;
+  delete(key: string): void;
+};
+
+type DevToolsCache<Value = any> = {
   get(key: string): Value;
   set(key: string, value: Value): void;
   delete(key: string): void;
   // TODO: should support a delete method
   subscribe(fn: (key: string, value: Value) => void): () => void;
 };
 
-export const createDevToolsCache = (cache: CacheInterface): DevToolsCache => {
+const createDevToolsCache = (cache: SWRCache): DevToolsCache => {
   let listeners: Array<(key: string, value: any) => void> = [];
   const store: DevToolsCache = {
     get(key) {
@@ -81,15 +88,16 @@ const retrieveCache = (
 };
 
 export const useDevToolsCache = (
-  cache: DevToolsCache
+  cache: SWRCache
 ): [SWRCacheData[], SWRCacheData[]] => {
   const [cacheData, setCacheData] = useState<[SWRCacheData[], SWRCacheData[]]>([
     [],
     [],
   ]);
 
   useEffect(() => {
-    const unsubscribe = cache.subscribe((key: string, value: any) => {
+    const devToolsCache = createDevToolsCache(cache);
+    const unsubscribe = devToolsCache.subscribe((key: string, value: any) => {
       setCacheData(retrieveCache(key, value));
     });
     return () => unsubscribe();

packages/swr-devtools/src/index.ts

@@ -1,3 +1,2 @@
 export { SWRDevTools } from "./components/SWRDevTool";
-export { injectSWRCache, isMetaCache } from "./swr-cache";
-export { createDevToolsCache } from "./devtools-cache";
+export { launch } from "./runtime";

packages/swr-devtools/src/runtime.ts

@@ -0,0 +1,14 @@
+import { injectSWRCache, isMetaCache } from "./swr-cache";
+import { SWRCache } from "./devtools-cache";
+
+export const launch = (cache: SWRCache) => {
+  injectSWRCache(cache, (key: string, value: any) => {
+    if (isMetaCache(key)) {
+      return;
+    }
+    window.postMessage(
+      { __SWR_DEVTOOLS__: { cacheData: { key, value } } },
+      "*"
+    );
+  });
+};

packages/swr-devtools/src/swr-cache.ts

@@ -1,4 +1,4 @@
-import type { CacheInterface } from "swr";
+import { SWRCache } from "./devtools-cache";
 
 export type SWRCacheData = {
   id: number;
@@ -11,7 +11,7 @@ export type SWRCacheData = {
 };
 
 export const injectSWRCache = (
-  cache: CacheInterface,
+  cache: SWRCache,
   watcher: (key: string, value: any) => void
 ): void => {
   // intercept operations modifying the cache store
@@ -30,18 +30,18 @@ export const injectSWRCache = (
 export const isMetaCache = (key: string) => {
   return (
     // ctx and len are keys used in use-swr-infinite
-    /^(?:validating|err|context|size)@/.test(key) ||
+    /^(?:validating|err|ctx|context|size)@/.test(key) ||
     // v1 (beta)
     /^\$(?:req|err|ctx|len)\$/.test(key)
   );
 };
 
 export const isInfiniteCache = (key: string) => {
-  return /^arg@"many"@"/.test(key);
+  return /^arg@"(many|inf)"@"/.test(key);
 };
 
 export const getInfiniteCacheKey = (key: string) => {
   // TODO: support v1 style cache keys
-  const match = key.match(/^arg@"many"@"(?<cacheKey>.*)?"/);
+  const match = key.match(/^arg@"(many|inf)"@"(?<cacheKey>.*)?"/);
   return match?.groups?.cacheKey ?? key;
 };

yarn.lock

@@ -4473,13 +4473,6 @@ supports-color@^8.0.0:
   dependencies:
     has-flag "^4.0.0"
 
-swr@^0.4.2:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/swr/-/swr-0.4.2.tgz#4a9ed5e9948088af145c79d716d294cb99712a29"
-  integrity sha512-SKGxcAfyijj/lE5ja5zVMDqJNudASH3WZPRUakDVOePTM18FnsXgugndjl9BSRwj+jokFCulMDe7F2pQL+VhEw==
-  dependencies:
-    dequal "2.0.2"
-
 swr@^0.5.6:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/swr/-/swr-0.5.6.tgz#70bfe9bc9d7ac49a064be4a0f4acf57982e55a31"