npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

jet-js-plugin-boilerplate

v0.0.3

Published

Boilerplate to get startet with Jet.js plugin development

Downloads

6

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

bartelsbartels

Keywords

jet-jsjet-js-plugin

Readme

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 | 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: 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.