jet-js-plugin-boilerplate
This plugin should provide a boilerplate for jet-js plugin developers. But even if this is only an example and a starting point. You can install it and try it out. If the boilerplate plugin gets executed, it prints a nice message to your dev console.
Generally
Installing via npm
$ npm install jet-js-plugin-boilerplate --save
Usage
<!-- ... --> <!-- execute boilerplate plugin without any options --> <!-- custom option --> <!-- don't forget to include jet-js script and boilerplate plugin at the bottom --> Options
| name | description |
|---|---|
say |
defines the String, that should be printed to the console |
Browser Support
Simple but great solution: https://github.com/godban/browsers-support-badges
 IE / Edge |
 Firefox |
 Chrome |
 Safari |
 Opera |
 iOS Safari |
 Chrome for Android |
|---|---|---|---|---|---|---|
| IE11, Edge | last 10 versions | last 10 versions | last 3 versions | last 2 versions | last 2 versions | last 2 versions |
Plugins should try to support the same Browser Matrix like Jet.js
- Internet Explorer >=
IE 11 - Safari >=
Safari 9
If this is not possible, here is the best place to document why some Browsers are not supported.
Are there any polyfills available to make it work on older Browsers?
As an example you can look at Jet.js Browser Matrix. Some older Browsers aren't supported because they have no support for the dataset API. But please let the Users of your Plugin choose if they wish to include polyfills. Don't include them by default.
Borwser Matrix based on your e2e tests
Use SauceLabs tests, like jet.js iteself to provide a BrowserMAtrix based on your e2e tests:
Advanced
File structure
The boilerplate plugins provide two source files: src/boilerplate.js and src/index.js. These are not necessarily needed. But these structure is considered a best practice. Because so other developer can import your plugin and register it under a different name or reuse in its own plugin. If a project uses hundreds of plugins there can be naming conflicts und with that structure it is easy to work around these conflicts.
Code Style
Jet.js itself uses Standard.js and so this boilerplate will use it too. Give it a try.
Testing
Two types of tests are provided: unit and e2e. Unit tests are executed via Jest. Unit tests can be executed on the cli and Jest also provides code coverage stats. e2e tests run directly in the browser and they are implemented with Mocha. Chai.js is used or assertions and sinon.js for mocks. To run CrossBrowser Tests, these tests should be executed on SauceLabs. To speed things up locally, we're using the new headless chrome. To choose the right Browser Engine, Karma is the tool of our choice.
Build
Source Code will be compiled with babel und bundled with Rollup.
CI Build
To check your file size on every PullRequest we are using bundlesize. See documentation for CI Setup and GitHub integration: https://github.com/siddharthkp/bundlesize
Codecoverage will be reported to Codeclimate. add the CODECLIMATE_REPO_TOKEN Environment variable to CircleCI. You find them as TEST REPORTER ID under your Projects Test Coverage Menu inside codeclimate.
Add the NPM_TOKEN Environment variable to CircleCI. So your plugin can be published on npm if the build runs on the master branch.
CLI Commands
# execute unit tests $ npm run test:unit # execute e2e tests $ npm run test:e2e # check coding style $ npm run test:codestyle# fix code syle $ npm run fix:codestyle # run all three tests at one (codestyle, unit, e2e) $ npm run test # build your plugin $ npm run build # build and watch for changes $ npm run dev # remove files from build process $ npm run clean # TODO: publish to npm and create a GitHub release from it. About
Why this Plugin?
We have created this boilerplate plugin to make it as easy as possible for developers to create high quality Jet.js plugins. If you're missing something, please ask us on GitHub or on Twitter.
Contribute
Contributions are welcome. Check our contribution guide (link here) for further information. Any help is appreciated. Here is how you can help us:
- General Feedback (Feel free to open up a GitHub Issue)
- Bug reports as GitHub Issues
- Improve Documentation
- Contribute Code. Create a PR.
Author
See also the list of contributors who participated in this project.
License
This Plugin is licensed under the Apache License 2.0.