chore: allow multiple sub pages within dev pages (#10137)

sissbruecker · web-flow · commit 5c269fa6226a · 2025-09-09T16:36:03.000+03:00
diff --git a/dev/charts/index.html b/dev/charts/index.html
@@ -9,6 +9,6 @@
   <body>
     <h1>Charts development pages</h1>
 
-    <ul id="listing"></ul>
+    <!-- LISTING -->
   </body>
 </html>
diff --git a/dev/index.html b/dev/index.html
@@ -9,6 +9,6 @@
   <body>
     <h1>Web Component development pages</h1>
 
-    <ul id="listing"></ul>
+    <!-- LISTING -->
   </body>
 </html>
diff --git a/dev/playground/button.html b/dev/playground/button.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Button</title>
+    <script type="module" src="../common.js"></script>
+
+    <script type="module">
+      window.Vaadin = {};
+      window.Vaadin.featureFlags = {};
+      window.Vaadin.featureFlags.accessibleDisabledButtons = true;
+    </script>
+    <script type="module">
+      import '@vaadin/button';
+      import '@vaadin/icon';
+      import '@vaadin/icons';
+      import '@vaadin/tooltip';
+      import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
+    </script>
+  </head>
+
+  <body>
+    <section class="section">
+      <h2 class="heading">Label & Icon</h2>
+      <vaadin-button>Reply</vaadin-button>
+      <vaadin-button>
+        <vaadin-icon icon="vaadin:reply" slot="prefix"></vaadin-icon>
+        Reply
+      </vaadin-button>
+      <vaadin-button aria-label="Reply">
+        <vaadin-icon icon="vaadin:reply"></vaadin-icon>
+        <vaadin-tooltip slot="tooltip" text="Reply"></vaadin-tooltip>
+      </vaadin-button>
+    </section>
+
+    <section class="section">
+      <h2 class="heading">Primary</h2>
+      <vaadin-button theme="primary">Reply</vaadin-button>
+      <vaadin-button theme="primary">
+        <vaadin-icon icon="vaadin:reply" slot="prefix"></vaadin-icon>
+        Reply
+      </vaadin-button>
+      <vaadin-button theme="primary" aria-label="Reply">
+        <vaadin-icon icon="vaadin:reply"></vaadin-icon>
+        <vaadin-tooltip slot="tooltip" text="Reply"></vaadin-tooltip>
+      </vaadin-button>
+    </section>
+
+    <section class="section">
+      <h2 class="heading">Tertiary</h2>
+      <vaadin-button theme="tertiary">Reply</vaadin-button>
+      <vaadin-button theme="tertiary">
+        <vaadin-icon icon="vaadin:reply" slot="prefix"></vaadin-icon>
+        Reply
+      </vaadin-button>
+      <vaadin-button theme="tertiary" aria-label="Reply">
+        <vaadin-icon icon="vaadin:reply"></vaadin-icon>
+        <vaadin-tooltip slot="tooltip" text="Reply"></vaadin-tooltip>
+      </vaadin-button>
+    </section>
+
+    <section class="section">
+      <h2 class="heading">Disabled</h2>
+      <vaadin-button theme="primary" disabled>Primary</vaadin-button>
+      <vaadin-button disabled>Secondary</vaadin-button>
+      <vaadin-button theme="tertiary" disabled>Tertiary</vaadin-button>
+    </section>
+
+    <section class="section">
+      <h2 class="heading">Custom Layout</h2>
+      <vaadin-button style="width: 150px">Reply</vaadin-button>
+      <vaadin-button style="width: 150px">
+        <vaadin-icon icon="vaadin:reply" slot="prefix"></vaadin-icon>
+        Reply
+      </vaadin-button>
+      <vaadin-button style="width: 150px" aria-label="Reply">
+        <vaadin-icon icon="vaadin:reply"></vaadin-icon>
+      </vaadin-button>
+      <vaadin-button style="width: 150px; justify-content: start">
+        <vaadin-icon icon="vaadin:reply" slot="prefix"></vaadin-icon>
+        Reply
+      </vaadin-button>
+      <vaadin-button style="flex-direction: column">
+        <vaadin-icon icon="vaadin:reply"></vaadin-icon>
+        Reply
+      </vaadin-button>
+    </section>
+  </body>
+</html>
diff --git a/dev/playground/index.html b/dev/playground/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dev pages</title>
+    <script type="module" src="../common.js"></script>
+  </head>
+  <body>
+    <h1>Playground pages</h1>
+
+    <!-- LISTING -->
+  </body>
+</html>
diff --git a/dev/rollup.config.js b/dev/rollup.config.js
@@ -5,7 +5,7 @@ import { rollupPluginHTML as html } from '@web/rollup-plugin-html';
 import postcss from 'postcss';
 import atImport from 'postcss-import';
 import url from 'postcss-url';
-import { appendStyles, generateListing } from '../wds-utils.js';
+import { appendStyles, generateListing, isIndexPage } from '../wds-utils.js';
 
 export default {
   input: '**/*.html',
@@ -14,12 +14,17 @@ export default {
     nodeResolve(),
     html({
       bundleAssetsFromCss: true, // Use Aura CSS fonts
-      flattenOutput: false, // Preserve "charts" folder
+      flattenOutput: false, // Preserve sub-folder structure
       transformHtml: [
         (html) => appendStyles(html),
         (html, { htmlFileName }) => {
-          const folderPath = htmlFileName === 'charts/index.html' ? '/charts' : '';
-          return generateListing(html, `.${folderPath}`);
+          // Index page listing
+          if (isIndexPage(html)) {
+            const path = htmlFileName.replace(/\/?(index.html)?$/u, '');
+            const dir = `./${path}`;
+            html = generateListing(html, dir);
+          }
+          return html;
         },
       ],
       transformAsset: [
diff --git a/wds-utils.js b/wds-utils.js
@@ -21,30 +21,60 @@ export function appendStyles(html) {
   return html.replace(/<\/body>/u, `${preventFouc}\n</body>`);
 }
 
-export function generateListing(html, dir, path) {
-  if (html.includes('<ul id="listing">')) {
-    // Add <base> to make index.html work when opening
-    // http://localhost:8000/dev or http://localhost:8000/dev/charts without trailing slash
-    const match = /\/(?<section>dev|charts)$/u.exec(path);
-    if (match) {
-      html = html.replace('<head>', `<head>\n<base href="${match.groups.section}/">`);
+export function isIndexPage(html) {
+  return html.includes('<!-- LISTING -->');
+}
+
+function isSubPage(dir, file) {
+  const filePath = `${dir}/${file}`;
+  if (fs.existsSync(filePath) && fs.statSync(filePath).isDirectory()) {
+    const indexPath = `${filePath}/index.html`;
+    return fs.existsSync(indexPath);
+  }
+  return false;
+}
+
+export function generateListing(html, dir) {
+  if (isIndexPage(html)) {
+    const files = fs.readdirSync(dir || '.').filter((file) => file !== 'index.html' && file !== 'dist');
+
+    // Separate sub pages (folders with index.html) from HTML files
+    const subPages = files.filter((file) => isSubPage(dir, file));
+    const htmlFiles = files.filter((file) => file.endsWith('.html'));
+
+    let listing = '';
+
+    // Add sub pages section if there are any
+    if (subPages.length > 0) {
+      listing += `
+        <h2>Sub pages</h2>
+        <ul>
+          ${subPages
+            .map(
+              (file) => `<li>
+              <a href="${file}/">${file}/</a>
+            </li>`,
+            )
+            .join('')}
+        </ul>`;
+    }
+
+    // Add HTML files section if there are any
+    if (htmlFiles.length > 0) {
+      listing += `
+        <h2>Pages</h2>
+        <ul>
+          ${htmlFiles
+            .map(
+              (file) => `<li>
+              <a href="${file}">${file}</a>
+            </li>`,
+            )
+            .join('')}
+        </ul>`;
     }
 
-    const listing = `
-      <ul id="listing">
-        ${fs
-          .readdirSync(dir || '.')
-          .filter((file) => file !== 'index.html')
-          .filter((file) => file.endsWith('.html') || file === 'charts')
-          .map(
-            (file) => `<li>
-            <a href="${file}${file.endsWith('.html') ? '' : '/'}">${file}</a>
-          </li>`,
-          )
-          .join('')}
-      </ul>`;
-
-    return html.replace(/<ul id="listing">.*<\/ul>/u, listing);
+    return html.replace(/<!-- LISTING -->/u, listing);
   }
 
   return html;
diff --git a/web-dev-server.config.js b/web-dev-server.config.js
@@ -1,5 +1,5 @@
 import { esbuildPlugin } from '@web/dev-server-esbuild';
-import { appendStyles, generateListing } from './wds-utils.js';
+import { appendStyles, generateListing, isIndexPage } from './wds-utils.js';
 
 const theme = process.argv.join(' ').match(/--theme=(\w+)/u)?.[1] ?? 'base';
 
@@ -76,13 +76,13 @@ export default {
           body = appendStyles(body);
 
           // Index page listing
-          const devPageMatch = /^\/dev(?:\/(?<section>charts))?(?:\/index\.html|\/)?$/u.exec(context.path);
+          if (isIndexPage(body)) {
+            const path = context.path.replace(/\/?(index.html)?$/u, '');
+            const dir = `.${path}`;
+            body = generateListing(body, dir);
 
-          if (devPageMatch) {
-            // If a group was captured, then it's in the /dev/charts path,
-            // otherwise it should list the pages under the /dev folder
-            const dir = devPageMatch.groups.section ? './dev/charts' : './dev';
-            body = generateListing(body, dir, context.path);
+            // Add <base> to make index pages work without trailing slash
+            body = body.replace('<head>', `<head>\n<base href="${path}/">`);
           }
 
           return { body };
