jet-js-plugin-boilerplate

0.0.3 • Public • Published

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.

CircleCI Test Coverage npm version

Generally

Installing via npm

$ npm install jet-js-plugin-boilerplate --save

Usage

<!doctype html>
<html>
    <!-- ... -->
    <body>
        <!-- execute boilerplate plugin without any options -->
        <div data-jetjs-plugin="boilerplate">
                
        <!-- custom option -->
        <div data-jetjs-plugin="boilerplate" data-jetjs-boilerplate-say="Hello from Boilerplate Plugin!">
 
        <!-- don't forget to include jet-js script and boilerplate plugin at the bottom -->
    </body>
</html>

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
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
iOS Safari
iOS Safari
Chrome for Android
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: Sauce Test Status

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

JavaScript Style Guide

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.

Readme

Keywords

Package Sidebar

Install

npm i jet-js-plugin-boilerplate

Weekly Downloads

0

Version

0.0.3

License

Apache-2.0

Last publish

Collaborators

  • bartels