Get started with Jet.js development

Installation

The NPM Registry is used to publish Jet.js. You can use NPM or other compatible tools that work with the public NPM Registry. You should bundle all your plugins together with Jet.js and self host it. This is needed to mitigate the Cross-Browser-Problems when using WebWorkers.

Install the main library:

$ npm install --save @jetjs/jetjs

Install the WebWorker:

$ npm install --save @jetjs/jetjs-worker

Usage with Rollup

First of all you should take care of the WebWorker implementation. This is provided by the @jetjs/jetjs-worker package. You can just copy the file @jetjs/jetjs-worker/dist/jetjs-worker.min.js to your webserver. It is important to host that script on the same domain as your site, which uses Jet.js. This is because browsers don't allow to load Webworkers from different origins.

Next you have to create your main entry point, say index.ts. We import the @jetjs/jetjs package and initialize the library with the path, to our previously copied Webworker implementation.

import jetjs from "@jetjs/jetjs";

jetjs.init({
  threadPoolWorkerSrc: "/js/jetjs-worker.min.js"
});

// plugins ...

// search for plugin definitions and execute the plugins
jetjs.searchAndRun(document.body);

To build a single file, that contain Jet.js itself and our custom code, we will use Rollup. Head over to its documentation to learn more about that awesome bundler. But to get started, you can install the needed packages und use the following configuration as a starting point:

// install the following packages via npm first and don't forget to install rollup itself:
// npm i -D rollup

import typescript from 'rollup-plugin-typescript2';
import uglify from 'rollup-plugin-uglify-es';
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';

export default {
  input: 'src/index.ts',
  output: {
    file: './_site/js/main.min.js',
    name: 'jetjs',
    format: 'iife',
    sourcemap: true,
    sourcemapFile: './_site/js/main.min.js.map'
  },
  plugins: [
    typescript({
      // use our local version of typescript
      typescript: require('typescript'),
      tsconfig: './tsconfig.json',
    }),
    resolve({
      // use "main" field or index.js, even if it's not an ES6 module
      // (needs to be converted from CommonJS to ES6
      // – see https://github.com/rollup/rollup-plugin-commonjs
      main: true,

      // whether to prefer built-in modules (e.g. `fs`, `path`) or
      // local ones with the same names
      preferBuiltins: false,  // Default: true

      // Set to an array of strings and/or regexps to lock the module search
      // to modules that match at least one entry. Modules not matching any
      // entry will be marked as external
      only: [/^@jetjs\/.*$/],
    }),
    commonjs({
      // if true then uses of `global` won't be dealt with by this plugin
      ignoreGlobal: true,  // Default: false
    }),
    uglify(),
    filesize(),
  ]
};

Save the configuration as rollup.config.js and execute it with rollup --config rollup.config.js. This will generate your bundle - ready to use on your site. Include it in the html head not at the end of the body (but you even can if you wish). We include it at the top and use async and defer to get the best performance: Early loading but deferred execution, if the browser has time for it.

<!doctype html>
<html lang="en">
  <head>
    <title>Your amazing fast site</title>
    <script src="/js/main.min.js" async defer></script>
    <!-- load css afterwards -->
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

Make sure you're loading css after the javascript, so the script can be loaded while the browser parses the CSS, otherwise it blocks until CSS parsing is done and start loading js afterwards.

Add your first plugin

We have setup jet.js on our site. But it does nothing. This is because there is nothing it can execute. We have to register a plugin first. We add the following to our index.ts file and don't forget to rebuild your bundle after adding it:

jetjs.registerPlugin("helloWorld", (ele: HTMLElement) => {
  ele.addEventListener("click", () => {
    alert("Hello World");
  });
});

To use our plugin, we add the plugin to an element on our site:

<button data-plugins="helloWorld">click me</button>

Test it yourself:

To learn more about Plugin Development, read our guide about it. To start even faster, try to use existing plugins. Search for jetjs-plugin on https://npmjs.com.