@pure-ds/storybook 0.7.19 → 0.7.23

package/.storybook/htmlPreview.js

@@ -5,7 +5,7 @@
  */
 
 import { render as litRender } from 'lit';
-import { highlight, getCurrentTheme, escapeHtml, preloadShiki } from './shiki.js';
+import { renderCodeBlock, getCurrentTheme, preloadShiki } from './shiki.js';
 
 // Pre-load Shiki in the background
 preloadShiki();
@@ -174,15 +174,10 @@ export const withHTMLSource = (storyFn, context) => {
         html = formatHTML(extractHTML(storyContainer));
       }
       
-      const codeEl = sourceSection.querySelector('.html-source-code');
       const preEl = sourceSection.querySelector('.html-source-pre');
       if (preEl && html) {
-        // Use Shiki for syntax highlighting
         const theme = getCurrentTheme();
-        const highlighted = await highlight(html, 'html', theme);
-        
-        // Shiki returns complete <pre><code>...</code></pre>, replace the whole pre element
-        preEl.outerHTML = highlighted;
+        await renderCodeBlock(preEl, html, 'html', theme);
       }
       
       // Setup copy button

package/.storybook/main.js

@@ -78,6 +78,7 @@ const config = {
     const aliases = [
       { find: '#pds/lit', replacement: resolve(pdsSrcPath, 'js/lit.js') },
       { find: /^#pds$/, replacement: resolve(pdsSrcPath, 'js/pds.js') },
+      { find: /^#shiki$/, replacement: resolve(pdsSrcPath, 'js/external/shiki.js') },
       ...existingAliases,
     ];
 

package/.storybook/preview-head.html

@@ -11,6 +11,7 @@
   "imports": {
     "#pds": "/assets/pds/core.js",
     "#pds/lit": "/assets/pds/external/lit.js",
+    "#shiki": "/assets/pds/external/shiki.js",
     "#showdown": "https://cdn.jsdelivr.net/npm/showdown@2.1.0/dist/showdown.mjs"
   }
 }

package/.storybook/preview.js

@@ -16,6 +16,42 @@ import { toastFormData } from '../stories/utils/toast-utils.js';
 // Expose toastFormData globally for inline event handlers
 window.toastFormData = toastFormData;
 
+let pdsCodeLoadPromise = null;
+
+async function ensurePdsCodeLoaded() {
+  if (typeof customElements !== 'undefined' && customElements.get('pds-code')) {
+    return true;
+  }
+
+  if (!pdsCodeLoadPromise) {
+    pdsCodeLoadPromise = (async () => {
+      const candidates = [
+        '@pds-src/js/components/pds-code.js',
+        '/assets/pds/components/pds-code.js',
+        '/pds/components/pds-code.js',
+      ];
+
+      for (const specifier of candidates) {
+        try {
+          await import(specifier);
+          if (typeof customElements !== 'undefined' && customElements.get('pds-code')) {
+            return true;
+          }
+        } catch {
+          // try next candidate
+        }
+      }
+
+      console.warn('Failed to load pds-code component from known locations.');
+      return false;
+    })();
+  }
+
+  return pdsCodeLoadPromise;
+}
+
+void ensurePdsCodeLoaded();
+
 // Get initial preset from storage or URL or default
 const getInitialPreset = () => {
   try {
@@ -52,6 +88,36 @@ function isDocsPage() {
   }
 }
 
+function inferCodeLanguage(codeEl) {
+  if (!codeEl) return 'html';
+  const className = codeEl.className || '';
+  const languageMatch = className.match(/(?:language|lang)-([a-z0-9-]+)/i);
+  if (languageMatch?.[1]) {
+    return languageMatch[1].toLowerCase();
+  }
+  return codeEl.getAttribute('data-lang') || 'html';
+}
+
+function upgradeLegacyCodeBlocks(root) {
+  if (!root) return;
+  if (typeof customElements !== 'undefined' && !customElements.get('pds-code')) return;
+
+  const blocks = root.querySelectorAll('pre > code');
+  blocks.forEach((codeEl) => {
+    const preEl = codeEl.parentElement;
+    if (!preEl || preEl.closest('pds-code')) return;
+
+    const content = codeEl.textContent || '';
+    if (!content.trim()) return;
+
+    const lang = inferCodeLanguage(codeEl);
+    const pdsCode = document.createElement('pds-code');
+    pdsCode.setAttribute('lang', lang);
+    pdsCode.code = content;
+    preEl.replaceWith(pdsCode);
+  });
+}
+
 let liveGenerator = null;
 const setLiveGenerator = (generator) => {
   if (generator && typeof generator === 'object') {
@@ -216,6 +282,8 @@ const withPDS = (story, context) => {
   const adoptAllShadowStyles = async () => {
     const container = document.querySelector('#storybook-root');
     if (!container) return;
+
+    upgradeLegacyCodeBlocks(container);
     
     const walker = document.createTreeWalker(
       container,
@@ -283,6 +351,9 @@ const withPDS = (story, context) => {
   };
   
   // Initial adoption - run multiple times to catch lazy components
+  setTimeout(() => {
+    upgradeLegacyCodeBlocks(document.querySelector('#storybook-root'));
+  }, 0);
   setTimeout(adoptAllShadowStyles, 0);
   setTimeout(adoptAllShadowStyles, 100);
   setTimeout(adoptAllShadowStyles, 300);

package/.storybook/shiki.js

@@ -8,6 +8,7 @@
 export { 
   loadShiki, 
   highlight, 
+  renderCodeBlock,
   getCurrentTheme, 
   escapeHtml, 
   preloadShiki