enhance(frontend): update vite to v8 再 (#17289)

* Revert "Revert "deps: Update vite to v8" (#17283)"

This reverts commit a18c909.

* fix(frontend): popupのりアクティビティがチャンクをまたいで切れる事がある問題を修正

* update vite/rolldown

Author: kakkokari-gtyih

packages/backend/package.json

@@ -228,6 +228,6 @@
 		"pid-port": "2.1.0",
 		"simple-oauth2": "5.1.0",
 		"supertest": "7.2.2",
-		"vite": "7.3.1"
+		"vite": "8.0.7"
 	}
 }

packages/frontend-builder/locale-inliner/collect-modifications.ts

@@ -3,10 +3,11 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { parseAst } from 'vite';
+import { parseAst } from 'rolldown/parseAst';
 import * as estreeWalker from 'estree-walker';
 import { assertNever, assertType } from '../utils.js';
-import type { AstNode, ProgramNode } from 'rollup';
+import type { ESTree as RolldownESTree } from 'rolldown/utils';
+import type { AstNode } from 'rollup';
 import type * as estree from 'estree';
 import type { LocaleInliner, TextModification } from '../locale-inliner.js';
 import type { Logger } from '../logger.js';
@@ -17,7 +18,7 @@ interface WalkerContext {
 }
 
 export function collectModifications(sourceCode: string, fileName: string, fileLogger: Logger, inliner: LocaleInliner): TextModification[] {
-	let programNode: ProgramNode;
+	let programNode: RolldownESTree.Program;
 	try {
 		programNode = parseAst(sourceCode);
 	} catch (err) {
@@ -35,7 +36,8 @@ export function collectModifications(sourceCode: string, fileName: string, fileL
 	// 1) replace all `scripts/` path literals with locale code
 	// 2) replace all `localStorage.getItem("lang")` with `localeName` variable
 	// 3) replace all `await window.fetch(`/assets/locales/${d}.${x}.json`).then(u=>u.json())` with `localeJson` variable
-	estreeWalker.walk(programNode, {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	(estreeWalker.walk as any)(programNode, {
 		enter(this: WalkerContext, node: Node) {
 			assertType<AstNode>(node);
 
@@ -118,8 +120,9 @@ export function collectModifications(sourceCode: string, fileName: string, fileL
 	// Check if the identifier is already declared in the file.
 	// If it is, we may overwrite it and cause issues so we skip inlining
 	let isSupported = true;
-	estreeWalker.walk(programNode, {
-		enter(node) {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	(estreeWalker.walk as any)(programNode, {
+		enter(node: Node) {
 			if (node.type === 'VariableDeclaration') {
 				assertType<estree.VariableDeclaration>(node);
 				for (const id of node.declarations.flatMap(x => declsOfPattern(x.id))) {
@@ -145,8 +148,9 @@ export function collectModifications(sourceCode: string, fileName: string, fileL
 
 	const toSkip = new Set();
 	toSkip.add(i18nImport);
-	estreeWalker.walk(programNode, {
-		enter(this: WalkerContext, node, parent, property) {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	(estreeWalker.walk as any)(programNode, {
+		enter(this: WalkerContext, node: Node, parent: Node | null, property: string | number | symbol | null | undefined) {
 			assertType<AstNode>(node);
 			assertType<AstNode>(parent);
 			if (toSkip.has(node)) {
@@ -379,7 +383,7 @@ type SpecifierResult =
 	| { type: 'specifier', localI18nIdentifier: string, importNode: estree.ImportDeclaration & AstNode }
 	;
 
-function findImportSpecifier(programNode: ProgramNode, i18nFileName: string, i18nSymbol: string): SpecifierResult {
+function findImportSpecifier(programNode: RolldownESTree.Program, i18nFileName: string, i18nSymbol: string): SpecifierResult {
 	const imports = programNode.body.filter(x => x.type === 'ImportDeclaration');
 	const importNode = imports.find(x => x.source.value === `./${i18nFileName}`) as estree.ImportDeclaration | undefined;
 	if (!importNode) return { type: 'no-import' };

packages/frontend-builder/package.json

@@ -17,9 +17,10 @@
 		"rollup": "4.60.0"
 	},
 	"dependencies": {
-		"i18n": "workspace:*",
 		"estree-walker": "3.0.3",
+		"i18n": "workspace:*",
 		"magic-string": "0.30.21",
-		"vite": "7.3.1"
+		"rolldown": "1.0.0-rc.13",
+		"vite": "8.0.7"
 	}
 }

packages/frontend-builder/rollup-plugin-remove-unref-i18n.ts

@@ -4,11 +4,11 @@
  */
 
 import * as estreeWalker from 'estree-walker';
-import MagicString from 'magic-string';
+import { RolldownMagicString } from 'rolldown';
 import { assertType } from './utils.js';
+import type { ESTree } from 'rolldown/utils';
 import type { Plugin } from 'vite';
-import type { CallExpression, Expression, Program } from 'estree';
-import type { AstNode } from 'rollup';
+import type { CallExpression, Expression } from 'estree';
 
 // This plugin transforms `unref(i18n)` to `i18n` in the code, which is useful for removing unnecessary unref calls
 // and helps locale inliner runs after vite build to inline the locale data into the final build.
@@ -23,31 +23,30 @@ export function pluginRemoveUnrefI18n(
 	} = {}): Plugin {
 	return {
 		name: 'UnwindCssModuleClassName',
-		renderChunk(code) {
+		renderChunk(code, _chunk, _options, meta) {
 			if (!code.includes('unref(i18n)')) return null;
-			const ast = this.parse(code) as Program;
-			const magicString = new MagicString(code);
-			estreeWalker.walk(ast, {
-				enter(node) {
+			const ast = this.parse(code);
+			const magicString = meta.magicString ?? new RolldownMagicString(code);
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			(estreeWalker.walk as any)(ast, {
+				enter(node: ESTree.Node) {
 					if (node.type === 'CallExpression' && node.callee.type === 'Identifier' && node.callee.name === 'unref'
 						&& node.arguments.length === 1) {
 						// calls to unref with single argument
 						const arg = node.arguments[0];
 						if (arg.type === 'Identifier' && arg.name === i18nSymbolName) {
 							// this is unref(i18n) so replace it with i18n
 							// to replace, remove the 'unref(' and the trailing ')'
-							assertType<CallExpression & AstNode>(node);
-							assertType<Expression & AstNode>(arg);
+							assertType<CallExpression>(node);
+							assertType<Expression>(arg);
 							magicString.remove(node.start, arg.start);
 							magicString.remove(arg.end, node.end);
 						}
 					}
 				},
 			});
-			return {
-				code: magicString.toString(),
-				map: magicString.generateMap({ hires: true }),
-			};
+
+			return magicString;
 		},
 	};
 }

packages/frontend-embed/build.ts

@@ -3,7 +3,7 @@ import url from 'node:url';
 import path from 'node:path';
 import { execa } from 'execa';
 import locales from 'i18n';
-import { LocaleInliner } from '../frontend-builder/locale-inliner.js'
+import { LocaleInliner } from '../frontend-builder/locale-inliner.js';
 import { createLogger } from '../frontend-builder/logger';
 
 // requires node 21 or later

packages/frontend-embed/vite.json5.ts …/frontend-embed/lib/vite-plugin-json5.tspackages/frontend-embed/vite.json5.ts renamed to packages/frontend-embed/lib/vite-plugin-json5.ts packages/frontend-embed/vite.json5.ts renamed to packages/frontend-embed/lib/vite-plugin-json5.ts

@@ -1,7 +1,10 @@
-// Original: https://github.com/rollup/plugins/tree/8835dd2aed92f408d7dc72d7cc25a9728e16face/packages/json
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import JSON5 from 'json5';
-import { Plugin } from 'rollup';
+import { Plugin } from 'vite';
 import { createFilter, dataToEsm } from '@rollup/pluginutils';
 import { RollupJsonOptions } from '@rollup/plugin-json';
 

packages/frontend-embed/package.json

@@ -12,7 +12,6 @@
 	"dependencies": {
 		"@discordapp/twemoji": "16.0.1",
 		"@rollup/plugin-json": "6.1.0",
-		"@rollup/plugin-replace": "6.0.3",
 		"@rollup/pluginutils": "5.3.0",
 		"@twemoji/parser": "16.0.0",
 		"@vitejs/plugin-vue": "6.0.5",
@@ -26,11 +25,9 @@
 		"misskey-js": "workspace:*",
 		"punycode.js": "2.3.1",
 		"rollup": "4.60.0",
-		"sass": "1.98.0",
 		"shiki": "3.23.0",
 		"tinycolor2": "1.6.0",
 		"uuid": "13.0.0",
-		"vite": "7.3.1",
 		"vue": "3.5.30"
 	},
 	"devDependencies": {
@@ -45,7 +42,7 @@
 		"@types/ws": "8.18.1",
 		"@typescript-eslint/eslint-plugin": "8.57.2",
 		"@typescript-eslint/parser": "8.57.2",
-		"@vitest/coverage-v8": "4.1.1",
+		"@vitest/coverage-v8": "4.1.2",
 		"@vue/runtime-core": "3.5.30",
 		"acorn": "8.16.0",
 		"cross-env": "10.1.0",
@@ -57,8 +54,10 @@
 		"msw": "2.12.14",
 		"nodemon": "3.1.14",
 		"prettier": "3.8.1",
+		"sass-embedded": "1.98.0",
 		"start-server-and-test": "2.1.5",
 		"tsx": "4.21.0",
+		"vite": "8.0.7",
 		"vite-plugin-turbosnap": "1.0.3",
 		"vue-component-type-helpers": "3.2.6",
 		"vue-eslint-parser": "10.4.0",

packages/frontend-embed/vite.config.ts

@@ -7,10 +7,10 @@ import { promises as fsp } from 'fs';
 import locales from 'i18n';
 import meta from '../../package.json';
 import packageInfo from './package.json' with { type: 'json' };
-import pluginJson5 from './vite.json5.js';
+import pluginJson5 from './lib/vite-plugin-json5.js';
 import { pluginRemoveUnrefI18n } from '../frontend-builder/rollup-plugin-remove-unref-i18n';
 
-const url = process.env.NODE_ENV === 'development' ? yaml.load(await fsp.readFile('../../.config/default.yml', 'utf-8')).url : null;
+const url = process.env.NODE_ENV === 'development' ? (yaml.load(await fsp.readFile('../../.config/default.yml', 'utf-8')) as any).url : null;
 const host = url ? (new URL(url)).hostname : undefined;
 
 const extensions = ['.ts', '.tsx', '.js', '.jsx', '.mjs', '.json', '.json5', '.svg', '.sass', '.scss', '.css', '.vue'];
@@ -113,11 +113,6 @@ export function getConfig(): UserConfig {
 					}
 				},
 			},
-			preprocessorOptions: {
-				scss: {
-					api: 'modern-compiler',
-				},
-			},
 		},
 
 		define: {
@@ -137,18 +132,26 @@ export function getConfig(): UserConfig {
 				'safari16',
 			],
 			manifest: 'manifest.json',
-			rollupOptions: {
+			rolldownOptions: {
+				experimental: {
+					nativeMagicString: true,
+				},
 				input: {
 					i18n: './src/i18n.ts',
 					entry: './src/boot.ts',
 				},
 				external: externalPackages.map(p => p.match),
 				preserveEntrySignatures: 'allow-extension',
 				output: {
-					manualChunks: {
-						vue: ['vue'],
-						// dependencies of i18n.ts
-						'config': ['@@/js/config.js'],
+					codeSplitting: {
+						groups: [{
+							name: 'vue',
+							test: /node_modules[\\/]vue/,
+						}, {
+							// dependencies of i18n.ts
+							name: 'config',
+							test: /@@[\\/]js[\\/]config\.js/,
+						}],
 					},
 					entryFileNames: `scripts/${localesHash}-[hash:8].js`,
 					chunkFileNames: `scripts/${localesHash}-[hash:8].js`,