Skip to content

Commit

Permalink
Make moment optional from our UMD builds
Browse files Browse the repository at this point in the history
Create a rollup plugin altering the UMD header to wrap optional dependencies between try/catch, which allows to load moment only when the dependency is installed.

Since AMD loaders are asynchronous, `'moment'` needs to be explicitly loaded before 'chart.js' so when 'chart.js' requires moment, it's already loaded and returns synchronously (at least with requirejs).
  • Loading branch information
simonbrunel committed Jan 11, 2019
1 parent 8a3eb85 commit 29e54d8
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 1 deletion.
9 changes: 8 additions & 1 deletion rollup.config.js
Expand Up @@ -3,6 +3,7 @@
const commonjs = require('rollup-plugin-commonjs');
const resolve = require('rollup-plugin-node-resolve');
const terser = require('rollup-plugin-terser').terser;
const optional = require('./rollup.plugins').optional;
const pkg = require('./package.json');

const input = 'src/chart.js';
Expand All @@ -21,7 +22,10 @@ module.exports = [
input: input,
plugins: [
resolve(),
commonjs()
commonjs(),
optional({
include: ['moment']
})
],
output: {
name: 'Chart',
Expand All @@ -42,6 +46,9 @@ module.exports = [
plugins: [
resolve(),
commonjs(),
optional({
include: ['moment']
}),
terser({
output: {
preamble: banner
Expand Down
61 changes: 61 additions & 0 deletions rollup.plugins.js
@@ -0,0 +1,61 @@
/* eslint-env es6 */

const UMD_WRAPPER_RE = /(\(function \(global, factory\) \{)((?:\s.*?)*)(\}\(this,)/;
const CJS_FACTORY_RE = /(module.exports = )(factory\(.*?\))( :)/;
const AMD_FACTORY_RE = /(define\()(.*?, factory)(\) :)/;

function optional(config = {}) {
return {
name: 'optional',
renderChunk(code, chunk, options) {
if (options.format !== 'umd') {
this.error('only UMD format is currently supported');
}

const wrapper = UMD_WRAPPER_RE.exec(code);
const include = config.include;
if (!wrapper) {
this.error('failed to parse the UMD wrapper');
}

let content = wrapper[2];
let factory = (CJS_FACTORY_RE.exec(content) || [])[2];
let updated = false;

for (let lib of chunk.imports) {
if (!include || include.indexOf(lib) !== -1) {
const regex = new RegExp(`require\\('${lib}'\\)`);
if (!regex.test(factory)) {
this.error(`failed to parse the CJS require for ${lib}`);
}

// We need to write inline try / catch with explicit require
// in order to enable statical extraction of dependencies:
// try { return require('moment'); } catch(e) {}
const loader = `function() { try { return require('${lib}'); } catch(e) { } }()`;
factory = factory.replace(regex, loader);
updated = true;
}
}

if (!updated) {
return;
}

// Replace the CJS factory by our updated one.
content = content.replace(CJS_FACTORY_RE, `$1${factory}$3`);

// Replace the AMD factory by our updated one: we need to use the
// following AMD form in order to be able to try/catch require:
// define(['require'], function(require) { ... require(...); ... })
// https://github.com/amdjs/amdjs-api/wiki/AMD#using-require-and-exports
content = content.replace(AMD_FACTORY_RE, `$1['require'], function(require) { return ${factory}; }$3`);

return code.replace(UMD_WRAPPER_RE, `$1${content}$3`);
}
};
}

module.exports = {
optional
};

0 comments on commit 29e54d8

Please sign in to comment.