Merge pull request #2464 from patternfly/fix/tools/dev-server-config

fix(tools): account for custom componentsSubpath in router

Author: zeroedin

.changeset/long-islands-retire.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/pfe-tools": patch
+---
+
+**Dev Server**: updates router to use project subpath configuration

tools/pfe-tools/config.ts

@@ -13,7 +13,7 @@ interface SiteOptions {
   stylesheets?: string[];
   /** Title for main page of the demo */
   title?: string;
-  /** Site subpath for components. e.g. 'elements'. default: 'components' */
+  /** Site subpath for components. default: 'components' i.e. 'https://patternflyelements.org/components' */
   componentSubpath?: string;
 }
 
@@ -46,6 +46,7 @@ const SITE_DEFAULTS: Required<SiteOptions> = {
 const DEFAULT_CONFIG: PfeConfig = {
   demoURLPrefix: 'https://patternflyelements.org/',
   sourceControlURLPrefix: 'https://github.com/patternfly/patternfly-elements/tree/main/',
+  elementsDir: 'elements',
   tagPrefix: 'pf',
   aliases: {},
 };

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

@@ -94,57 +94,51 @@ function pfeDevServerPlugin(options: PfeDevServerInternalConfig): Plugin {
   return {
     name: 'pfe-dev-server',
     async serverStart({ fileWatcher, app }) {
-      app.use(new Router()
-        .get(/\/pf-icon\/icons\/.*\.js$/, (ctx, next) => {
-          ctx.type = 'application/javascript';
-          return next();
-        })
-        .get('/elements/:tagName/:fileName.js', async ctx => {
-          return ctx.redirect(`/elements/${ctx.params.tagName}/${ctx.params.fileName}.ts`);
-        })
-        .get('/tools/pfe-tools/environment.js(.js)?', async ctx => {
-          ctx.body = await makeDemoEnv(options.rootDir);
-          ctx.type = 'application/javascript';
-        })
-        // redirect /components/jazz-hands/pf-jazz-hands/index.html to /elements/pf-jazz-hands/demo/pf-jazz-hands.html
-        // redirect /components/jazz-hands/index.html to /elements/pf-jazz-hands/demo/pf-jazz-hands.html
-        .get('/components/:slug/demo/:sub?/:fileName', (ctx, next) => {
-          const { slug, fileName } = ctx.params;
-          if (fileName.includes('.')) {
-            const tagName = deslugify(slug, options.rootDir);
-            const redir = `/elements/${tagName}/demo/${fileName === 'index.html' ? tagName : fileName}`;
-            ctx.redirect(redir);
-          }
-          return next();
-        })
-        // redirect /components/jazz-hands/pf-jazz-hands-lightdom.css to /elements/pf-jazz-hands/pf-jazz-hands-lightdom.css
-        .get('/components/:slug/demo/:sub?/:fileName.css', (ctx, next) => {
-          // FIXME: will probably break if one component links to another's lightdom css.
-          //        better to find out why it's requesting from /components/ in the first place
-          const { slug, fileName } = ctx.params;
-          const tagName = deslugify(slug);
-          if (tagName && fileName.includes('-lightdom')) {
-            return ctx.redirect(`/elements/${tagName}/${fileName}.css`);
-          } else {
+      const { elementsDir, tagPrefix } = options;
+      const { componentSubpath } = options.site;
+      const router =
+        new Router()
+          .get(/\/pf-icon\/icons\/.*\.js$/, (ctx, next) => {
+            ctx.type = 'application/javascript';
             return next();
-          }
-        })
-        // redirect /components/jazz-hands/demo/demo.css to /elements/pf-jazz-hands/demo/demo.css
-        // redirect /components/jazz-hands/demo/special-demo/demo.css to /elements/pf-jazz-hands/demo/demo.css
-        .get('/components/:slug/demo/:sub?/:fileName.:ext', (ctx, next) => {
-          // FIXME: will probably break if one component links to another's lightdom css.
-          //        better to find out why it's requesting from /components/ in the first place
-          const { slug, fileName, ext } = ctx.params;
-          const tagName = deslugify(slug);
-          const lastDir = ctx.originalUrl.split('/').at(-2);
-          if (tagName && lastDir !== 'demo') {
-            return ctx.redirect(`/elements/${tagName}/demo/${fileName}.${ext}`);
-          } else {
-            return next();
-          }
-        })
-        .routes());
-
+          })
+          .get('/tools/pfe-tools/environment.js(.js)?', async ctx => {
+            ctx.body = await makeDemoEnv(options.rootDir);
+            ctx.type = 'application/javascript';
+          })
+          // Redirect `components/jazz-hands/*.js` to `components/pf-jazz-hands/*.ts`
+          .get(`/${componentSubpath}/:element/:fileName.js`, async ctx => {
+            const { element, fileName } = ctx.params;
+            ctx.redirect(`/${elementsDir}/${element}/${fileName}.ts`);
+          })
+          // Redirect `elements/jazz-hands/*.js` to `elements/pf-jazz-hands/*.ts`
+          .get(`/${elementsDir}/:element/:fileName.js`, async ctx => {
+            const { element, fileName } = ctx.params;
+            ctx.redirect(`/${elementsDir}/${element}/${fileName}.ts`);
+          })
+          // Redirect `components/jazz-hands/demo/*.js|css` to `components/pf-jazz-hands/demo/*.js|css`
+          .get(`/${componentSubpath}/:element/demo/:demoSubDir?/:fileName.:ext`, async (ctx, next) => {
+            const { element, fileName, ext } = ctx.params;
+            if (!element.includes(tagPrefix)) {
+              ctx.redirect(`/${elementsDir}/${tagPrefix}-${element}/demo/${fileName}.${ext}`);
+            } else {
+              return next();
+            }
+          })
+          // Redirect `components/jazz-hands/*` to `components/pf-jazz-hands/*` for requests not previously handled
+          .get(`/${componentSubpath}/:element/:splatPath*`, async (ctx, next) => {
+            const { element, splatPath } = ctx.params;
+            if (splatPath.includes('demo')) {
+              /* if its the demo directory return */
+              return next();
+            }
+            if (!element.includes(tagPrefix)) {
+              ctx.redirect(`/${elementsDir}/${tagPrefix}-${element}/${splatPath}`);
+            } else {
+              return next();
+            }
+          });
+      app.use(router.routes());
       const files = await glob(options.watchFiles, { cwd: process.cwd() });
       for (const file of files) {
         fileWatcher.add(file);