Skip to content

Commit

Permalink
fix(umd): fix the UMD bundle export names so they don't conflict and …
Browse files Browse the repository at this point in the history
…overwrite each other (#318)

Importing multiple UMD bundles into the same page was causing the global Ix object to be replaced
each time, rather than augmented. Exporting them to distinct global objects based on the file name
causes them not to conflict.
  • Loading branch information
trxcllnt authored Jan 26, 2021
1 parent 8893e2c commit c45eaa8
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 7 deletions.
13 changes: 7 additions & 6 deletions gulp/closure-task.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const {
targetDir,
mainExport,
esmRequire,
getUMDExportName,
gCCLanguageNames,
observableFromStreams,
shouldRunInChildProcess,
Expand Down Expand Up @@ -58,7 +59,7 @@ const closureTask = ((cache) => memoizeTask(cache, async function closure(target
const externsPath = path.join(out, `${entry}.externs.js`);

await Promise.all([
fs.promises.writeFile(entry_point, generateUMDExportAssignnent(entry)),
fs.promises.writeFile(entry_point, generateUMDExportAssignment(entry)),
fs.promises.writeFile(externsPath, generateExternsFile(path.resolve(`${src}/${entry}.js`)))
]);

Expand All @@ -73,15 +74,15 @@ const closureTask = ((cache) => memoizeTask(cache, async function closure(target
`${src}/**/*.js` /* <-- then sources globs */
], { base: `./` }),
sourcemaps.init(),
closureCompiler(createClosureArgs(entry_point, entry, externsPath)),
closureCompiler(createClosureArgs(entry_point, entry, externsPath, getUMDExportName(entry))),
// rename the sourcemaps from *.js.map files to *.min.js.map
sourcemaps.write(`.`, { mapFile: (mapPath) => mapPath.replace(`.js.map`, `.${target}.min.js.map`) }),
gulp.dest(out)
).toPromise();
}
}))({});

const createClosureArgs = (entry_point, output, externs) => ({
const createClosureArgs = (entry_point, output, externs, libraryName) => ({
externs,
entry_point,
third_party: true,
Expand All @@ -100,15 +101,15 @@ const createClosureArgs = (entry_point, output, externs) => ({
language_out: gCCLanguageNames[`esnext`],
output_wrapper: `(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(factory(global.Ix = global.Ix || {}));
typeof define === 'function' && define.amd ? define(['${libraryName}'], factory) :
(factory(global.${libraryName} = global.${libraryName} || {}));
}(this, (function (exports) {%output%}.bind(this))));`
});

module.exports = closureTask;
module.exports.closureTask = closureTask;

function generateUMDExportAssignnent(entry) {
function generateUMDExportAssignment(entry) {
return [`
import { __await } from 'tslib';
__await.prototype[Symbol.toStringTag] = '__await';
Expand Down
5 changes: 5 additions & 0 deletions gulp/minify-task.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
const {
targetDir,
mainExport,
getUMDExportName,
UMDSourceTargets,
terserLanguageNames,
shouldRunInChildProcess,
Expand Down Expand Up @@ -57,6 +58,10 @@ const minifyTask = ((cache, commonConfig) => memoizeTask(cache, function minifyJ
].map((entry) => ({
...targetConfig,
name: entry,
output: {
...targetConfig.output,
library: getUMDExportName(entry)
},
entry: { [entry]: path.resolve(`${src}/${entry}.js`) },
plugins: [
...(targetConfig.plugins || []),
Expand Down
8 changes: 7 additions & 1 deletion gulp/util.js
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,12 @@ const esmRequire = require(`esm`)(module, {
}
});

const getUMDExportName = (umdEntryFileName) => umdEntryFileName
.split('.')
.filter((x) => x != 'dom')
.map((x) => x[0].toUpperCase() + x.slice(1))
.join('');

module.exports = {

mainExport, npmPkgName, npmOrgName, metadataFiles, packageJSONFields,
Expand All @@ -224,5 +230,5 @@ module.exports = {
gCCLanguageNames, UMDSourceTargets, terserLanguageNames,

taskName, packageName, tsconfigName, targetDir, combinations, observableFromStreams,
ESKeywords, esmRequire, shouldRunInChildProcess, spawnGulpCommandInChildProcess
ESKeywords, esmRequire, shouldRunInChildProcess, spawnGulpCommandInChildProcess, getUMDExportName
};

0 comments on commit c45eaa8

Please sign in to comment.