https://github.com/jojobyte/browser-import-rabbit-hole
Deducing a way to use IIFE modules in browser and preserving JSDoc type hinting.
https://github.com/jojobyte/browser-import-rabbit-hole
browser browser-module commonjs-modules esm esmodules iife jsdoc
Last synced: 3 months ago
JSON representation
Deducing a way to use IIFE modules in browser and preserving JSDoc type hinting.
- Host: GitHub
- URL: https://github.com/jojobyte/browser-import-rabbit-hole
- Owner: jojobyte
- Created: 2023-01-27T21:39:57.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-01-30T11:53:11.000Z (over 3 years ago)
- Last Synced: 2024-11-13T16:50:18.678Z (over 1 year ago)
- Topics: browser, browser-module, commonjs-modules, esm, esmodules, iife, jsdoc
- Language: JavaScript
- Homepage:
- Size: 3.91 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Browser `import` Rabbit Hole
Deducing a way to use IIFE modules that do not provide `export default` or `export let rabbit = 'hole'` in browser and preserving JSDoc type hinting.
## TL;DR
### Wrap it
```js
// sadness.js
// the IIFE module you want to wrap
/**
* @typedef Foo2
* @prop {Greet2} greet
* @prop {Uint8Array} secret
*/
/**
* @callback Greet2
* @param {String} name
*/
/** @type {Foo2} */
var Foo2 = ("object" === typeof module && exports) || {};
(function (window, Foo2) {
"use strict";
let Crypto = window.crypto || require("node:crypto");
Foo2.secret = new Uint8Array(16);
Crypto.getRandomValues(Foo2.secret);
Foo2.greet = function (name) {
console.log(`Hello, ${name}!`);
};
window.Foo2 = Foo2;
})(/** @type {Window} */ (globalThis.window || {}), Foo2);
if ("object" === typeof module) {
module.exports = Foo2;
}
```
```js
// madness.js
// Wrapper module
import './sadness.js'
import * as Types from './sadness.js'
/** @type {Types} */
let Sadness = window.Foo2
export default Sadness
```
```html
/**
* now this works in modern browsers
* with no transpilation and gives
* JSDoc type hinting
*/
import madness from './madness.js';
console.log(
'browser',
madness,
madness.secret.toString()
)
madness.greet('madman')
```