dumd
v1.0.3
Published
tiny async umd resolution
Readme
dumd
dumd helps ensure that a set of umd/amd javascripts execute in proper order. It doesn’t have the overhead of a full featured amd loader or the sophistication of webpack loader or systemjs, but if all you want to do is use async script tags with umd bundles, this may help.
As a result it can be tiny, about 600 bytes (about 370B gzipped)
And you can do something like the following:
<!DOCTYPE html>
<html>
<head></head>
<body>
<script type="text/javascript">
/* dumd snippet goes here to ensure that everything instantiates in order */
</script>
<script async="true" type="text/javascript" src="b-needs-a.js"></script>
<script async="true" type="text/javascript" src="c-needs-a-and-b.js"></script>
<script async="true" type="text/javascript" src="a.js"></script>
</body>
</html>why
Sometimes you know exactly what modules you want on a page, and all you want is for them to load asynchronously and instantiate in the correct order. If none of them are inline, you can sort of achieve this with defered attributes. However, there are many reports of inconsistancies with how defered scripts are handled (especially if some are inline).
what it does
dumd creates a global define function that pretends to be an amd loader. It then waits for any umd or amd scripts to load on the page and only executes them if and when all their dependencies are also loaded. It’s a bit like require but with a much more minimal feature set.
See a live example (tip: hard refresh the page to see the effect of async scripts in the network tab)
known caveats
Of the magic modules, only exports is supported because it is used so extensively in packages bundled by babel. If I run into the other two I will attempt to support them.
Circular dependencies are not tested and are likely to fail.
This does not help with loading modules dynamically.
usage
The dumd snippet should be injected into your page as an inline script. To make this easy,
you can require dumd in node and it will export a string with the mangled javascript.
const dumdSnippet = require('dumd')
console.log(`<script>${dumdSnippet}</script>`)what about umd bundles without ids
Many third party components or builds either do not include an amd module id in their build, or they define a strange id that does not relate to their npm package name.
To help with this dumd provides a tool that can take a string of code and inject ids into any umd modules it finds if they are not there or replacing them if they are.
You can use it like so:
const defineIds = require('umd/tools/defineIds')
defineIds(code, ids)Where code is a string and ids is either a single id or a list of ids to be used in order.
So for example:
const defineIds = require('umd/tools/defineIds')
// given some code
const someCode = `
// simplified react bundle
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.React = factory());
}(this, (function () {
})));
// simplified react-dom bundle
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
typeof define === 'function' && define.amd ? define(['react'], factory) :
(global.ReactDOM = factory(global.React));
}(this, (function (React) {
})));
`
const codeWithIds = defineIds(someCode, ['react', 'react-dom'])
expect(codeWithIds).toEqual(`
// simplified react bundle
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define('react', factory) :
(global.React = factory());
}(this, (function () {
})));
// simplified react-dom bundle
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
typeof define === 'function' && define.amd ? define('react-dom', ['react'], factory) :
(global.ReactDOM = factory(global.React));
}(this, (function (React) {
})));
`)