Fix/tools/dev server sources (#2686)

* fix(tools): dev server load sources

* fix(tools): dev server page styles

Author: bennypowers

tools/pfe-tools/dev-server/demo.css

@@ -25,10 +25,10 @@ html, body {
   line-height: var(--pf-global--LineHeight--md, 1.5);
   text-align: left;
   background-color: var(--pf-global--BackgroundColor--100, #fff);
+  min-height: 100vh;
 }
 
 body {
-  min-height: 100%;
   display: grid;
   grid-template-rows: var(--pf-demo-header-height, 4.375rem) auto;
   grid-template-columns: 100vw;

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

@@ -123,6 +123,19 @@ function getRouter(options: PfeDevServerInternalConfig) {
       } else {
         return next();
       }
+    })
+
+    .get(`/${elementsDir}/:element/:splatPath*.(css|js)`, async function(ctx, next) {
+      ctx.response.etag = performance.now().toString();
+      return next();
+    })
+
+    // Redirect `elements/pf-jazz-hands/*.js` to `elements/pf-jazz-hands/*.ts` for requests not previously handled
+    .get(`/${elementsDir}/:element/:splatPath*.js`, async ctx => {
+      const { element, splatPath } = ctx.params;
+      if (element.startsWith(tagPrefix) && !splatPath.includes('/')) {
+        ctx.redirect(`/${elementsDir}/${element}/${splatPath}.ts`);
+      }
     });
 
   return router.routes();