adding widget output

This commit is contained in:
Benjamin Boudreau 2018-05-28 22:49:38 -04:00
parent 5de1643800
commit 10cad70262
8 changed files with 87 additions and 87 deletions

View File

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

View File

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

91
package-lock.json generated
View File

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

12
public/index.html Normal file
View File

@ -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>

1
src/.tern-port Normal file
View File

@ -0,0 +1 @@
58305

View File

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

View File

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

View File

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