feat: Integrate asem-assets plugin

scripts/aem-assets-plugin-support.js

@@ -0,0 +1,17 @@
+// The based path of the aem-assets-plugin code.
+const codeBasePath = '/plugins/aem-assets-plugin';
+
+// The blocks that are to be used from the aem-assets-plugin.
+const blocks = ['video'];
+
+// Initialize the aem-assets-plugin.
+export default async function assetsInit() {
+  const { loadBlock, createOptimizedPicture } = await import(`${codeBasePath}/scripts/aem-assets.js`);
+  window.hlx = window.hlx || {};
+  window.hlx.aemassets = {
+    codeBasePath,
+    blocks,
+    loadBlock,
+    createOptimizedPicture,
+  };
+}

scripts/aem.js

@@ -16,7 +16,7 @@ function sampleRUM(checkpoint, data) {
   const timeShift = () => (window.performance ? window.performance.now() : Date.now() - window.hlx.rum.firstReadTime);
   try {
     window.hlx = window.hlx || {};
-    sampleRUM.enhance = () => {};
+    sampleRUM.enhance = () => { };
     if (!window.hlx.rum) {
       const weight = (window.SAMPLE_PAGEVIEWS_AT_RATE === 'high' && 10)
         || (window.SAMPLE_PAGEVIEWS_AT_RATE === 'low' && 1000)
@@ -282,6 +282,10 @@ function createOptimizedPicture(
   eager = false,
   breakpoints = [{ media: '(min-width: 600px)', width: '2000' }, { width: '750' }],
 ) {
+  if (window.hlx?.aemassets?.createOptimizedPicture) {
+    return window.hlx.aemassets.createOptimizedPicture(src, alt, eager, breakpoints);
+  }
+
   const url = new URL(src, window.location.href);
   const picture = document.createElement('picture');
   const { pathname } = url;
@@ -555,6 +559,9 @@ function buildBlock(blockName, content) {
  * @param {Element} block The block element
  */
 async function loadBlock(block) {
+  if (window.hlx?.aemassets?.loadBlock) {
+    return window.hlx.aemassets.loadBlock(block);
+  }
   const status = block.dataset.blockStatus;
   if (status !== 'loading' && status !== 'loaded') {
     block.dataset.blockStatus = 'loading';

scripts/scripts.js

@@ -14,6 +14,7 @@ import {
   sampleRUM,
 } from './aem.js';
 
+import assetsInit from './aem-assets-plugin-support.js';
 /**
  * Builds hero block and prepends to main in a new section.
  * @param {Element} main The container element
@@ -129,4 +130,5 @@ async function loadPage() {
   loadDelayed();
 }
 
+await assetsInit(); // This to be done before loadPage() function invocation
 loadPage();