feat(#7): add an argument postProcess for injectSSRHtml

able to customize ssrHtml and apiCacheScript

Author: RyanRoll

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

README.md

@@ -195,12 +195,12 @@ const [data, state] = useApi({
 
 ### Options [Optional]
 
-| Name          | Type                                          | default | Description                                                                                                                                                                                                   |
-| ------------- | --------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| handleData    | Function(data: any, state: ReactUseApi.State) |         | A callback function to deal with the data of the API's response. **IMPORTANT** Using any state setter in handleData is dangerous, which will cause the component re-rendering infinitely while SSR rendering. |
-| dependencies  | Object                                        |         | The additional needed data using in handleData. `NOTE`: "dependencies" is supposed to immutable due to React's rendering policy.                                                                              |
-| shouldRequest | Function                                      |         | A callback to decide whether useApi re-fetches the API when re-rendering. Returning true will trigger useApi to re-fetch. This option is helpful if you want to re-request an API when a route change occurs. |
-| watch         | any[]                                         | []      | An array of values that the effect depends on, this is the same as the second argument of useEffect.                                                                                                          |
+| Name          | Type                                          | default | Description                                                                                                                                                                                                          |
+| ------------- | --------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| handleData    | Function(data: any, state: ReactUseApi.State) |         | A callback function to deal with the data of the API's response. **IMPORTANT** Using any state setter in handleData is dangerous, which will cause the component re-rendering infinitely while SSR rendering.        |
+| dependencies  | Object                                        |         | The additional needed data using in handleData. `NOTE`: "dependencies" is supposed to immutable due to React's rendering policy.                                                                                     |
+| shouldRequest | Function                                      |         | A callback to decide whether useApi re-fetches the API when `only re-rendering`. Returning true will trigger useApi to re-fetch. This option is helpful if you want to re-request an API when a route change occurs. |
+| watch         | any[]                                         | []      | An array of values that the effect depends on, this is the same as the second argument of useEffect.                                                                                                                 |
 
 ## State
 
@@ -316,7 +316,8 @@ _Each property is optional_
 ```ts
 injectSSRHtml(
   context: ReactUseApi.CustomContext,
-  renderSSR?: () => string
+  renderSSR?: () => string,
+  postProcess?: (ssrHtml: string, apiCacheScript: string) => string,
 ): string
 
 ```

src/__tests__/ssr.test.ts

@@ -269,6 +269,34 @@ describe('injectSSRHtml tests', () => {
     expect(ssrHtml).toEqual(html)
   })
 
+  it('should injectSSRHtml work well with postProcess', async () => {
+    const renderSSR = jest.fn().mockReturnValue(html)
+    const context = configure({
+      settings: {
+        ...copySettings()
+      }
+    })
+    const { settings } = context
+    const { cache } = settings
+    cache.reset = jest.fn()
+    cache.set(JSON.stringify({ url: 'foo' }), 'bar')
+    expect.hasAssertions()
+    let originSSRHtml = ''
+    const postProcess = jest.fn((ssrHtml: string, apiCacheScript: string) => {
+      originSSRHtml = ssrHtml + apiCacheScript
+      return '404'
+    })
+    const ssrHtml = await injectSSRHtml(context, renderSSR, postProcess)
+    expect(renderSSR).toHaveBeenCalled()
+    expect(cache.reset).toHaveBeenCalled()
+    expect(postProcess).toHaveBeenCalled()
+    expect(feedRequests).toHaveBeenLastCalledWith(context, html)
+    expect(originSSRHtml).toEqual(
+      `${html}<script>window.__USE_API_CACHE__ = ${apiTestCacheJson}</script>`
+    )
+    expect(ssrHtml).toEqual('404')
+  })
+
   it('should rule the uncached data out by shouldUseApiCache()', async () => {
     const renderSSR = jest.fn().mockReturnValue(html)
     const context = configure({

src/common.ts

@@ -12,6 +12,8 @@ export const defaultSettings = {
   clientCacheVar: '__USE_API_CACHE__',
   isSSR: (...args: any[]): boolean | void => typeof window === 'undefined',
   renderSSR: (...args: any[]): string => '',
+  // skip: (config?: ReactUseApi.Config, cacheKey?: string): boolean | void =>
+  //   false,
   shouldUseApiCache: (
     config?: ReactUseApi.Config,
     cacheKey?: string

src/ssr.ts

@@ -1,4 +1,4 @@
-import { configure, axiosAll, defaultSettings } from './common'
+import { configure, axiosAll, defaultSettings, isFunction } from './common'
 
 export const feedRequests = async (
   context: ReactUseApi.Context,
@@ -62,7 +62,8 @@ export const feedRequests = async (
 
 export const injectSSRHtml = async (
   context: ReactUseApi.CustomContext,
-  renderSSR?: ReactUseApi.Settings['renderSSR']
+  renderSSR?: ReactUseApi.Settings['renderSSR'],
+  postProcess?: (ssrHtml: string, apiCacheScript: string) => string
 ) => {
   context = configure(context, true)
   const { settings } = context
@@ -82,10 +83,15 @@ export const injectSSRHtml = async (
       }
       return shouldUseApiCache(config, cacheKey) !== false
     })
-    const axiosHooksScript = `<script>window.${clientCacheVar} = ${JSON.stringify(
-      cacheJson
-    ).replace(/</g, '\\u003c')}</script>`
-    return ssrHtml + axiosHooksScript
+    const apiCacheScript = Object.keys(cacheJson)
+      ? `<script>window.${clientCacheVar} = ${JSON.stringify(cacheJson).replace(
+          /</g,
+          '\\u003c'
+        )}</script>`
+      : ''
+    return isFunction(postProcess)
+      ? postProcess(ssrHtml, apiCacheScript)
+      : ssrHtml + apiCacheScript
   }
   return ssrHtml
 }

src/typings.d.ts

@@ -39,9 +39,10 @@ declare namespace ReactUseApi {
   }
   interface Options {
     watch?: any[]
+    dependencies?: dependencies
     handleData?: (data: Data, newState: State) => any
     shouldRequest?: () => boolean | void
-    dependencies?: dependencies
+    // skip?: (config?: ReactUseApi.Config, cacheKey?: string) => boolean | void
     $cacheKey?: string
   }
   interface dependencies {

src/useApi.ts

@@ -199,9 +199,7 @@ export const handleUseApiOptions = (
     ? ({ ...opt } as ReactUseApi.Options)
     : ({
         watch: Array.isArray(opt) ? opt : [],
-        handleData: isFunction(opt) ? opt : undefined,
-        shouldRequest: undefined,
-        dependencies: undefined
+        handleData: isFunction(opt) ? opt : undefined
       } as ReactUseApi.Options)
   options.$cacheKey = cacheKey
   return options