Inline Modules in HTML

INFO.md

Inline modules

Why?

Recently I have found myself using various methods to inline modules for various reasons. I usually would embeded a data url but found that it wasn't flexible enough. So this is what I came up with.

Code

window.inlineModules = {};

const inlineModules = document.querySelectorAll("script[type='text/javascript+inlineModule']");

inlineModules.forEach(module => {
    window.inlineModules[module.getAttribute("data-fileName")] = 
        URL.createObjectURL(
            new Blob(
                [ module.innerText ],
                {
                    type: "application/javascript"
                }
            )
        );
});

Usage

<script type="text/javascript+inlineModule" data-fileName="greet.js">
function greet(name, greeting = "Hello") {
    return `${greeting} ${name}!`;
}

export default greet;
</script>

Example

<script type="module">
const greet = await import(window.inlineModules["greet.js"]);

const name = prompt("What Is Your Name?");

alert(greet(name));
</script>