Update dependency vite to v8 (#38174)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: ChaosExAnima <ChaosExAnima@users.noreply.github.com>

.storybook/vitest.setup.ts

@@ -1,8 +0,0 @@
-import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
-import { setProjectAnnotations } from '@storybook/react-vite';
-
-import * as projectAnnotations from './preview';
-
-// This is an important step to apply the right configuration when testing your stories.
-// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
-setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

app/javascript/mastodon/features/emoji/worker.ts

@@ -1,9 +1,4 @@
 import { EMOJI_DB_NAME_SHORTCODES, EMOJI_TYPE_CUSTOM } from './constants';
-import {
-  importCustomEmojiData,
-  importEmojiData,
-  importLegacyShortcodes,
-} from './loader';
 
 addEventListener('message', handleMessage);
 self.postMessage('ready'); // After the worker is ready, notify the main thread
@@ -16,6 +11,8 @@ function handleMessage(event: MessageEvent<{ locale: string }>) {
 }
 
 async function loadData(locale: string) {
+  const { importCustomEmojiData, importEmojiData, importLegacyShortcodes } =
+    await import('./loader');
   let importCount: number | undefined;
   if (locale === EMOJI_TYPE_CUSTOM) {
     importCount = (await importCustomEmojiData())?.length;

app/javascript/testing/api.ts

@@ -51,13 +51,17 @@ export const mockHandlers = {
     '/packs-dev/emoji/:locale.json',
     async ({ params }) => {
       const locale = toSupportedLocale(params.locale);
+      const key = `../../../../../node_modules/emojibase-data/${locale}/compact.json`;
+      const emojiModules = import.meta.glob<CompactEmoji[]>(
+        '../../../../../node_modules/emojibase-data/**/compact.json',
+        { import: 'default' },
+      );
+      const path = emojiModules[key];
+      if (!path) {
+        throw new Error(`Unsupported locale: ${locale}`);
+      }
       action('fetching emoji data')(locale);
-      const { default: data } = (await import(
-        /* @vite-ignore */
-        `emojibase-data/${locale}/compact.json`
-      )) as {
-        default: CompactEmoji[];
-      };
+      const data = await path();
 
       return HttpResponse.json([data]);
     },

config/vite/plugin-mastodon-themes.ts

@@ -24,7 +24,7 @@ export function MastodonThemes(): Plugin {
 
       let entrypoints: Record<string, string> = {};
 
-      const existingInputs = userConfig.build?.rollupOptions?.input;
+      const existingInputs = userConfig.build?.rolldownOptions?.input;
 
       if (typeof existingInputs === 'string') {
         entrypoints[path.basename(existingInputs)] = existingInputs;
@@ -46,7 +46,7 @@ export function MastodonThemes(): Plugin {
 
       return {
         build: {
-          rollupOptions: {
+          rolldownOptions: {
             input: entrypoints,
           },
         },

package.json

@@ -51,8 +51,9 @@
     "@optimize-lodash/rollup-plugin": "^6.0.0",
     "@react-spring/web": "^9.7.5",
     "@reduxjs/toolkit": "^2.0.1",
+    "@rolldown/plugin-babel": "^0.2.2",
     "@use-gesture/react": "^10.3.1",
-    "@vitejs/plugin-legacy": "^7.2.1",
+    "@vitejs/plugin-legacy": "^8.0.0",
     "@vitejs/plugin-react": "^5.0.0",
     "arrow-key-navigation": "^1.2.0",
     "async-mutex": "^0.5.0",
@@ -108,8 +109,8 @@
     "redux-immutable": "^4.0.0",
     "regenerator-runtime": "^0.14.0",
     "requestidlecallback": "^0.3.0",
-    "rollup-plugin-gzip": "^4.1.1",
-    "rollup-plugin-visualizer": "^6.0.3",
+    "rollup-plugin-gzip": "^4.2.0",
+    "rollup-plugin-visualizer": "^7.0.1",
     "sass": "^1.62.1",
     "scroll-behavior": "^0.11.0",
     "stacktrace-js": "^2.0.2",
@@ -119,11 +120,10 @@
     "tiny-queue": "^0.2.1",
     "twitter-text": "3.1.0",
     "use-debounce": "^10.0.0",
-    "vite": "^7.1.1",
+    "vite": "^8.0.0",
     "vite-plugin-manifest-sri": "^0.2.0",
-    "vite-plugin-pwa": "^1.0.2",
-    "vite-plugin-svgr": "^4.3.0",
-    "vite-tsconfig-paths": "^6.0.0",
+    "vite-plugin-pwa": "^1.2.0",
+    "vite-plugin-svgr": "^4.5.0",
     "wicg-inert": "^3.1.2",
     "workbox-expiration": "^7.3.0",
     "workbox-routing": "^7.3.0",
@@ -133,10 +133,10 @@
   "devDependencies": {
     "@eslint/js": "^9.39.2",
     "@formatjs/cli": "^6.1.1",
-    "@storybook/addon-a11y": "^10.0.6",
-    "@storybook/addon-docs": "^10.0.6",
-    "@storybook/addon-vitest": "^10.0.6",
-    "@storybook/react-vite": "^10.0.6",
+    "@storybook/addon-a11y": "^10.3.0",
+    "@storybook/addon-docs": "^10.3.0",
+    "@storybook/addon-vitest": "^10.3.0",
+    "@storybook/react-vite": "^10.3.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@types/debug": "^4",
@@ -161,10 +161,10 @@
     "@types/react-toggle": "^4.0.3",
     "@types/redux-immutable": "^4.0.3",
     "@types/requestidlecallback": "^0.3.5",
-    "@vitest/browser": "^4.0.5",
-    "@vitest/browser-playwright": "^4.0.5",
-    "@vitest/coverage-v8": "^4.0.5",
-    "@vitest/ui": "^4.0.5",
+    "@vitest/browser": "^4.1.0",
+    "@vitest/browser-playwright": "^4.1.0",
+    "@vitest/coverage-v8": "^4.1.0",
+    "@vitest/ui": "^4.1.0",
     "chromatic": "^13.3.3",
     "eslint": "^9.39.2",
     "eslint-import-resolver-typescript": "^4.2.5",
@@ -185,13 +185,13 @@
     "oxfmt": "^0.33.0",
     "playwright": "^1.57.0",
     "react-test-renderer": "^18.2.0",
-    "storybook": "^10.0.5",
+    "storybook": "^10.3.0",
     "stylelint": "^17.0.0",
     "stylelint-config-standard-scss": "^17.0.0",
     "typescript": "~5.9.0",
     "typescript-eslint": "^8.55.0",
     "typescript-plugin-css-modules": "^5.2.0",
-    "vitest": "^4.0.5"
+    "vitest": "^4.1.0"
   },
   "resolutions": {
     "@types/react": "^18.2.7",

vite.config.mts

@@ -2,6 +2,7 @@ import { readdir } from 'node:fs/promises';
 import path from 'node:path';
 
 import { optimizeLodashImports } from '@optimize-lodash/rollup-plugin';
+import babel from '@rolldown/plugin-babel';
 import legacy from '@vitejs/plugin-legacy';
 import react from '@vitejs/plugin-react';
 import postcssPresetEnv from 'postcss-preset-env';
@@ -16,7 +17,6 @@ import {
 import manifestSRI from 'vite-plugin-manifest-sri';
 import { VitePWA } from 'vite-plugin-pwa';
 import svgr from 'vite-plugin-svgr';
-import tsconfigPaths from 'vite-tsconfig-paths';
 
 import { MastodonAssetsManifest } from './config/vite/plugin-assets-manifest';
 import { MastodonEmojiCompressed } from './config/vite/plugin-emoji-compressed';
@@ -44,6 +44,7 @@ export const config: UserConfigFnPromise = async ({ mode, command }) => {
     base: `/${outDirName}/`,
     envDir: __dirname,
     resolve: {
+      tsconfigPaths: true,
       alias: {
         '~/': `${jsRoot}/`,
         '@/': `${jsRoot}/`,
@@ -122,7 +123,7 @@ export const config: UserConfigFnPromise = async ({ mode, command }) => {
       assetsDir: 'assets',
       assetsInlineLimit: (filePath, _) =>
         /\.woff2?$/.exec(filePath) ? false : undefined,
-      rollupOptions: {
+      rolldownOptions: {
         input: await findEntrypoints(),
         output: {
           chunkFileNames({ facadeModuleId, name }) {
@@ -168,11 +169,9 @@ export const config: UserConfigFnPromise = async ({ mode, command }) => {
       format: 'es',
     },
     plugins: [
-      tsconfigPaths({ projects: [path.resolve(__dirname, 'tsconfig.json')] }),
-      react({
-        babel: {
-          plugins: ['formatjs', 'transform-react-remove-prop-types'],
-        },
+      react(),
+      babel({
+        plugins: ['formatjs', 'transform-react-remove-prop-types'],
       }),
       MastodonThemes(),
       MastodonAssetsManifest(),

vitest.config.mts

@@ -27,7 +27,6 @@ const storybookTests: TestProjectInlineConfiguration = {
       provider: playwright(),
       instances: [{ browser: 'chromium' }],
     },
-    setupFiles: [resolve(__dirname, '.storybook/vitest.setup.ts')],
   },
 };