Examples

Basic usage

//#set _VAR2 = 1

//#if _VAR1
console.log('var1')
//#elif _VAR2
console.log('var2')
//#else
  //#error VAR1 and VAR2 missing.
//#endif

Simple Replacement

//#set _FOO 'foo'

let bar = '$_FOO'.toUpperCase();
let baz = { $_FOO: 'bar' };

console.log('$_FOO');
console.log(baz['$_FOO']);
console.log(baz.$_FOO);

Result:

let bar = 'foo'.toUpperCase();  // bar = 'FOO'
let baz = { foo: 'bar' };       // baz = { foo: 'bar' }

console.log('foo');             // outputs 'foo'
console.log(baz['foo']);        // outputs 'bar'
console.log(baz.foo);           // outputs 'bar'

Object and Properties

//#set _OBJ { prop: 1 }
console.log($_OBJ.prop);
console.log($_OBJ);
console.log($_OBJ.foo);

Result:

console.log(1);                   // outputs 1
console.log({"prop":1});          // outputs "[Object object]"?
console.log({"prop":1}.foo);      // outputs undefined

Making your linter happy

//#set _NUM 10
//#set _STR 'foo'
//#if 0
const $_NUM = 10
const $_STR = 'foo'
//#endif
let n = $_NUM
let s = '$_STR'

Result:

let n = 10
let s = 'foo'

Performance gains

Now, assume you have a global file src/_types.js:

// src/_types.js
export default {
  TAG: 1,
  TEXT: 3
  COMMENT: 8
};

...this fragment is in your yat-amazing-parser:

//#set _DATE = new Date().toISOString().slice(0, 10)
/*
  yat-amazing-parser v$_VERSION
  File: $_FILE
  Date: $_DATE
*/
//#if !_TAG
// fallback to import _types.js
import $_T from './_types';
//#endif

// ...amazing code...

function parse () {
  switch (this.type) {
    case $_T.TAG: this.parseTag();
      break;
    case $_T.TEXT: this.parseText();
      break;
    case $_T.COMMENT: this.parseComment();
      break;
  }
}

...and this is your rollup config:

// rollup.config.js
import jscc from 'rollup-plugin-jscc';
import types from 'src/_types';

const version = require('./package.json').version

export default {
  entry: 'src/parser.js',
  plugins: [
    jscc({ values: { _VERSION: version, _T: types } })
  ]
};

then you make the hard part...

rollup -c -o dist/parser.js

now, as a result of your efforts you've won this clean, beautiful and performant code:

/*
  yat-amazing-parser v1.0
  File: src/parser.js
  Date: 2016-09-23
*/

// ...amazing code...

function parse () {
  switch (this.type) {
    case 1: this.parseTag();
      break;
    case 3: this.parseText();
      break;
    case 8: this.parseComment();
      break;
  }
}

Hidden Blocks

ES6 imports can't be declared conditionally, but with JSCC is possible!...

//#if process.env.BROWSER
import mylib from 'browser-lib';
//#else
import mylib from 'node-lib';
//#endif

mylib.doSomething();

...Ops! this code generate issues with linters and syntax highlighters, but using jscc comments you can rewrite your code like this:

/*#if process.env.BROWSER
import mylib from 'browser-lib';
//#else // */
import mylib from 'node-lib';
//#endif

mylib.doSomething();

Result:

import mylib from 'browser-lib';

mylib.doSomething();

If "BROWSER" is defined in the node.js environment... and yes, process.env is accesible to the expression.

Hidding Debug Output

This is a nice trick:

//#set _DEBUG 0

/*#if _DEBUG
//#set _DEBUGOUT 'debugout'
function debugout (s) {
  console.log('DEBUG: %s', s);
}
//#else
//#set _DEBUGOUT '//'
//#endif // */

$_DEBUGOUT('Ops!');

Result:

//('Ops!');