diff --git a/.eslintrc b/.eslintrc index bedb322..7db87fb 100644 --- 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": { diff --git a/README.md b/README.md index 0c40947..9415967 100644 --- 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 diff --git a/package-lock.json b/package-lock.json index f7300ed..4c92ab8 100644 --- 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": { diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..3d0d307 --- /dev/null +++ b/public/index.html @@ -0,0 +1,12 @@ + + + + Embeddable Widget + + + + + + diff --git a/src/.tern-port b/src/.tern-port new file mode 100644 index 0000000..30a2efb --- /dev/null +++ b/src/.tern-port @@ -0,0 +1 @@ +58305 \ No newline at end of file diff --git a/src/index.js b/src/index.js index 202aa88..c7e79b9 100644 --- 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( - , - document.getElementById('app') -); +export default class EmbeddableWidget { + static render() { + const component = ; + + 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(); + }); + } + } +} diff --git a/src/widget.js b/src/widget.js index 98eb49d..56d8a2a 100644 --- 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 { ); } - return ""; + return ''; } render() { - let body = this.renderBody(); + const body = this.renderBody(); return ( +
- {(status) => ( + {status => (
diff --git a/webpack.config.js b/webpack.config.js index 64396c1..9df3029 100644 --- 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'], + }, };