fix(tools): cem demo paths and dev server (#2917)

* docs: cem config for elements

* fix(tools): filter demos in dev server: only show those directly relevant to tagName

* fix(tools): redirect demos based on filename

* docs: fix build

* fix(tools): hard-code "elements" path into demos

we'll eventually remove this helper altogether

* chore: deps

Author: bennypowers

.changeset/moody-corners-help.md

@@ -0,0 +1,4 @@
+---
+"@patternfly/pfe-tools": patch
+---
+Fix the manifest helper's demo `filePath` field.

docs/components.11tydata.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+  layout: 'layout-basic.njk',
+  templateEngineOverride: 'njk,md',
+  tags: ['component'],
+  permalink: '/components/{{ element.slug }}/index.html',
+  package: '{{ element.package }}',
+  description: '{{ element.description }}',
+  pagination: {
+    data: 'elements',
+    size: 1,
+    alias: 'element',
+    before: xs => xs.filter(x => !!x.docsTemplatePath),
+  },
+};

docs/components/components.md docs/components.mddocs/components/components.md renamed to docs/components.md

@@ -1,20 +1,3 @@
----js
-{
-  layout: 'layout-basic.njk',
-  templateEngineOverride: 'njk,md',
-  tags: ['component'],
-  permalink: '/components/{{ element.slug }}/index.html',
-  package: '{{ element.package }}',
-  description: '{{ element.description }}',
-  pagination: {
-    data: 'elements',
-    size: 1,
-    alias: 'element',
-    before: xs => xs.filter(x => !!x.docsTemplatePath),
-  }
-}
----
-
 <script type="module">
   const CLASS_KEY = 'html-lit-react-snippets';
   const LS_KEY = `${CLASS_KEY}-index`;

docs/components/demos.11tydata.cjs

@@ -1,10 +1,24 @@
+const { dirname } = require('path');
 module.exports = {
   templateEngineOverride: 'njk',
   permalink: '{{ demo.permalink }}',
   pagination: {
     data: 'demos',
     alias: 'demo',
     size: 1,
-    before: xs => xs.filter(x => x.permalink),
+    // somehow the main pf-icon demo is being printed twice.
+    // so we'll group by tag name, and only take the first of each.
+    before: demos => Object.values(Object.groupBy(demos
+        .filter(demo => demo.permalink?.includes(demo.tagName))
+        .map(demo => {
+          if (demo.filePath?.endsWith(`${demo.tagName}.html`)) {
+            return {
+              ...demo,
+              permalink: `${dirname(demo.permalink)}/`,
+            };
+          } else {
+            return demo;
+          }
+        }), demo => demo.tagName)).map(([x]) => x),
   },
 };

elements/.config/cem.yaml

@@ -9,6 +9,6 @@ generate:
   output: custom-elements.json
   noDefaultExcludes: false
   demoDiscovery:
-    fileGlob: ./*/demo/*.html
-    urlPattern: (?P<tag>[\\w-]+)/demo/(?P<demo>[\\w-]+).html
-    urlTemplate: https://patternflyelements.org/components/{tag}/{demo}/
+    fileGlob: '*/demo/*.html'
+    urlPattern: pf-(?P<tag>[\w-]+)/demo/(?P<demo>[\w-]+).html
+    urlTemplate: https://patternflyelements.org/components/{tag}/demo/{demo}/

package-lock.json

@@ -290,7 +290,7 @@
     "@lit/react": "^1.0.5",
     "@octokit/core": "^6.1.2",
     "@patternfly/patternfly": "^4.224.5",
-    "@pwrs/cem": "^0.2.2",
+    "@pwrs/cem": "^0.2.3",
     "@rhds/elements": "^1.4.5",
     "@types/koa__router": "^12.0.4",
     "@types/node": "^22.15.32",
@@ -316,10 +316,10 @@
   "optionalDependencies": {
     "@esbuild/darwin-arm64": "^0.23.1",
     "@esbuild/linux-x64": "^0.23.1",
-    "@pwrs/cem-darwin-arm64": "^0.2.2",
-    "@pwrs/cem-darwin-x64": "^0.2.2",
-    "@pwrs/cem-linux-arm64": "^0.2.2",
-    "@pwrs/cem-linux-x64": "^0.2.2",
+    "@pwrs/cem-darwin-arm64": "^0.2.3",
+    "@pwrs/cem-darwin-x64": "^0.2.3",
+    "@pwrs/cem-linux-arm64": "^0.2.3",
+    "@pwrs/cem-linux-x64": "^0.2.3",
     "@rollup/rollup-darwin-arm64": "^4.21.0"
   },
   "workspaces": [

package.json

@@ -314,7 +314,11 @@ export class Manifest {
       // strict removes all special characters from slug
       slug = slugify(slug, { strict: true, lower: true });
       const primaryElementName = deslugify(slug, options.rootDir);
-      const filePath = demo.source?.href.replace(options.sourceControlURLPrefix, `${options.rootDir}/`) ?? '';
+      const filePath =
+        demo.source?.href.replace(
+          options.sourceControlURLPrefix,
+          `${join(options.rootDir, options.elementsDir)}/`,
+        ) ?? '';
       const [last = ''] = filePath.split('/').reverse();
       const filename = last.replace('.html', '');
       const isMainElementDemo = this.getTagNames().includes(filename);

tools/pfe-tools/custom-elements-manifest/lib/Manifest.ts

@@ -23,6 +23,7 @@ import { join } from 'node:path';
 const replace = fromRollup(rollupReplace);
 
 type BaseConfig = DevServerConfig & PfeConfig;
+
 export interface PfeDevServerConfigOptions extends BaseConfig {
   hostname?: string;
   litcssOptions?: LitCSSOptions;

tools/pfe-tools/dev-server/config.ts

@@ -36,7 +36,18 @@ async function getDemos(config: PfeDevServerInternalConfig) {
         manifest
             .getTagNames()
             .flatMap(tagName =>
-              manifest.getDemoMetadata(tagName, config as PfeDevServerInternalConfig)));
+              manifest.getDemoMetadata(tagName, config as PfeDevServerInternalConfig)
+                  .filter(demo => demo.filePath?.includes(tagName))
+                  .map(demo => {
+                    if (demo.filePath?.endsWith(`${tagName}.html`) || demo.filePath?.endsWith('index.html')) {
+                      return {
+                        ...demo,
+                        permalink: dirname(demo.permalink),
+                      };
+                    } else {
+                      return demo;
+                    }
+                  })));
 }
 
 async function getTemplateContent(demo?: DemoRecord) {
@@ -76,5 +87,3 @@ export function pfeDevServerTemplateMiddleware(config: PfeDevServerInternalConfi
     return next();
   };
 }
-
-