Skip to content

React: Create a components manifest html page #32882

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 23 commits into from
Oct 30, 2025
Merged

React: Create a components manifest html page #32882

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
f30520c
Create manifests/components.html page
kasperpeulen Oct 29, 2025
3b1c417
Better error messages
kasperpeulen Oct 29, 2025
b361d37
Fix css
kasperpeulen Oct 29, 2025
b36905f
Look up index files as well for raw component paths
kasperpeulen Oct 29, 2025
f93f388
Improve error messages
kasperpeulen Oct 29, 2025
6f33595
Improve component path calculation
kasperpeulen Oct 29, 2025
303372a
Improve errror message
kasperpeulen Oct 29, 2025
1d2ff16
Fix matchPath from tsconfig
kasperpeulen Oct 29, 2025
da371a0
Parse CSF2 args
kasperpeulen Oct 29, 2025
eb3381a
Cleanup manifest code
kasperpeulen Oct 29, 2025
5c7725f
Improve error message
kasperpeulen Oct 29, 2025
569fb1b
Greatly improve resolved path resolution
kasperpeulen Oct 30, 2025
20049de
Typo
kasperpeulen Oct 30, 2025
15b6805
Improve error
kasperpeulen Oct 30, 2025
8f03c22
Group by errors
kasperpeulen Oct 30, 2025
2d50a45
Remove dedent
kasperpeulen Oct 30, 2025
074c9b5
Fix ids
kasperpeulen Oct 30, 2025
f09df14
Prefer js to make no breaking changes
kasperpeulen Oct 30, 2025
a7160e6
Fix unit tests
kasperpeulen Oct 30, 2025
059bed1
Fix unit tests
kasperpeulen Oct 30, 2025
d65d0e7
Also build it static
kasperpeulen Oct 30, 2025
cf22079
Address review
kasperpeulen Oct 30, 2025
813ff59
Merge branch '10.1-with-canary-release' into kasper/manifests.html
JReinhold Oct 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 30 additions & 1 deletion code/core/src/core-server/dev-server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import { logConfig } from 'storybook/internal/common';
import { logger } from 'storybook/internal/node-logger';
import { MissingBuilderError } from 'storybook/internal/server-errors';
import type { Options } from 'storybook/internal/types';
import type { ComponentsManifest, Options } from 'storybook/internal/types';
import { type ComponentManifestGenerator } from 'storybook/internal/types';

import compression from '@polka/compression';
import polka from 'polka';
import invariant from 'tiny-invariant';

import { telemetry } from '../telemetry';
import { renderManifestComponentsPage } from './manifest';
import { type StoryIndexGenerator } from './utils/StoryIndexGenerator';
import { doTelemetry } from './utils/doTelemetry';
import { getManagerBuilder, getPreviewBuilder } from './utils/get-builders';
Expand Down Expand Up @@ -165,6 +166,34 @@ export async function storybookDevServer(options: Options) {
return;
}
});

app.get('/manifests/components.html', async (req, res) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it would be nice to also support '/manifests/components', without the html extension. just call get() two times with the same handler.

try {
const componentManifestGenerator: ComponentManifestGenerator = await options.presets.apply(
'experimental_componentManifestGenerator'
);
const indexGenerator = await initializedStoryIndexGenerator;

if (!componentManifestGenerator || !indexGenerator) {
res.statusCode = 400;
res.setHeader('Content-Type', 'text/html; charset=utf-8');
res.end(`<pre>No component manifest generator configured.</pre>`);
return;
}

const manifest = (await componentManifestGenerator(
indexGenerator as unknown as import('storybook/internal/core-server').StoryIndexGenerator
)) as ComponentsManifest;

res.setHeader('Content-Type', 'text/html; charset=utf-8');
res.end(renderManifestComponentsPage(manifest));
} catch (e) {
// logger?.error?.(e instanceof Error ? e : String(e));
res.statusCode = 500;
res.setHeader('Content-Type', 'text/html; charset=utf-8');
res.end(`<pre>${e instanceof Error ? e.toString() : String(e)}</pre>`);
}
Comment on lines +191 to +195
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Escape HTML in error responses to avoid XSS; log the error.

Interpolating raw error text into HTML is unsafe. Also, keep server logs. Two options:

  • Safer HTML: escape the string and keep text/html.
  • Or return text/plain without HTML.

Suggested patch (HTML + escape + logging):

-      } catch (e) {
-        // logger?.error?.(e instanceof Error ? e : String(e));
-        res.statusCode = 500;
-        res.setHeader('Content-Type', 'text/html; charset=utf-8');
-        res.end(`<pre>${e instanceof Error ? e.toString() : String(e)}</pre>`);
-      }
+      } catch (e) {
+        logger.error(e instanceof Error ? e : String(e));
+        const esc = (s: unknown) =>
+          String(s ?? '').replace(/[&<>"']/g, (c) => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c] as string));
+        res.statusCode = 500;
+        res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        const msg = e instanceof Error ? e.toString() : String(e);
+        res.end(`<pre><code>${esc(msg)}</code></pre>`);
+      }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// logger?.error?.(e instanceof Error ? e : String(e));
res.statusCode = 500;
res.setHeader('Content-Type', 'text/html; charset=utf-8');
res.end(`<pre>${e instanceof Error ? e.toString() : String(e)}</pre>`);
}
} catch (e) {
logger.error(e instanceof Error ? e : String(e));
const esc = (s: unknown) =>
String(s ?? '').replace(/[&<>"']/g, (c) => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c] as string));
res.statusCode = 500;
res.setHeader('Content-Type', 'text/html; charset=utf-8');
const msg = e instanceof Error ? e.toString() : String(e);
res.end(`<pre><code>${esc(msg)}</code></pre>`);
}
🤖 Prompt for AI Agents 
In code/core/src/core-server/dev-server.ts around lines 191 to 195, the error
response currently interpolates raw error text into HTML and doesn't log the
error; replace that with a safe approach: log the error via the server logger
(e.g., logger?.error(e)) and then either (a) escape the error string for HTML
(implement or use an escape utility to replace &,<,>,",') and return as
text/html with the escaped content, or (b) simpler—set Content-Type to
text/plain; charset=utf-8 and return the raw string there; ensure res.statusCode
remains 500 and use e instanceof Error ? e.toString() : String(e) as the source
for logging/escaping.

});
}
// Now the preview has successfully started, we can count this as a 'dev' event.
doTelemetry(app, core, initializedStoryIndexGenerator as Promise<StoryIndexGenerator>, options);
Expand Down
Loading