be-exportable v0.0.130

be-exportable (📦)

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: oScript.beEnhanced.beExportable.exports that exposes each of the export const's.

To wait for the script to load:

const {emc} = await import('be-exportable/behivior.js);
const enhancement = await oScript.beEnhanced.whenResolved(emc);
const {foo} = enhancement.exports;

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

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

If used repeatedly in a casual setting, you can reference 📦.js and then replace be-exportable with 📦:

<script nomodule 📦>
    export const foo = 'bar';
</script>

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>

Repeating script tag

If the adorned script tag is inside a template / shadowDOM realm that is repeated throughout the page, the script tag can share the same export constants by setting the id to something starting with "shared-". To be extra safe, use a guid after the shared- prefix.

Integration with blow-dry

If using this enhancement with xtal-element, to avoid the repeated and parsing of script issue, add attribute blow-dry to the script element:

<script blow-dry nomodule be-exportable>
    export const greeting = 'hello';
</script>

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/ in a modern browser.

Importing in ES Modules:

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

Using from CDN:

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