https://github.com/bahrus/nomodule
Make ES6 module scripts more convenient.
https://github.com/bahrus/nomodule
currentscript custom-element custom-elements custom-elements-ts custom-elements-v1 ish web-component web-components webcomponent webcomponents
Last synced: 3 months ago
JSON representation
Make ES6 module scripts more convenient.
- Host: GitHub
- URL: https://github.com/bahrus/nomodule
- Owner: bahrus
- License: mit
- Created: 2020-07-04T19:09:40.000Z (almost 5 years ago)
- Default Branch: baseline
- Last Pushed: 2023-03-05T04:05:57.000Z (about 2 years ago)
- Last Synced: 2025-02-01T14:04:17.395Z (4 months ago)
- Topics: currentscript, custom-element, custom-elements, custom-elements-ts, custom-elements-v1, ish, web-component, web-components, webcomponent, webcomponents
- Language: TypeScript
- Homepage:
- Size: 649 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# no-module
## Purpose
ES6 modules are a great leap forward over the legacy JavaScript browsers support. But there are two gaps where legacy JavaScript provided some advantages.
### Referencing outside the script tag.
JS references, pre-ES6 modules, allowed for global variables / functions, which in turn saw such libraries as JQuery thrive. jQuery consumers could just assume $ was ever present and ready to serve the developer.
Over time, this aspect of JavaScript came to be viewed more as a bug than a feature, leading to such initiatives as require.js and eventually ES6 modules.
On the other hand, ES6 modules provide export capabilities, but the keyword "export" symbol becomes meaningless in the context of a script tag:
```html
export const h = 'hello'; // nothing outside this module can access h, and the export keyword is meaningless.
```
### Access to the script tag instance.
Another important feature ES6 modules lost that "legacy" script tags supported was access to the script tag from which the script derived - document.currentScript.
no-module provides some support to overcome these limitations.
## Syntax
nomodule.js provides a mechanism where the exported symbols can be accessed. Script tags must have attribute nomodule=ish:
```html
export const h = 'hello';
throw 'new Error';
myScriptTag.addEventListener('loaded', e =>{
console.log(myScriptTag._modExport);
// { h: "hello" }
});
myScriptTag.addEventListener('err', e => {
console.log(e.detail.message);
// "new Error"
})
```
**NBs:**
1. The "nomodule" attribute tells modern browsers to ignore the tag, so there is no wasted CPU processing something that isn't fully complete.
2. This library, no-module.js, then, can inject some special instructions to produce the desired effects. But the JS processor which is used after the special instructions are inserted is in fact the ES6 (module) processor. So ES6 imports are allowed, for example (though support for import maps will require turning on the Chrome flag for import maps, or using a polyfill, like es-module-shim or es-dev-server).
3. The pattern matching is precise / inflexible, and is limited to "export[space]const[space][symbol to export]".
no-module.js also works for script references to ES6 modules, i.e.:
```html
```
## document.currentScript replacement
To access the script tag which references or contains the script, use the magic string: "selfish":
```JavaScript
const scriptTag = selfish;
console.log(scriptTag);
//
```
**NB:** Greedy code will break.
Simply including a reference to no-module.js will allow any "nomodule=ish" script tags outside any shadow DOM to load as described above.
To achieve the same behavior within a shadow DOM realm, include a single no-module tag somewhere:
```html
#shadow
...
...
```
** Working like it's '95 [TODO]
```html
Tumble out of bed
...
export function yawnAndStretch(){
event.target.textContent = 'Try to come to life';
}
```