refactor: use Vite to build instead of webpack (#8575)

* update stream.ts

* https://github.com/misskey-dev/misskey/pull/7769#issuecomment-917542339

* fix lint

* clean up?

* add app

* fix

* nanka iroiro

* wip

* wip

* fix lint

* fix loginId

* fix

* refactor

* refactor

* remove follow action

* clean up

* Revert "remove follow action"

This reverts commit defbb41648.

* Revert "clean up"

This reverts commit f94919cb9c.

* remove fetch specification

* renoteの条件追加

* apiFetch => cli

* bypass fetch?

* fix

* refactor: use path alias

* temp: add submodule

* remove submodule

* enhane: unison-reloadに指定したパスに移動できるように

* null

* null

* feat: ログインするアカウントのIDをクエリ文字列で指定する機能

* null

* await?

* rename

* rename

* Update read.ts

* merge

* get-note-summary

* fix

* swパッケージに

* add missing packages

* fix getNoteSummary

* add webpack-cli

* ✌️

* remove plugins

* sw-inject分離したがテストしてない

* fix notification.vue

* remove a blank line

* disconnect intersection observer

* disconnect2

* fix notification.vue

* remove a blank line

* disconnect intersection observer

* disconnect2

* fix

* ✌️

* clean up config

* typesを戻した

* Update packages/client/src/components/notification.vue

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>

* disconnect

* oops

* Failed to load the script unexpectedly回避
sw.jsとlib.tsを分離してみた

* truncate notification

* Update packages/client/src/ui/_common_/common.vue

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

* clean up

* clean up

* キャッシュ対策

* Truncate push notification message

* クライアントがあったらストリームに接続しているということなので通知しない判定の位置を修正

* components/drive-file-thumbnail.vue

* components/drive-select-dialog.vue

* components/drive-window.vue

* merge

* fix

* Service Workerのビルドにesbuildを使うようにする

* return createEmptyNotification()

* fix

* i18n.ts

* update

* ✌️

* remove ts-loader

* fix

* fix

* enhance: Service Workerを常に登録するように

* pollEnded

* URLをsw.jsに戻す

* clean up

* wip

* wip

* wip

* wip

* wip

* wip

* ✌️

* use import

* fix

* install rollup

* use defineAsyncComponent.

* fix emojilist

* wip use defineAsyncComponent

* popup(import -> popup(defineAsyncComponent(() => import

* draggable?

* fix init import

* clean up

* fix router

* add comment

* ✌️

* ✌️

* ✌️

* remove webpack

* update vite

* fix boot sequence

* Revert "fix boot sequence"

This reverts commit e893dbf37a.

* revert boot import

* never make two app div

* ;

* remove console.log

* change clientEntry sequence

* fix

* Revert "fix"

This reverts commit 12741b3d89.

* fix

* add comment https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210

* add log

* add comment

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>
Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

gulpfile.js

@@ -37,7 +37,6 @@ gulp.task('copy:client:locales', cb => {
 
 gulp.task('build:backend:script', () => {
 	return gulp.src(['./packages/backend/src/server/web/boot.js', './packages/backend/src/server/web/bios.js', './packages/backend/src/server/web/cli.js'])
-		.pipe(replace('VERSION', JSON.stringify(meta.version)))
 		.pipe(replace('LANGS', JSON.stringify(Object.keys(locales))))
 		.pipe(terser({
 			toplevel: true

packages/backend/src/config/load.ts

@@ -25,6 +25,7 @@ const path = process.env.NODE_ENV === 'test'
 
 export default function load() {
 	const meta = JSON.parse(fs.readFileSync(`${_dirname}/../../../../built/meta.json`, 'utf-8'));
+	const clientManifest = JSON.parse(fs.readFileSync(`${_dirname}/../../../../built/_client_dist_/manifest.json`, 'utf-8'));
 	const config = yaml.load(fs.readFileSync(path, 'utf-8')) as Source;
 
 	const mixin = {} as Mixin;
@@ -45,6 +46,7 @@ export default function load() {
 	mixin.authUrl = `${mixin.scheme}://${mixin.host}/auth`;
 	mixin.driveUrl = `${mixin.scheme}://${mixin.host}/files`;
 	mixin.userAgent = `Misskey/${meta.version} (${config.url})`;
+	mixin.clientEntry = clientManifest['src/init.ts'].file.replace(/^_client_dist_\//, '');
 
 	if (!config.redis.prefix) config.redis.prefix = mixin.host;
 

packages/backend/src/config/types.ts

@@ -80,6 +80,7 @@ export type Mixin = {
 	authUrl: string;
 	driveUrl: string;
 	userAgent: string;
+	clientEntry: string;
 };
 
 export type Config = Source & Mixin;

packages/backend/src/server/web/boot.js

@@ -58,15 +58,11 @@
 		? `?salt=${localStorage.getItem('salt')}`
 		: '';
 
-	const script = document.createElement('script');
+	import(`/assets/${CLIENT_ENTRY}${salt}`)
-	script.setAttribute('src', `/assets/app.${v}.js${salt}`);
+		.catch(async () => {
-	script.setAttribute('async', 'true');
-	script.setAttribute('defer', 'true');
-	script.addEventListener('error', async () => {
 			await checkUpdate();
 			renderError('APP_FETCH_FAILED');
-	});
+		})
-	document.head.appendChild(script);
 	//#endregion
 
 	//#region Theme

packages/backend/src/server/web/index.ts

@@ -4,6 +4,7 @@
 
 import { dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { PathOrFileDescriptor, readFileSync } from 'node:fs';
 import ms from 'ms';
 import Koa from 'koa';
 import Router from '@koa/router';
@@ -73,6 +74,9 @@ app.use(views(_dirname + '/views', {
 	extension: 'pug',
 	options: {
 		version: config.version,
+		clientEntry: () => process.env.NODE_ENV === 'production' ?
+			config.clientEntry :
+			JSON.parse(readFileSync(`${_dirname}/../../../../../built/_client_dist_/manifest.json`, 'utf-8'))['src/init.ts'].file.replace(/^_client_dist_\//, ''),
 		config,
 	},
 }));

packages/backend/src/server/web/views/base.pug

@@ -50,6 +50,10 @@ html
 		style
 			include ../style.css
 
+		script.
+			var VERSION = "#{version}";
+			var CLIENT_ENTRY = "#{clientEntry()}";
+
 		script
 			include ../boot.js
 

packages/client/@types/theme.d.ts

@@ -0,0 +1,5 @@
+import { Theme } from '../src/scripts/theme';
+
+declare module '@/themes/*.json5' {
+	export = Theme;
+}

packages/client/package.json

@@ -1,8 +1,8 @@
 {
 	"private": true,
 	"scripts": {
-		"watch": "webpack --watch",
+		"watch": "vite build --watch --mode development",
-		"build": "webpack",
+		"build": "vite build",
 		"lint": "eslint --quiet \"src/**/*.{ts,vue}\""
 	},
 	"resolutions": {
@@ -12,8 +12,11 @@
 	"dependencies": {
 		"@discordapp/twemoji": "13.1.1",
 		"@fortawesome/fontawesome-free": "6.1.1",
+		"@rollup/plugin-alias": "3.1.9",
+		"@rollup/plugin-json": "4.1.0",
 		"@syuilo/aiscript": "0.11.1",
 		"@typescript-eslint/parser": "5.20.0",
+		"@vitejs/plugin-vue": "2.3.1",
 		"@vue/compiler-sfc": "3.2.33",
 		"abort-controller": "3.0.0",
 		"autobind-decorator": "2.4.0",
@@ -28,8 +31,6 @@
 		"chartjs-plugin-zoom": "1.2.1",
 		"compare-versions": "4.1.3",
 		"content-disposition": "0.5.4",
-		"css-loader": "6.7.1",
-		"cssnano": "5.1.7",
 		"date-fns": "2.28.0",
 		"escape-regexp": "0.0.1",
 		"eslint": "8.14.0",
@@ -40,7 +41,6 @@
 		"idb-keyval": "6.1.0",
 		"insert-text-at-cursor": "0.3.0",
 		"json5": "2.2.1",
-		"json5-loader": "4.0.1",
 		"katex": "0.15.3",
 		"matter-js": "0.18.0",
 		"mfm-js": "0.21.0",
@@ -51,8 +51,6 @@
 		"parse5": "6.0.1",
 		"photoswipe": "5.2.4",
 		"portscanner": "2.2.0",
-		"postcss": "8.4.12",
-		"postcss-loader": "6.2.1",
 		"prismjs": "1.28.0",
 		"private-ip": "2.3.3",
 		"promise-limit": "2.7.0",
@@ -63,19 +61,17 @@
 		"random-seed": "0.3.0",
 		"reflect-metadata": "0.1.13",
 		"rndstr": "1.0.0",
+		"rollup": "2.70.2",
 		"s-age": "1.1.2",
 		"sass": "1.50.1",
-		"sass-loader": "12.6.0",
 		"seedrandom": "3.0.5",
 		"strict-event-emitter-types": "2.0.0",
 		"stringz": "2.1.0",
-		"style-loader": "3.3.1",
 		"syuilo-password-strength": "0.0.1",
 		"textarea-caret": "3.1.0",
 		"three": "0.139.2",
 		"throttle-debounce": "4.0.1",
 		"tinycolor2": "1.4.2",
-		"ts-loader": "9.2.8",
 		"tsc-alias": "1.5.0",
 		"tsconfig-paths": "3.14.1",
 		"twemoji-parser": "14.0.0",
@@ -83,15 +79,11 @@
 		"uuid": "8.3.2",
 		"v-debounce": "0.1.2",
 		"vanilla-tilt": "1.7.2",
+		"vite": "2.9.6",
 		"vue": "3.2.33",
-		"vue-loader": "17.0.0",
 		"vue-prism-editor": "2.0.0-alpha.2",
 		"vue-router": "4.0.14",
-		"vue-style-loader": "4.1.3",
-		"vue-svg-loader": "0.17.0-beta.2",
 		"vuedraggable": "4.0.1",
-		"webpack": "5.72.0",
-		"webpack-cli": "4.9.2",
 		"websocket": "1.0.34",
 		"ws": "8.5.0"
 	},
@@ -113,8 +105,6 @@
 		"@types/throttle-debounce": "4.0.0",
 		"@types/tinycolor2": "1.4.3",
 		"@types/uuid": "8.3.4",
-		"@types/webpack": "5.28.0",
-		"@types/webpack-stream": "3.2.12",
 		"@types/websocket": "1.0.5",
 		"@types/ws": "8.5.3",
 		"@typescript-eslint/eslint-plugin": "5.20.0",

packages/client/src/account.ts

@@ -1,5 +1,5 @@
 import { del, get, set } from '@/scripts/idb-proxy';
-import { reactive } from 'vue';
+import { defineAsyncComponent, reactive } from 'vue';
 import * as misskey from 'misskey-js';
 import { apiUrl } from '@/config';
 import { waiting, api, popup, popupMenu, success, alert } from '@/os';
@@ -141,7 +141,7 @@ export async function openAccountMenu(opts: {
 	onChoose?: (account: misskey.entities.UserDetailed) => void;
 }, ev: MouseEvent) {
 	function showSigninDialog() {
-		popup(import('@/components/signin-dialog.vue'), {}, {
+		popup(defineAsyncComponent(() => import('@/components/signin-dialog.vue')), {}, {
 			done: res => {
 				addAccount(res.id, res.i);
 				success();
@@ -150,7 +150,7 @@ export async function openAccountMenu(opts: {
 	}
 
 	function createAccount() {
-		popup(import('@/components/signup-dialog.vue'), {}, {
+		popup(defineAsyncComponent(() => import('@/components/signup-dialog.vue')), {}, {
 			done: res => {
 				addAccount(res.id, res.i);
 				switchAccountWithToken(res.i);

packages/client/src/components/abuse-report.vue

@@ -43,20 +43,20 @@ export default defineComponent({
 		MkSwitch,
 	},
 
-	emits: ['resolved'],
-
 	props: {
 		report: {
 			type: Object,
 			required: true,
 		}
-	}
+	},
+
+	emits: ['resolved'],
 
 	data() {
 		return {
 			forward: this.report.forwarded,
 		};
-	}
+	},
 
 	methods: {
 		acct,

packages/client/src/components/analog-clock.vue

@@ -42,7 +42,7 @@
 
 <script lang="ts" setup>
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
-import * as tinycolor from 'tinycolor2';
+import tinycolor from 'tinycolor2';
 
 withDefaults(defineProps<{
 	thickness: number;

packages/client/src/components/chart.vue

@@ -29,7 +29,9 @@ import {
 import 'chartjs-adapter-date-fns';
 import { enUS } from 'date-fns/locale';
 import zoomPlugin from 'chartjs-plugin-zoom';
-import gradient from 'chartjs-plugin-gradient';
+// https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114242002
+// We can't use gradient because Vite throws a error.
+//import gradient from 'chartjs-plugin-gradient';
 import * as os from '@/os';
 import { defaultStore } from '@/store';
 import MkChartTooltip from '@/components/chart-tooltip.vue';
@@ -50,7 +52,7 @@ Chart.register(
 	SubTitle,
 	Filler,
 	zoomPlugin,
-	gradient,
+	//gradient,
 );
 
 const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
@@ -221,7 +223,7 @@ export default defineComponent({
 						borderJoinStyle: 'round',
 						borderRadius: props.bar ? 3 : undefined,
 						backgroundColor: props.bar ? (x.color ? x.color : getColor(i)) : alpha(x.color ? x.color : getColor(i), 0.1),
-						gradient: props.bar ? undefined : {
+						/*gradient: props.bar ? undefined : {
 							backgroundColor: {
 								axis: 'y',
 								colors: {
@@ -229,7 +231,7 @@ export default defineComponent({
 									[maxes[i]]: alpha(x.color ? x.color : getColor(i), 0.2),
 								},
 							},
-						},
+						},*/
 						barPercentage: 0.9,
 						categoryPercentage: 0.9,
 						fill: x.type === 'area',
@@ -340,7 +342,7 @@ export default defineComponent({
 								},
 							}
 						} : undefined,
-						gradient,
+						//gradient,
 					},
 				},
 				plugins: [{

packages/client/src/components/drive.file.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { computed, defineAsyncComponent, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
 import MkDriveFileThumbnail from './drive-file-thumbnail.vue';
@@ -133,7 +133,7 @@ function rename() {
 }
 
 function describe() {
-	os.popup(import('@/components/media-caption.vue'), {
+	os.popup(defineAsyncComponent(() => import('@/components/media-caption.vue')), {
 		title: i18n.ts.describeFile,
 		input: {
 			placeholder: i18n.ts.inputNewDescription,

packages/client/src/components/drive.folder.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { computed, defineAsyncComponent, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
@@ -230,7 +230,7 @@ function onContextmenu(ev: MouseEvent) {
 		text: i18n.ts.openInWindow,
 		icon: 'fas fa-window-restore',
 		action: () => {
-			os.popup(import('./drive-window.vue'), {
+			os.popup(defineAsyncComponent(() => import('./drive-window.vue')), {
 				initialFolder: props.folder
 			}, {
 			}, 'closed');

packages/client/src/components/emoji-picker.vue

@@ -61,7 +61,7 @@
 		</div>
 		<div>
 			<header class="_acrylic">{{ i18n.ts.emoji }}</header>
-			<XSection v-for="category in categories" :emojis="emojilist.filter(e => e.category === category).map(e => e.char)" @chosen="chosen">{{ category }}</XSection>
+			<XSection v-for="category in categories" :key="category" :emojis="emojilist.filter(e => e.category === category).map(e => e.char)" @chosen="chosen">{{ category }}</XSection>
 		</div>
 	</div>
 	<div class="tabs">

packages/client/src/components/form/range.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
+import { computed, defineAsyncComponent, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
 import * as os from '@/os';
 
 export default defineComponent({
@@ -112,7 +112,7 @@ export default defineComponent({
 			ev.preventDefault();
 
 			const tooltipShowing = ref(true);
-			os.popup(import('@/components/ui/tooltip.vue'), {
+			os.popup(defineAsyncComponent(() => import('@/components/ui/tooltip.vue')), {
 				showing: tooltipShowing,
 				text: computed(() => {
 					return props.textConverter(finalValue.value);

packages/client/src/components/global/header.vue

@@ -38,7 +38,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, inject } from 'vue';
-import * as tinycolor from 'tinycolor2';
+import tinycolor from 'tinycolor2';
 import { popupMenu } from '@/os';
 import { url } from '@/config';
 import { scrollToTop } from '@/scripts/scroll';

packages/client/src/components/global/url.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { defineAsyncComponent, defineComponent, ref } from 'vue';
 import { toUnicode as decodePunycode } from 'punycode/';
 import { url as local } from '@/config';
 import * as os from '@/os';
@@ -50,7 +50,7 @@ export default defineComponent({
 		const el = ref();
 		
 		useTooltip(el, (showing) => {
-			os.popup(import('@/components/url-preview-popup.vue'), {
+			os.popup(defineAsyncComponent(() => import('@/components/url-preview-popup.vue')), {
 				showing,
 				url: props.url,
 				source: el.value,

packages/client/src/components/link.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import { defineAsyncComponent } from 'vue';
 import { url as local } from '@/config';
 import { useTooltip } from '@/scripts/use-tooltip';
 import * as os from '@/os';
@@ -26,7 +26,7 @@ const target = self ? null : '_blank';
 const el = $ref();
 
 useTooltip($$(el), (showing) => {
-	os.popup(import('@/components/url-preview-popup.vue'), {
+	os.popup(defineAsyncComponent(() => import('@/components/url-preview-popup.vue')), {
 		showing,
 		url: props.url,
 		source: el,

packages/client/src/components/mention.vue

@@ -16,7 +16,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import * as tinycolor from 'tinycolor2';
+import tinycolor from 'tinycolor2';
 import { toUnicode } from 'punycode';
 import { host as localHost } from '@/config';
 import { $i } from '@/account';

packages/client/src/components/post-form-attaches.vue

@@ -88,7 +88,7 @@ export default defineComponent({
 		},
 
 		async describe(file) {
-			os.popup(import("@/components/media-caption.vue"), {
+			os.popup(defineAsyncComponent(() => import("@/components/media-caption.vue")), {
 				title: this.$ts.describeFile,
 				input: {
 					placeholder: this.$ts.inputNewDescription,

packages/client/src/components/post-form.vue

@@ -62,7 +62,7 @@
 </template>
 
 <script lang="ts" setup>
-import { inject, watch, nextTick, onMounted } from 'vue';
+import { inject, watch, nextTick, onMounted, defineAsyncComponent } from 'vue';
 import * as mfm from 'mfm-js';
 import * as misskey from 'misskey-js';
 import insertTextAtCursor from 'insert-text-at-cursor';
@@ -384,7 +384,7 @@ function setVisibility() {
 		return;
 	}
 
-	os.popup(import('./visibility-picker.vue'), {
+	os.popup(defineAsyncComponent(() => import('./visibility-picker.vue')), {
 		currentVisibility: visibility,
 		currentLocalOnly: localOnly,
 		src: visibilityButton,

packages/client/src/components/signin.vue

@@ -46,7 +46,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineAsyncComponent, defineComponent } from 'vue';
 import { toUnicode } from 'punycode/';
 import MkButton from '@/components/ui/button.vue';
 import MkInput from '@/components/form/input.vue';
@@ -224,7 +224,7 @@ export default defineComponent({
 		},
 
 		resetPassword() {
-			os.popup(import('@/components/forgot-password.vue'), {}, {
+			os.popup(defineAsyncComponent(() => import('@/components/forgot-password.vue')), {}, {
 			}, 'closed');
 		}
 	}

packages/client/src/components/signup.vue

@@ -67,7 +67,7 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
-const getPasswordStrength = require('syuilo-password-strength');
+const getPasswordStrength = await import('syuilo-password-strength');
 import { toUnicode } from 'punycode/';
 import { host, url } from '@/config';
 import MkButton from './ui/button.vue';

packages/client/src/components/ui/folder.vue

@@ -23,7 +23,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import * as tinycolor from 'tinycolor2';
+import tinycolor from 'tinycolor2';
 
 const localStoragePrefix = 'ui:folder:';
 

packages/client/src/components/widgets.vue

@@ -37,7 +37,7 @@ import { widgets as widgetDefs } from '@/widgets';
 
 export default defineComponent({
 	components: {
-		XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
+		XDraggable: defineAsyncComponent(() => import('vuedraggable')),
 		MkSelect,
 		MkButton,
 	},

packages/client/src/directives/tooltip.ts

@@ -1,7 +1,7 @@
 // TODO: useTooltip関数使うようにしたい
 // ただディレクティブ内でonUnmountedなどのcomposition api使えるのか不明
 
-import { Directive, ref } from 'vue';
+import { defineAsyncComponent, Directive, ref } from 'vue';
 import { isTouchUsing } from '@/scripts/touch';
 import { popup, alert } from '@/os';
 
@@ -45,7 +45,7 @@ export default {
 			if (self.text == null) return;
 
 			const showing = ref(true);
-			popup(import('@/components/ui/tooltip.vue'), {
+			popup(defineAsyncComponent(() => import('@/components/ui/tooltip.vue')), {
 				showing,
 				text: self.text,
 				targetElement: el,

packages/client/src/directives/user-preview.ts

@@ -1,4 +1,4 @@
-import { Directive, ref } from 'vue';
+import { defineAsyncComponent, Directive, ref } from 'vue';
 import autobind from 'autobind-decorator';
 import { popup } from '@/os';
 
@@ -24,7 +24,7 @@ export class UserPreview {
 
 		const showing = ref(true);
 
-		popup(import('@/components/user-preview.vue'), {
+		popup(defineAsyncComponent(() => import('@/components/user-preview.vue')), {
 			showing,
 			q: this.user,
 			source: this.el

packages/client/src/init.ts

@@ -13,9 +13,9 @@ if (localStorage.getItem('accounts') != null) {
 }
 //#endregion
 
-import { computed, createApp, watch, markRaw, version as vueVersion } from 'vue';
+import { computed, createApp, watch, markRaw, version as vueVersion, defineAsyncComponent } from 'vue';
 import compareVersions from 'compare-versions';
-import * as JSON5 from 'json5';
+import JSON5 from 'json5';
 
 import widgets from '@/widgets';
 import directives from '@/directives';
@@ -168,14 +168,14 @@ fetchInstanceMetaPromise.then(() => {
 	initializeSw();
 });
 
-const app = createApp(await (
+const app = createApp(
-	window.location.search === '?zen' ? import('@/ui/zen.vue') :
+	window.location.search === '?zen' ? defineAsyncComponent(() => import('@/ui/zen.vue')) :
-	!$i                               ? import('@/ui/visitor.vue') :
+	!$i                               ? defineAsyncComponent(() => import('@/ui/visitor.vue')) :
-	ui === 'deck'                     ? import('@/ui/deck.vue') :
+	ui === 'deck'                     ? defineAsyncComponent(() => import('@/ui/deck.vue')) :
-	ui === 'desktop'                  ? import('@/ui/desktop.vue') :
+	ui === 'desktop'                  ? defineAsyncComponent(() => import('@/ui/desktop.vue')) :
-	ui === 'classic'                  ? import('@/ui/classic.vue') :
+	ui === 'classic'                  ? defineAsyncComponent(() => import('@/ui/classic.vue')) :
-	import('@/ui/universal.vue')
+	defineAsyncComponent(() => import('@/ui/universal.vue'))
-).then(x => x.default));
+);
 
 if (_DEV_) {
 	app.config.performance = true;
@@ -203,8 +203,24 @@ if (splash) splash.addEventListener('transitionend', () => {
 	splash.remove();
 });
 
-const rootEl = document.createElement('div');
+// https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210
-document.body.appendChild(rootEl);
+// なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する
+const rootEl = (() => {
+	const MISSKEY_MOUNT_DIV_ID = 'misskey_app';
+
+	const currentEl = document.getElementById(MISSKEY_MOUNT_DIV_ID);
+
+	if (currentEl) {
+		console.warn('multiple import detected');
+		return currentEl;
+	}
+
+	const rootEl = document.createElement('div');
+	rootEl.id = MISSKEY_MOUNT_DIV_ID;
+	document.body.appendChild(rootEl);
+	return rootEl;
+})();
+
 app.mount(rootEl);
 
 // boot.jsのやつを解除
@@ -230,7 +246,7 @@ if (lastVersion !== version) {
 		if (lastVersion != null && compareVersions(version, lastVersion) === 1) {
 			// ログインしてる場合だけ
 			if ($i) {
-				popup(import('@/components/updated.vue'), {}, {}, 'closed');
+				popup(defineAsyncComponent(() => import('@/components/updated.vue')), {}, {}, 'closed');
 			}
 		}
 	} catch (e) {

packages/client/src/os.ts

@@ -110,10 +110,6 @@ export function promiseDialog<T extends Promise<any>>(
 	return promise;
 }
 
-function isModule(x: any): x is typeof import('*.vue') {
-	return x.default != null;
-}
-
 let popupIdCount = 0;
 export const popups = ref([]) as Ref<{
 	id: any;
@@ -131,10 +127,7 @@ export function claimZIndex(priority: 'low' | 'middle' | 'high' = 'low'): number
 	return zIndexes[priority];
 }
 
-export async function popup(component: Component | typeof import('*.vue') | Promise<Component | typeof import('*.vue')>, props: Record<string, any>, events = {}, disposeEvent?: string) {
+export async function popup(component: Component, props: Record<string, any>, events = {}, disposeEvent?: string) {
-	if (component.then) component = await component;
-
-	if (isModule(component)) component = component.default;
 	markRaw(component);
 
 	const id = ++popupIdCount;
@@ -163,7 +156,7 @@ export async function popup(component: Component | typeof import('*.vue') | Prom
 
 export function pageWindow(path: string) {
 	const { component, props } = resolve(path);
-	popup(import('@/components/page-window.vue'), {
+	popup(defineAsyncComponent(() => import('@/components/page-window.vue')), {
 		initialPath: path,
 		initialComponent: markRaw(component),
 		initialProps: props,
@@ -172,7 +165,7 @@ export function pageWindow(path: string) {
 
 export function modalPageWindow(path: string) {
 	const { component, props } = resolve(path);
-	popup(import('@/components/modal-page-window.vue'), {
+	popup(defineAsyncComponent(() => import('@/components/modal-page-window.vue')), {
 		initialPath: path,
 		initialComponent: markRaw(component),
 		initialProps: props,
@@ -180,7 +173,7 @@ export function modalPageWindow(path: string) {
 }
 
 export function toast(message: string) {
-	popup(import('@/components/toast.vue'), {
+	popup(defineAsyncComponent(() => import('@/components/toast.vue')), {
 		message
 	}, {}, 'closed');
 }
@@ -191,7 +184,7 @@ export function alert(props: {
 	text?: string | null;
 }): Promise<void> {
 	return new Promise((resolve, reject) => {
-		popup(import('@/components/dialog.vue'), props, {
+		popup(defineAsyncComponent(() => import('@/components/dialog.vue')), props, {
 			done: result => {
 				resolve();
 			},
@@ -205,7 +198,7 @@ export function confirm(props: {
 	text?: string | null;
 }): Promise<{ canceled: boolean }> {
 	return new Promise((resolve, reject) => {
-		popup(import('@/components/dialog.vue'), {
+		popup(defineAsyncComponent(() => import('@/components/dialog.vue')), {
 			...props,
 			showCancelButton: true,
 		}, {
@@ -226,7 +219,7 @@ export function inputText(props: {
 	canceled: false; result: string;
 }> {
 	return new Promise((resolve, reject) => {
-		popup(import('@/components/dialog.vue'), {
+		popup(defineAsyncComponent(() => import('@/components/dialog.vue')), {
 			title: props.title,
 			text: props.text,
 			input: {
@@ -251,7 +244,7 @@ export function inputNumber(props: {
 	canceled: false; result: number;
 }> {
 	return new Promise((resolve, reject) => {
-		popup(import('@/components/dialog.vue'), {
+		popup(defineAsyncComponent(() => import('@/components/dialog.vue')), {
 			title: props.title,
 			text: props.text,
 			input: {
@@ -276,7 +269,7 @@ export function inputDate(props: {
 	canceled: false; result: Date;
 }> {
 	return new Promise((resolve, reject) => {
-		popup(import('@/components/dialog.vue'), {
+		popup(defineAsyncComponent(() => import('@/components/dialog.vue')), {
 			title: props.title,
 			text: props.text,
 			input: {
@@ -313,7 +306,7 @@ export function select<C extends any = any>(props: {
 	canceled: false; result: C;
 }> {
 	return new Promise((resolve, reject) => {
-		popup(import('@/components/dialog.vue'), {
+		popup(defineAsyncComponent(() => import('@/components/dialog.vue')), {
 			title: props.title,
 			text: props.text,
 			select: {
@@ -335,7 +328,7 @@ export function success() {
 		window.setTimeout(() => {
 			showing.value = false;
 		}, 1000);
-		popup(import('@/components/waiting-dialog.vue'), {
+		popup(defineAsyncComponent(() => import('@/components/waiting-dialog.vue')), {
 			success: true,
 			showing: showing
 		}, {
@@ -347,7 +340,7 @@ export function success() {
 export function waiting() {
 	return new Promise((resolve, reject) => {
 		const showing = ref(true);
-		popup(import('@/components/waiting-dialog.vue'), {
+		popup(defineAsyncComponent(() => import('@/components/waiting-dialog.vue')), {
 			success: false,
 			showing: showing
 		}, {
@@ -358,7 +351,7 @@ export function waiting() {
 
 export function form(title, form) {
 	return new Promise((resolve, reject) => {
-		popup(import('@/components/form-dialog.vue'), { title, form }, {
+		popup(defineAsyncComponent(() => import('@/components/form-dialog.vue')), { title, form }, {
 			done: result => {
 				resolve(result);
 			},
@@ -368,7 +361,7 @@ export function form(title, form) {
 
 export async function selectUser() {
 	return new Promise((resolve, reject) => {
-		popup(import('@/components/user-select-dialog.vue'), {}, {
+		popup(defineAsyncComponent(() => import('@/components/user-select-dialog.vue')), {}, {
 			ok: user => {
 				resolve(user);
 			},
@@ -378,7 +371,7 @@ export async function selectUser() {
 
 export async function selectDriveFile(multiple: boolean) {
 	return new Promise((resolve, reject) => {
-		popup(import('@/components/drive-select-dialog.vue'), {
+		popup(defineAsyncComponent(() => import('@/components/drive-select-dialog.vue')), {
 			type: 'file',
 			multiple
 		}, {
@@ -393,7 +386,7 @@ export async function selectDriveFile(multiple: boolean) {
 
 export async function selectDriveFolder(multiple: boolean) {
 	return new Promise((resolve, reject) => {
-		popup(import('@/components/drive-select-dialog.vue'), {
+		popup(defineAsyncComponent(() => import('@/components/drive-select-dialog.vue')), {
 			type: 'folder',
 			multiple
 		}, {
@@ -408,7 +401,7 @@ export async function selectDriveFolder(multiple: boolean) {
 
 export async function pickEmoji(src: HTMLElement | null, opts) {
 	return new Promise((resolve, reject) => {
-		popup(import('@/components/emoji-picker-dialog.vue'), {
+		popup(defineAsyncComponent(() => import('@/components/emoji-picker-dialog.vue')), {
 			src,
 			...opts
 		}, {
@@ -458,7 +451,7 @@ export async function openEmojiPicker(src?: HTMLElement, opts, initialTextarea:
 		characterData: false,
 	});
 
-	openingEmojiPicker = await popup(import('@/components/emoji-picker-window.vue'), {
+	openingEmojiPicker = await popup(defineAsyncComponent(() => import('@/components/emoji-picker-window.vue')), {
 		src,
 		...opts
 	}, {
@@ -480,7 +473,7 @@ export function popupMenu(items: MenuItem[] | Ref<MenuItem[]>, src?: HTMLElement
 }) {
 	return new Promise((resolve, reject) => {
 		let dispose;
-		popup(import('@/components/ui/popup-menu.vue'), {
+		popup(defineAsyncComponent(() => import('@/components/ui/popup-menu.vue')), {
 			items,
 			src,
 			width: options?.width,
@@ -501,7 +494,7 @@ export function contextMenu(items: MenuItem[] | Ref<MenuItem[]>, ev: MouseEvent)
 	ev.preventDefault();
 	return new Promise((resolve, reject) => {
 		let dispose;
-		popup(import('@/components/ui/context-menu.vue'), {
+		popup(defineAsyncComponent(() => import('@/components/ui/context-menu.vue')), {
 			items,
 			ev,
 		}, {

packages/client/src/pages/admin/emojis.vue

@@ -63,7 +63,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineComponent, ref, toRef } from 'vue';
+import { computed, defineAsyncComponent, defineComponent, ref, toRef } from 'vue';
 import MkButton from '@/components/ui/button.vue';
 import MkInput from '@/components/form/input.vue';
 import MkPagination from '@/components/ui/pagination.vue';
@@ -130,7 +130,7 @@ const add = async (ev: MouseEvent) => {
 };
 
 const edit = (emoji) => {
-	os.popup(import('./emoji-edit-dialog.vue'), {
+	os.popup(defineAsyncComponent(() => import('./emoji-edit-dialog.vue')), {
 		emoji: emoji
 	}, {
 		done: result => {

packages/client/src/pages/admin/files.vue

@@ -55,7 +55,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, defineAsyncComponent } from 'vue';
 import MkButton from '@/components/ui/button.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSelect from '@/components/form/select.vue';
@@ -93,7 +93,7 @@ function clear() {
 }
 
 function show(file) {
-	os.popup(import('./file-dialog.vue'), {
+	os.popup(defineAsyncComponent(() => import('./file-dialog.vue')), {
 		fileId: file.id
 	}, {}, 'closed');
 }

packages/client/src/pages/api-console.vue

@@ -26,8 +26,8 @@
 </template>
 
 <script lang="ts" setup>
-import { defineExpose, ref } from 'vue';
+import { ref } from 'vue';
-import * as JSON5 from 'json5';
+import JSON5 from 'json5';
 import MkButton from '@/components/ui/button.vue';
 import MkInput from '@/components/form/input.vue';
 import MkTextarea from '@/components/form/textarea.vue';

packages/client/src/pages/reset-password.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
+import { defineAsyncComponent, onMounted } from 'vue';
 import FormInput from '@/components/form/input.vue';
 import FormButton from '@/components/ui/button.vue';
 import * as os from '@/os';
@@ -36,7 +36,7 @@ async function save() {
 
 onMounted(() => {
 	if (props.token == null) {
-		os.popup(import('@/components/forgot-password.vue'), {}, {}, 'closed');
+		os.popup(defineAsyncComponent(() => import('@/components/forgot-password.vue')), {}, {}, 'closed');
 		router.push('/');
 	}
 });

packages/client/src/pages/settings/accounts.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineAsyncComponent, defineComponent } from 'vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import FormButton from '@/components/ui/button.vue';
 import * as os from '@/os';
@@ -78,7 +78,7 @@ export default defineComponent({
 		},
 
 		addExistingAccount() {
-			os.popup(import('@/components/signin-dialog.vue'), {}, {
+			os.popup(defineAsyncComponent(() => import('@/components/signin-dialog.vue')), {}, {
 				done: res => {
 					addAccount(res.id, res.i);
 					os.success();
@@ -87,7 +87,7 @@ export default defineComponent({
 		},
 
 		createAccount() {
-			os.popup(import('@/components/signup-dialog.vue'), {}, {
+			os.popup(defineAsyncComponent(() => import('@/components/signup-dialog.vue')), {}, {
 				done: res => {
 					addAccount(res.id, res.i);
 					this.switchAccountWithToken(res.i);

packages/client/src/pages/settings/api.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineAsyncComponent, defineComponent } from 'vue';
 import FormLink from '@/components/form/link.vue';
 import FormButton from '@/components/ui/button.vue';
 import * as os from '@/os';
@@ -34,7 +34,7 @@ export default defineComponent({
 
 	methods: {
 		generateToken() {
-			os.popup(import('@/components/token-generate-window.vue'), {}, {
+			os.popup(defineAsyncComponent(() => import('@/components/token-generate-window.vue')), {}, {
 				done: async result => {
 					const { name, permissions } = result;
 					const { token } = await os.api('miauth/gen-token', {

packages/client/src/pages/settings/drive.vue

@@ -35,7 +35,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import * as tinycolor from 'tinycolor2';
+import tinycolor from 'tinycolor2';
 import FormLink from '@/components/form/link.vue';
 import FormSwitch from '@/components/form/switch.vue';
 import FormSection from '@/components/form/section.vue';

packages/client/src/pages/settings/notifications.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineAsyncComponent, defineComponent } from 'vue';
 import FormButton from '@/components/ui/button.vue';
 import FormLink from '@/components/form/link.vue';
 import FormSection from '@/components/form/section.vue';
@@ -52,7 +52,7 @@ export default defineComponent({
 
 		configure() {
 			const includingTypes = notificationTypes.filter(x => !this.$i.mutingNotificationTypes.includes(x));
-			os.popup(import('@/components/notification-setting-window.vue'), {
+			os.popup(defineAsyncComponent(() => import('@/components/notification-setting-window.vue')), {
 				includingTypes,
 				showGlobalToggle: false,
 			}, {

packages/client/src/pages/settings/plugin.install.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineAsyncComponent, defineComponent } from 'vue';
 import { AiScript, parse } from '@syuilo/aiscript';
 import { serialize } from '@syuilo/aiscript/built/serializer';
 import { v4 as uuid } from 'uuid';
@@ -94,7 +94,7 @@ export default defineComponent({
 			}
 
 			const token = permissions == null || permissions.length === 0 ? null : await new Promise((res, rej) => {
-				os.popup(import('@/components/token-generate-window.vue'), {
+				os.popup(defineAsyncComponent(() => import('@/components/token-generate-window.vue')), {
 					title: this.$ts.tokenRequested,
 					information: this.$ts.pluginTokenRequestedDescription,
 					initialName: name,

packages/client/src/pages/settings/reaction.vue

@@ -54,7 +54,7 @@
 </template>
 
 <script lang="ts" setup>
-import { watch } from 'vue';
+import { defineAsyncComponent, watch } from 'vue';
 import XDraggable from 'vuedraggable';
 import FormInput from '@/components/form/input.vue';
 import FormRadios from '@/components/form/radios.vue';
@@ -88,7 +88,7 @@ function remove(reaction, ev: MouseEvent) {
 }
 
 function preview(ev: MouseEvent) {
-	os.popup(import('@/components/emoji-picker-dialog.vue'), {
+	os.popup(defineAsyncComponent(() => import('@/components/emoji-picker-dialog.vue')), {
 		asReactionPicker: true,
 		src: ev.currentTarget ?? ev.target,
 	}, {}, 'closed');

packages/client/src/pages/settings/theme.install.vue

@@ -13,7 +13,7 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import * as JSON5 from 'json5';
+import JSON5 from 'json5';
 import FormTextarea from '@/components/form/textarea.vue';
 import FormButton from '@/components/ui/button.vue';
 import { applyTheme, validateTheme } from '@/scripts/theme';

packages/client/src/pages/settings/theme.manage.vue

@@ -27,7 +27,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import * as JSON5 from 'json5';
+import JSON5 from 'json5';
 import FormTextarea from '@/components/form/textarea.vue';
 import FormSelect from '@/components/form/select.vue';
 import FormInput from '@/components/form/input.vue';

packages/client/src/pages/settings/theme.vue

@@ -87,7 +87,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, onActivated, onMounted, ref, watch } from 'vue';
-import * as JSON5 from 'json5';
+import JSON5 from 'json5';
 import FormSwitch from '@/components/form/switch.vue';
 import FormSelect from '@/components/form/select.vue';
 import FormGroup from '@/components/form/group.vue';

packages/client/src/pages/theme-editor.vue

@@ -67,9 +67,9 @@
 <script lang="ts" setup>
 import { watch } from 'vue';
 import { toUnicode } from 'punycode/';
-import * as tinycolor from 'tinycolor2';
+import tinycolor from 'tinycolor2';
 import { v4 as uuid} from 'uuid';
-import * as JSON5 from 'json5';
+import JSON5 from 'json5';
 
 import FormButton from '@/components/ui/button.vue';
 import FormTextarea from '@/components/form/textarea.vue';

packages/client/src/pages/user/index.vue

@@ -125,7 +125,7 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent, computed } from 'vue';
-import * as age from 's-age';
+import age from 's-age';
 import XUserTimeline from './index.timeline.vue';
 import XNote from '@/components/note.vue';
 import MkFollowButton from '@/components/follow-button.vue';

packages/client/src/router.ts

@@ -1,4 +1,4 @@
-import { defineAsyncComponent, markRaw } from 'vue';
+import { AsyncComponentLoader, defineAsyncComponent, markRaw } from 'vue';
 import { createRouter, createWebHistory } from 'vue-router';
 import MkLoading from '@/pages/_loading_.vue';
 import MkError from '@/pages/_error_.vue';
@@ -6,8 +6,9 @@ import MkTimeline from '@/pages/timeline.vue';
 import { $i, iAmModerator } from './account';
 import { ui } from '@/config';
 
-const page = (path: string, ui?: string) => defineAsyncComponent({
+// pathに/が入るとrollupが解決してくれないので、() => import('*.vue')を指定すること
-	loader: ui ? () => import(`./ui/${ui}/pages/${path}.vue`) : () => import(`./pages/${path}.vue`),
+const page = (path: string | AsyncComponentLoader<any>, uiName?: string) => defineAsyncComponent({
+	loader: typeof path === 'string' ? uiName ? () => import(`./ui/${ui}/pages/${path}.vue`) : () => import(`./pages/${path}.vue`) : path,
 	loadingComponent: MkLoading,
 	errorComponent: MkError,
 });
@@ -17,10 +18,10 @@ let indexScrollPos = 0;
 const defaultRoutes = [
 	// NOTE: MkTimelineをdynamic importするとAsyncComponentWrapperが間に入るせいでkeep-aliveのコンポーネント指定が効かなくなる
 	{ path: '/', name: 'index', component: $i ? MkTimeline : page('welcome') },
-	{ path: '/@:acct/:page?', name: 'user', component: page('user/index'), props: route => ({ acct: route.params.acct, page: route.params.page || 'index' }) },
+	{ path: '/@:acct/:page?', name: 'user', component: page(() => import('./pages/user/index.vue')), props: route => ({ acct: route.params.acct, page: route.params.page || 'index' }) },
 	{ path: '/@:user/pages/:page', component: page('page'), props: route => ({ pageName: route.params.page, username: route.params.user }) },
-	{ path: '/@:user/pages/:pageName/view-source', component: page('page-editor/page-editor'), props: route => ({ initUser: route.params.user, initPageName: route.params.pageName }) },
+	{ path: '/@:user/pages/:pageName/view-source', component: page(() => import('./pages/page-editor/page-editor.vue')), props: route => ({ initUser: route.params.user, initPageName: route.params.pageName }) },
-	{ path: '/settings/:page(.*)?', name: 'settings', component: page('settings/index'), props: route => ({ initialPage: route.params.page || null }) },
+	{ path: '/settings/:page(.*)?', name: 'settings', component: page(() => import('./pages/settings/index.vue')), props: route => ({ initialPage: route.params.page || null }) },
 	{ path: '/reset-password/:token?', component: page('reset-password'), props: route => ({ token: route.params.token }) },
 	{ path: '/signup-complete/:code', component: page('signup-complete'), props: route => ({ code: route.params.code }) },
 	{ path: '/announcements', component: page('announcements') },
@@ -35,12 +36,12 @@ const defaultRoutes = [
 	{ path: '/emojis', component: page('emojis') },
 	{ path: '/search', component: page('search'), props: route => ({ query: route.query.q, channel: route.query.channel }) },
 	{ path: '/pages', name: 'pages', component: page('pages') },
-	{ path: '/pages/new', component: page('page-editor/page-editor') },
+	{ path: '/pages/new', component: page(() => import('./pages/page-editor/page-editor.vue')) },
-	{ path: '/pages/edit/:pageId', component: page('page-editor/page-editor'), props: route => ({ initPageId: route.params.pageId }) },
+	{ path: '/pages/edit/:pageId', component: page(() => import('./pages/page-editor/page-editor.vue')), props: route => ({ initPageId: route.params.pageId }) },
-	{ path: '/gallery', component: page('gallery/index') },
+	{ path: '/gallery', component: page(() => import('./pages/gallery/index.vue')) },
-	{ path: '/gallery/new', component: page('gallery/edit') },
+	{ path: '/gallery/new', component: page(() => import('./pages/gallery/edit.vue')) },
-	{ path: '/gallery/:postId/edit', component: page('gallery/edit'), props: route => ({ postId: route.params.postId }) },
+	{ path: '/gallery/:postId/edit', component: page(() => import('./pages/gallery/edit.vue')), props: route => ({ postId: route.params.postId }) },
-	{ path: '/gallery/:postId', component: page('gallery/post'), props: route => ({ postId: route.params.postId }) },
+	{ path: '/gallery/:postId', component: page(() => import('./pages/gallery/edit.vue')), props: route => ({ postId: route.params.postId }) },
 	{ path: '/channels', component: page('channels') },
 	{ path: '/channels/new', component: page('channel-editor') },
 	{ path: '/channels/:channelId/edit', component: page('channel-editor'), props: true },
@@ -52,23 +53,23 @@ const defaultRoutes = [
 	{ path: '/my/favorites', component: page('favorites') },
 	{ path: '/my/messages', component: page('messages') },
 	{ path: '/my/mentions', component: page('mentions') },
-	{ path: '/my/messaging', name: 'messaging', component: page('messaging/index') },
+	{ path: '/my/messaging', name: 'messaging', component: page(() => import('./pages/messaging/index.vue')) },
-	{ path: '/my/messaging/:user', component: page('messaging/messaging-room'), props: route => ({ userAcct: route.params.user }) },
+	{ path: '/my/messaging/:user', component: page(() => import('./pages/messaging/messaging-room.vue')), props: route => ({ userAcct: route.params.user }) },
-	{ path: '/my/messaging/group/:group', component: page('messaging/messaging-room'), props: route => ({ groupId: route.params.group }) },
+	{ path: '/my/messaging/group/:group', component: page(() => import('./pages/messaging/messaging-room.vue')), props: route => ({ groupId: route.params.group }) },
 	{ path: '/my/drive', name: 'drive', component: page('drive') },
 	{ path: '/my/drive/folder/:folder', component: page('drive') },
 	{ path: '/my/follow-requests', component: page('follow-requests') },
-	{ path: '/my/lists', component: page('my-lists/index') },
+	{ path: '/my/lists', component: page(() => import('./pages/my-lists/index.vue')) },
-	{ path: '/my/lists/:list', component: page('my-lists/list') },
+	{ path: '/my/lists/:list', component: page(() => import('./pages/my-lists/list.vue')) },
-	{ path: '/my/groups', component: page('my-groups/index') },
+	{ path: '/my/groups', component: page(() => import('./pages/my-groups/index.vue')) },
-	{ path: '/my/groups/:group', component: page('my-groups/group'), props: route => ({ groupId: route.params.group }) },
+	{ path: '/my/groups/:group', component: page(() => import('./pages/my-groups/group.vue')), props: route => ({ groupId: route.params.group }) },
-	{ path: '/my/antennas', component: page('my-antennas/index') },
+	{ path: '/my/antennas', component: page(() => import('./pages/my-antennas/index.vue')) },
-	{ path: '/my/antennas/create', component: page('my-antennas/create') },
+	{ path: '/my/antennas/create', component: page(() => import('./pages/my-antennas/create.vue')) },
-	{ path: '/my/antennas/:antennaId', component: page('my-antennas/edit'), props: true },
+	{ path: '/my/antennas/:antennaId', component: page(() => import('./pages/my-antennas/edit.vue')), props: true },
-	{ path: '/my/clips', component: page('my-clips/index') },
+	{ path: '/my/clips', component: page(() => import('./pages/my-clips/index.vue')) },
 	{ path: '/scratchpad', component: page('scratchpad') },
-	{ path: '/admin/:page(.*)?', component: iAmModerator ? page('admin/index') : page('not-found'), props: route => ({ initialPage: route.params.page || null }) },
+	{ path: '/admin/:page(.*)?', component: iAmModerator ? page(() => import('./pages/admin/index.vue')) : page('not-found'), props: route => ({ initialPage: route.params.page || null }) },
-	{ path: '/admin', component: iAmModerator ? page('admin/index') : page('not-found') },
+	{ path: '/admin', component: iAmModerator ? page(() => import('./pages/admin/index.vue')) : page('not-found') },
 	{ path: '/notes/:note', name: 'note', component: page('note'), props: route => ({ noteId: route.params.note }) },
 	{ path: '/tags/:tag', component: page('tag'), props: route => ({ tag: route.params.tag }) },
 	{ path: '/user-info/:user', component: page('user-info'), props: route => ({ userId: route.params.user }) },

packages/client/src/scripts/autocomplete.ts

@@ -1,5 +1,5 @@
-import { nextTick, Ref, ref } from 'vue';
+import { nextTick, Ref, ref, defineAsyncComponent } from 'vue';
-import * as getCaretCoordinates from 'textarea-caret';
+import getCaretCoordinates from 'textarea-caret';
 import { toASCII } from 'punycode/';
 import { popup } from '@/os';
 
@@ -157,7 +157,7 @@ export class Autocomplete {
 			const _y = ref(y);
 			const _q = ref(q);
 
-			const { dispose } = await popup(import('@/components/autocomplete.vue'), {
+			const { dispose } = await popup(defineAsyncComponent(() => import('@/components/autocomplete.vue')), {
 				textarea: this.textarea,
 				close: this.close,
 				type: type,

packages/client/src/scripts/emojilist.ts

@@ -8,4 +8,4 @@ export type UnicodeEmojiDef = {
 }
 
 // initial converted from https://github.com/muan/emojilib/commit/242fe68be86ed6536843b83f7e32f376468b38fb
-export const emojilist = require('../emojilist.json') as UnicodeEmojiDef[];
+export const emojilist = (await import('../emojilist.json')).default as UnicodeEmojiDef[];

packages/client/src/scripts/get-note-menu.ts

@@ -1,4 +1,4 @@
-import { Ref } from 'vue';
+import { defineAsyncComponent, Ref } from 'vue';
 import * as misskey from 'misskey-js';
 import { $i } from '@/account';
 import { i18n } from '@/i18n';
@@ -253,7 +253,7 @@ export function getNoteMenu(props: {
 				text: i18n.ts.reportAbuse,
 				action: () => {
 					const u = appearNote.url || appearNote.uri || `${url}/notes/${appearNote.id}`;
-					os.popup(import('@/components/abuse-report-window.vue'), {
+					os.popup(defineAsyncComponent(() => import('@/components/abuse-report-window.vue')), {
 						user: appearNote.user,
 						initialComment: `Note: ${u}\n-----\n`
 					}, {}, 'closed');

packages/client/src/scripts/get-user-menu.ts

@@ -6,6 +6,7 @@ import * as os from '@/os';
 import { userActions } from '@/store';
 import { router } from '@/router';
 import { $i, iAmModerator } from '@/account';
+import { defineAsyncComponent } from 'vue';
 
 export function getUserMenu(user) {
 	const meId = $i ? $i.id : null;
@@ -127,7 +128,7 @@ export function getUserMenu(user) {
 	}
 
 	function reportAbuse() {
-		os.popup(import('@/components/abuse-report-window.vue'), {
+		os.popup(defineAsyncComponent(() => import('@/components/abuse-report-window.vue')), {
 			user: user,
 		}, {}, 'closed');
 	}

packages/client/src/scripts/hpml/lib.ts

@@ -1,9 +1,9 @@
-import * as tinycolor from 'tinycolor2';
+import tinycolor from 'tinycolor2';
 import { Hpml } from './evaluator';
 import { values, utils } from '@syuilo/aiscript';
 import { Fn, HpmlScope } from '.';
 import { Expr } from './expr';
-import * as seedrandom from 'seedrandom';
+import seedrandom from 'seedrandom';
 
 /* TODO: https://www.chartjs.org/docs/latest/configuration/canvas-background.html#color
 // https://stackoverflow.com/questions/38493564/chart-area-background-color-chartjs

packages/client/src/scripts/reaction-picker.ts

@@ -1,4 +1,4 @@
-import { Ref, ref } from 'vue';
+import { defineAsyncComponent, Ref, ref } from 'vue';
 import { popup } from '@/os';
 
 class ReactionPicker {
@@ -12,7 +12,7 @@ class ReactionPicker {
 	}
 
 	public async init() {
-		await popup(import('@/components/emoji-picker-dialog.vue'), {
+		await popup(defineAsyncComponent(() => import('@/components/emoji-picker-dialog.vue')), {
 			src: this.src,
 			asReactionPicker: true,
 			manualShowing: this.manualShowing

packages/client/src/scripts/theme.ts

@@ -1,5 +1,5 @@
 import { globalEvents } from '@/events';
-import * as tinycolor from 'tinycolor2';
+import tinycolor from 'tinycolor2';
 
 export type Theme = {
 	id: string;
@@ -10,29 +10,29 @@ export type Theme = {
 	props: Record<string, string>;
 };
 
-export const lightTheme: Theme = require('@/themes/_light.json5');
+export const lightTheme: Theme = await import('@/themes/_light.json5');
-export const darkTheme: Theme = require('@/themes/_dark.json5');
+export const darkTheme: Theme = await import('@/themes/_dark.json5');
 
 export const themeProps = Object.keys(lightTheme.props).filter(key => !key.startsWith('X'));
 
 export const builtinThemes = [
-	require('@/themes/l-light.json5'),
+	await import('@/themes/l-light.json5'),
-	require('@/themes/l-coffee.json5'),
+	await import('@/themes/l-coffee.json5'),
-	require('@/themes/l-apricot.json5'),
+	await import('@/themes/l-apricot.json5'),
-	require('@/themes/l-rainy.json5'),
+	await import('@/themes/l-rainy.json5'),
-	require('@/themes/l-vivid.json5'),
+	await import('@/themes/l-vivid.json5'),
-	require('@/themes/l-cherry.json5'),
+	await import('@/themes/l-cherry.json5'),
-	require('@/themes/l-sushi.json5'),
+	await import('@/themes/l-sushi.json5'),
 
-	require('@/themes/d-dark.json5'),
+	await import('@/themes/d-dark.json5'),
-	require('@/themes/d-persimmon.json5'),
+	await import('@/themes/d-persimmon.json5'),
-	require('@/themes/d-astro.json5'),
+	await import('@/themes/d-astro.json5'),
-	require('@/themes/d-future.json5'),
+	await import('@/themes/d-future.json5'),
-	require('@/themes/d-botanical.json5'),
+	await import('@/themes/d-botanical.json5'),
-	require('@/themes/d-cherry.json5'),
+	await import('@/themes/d-cherry.json5'),
-	require('@/themes/d-ice.json5'),
+	await import('@/themes/d-ice.json5'),
-	require('@/themes/d-pumpkin.json5'),
+	await import('@/themes/d-pumpkin.json5'),
-	require('@/themes/d-black.json5'),
+	await import('@/themes/d-black.json5'),
 ] as Theme[];
 
 let timeout = null;

packages/client/src/store.ts

@@ -255,10 +255,13 @@ type Plugin = {
 /**
  * 常にメモリにロードしておく必要がないような設定情報を保管するストレージ(非リアクティブ)
  */
+import lightTheme from '@/themes/l-light.json5';
+import darkTheme from '@/themes/d-dark.json5'
+
 export class ColdDeviceStorage {
 	public static default = {
-		lightTheme: require('@/themes/l-light.json5') as Theme,
+		lightTheme,
-		darkTheme: require('@/themes/d-dark.json5') as Theme,
+		darkTheme,
 		syncDeviceDarkMode: true,
 		plugins: [] as Plugin[],
 		mediaVolume: 0.5,

packages/client/src/ui/_common_/common.vue

@@ -39,7 +39,7 @@ export default defineComponent({
 					id: notification.id
 				});
 
-				popup(import('@/components/notification-toast.vue'), {
+				popup(defineAsyncComponent(() => import('@/components/notification-toast.vue')), {
 					notification
 				}, {}, 'closed');
 			}

packages/client/src/ui/_common_/sidebar-for-mobile.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, toRef, watch } from 'vue';
+import { computed, defineAsyncComponent, defineComponent, ref, toRef, watch } from 'vue';
 import { host } from '@/config';
 import { search } from '@/scripts/search';
 import * as os from '@/os';
@@ -67,7 +67,7 @@ export default defineComponent({
 				}, ev);
 			},
 			more: () => {
-				os.popup(import('@/components/launch-pad.vue'), {}, {
+				os.popup(defineAsyncComponent(() => import('@/components/launch-pad.vue')), {}, {
 				}, 'closed');
 			},
 		};

packages/client/src/ui/_common_/sidebar.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
+import { computed, defineAsyncComponent, ref, watch } from 'vue';
 import * as os from '@/os';
 import { menuDef } from '@/menu';
 import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
@@ -69,7 +69,7 @@ function openAccountMenu(ev: MouseEvent) {
 }
 
 function more(ev: MouseEvent) {
-	os.popup(import('@/components/launch-pad.vue'), {
+	os.popup(defineAsyncComponent(() => import('@/components/launch-pad.vue')), {
 		src: ev.currentTarget ?? ev.target,
 	}, {
 	}, 'closed');

packages/client/src/ui/classic.header.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineAsyncComponent, defineComponent } from 'vue';
 import { host } from '@/config';
 import { search } from '@/scripts/search';
 import * as os from '@/os';
@@ -101,7 +101,7 @@ export default defineComponent({
 		},
 
 		more(ev) {
-			os.popup(import('@/components/launch-pad.vue'), {
+			os.popup(defineAsyncComponent(() => import('@/components/launch-pad.vue')), {
 				src: ev.currentTarget ?? ev.target,
 				anchor: { x: 'center', y: 'bottom' },
 			}, {

packages/client/src/ui/classic.sidebar.vue

@@ -41,7 +41,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineAsyncComponent, defineComponent } from 'vue';
 import { host } from '@/config';
 import { search } from '@/scripts/search';
 import * as os from '@/os';
@@ -121,7 +121,7 @@ export default defineComponent({
 		},
 
 		more(ev) {
-			os.popup(import('@/components/launch-pad.vue'), {
+			os.popup(defineAsyncComponent(() => import('@/components/launch-pad.vue')), {
 				src: ev.currentTarget ?? ev.target,
 			}, {}, 'closed');
 		},

packages/client/src/ui/deck/notifications-column.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import { defineAsyncComponent } from 'vue';
 import XColumn from './column.vue';
 import XNotifications from '@/components/notifications.vue';
 import * as os from '@/os';
@@ -24,7 +24,7 @@ const emit = defineEmits<{
 }>();
 
 function func() {
-	os.popup(import('@/components/notification-setting-window.vue'), {
+	os.popup(defineAsyncComponent(() => import('@/components/notification-setting-window.vue')), {
 		includingTypes: props.column.includingTypes,
 	}, {
 		done: async (res) => {

packages/client/src/widgets/notifications.vue

@@ -15,6 +15,7 @@ import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExp
 import MkContainer from '@/components/ui/container.vue';
 import XNotifications from '@/components/notifications.vue';
 import * as os from '@/os';
+import { defineAsyncComponent } from 'vue';
 
 const name = 'notifications';
 
@@ -49,7 +50,7 @@ const { widgetProps, configure, save } = useWidgetPropsManager(name,
 );
 
 const configureNotification = () => {
-	os.popup(import('@/components/notification-setting-window.vue'), {
+	os.popup(defineAsyncComponent(() => import('@/components/notification-setting-window.vue')), {
 		includingTypes: widgetProps.includingTypes,
 	}, {
 		done: async (res) => {

packages/client/tsconfig.json

@@ -18,6 +18,9 @@
 		"strictNullChecks": true,
 		"experimentalDecorators": true,
 		"resolveJsonModule": true,
+		"allowSyntheticDefaultImports": true,
+		"isolatedModules": true,
+		"useDefineForClassFields": true,
 		"baseUrl": ".",
 		"paths": {
 			"@/*": ["./src/*"],
@@ -26,6 +29,9 @@
 			"node_modules/@types",
 			"@types",
 		],
+		"types": [
+			"vite/client",
+		],
 		"lib": [
 			"esnext",
 			"dom"

packages/client/vite.config.ts

@@ -0,0 +1,72 @@
+import * as fs from 'fs';
+import pluginVue from '@vitejs/plugin-vue';
+import pluginJson5 from './vite.json5';
+import { defineConfig } from 'vite';
+
+import locales from '../../locales';
+import meta from '../../package.json';
+
+const extensions = ['.ts', '.tsx', '.js', '.jsx', '.mjs', '.json', '.json5', '.svg', '.sass', '.scss', '.css', '.vue'];
+
+export default defineConfig(({ command, mode }) => {
+	fs.mkdirSync(__dirname + '/../../built', { recursive: true });
+	fs.writeFileSync(__dirname + '/../../built/meta.json', JSON.stringify({ version: meta.version }), 'utf-8');
+
+	return {
+		base: '/assets/',
+
+		plugins: [
+			pluginVue({
+				reactivityTransform: true,
+			}),
+			pluginJson5(),
+		],
+
+		resolve: {
+			extensions,
+			alias: {
+				'@/': __dirname + '/src/',
+				'/client-assets/': __dirname + '/assets/',
+				'/static-assets/': __dirname + '/../backend/assets/',
+			},
+		},
+
+		define: {
+			_VERSION_: JSON.stringify(meta.version),
+			_LANGS_: JSON.stringify(Object.entries(locales).map(([k, v]) => [k, v._lang_])),
+			_ENV_: JSON.stringify(process.env.NODE_ENV),
+			_DEV_: process.env.NODE_ENV !== 'production',
+			_PERF_PREFIX_: JSON.stringify('Misskey:'),
+			_DATA_TRANSFER_DRIVE_FILE_: JSON.stringify('mk_drive_file'),
+			_DATA_TRANSFER_DRIVE_FOLDER_: JSON.stringify('mk_drive_folder'),
+			_DATA_TRANSFER_DECK_COLUMN_: JSON.stringify('mk_deck_column'),
+			__VUE_OPTIONS_API__: true,
+			__VUE_PROD_DEVTOOLS__: false,
+		},
+
+		build: {
+			target: [
+				'chrome100',
+				'firefox100',
+				'safari15',
+			],
+			manifest: 'manifest.json',
+			rollupOptions: {
+				input: {
+					app: './src/init.ts',
+				},
+				output: {
+					manualChunks: {
+						vue: ['vue', 'vue-router'],
+					},
+				},
+			},
+			cssCodeSplit: true,
+			outDir: __dirname + '/../../built/_client_dist_',
+			assetsDir: '.',
+			emptyOutDir: false,
+			sourcemap: process.env.NODE_ENV !== 'production',
+			reportCompressedSize: false,
+		},
+	}
+});

packages/client/vite.json5.ts

@@ -0,0 +1,38 @@
+// Original: https://github.com/rollup/plugins/tree/8835dd2aed92f408d7dc72d7cc25a9728e16face/packages/json
+
+import JSON5 from 'json5';
+import { Plugin } from 'rollup';
+import { createFilter, dataToEsm } from '@rollup/pluginutils';
+import { RollupJsonOptions } from '@rollup/plugin-json';
+
+export default function json5(options: RollupJsonOptions = {}): Plugin {
+  const filter = createFilter(options.include, options.exclude);
+  const indent = 'indent' in options ? options.indent : '\t';
+
+  return {
+    name: 'json5',
+
+    // eslint-disable-next-line no-shadow
+    transform(json, id) {
+      if (id.slice(-6) !== '.json5' || !filter(id)) return null;
+
+      try {
+        const parsed = JSON5.parse(json);
+        return {
+          code: dataToEsm(parsed, {
+            preferConst: options.preferConst,
+            compact: options.compact,
+            namedExports: options.namedExports,
+            indent
+          }),
+          map: { mappings: '' }
+        };
+      } catch (err) {
+        const message = 'Could not parse JSON file';
+        const position = parseInt(/[\d]/.exec(err.message)[0], 10);
+        this.warn({ message, id, position });
+        return null;
+      }
+    }
+  };
+}

packages/client/webpack.config.js

@@ -1,192 +0,0 @@
-/**
- * webpack configuration
- */
-
-const fs = require('fs');
-const webpack = require('webpack');
-const { VueLoaderPlugin } = require('vue-loader');
-
-class WebpackOnBuildPlugin {
-	constructor(callback) {
-		this.callback = callback;
-	}
-
-	apply(compiler) {
-		compiler.hooks.done.tap('WebpackOnBuildPlugin', this.callback);
-	}
-}
-
-const isProduction = process.env.NODE_ENV === 'production';
-
-const locales = require('../../locales');
-const meta = require('../../package.json');
-
-const postcss = {
-	loader: 'postcss-loader',
-	options: {
-		postcssOptions: {
-			plugins: [
-				require('cssnano')({
-					preset: 'default'
-				})
-			]
-		}
-	},
-};
-
-module.exports = {
-	entry: {
-		app: './src/init.ts',
-	},
-	module: {
-		rules: [{
-			test: /\.vue$/,
-			exclude: /node_modules/,
-			use: [{
-				loader: 'vue-loader',
-				options: {
-					cssSourceMap: false,
-					reactivityTransform: true,
-					compilerOptions: {
-						preserveWhitespace: false
-					}
-				}
-			}]
-		}, {
-			test: /\.scss?$/,
-			exclude: /node_modules/,
-			oneOf: [{
-				resourceQuery: /module/,
-				use: [{
-					loader: 'vue-style-loader'
-				}, {
-					loader: 'css-loader',
-					options: {
-						modules: true,
-						esModule: false, // TODO: trueにすると壊れる。Vue3移行の折にはtrueにできるかもしれない
-						url: false,
-					}
-				}, postcss, {
-					loader: 'sass-loader',
-					options: {
-						implementation: require('sass'),
-						sassOptions: {
-							fiber: false
-						}
-					}
-				}]
-			}, {
-				use: [{
-					loader: 'vue-style-loader'
-				}, {
-					loader: 'css-loader',
-					options: {
-						url: false,
-						esModule: false, // TODO: trueにすると壊れる。Vue3移行の折にはtrueにできるかもしれない
-					}
-				}, postcss, {
-					loader: 'sass-loader',
-					options: {
-						implementation: require('sass'),
-						sassOptions: {
-							fiber: false
-						}
-					}
-				}]
-			}]
-		}, {
-			test: /\.css$/,
-			oneOf: [{
-				resourceQuery: /module/,
-				use: [{
-					loader: 'vue-style-loader'
-				}, {
-					loader: 'css-loader',
-					options: {
-						modules: true,
-						esModule: false, // TODO: trueにすると壊れる。Vue3移行の折にはtrueにできるかもしれない
-					}
-				}, postcss]
-			}, {
-				use: [{
-					loader: 'vue-style-loader'
-				}, {
-					loader: 'css-loader',
-					options: {
-						esModule: false, // TODO: trueにすると壊れる。Vue3移行の折にはtrueにできるかもしれない
-					}
-				}, postcss]
-			}]
-		}, {
-			test: /\.svg$/,
-			use: [
-				'vue-loader',
-				'vue-svg-loader',
-			],
-		}, {
-			test: /\.(eot|woff|woff2|svg|ttf)([?]?.*)$/,
-			type: 'asset/resource'
-		}, {
-			test: /\.json5$/,
-			loader: 'json5-loader',
-			options: {
-				esModule: false,
-			},
-			type: 'javascript/auto'
-		}, {
-			test: /\.ts$/,
-			exclude: /node_modules/,
-			use: [{
-				loader: 'ts-loader',
-				options: {
-					happyPackMode: true,
-					transpileOnly: true,
-					configFile: __dirname + '/tsconfig.json',
-					appendTsSuffixTo: [/\.vue$/]
-				}
-			}]
-		}]
-	},
-	plugins: [
-		new webpack.ProgressPlugin({}),
-		new webpack.DefinePlugin({
-			_VERSION_: JSON.stringify(meta.version),
-			_LANGS_: JSON.stringify(Object.entries(locales).map(([k, v]) => [k, v._lang_])),
-			_ENV_: JSON.stringify(process.env.NODE_ENV),
-			_DEV_: process.env.NODE_ENV !== 'production',
-			_PERF_PREFIX_: JSON.stringify('Misskey:'),
-			_DATA_TRANSFER_DRIVE_FILE_: JSON.stringify('mk_drive_file'),
-			_DATA_TRANSFER_DRIVE_FOLDER_: JSON.stringify('mk_drive_folder'),
-			_DATA_TRANSFER_DECK_COLUMN_: JSON.stringify('mk_deck_column'),
-			__VUE_OPTIONS_API__: true,
-			__VUE_PROD_DEVTOOLS__: false,
-		}),
-		new VueLoaderPlugin(),
-		new WebpackOnBuildPlugin(() => {
-			fs.mkdirSync(__dirname + '/../../built', { recursive: true });
-			fs.writeFileSync(__dirname + '/../../built/meta.json', JSON.stringify({ version: meta.version }), 'utf-8');
-		}),
-	],
-	output: {
-		path: __dirname + '/../../built/_client_dist_',
-		filename: `[name].${meta.version}.js`,
-		publicPath: `/assets/`,
-		pathinfo: false,
-	},
-	resolve: {
-		extensions: [
-			'.js', '.ts', '.json'
-		],
-		alias: {
-			'@': __dirname + '/src/',
-		}
-	},
-	resolveLoader: {
-		modules: ['node_modules']
-	},
-	experiments: {
-		topLevelAwait: true
-	},
-	devtool: false, //'source-map',
-	mode: isProduction ? 'production' : 'development'
-};