Update code for react 16

Tommy Leunen · Tommy Leunen · commit 37c7b96774fd · 2017-12-17T12:58:54.000-08:00
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,6 @@
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+indent_style = space
+indent_size = 2
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,7 @@
-# Mac crap
-.DS_Store
-
-# NodeJS
-node_modules/
+/coverage
+/demo/dist
+/es
+/lib
+/node_modules
+/umd
+npm-debug.log*
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+package-lock=false
diff --git a/demo/index.js b/demo/index.js
diff --git a/demo/src/index.js b/demo/src/index.js
@@ -0,0 +1,32 @@
+import React, {Component} from 'react'
+import {render} from 'react-dom'
+
+import Gist from '../../src'
+
+class Demo extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      id: 'bedde975e6e92a77e2321487ba45f313',
+      file: null
+    };
+  }
+
+  componentDidMount() {
+    // update the gist after 5 seconds
+    setTimeout(() => {
+      this.setState({id: '5995ea726914f280afb3', file: 'Chef-Dockerfile'});
+    }, 5000);
+  }
+
+  render() {
+    return <div>
+      <h1>React-Gist</h1>
+      <p>The following gist will be updated in 5 seconds</p>
+      <Gist {...this.state} />
+    </div>
+  }
+}
+
+render(<Demo/>, document.querySelector('#demo'))
diff --git a/index.js b/index.js
diff --git a/nwb.config.js b/nwb.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  type: 'react-component',
+  npm: {
+    esModules: true,
+    umd: false
+  }
+}
diff --git a/package.json b/package.json
@@ -2,7 +2,12 @@
   "name": "react-gist",
   "version": "1.1.0",
   "description": "Github Gist React component",
-  "main": "index.js",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "files": [
+    "lib",
+    "es"
+  ],
   "repository": {
     "type": "git",
     "url": "git://github.com/tleunen/react-gist.git"
@@ -25,12 +30,22 @@
   },
   "license": "MIT",
   "dependencies": {
-    "react": "^0.12.0"
+    "prop-types": "^15.6.0"
   },
   "devDependencies": {
-    "reactify": "^0.15.2"
+    "nwb": "^0.20.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0"
+  },
+  "peerDependencies": {
+    "react": "0.14.x || ^15.0.0-rc || ^16.0.0-rc"
   },
   "scripts": {
-    "demo": "beefy demo/index.js --open -- -t reactify"
+    "build": "nwb build-react-component",
+    "clean": "nwb clean-module && nwb clean-demo",
+    "start": "nwb serve-react-demo",
+    "test": "nwb test-react",
+    "test:coverage": "nwb test-react --coverage",
+    "test:watch": "nwb test-react --server"
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class Gist extends React.PureComponent {
+  componentDidMount() {
+    this._updateIframeContent();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    this._updateIframeContent();
+  }
+
+  _defineUrl() {
+    const { id, file } = this.props;
+
+    const fileArg = file ? `?file=${file}` : '';
+
+    return `https://gist.github.com/${id}.js${fileArg}`;
+  }
+
+  _updateIframeContent() {
+    const { id } = this.props;
+
+    const iframe = this.iframeNode;
+
+    let doc = iframe.document;
+    if (iframe.contentDocument) doc = iframe.contentDocument;
+    else if (iframe.contentWindow) doc = iframe.contentWindow.document;
+
+    const gistLink = this._defineUrl()
+    const gistScript = `<script type="text/javascript" src="${gistLink}"></script>`;
+    const styles = '<style>*{font-size:12px;}</style>';
+    const resizeScript = `onload="parent.document.getElementById('gist-${id}').style.height=document.body.scrollHeight + 'px'"`;
+    const iframeHtml = `<html><head><base target="_parent">${styles}</head><body ${resizeScript}>${gistScript}</body></html>`;
+
+    doc.open();
+    doc.writeln(iframeHtml);
+    doc.close();
+  }
+
+  render() {
+    const { id } = this.props;
+
+    return (
+      <iframe
+        ref={(n) => { this.iframeNode = n; }}
+        width="100%"
+        frameBorder={0}
+        id={`gist-${id}`}
+      />
+    );
+  }
+}
+
+export default Gist;
