wip

src/client/components/index.ts

@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import { App } from 'vue';
 
 import mfm from './misskey-flavored-markdown.vue';
 import acct from './acct.vue';
@@ -12,14 +12,16 @@ import loading from './loading.vue';
 import error from './error.vue';
 import streamIndicator from './stream-indicator.vue';
 
-Vue.component('mfm', mfm);
+export default function(app: App) {
-Vue.component('mk-acct', acct);
+	app.component('mfm', mfm);
-Vue.component('mk-avatar', avatar);
+	app.component('mk-acct', acct);
-Vue.component('mk-emoji', emoji);
+	app.component('mk-avatar', avatar);
-Vue.component('mk-user-name', userName);
+	app.component('mk-emoji', emoji);
-Vue.component('mk-ellipsis', ellipsis);
+	app.component('mk-user-name', userName);
-Vue.component('mk-time', time);
+	app.component('mk-ellipsis', ellipsis);
-Vue.component('mk-url', url);
+	app.component('mk-time', time);
-Vue.component('mk-loading', loading);
+	app.component('mk-url', url);
-Vue.component('mk-error', error);
+	app.component('mk-loading', loading);
-Vue.component('stream-indicator', streamIndicator);
+	app.component('mk-error', error);
+	app.component('stream-indicator', streamIndicator);
+}

src/client/components/mfm.ts

@@ -1,4 +1,4 @@
-import Vue, { VNode } from 'vue';
+import { VNode, defineComponent, h } from 'vue';
 import { MfmForest } from '../../mfm/prelude';
 import { parse, parsePlain } from '../../mfm/parse';
 import MkUrl from './url.vue';
@@ -10,7 +10,7 @@ import MkCode from './code.vue';
 import MkGoogle from './google.vue';
 import { host } from '../config';
 
