docs: patch html-includes if needed

.changeset/brave-feet-sing.md

@@ -0,0 +1,6 @@
+---
+"@patternfly/pfe-card": patch
+"@patternfly/pfe-cta": patch
+---
+
+build pfe-card and pfe-cta's light dom CSS during the `build` command

docs/demo/demo.ts

@@ -47,8 +47,87 @@ async function onLoad(element: string, base: 'core' | 'elements', location: Loca
   include.classList.remove('loading');
   componentHeader.classList.remove('loading');
   onContextChange();
+  window.removeEventListener('unhandledrejection', handleBadLoad);
 }
 
+/* eslint-disable no-console */
+/**
+ * quick hack to avoid page load errors if subresources are missing from demo files
+ * @see https://github.com/justinfagnani/html-include-element/pull/21
+ */
+async function handleBadLoad() {
+  await loadPartial.call(document.querySelector('html-include'));
+}
+
+const isLinkAlreadyLoaded = (link: HTMLLinkElement) => {
+  try {
+    return !!(link.sheet && link.sheet.cssRules);
+  } catch (error) {
+    if (error.name === 'InvalidAccessError' || error.name === 'SecurityError') {
+      return false;
+    } else {
+      throw error;
+    }
+  }
+};
+
+const linkLoaded = async function linkLoaded(link: HTMLLinkElement) {
+  return new Promise((resolve, reject) => {
+    if (!('onload' in HTMLLinkElement.prototype)) {
+      resolve(null);
+    } else if (isLinkAlreadyLoaded(link)) {
+      resolve(link.sheet);
+    } else {
+      link.addEventListener('load', () => resolve(link.sheet), { once: true });
+      link.addEventListener('error', () => reject({ link }), { once: true });
+    }
+  });
+};
+
+/** @this {import('html-include-element').HTMLIncludeElement} */
+async function loadPartial() {
+  let text = '';
+  try {
+    const mode = this.mode || 'cors';
+    const response = await fetch(this.getAttribute('src'), { mode });
+    if (!response.ok) {
+      throw new Error(`html-include fetch failed: ${response.statusText}`);
+    }
+    text = await response.text();
+  } catch (e) {
+    console.error(e);
+  }
+  // Don't destroy the light DOM if we're using shadow DOM, so that slotted content is respected
+  if (this.noShadow) {
+    this.innerHTML = text;
+  }
+
+  this.shadowRoot.innerHTML = `
+    <style>
+      :host {
+        display: block;
+      }
+    </style>
+    ${this.noShadow ? '<slot></slot>' : text}
+  `;
+
+  // If we're not using shadow DOM, then the consuming root
+  // is responsible to load its own resources
+  if (!this.noShadow) {
+    const results = await Promise.allSettled([...this.shadowRoot.querySelectorAll('link')].map(linkLoaded));
+    for (const result of results) {
+      if (result.status === 'rejected') {
+        const { link } = result.reason;
+        const message = `Could not load ${link.href}`;
+        console.error(message);
+      }
+    }
+  }
+
+  this.dispatchEvent(new Event('load'));
+}
+/* eslint-enable no-console */
+
 /** Load up the requested element's demo in a separate shadow root */
 async function go(location = window.location) {
   const { element } = pattern.exec(location.href)?.pathname?.groups ?? {};
@@ -59,7 +138,11 @@ async function go(location = window.location) {
     componentHeader.classList.add('loading');
     include.addEventListener('load', onLoad.bind(include, element, base, location), { once: true });
     include.setAttribute('data-demo', element);
-    include.src = `/${base}/${element}/demo/${element}.html`;
+
+    window.addEventListener('unhandledrejection', handleBadLoad, { once: true });
+
+    include.setAttribute('src', `/${base}/${element}/demo/${element}.html`);
+
     viewer.src = `/${base}/${element}/custom-elements.json`;
     viewer.hidden = false;
     document.title = `${pretty(element)} | PatternFly Elements`;

elements/pfe-card/demo/pfe-card.html

@@ -3,7 +3,7 @@
 <link rel="stylesheet" href="/core/pfe-styles/pfe-context.min.css">
 <link rel="stylesheet" href="/core/pfe-styles/pfe-layouts.min.css">
 <link rel="stylesheet" href="/core/pfe-styles/pfe.min.css">
-<link rel="stylesheet" href="/elements/pfe-card/pfe-card---lightdom.min.css">
+<link rel="stylesheet" href="/elements/pfe-card/pfe-card--lightdom.min.css">
 <link rel="stylesheet" href="/elements/pfe-card/demo/demo.css">
 
 <pfe-card color="lightest" border class="button-series">

elements/pfe-card/package.json

@@ -27,6 +27,7 @@
     "build:clean": "npm run clean",
     "build:esbuild": "node ../../scripts/build.js --include pfe-card",
     "build:analyze": "npm run analyze",
+    "build:lightdom": "sass pfe-card--lightdom.scss pfe-card--lightdom.min.css --style=compressed --load-path=../../node_modules",
     "build:types": "tsc -b .",
     "🧑‍🔬-----TEST-------🧑‍🔬": "❓ Test packages",
     "test": "wtr --files './test/*.spec.ts' --config ../../web-test-runner.config.js",

elements/pfe-cta/demo/pfe-cta.html

@@ -3,7 +3,7 @@
 <link rel="stylesheet" href="/core/pfe-styles/pfe-context.css">
 <link rel="stylesheet" href="/core/pfe-styles/pfe-layouts.css">
 <link rel="stylesheet" href="/core/pfe-styles/pfe.css">
-<link rel="stylesheet" href="/elements/pfe-cta/pfe-cta--lightdom.css">
+<link rel="stylesheet" href="/elements/pfe-cta/pfe-cta--lightdom.min.css">
 <link rel="stylesheet" href="/elements/pfe-cta/demo/demo.css">
 
 <pfe-band color="complement" size="small">

elements/pfe-cta/package.json

@@ -26,7 +26,7 @@
     "build": "run-s build:*",
     "build:clean": "npm run clean",
     "build:esbuild": "node ../../scripts/build.js --include pfe-cta",
-    "build:lightdom": "sass pfe-cta--lightdom.scss pfe-cta--lightdom.css --load-path=../../node_modules",
+    "build:lightdom": "sass pfe-cta--lightdom.scss pfe-cta--lightdom.min.css --style=compressed --load-path=../../node_modules",
     "build:analyze": "npm run analyze",
     "build:types": "tsc -b .",
     "🧑‍🔬-----TEST-------🧑‍🔬": "❓ Test packages",

elements/pfe-jump-links/demo/pfe-jump-links.js

@@ -10,8 +10,8 @@ import { installRouter } from 'pwa-helpers/router.js';
  * @this {HTMLElement}
  */
 async function route(location = window.location, event) {
-  event.preventDefault();
-  event.stopPropagating();
+  event?.preventDefault();
+  event?.stopPropagating();
   if (location.hash) {
     root?.querySelector(location.hash)?.scrollIntoView({ behavior: 'smooth' });
   }

package.json

@@ -29,6 +29,7 @@
     "build:analyze": "lerna run analyze --parallel",
     "build:styles": "npm run build --workspace @patternfly/pfe-styles",
     "build:core": "npm run build --workspace @patternfly/pfe-core",
+    "build:lightdom": "npm run build:lightdom --workspaces --if-present",
     "build:elements": "scripts/build.js",
     "build:types": "tsc -b",
     "build:docs": "run-s build:docs:*",