fix(tools): build filePath using elementsDir if not present in demo source parts

Author: zeroedin

tools/pfe-tools/custom-elements-manifest/lib/Manifest.ts

@@ -314,12 +314,20 @@ export class Manifest {
       // strict removes all special characters from slug
       slug = slugify(slug, { strict: true, lower: true });
       const primaryElementName = deslugify(slug, options.rootDir);
-      const filePath = path.normalize(
-        path.posix.join(
-          options.rootDir,
-          options.elementsDir,
-          decodeURIComponent(demo.source?.href.replace(options.sourceControlURLPrefix, '') ?? ''),
-        ));
+      const demoSource =
+        decodeURIComponent(demo.source?.href.replace(options.sourceControlURLPrefix, '') ?? '');
+      // split the demoSource into an array of parts
+      const demoSourceParts = demoSource.split('/');
+      // if demoSourceParts contains options.elementsDir, then build the filePath from the rootDir and the demoSource
+      let filePath;
+      if (demoSourceParts.includes(options.elementsDir)) {
+        filePath =
+          path.normalize(path.posix.join(options.rootDir, demoSource));
+      // otherwise, build the filePath from the rootDir, options.elementsDir, and the demoSource
+      } else {
+        filePath =
+          path.normalize(path.posix.join(options.rootDir, options.elementsDir, demoSource));
+      }
       const [last = ''] = filePath.split(path.sep).reverse();
       const filename = last.replace('.html', '');
       const isMainElementDemo = filename === 'index';

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

@@ -69,14 +69,7 @@ export function pfeDevServerTemplateMiddleware(config: PfeDevServerInternalConfi
     if (config.loadDemo && !(method !== 'HEAD' && method !== 'GET' || path.includes('.'))) {
       const url = new URL(ctx.request.url, `http://${ctx.request.headers.host}`);
       const demos = await getDemos(config);
-      // const demo = demos.find(x => x.permalink === url.pathname);
-      let demo = demos.find(x => x.permalink === url.pathname);
-      // Handle case where URL ends with /demo/ but permalink was shortened to just /
-      // e.g., request for /compoennts/jazz-hands/demo/ should match demo with permalink /components/jazz-hands/
-      if (!demo && url.pathname.endsWith('/demo/')) {
-        const alternativePathname = url.pathname.replace('/demo/', '/');
-        demo = demos.find(x => x.permalink === alternativePathname);
-      }
+      const demo = demos.find(x => x.permalink === url.pathname);
       const manifest = demo?.manifest;
       const templateContent = await getTemplateContent(demo);
       ctx.cwd = process.cwd();