Subscription mode

immutable/package.json

@@ -1,6 +1,6 @@
 {
   "name": "swr-immutable",
-  "version": "0.0.1",
+  "private": true,
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
   "types": "./dist/immutable",

infinite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "swr-infinite",
-  "version": "0.0.1",
+  "private": true,
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
   "types": "./dist/infinite",

jest.config.js

@@ -6,7 +6,8 @@ module.exports = {
   moduleNameMapper: {
     '^swr$': '<rootDir>/src',
     '^swr/infinite$': '<rootDir>/infinite/index.ts',
-    '^swr/immutable$': '<rootDir>/immutable/index.ts'
+    '^swr/immutable$': '<rootDir>/immutable/index.ts',
+    '^swr/subscribe$': '<rootDir>/subscribe/index.ts',
   },
   transform: {
     '^.+\\.(t|j)sx?$': '@swc/jest'

package.json

@@ -31,29 +31,39 @@
       "module": "./immutable/dist/index.esm.js",
       "require": "./immutable/dist/index.js",
       "types": "./immutable/dist/immutable/index.d.ts"
+    },
+    "./subscribe": {
+      "import": "./subscribe/dist/index.mjs",
+      "module": "./subscribe/dist/index.esm.js",
+      "require": "./subscribe/dist/index.js",
+      "types": "./subscribe/dist/subscribe/index.d.ts"
     }
   },
   "types": "./dist/index.d.ts",
   "files": [
     "dist/**",
     "infinite/dist/**",
     "immutable/dist/**",
+    "subscribe/dist/**",
     "infinite/package.json",
-    "immutable/package.json"
+    "immutable/package.json",
+    "subscribe/package.json"
   ],
   "repository": "github:vercel/swr",
   "homepage": "https://swr.vercel.app",
   "license": "MIT",
   "scripts": {
     "clean": "rimraf dist infinite/dist immutable/dist",
-    "build": "yarn build:core && yarn build:infinite && yarn build:immutable",
+    "build": "yarn build:core && yarn build:infinite && yarn build:immutable && yarn build:subscribe",
     "watch": "npm-run-all -p watch:core watch:infinite watch:immutable",
     "watch:core": "yarn build:core -w",
     "watch:infinite": "yarn build:infinite -w",
     "watch:immutable": "yarn build:immutable -w",
+    "watch:subscribe": "yarn build:subscribe -w",
     "build:core": "bunchee src/index.ts --no-sourcemap",
     "build:infinite": "bunchee index.ts --cwd infinite --no-sourcemap",
     "build:immutable": "bunchee index.ts --cwd immutable --no-sourcemap",
+    "build:subscribe": "bunchee index.ts --cwd subscribe --no-sourcemap",
     "prepublishOnly": "yarn clean && yarn build",
     "publish-beta": "yarn publish --tag beta",
     "types:check": "tsc --noEmit --project tsconfig.check.json && tsc --noEmit -p test",

subscribe/index.ts

@@ -0,0 +1,70 @@
+import { useEffect } from 'react'
+import useSWR from 'swr'
+import { withMiddleware } from '../src/utils/with-middleware'
+import { Key, SWRHook, Middleware, SWRConfiguration } from '../src/types'
+
+export type SWRSubscription<Data = any, Error = any> = (
+  key: Key,
+  callbacks: {
+    onData(data: Data): void
+    onError(err: Error): void
+  }
+) => void
+
+export type SWRSubscriptionResponse<Data = any, Error = any> = {
+  data?: Data
+  error?: Error
+}
+
+export type SWRSubscriptionHook<Data = any, Error = any> = (
+  key: Key,
+  subscribeFn: SWRSubscription<Data, Error>,
+  config?: SWRConfiguration
+) => SWRSubscriptionResponse<Data, Error>
+
+const subscriptions = new Map<Key, number>()
+const disposers = new Map()
+
+export const subscribe = (<Data, Error>(useSWRNext: SWRHook) =>
+  (
+    key: Key,
+    subscribeFn: SWRSubscription<Data, Error>,
+    config?: SWRConfiguration
+  ): SWRSubscriptionResponse<Data, Error> => {
+    const { data, error, mutate } = useSWRNext(key, null, config)
+
+    useEffect(() => {
+      subscriptions.set(key, (subscriptions.get(key) || 0) + 1)
+      const onData = (val: Data) => mutate(val, false)
+      const onError = async (err: any) => {
+        // Avoid thrown errors from `mutate`
+        // eslint-disable-next-line no-empty
+        try {
+          await mutate(() => {
+            throw err
+          }, false)
+        } catch (_) {
+          /* eslint-disable-line no-empty */
+        }
+      }
+
+      if (subscriptions.get(key) === 1) {
+        const dispose = subscribeFn(key, { onData, onError })
+        disposers.set(key, dispose)
+      }
+      return () => {
+        const count = subscriptions.get(key) || 1
+        subscriptions.set(key, count - 1)
+        // dispose if it's last one
+        if (count === 1) {
+          disposers.get(key)()
+        }
+      }
+    }, [key, mutate, subscribeFn])
+
+    return { data, error }
+  }) as Middleware
+
+const useSWRSubscribe = withMiddleware(useSWR, subscribe) as SWRSubscriptionHook
+
+export { useSWRSubscribe as unstable_useSWRSubscribe }

subscribe/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "swr-subscribe",
+  "private": true,
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/subscribe",
+  "exports": "./dist/index.mjs",
+  "peerDependencies": {
+    "swr": "*",
+    "react": "*"
+  }
+}

subscribe/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "..",
+  },
+  "include": [".", "../src"],
+  "exclude": ["./dist"]
+}

