Widgets: Code split and refactor

mei23 · Sep 17, 2022 · da56765 · da56765
1 parent 8066af1
commit da56765
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 58 deletions.
diff --git a/src/client/app/common/views/deck/deck.widgets-column.vue b/src/client/app/common/views/deck/deck.widgets-column.vue
@@ -5,6 +5,7 @@
 	<div class="gqpwvtwtprsbmnssnbicggtwqhmylhnq">
 		<template v-if="edit">
 			<header>
+				<!-- widget/adder/deck -->
 				<select v-model="widgetAdderSelected" @change="addWidget">
 					<option value="profile">{{ $t('@.widgets.profile') }}</option>
 					<option value="analog-clock">{{ $t('@.widgets.analog-clock') }}</option>

diff --git a/src/client/app/common/views/widgets/index.ts b/src/client/app/common/views/widgets/index.ts
@@ -1,34 +1,18 @@
 import Vue from 'vue';
 
-import wAnalogClock from './analog-clock.vue';
-import wVersion from './version.vue';
-import wRss from './rss.vue';
-import wServer from './server.vue';
-import wPostsMonitor from './posts-monitor.vue';
-import wMemo from './memo.vue';
-import wBroadcast from './broadcast.vue';
-import wCalendar from './calendar.vue';
-import wSlideshow from './slideshow.vue';
-import wTips from './tips.vue';
-import wNav from './nav.vue';
-import wHashtags from './hashtags.vue';
-import wWords from './words.vue';
-import wInstance from './instance.vue';
-import wPostForm from './post-form.vue';
-
-Vue.component('mkw-analog-clock', wAnalogClock);
-Vue.component('mkw-nav', wNav);
-Vue.component('mkw-calendar', wCalendar);
-Vue.component('mkw-slideshow', wSlideshow);
-Vue.component('mkw-tips', wTips);
-Vue.component('mkw-broadcast', wBroadcast);
-Vue.component('mkw-server', wServer);
-Vue.component('mkw-posts-monitor', wPostsMonitor);
-Vue.component('mkw-memo', wMemo);
-Vue.component('mkw-rss', wRss);
-Vue.component('mkw-version', wVersion);
-Vue.component('mkw-hashtags', wHashtags);
-Vue.component('mkw-words', wWords);
-Vue.component('mkw-instance', wInstance);
-Vue.component('mkw-post-form', wPostForm);
+Vue.component('mkw-analog-clock', () => import('./analog-clock.vue').then(m => m.default));
+Vue.component('mkw-nav', () => import('./nav.vue').then(m => m.default));
+Vue.component('mkw-calendar', () => import('./calendar.vue').then(m => m.default));
+Vue.component('mkw-slideshow', () => import('./slideshow.vue').then(m => m.default));
+Vue.component('mkw-tips', () => import('./tips.vue').then(m => m.default));
+Vue.component('mkw-broadcast', () => import('./broadcast.vue').then(m => m.default));
+Vue.component('mkw-server', () => import('./server.vue').then(m => m.default));
+Vue.component('mkw-posts-monitor', () => import('./posts-monitor.vue').then(m => m.default));
+Vue.component('mkw-memo', () => import('./memo.vue').then(m => m.default));
+Vue.component('mkw-rss', () => import('./rss.vue').then(m => m.default));
+Vue.component('mkw-version', () => import('./version.vue').then(m => m.default));
+Vue.component('mkw-hashtags', () => import('./hashtags.vue').then(m => m.default));
+Vue.component('mkw-words', () => import('./words.vue').then(m => m.default));
+Vue.component('mkw-instance', () => import('./instance.vue').then(m => m.default));
+Vue.component('mkw-post-form', () => import('./post-form.vue').then(m => m.default));
 Vue.component('mkw-queue', () => import('./queue.vue').then(m => m.default));
diff --git a/src/client/app/desktop/views/home/home.vue b/src/client/app/desktop/views/home/home.vue
@@ -6,6 +6,7 @@
 			<div>
 				<div class="adder">
 					<p>{{ $t('add-widget') }}</p>
