fix(tools): property knobs, layouts

Author: bennypowers

package-lock.json

@@ -32,7 +32,7 @@
     "leftover-check": "bash scripts/leftover-check.sh",
     "⚙️--UTIL": "❓ Manages the repo",
     "postinstall": "wireit",
-    "clean": "git clean -dfx -e node_modules -e .husky -e .wireit",
+    "clean": "git clean -dfx -e node_modules -e .husky",
     "nuke": "git clean -dfx",
     "lint": "eslint",
     "patch": "patch-package",

package.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;