[WIP] feat: minimal plugin system PoC

blocks/footer/footer.js

@@ -1,11 +1,11 @@
-import { readBlockConfig, decorateIcons } from '../../scripts/lib-franklin.js';
+import { readBlockConfig } from '../../scripts/lib-franklin.js';
 
 /**
  * loads and decorates the footer
  * @param {Element} block The header block element
  */
 
-export default async function decorate(block) {
+export default async function decorate(block, plugins) {
   const cfg = readBlockConfig(block);
   block.textContent = '';
 
@@ -14,6 +14,6 @@ export default async function decorate(block) {
   const html = await resp.text();
   const footer = document.createElement('div');
   footer.innerHTML = html;
-  await decorateIcons(footer);
+  await plugins.decorator.decorateIcons(footer);
   block.append(footer);
 }

blocks/header/header.js

@@ -1,4 +1,4 @@
-import { readBlockConfig, decorateIcons } from '../../scripts/lib-franklin.js';
+import { readBlockConfig } from '../../scripts/lib-franklin.js';
 
 /**
  * collapses all open nav sections
@@ -16,7 +16,7 @@ function collapseAllNavSections(sections) {
  * @param {Element} block The header block element
  */
 
-export default async function decorate(block) {
+export default async function decorate(block, plugins) {
   const cfg = readBlockConfig(block);
   block.textContent = '';
 
@@ -29,7 +29,7 @@ export default async function decorate(block) {
     // decorate nav DOM
     const nav = document.createElement('nav');
     nav.innerHTML = html;
-    decorateIcons(nav);
+    plugins.decorator.decorateIcons(nav);
 
     const classes = ['brand', 'sections', 'tools'];
     classes.forEach((e, j) => {
@@ -60,7 +60,7 @@ export default async function decorate(block) {
     });
     nav.prepend(hamburger);
     nav.setAttribute('aria-expanded', 'false');
-    decorateIcons(nav);
+    plugins.decorator.decorateIcons(nav);
     block.append(nav);
   }
 }

head.html

@@ -1,4 +1,5 @@
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
+<link rel="modulepreload" href="/scripts/plugins/decorator.js"/>
 <script src="/scripts/lib-franklin.js" type="module"></script>
 <script src="/scripts/scripts.js" type="module"></script>
 <link rel="stylesheet" href="/styles/styles.css"/>

scripts/delayed.js

@@ -1,7 +1 @@
-// eslint-disable-next-line import/no-cycle
-import { sampleRUM } from './lib-franklin.js';
-
-// Core Web Vitals RUM collection
-sampleRUM('cwv');
-
-// add more delayed functionality here
+// Execute anything that can be postponed to the latest here