Skip to content

Instantly share code, notes, and snippets.

@insin
Last active July 17, 2016 18:19
Show Gist options
  • Save insin/711862bb578735c54c294d24bfb024ef to your computer and use it in GitHub Desktop.
Save insin/711862bb578735c54c294d24bfb024ef to your computer and use it in GitHub Desktop.
nwb Babel options for configuring babel-plugin-transform-runtime and polyfilling

nwb babel options for transform-runtime/polyfilling

nwb is getting a new boolean runtime option which triggers use of babel-plugin-transform-runtime

I think it also needs a polyfill option to control polyfilling, as babel-plugin-transform-runtime is also related to polyfilling (see below)

(polyfill could also be used to automatically include babel-polyfill for apps when configured to do so)

babel-plugin-transform-runtime

Always:

  • Imports small helpers like _extend from babel-runtime instead of duplicating them in every module they're needed in

By default, with an option to turn off, it also:

  • Imports the regenerator runtime into the current module when async/await syntax is used.
  • Polyfills new built-ins like Promise, Set, Symbol and new static methods like Object.assign() locally rather than globally (suitable for libraries)

babel-polyfill

Polyfills new built-ins, static methods and instance methods globally and provides the regenerator runtime globally (suitable for apps)

Pseudocode

Goal: determine which preconfigured preset we should use from deduped-babel-presets given runtime and polyfill user config (and add new preset to it as necessary)

if runtime:
  # If polyfilling is not explicitly enabled, only import helpers and the
  # regenerator runtime as needed.
  runtime_preset = 'runtime-regenerator' 

  # We should require that polyfilling is explicitly enabled
  if polyfill == 'global:'
    # Only import helpers, as regenerator and polyfills will already be in
    # place via babel-polyfill
    runtime_preset = 'runtime-helpers' 
  elif polyfill == 'local':
    # Use all runtime transform features
    runtime_preset = 'runtime'

What if we also allow polyfill: true and change what it corresponds to based on whether we're building an app or a component? (You're never expected to switch between app types in the same project)

Too magical/confusing?

  • app: polyfill == true → 'global'
  • component/other npm module: polyfill == true -> 'local'

What if you want to publish a component which requires that users provide a suitable regenerator runtime - too much?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment