initial setup of widget

This commit is contained in:
Benjamin Boudreau 2018-05-26 14:53:54 -04:00
commit 370b5cc7fa
9 changed files with 12564 additions and 0 deletions

16
.eslintrc Normal file
View File

@ -0,0 +1,16 @@
{
"env": {
"browser": true,
"jest": true
},
"parser": "babel-eslint",
"extends": "airbnb",
"rules": {
"semi": [2, "never"],
"no-underscore-dangle": 0
},
"plugins": ["react"],
"settings": {
"import/resolver": "webpack"
}
}

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
node_modules

56
README.md Normal file
View File

@ -0,0 +1,56 @@
# Embeddable React Widget
Easy creation of an embeddable widget.
## Goal
The create-react-app of embeddable widgets.
## Features
* Full ES6/ES2015 support (with Babel)
* Package fonts, css, json, javascripts together into one simple repository (with Webpack)
* No css tyling conflicts between the host page and the widget (with https://github.com/premasagar/cleanslate)
* Obfuscating of the widget code
## What is an emeddable widget?
* Usable using a simple `<script>` tag
* Configurable with code
## Why not in an iframe?
* Interaction between the frame and the hosting page is tricky and not recommended
* You can only display content within the iframe
* iframe and content resizing is impossible
* iframe sandboxing can result in missing functionalities
## Roadmap
- [ ] index.html works (webpack, babel, react)
- [ ] webpack changed to output a library
- [ ] react widget
# Links
* https://github.com/premasagar/cleanslate
* https://github.com/krasimir/third-party-react-widget
* https://github.com/jenyayel/js-widget
* https://github.com/anakinjay/react-widget-starter
* https://webpack.js.org/guides/author-libraries/
* https://github.com/webpack-contrib/webpack-serve
* https://medium.freecodecamp.org/part-1-react-app-from-scratch-using-webpack-4-562b1d231e75
* https://github.com/facebook/create-react-app/blob/next/packages/react-scripts/config/webpack.config.prod.js
* https://github.com/webpack-contrib/purifycss-webpack
* https://medium.com/quick-code/from-zero-to-deploy-set-up-react-stack-with-webpack-3-20b57d6cb8d7
* https://medium.com/dailyjs/building-a-react-component-with-webpack-publish-to-npm-deploy-to-github-guide-6927f60b3220
* http://krasimirtsonev.com/blog/article/javascript-library-starter-using-webpack-es6
* https://github.com/javascript-obfuscator/webpack-obfuscator
* https://github.com/tsileo/embedded-js-widget
* https://thomassileo.name/blog/2014/03/27/building-an-embeddable-javascript-widget-third-party-javascript/
## Best
* https://www.robinwieruch.de/minimal-react-webpack-babel-setup/#hot-module-replacement
* https://codeburst.io/building-react-widget-libraries-using-webpack-e0a140c16ce4
* https://github.com/timarney/react-app-rewired

12332
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

46
package.json Normal file
View File

@ -0,0 +1,46 @@
{
"name": "embeddable-react-widget",
"version": "0.0.1",
"description": "building an embeddable js widget with react",
"main": "index.js",
"scripts": {
"start": "webpack-serve --config ./webpack.config.js --mode development --open",
"test": "echo \"Error: no test specified\" && exit 1"
},
"babel": {
"presets": [
"env",
"react",
"stage-2"
]
},
"author": "seriousben https://github.com/seriousben",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.11",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-import-resolver-webpack": "^0.10.0",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.8.2",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1",
"style-loader": "^0.21.0",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.3",
"webpack-serve": "^1.0.2"
},
"dependencies": {
"prop-types": "^15.6.1",
"react": "^16.3.2",
"react-dom": "^16.3.2"
}
}

8
src/index.js Normal file
View File

@ -0,0 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom';
import Widget from './widget';
ReactDOM.render(
<Widget/>,
document.getElementById('app')
);

41
src/widget.js Normal file
View File

@ -0,0 +1,41 @@
import React from 'react';
import PropTypes from 'prop-types';
import './widget.scss'
class Widget extends React.Component {
state = {
opened: false,
}
handleOpen = () => {
}
render() {
let body = "";
if (this.state.opened) {
body = (
<div className="widget-dialog">
<div className="widget-title">
Open
</div>
<div className="widget-body">
Body
</div>
<div className="widget-footer">
Footer
</div>
</div>
);
}
return (
<div className="widget">
Open
{body}
</div>
);
}
}
Widget.propTypes = {};
export default Widget;

17
src/widget.scss Normal file
View File

@ -0,0 +1,17 @@
.widget {
position: fixed;
bottom: 10px;
right: 10px;
width: 50px;
height: 20px;
text-align: center;
border: 1px solid;
padding: 10px;
}
.widget:hover {
background-color: blue;
color: white;
cursor: pointer;
}

47
webpack.config.js Normal file
View File

@ -0,0 +1,47 @@
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';
module.exports = {
mode: 'development',
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// 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']
},
{
test: /\.scss$/,
use: [
// fallback to style-loader in development
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
entry: [
'./src/index.js'
],
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
serve: {
content: './dist'
}
};