Support transpiler options in URL hash

[codewithmichael]

Purpose

Commonly used transpiler options, like es2015 and react require updating the Babel config. For such a common use case, though, it would make sense to have these functions more immediately available.

Proposal

Since the script tag's src URL hash is already parsed using document.currentScript, additional options could easily be loaded there. A common scheme is to use semicolons (;) as option dividers and commas (,) as inter-group dividers.

I propose something like this:

<script src="bbh.js#presets=es2015,react;plugins=;+minify"></script>

As in the above example, an equal sign can be used for assignment, and a plus (+) or minus (-) could be used to set boolean options, though minify=true might be more explicit.

Caveats

This doesn't handle loading the required libs to make React work. See #10 for a potential solution.

[codewithmichael]

This would go well with #3 and #10, as both are commonly used options that probably deserve their own hash values—i.e. #react and #firebug

[codewithmichael]

I'm currently planning on adding the following hash options, semi-colon (;) separated:

• react
• firebug
• minify and minify=<boolean>
• presets=<comma separated strings>
• plugins=<comma separated strings>

I will be basing this on the issue3-depends-issue10 branch (PR #21), as issues #3 and #10 are both part of this milestone and this issue involves enabling functionality from both of them.

The majority of the code shouldn't conflict with the other PRs though, so if one of them gets removed the rebase/cherry-pick shouldn't be too bad.

[codewithmichael]

I'm changing this up from the proposal in a couple of ways.

• Replacing semi-colon (;) with pipe (|) as a delimiter. It reads better and is more like the common C flag syntax.
• Avoiding the +/- syntax entirely. Instead, going with the standard HTML attribute notation concept —attribute value is true if value is not assigned via equals.

Values will be interpreted as strings with the following exceptions for values assigned via equals (=):

• "true" will become true
• "false" will become false
• comma-separated values will become an array of trimmed strings

Flags will be processed in sequence, so they can override each other, and sometimes conflist with precedence—example:

<script src="bbh.js#firebug|minify|react|presets=es2015|minify=false"></script>

In the above example, firebug is the only flag that will end up applying, because react will add the "react" preset to babelConfig, but then preset=es2015 will override it, and minify will get set to true, but then minify=false will disable it.

[codewithmichael]

It turns out Babel uses minified instead of minify in their config. I'm going to accept both in the hash, since it's just a switch statement anyway, and minify is far more common nomenclature.

[codewithmichael]

PR #22 resolves this issue. Marking in review.