forked from Github/ocrcc-chatbox
initial setup of widget
This commit is contained in:
commit
370b5cc7fa
16
.eslintrc
Normal file
16
.eslintrc
Normal 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
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
node_modules
|
56
README.md
Normal file
56
README.md
Normal 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
12332
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
46
package.json
Normal file
46
package.json
Normal 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
8
src/index.js
Normal 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
41
src/widget.js
Normal 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
17
src/widget.scss
Normal 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
47
webpack.config.js
Normal 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'
|
||||
}
|
||||
};
|
Loading…
Reference in New Issue
Block a user