feat: add DevTools hook (#2016)

* feat: add __SWR_DEVTOOLS_USE__ hook

* refactor: define the devtools hook in web-preset

* feat: expose the React instance as window.__SWR_DEVTOOLS_REACT__

* refactor: create devtools preset and a setup function

* test: fix a failed test for devtools

* test: add a test for window.__SWR_DEVTOOLS_REACT__

* refactor: inject the devtools middleware as a built-in middleware

* fix: inject __SWR_DEVTOOLS_REACT__ only .__SWR_DEVTOOLS_USE__ is defined

* refactor: sort an import statement

_internal/index.ts

@@ -5,6 +5,7 @@ export { SWRConfig, revalidateEvents }
 
 export { initCache } from './utils/cache'
 export { defaultConfig, cache, mutate, compare } from './utils/config'
+import { setupDevTools } from './utils/devtools'
 export * from './utils/env'
 export { SWRGlobalState } from './utils/global-state'
 export { stableHash } from './utils/hash'
@@ -23,3 +24,5 @@ export { withMiddleware } from './utils/with-middleware'
 export { preload } from './utils/preload'
 
 export * from './types'
+
+setupDevTools()

_internal/utils/devtools.ts

@@ -0,0 +1,17 @@
+import React from 'react'
+import { isWindowDefined } from './helper'
+
+// @ts-expect-error
+const enableDevtools = isWindowDefined && window.__SWR_DEVTOOLS_USE__
+
+export const use = enableDevtools
+  ? // @ts-expect-error
+    window.__SWR_DEVTOOLS_USE__
+  : []
+
+export const setupDevTools = () => {
+  if (enableDevtools) {
+    // @ts-expect-error
+    window.__SWR_DEVTOOLS_REACT__ = React
+  }
+}

_internal/utils/middleware-preset.ts

@@ -1,3 +1,4 @@
+import { use as devtoolsUse } from './devtools'
 import { middleware as preload } from './preload'
 
-export const BUILT_IN_MIDDLEWARE = [preload]
+export const BUILT_IN_MIDDLEWARE = devtoolsUse.concat(preload)

test/use-swr-devtools.test.tsx

@@ -0,0 +1,31 @@
+import { screen } from '@testing-library/react'
+import React from 'react'
+
+describe('useSWR - devtools', () => {
+  let useSWR, createKey, createResponse, renderWithConfig
+  beforeEach(() => {
+    const middleware =
+      useSWRNext =>
+      (...args) => {
+        const result = useSWRNext(...args)
+        return { ...result, data: 'middleware' }
+      }
+    // @ts-expect-error
+    window.__SWR_DEVTOOLS_USE__ = [middleware]
+    ;({ createKey, createResponse, renderWithConfig } = require('./utils'))
+    useSWR = require('swr').default
+  })
+  it('window.__SWR_DEVTOOLS_USE__ should be set as middleware', async () => {
+    const key = createKey()
+    function Page() {
+      const { data } = useSWR(key, () => createResponse('ok'))
+      return <div>data: {data}</div>
+    }
+    renderWithConfig(<Page />)
+    await screen.findByText('data: middleware')
+  })
+  it('window.__SWR_DEVTOOLS_REACT__ should be the same reference with React', () => {
+    // @ts-expect-error
+    expect(window.__SWR_DEVTOOLS_REACT__).toBe(React)
+  })
+})