@style.tools/async-css-iife

IIFE generator for Async CSS Loader

This repository contains a Node.js IIFE generator for async-css (async CSS loader).

New: online IIFE generator

IIFE (Immediately-invoked Function Expressions) is a coding pattern for loading a script. An IIFE can be used in the browser safely.

The advantage of using an IIFE is that it adds a Google Closure Compiler optimization layer over the concatenated modules which improves the compression.

The IIFE generator is a simple Node.js program that can be used as a Node.js module or that can be executed as a CLI program from the command-line.

Install

npm install @style.tools/async-css-iife

Usage

You can use the generator from the command-line (CLI, SSH, shell) or as a Node.js module (e.g. in a Express app).

CLI

The provided iife-cli.js script can be used from the command-line. For easy usage, the NPM package contains a pre-configured npm run iife script. To use the NPM CLI command you need to navigate to the module directory:

cd node_modules/@style.tools/async-css-iife/

Examples

Display usage information and a list with available modules.

npm run iife -- --help

The following command shows how to create an IIFE with unary format, output to path/to/iife.js and with 3 modules that automatically load the required dependencies.

npm run iife --  --format unary --compress --output path/to/iife.js --modules css-loader,localstorage,timing

You can also use short flags as shown in the following example that includes debug sources and a space-separated module list instead of a comma separated list.

npm run iife --  -f unary -c -o path/to/iife.js -m "css-loader localstorage timing"

When omitting the --output flag, the script is printed so you could use > output.js.

Node.js module

// load Node.js module
const iife = require('@style.tools/async-css-iife');

// return script text for inlining
// uses memory-cache @link https://www.npmjs.com/package/memory-cache
iife.generate(['css-loader', 'timing'], {
   debug: true, // debug sources
   format: 'unary' // !function(){ ... }()
}).then(function(iife_script) {
	
   // iife_script contains the IIFE script text

});

// output to file
iife.generate(['css-loader', 'timing'], {
   compress: true, // Google Closure Compiler API compression
   format: 'wrap', // (function(){ ... })()
   output: 'path/to/iife.js',
   output_stats: true // return { modules:[], size:0, gzip_size:0 }
}).then(function(stats) {
	
   // iife.js written
   console.log(stats);

});

The Node.js IIFE generator is optmized for integration in a Node.js CMS however it depends on the free Google Closure Compiler API that may not be 100% reliable. When using the generator in production it may be best to use a local Google Closure Compiler service.

Generated IIFE's are cached in memory using memory-cache so that you can use the solution for real-time inlining, for example in a Express.js app.

An IIFE needs to be generated just once and remains valid until the Node.js app restarts (memory reset), when the module selection or settings are changed or until the async-css vesion is upgraded.

PHP

For a PHP solution, see the php-cms-connector PHP Composer library.