fix: tools and docs for pf-v5 prefix/ elements rename compatibility

.changeset/wacky-jobs-lead.md

@@ -0,0 +1,6 @@
+---
+"@patternfly/pfe-tools": patch
+---
+
+Corrected usage of config for tagPrefix in `DocsPage` for alias
+

.pfe.config.json

@@ -1,3 +1,4 @@
 {
-  "renderTitleInOverview": false
+  "renderTitleInOverview": false,
+  "tagPrefix": "pf-v5"
 }

docs/_data/importMap.cjs

@@ -1,6 +1,5 @@
 const fs = require('node:fs');
 const path = require('node:path');
-const { glob } = require('glob');
 
 const packageLock = JSON.parse(fs.readFileSync(path.join(
   __dirname,
@@ -82,38 +81,14 @@ module.exports = async function() {
 
   const map = generator.getMap();
   map.imports['/docs/zero-md.js'] = '/zero-md.js';
-  map.imports['@patternfly/elements'] = '/pfe.min.js';
-  map.imports['@patternfly/pfe-core'] = '/pfe.min.js';
+  map.imports['@patternfly/elements/'] = '/assets/@patternfly/elements/';
+  map.imports['@patternfly/pfe-core/'] = '/assets/@patternfly/pfe-core/';
+  map.imports['@patternfly/pfe-core'] = '/assets/@patternfly/pfe-core/core.js';
+  map.imports['@patternfly/pfe-tools/'] = '/assets/@patternfly/pfe-tools/';
   map.imports['@patternfly/icons/'] = '/assets/@patternfly/icons/';
-  map.imports['@patternfly/pfe-core/decorators.js'] = '/pfe.min.js';
-  map.imports['@patternfly/pfe-tools/environment.js'] = '/tools/environment.js';
+  map.imports['@lit/context'] = map.scopes['https://cdn.jsdelivr.net/']['@lit/context'];
   map.imports['lit/'] = map.imports.lit.replace('index.js', '');
   map.scopes['https://cdn.jsdelivr.net/'].lit = map.imports.lit;
   map.scopes['https://cdn.jsdelivr.net/']['lit/'] = map.imports.lit.replace('index.js', '');
-
-  // add imports for imports under pfe-core
-  const pfeCoreImports = (await glob('./{functions,controllers,decorators}/*.ts', {
-    cwd: path.join(__dirname, '../../core/pfe-core'),
-  }))
-      .filter(x => !x.endsWith('.d.ts'))
-      .map(x => x.replace('.ts', '.js'));
-  for (const file of pfeCoreImports) {
-    map.imports[path.join('@patternfly/pfe-core', file)] = '/pfe.min.js';
-  }
-
-  map.imports['@patternfly/pfe-core/decorators.js'] = '/pfe.min.js';
-  map.imports['@patternfly/pfe-core'] = '/pfe.min.js';
-
-  const elementsPath = path.join(__dirname, '..', '..', 'elements');
-  for (const tagName of fs.readdirSync(elementsPath)) {
-    const elementPath = path.join(elementsPath, tagName);
-    if (fs.statSync(elementPath).isDirectory()) {
-      for (const fileName of fs.readdirSync(elementPath)) {
-        if (fileName.endsWith('.ts') && !fileName.endsWith('.d.ts')) {
-          map.imports[`@patternfly/elements/${tagName}/${fileName.replace('.ts', '')}.js`] = `/pfe.min.js`;
-        }
-      }
-    }
-  }
   return map;
 };

docs/_plugins/pfe-assets.cjs

@@ -10,36 +10,22 @@ function getFilesToCopy(options) {
   const cwd = process.cwd();
   const prefix = `${(options?.prefix ?? 'pf').replace(/-$/, '')}-`;
 
-  const hasElements = fs.existsSync(path.join(cwd, 'elements'));
   const hasCore = fs.existsSync(path.join(cwd, 'core'));
 
-  if (!hasElements && !hasCore) {
+  if (!hasCore) {
     return null;
   }
 
   const files = {
     [path.join(cwd, 'node_modules/element-internals-polyfill')]: 'element-internals-polyfill',
   };
 
-  const tagNames = fs.readdirSync(path.join(cwd, 'elements'));
   const corePkgs = fs.readdirSync(path.join(cwd, 'core'));
 
-  // Copy all component and core files to _site
-  if (hasElements) {
-    Object.assign(files, Object.fromEntries(tagNames
-        .filter(x => !x.match(/node_modules|tsconfig|README\.md|(?:\.ts$)|(?:config\.js$)/))
-        .map(dir => [
-          `elements/${dir}`,
-          `components/${dir.replace(prefix, '')}`,
-        ])));
-  }
-
-  if (hasCore) {
-    Object.assign(files, Object.fromEntries(corePkgs.map(dir => [
-      `core/${dir}`,
-      `core/${dir.replace(prefix, '')}`,
-    ])));
-  }
+  Object.assign(files, Object.fromEntries(corePkgs.map(dir => [
+    `core/${dir}`,
+    `core/${dir.replace(prefix, '')}`,
+  ])));
 
   return files;
 }
@@ -75,7 +61,43 @@ module.exports = {
     eleventyConfig.addPassthroughCopy({
       'node_modules/@patternfly/icons/': '/assets/@patternfly/icons/',
     });
+    eleventyConfig.addPassthroughCopy({
+      'elements': '/assets/@patternfly/elements',
+    });
+    eleventyConfig.addPassthroughCopy({
+      './core/pfe-core': '/assets/@patternfly/pfe-core',
+    });
+    eleventyConfig.addPassthroughCopy({
+      'tools/pfe-tools': '/assets/@patternfly/pfe-tools',
+    });
     eleventyConfig.addPassthroughCopy('brand/**/*');
+
+    // Copy static assets (screenshots, demo images/css/js) from element folders
+    // to the site with the tag prefix stripped from the directory name.
+    // Markdown and HTML are handled by 11ty templates; this covers everything else.
+    const prefix = `${(options?.prefix ?? 'pf').replace(/-$/, '')}-`;
+    for (const dir of fs.readdirSync(path.join(process.cwd(), 'elements'))) {
+      const slug = dir.replace(prefix, '');
+      const screenshot = path.join('elements', dir, 'docs', 'screenshot.png');
+      if (fs.existsSync(screenshot)) {
+        eleventyConfig.addPassthroughCopy({
+          [screenshot]: `/components/${slug}/docs/screenshot.png`,
+        });
+      }
+      const demoDir = path.join(process.cwd(), 'elements', dir, 'demo');
+      if (fs.existsSync(demoDir)) {
+        const assets =
+          fs.readdirSync(demoDir, { recursive: true })
+              .filter(f => !String(f).endsWith('.html'));
+        for (const asset of assets) {
+          const src = path.join('elements', dir, 'demo', String(asset));
+          eleventyConfig.addPassthroughCopy({
+            [src]: `/components/${slug}/demo/${asset}`,
+          });
+        }
+      }
+    }
+
     const filesToCopy = getFilesToCopy(options);
 
     if (filesToCopy) {

docs/main.mjs

@@ -1,6 +1,40 @@
 import '@rhds/elements/rh-footer/rh-footer-universal.js';
 import 'element-internals-polyfill';
 import { PfV5Icon } from '@patternfly/elements/pf-v5-icon/pf-v5-icon.js';
+import '@patternfly/elements/pf-v5-accordion/pf-v5-accordion.js';
+import '@patternfly/elements/pf-v5-alert/pf-v5-alert.js';
+import '@patternfly/elements/pf-v5-avatar/pf-v5-avatar.js';
+import '@patternfly/elements/pf-v5-back-to-top/pf-v5-back-to-top.js';
+import '@patternfly/elements/pf-v5-background-image/pf-v5-background-image.js';
+import '@patternfly/elements/pf-v5-badge/pf-v5-badge.js';
+import '@patternfly/elements/pf-v5-banner/pf-v5-banner.js';
+import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
+import '@patternfly/elements/pf-v5-card/pf-v5-card.js';
+import '@patternfly/elements/pf-v5-chip/pf-v5-chip.js';
+import '@patternfly/elements/pf-v5-clipboard-copy/pf-v5-clipboard-copy.js';
+import '@patternfly/elements/pf-v5-code-block/pf-v5-code-block.js';
+import '@patternfly/elements/pf-v5-dropdown/pf-v5-dropdown.js';
+import '@patternfly/elements/pf-v5-helper-text/pf-v5-helper-text.js';
+import '@patternfly/elements/pf-v5-hint/pf-v5-hint.js';
+import '@patternfly/elements/pf-v5-jump-links/pf-v5-jump-links.js';
+import '@patternfly/elements/pf-v5-label/pf-v5-label.js';
+import '@patternfly/elements/pf-v5-label-group/pf-v5-label-group.js';
+import '@patternfly/elements/pf-v5-modal/pf-v5-modal.js';
+import '@patternfly/elements/pf-v5-panel/pf-v5-panel.js';
+import '@patternfly/elements/pf-v5-popover/pf-v5-popover.js';
+import '@patternfly/elements/pf-v5-progress/pf-v5-progress.js';
+import '@patternfly/elements/pf-v5-progress-stepper/pf-v5-progress-stepper.js';
+import '@patternfly/elements/pf-v5-search-input/pf-v5-search-input.js';
+import '@patternfly/elements/pf-v5-select/pf-v5-select.js';
+import '@patternfly/elements/pf-v5-spinner/pf-v5-spinner.js';
+import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
+import '@patternfly/elements/pf-v5-table/pf-v5-table.js';
+import '@patternfly/elements/pf-v5-tabs/pf-v5-tabs.js';
+import '@patternfly/elements/pf-v5-text-area/pf-v5-text-area.js';
+import '@patternfly/elements/pf-v5-text-input/pf-v5-text-input.js';
+import '@patternfly/elements/pf-v5-tile/pf-v5-tile.js';
+import '@patternfly/elements/pf-v5-timestamp/pf-v5-timestamp.js';
+import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js';
 
 // if `/v2/` path load icons from static directory
 if (document.location.href.includes('/v2/')) {

elements/pf-v5-alert/pf-v5-alert.ts

@@ -29,6 +29,7 @@ export class PfV5AlertCloseEvent extends Event {
  * An **alert** is a notification that provides brief information to the user
  * without blocking their workflow.
  *
+ * @alias Alert
  * @fires close - When an alert is closed e.g. when close button is clicked or when the alert times
  *                out. Cancel the event to prevent the alert from being removed.
  */

elements/pf-v5-code-block/pf-v5-code-block.ts

@@ -4,19 +4,16 @@ import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
 import styles from './pf-v5-code-block.css';
 
-/**
- * A **code block** is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.
- * @alias Code Block
- * @attr {boolean} [expanded=false]
- *       Indicates if the code-block has been expanded
- */
-
 function dedent(str: string): string {
   const stripped = str.replace(/^\n/, '');
   const match = stripped.match(/^\s+/);
   return match ? stripped.replace(new RegExp(`^${match[0]}`, 'gm'), '') : str;
 }
 
+/**
+ * A **code block** is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.
+ * @alias Code Block
+ */
 @customElement('pf-v5-code-block')
 export class PfV5CodeBlock extends LitElement {
   static readonly styles: CSSStyleSheet[] = [styles];

elements/pf-v5-helper-text/pf-v5-helper-text.ts

@@ -20,6 +20,7 @@ const StatusIconMap = {
 /**
  * Displays contextual feedback for form fields with optional icon and status color.
  *
+ * @alias Helper Text
  * @slot icon - Optional custom icon to override the default icon.
  * @slot - Default slot for the helper text content.
  *

elements/pf-v5-label-group/pf-v5-label-group.ts

@@ -37,6 +37,7 @@ const REMAINING_RE = /\$\{\s*remaining\s*\}/g;
  * When the number of labels exceeds `numLabels`, additional labels will be
  * hidden using an overflow label.
  *
+ * @alias Label Group
  * @summary Groups multiple labels with overflow, category, and close support.
  *
  * @fires {PfV5LabelGroupExpandEvent} expand - Fires when label group is expanded to show all labels

elements/pf-v5-search-input/docs/pf-search-input.md → elements/pf-v5-search-input/docs/pf-v5-search-input.md

@@ -31,7 +31,7 @@ import '@patternfly/elements/pf-v5-search-input/pf-v5-search-input.js';
 
 #### Search Input Form
 {% htmlexample %}
-  {% renderFile "./elements/pf-v5-search-input/demo/pf-v5-search-input-with-submit.html" %}
+  {% renderFile "./elements/pf-v5-search-input/demo/pf-search-input-with-submit.html" %}
 {% endhtmlexample %}
 
 #### Disabled

package.json

@@ -169,6 +169,7 @@
       ],
       "dependencies": [
         "build:core",
+        "build:elements",
         "analyze"
       ]
     },
@@ -192,7 +193,8 @@
       "service": true,
       "command": "eleventy --serve",
       "dependencies": [
-        "build:core"
+        "build:core",
+        "build:elements"
       ]
     },
     "start": {

tools/pfe-tools/11ty/DocsPage.ts

@@ -1,4 +1,5 @@
 import type { PfeConfig } from '../config.js';
+import { getPfeConfig } from '../config.js';
 import { Manifest } from '../custom-elements-manifest/lib/Manifest.js';
 
 import slugify from 'slugify';
@@ -20,12 +21,14 @@ export class DocsPage {
   summary?: string | null;
   docsTemplatePath?: string;
   constructor(public manifest: Manifest, options?: DocsPageOptions) {
+    const config = getPfeConfig(options?.rootDir);
     this.tagName = options?.tagName ?? '';
     this.title = options?.title ?? Manifest.prettyTag(this.tagName);
     this.docsTemplatePath = options?.docsTemplatePath;
     this.summary = this.manifest.getSummary(this.tagName);
     this.description = this.manifest.getDescription(this.tagName);
-    const aliased = options?.aliases?.[this.tagName] ?? this.tagName.replace(/^\w+-/, '');
+    const prefix = `${config.tagPrefix.replace(/-$/, '')}-`;
+    const aliased = config.aliases[this.tagName] ?? this.tagName.replace(prefix, '');
     this.slug = slugify(aliased, { strict: true, lower: true });
   }
 }