fix(tools): dev server fixes (#2785)

* fix(tools): dev server reload for ts changes

* fix(tools): dev server light dom shims

.changeset/huge-mice-build.md

@@ -0,0 +1,4 @@
+---
+"@patternfly/pfe-tools": patch
+---
+**Dev Server**: load lightdom shim files

.changeset/legal-chairs-double.md

@@ -0,0 +1,4 @@
+---
+"@patternfly/pfe-tools": patch
+---
+**Dev Server**: reload on typescript file changes

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

@@ -1,6 +1,6 @@
 import type { Plugin } from '@web/dev-server-core';
 import type { DevServerConfig } from '@web/dev-server';
-import type { Context, Next } from 'koa';
+import type { Middleware, Context, Next } from 'koa';
 
 import { readdir, stat } from 'node:fs/promises';
 import { fileURLToPath } from 'node:url';
@@ -80,6 +80,18 @@ async function cacheBusterMiddleware(ctx: Context, next: Next) {
   }
 }
 
+function liveReloadTsChangesMiddleware(
+  config: ReturnType<typeof normalizeOptions>,
+): Middleware {
+  return function(ctx, next) {
+    if (!ctx.path.includes('node_modules') && ctx.path.match(new RegExp(`/^${config?.elementsDir}\\/.*.js/`))) {
+      ctx.redirect(ctx.path.replace('.js', '.ts'));
+    } else {
+      return next();
+    }
+  };
+}
+
 /**
  * Creates a default config for PFE's dev server.
  */
@@ -96,6 +108,7 @@ export function pfeDevServerConfig(options?: PfeDevServerConfigOptions): DevServ
     middleware: [
       cors,
       cacheBusterMiddleware,
+      liveReloadTsChangesMiddleware(config),
       ...config?.middleware ?? [],
     ],
 

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

@@ -104,11 +104,11 @@ function getRouter(options: PfeDevServerInternalConfig) {
 
   // Redirect `components/jazz-hands/*-lightdom.css` to `elements/pf-jazz-hands/*-lightdom.css`
   // NOTE: don't put subresources in /demo called `*-lightdom.css` , or this will break
-      .get(`/${componentSubpath}/:element/(demo/)?:fileName-lightdom.css`, async (ctx, next) => {
+      .get(`/${componentSubpath}/:element/(demo/)?:fileName.css`, async (ctx, next) => {
         const { element, fileName } = ctx.params;
-        if (!element.startsWith(tagPrefix)) {
+        if (!element.startsWith(tagPrefix) && fileName.includes('lightdom')) {
           const prefixedElement = deslugify(element);
-          ctx.redirect(`/${elementsDir}/${prefixedElement}/${fileName}-lightdom.css`);
+          ctx.redirect(`/${elementsDir}/${prefixedElement}/${fileName}.css`);
         } else {
           return next();
         }