[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