+					<!-- widget/adder/desktop -->
 					<select v-model="widgetAdderSelected">
 						<option value="profile">{{ $t('@.widgets.profile') }}</option>
 						<option value="analog-clock">{{ $t('@.widgets.analog-clock') }}</option>
@@ -101,19 +102,17 @@ export default Vue.extend({
 	computed: {
 		home(): any[] {
 			if (this.$store.getters.isSignedIn) {
+				// widget/settings/desktop/login
 				return this.$store.state.settings.home || [];
 			} else {
+				// widget/settings/desktop/nologin
 				return [{
 					name: 'instance',
 					place: 'right'
 				}, {
 					name: 'broadcast',
 					place: 'right',
 					data: {}
-				}, {
-					name: 'hashtags',
-					place: 'right',
-					data: {}
 				}];
 			}
 		},
@@ -158,6 +157,7 @@ export default Vue.extend({
 	},
 
 	methods: {
+		// widget/settings/desktop/default
 		generateDefault() {
 			const defaultDesktopHomeWidgets = {
 				left: [
@@ -178,7 +178,7 @@ export default Vue.extend({
 			};
 
 			//#region Construct home data
-			const _defaultDesktopHomeWidgets = [];
+			const _defaultDesktopHomeWidgets: any[] = [];
 
 			for (const widget of defaultDesktopHomeWidgets.left) {
 				_defaultDesktopHomeWidgets.push({

diff --git a/src/client/app/desktop/views/widgets/index.ts b/src/client/app/desktop/views/widgets/index.ts
@@ -1,19 +1,10 @@
 import Vue from 'vue';
 
-import wNotifications from './notifications.vue';
-import wTimemachine from './timemachine.vue';
-import wActivity from './activity.vue';
-import wTrends from './trends.vue';
-import wPolls from './polls.vue';
-import wMessaging from './messaging.vue';
-import wProfile from './profile.vue';
-import wCustomize from './customize.vue';
-
-Vue.component('mkw-notifications', wNotifications);
-Vue.component('mkw-timemachine', wTimemachine);
-Vue.component('mkw-activity', wActivity);
-Vue.component('mkw-trends', wTrends);
-Vue.component('mkw-polls', wPolls);
-Vue.component('mkw-messaging', wMessaging);
-Vue.component('mkw-profile', wProfile);
-Vue.component('mkw-customize', wCustomize);
+Vue.component('mkw-notifications', () => import('./notifications.vue').then(m => m.default));
+Vue.component('mkw-timemachine', () => import('./timemachine.vue').then(m => m.default));
+Vue.component('mkw-activity', () => import('./activity.vue').then(m => m.default));
+Vue.component('mkw-trends', () => import('./trends.vue').then(m => m.default));
+Vue.component('mkw-polls', () => import('./polls.vue').then(m => m.default));
+Vue.component('mkw-messaging', () => import('./messaging.vue').then(m => m.default));
+Vue.component('mkw-profile', () => import('./profile.vue').then(m => m.default));
+Vue.component('mkw-customize', () => import('./customize.vue').then(m => m.default));
diff --git a/src/client/app/mobile/views/pages/widgets.vue b/src/client/app/mobile/views/pages/widgets.vue
@@ -7,6 +7,7 @@
 	<main>
 		<template v-if="customizing">
 			<header>
+				<!-- widget/adder/mobile -->
 				<select v-model="widgetAdderSelected">
 					<option value="profile">{{ $t('@.widgets.profile') }}</option>
 					<option value="analog-clock">{{ $t('@.widgets.analog-clock') }}</option>

diff --git a/src/client/app/mobile/views/widgets/index.ts b/src/client/app/mobile/views/widgets/index.ts
@@ -1,7 +1,4 @@
 import Vue from 'vue';
 
-import wActivity from './activity.vue';
-import wProfile from './profile.vue';
-
-Vue.component('mkw-activity', wActivity);
-Vue.component('mkw-profile', wProfile);
+Vue.component('mkw-activity', () => import('./activity.vue').then(m => m.default));
+Vue.component('mkw-profile', () => import('./profile.vue').then(m => m.default));