JSComps

JSComps is a lightweight CLI solution to enable components support on Vanilla JS.

Description

JSComps helps you chunk Vanilla JS into small and scalable components. It takes a folder as input which works as the components container, it detects changes in it, if any made it'll automatically import all the parts into the minified output file. By default, the imports should be contained in the provided folder under the same name, and the output looks like this: providedfoldername.min.js. See examples below.

Install

npm install jscomps -g

yarn add jscomps

Recent changes

• Outputting result code strange behavior fixed.
• Performence improved.

Usage

jscomps [options]

Please make sure it's installed globally.

Options

 
  -f             Component folder.                                 [string] [required]
  -w             Watch a directory for changes.              [boolean] [default: true]
  -o             Custom output file path.                                     [string]
  -i             Custom input file path.                                      [string]
  -m             Minify and compress output file.            [boolean] [default: true]
  --iife         Wrap output code in an IIFE.               [boolean] [default: false]
  -h, --help     Show help.                                                  [boolean]
  -v, --version  Show version number.                                        [boolean]
  

Examples

Consider we are in the following folder:

 js/
 └── dashboard/
    ├── dashboard.js
    ├── header.js
    ├── nav.js
    └── sideBar.js

Each of the files has the following content:

• header.js:

 console.log("Header script is running...");

• nav.js:

 console.log("Nav script is running...");

• sideBar.js:

 console.log("Sidebar script is running...");

The import file, which is dashboard.js by default, should look like this:

 import "header";
 import "nav";
 import "sideBar";

We can now watch for changes and automatically concatenate our component pieces running the following command:

 jscomps -f js/dashboard -m false

Making any change to the 3 pieces of our component will trigger the output file to be generated dashboard.min.js in the dashboard folder, containing the following code:

 console.log("Header script is running...");
 console.log("Nav script is running...");
 console.log("Sidebar script is running...");

To compress the output code simply remove the -m parameter as it is by default set to true:

 jscomps -f js/dashboard

We can stop watching for changes and use the command only once:

 jscomps -f js/dashboard -w false

To provide a custom input and/or output file path, use the -o and -i commands:

 jscomps -f js/dashboard -i js/dashboard/index.js -o js/dashboard.js

If you like to wrap the output code in an IIFE, use --iife command:

 jscomps -f js/dashboard --iife true

The best way to use JSComps is to add it to your package.json file like this:

  "scripts": {
    "jscomps:dashboard": "jscomps -f public/js/dashboard"
  }

Then you simply run: npm run jscomps:dashboard

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

License

This project is licensed under the MIT License. See the LICENSE.md file for details.