fix(tools): property knobs, layouts

Author: bennypowers

package-lock.json

@@ -5,13 +5,50 @@ import type { Context, Next } from 'koa';
 import { readFile } from 'node:fs/promises';
 import { dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { glob } from 'glob';
 
 import nunjucks from 'nunjucks';
 
 import { Manifest } from '../../custom-elements-manifest/lib/Manifest.js';
 
-function isPFEManifest(x: Manifest) {
-  return x.packageJson?.name === '@patternfly/elements';
+const env = nunjucks.configure(join(dirname(fileURLToPath(import.meta.url)), 'templates'));
+env.addFilter('log', x => (console.log(x), x)); // eslint-disable-line no-console
+// TODO: regexing html is stupid
+const MOD_STYLE_RE = /(<script type="module">.*<\/script>)|(<style>.*<\/style>)/g;
+env.addFilter('noModulesOrStyles', x => x.replaceAll(MOD_STYLE_RE, ''));
+env.addFilter('noElement', (x, tagName) => x.replaceAll(new RegExp(`<${tagName}>.*</${tagName}>`, 'gm'), ''));
+env.addFilter('getSourceControlUrl', function(
+  manifest: Manifest,
+  sourceControlURLPrefix: string,
+  cwd: string,
+) {
+  if (!manifest || !sourceControlURLPrefix) {
+    return '';
+  } else {
+    return `${sourceControlURLPrefix.replace('tree/main/', '')}${(
+      `tree/main${
+        manifest.path.replace(cwd, '')
+            .replace('/custom-elements.json', '/')}`
+    )}`;
+  }
+});
+
+async function getElementsPkgJson(config: PfeDevServerInternalConfig) {
+  let dir = config.elementsDir;
+  let pkgPath;
+  while (dir !== config.rootDir && !pkgPath) {
+    [pkgPath] = await glob('package.json', { cwd: dir, absolute: true });
+    if (!pkgPath) {
+      dir = dirname(dir);
+    }
+  }
+  try {
+    if (pkgPath) {
+      return JSON.parse(await readFile(pkgPath, 'utf8'));
+    }
+  } catch {
+    return;
+  }
 }
 
 /**
@@ -21,16 +58,15 @@ function isPFEManifest(x: Manifest) {
 async function waitForManifestFileThenReadIt(config: PfeDevServerInternalConfig) {
   let count = 0;
   let manifests = Manifest.getAll(config.rootDir);
-  while (count < 1000 && manifests.find(isPFEManifest)?.manifest === null) {
+  while (count < 1000 && manifests.length < 0) {
     await new Promise(r => setTimeout(r, 50));
     count++;
     manifests = Manifest.getAll(config.rootDir);
   }
   return manifests;
 }
 
-async function getDemos(config: PfeDevServerInternalConfig) {
-  const manifests = await waitForManifestFileThenReadIt(config);
+function getDemos(config: PfeDevServerInternalConfig, manifests: Manifest[]) {
   return manifests
       .flatMap(manifest =>
         manifest
@@ -47,20 +83,31 @@ async function getTemplateContent(demo?: DemoRecord) {
   }
 }
 
+async function getManifest(
+  config: PfeDevServerInternalConfig,
+  manifests: Manifest[],
+  demo?: DemoRecord,
+) {
+  const elementsPkgJson = await getElementsPkgJson(config);
+  const manifest =
+    demo?.manifest ?? manifests.find(x => x.packageJson?.name === elementsPkgJson.name);
+  return manifest;
+}
+
 /**
  * Render the demo page whenever there's a trailing slash
  * @param config Normalized dev server options
  */
 export function pfeDevServerTemplateMiddleware(config: PfeDevServerInternalConfig) {
-  const env = nunjucks.configure(join(dirname(fileURLToPath(import.meta.url)), 'templates'));
   return async function(ctx: Context, next: Next): Promise<void> {
     const { method, path } = ctx;
     if (config.loadDemo && !(method !== 'HEAD' && method !== 'GET' || path.includes('.'))) {
+      const manifests = await waitForManifestFileThenReadIt(config);
       const url = new URL(ctx.request.url, `http://${ctx.request.headers.host}`);
-      const demos = await getDemos(config);
+      const demos = getDemos(config, manifests);
       const demo = demos.find(x => x.permalink === url.pathname);
-      const manifest = demo?.manifest;
       const templateContent = await getTemplateContent(demo);
+      const manifest = await getManifest(config, manifests, demo);
       ctx.cwd = process.cwd();
       ctx.type = 'html';
       ctx.status = 200;

tools/pfe-tools/dev-server/plugins/dev-server-templates.ts

@@ -130,6 +130,15 @@
           import '@patternfly/elements/pf-switch/pf-switch.js';
           import '@patternfly/elements/pf-text-input/pf-text-input.js';
           import '@patternfly/elements/pf-text-area/pf-text-area.js';
+          // TODO: typescript couldn't tolerate importing this
+          // but in truth, it belongs in pft-element-knobs.ts
+          import ZeroMd from 'zero-md';
+          customElements.define('pft-knobs-markdown', class extends ZeroMd {
+            async load() {
+              await super.load()
+              this.template = ``;
+            }
+          });
         </script>
         <pft-element-knobs tag="{{ demo.tagName }}">
           <template>

tools/pfe-tools/dev-server/plugins/templates/index.html

@@ -24,17 +24,29 @@ export interface AttributeKnobInfo<E> extends KnobInfo<E> {
   values: string[];
 }
 
+export interface PropertyKnobInfo<E> extends KnobInfo<E> {
+  isBoolean: boolean;
+  isEnum: boolean;
+  isNullable: boolean;
+  isNumber: boolean;
+  isOptional: boolean;
+  isSerializable: boolean;
+  values: string[];
+}
+
 export type ContentKnobInfo<E> = KnobInfo<E>;
 
 export type KnobRenderer<T, E extends HTMLElement = HTMLElement> = (
   this: PftElementKnobs<E>,
   member: T,
   info:
-    T extends Attribute ? AttributeKnobInfo<E>
+    T extends ClassField ? PropertyKnobInfo<E>
+  : T extends Attribute ? AttributeKnobInfo<E>
   : T extends Slot[] ? ContentKnobInfo<E>
   : KnobInfo<E>,
 ) => unknown;
 
+export type PropertyRenderer<E extends HTMLElement> = KnobRenderer<ClassField, E>;
 export type AttributeRenderer<E extends HTMLElement> = KnobRenderer<Attribute, E>;
 export type ContentRenderer<E extends HTMLElement> = KnobRenderer<Slot[], E>;
 
@@ -58,3 +70,11 @@ export const dedent = (str: string): string => {
   return match ? stripped.replace(new RegExp(`^${match[0]}`, 'gm'), '') : str;
 };
 
+export const isSerializable = (x: unknown): boolean => {
+  try {
+    JSON.stringify(x);
+    return true;
+  } catch {
+    return false;
+  }
+};

tools/pfe-tools/elements/lib/knobs.ts

@@ -23,3 +23,16 @@ dl#slot-descriptions {
   overflow: scroll;
   background-color: var(--pf-global--BackgroundColor--200, #f0f0f0);
 }
+
+header {
+  display: flex;
+  align-items: center;;
+  gap: 1em;
+  & pft-knobs-markdown {
+    display: inline;
+    & .markdown-body,
+    & p {
+      display: contents;
+    }
+  }
+}