feat: initial commit

Author: jedwards1211

README.md

@@ -5,10 +5,67 @@
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 
-an easier to use dynamic script loader
+an easier to use dynamic script loader with a [render prop](https://reactjs.org/docs/render-props.html)
+
+## 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
 
 ```sh
 npm install --save react-render-props-script-loader
 ```
+
+## Example
+
+```js
+import * as React from 'react'
+import ScriptLoader from 'react-render-props-script-loader'
+
+import MapView from './MapView'
+
+export const MapViewContainer = props => (
+  <ScriptLoader
+    type="text/javascript"
+    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"
+    onLoad={() => console.log('loaded google maps!')}
+    onError={error => console.error('failed to load google maps:', error.stack)}
+  >
+    {({loading, error}) => {
+      if (loading) return <h3>Loading Google Maps API...</h3>
+      if (error) return <h3>Failed to load Google Maps API: {error.message}</h3>
+      return <MapView {...props} />
+    }}
+  </ScriptLoader>
+)
+```
+
+## API
+
+The package exports a single component with the following props:
+
+### `src` (**required** `string`)
+
+The script source.
+
+### `onLoad` (`?() => any`)
+
+A callback that `ScriptLoader` will call once the script has been loaded
+
+### `onError` (`?(error: Error) => any`)
+
+A callback that `ScriptLoader` will call if there was an error loading the
+script
+
+### `children` (`?(state: State) => ?React.Node`)
+
+The render function.  It will be passed the following props, and may return
+the content to display:
+
+* `loading` (`boolean`) - `true` iff the script is loading
+* `loaded` (`boolean`) - `true` iff the script successfully loaded
+* `error` (`?Error`) - the `Error` that occurred if the script failed to load

package.json

@@ -71,15 +71,15 @@
     "babel-eslint": "^7.1.1",
     "babel-plugin-flow-react-proptypes": "^17.0.0",
     "babel-plugin-istanbul": "^4.0.0",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-export-extensions": "^6.22.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-react-constant-elements": "^6.9.1",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-flow": "^6.23.0",
     "babel-preset-react": "^6.16.0",
-    "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-export-extensions": "^6.22.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-stage-1": "^6.24.1",
     "babel-register": "^6.23.0",
     "babel-runtime": "^6.23.0",
@@ -105,6 +105,7 @@
     "react-dom": "^16.2.0",
     "rimraf": "^2.6.0",
     "semantic-release": "^15.1.4",
+    "sinon": "^6.1.5",
     "travis-deploy-once": "^4.3.1"
   },
   "peerDependencies": {
@@ -113,4 +114,4 @@
   "dependencies": {
     "prop-types": "^15.0.0"
   }
-}
+}

src/index.js

@@ -1,7 +1,65 @@
-/* @flow */
+// @flow
 
 import * as React from 'react'
+import loadScript, {getState} from './loadScript'
 
-const Hello = () => <div>Hello world!</div>
+export type State = {
+  loading: boolean,
+  loaded: boolean,
+  error: ?Error,
+}
 
-export default Hello
+export type Props = {
+  src: string,
+  onLoad?: ?() => any,
+  onError?: ?(error: Error) => any,
+  children?: ?(state: State) => ?React.Node,
+}
+
+export default class ScriptLoader extends React.PureComponent<Props, State> {
+  state = getState(this.props)
+  promise: ?Promise<void>
+
+  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.load()
+  }
+
+  componentDidUpdate() {
+    this.load()
+  }
+
+  componentWillUnmount() {
+    this.promise = null
+  }
+
+  render(): ?React.Node {
+    const {children} = this.props
+    if (children) return children({...this.state})
+  }
+}

src/loadScript.js

@@ -0,0 +1,49 @@
+// @flow
+
+/* eslint-env browser */
+
+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'))
+      return
+    }
+    if (typeof document.querySelector === 'function') {
+      if (document.querySelector(`script[src="${encodeURIComponent(src)}"]`)) {
+        resolve()
+        return
+      }
+    }
+    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 function getState({src}: Props): {loading: boolean, loaded: boolean, error: ?Error} {
+  const result = results[src]
+  return {
+    loading: result == null,
+    loaded: result ? !result.error : false,
+    error: result && result.error,
+  }
+}