Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

AEM 6.5 - StencilJS Integration

Avatar

Level 3

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

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

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

View solution in original post

6 Replies

Avatar

Correct answer by
Employee Advisor

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

Avatar

Level 3

Thank you nirmaljosehere,

 

The most important topic is the following:

 

How to load a ClientLib that uses ES Modules?

 

We don't know if we can implement a 'standard' solution.

Avatar

Level 3

Hi Alex,

 

I would be keen to know what approach you followed to solve this issue. I am stuck at the same point as we are integrating AEM with Stencil JS . One approach worked hosting the JS in dam  but due to security concerns its not recommended . Looking for the reply.

Avatar

Level 3

Hi Priya,

 

What we finally did is loading the StencilJS files as static files inside /etc/clientlibs folder.

We had to allocate all the StencilJS files that are the result of the build under /etc/clientlibs/....

Then we had to modify the customheaderlibs of the 'page' component to load the 'bundle' files of StencilJS (the other StencilJS files are at the same path):

customheaderlibs.png

Another option is having all the files in a CDN or at any other location into a static server and point them in the customheaderlibs.html file.

 

Finally any other resources like fonts or icons are located at a 'resources' folder inside the clientlib-base clientlib.

When the StencilJS project build is done those paths has to be taken into account.

 

Furthermore we use a frontend module to download the StencilJS build from Nexus and copy the files to the final location using the same principle as the aem-clientlib-generator library.

 

I hope this can help.

Regards,

 

Avatar

Level 3

Hi Alex,

Why didn't you use resources folder in client libs to do this as you had suggested in the thread. You could have still called the scripts as below.

/etc.clientlibs/abc-folder/clientlibs/stencilscripts/resources/ui-kit.js 

Do you foresee any challenge as this works too.

 

Thanks & Regards

Avatar

Level 3

Hi Priya,

 

Yes, I think it can be an alternative too.

 

Regards,