be-exportable

Size of package, including custom element behavior framework (be-decorated):

Size of new code in this package:

Inline scripts

Make exports from inside a script tag accessible from the DOM.

<script nomodule be-exportable>
    export const foo = 'bar';
    
</script>

The script tag ends up with a custom field: _modExport that exposes each of the export const's. It also emits event "load" when it has finished exporting.

A convenience function, importFromScriptRef is provided to manage this.

const {action} = await importFromScriptRef(myShadowOMPeerCitizen, id);

Inline scripts can reference the script tag with the keyword "selfish".

Inline scripts are quite limited in the syntax. Only "export const blah" is exported.

External scripts

External scripts are far more flexible, but cannot reference the script tag with the keyword "selfish".

<script nomodule src="blah/blah.js" be-exportable>
</script>

The code first tries evaluating import('blah/blah.js'). If that fails, it prepends https://esm.run/ to the path, and tries that.

Viewing Locally

1. Install git.
2. Fork/clone this repo.
3. Install node.
4. Open command window to folder where you cloned this repo.

5. npm install

6. npm run serve

7. Open http://localhost:3030/demo/dev in a modern browser.

Importing in ES Modules:

import 'be-exportable/be-exportable.js';

const {importFromScriptRef} = await import('be-exportable/importFromScriptRef.js');

Using from CDN:

<script type=module crossorigin=anonymous>
    import 'https://esm.run/be-exportable';
</script>