From 0bf4c5cb298afd52ffe088af4150f5423bd80dbc Mon Sep 17 00:00:00 2001
From: Xeltica <7106976+Xeltica@users.noreply.github.com>
Date: Fri, 24 Jul 2020 18:24:41 +0900
Subject: [PATCH] =?UTF-8?q?vue3:=20=E9=9D=9E=E5=90=8C=E6=9C=9F=E3=82=B3?=
 =?UTF-8?q?=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E8=AA=AD?=
 =?UTF-8?q?=E3=81=BF=E8=BE=BC=E3=81=BF=E3=81=AE=E7=A7=BB=E8=A1=8C=20(#6580?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* migrate async components

* routerとwidgetsも
---
 src/client/components/code.vue                |  4 ++--
 src/client/components/formula.vue             |  4 ++--
 src/client/components/mfm.ts                  |  3 ---
 src/client/components/post-form.vue           |  8 +++----
 src/client/components/signup.vue              | 20 ++++++++--------
 src/client/default.vue                        |  8 +++----
 src/client/pages/index.home.vue               |  4 ++--
 src/client/pages/index.vue                    |  4 ++--
 src/client/pages/instance/settings.vue        |  4 ++--
 .../pages/messaging/messaging-room.form.vue   |  4 ++--
 src/client/pages/user/index.vue               |  6 ++---
 src/client/router.ts                          |  5 ++--
 src/client/widgets/index.ts                   | 24 +++++++++----------
 13 files changed, 48 insertions(+), 50 deletions(-)

diff --git a/src/client/components/code.vue b/src/client/components/code.vue
index cceaf9bece..75c887ff55 100644
--- a/src/client/components/code.vue
+++ b/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: {
diff --git a/src/client/components/formula.vue b/src/client/components/formula.vue
index ce5d61dc8b..0284063a44 100644
--- a/src/client/components/formula.vue
+++ b/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: {
diff --git a/src/client/components/mfm.ts b/src/client/components/mfm.ts
index 122368f74b..af2651533e 100644
--- a/src/client/components/mfm.ts
+++ b/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: {
diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue
index 9c78f57acb..5260a9ad59 100644
--- a/src/client/components/post-form.vue
+++ b/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),
-		XPostFormAttaches: () => import('./post-form-attaches.vue').then(m => m.default),
-		XPollEditor: () => import('./poll-editor.vue').then(m => m.default)
+		XUploader: defineAsyncComponent(() => import('./uploader.vue').then(m => m.default)),
+		XPostFormAttaches: defineAsyncComponent(() => import('./post-form-attaches.vue').then(m => m.default)),
+		XPollEditor: defineAsyncComponent(() => import('./poll-editor.vue').then(m => m.default))
 	},
 
 	props: {
diff --git a/src/client/components/signup.vue b/src/client/components/signup.vue
index 4056cbf4f6..27febc80c8 100644
--- a/src/client/components/signup.vue
+++ b/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;
diff --git a/src/client/default.vue b/src/client/default.vue
index 2bbb73c0ff..d143d9407d 100644
--- a/src/client/default.vue
+++ b/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),
-		MkButton: () => import('./components/ui/button.vue').then(m => m.default),
-		XDraggable: () => import('vuedraggable'),
+		XClock: defineAsyncComponent(() => import('./components/header-clock.vue').then(m => m.default)),
+		MkButton: defineAsyncComponent(() => import('./components/ui/button.vue').then(m => m.default)),
+		XDraggable: defineAsyncComponent(() => import('vuedraggable')),
 	},
 
 	data() {
diff --git a/src/client/pages/index.home.vue b/src/client/pages/index.home.vue
index 5f72f5cde4..8028040897 100644
--- a/src/client/pages/index.home.vue
+++ b/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,
 	},
 
diff --git a/src/client/pages/index.vue b/src/client/pages/index.vue
index f27a692fbd..8ca51241c1 100644
--- a/src/client/pages/index.vue
+++ b/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() {
diff --git a/src/client/pages/instance/settings.vue b/src/client/pages/instance/settings.vue
index 3a7edb7627..7d36a0a314 100644
--- a/src/client/pages/instance/settings.vue
+++ b/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() {
diff --git a/src/client/pages/messaging/messaging-room.form.vue b/src/client/pages/messaging/messaging-room.form.vue
index 3a2e903784..7e8ff3eebc 100644
--- a/src/client/pages/messaging/messaging-room.form.vue
+++ b/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: {
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index b6aec7a062..a15d904194 100644
--- a/src/client/pages/user/index.vue
+++ b/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),
-		XActivity: () => import('./index.activity.vue').then(m => m.default),
+		XPhotos: defineAsyncComponent(() => import('./index.photos.vue').then(m => m.default)),
+		XActivity: defineAsyncComponent(() => import('./index.activity.vue').then(m => m.default)),
 	},
 
 	metaInfo() {
diff --git a/src/client/router.ts b/src/client/router.ts
index c8cb3caaef..8175e97daf 100644
--- a/src/client/router.ts
+++ b/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 },
diff --git a/src/client/widgets/index.ts b/src/client/widgets/index.ts
index 1e6d4fe121..3bedaaee05 100644
--- a/src/client/widgets/index.ts
+++ b/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-memo', () => import('./memo.vue').then(m => m.default));
-	app.component('mkw-notifications', () => import('./notifications.vue').then(m => m.default));
-	app.component('mkw-timeline', () => import('./timeline.vue').then(m => m.default));
-	app.component('mkw-calendar', () => import('./calendar.vue').then(m => m.default));
-	app.component('mkw-rss', () => import('./rss.vue').then(m => m.default));
-	app.component('mkw-trends', () => import('./trends.vue').then(m => m.default));
-	app.component('mkw-clock', () => import('./clock.vue').then(m => m.default));
-	app.component('mkw-activity', () => import('./activity.vue').then(m => m.default));
-	app.component('mkw-photos', () => import('./photos.vue').then(m => m.default));
-	app.component('mkw-digitalClock', () => import('./digital-clock.vue').then(m => m.default));
+	app.component('mkw-welcome', defineAsyncComponent(() => import('./welcome.vue').then(m => m.default)));
+	app.component('mkw-memo', defineAsyncComponent(() => import('./memo.vue').then(m => m.default)));
+	app.component('mkw-notifications', defineAsyncComponent(() => import('./notifications.vue').then(m => m.default)));
+	app.component('mkw-timeline', defineAsyncComponent(() => import('./timeline.vue').then(m => m.default)));
+	app.component('mkw-calendar', defineAsyncComponent(() => import('./calendar.vue').then(m => m.default)));
+	app.component('mkw-rss', defineAsyncComponent(() => import('./rss.vue').then(m => m.default)));
+	app.component('mkw-trends', defineAsyncComponent(() => import('./trends.vue').then(m => m.default)));
+	app.component('mkw-clock', defineAsyncComponent(() => import('./clock.vue').then(m => m.default)));
+	app.component('mkw-activity', defineAsyncComponent(() => import('./activity.vue').then(m => m.default)));
+	app.component('mkw-photos', defineAsyncComponent(() => import('./photos.vue').then(m => m.default)));
+	app.component('mkw-digitalClock', defineAsyncComponent(() => import('./digital-clock.vue').then(m => m.default)));
 }
 
 export const widgets = [