npmweb-componentunpkgui5-webcomponents

jsfiddle code sample for UI5 Web Components using unpkg.com to avoid dependency on npm

A question for the unpkg.com nerds.

I'd like to create a code sample for UI5 Web Components on jsfiddle. The goal is to share code samples without forcing readers to install the corresponding NPM module and its dependencies.

The corresponding node package @ui5/webcomponents can be installed with npm:

npm install @ui5/webcomponents

then I can import the desired web component:

import "@ui5/webcomponents/dist/Button"; // loads ui5-button

and instantiate the custom element in an HTML page:

<ui5-button>Hello world!</ui5-button>

How can I host this code sample on jsfiddle so that the "Hello world" button is displayed there?

Solution

  • You can achieve this using the ?module parameter (from the unpkg docs):

    ?module
Expands all “bare” import specifiers in JavaScript modules to unpkg URLs. This feature is *very experimental*

    so at a bare minimum:

    <script src="https://unpkg.com/@ui5/webcomponents/dist/Button?module" type="module"></script>

<ui5-button>Hello world!</ui5-button>

    Here it is on jsfiddle.

    Alternatively you can import it directly as a module:

    <ui5-button>Hello world!</ui5-button>

<script type="module">
    import 'https://unpkg.com/@ui5/webcomponents/dist/Button?module';
</script>

    jsfiddle

    Note the 'very experimental' qualifier in the docs, so I wouldn't rely on it quite yet!