0.1.1 • Published 8 years ago

macrojs-loader v0.1.1

Weekly downloads
6
License
MIT
Repository
github
Last release
8 years ago

MacroJS Loader

Customizable macro preprocessor with inlineable JS for webpack. Could be used for basically everything: JavaScript, CSS, HTML, etc.

Install

$ npm i macrojs-loader --save-dev

Usage

For common conditions, use it like this:

#if DEBUG
  console.log(inputData.detailedDebugDescription());
#elif PRODUCTION
  /* do nothing */
#else
  console.log(inputData.shortDescription());
#endif

In webpack configuration, add this module to preloaders or loaders:

preLoaders: [
  {
    test: /\.jsx?$/,
    loader: `macrojs-loader?defines=${path.join(__dirname, 'macros.json')}`
  }
]

And add a configuration json file (macros.json):

[ "DEBUG" ]

More examples

Defines in query:

/* webpack.config.js */
var production = process.env.NODE_ENV == 'prod';
…
loader: `macrojs-loader?mode=css&defines=${path.join(__dirname, 'macros.json')}&d:DEBUG=${!production}`,

Single-line usage (optional):

var debugMode = #if DEBUG# true #else# false #endif#;

HTML-files (use macrojs-loader?mode=html to change the mode):

<!DOCTYPE html>
<html>
<head>
  ^if DEBUG
    <title>Example (Debug)</title>
  ^else
    <title>Example</title>
  ^endif

  <!-- single-line usage (optional): -->
  ^if UTF8^ <meta charset="utf-8"> ^endif^

  <!-- ^if example^ comments/strings will be ignored ^endif^ -->
</head>
<body>
</body>
</html>

Complex conditions (basically, it’s just JavaScript):

var wasBuiltInMidnight = #if new Date().getHours() == 0# true #else# false #endif#;

Multiline conditions (works with curly braces):

var wasBuiltInMidnight = #if {
  var hours = new Date().getHours();
  return hours == 0
}# true #else# false #endif#;

And inlineable JavaScript:

var wasBuiltAt = #exec Date.now()#;

#exec {
  return `var listOfFilesNextToJsFile = ${JSON.stringify(fs.readdirSync(__dirname))};`
}

#exec fs.readdirSync(__dirname).filter(x => /incl_.+\.js/.test(x)).map(x => {
  var name = path.basename(x, '.js');
  return `var ${name} = require('./${name}');`
}).join('\n')

Also, you can change language-related params:

/* macrojs-custom-html.json */
{
  "macroPrefix": "&",
  "stringQuotes": [ "'", "\"" ],
  "singleLineComment": null,
  "multiLineComment": { start: "<!--", end: "-->" },
  "singleLine": false,
  "tabWidth": 0,
  "trimSingleLine": false
}
preLoaders: [
  {
    test: /\.html$/,
    loader: `macrojs-loader?defines=${path.join(__dirname, 'macros.json')}&config=${path.join(__dirname, 'macrojs-custom-html.json')}`
  }
]

License

MIT