From f71c2beb3b6c15eef1c343e75a9d49674043c09c Mon Sep 17 00:00:00 2001 From: Hamza Alalach Date: Sun, 12 Apr 2020 19:26:40 +0100 Subject: [PATCH] Add iife command | improve importing behavior --- README.md | 20 +++++++++++++++----- example/partThree.js | 2 +- jscomps.js | 42 ++++++++++++++++++++++++++++++++---------- package-lock.json | 26 ++++++++++++++++++++++++++ 4 files changed, 74 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 5f77294..e520a8a 100644 --- a/README.md +++ b/README.md @@ -9,11 +9,10 @@ [![Build Status](https://travis-ci.org/hamzaalalach/jscomps.svg?branch=master)](https://travis-ci.org/hamzaalalach/jscomps) ![NPM](https://img.shields.io/npm/l/jscomps) ![npm](https://img.shields.io/npm/v/jscomps) ![GitHub last commit](https://img.shields.io/github/last-commit/hamzaalalach/jscomps) -![GitHub stars](https://img.shields.io/github/stars/hamzaalalach/jscomps?style=social) ## 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 automaticaly 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.](#examples)

+ 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.](#examples)

## Install @@ -25,6 +24,11 @@ npm install jscomps -g ```bash yarn add jscomps ``` +
+ +## Recent changes + - New command: --iife, wraps the entire output code in a IIFE, default value: false. 🆕 + - Logging improved: Mention which file triggered the change. 📝
@@ -38,11 +42,12 @@ yarn add jscomps ```text - -f Component folder to watch. [string] [required] + -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] @@ -79,7 +84,7 @@ The import file, which is dashboard.js by default, should look like this: import "nav"; import "sideBar"; ``` -We can now watch for changes and automatically concat our component pieces running the following command: +We can now watch for changes and automatically concatenate our component pieces running the following command: ```bash jscomps -f js/dashboard -m false ``` @@ -105,13 +110,18 @@ 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: +```bash + jscomps -f js/dashboard --iife true +``` + The best way to use JSComps is to add it to your package.json file like this: ```json "scripts": { "jscomps:dashboard": "jscomps -f public/js/dashboard" } ``` -Then your run it easily like this: ` npm run jscomps:dashboard `

+Then you simply run: ` npm run jscomps:dashboard `

## Versioning diff --git a/example/partThree.js b/example/partThree.js index 4fbe953..4193444 100644 --- a/example/partThree.js +++ b/example/partThree.js @@ -1 +1 @@ -console.log("It's me! I'm part three of your beautiful component."); +console.log("It's me! I'm part three of your beautiful component."); \ No newline at end of file diff --git a/jscomps.js b/jscomps.js index 2705ad9..6d1271a 100755 --- a/jscomps.js +++ b/jscomps.js @@ -8,7 +8,7 @@ const fs = require('fs'), .usage('Usage: $0 [options]') .options({ 'f': { - describe: 'Component folder to watch.', + describe: 'Component folder.', type: 'string', demandeOption: true, nargs: 1 @@ -38,9 +38,16 @@ const fs = require('fs'), boolean: true, demandeOption: false, nargs: 1 + }, + 'iife': { + describe: 'Wrap the result in an IIFE.', + default: false, + boolean: true, + demandeOption: false, + nargs: 1 } }) - .demandOption(['f'], "Please provide a folder to watch.") + .demandOption(['f'], "Please provide an folder file.") .example('$0 -f example') .example('$0 -f example -m false -w false -o exampleoutput.js') .alias('h', 'help') @@ -80,32 +87,46 @@ const setup = (folderName) => { } const startAndWatch = folderPath => { - fs.watch(folderPath, function(event) { + fs.watch(folderPath, function(event, filename) { if (event === 'change') { if (fsWait) return; fsWait = setTimeout(() => { fsWait = false; }, 1000); } - start(); + start(filename); }); } -const start = () => { +const start = (filename) => { let result; if (argv.m) { - result = uglifyjs.minify((require('import')(inputPath)), {compress: true}).code; - if (result.error) console.log(result.error); + minifyOutput = uglifyjs.minify((require('import')(inputPath)), {compress: true}); + result = minifyOutput.code; + if (minifyOutput.error) { + console.log(minifyOutput.error); + console.log(chalk.red("Minification error detected, waiting for changes...")); + return; + } } else { result = require('import')(inputPath); } + if (argv.iife) { + let iifeStart = '(function() {'; + if (!argv.m) { + iifeStart += '\n'; + } + result = iifeStart + result + '})();'; + } fs.writeFile(outputPath, result, function(err) { if (err) throw err; - console.log("Files imported."); + filename ? console.log(filename + ' changed: ' + chalk.green("Files imported.")) + : console.log("Files imported."); }); } -setup().then(() => { +setup() +.then(() => { if (argv.w) { console.log(chalk.green('Watching folder: ' + chalk.white(argv.f))); console.log(chalk.green('Waiting for changes...')); @@ -113,4 +134,5 @@ setup().then(() => { } else { start(); } -}).catch(() => console.log(chalk.red("Not a valid watch folder."))); \ No newline at end of file +}) +.catch(() => console.log(chalk.red("Not a valid watch folder."))); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 44af8f4..6facbbb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1084,6 +1084,16 @@ "tweetnacl": "^0.14.3" } }, + "bindings": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", + "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", + "dev": true, + "optional": true, + "requires": { + "file-uri-to-path": "1.0.0" + } + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -1818,6 +1828,13 @@ "bser": "2.1.1" } }, + "file-uri-to-path": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", + "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", + "dev": true, + "optional": true + }, "fill-range": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz", @@ -1895,6 +1912,8 @@ "dev": true, "optional": true, "requires": { + "bindings": "^1.5.0", + "nan": "^2.12.1", "node-pre-gyp": "*" }, "dependencies": { @@ -4576,6 +4595,13 @@ "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", "dev": true }, + "nan": { + "version": "2.14.0", + "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz", + "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==", + "dev": true, + "optional": true + }, "nanomatch": { "version": "1.2.13", "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",