feat: add SSR support

jedwards1211 · jedwards1211 · commit 7fd3816e2c58 · 2019-04-02T13:58:41.000-05:00
diff --git a/README.md b/README.md
@@ -15,20 +15,20 @@ it will create the script tag you've requested.
 is a pre-existing `<script>` tag for that URL that it didn't create. If `src`
 prop changes, it will load that new URL.
 
-## Version notes
+# Version notes
 
 - supports React 15 or 16
 - if building for legacy browsers with a bundler like Webpack that supports the
   `module` field of `package.json`, you will probably need to add a rule to
   transpile this package.
 
-## Installation
+# Installation
 
 ```sh
 npm install --save react-render-props-script-loader
 ```
 
-## Example
+# Example
 
 ```js
 import * as React from 'react'
@@ -52,9 +52,13 @@ export const MapViewContainer = props => (
 )
 ```
 
-## API
+# API
 
-The package exports a single component with the following props:
+## `ScriptLoader`
+
+```js
+import ScriptLoader from 'react-render-props-script-loader'
+```
 
 ### `src` (**required** `string`)
 
@@ -73,3 +77,48 @@ script
 
 The render function. It will be called with an object having the following
 props, and may return your desired content to display:
+
+```js
+{
+  loading: boolean,
+  loaded: boolean,
+  error: ?Error,
+  promise: ?Promise<any>,
+}
+```
+
+## Server-Side Rendering
+
+```js
+import {
+  ScriptsRegistry,
+  ScriptsRegistryContext,
+} from 'react-render-props-script-loader'
+```
+
+On the server, create an instance of `ScriptsRegistry` and put it on the app's
+context:
+
+```js
+const registry = new ScriptsRegistry()
+
+const body = ReactDOM.renderToString(
+  <ScriptsRegistryContext.Provider value={registry}>
+    <App />
+  </ScriptsRegistryContext.Provider>
+)
+```
+
+Then render `registry.scriptTags()` in your head element:
+
+```js
+const html = (
+  <html className="default">
+    <head>
+      ...
+      {registry.scriptTags()}
+    </head>
+    ...
+  </html>
+)
+```
diff --git a/src/index.js b/src/index.js
@@ -13,11 +13,16 @@ export type State = {
 
 export type Props = {
   src: string,
+  type?: ?string,
   onLoad?: ?() => any,
   onError?: ?(error: Error) => any,
   children?: ?(state: State) => ?React.Node,
 }
 
+export const ScriptsRegistryContext: React.Context<?ScriptsRegistry> = React.createContext(
+  null
+)
+
 export default class ScriptLoader extends React.PureComponent<Props, State> {
   state = getState(this.props)
   promise: ?Promise<void>
@@ -68,12 +73,46 @@ export default class ScriptLoader extends React.PureComponent<Props, State> {
     this.promise = null
   }
 
-  render(): React.Node | null {
-    const { children } = this.props
-    if (children) {
-      const result = children({ ...this.state })
-      return result == null ? null : result
-    }
-    return null
+  render(): React.Node {
+    const { children, type, src } = this.props
+    return (
+      <ScriptsRegistryContext.Consumer>
+        {(context: ?ScriptsRegistry) => {
+          if (context) {
+            context.scripts.push({ type, src })
+            if (!children) return <React.Fragment />
+            const result = children({
+              loading: true,
+              loaded: false,
+              error: null,
+              promise: new Promise(() => {}),
+            })
+            return result == null ? null : result
+          }
+          if (children) {
+            const result = children({ ...this.state })
+            return result == null ? null : result
+          }
+          return null
+        }}
+      </ScriptsRegistryContext.Consumer>
+    )
+  }
+}
+
+export class ScriptsRegistry {
+  scripts: Array<{
+    type?: ?string,
+    src: string,
+  }> = []
+
+  scriptTags(): React.Node {
+    return (
+      <React.Fragment>
+        {this.scripts.map(({ type, src }, index) => (
+          <script key={index} type={type} src={src} />
+        ))}
+      </React.Fragment>
+    )
   }
 }
diff --git a/test/index.js b/test/index.js
@@ -2,13 +2,13 @@
 
 /* eslint-env browser */
 
-import { describe, it } from 'mocha'
+import { describe, it, afterEach } from 'mocha'
 import * as React from 'react'
 import { mount } from 'enzyme'
 import { expect } from 'chai'
 import sinon from 'sinon'
 
-import ScriptLoader from '../src'
+import ScriptLoader, { ScriptsRegistryContext, ScriptsRegistry } from '../src'
 import loadScript from '../src/loadScript'
 
 describe('ScriptLoader', () => {
@@ -247,3 +247,25 @@ describe(`loadScript`, function() {
     }
   })
 })
+describe(`SSR`, function() {
+  it(`works`, function() {
+    this.timeout(10000)
+    const render = sinon.spy(() => 'hello')
+    const registry = new ScriptsRegistry()
+    mount(
+      <ScriptsRegistryContext.Provider value={registry}>
+        <ScriptLoader src="foo" id="scriptId">
+          {render}
+        </ScriptLoader>
+      </ScriptsRegistryContext.Provider>
+    )
+    const comp = mount(registry.scriptTags())
+
+    expect(render.lastCall.lastArg).to.containSubset({
+      loading: true,
+      loaded: false,
+      error: null,
+    })
+    expect(comp.find('script').prop('src')).to.equal('foo')
+  })
+})
