AEM 6.5 - StencilJS Integration

alex_p_c_

19-02-2020

Hi all,

 

We are trying to create a web component using stencilJS and integrate it into AEM 6.5.

 

StencilJS builds the web component using rollup and creates two different loaders, depending on the browser: The ESM and the ES5+polyfills loader.

 

The way we link the components to the HTML is:

 

<script type="module" src="/build/my-component-library.esm.js"></script>

<script nomodule="" src="/build/my-component-library.js"></script>

 

And the script lazy loads each Web component asynchronously.

 

We've tried to install it as a ClientLib but when we reference it on the AEM component, it bundles all JS in one file and it does not create the script tag with type module.

 

So we have two main issues:

 

  •         How to load a ClientLib that uses ES Modules?
  •         How to load a ClientLib that loads more scripts asynchronously?

 

We have been thinking about the following solution:

 

  •         Create a client lib in AEM and copy all the Stencil build files inside the resources folder
  •         Create the main JavaScript file for the clientlib that, in execution time, renders into the DOM the two scripts tags (ESM and ES5) from the resources folder
  •         Create the sly tag to use the clientlib

 

but I would like to know if there is a standard solution from AEM?

 

Thanks in advance

AEM 6.5 integration StencilJS WebComponent

Accepted Solutions (1)

Accepted Solutions (1)

Nirmal_Jose

MVP

20-02-2020

AEM clientlibs won't support much of the standard attributes at the moment. not even async, defer etc.

You can follow [1] to extend clientlibs and update this implementation to support 'type' property

 

[1] - http://www.nateyolles.com/blog/2016/06/custom-aem-html5-async-clientlibs

Answers (0)