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

Question

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?

lamplightdev · Accepted Answer · 2019-03-25 22:38:53Z

3

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!

edited Mar 25, 2019 at 22:38

answered Mar 25, 2019 at 20:41

lamplightdev

2,1011 gold badge20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related