forked from Github/ocrcc-chatbox
adding docs
This commit is contained in:
parent
c99f06b5a4
commit
f54226a325
68
README.md
68
README.md
@ -6,10 +6,6 @@
|
|||||||
|
|
||||||
Easy creation of an embeddable widget.
|
Easy creation of an embeddable widget.
|
||||||
|
|
||||||
## Goal
|
|
||||||
|
|
||||||
The create-react-app of embeddable widgets.
|
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
* Full ES6/ES2015 support (with Babel)
|
* Full ES6/ES2015 support (with Babel)
|
||||||
@ -17,19 +13,35 @@ The create-react-app of embeddable widgets.
|
|||||||
* No css styling conflicts between the host page and the widget (with https://github.com/premasagar/cleanslate)
|
* No css styling conflicts between the host page and the widget (with https://github.com/premasagar/cleanslate)
|
||||||
* User theming of widget
|
* User theming of widget
|
||||||
* Obfuscating of the widget code
|
* Obfuscating of the widget code
|
||||||
|
* Unit Tested with code coverage enabled
|
||||||
|
* Continuous Integration ready
|
||||||
|
|
||||||
## What is an embeddable widget?
|
## Running the widget
|
||||||
|
|
||||||
* Usable using a simple `<script>` tag
|
### Install dependencies
|
||||||
* Configurable with code
|
|
||||||
* Themable
|
|
||||||
|
|
||||||
## Why not in an iframe?
|
```sh
|
||||||
|
$ npm install
|
||||||
|
```
|
||||||
|
|
||||||
* Interaction between the frame and the hosting page is tricky and not recommended
|
### Start the development server
|
||||||
* You can only display content within the iframe
|
|
||||||
* iframe and content resizing is impossible
|
```sh
|
||||||
* iframe sandboxing can result in missing functionalities
|
$ npm start
|
||||||
|
... server running at http://localhost:8080/
|
||||||
|
```
|
||||||
|
|
||||||
|
### Run tests
|
||||||
|
```
|
||||||
|
$ npm test
|
||||||
|
... test output
|
||||||
|
```
|
||||||
|
|
||||||
|
### Production build
|
||||||
|
```
|
||||||
|
$ npm run build
|
||||||
|
... create files in /dist
|
||||||
|
```
|
||||||
|
|
||||||
## Roadmap
|
## Roadmap
|
||||||
|
|
||||||
@ -37,6 +49,8 @@ The create-react-app of embeddable widgets.
|
|||||||
- [x] React widget (widget builder)
|
- [x] React widget (widget builder)
|
||||||
- [x] Webpack changed to output a library
|
- [x] Webpack changed to output a library
|
||||||
- [x] Add tests
|
- [x] Add tests
|
||||||
|
- [x] Add circleci integration
|
||||||
|
- [x] Add codecov integration for codecoverage
|
||||||
- [x] Production Build
|
- [x] Production Build
|
||||||
- [x] Minified
|
- [x] Minified
|
||||||
- [x] Add greenkeeper
|
- [x] Add greenkeeper
|
||||||
@ -46,7 +60,28 @@ The create-react-app of embeddable widgets.
|
|||||||
- [ ] Theming support
|
- [ ] Theming support
|
||||||
- [ ] Storyboard and docs
|
- [ ] Storyboard and docs
|
||||||
|
|
||||||
# Links
|
## Background
|
||||||
|
|
||||||
|
### What is an embeddable widget?
|
||||||
|
|
||||||
|
* Usable using a simple `<script>` tag
|
||||||
|
* Configurable with code
|
||||||
|
* Themable
|
||||||
|
|
||||||
|
### 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
|
||||||
|
|
||||||
|
### Read more
|
||||||
|
|
||||||
|
Read more about about widgets, react and scoping of css.
|
||||||
|
|
||||||
|
* 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
|
||||||
* https://github.com/premasagar/cleanslate
|
* https://github.com/premasagar/cleanslate
|
||||||
* https://github.com/krasimir/third-party-react-widget
|
* https://github.com/krasimir/third-party-react-widget
|
||||||
* https://github.com/jenyayel/js-widget
|
* https://github.com/jenyayel/js-widget
|
||||||
@ -62,8 +97,3 @@ The create-react-app of embeddable widgets.
|
|||||||
* https://github.com/javascript-obfuscator/webpack-obfuscator
|
* https://github.com/javascript-obfuscator/webpack-obfuscator
|
||||||
* https://github.com/tsileo/embedded-js-widget
|
* https://github.com/tsileo/embedded-js-widget
|
||||||
* https://thomassileo.name/blog/2014/03/27/building-an-embeddable-javascript-widget-third-party-javascript/
|
* 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
|
|
||||||
|
@ -4,6 +4,7 @@
|
|||||||
"description": "building an embeddable js widget with react",
|
"description": "building an embeddable js widget with react",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
"build": "webpack",
|
||||||
"start": "webpack-serve --config ./webpack.config.js --mode development --open",
|
"start": "webpack-serve --config ./webpack.config.js --mode development --open",
|
||||||
"test": "jest"
|
"test": "jest"
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user