-export default Vue.component('misskey-flavored-markdown', {
+export default defineComponent({
 	props: {
 		text: {
 			type: String,
@@ -41,7 +41,7 @@ export default Vue.component('misskey-flavored-markdown', {
 		},
 	},
 
-	render(createElement) {
+	render() {
 		if (this.text == null || this.text == '') return;
 
 		const ast = (this.plain ? parsePlain : parse)(this.text);
@@ -53,7 +53,7 @@ export default Vue.component('misskey-flavored-markdown', {
 
 					if (!this.plain) {
 						const x = text.split('\n')
-							.map(t => t == '' ? [createElement('br')] : [this._v(t), createElement('br')]); // NOTE: this._vはHACK SEE: https://github.com/syuilo/misskey/pull/6399#issuecomment-632820283
+							.map(t => t == '' ? [h('br')] : [this._v(t), h('br')]); // NOTE: this._vはHACK SEE: https://github.com/syuilo/misskey/pull/6399#issuecomment-632820283
 						x[x.length - 1].pop();
 						return x;
 					} else {
@@ -62,15 +62,15 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'bold': {
-					return [createElement('b', genEl(token.children))];
+					return [h('b', genEl(token.children))];
 				}
 
 				case 'strike': {
-					return [createElement('del', genEl(token.children))];
+					return [h('del', genEl(token.children))];
 				}
 
 				case 'italic': {
-					return (createElement as any)('i', {
+					return h('i', {
 						attrs: {
 							style: 'font-style: oblique;'
 						},
@@ -78,7 +78,7 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'big': {
-					return (createElement as any)('strong', {
+					return h('strong', {
 						attrs: {
 							style: `display: inline-block; font-size: 150%;`
 						},
@@ -90,7 +90,7 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'small': {
-					return [createElement('small', {
+					return [h('small', {
 						attrs: {
 							style: 'opacity: 0.7;'
 						},
@@ -98,7 +98,7 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'center': {
-					return [createElement('div', {
+					return [h('div', {
 						attrs: {
 							style: 'text-align:center;'
 						}
@@ -106,7 +106,7 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'motion': {
-					return (createElement as any)('span', {
+					return h('span', {
 						attrs: {
 							style: 'display: inline-block;'
 						},
@@ -124,7 +124,7 @@ export default Vue.component('misskey-flavored-markdown', {
 						'normal';
 					const style = this.$store.state.device.animatedMfm
 						? `animation: spin 1.5s linear infinite; animation-direction: ${direction};` : '';
-					return (createElement as any)('span', {
+					return h('span', {
 						attrs: {
 							style: 'display: inline-block;' + style
 						},
@@ -132,7 +132,7 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'jump': {
-					return (createElement as any)('span', {
+					return h('span', {
 						attrs: {
 							style: this.$store.state.device.animatedMfm ? 'display: inline-block; animation: jump 0.75s linear infinite;' : 'display: inline-block;'
 						},
@@ -140,7 +140,7 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'flip': {
-					return (createElement as any)('span', {
+					return h('span', {
 						attrs: {
 							style: 'display: inline-block; transform: scaleX(-1);'
 						},
@@ -148,7 +148,7 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'url': {
-					return [createElement(MkUrl, {
+					return [h(MkUrl, {
 						key: Math.random(),
 						props: {
 							url: token.node.props.url,
@@ -158,7 +158,7 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'link': {
-					return [createElement(MkLink, {
+					return [h(MkLink, {
 						key: Math.random(),
 						props: {
 							url: token.node.props.url,
@@ -168,7 +168,7 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'mention': {
-					return [createElement(MkMention, {
+					return [h(MkMention, {
 						key: Math.random(),
 						props: {
 							host: (token.node.props.host == null && this.author && this.author.host != null ? this.author.host : token.node.props.host) || host,
@@ -178,7 +178,7 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'hashtag': {
-					return [createElement('router-link', {
+					return [h('router-link', {
 						key: Math.random(),
 						attrs: {
 							to: this.isNote ? `/tags/${encodeURIComponent(token.node.props.hashtag)}` : `/explore/tags/${encodeURIComponent(token.node.props.hashtag)}`,
@@ -188,7 +188,7 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'blockCode': {
-					return [createElement(MkCode, {
+					return [h(MkCode, {
 						key: Math.random(),
 						props: {
 							code: token.node.props.code,
@@ -198,7 +198,7 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'inlineCode': {
-					return [createElement(MkCode, {
+					return [h(MkCode, {
 						key: Math.random(),
 						props: {
 							code: token.node.props.code,
@@ -210,13 +210,13 @@ export default Vue.component('misskey-flavored-markdown', {
 
 				case 'quote': {
 					if (this.shouldBreak) {
-						return [createElement('div', {
+						return [h('div', {
 							attrs: {
 								class: 'quote'
 							}
 						}, genEl(token.children))];
 					} else {
-						return [createElement('span', {
+						return [h('span', {
 							attrs: {
 								class: 'quote'
 							}
@@ -225,7 +225,7 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'title': {
-					return [createElement('div', {
+					return [h('div', {
 						attrs: {
 							class: 'title'
 						}
@@ -233,7 +233,7 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'emoji': {
-					return [createElement('mk-emoji', {
+					return [h('mk-emoji', {
 						key: Math.random(),
 						attrs: {
 							emoji: token.node.props.emoji,
@@ -247,7 +247,7 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'mathInline': {
-					return [createElement(MkFormula, {
+					return [h(MkFormula, {
 						key: Math.random(),
 						props: {
 							formula: token.node.props.formula,
@@ -257,7 +257,7 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'mathBlock': {
-					return [createElement(MkFormula, {
+					return [h(MkFormula, {
 						key: Math.random(),
 						props: {
 							formula: token.node.props.formula,
@@ -267,7 +267,7 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'search': {
-					return [createElement(MkGoogle, {
+					return [h(MkGoogle, {
 						key: Math.random(),
 						props: {
 							q: token.node.props.query
@@ -284,6 +284,6 @@ export default Vue.component('misskey-flavored-markdown', {
 		}));
 
 		// Parse ast to DOM
-		return createElement('span', genEl(ast));
+		return h('span', genEl(ast));
 	}
 });

src/client/components/timeline.vue

@@ -46,11 +46,6 @@ export default defineComponent({
 	},
 
 	created() {
-		this.$once('hook:beforeDestroy', () => {
-			this.connection.dispose();
-			if (this.connection2) this.connection2.dispose();
-		});
-
 		const prepend = note => {
 			const _note = JSON.parse(JSON.stringify(note));	// deepcopy
 			(this.$refs.tl as any).prepend(_note);
@@ -130,6 +125,11 @@ export default defineComponent({
 		};
 	},
 
+	beforeUnmount() {
+		this.connection.dispose();
+		if (this.connection2) this.connection2.dispose();
+	},
+
 	methods: {
 		focus() {
 			this.$refs.tl.focus();

src/client/directives/autocomplete.ts

@@ -1,18 +1,19 @@
+import { Directive } from 'vue';
 import * as getCaretCoordinates from 'textarea-caret';
 import { toASCII } from 'punycode';
 
 export default {
-	bind(el, binding, vn) {
+	mounted(el, binding, vn) {
 		const self = el._autoCompleteDirective_ = {} as any;
 		self.x = new Autocomplete(el, vn.context, binding.value);
 		self.x.attach();
 	},
 
-	unbind(el, binding, vn) {
+	unmounted(el, binding, vn) {
 		const self = el._autoCompleteDirective_;
 		self.x.detach();
 	}
-};
+} as Directive;
 
 /**
  * オートコンプリートを管理するクラス。

src/client/directives/index.ts

@@ -7,9 +7,9 @@ import particle from './particle';
 import tooltip from './tooltip';
 
 export default function(app: App) {
-	//app.directive('autocomplete', autocomplete);
+	app.directive('autocomplete', autocomplete);
-	//app.directive('userPreview', userPreview);
+	app.directive('userPreview', userPreview);
-	//app.directive('user-preview', userPreview);
+	app.directive('user-preview', userPreview);
 	app.directive('size', size);
 	//app.directive('particle', particle);
 	//app.directive('tooltip', tooltip);

src/client/directives/user-preview.ts

@@ -1,7 +1,10 @@
+import { Directive } from 'vue';
 import MkUserPreview from '../components/user-preview.vue';
 
 export default {
-	bind(el: HTMLElement, binding, vn) {
+	mounted(el: HTMLElement, binding, vn) {
+		// TODO: 新たにプロパティを作るのをやめMapを使う
+		// ただメモリ的には↓の方が省メモリかもしれないので検討中
 		const self = (el as any)._userPreviewDirective_ = {} as any;
 
 		self.user = binding.value;
@@ -68,8 +71,8 @@ export default {
 		});
 	},
 
-	unbind(el, binding, vn) {
+	unmounted(el, binding, vn) {
 		const self = el._userPreviewDirective_;
 		clearInterval(self.checkTimer);
 	}
-};
+} as Directive;

src/client/init.ts

@@ -16,6 +16,7 @@ import FontAwesomeIcon from './components/fa.vue';
 import Stream from './scripts/stream';
 import widgets from './widgets';
 import directives from './directives';
+import components from './components';
 import { version, langs, getLocale, apiUrl } from './config';
 import { store } from './store';
 import { router } from './router';
@@ -172,8 +173,7 @@ app.component('fa', FontAwesomeIcon);
 
 widgets(app);
 directives(app);
-
+components(app);
-//require('./components');
 
 document.body.innerHTML = '<div id="app"></div>';
 

src/client/root.vue

@@ -40,6 +40,10 @@ export default defineComponent({
 	},
 
 	methods: {
+		api(endpoint: string, data: { [x: string]: any } = {}, token?) {
+			return this.$store.dispatch('api', { endpoint, data, token });
+		},
+
 		dialog(opts) {
 			this.$store.commit('showDialog', opts);
 		}

src/client/scripts/paging.ts

@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import { getScrollPosition, onScrollTop } from './scroll';
 
 const SECOND_FETCH_LIMIT = 30;
@@ -48,14 +47,14 @@ export default (opts) => ({
 	created() {
 		opts.displayLimit = opts.displayLimit || 30;
 		this.init();
+	},
 
-		this.$on('hook:activated', () => {
+	activated() {
 		this.isBackTop = false;
-		});
+	},
 
-		this.$on('hook:deactivated', () => {
+	deactivated() {
 		this.isBackTop = window.scrollY === 0;
-		});
 	},
 
 	mounted() {
@@ -75,7 +74,7 @@ export default (opts) => ({
 
 	methods: {
 		updateItem(i, item) {
-			Vue.set((this as any).items, i, item);
+			(this as any).items[i] = item;
 		},
 
 		reload() {