test/use-swr-subscribe.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { act, screen } from '@testing-library/react'
+import { sleep, renderWithConfig } from './utils'
+import { unstable_useSWRSubscribe as useSWRSubscription } from 'swr/subscribe'
+
+describe('useSWRSubscription', () => {
+  it('should update state when fetcher is a subscription', async () => {
+    const key = 'sub-0'
+    let intervalId
+    let res = 0
+    function subscribe(_key, { onData, onError }) {
+      intervalId = setInterval(() => {
+        if (res === 3) {
+          const err = new Error(_key + 'error')
+          onError(err)
+        } else {
+          onData(_key + res)
+        }
+        res++
+      }, 100)
+
+      return () => {}
+    }
+
+    function Page() {
+      const { data, error } = useSWRSubscription(key, subscribe, {
+        fallbackData: 'fallback'
+      })
+      return <div>{error ? error.message : data}</div>
+    }
+
+    renderWithConfig(<Page />)
+    await act(() => sleep(10))
+    screen.getByText(`fallback`)
+    await act(() => sleep(100))
+    screen.getByText(`${key}0`)
+    await act(() => sleep(100))
+    screen.getByText(`${key}1`)
+    await act(() => sleep(100))
+    screen.getByText(`${key}2`)
+    await act(() => sleep(100))
+    screen.getByText(`${key}error`)
+    clearInterval(intervalId)
+    await sleep(100)
+    screen.getByText(`${key}error`)
+  })
+})

tsconfig.check.json

@@ -3,5 +3,5 @@
   "compilerOptions": {
     "rootDir": ".",
   },
-  "include": ["src", "immutable", "infinite"]
+  "include": ["src", "immutable", "infinite", "subscribe"]
 }

tsconfig.json

@@ -20,7 +20,8 @@
     "paths": {
       "swr": ["./src/index.ts"],
       "swr/infinite": ["./infinite/index.ts"],
-      "swr/immutable": ["./immutable/index.ts"]
+      "swr/immutable": ["./immutable/index.ts"],
+      "swr/subscribe": ["./subscribe/index.ts"],
     },
     "typeRoots": ["./src/types", "./node_modules/@types"]
   },