fix(ssr): copy SSR fixes from react-render-props-link-loader

Author: jedwards1211

src/index.js

@@ -18,13 +18,30 @@ export type Props = {
   children?: ?(state: State) => ?React.Node,
 }
 
+export type InnerProps = Props & {
+  scriptsRegistry?: ?ScriptsRegistry,
+}
+
+export class ScriptsRegistry {
+  scripts: Array<{
+    src: string,
+  }> = []
+  results: { [src: string]: { error: ?Error } } = {}
+  promises: { [src: string]: Promise<any> } = {}
+
+  scriptTags(): React.Node {
+    return this.scripts.map(props => <script key={props.src} {...props} />)
+  }
+}
+
 export const ScriptsRegistryContext: React.Context<?ScriptsRegistry> = React.createContext(
   null
 )
 
-export default class ScriptLoader extends React.PureComponent<Props, State> {
+class ScriptLoader extends React.PureComponent<InnerProps, State> {
+  mounted: boolean = false
+  promise: Promise<void> = loadScript(this.props)
   state = getState(this.props)
-  promise: ?Promise<void>
 
   static propTypes = {
     src: PropTypes.string.isRequired,
@@ -33,91 +50,56 @@ export default class ScriptLoader extends React.PureComponent<Props, State> {
     children: PropTypes.func,
   }
 
-  load() {
-    const { props } = this
-    const {
-      onLoad,
-      onError,
-      children, // eslint-disable-line no-unused-vars
-      ...loadProps
-    } = props
-    const promise = loadScript(loadProps)
-    if (this.promise !== promise) {
-      this.promise = promise
-      this.setState(getState(props))
-      promise.then(
-        () => {
-          if (this.promise !== promise) return
-          if (onLoad) onLoad()
-          this.setState(getState(props))
-        },
-        (error: Error) => {
-          if (this.promise !== promise) return
-          if (onError) onError(error)
-          this.setState(getState(props))
-        }
-      )
-    }
+  componentDidMount() {
+    this.mounted = true
+    this.listenTo(this.promise)
   }
 
-  componentDidMount() {
-    this.load()
+  componentWillUnmount() {
+    this.mounted = false
   }
 
   componentDidUpdate() {
-    this.load()
+    const promise = loadScript(this.props)
+    if (this.promise !== promise) {
+      this.setState(getState(this.props))
+      this.promise = promise
+      this.listenTo(promise)
+    }
   }
 
-  componentWillUnmount() {
-    this.promise = null
+  listenTo(promise: Promise<any>) {
+    const { props } = this
+    const { onLoad, onError } = props
+    promise.then(
+      () => {
+        if (!this.mounted || this.promise !== promise) return
+        if (onLoad) onLoad()
+        this.setState(getState(props))
+      },
+      (error: Error) => {
+        if (!this.mounted || this.promise !== promise) return
+        if (onError) onError(error)
+        this.setState(getState(props))
+      }
+    )
   }
 
   render(): React.Node {
-    const {
-      children,
-      /* eslint-disable no-unused-vars */
-      onLoad,
-      onError,
-      /* eslint-enable no-unsued-vars */
-      ...props
-    } = this.props
-    return (
-      <ScriptsRegistryContext.Consumer>
-        {(context: ?ScriptsRegistry) => {
-          if (context) {
-            context.scripts.push(props)
-            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>
-    )
+    const { children } = this.props
+    if (children) {
+      const result = children({ ...this.state })
+      return result == null ? null : result
+    }
+    return null
   }
 }
 
-export class ScriptsRegistry {
-  scripts: Array<{
-    src: string,
-  }> = []
-
-  scriptTags(): React.Node {
-    return (
-      <React.Fragment>
-        {this.scripts.map((props, index) => (
-          <script key={index} {...props} />
-        ))}
-      </React.Fragment>
-    )
-  }
-}
+const ConnectedScriptsLoader = (props: Props) => (
+  <ScriptsRegistryContext.Consumer>
+    {scriptsRegistry => (
+      <ScriptLoader {...props} scriptsRegistry={scriptsRegistry} />
+    )}
+  </ScriptsRegistryContext.Consumer>
+)
+export default ConnectedScriptsLoader

src/loadScript.js

@@ -1,57 +1,77 @@
 // @flow
-
 /* eslint-env browser */
+import { type InnerProps } from './index'
 
-type Props = {
-  src: string,
-}
-
-const loadScript = ({ src, ...props }: Props): Promise<void> =>
-  new Promise((resolve: () => void, reject: (error?: Error) => void) => {
-    if (typeof document === 'undefined') {
-      reject(new Error('server-side rendering is not supported'))
+const loadScript = async ({
+  scriptsRegistry,
+  onLoad,
+  onError,
+  children,
+  ...props
+}: InnerProps): Promise<void> => {
+  const { src } = props
+  if (scriptsRegistry) {
+    scriptsRegistry.results[src] = { error: undefined }
+    scriptsRegistry.scripts.push(props)
+    return
+  }
+  if (typeof document === 'undefined') {
+    throw new Error(
+      'you must pass a scriptsRegistry if calling on the server side'
+    )
+  }
+  if (typeof document.querySelector === 'function') {
+    if (document.querySelector(`script[src="${src}"]`)) {
+      results[src] = { error: undefined }
       return
     }
-    if (typeof document.querySelector === 'function') {
-      if (document.querySelector(`script[src="${src}"]`)) {
-        resolve()
-        return
-      }
-    }
+  }
+  return new Promise((resolve: () => void, reject: (error?: Error) => void) => {
     const script = document.createElement('script')
     script.src = src
     Object.keys(props).forEach(key => script.setAttribute(key, props[key]))
     script.onload = resolve
     script.onerror = reject
     if (document.body) document.body.appendChild(script)
   })
+}
 
 const results: { [src: string]: { error: ?Error } } = {}
 const promises: { [src: string]: Promise<any> } = {}
 
-export default (props: Props): Promise<any> =>
-  promises[props.src] ||
-  (promises[props.src] = loadScript(props).then(
-    () => (results[props.src] = { error: null }),
-    (error: any = new Error(`failed to load ${props.src}`)) => {
-      results[props.src] = { error }
-      throw error
-    }
-  ))
+export default (props: InnerProps): Promise<any> => {
+  const { scriptsRegistry } = props
+  const _promises = scriptsRegistry ? scriptsRegistry.promises : promises
+  const _results = scriptsRegistry ? scriptsRegistry.results : results
+  return (
+    _promises[props.src] ||
+    (_promises[props.src] = loadScript(props).then(
+      () => (_results[props.src] = { error: null }),
+      (error: any = new Error(`failed to load ${props.src}`)) => {
+        _results[props.src] = { error }
+        throw error
+      }
+    ))
+  )
+}
 
 export function getState({
   src,
-}: Props): {
+  scriptsRegistry,
+}: InnerProps): {
   loading: boolean,
   loaded: boolean,
   error: ?Error,
   promise: ?Promise<any>,
 } {
-  const result = results[src]
+  const result = scriptsRegistry ? scriptsRegistry.results[src] : results[src]
+  const promise = scriptsRegistry
+    ? scriptsRegistry.promises[src]
+    : promises[src]
   return {
     loading: result == null,
     loaded: result ? !result.error : false,
     error: result && result.error,
-    promise: promises[src],
+    promise,
   }
 }

test/index.js

@@ -91,8 +91,8 @@ describe('ScriptLoader', () => {
     )
     expect(comp.text()).to.equal('hello')
     expect(render.lastCall.lastArg).to.containSubset({
-      loading: true,
-      loaded: false,
+      loading: false,
+      loaded: true,
       error: undefined,
     })
     const script = document.getElementById('scriptId')
@@ -252,20 +252,26 @@ describe(`SSR`, function() {
     this.timeout(10000)
     const render = sinon.spy(() => 'hello')
     const registry = new ScriptsRegistry()
-    mount(
+    const comp = mount(
       <ScriptsRegistryContext.Provider value={registry}>
-        <ScriptLoader src="foo" id="scriptId">
+        <ScriptLoader src="SSR" id="scriptId">
           {render}
         </ScriptLoader>
       </ScriptsRegistryContext.Provider>
     )
-    const comp = mount(registry.scriptTags())
-
     expect(render.lastCall.lastArg).to.containSubset({
-      loading: true,
-      loaded: false,
-      error: null,
+      loading: false,
+      loaded: true,
+      error: undefined,
     })
-    expect(comp.find('script').prop('src')).to.equal('foo')
+    expect(comp.text()).to.equal('hello')
+
+    const head = mount(
+      <head>
+        <meta key={0} />
+        {registry.scriptTags()}
+      </head>
+    )
+    expect(head.find('script').prop('src')).to.equal('SSR')
   })
 })