Allow importing and exporting from inline module scripts #11202
Description
What problem are you trying to solve?
This feature has been discussed over the years as a part of the HTML Modules efforts, but I think that it's relevant and useful standalone.
The feature request is to be able to export values in an inline module script, and import them from another inline module script.
The use cases for this include things like "blocks"-based documents (computational notebooks like ObservableHQ or the Blocks Protocol) that interleave UI elements with scripts. Later scripts need access to data from previous scripts. Currently these system eschew imports for bespoke import/export-like APIs.
Adding this feature would also help HTML Modules make incremental progress.
What solutions exist today?
None?
Maybe you could do this with some combination of import maps and a service worker, or a build script.
How would you solve it?
One potential way to reference the script to import from is by id, with a specifier that starts with #, like:
<html>
<script id="foo-module" type="module">
// This is actually available somewhere
export const foo = 42;
</script>
<script id="bar-module" type="module">
import {foo} from '#foo-module'; // strawman specifier syntax
</script>
</html>Another way is to allow inline module scripts to define a specifier that they can be imported with. This approach solves other use cases, like inlining modules that are part of the page's module graph while still allowing them to be imported from other modules without modification of the importing modules.
Anything else?
This is somewhat related to #7367 which would give all module scripts tags an exports object.