Skip to content

fix(storybook-angular): use oxc config instead of esbuild for Vite 8#2313

Merged
brandonroberts merged 2 commits into
betafrom
fix/2312-storybook-oxc-backport
Apr 21, 2026
Merged

fix(storybook-angular): use oxc config instead of esbuild for Vite 8#2313
brandonroberts merged 2 commits into
betafrom
fix/2312-storybook-oxc-backport

Conversation

@brandonroberts

Copy link
Copy Markdown
Member

PR Checklist

Closes #2312

Affected scope

  • Primary scope: storybook-angular
  • Secondary scopes: none

Recommended merge strategy for maintainer [optional]

  • Squash merge
  • Rebase merge
  • Other

What is the new behavior?

Backports the esbuild-to-oxc detection from alpha to beta. Vite 8 deprecated the esbuild config option in favor of oxc, causing deprecation warnings when running Storybook builds.

The plugin now checks vite.rolldownVersion (present in Vite 8+) to decide whether to set oxc: { keepNames: true } or esbuild: { keepNames: true }, matching the pattern already used across the rest of the codebase. Also renames the plugin from analogjs-storybook-esbuild-config to analogjs-storybook-transform-config to reflect the change.

Test plan

  • nx format:check
  • pnpm build
  • pnpm test
  • Manual verification

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

This is a minimal backport of the relevant changes from analogjs/analog#2121 (already on alpha). The full alpha diff includes unrelated type annotations, debug logging, and SCSS resolution changes that are not included here.

🤖 Generated with Claude Code

Backports the esbuild-to-oxc detection from alpha to beta. Vite 8
deprecated the `esbuild` config option in favor of `oxc`, causing
deprecation warnings when running Storybook builds.

Closes #2312

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@netlify

netlify Bot commented Apr 21, 2026

Copy link
Copy Markdown

Deploy Preview for analog-blog ready!

Name Link
🔨 Latest commit 7b7f795
🔍 Latest deploy log https://app.netlify.com/projects/analog-blog/deploys/69e771a8475c15000845d07f
😎 Deploy Preview https://deploy-preview-2313--analog-blog.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Apr 21, 2026

Copy link
Copy Markdown

Deploy Preview for analog-app ready!

Name Link
🔨 Latest commit 7b7f795
🔍 Latest deploy log https://app.netlify.com/projects/analog-app/deploys/69e771a8aa787600086715a2
😎 Deploy Preview https://deploy-preview-2313--analog-app.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Apr 21, 2026

Copy link
Copy Markdown

Deploy Preview for analog-docs ready!

Name Link
🔨 Latest commit 7b7f795
🔍 Latest deploy log https://app.netlify.com/projects/analog-docs/deploys/69e771aa632cc1000876e241
😎 Deploy Preview https://deploy-preview-2313--analog-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions github-actions Bot added the scope:storybook-angular Changes in @analogjs/storybook-angular label Apr 21, 2026
@coderabbitai

coderabbitai Bot commented Apr 21, 2026

Copy link
Copy Markdown
📝 Walkthrough

Walkthrough

The Vite preset for Storybook Angular was updated to replace the esbuild-specific transform plugin with a generic transform-config plugin and to select the transform backend dynamically: it uses oxc when vite.rolldownVersion is present, otherwise falls back to esbuild. The internal plugin and factory names were renamed accordingly, and vite is now imported to inspect rolldownVersion. Tests were adjusted to include an explicit rolldownVersion: undefined in the mocked vite exports.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Observations

  • Regression risk: low — behavior is conditional and falls back to the previous esbuild path when rolldownVersion is absent.
  • API compatibility: unchanged — no public/exported declarations modified.
  • Test changes: mocks now include rolldownVersion: undefined; verify tests cover both branches (oxc present vs absent).
  • Release impact: minor patch; internal plugin rename should not affect consumers but may alter log/warning text.
  • Monorepo consistency: changes are localized to the preset and its tests; no cascade expected.
🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The PR title follows Conventional Commits style with correct scope (storybook-angular) and clearly summarizes the main change: using oxc instead of esbuild for Vite 8.
Description check ✅ Passed The PR description is detailed and directly related to the changeset, explaining the motivation (Vite 8 deprecation), implementation details (rolldownVersion detection), and scope of the backport.
Linked Issues check ✅ Passed The code changes directly address issue #2312 by implementing conditional oxc/esbuild configuration based on vite.rolldownVersion presence, eliminating the deprecation warning.
Out of Scope Changes check ✅ Passed All changes are scoped to storybook-angular plugin configuration and its tests; no unrelated modifications detected in the summary.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/storybook-angular/src/lib/preset.ts`:
- Line 4: Add unit tests for storybookTransformConfigPlugin's Vite version
detection by mocking vite.rolldownVersion truthy and falsy and asserting the
produced transform config contains the correct key; when vite.rolldownVersion is
truthy expect the plugin to produce { oxc: { keepNames: true } } and when falsy
expect { esbuild: { keepNames: true } }. In your test file import the plugin
factory from packages/storybook-angular/src/lib/preset.ts
(storybookTransformConfigPlugin), stub or spy on vite.rolldownVersion to return
true/false for each test case, invoke the plugin to get its transform config,
and assert the presence of the appropriate key and value.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 634f955d-c40b-4be0-bae6-b1b05220b6df

📥 Commits

Reviewing files that changed from the base of the PR and between a9e99a1 and c1c9510.

📒 Files selected for processing (1)
  • packages/storybook-angular/src/lib/preset.ts

Comment thread packages/storybook-angular/src/lib/preset.ts
The vite namespace mock needs rolldownVersion defined so the
storybookTransformConfigPlugin can access it without vitest throwing
a missing-export error.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🧹 Nitpick comments (1)
packages/storybook-angular/src/lib/preset.spec.ts (1)

24-70: Consider adding coverage for the oxc (Vite 8+) branch.

Both mocks pin rolldownVersion: undefined, which only exercises the esbuild fallback in storybookTransformConfigPlugin. Since this PR's whole reason for existing is the Vite 8 / rolldown path, a tiny companion test that mocks rolldownVersion: '1.0.0' and asserts the resulting plugin emits an oxc: { keepNames: true } config (rather than esbuild) would lock in the fix and guard against a silent regression if the conditional ever flips. Otherwise the backport is only verified by the branch that already worked.

🧪 Sketch
it('uses oxc transform config when rolldownVersion is present (Vite 8+)', async () => {
  vi.resetModules();
  vi.doMock('vite', () => ({
    mergeConfig: (_b: unknown, o: unknown) => o,
    normalizePath: (p: string) => p,
    rolldownVersion: '1.0.0',
  }));
  registerDependencyMocks(); // or inline the other doMocks
  const { viteFinal: fresh } = await import('./preset');

  const result = await fresh(baseConfig, makeOptions({}));
  const transformPlugin = result.plugins
    .flat()
    .find((p: any) => p?.name === 'analogjs-storybook-transform-config');
  const cfg = transformPlugin?.config?.();

  expect(cfg?.oxc?.keepNames).toBe(true);
  expect(cfg?.esbuild).toBeUndefined();
});
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/storybook-angular/src/lib/preset.spec.ts` around lines 24 - 70, Add
a test that exercises the Vite 8+ branch by mocking vite.rolldownVersion to a
non-undefined value (e.g., '1.0.0') before re-importing the module and calling
viteFinal; reuse registerDependencyMocks to re-register other mocks, then find
the plugin named 'analogjs-storybook-transform-config' in the returned config
and assert that its config() returns an oxc object with keepNames: true and that
esbuild is undefined.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/storybook-angular/src/lib/preset.spec.ts`:
- Around line 24-70: Add a test that exercises the Vite 8+ branch by mocking
vite.rolldownVersion to a non-undefined value (e.g., '1.0.0') before
re-importing the module and calling viteFinal; reuse registerDependencyMocks to
re-register other mocks, then find the plugin named
'analogjs-storybook-transform-config' in the returned config and assert that its
config() returns an oxc object with keepNames: true and that esbuild is
undefined.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 6944515a-dca8-44ed-98e8-97ef3ad1ed03

📥 Commits

Reviewing files that changed from the base of the PR and between c1c9510 and 7b7f795.

📒 Files selected for processing (1)
  • packages/storybook-angular/src/lib/preset.spec.ts

@brandonroberts brandonroberts merged commit ef16e7e into beta Apr 21, 2026
20 checks passed
@brandonroberts brandonroberts deleted the fix/2312-storybook-oxc-backport branch April 21, 2026 12:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

scope:storybook-angular Changes in @analogjs/storybook-angular

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Storybook plugin deprecated esbuild option warning from vite 8

1 participant