wip

src/client/widgets/activity.vue

@@ -14,13 +14,14 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { faChartBar, faSort } from '@fortawesome/free-solid-svg-icons';
 import MkContainer from '../components/ui/container.vue';
 import define from './define';
 import XCalendar from './activity.calendar.vue';
 import XChart from './activity.chart.vue';
 
-export default define({
+const widget = define({
 	name: 'activity',
 	props: () => ({
 		showHeader: {
@@ -37,7 +38,10 @@ export default define({
 			hidden: true,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	components: {
 		MkContainer,
 		XCalendar,

src/client/widgets/calendar.vue

@@ -32,9 +32,10 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import define from './define';
 
-export default define({
+const widget = define({
 	name: 'calendar',
 	props: () => ({
 		transparent: {
@@ -42,7 +43,10 @@ export default define({
 			default: false,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	data() {
 		return {
 			now: new Date(),

src/client/widgets/clock.vue

@@ -7,11 +7,12 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import define from './define';
 import MkContainer from '../components/ui/container.vue';
 import MkAnalogClock from '../components/analog-clock.vue';
 
-export default define({
+const widget = define({
 	name: 'clock',
 	props: () => ({
 		transparent: {
@@ -19,7 +20,10 @@ export default define({
 			default: false,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	components: {
 		MkContainer,
 		MkAnalogClock

src/client/widgets/define.ts

@@ -16,12 +16,6 @@ export default function <T extends Form>(data: {
 			}
 		},
 
-		data() {
-			return {
-				bakedOldProps: null
-			};
-		},
-
 		computed: {
 			id(): string {
 				return this.widget.id;

src/client/widgets/digital-clock.vue

@@ -13,9 +13,10 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import define from './define';
 
-export default define({
+const widget = define({
 	name: 'digitalClock',
 	props: () => ({
 		transparent: {
@@ -32,7 +33,10 @@ export default define({
 			default: true,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	data() {
 		return {
 			clock: null,

src/client/widgets/federation.vue

@@ -19,12 +19,13 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { faGlobe } from '@fortawesome/free-solid-svg-icons';
 import MkContainer from '../components/ui/container.vue';
 import define from './define';
 import MkMiniChart from '../components/mini-chart.vue';
 
-export default define({
+const widget = define({
 	name: 'federation',
 	props: () => ({
 		showHeader: {
@@ -32,7 +33,10 @@ export default define({
 			default: true,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	components: {
 		MkContainer, MkMiniChart
 	},

src/client/widgets/memo.vue

@@ -10,11 +10,12 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { faStickyNote } from '@fortawesome/free-solid-svg-icons';
 import MkContainer from '../components/ui/container.vue';
 import define from './define';
 
-export default define({
+const widget = define({
 	name: 'memo',
 	props: () => ({
 		showHeader: {
@@ -22,7 +23,10 @@ export default define({
 			default: true,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	components: {
 		MkContainer
 	},

src/client/widgets/notifications.vue

@@ -9,12 +9,13 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { faBell } from '@fortawesome/free-solid-svg-icons';
 import MkContainer from '../components/ui/container.vue';
 import XNotifications from '../components/notifications.vue';
 import define from './define';
 
-export default define({
+const widget = define({
 	name: 'notifications',
 	props: () => ({
 		showHeader: {
@@ -26,7 +27,10 @@ export default define({
 			default: 300,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	components: {
 		MkContainer,
 		XNotifications,

src/client/widgets/photos.vue

@@ -15,12 +15,13 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { faCamera } from '@fortawesome/free-solid-svg-icons';
 import MkContainer from '../components/ui/container.vue';
 import define from './define';
 import { getStaticImageUrl } from '../scripts/get-static-image-url';
 
-export default define({
+const widget = define({
 	name: 'photos',
 	props: () => ({
 		showHeader: {
@@ -32,7 +33,10 @@ export default define({
 			default: false,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	components: {
 		MkContainer,
 	},

src/client/widgets/rss.vue

@@ -13,11 +13,12 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { faRssSquare, faCog } from '@fortawesome/free-solid-svg-icons';
 import MkContainer from '../components/ui/container.vue';
 import define from './define';
 
-export default define({
+const widget = define({
 	name: 'rss',
 	props: () => ({
 		showHeader: {
@@ -29,7 +30,10 @@ export default define({
 			default: 'http://feeds.afpbb.com/rss/afpbb/afpbbnews',
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	components: {
 		MkContainer
 	},

src/client/widgets/timeline.vue

@@ -20,13 +20,14 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faListUl, faSatellite } from '@fortawesome/free-solid-svg-icons';
 import { faComments } from '@fortawesome/free-regular-svg-icons';
 import MkContainer from '../components/ui/container.vue';
 import XTimeline from '../components/timeline.vue';
 import define from './define';
 
-export default define({
+const widget = define({
 	name: 'timeline',
 	props: () => ({
 		showHeader: {
@@ -48,7 +49,10 @@ export default define({
 			hidden: true,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	components: {
 		MkContainer,
 		XTimeline,

src/client/widgets/trends.vue

@@ -18,12 +18,13 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { faHashtag } from '@fortawesome/free-solid-svg-icons';
 import MkContainer from '../components/ui/container.vue';
 import define from './define';
 import MkMiniChart from '../components/mini-chart.vue';
 
-export default define({
+const widget = define({
 	name: 'hashtags',
 	props: () => ({
 		showHeader: {
@@ -31,7 +32,10 @@ export default define({
 			default: true,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	components: {
 		MkContainer, MkMiniChart
 	},

src/client/widgets/welcome.vue

@@ -11,6 +11,7 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode';
 import XSigninDialog from '../components/signin-dialog.vue';
 import XSignupDialog from '../components/signup-dialog.vue';
@@ -18,11 +19,14 @@ import MkButton from '../components/ui/button.vue';
 import { host } from '../config';
 import define from './define';
 
-export default define({
+const widget = define({
 	name: 'welcome',
 	props: () => ({
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	components: {
 		MkButton
 	},