usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

* migrate async components

* routerとwidgetsも
This commit is contained in:
Xeltica 2020-07-24 18:24:41 +09:00 committed by GitHub
parent f9e350b041
commit 0bf4c5cb29
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 48 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/client/components/code.vue
View File

@ -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: {

4
src/client/components/formula.vue
View File

@ -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: {

3
src/client/components/mfm.ts
View File

@ -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: {

8
src/client/components/post-form.vue
View File

@ -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: {

20
src/client/components/signup.vue
View File

@ -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;

8
src/client/default.vue
View File

@ -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() {

4
src/client/pages/index.home.vue
View File

@ -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,
},

4
src/client/pages/index.vue
View File

@ -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() {

4
src/client/pages/instance/settings.vue
View File

@ -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() {

4
src/client/pages/messaging/messaging-room.form.vue
View File

@ -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: {

6
src/client/pages/user/index.vue
View File

@ -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() {

5
src/client/router.ts
View File

@ -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 },

24
src/client/widgets/index.ts
View File

@ -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 = [