From a02bd7061a276c9c562040ddf40f5ad15489f6aa Mon Sep 17 00:00:00 2001 From: syuilo Date: Fri, 24 Jul 2020 19:35:19 +0900 Subject: [PATCH] wip --- src/client/components/index.ts | 26 +++++++------ src/client/components/mfm.ts | 56 +++++++++++++-------------- src/client/components/timeline.vue | 10 ++--- src/client/directives/autocomplete.ts | 7 ++-- src/client/directives/index.ts | 6 +-- src/client/directives/user-preview.ts | 9 +++-- src/client/init.ts | 4 +- src/client/root.vue | 4 ++ src/client/scripts/paging.ts | 15 ++++--- 9 files changed, 73 insertions(+), 64 deletions(-) diff --git a/src/client/components/index.ts b/src/client/components/index.ts index 87547599a9..f71816d904 100644 --- a/src/client/components/index.ts +++ b/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); -Vue.component('mk-acct', acct); -Vue.component('mk-avatar', avatar); -Vue.component('mk-emoji', emoji); -Vue.component('mk-user-name', userName); -Vue.component('mk-ellipsis', ellipsis); -Vue.component('mk-time', time); -Vue.component('mk-url', url); -Vue.component('mk-loading', loading); -Vue.component('mk-error', error); -Vue.component('stream-indicator', streamIndicator); +export default function(app: App) { + app.component('mfm', mfm); + app.component('mk-acct', acct); + app.component('mk-avatar', avatar); + app.component('mk-emoji', emoji); + app.component('mk-user-name', userName); + app.component('mk-ellipsis', ellipsis); + app.component('mk-time', time); + app.component('mk-url', url); + app.component('mk-loading', loading); + app.component('mk-error', error); + app.component('stream-indicator', streamIndicator); +} diff --git a/src/client/components/mfm.ts b/src/client/components/mfm.ts index af2651533e..f78947a914 100644 --- a/src/client/components/mfm.ts +++ b/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)); } }); diff --git a/src/client/components/timeline.vue b/src/client/components/timeline.vue index cbdd08906c..252025f48a 100644 --- a/src/client/components/timeline.vue +++ b/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(); diff --git a/src/client/directives/autocomplete.ts b/src/client/directives/autocomplete.ts index 44043017ef..a3e16135df 100644 --- a/src/client/directives/autocomplete.ts +++ b/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; /** * オートコンプリートを管理するクラス。 diff --git a/src/client/directives/index.ts b/src/client/directives/index.ts index 24db5cc152..8d6116f975 100644 --- a/src/client/directives/index.ts +++ b/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('userPreview', userPreview); - //app.directive('user-preview', userPreview); + app.directive('autocomplete', autocomplete); + app.directive('userPreview', userPreview); + app.directive('user-preview', userPreview); app.directive('size', size); //app.directive('particle', particle); //app.directive('tooltip', tooltip); diff --git a/src/client/directives/user-preview.ts b/src/client/directives/user-preview.ts index 4db0d67c4a..a22ccb8eed 100644 --- a/src/client/directives/user-preview.ts +++ b/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; diff --git a/src/client/init.ts b/src/client/init.ts index ea35493aac..e5d5b72467 100644 --- a/src/client/init.ts +++ b/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); - -//require('./components'); +components(app); document.body.innerHTML = '
'; diff --git a/src/client/root.vue b/src/client/root.vue index 8d8bf3f7af..bd7391a0e4 100644 --- a/src/client/root.vue +++ b/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); } diff --git a/src/client/scripts/paging.ts b/src/client/scripts/paging.ts index 832f0720e0..5755cfe611 100644 --- a/src/client/scripts/paging.ts +++ b/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', () => { - this.isBackTop = false; - }); + activated() { + this.isBackTop = false; + }, - this.$on('hook:deactivated', () => { - this.isBackTop = window.scrollY === 0; - }); + 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() {