chore: Add asset 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

@@ -297,6 +297,9 @@ 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;
@@ -580,6 +583,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

@@ -12,6 +12,8 @@ import {
   loadCSS,
 } from './aem.js';
 
+import assetsInit from './aem-assets-plugin-support.js';
+
 /**
  * Moves all the attributes from a given elmenet to another given element.
  * @param {Element} from the element to copy attributes from
@@ -145,4 +147,5 @@ async function loadPage() {
   loadDelayed();
 }
 
+await assetsInit(); // This to be done before loadPage() function invocation
 loadPage();