Merge pull request #1 from seriousben/adding-widget-output

Adding widget output

.eslintrc

@@ -6,8 +6,8 @@
   "parser": "babel-eslint",
   "extends": "airbnb",
   "rules": {
-    "semi": [2, "never"],
-    "no-underscore-dangle": 0
+    "no-underscore-dangle": 0,
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
   },
   "plugins": ["react"],
   "settings": {

README.md

@@ -32,6 +32,9 @@ The create-react-app of embeddable widgets.
 - [x] Widget as react app - index.html works (webpack, babel, react)
 - [ ] React widget (widget builder)
 - [ ] Webpack changed to output a library
+- [ ] Add tests
+- [ ] Add greenkeeper
+- [ ] Integrate eslint with webpack
 - [ ] Theming support
 - [ ] Obfuscation
 - [ ] Storyboard and docs

package-lock.json

@@ -546,9 +546,9 @@
       "dev": true
     },
     "are-we-there-yet": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz",
-      "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
+      "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
       "dev": true,
       "requires": {
         "delegates": "1.0.0",
@@ -5040,15 +5040,6 @@
           "dev": true,
           "optional": true
         },
-        "string_decoder": {
-          "version": "1.1.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "safe-buffer": "5.1.1"
-          }
-        },
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
@@ -5059,6 +5050,15 @@
             "strip-ansi": "3.0.1"
           }
         },
+        "string_decoder": {
+          "version": "1.1.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "safe-buffer": "5.1.1"
+          }
+        },
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
@@ -5152,7 +5152,7 @@
         "signal-exit": "3.0.2",
         "string-width": "1.0.2",
         "strip-ansi": "3.0.1",
-        "wide-align": "1.1.2"
+        "wide-align": "1.1.3"
       },
       "dependencies": {
         "ansi-regex": {
@@ -8222,7 +8222,7 @@
       "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
       "dev": true,
       "requires": {
-        "are-we-there-yet": "1.1.4",
+        "are-we-there-yet": "1.1.5",
         "console-control-strings": "1.1.0",
         "gauge": "2.7.4",
         "set-blocking": "2.0.0"
@@ -10838,15 +10838,6 @@
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
       "dev": true
     },
-    "string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "5.1.2"
-      }
-    },
     "string-template": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/string-template/-/string-template-0.2.1.tgz",
@@ -10863,6 +10854,15 @@
         "strip-ansi": "4.0.0"
       }
     },
+    "string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
     "stringstream": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.6.tgz",
@@ -12059,49 +12059,12 @@
       "dev": true
     },
     "wide-align": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz",
-      "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
+      "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
       "dev": true,
       "requires": {
-        "string-width": "1.0.2"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "dev": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-          "dev": true,
-          "requires": {
-            "number-is-nan": "1.0.1"
-          }
-        },
-        "string-width": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-          "dev": true,
-          "requires": {
-            "code-point-at": "1.1.0",
-            "is-fullwidth-code-point": "1.0.0",
-            "strip-ansi": "3.0.1"
-          }
-        },
-        "strip-ansi": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "2.1.1"
-          }
-        }
+        "string-width": "2.1.1"
       }
     },
     "widest-line": {

public/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Embeddable Widget</title>
+  </head>
+  <body>
+    <script src="/embeddable-widget.js"></script>
+    <script>
+      EmbeddableWidget.render();
+    </script>
+  </body>
+</html>

src/.tern-port

@@ -0,0 +1 @@
+58305

src/index.js

@@ -2,7 +2,24 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Widget from './widget';
 
-ReactDOM.render(
-  <Widget/>,
-  document.getElementById('app')
-);
+export default class EmbeddableWidget {
+  static render() {
+    const component = <Widget />;
+
+    function doRender() {
+      const containerEl = document.createElement('div');
+      document.body.appendChild(containerEl);
+      ReactDOM.render(
+        component,
+        containerEl,
+      );
+    }
+    if (document.readyState === 'complete') {
+      doRender();
+    } else {
+      window.addEventListener('load', () => {
+        doRender();
+      });
+    }
+  }
+}

src/widget.js

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import './widget.scss';
 
-class Widget extends React.Component {
+class Widget extends Component {
   state = {
     opened: false,
     showDock: true,
@@ -11,7 +11,7 @@ class Widget extends React.Component {
 
   handleToggleOpen = () => {
     this.setState((prev) => {
-      let showDock = prev.showDock;
+      let { showDock } = prev;
       if (!prev.opened) {
         showDock = false;
       }
@@ -36,16 +36,17 @@ class Widget extends React.Component {
         </a>
       );
     }
-    return "";
+    return '';
   }
 
   render() {
-    let body = this.renderBody();
+    const body = this.renderBody();
 
     return (
+
       <div className="docked-widget">
         <Transition in={this.state.opened} timeout={250} onExited={this.handleWidgetExit}>
-          {(status) => (
+          {status => (
             <div className={`widget widget-${status}`}>
               <div className="widget-header">
                 <div className="widget-header-title">

webpack.config.js

@@ -10,14 +10,14 @@ module.exports = {
       // both options are optional
       filename: devMode ? '[name].css' : '[name].[hash].css',
       chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
-    })
+    }),
   ],
   module: {
     rules: [
       {
         test: /\.(js|jsx)$/,
         exclude: /node_modules/,
-        use: ['babel-loader']
+        use: ['babel-loader'],
       },
       {
         test: /\.scss$/,
@@ -25,23 +25,26 @@ module.exports = {
           // fallback to style-loader in development
           devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
           'css-loader',
-          'sass-loader'
-        ]
-      }
-    ]
+          'sass-loader',
+        ],
+      },
+    ],
   },
   resolve: {
-    extensions: ['*', '.js', '.jsx']
+    extensions: ['*', '.js', '.jsx'],
   },
   entry: [
-    './src/index.js'
+    './src/index.js',
   ],
   output: {
     path: __dirname + '/dist',
     publicPath: '/',
-    filename: 'bundle.js'
+    filename: 'embeddable-widget.js',
+    library: 'EmbeddableWidget',
+    libraryExport: 'default',
+    libraryTarget: 'window',
   },
   serve: {
-    content: './dist'
-  }
+    content: ['./dist', './public'],
+  },
 };