adding widget output

2018-05-28 22:49:38 -04:00 · 2018-05-28 22:49:38 -04:00 · 10cad70262
commit 10cad70262
parent 5de1643800
8 changed files with 87 additions and 87 deletions
--- a/.eslintrc
+++ b/.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": {
--- a/README.md
+++ b/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
--- a/package-lock.json
+++ b/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": {
--- a/public/index.html
+++ b/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>
--- a/src/.tern-port
+++ b/src/.tern-port
@ -0,0 +1 @@
+58305
--- a/src/index.js
+++ b/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();
+      });
+    }
+  }
+}
--- a/src/widget.js
+++ b/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">
--- a/webpack.config.js
+++ b/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'],
+  },
 };