adding docs

This commit is contained in:
Benjamin Boudreau 2018-06-03 11:15:23 -04:00
parent c99f06b5a4
commit f54226a325
2 changed files with 50 additions and 19 deletions

View File

@ -6,10 +6,6 @@
Easy creation of an embeddable widget.
## Goal
The create-react-app of embeddable widgets.
## Features
* 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)
* User theming of widget
* 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
* Configurable with code
* Themable
### Install dependencies
## Why not in an iframe?
```sh
$ npm install
```
* 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
### Start the development server
```sh
$ npm start
... server running at http://localhost:8080/
```
### Run tests
```
$ npm test
... test output
```
### Production build
```
$ npm run build
... create files in /dist
```
## Roadmap
@ -37,6 +49,8 @@ The create-react-app of embeddable widgets.
- [x] React widget (widget builder)
- [x] Webpack changed to output a library
- [x] Add tests
- [x] Add circleci integration
- [x] Add codecov integration for codecoverage
- [x] Production Build
- [x] Minified
- [x] Add greenkeeper
@ -46,7 +60,28 @@ The create-react-app of embeddable widgets.
- [ ] Theming support
- [ ] 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/krasimir/third-party-react-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/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

View File

@ -4,6 +4,7 @@
"description": "building an embeddable js widget with react",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-serve --config ./webpack.config.js --mode development --open",
"test": "jest"
},