vue3: 非同期コンポーネント読み込みの移行 (#6580)

* migrate async components

* routerとwidgetsも

src/client/components/code.vue

@@ -3,10 +3,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, defineAsyncComponent } from 'vue';
 export default defineComponent({
 	components: {
-		XCode: () => import('./code-core.vue').then(m => m.default)
+		XCode: defineAsyncComponent(() => import('./code-core.vue').then(m => m.default))
 	},
 	props: {
 		code: {

src/client/components/formula.vue

@@ -3,10 +3,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, defineAsyncComponent } from 'vue';
 export default defineComponent({
 	components: {
-		XFormula: () => import('./formula-core.vue').then(m => m.default)
+		XFormula: defineAsyncComponent(() => import('./formula-core.vue').then(m => m.default))
 	},
 	props: {
 		formula: {

src/client/components/mfm.ts

@@ -247,7 +247,6 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'mathInline': {
-					//const MkFormula = () => import('./formula.vue').then(m => m.default);
 					return [createElement(MkFormula, {
 						key: Math.random(),
 						props: {
@@ -258,7 +257,6 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'mathBlock': {
-					//const MkFormula = () => import('./formula.vue').then(m => m.default);
 					return [createElement(MkFormula, {
 						key: Math.random(),
 						props: {
@@ -269,7 +267,6 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'search': {
-					//const MkGoogle = () => import('./google.vue').then(m => m.default);
 					return [createElement(MkGoogle, {
 						key: Math.random(),
 						props: {

src/client/components/post-form.vue

@@ -52,7 +52,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, defineAsyncComponent } from 'vue';
 import { faReply, faQuoteRight, faPaperPlane, faTimes, faUpload, faPollH, faGlobe, faHome, faUnlock, faEnvelope, faPlus, faPhotoVideo, faCloud, faLink, faAt, faBiohazard, faPlug } from '@fortawesome/free-solid-svg-icons';
 import { faEyeSlash, faLaughSquint } from '@fortawesome/free-regular-svg-icons';
 import insertTextAtCursor from 'insert-text-at-cursor';
@@ -73,9 +73,9 @@ import { noteVisibilities } from '../../types';
 export default defineComponent({
 	components: {
 		XNotePreview,
-		XUploader: () => import('./uploader.vue').then(m => m.default),
+		XUploader: defineAsyncComponent(() => import('./uploader.vue').then(m => m.default)),
-		XPostFormAttaches: () => import('./post-form-attaches.vue').then(m => m.default),
+		XPostFormAttaches: defineAsyncComponent(() => import('./post-form-attaches.vue').then(m => m.default)),
-		XPollEditor: () => import('./poll-editor.vue').then(m => m.default)
+		XPollEditor: defineAsyncComponent(() => import('./poll-editor.vue').then(m => m.default))
 	},
 
 	props: {

src/client/components/signup.vue

@@ -49,7 +49,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, defineAsyncComponent } from 'vue';
 import { faLock, faExclamationTriangle, faSpinner, faCheck, faKey } from '@fortawesome/free-solid-svg-icons';
 const getPasswordStrength = require('syuilo-password-strength');
 import { toUnicode } from 'punycode';
@@ -63,7 +63,15 @@ export default defineComponent({
 		MkButton,
 		MkInput,
 		MkSwitch,
-		captcha: () => import('./captcha.vue').then(x => x.default),
+		captcha: defineAsyncComponent(() => import('./captcha.vue').then(m => m.default)),
+	},
+
+	props: {
+		autoSet: {
+			type: Boolean,
+			required: false,
+			default: false,
+		}
 	},
 
 	data() {
@@ -85,14 +93,6 @@ export default defineComponent({
 		}
 	},
 
-	props: {
-		autoSet: {
-			type: Boolean,
-			required: false,
-			default: false,
-		}
-	},
-
 	computed: {
 		meta() {
 			return this.$store.state.instance.meta;

src/client/default.vue

@@ -90,7 +90,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, defineAsyncComponent } from 'vue';
 import { faGripVertical, faChevronLeft, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faListUl, faPlus, faUserClock, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faInfoCircle, faQuestionCircle, faProjectDiagram } from '@fortawesome/free-solid-svg-icons';
 import { faBell, faEnvelope, faLaugh, faComments } from '@fortawesome/free-regular-svg-icons';
 import { v4 as uuid } from 'uuid';
@@ -105,9 +105,9 @@ const DESKTOP_THRESHOLD = 1100;
 export default defineComponent({
 	components: {
 		XSidebar,
-		XClock: () => import('./components/header-clock.vue').then(m => m.default),
+		XClock: defineAsyncComponent(() => import('./components/header-clock.vue').then(m => m.default)),
-		MkButton: () => import('./components/ui/button.vue').then(m => m.default),
+		MkButton: defineAsyncComponent(() => import('./components/ui/button.vue').then(m => m.default)),
-		XDraggable: () => import('vuedraggable'),
+		XDraggable: defineAsyncComponent(() => import('vuedraggable')),
 	},
 
 	data() {

src/client/pages/index.home.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, defineAsyncComponent } from 'vue';
 import { faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faListUl, faSatellite, faCircle } from '@fortawesome/free-solid-svg-icons';
 import { faComments } from '@fortawesome/free-regular-svg-icons';
 import Progress from '../scripts/loading';
@@ -41,7 +41,7 @@ export default defineComponent({
 
 	components: {
 		XTimeline,
-		XTutorial: () => import('./index.home.tutorial.vue').then(m => m.default),
+		XTutorial: defineAsyncComponent(() => import('./index.home.tutorial.vue').then(m => m.default)),
 		XPostForm,
 	},
 

src/client/pages/index.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, defineAsyncComponent } from 'vue';
 import Home from './index.home.vue';
 
 export default defineComponent({
@@ -11,7 +11,7 @@ export default defineComponent({
 
 	components: {
 		Home,
-		Welcome: () => import('./index.welcome.vue').then(m => m.default),
+		Welcome: defineAsyncComponent(() => import('./index.welcome.vue').then(m => m.default)),
 	},
 
 	data() {

src/client/pages/instance/settings.vue

@@ -199,7 +199,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, defineAsyncComponent } from 'vue';
 import { faPencilAlt, faShareAlt, faGhost, faCog, faPlus, faCloud, faInfoCircle, faBan, faSave, faServer, faLink, faThumbtack, faUser, faShieldAlt, faKey, faBolt } from '@fortawesome/free-solid-svg-icons';
 import { faTrashAlt, faEnvelope } from '@fortawesome/free-regular-svg-icons';
 import { faTwitter, faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons';
@@ -225,7 +225,7 @@ export default defineComponent({
 		MkTextarea,
 		MkSwitch,
 		MkInfo,
-		Captcha: () => import('../../components/captcha.vue').then(x => x.default),
+		Captcha: defineAsyncComponent(() => import('../../components/captcha.vue').then(m => m.default)),
 	},
 
 	data() {

src/client/pages/messaging/messaging-room.form.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, defineAsyncComponent } from 'vue';
 import { faPaperPlane, faPhotoVideo, faLaughSquint } from '@fortawesome/free-solid-svg-icons';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import * as autosize from 'autosize';
@@ -32,7 +32,7 @@ import { selectFile } from '../../scripts/select-file';
 
 export default defineComponent({
 	components: {
-		XUploader: () => import('../../components/uploader.vue').then(m => m.default),
+		XUploader: defineAsyncComponent(() => import('../../components/uploader.vue').then(m => m.default)),
 	},
 	props: {
 		user: {

src/client/pages/user/index.vue

@@ -106,7 +106,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, defineAsyncComponent } from 'vue';
 import { faExclamationTriangle, faEllipsisH, faRobot, faLock, faBookmark, faChartBar, faImage, faBirthdayCake, faMapMarker } from '@fortawesome/free-solid-svg-icons';
 import { faCalendarAlt, faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
 import * as age from 's-age';
@@ -127,8 +127,8 @@ export default defineComponent({
 		MkFollowButton,
 		MkContainer,
 		MkRemoteCaution,
-		XPhotos: () => import('./index.photos.vue').then(m => m.default),
+		XPhotos: defineAsyncComponent(() => import('./index.photos.vue').then(m => m.default)),
-		XActivity: () => import('./index.activity.vue').then(m => m.default),
+		XActivity: defineAsyncComponent(() => import('./index.activity.vue').then(m => m.default)),
 	},
 
 	metaInfo() {

src/client/router.ts

@@ -1,11 +1,12 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import MkIndex from './pages/index.vue';
+import { defineAsyncComponent } from 'vue';
 
-const page = (path: string) => () => import(`./pages/${path}.vue`).then(m => m.default);
+const page = (path: string) => defineAsyncComponent(() => import(`./pages/${path}.vue`).then(m => m.default));
 
 let indexScrollPos = 0;
 
-export const router = new createRouter({
+export const router = createRouter({
 	history: createWebHistory(),
 	routes: [
 		{ path: '/', name: 'index', component: MkIndex },

src/client/widgets/index.ts

@@ -1,17 +1,17 @@
-import { App } from 'vue';
+import { App, defineAsyncComponent } from 'vue';
 
 export default function(app: App) {
-	app.component('mkw-welcome', () => import('./welcome.vue').then(m => m.default));
+	app.component('mkw-welcome', defineAsyncComponent(() => import('./welcome.vue').then(m => m.default)));
-	app.component('mkw-memo', () => import('./memo.vue').then(m => m.default));
+	app.component('mkw-memo', defineAsyncComponent(() => import('./memo.vue').then(m => m.default)));
-	app.component('mkw-notifications', () => import('./notifications.vue').then(m => m.default));
+	app.component('mkw-notifications', defineAsyncComponent(() => import('./notifications.vue').then(m => m.default)));
-	app.component('mkw-timeline', () => import('./timeline.vue').then(m => m.default));
+	app.component('mkw-timeline', defineAsyncComponent(() => import('./timeline.vue').then(m => m.default)));
-	app.component('mkw-calendar', () => import('./calendar.vue').then(m => m.default));
+	app.component('mkw-calendar', defineAsyncComponent(() => import('./calendar.vue').then(m => m.default)));
-	app.component('mkw-rss', () => import('./rss.vue').then(m => m.default));
+	app.component('mkw-rss', defineAsyncComponent(() => import('./rss.vue').then(m => m.default)));
-	app.component('mkw-trends', () => import('./trends.vue').then(m => m.default));
+	app.component('mkw-trends', defineAsyncComponent(() => import('./trends.vue').then(m => m.default)));
-	app.component('mkw-clock', () => import('./clock.vue').then(m => m.default));
+	app.component('mkw-clock', defineAsyncComponent(() => import('./clock.vue').then(m => m.default)));
-	app.component('mkw-activity', () => import('./activity.vue').then(m => m.default));
+	app.component('mkw-activity', defineAsyncComponent(() => import('./activity.vue').then(m => m.default)));
-	app.component('mkw-photos', () => import('./photos.vue').then(m => m.default));
+	app.component('mkw-photos', defineAsyncComponent(() => import('./photos.vue').then(m => m.default)));
-	app.component('mkw-digitalClock', () => import('./digital-clock.vue').then(m => m.default));
+	app.component('mkw-digitalClock', defineAsyncComponent(() => import('./digital-clock.vue').then(m => m.default)));
 }
 
 export const widgets = [