From 6a4d56c81c28886ebaecedf18f3176e5fedf656a Mon Sep 17 00:00:00 2001 From: tamaina Date: Fri, 31 Mar 2023 07:38:28 +0000 Subject: [PATCH 1/4] fix(client): set overflow: clip to page header title container #10413 --- packages/frontend/src/components/global/MkPageHeader.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue index 4d968db6a..0d229a937 100644 --- a/packages/frontend/src/components/global/MkPageHeader.vue +++ b/packages/frontend/src/components/global/MkPageHeader.vue @@ -241,7 +241,7 @@ onUnmounted(() => { display: flex; align-items: center; max-width: min(30vw, 400px); - overflow: auto; + overflow: clip; white-space: nowrap; text-align: left; font-weight: bold; From 152247bfda62f96e7d3c1be9609692f4cedb5629 Mon Sep 17 00:00:00 2001 From: syuilo Date: Fri, 31 Mar 2023 16:41:27 +0900 Subject: [PATCH 2/4] refactor: remove autobind-decorator dep --- packages/frontend/package.json | 1 - .../frontend/src/directives/user-preview.ts | 16 +++--- .../frontend/src/scripts/hpml/evaluator.ts | 9 ---- packages/frontend/src/scripts/hpml/index.ts | 3 -- .../frontend/src/scripts/hpml/type-checker.ts | 9 ---- packages/misskey-js/package.json | 1 - packages/misskey-js/src/streaming.ts | 49 ++++++++++--------- pnpm-lock.yaml | 6 --- 8 files changed, 35 insertions(+), 59 deletions(-) diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 125105f22..0e7392982 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -19,7 +19,6 @@ "@tabler/icons-webfont": "2.12.0", "@vitejs/plugin-vue": "4.1.0", "@vue/compiler-sfc": "3.2.47", - "autobind-decorator": "2.4.0", "autosize": "5.0.2", "blurhash": "2.0.5", "broadcast-channel": "4.20.2", diff --git a/packages/frontend/src/directives/user-preview.ts b/packages/frontend/src/directives/user-preview.ts index 2f5936de3..ae12f2670 100644 --- a/packages/frontend/src/directives/user-preview.ts +++ b/packages/frontend/src/directives/user-preview.ts @@ -1,5 +1,4 @@ import { defineAsyncComponent, Directive, ref } from 'vue'; -import autobind from 'autobind-decorator'; import { popup } from '@/os'; export class UserPreview { @@ -15,9 +14,16 @@ export class UserPreview { this.user = user; this.attach(); + + this.show = this.show.bind(this); + this.close = this.close.bind(this); + this.onMouseover = this.onMouseover.bind(this); + this.onMouseleave = this.onMouseleave.bind(this); + this.onClick = this.onClick.bind(this); + this.attach = this.attach.bind(this); + this.detach = this.detach.bind(this); } - @autobind private show() { if (!document.body.contains(this.el)) return; if (this.promise) return; @@ -53,7 +59,6 @@ export class UserPreview { }, 1000); } - @autobind private close() { if (this.promise) { window.clearInterval(this.checkTimer); @@ -62,34 +67,29 @@ export class UserPreview { } } - @autobind private onMouseover() { window.clearTimeout(this.showTimer); window.clearTimeout(this.hideTimer); this.showTimer = window.setTimeout(this.show, 500); } - @autobind private onMouseleave() { window.clearTimeout(this.showTimer); window.clearTimeout(this.hideTimer); this.hideTimer = window.setTimeout(this.close, 500); } - @autobind private onClick() { window.clearTimeout(this.showTimer); this.close(); } - @autobind public attach() { this.el.addEventListener('mouseover', this.onMouseover); this.el.addEventListener('mouseleave', this.onMouseleave); this.el.addEventListener('click', this.onClick); } - @autobind public detach() { this.el.removeEventListener('mouseover', this.onMouseover); this.el.removeEventListener('mouseleave', this.onMouseleave); diff --git a/packages/frontend/src/scripts/hpml/evaluator.ts b/packages/frontend/src/scripts/hpml/evaluator.ts index 7bddd3f62..9adfba7f2 100644 --- a/packages/frontend/src/scripts/hpml/evaluator.ts +++ b/packages/frontend/src/scripts/hpml/evaluator.ts @@ -1,4 +1,3 @@ -import autobind from 'autobind-decorator'; import { ref, Ref, unref } from 'vue'; import { collectPageVars } from '../collect-page-vars'; import { initHpmlLib } from './lib'; @@ -51,7 +50,6 @@ export class Hpml { this.eval(); } - @autobind public eval() { try { this.vars.value = this.evaluateVars(); @@ -60,7 +58,6 @@ export class Hpml { } } - @autobind public interpolate(str: string) { if (str == null) return null; return str.replace(/{(.+?)}/g, match => { @@ -69,12 +66,10 @@ export class Hpml { }); } - @autobind public registerCanvas(id: string, canvas: any) { this.canvases[id] = canvas; } - @autobind public updatePageVar(name: string, value: any) { const pageVar = this.pageVars.find(v => v.name === name); if (pageVar !== undefined) { @@ -84,13 +79,11 @@ export class Hpml { } } - @autobind public updateRandomSeed(seed: string) { this.opts.randomSeed = seed; this.envVars.SEED = seed; } - @autobind private _interpolateScope(str: string, scope: HpmlScope) { return str.replace(/{(.+?)}/g, match => { const v = scope.getState(match.slice(1, -1).trim()); @@ -98,7 +91,6 @@ export class Hpml { }); } - @autobind public evaluateVars(): Record { const values: Record = {}; @@ -117,7 +109,6 @@ export class Hpml { return values; } - @autobind private evaluate(expr: Expr, scope: HpmlScope): any { if (isLiteralValue(expr)) { if (expr.type === null) { diff --git a/packages/frontend/src/scripts/hpml/index.ts b/packages/frontend/src/scripts/hpml/index.ts index 587c6a36c..994f286b9 100644 --- a/packages/frontend/src/scripts/hpml/index.ts +++ b/packages/frontend/src/scripts/hpml/index.ts @@ -2,7 +2,6 @@ * Hpml */ -import autobind from 'autobind-decorator'; import { Hpml } from './evaluator'; import { funcDefs } from './lib'; @@ -61,7 +60,6 @@ export class HpmlScope { this.name = name ?? 'anonymous'; } - @autobind public createChildScope(states: Record, name?: HpmlScope['name']): HpmlScope { const layer = [states, ...this.layerdStates]; return new HpmlScope(layer, name); @@ -71,7 +69,6 @@ export class HpmlScope { * 指定した名前の変数の値を取得します * @param name 変数名 */ - @autobind public getState(name: string): any { for (const later of this.layerdStates) { const state = later[name]; diff --git a/packages/frontend/src/scripts/hpml/type-checker.ts b/packages/frontend/src/scripts/hpml/type-checker.ts index 692826fc9..ea8133f29 100644 --- a/packages/frontend/src/scripts/hpml/type-checker.ts +++ b/packages/frontend/src/scripts/hpml/type-checker.ts @@ -1,4 +1,3 @@ -import autobind from 'autobind-decorator'; import { isLiteralValue } from './expr'; import { funcDefs } from './lib'; import { envVarsDef } from '.'; @@ -23,7 +22,6 @@ export class HpmlTypeChecker { this.pageVars = pageVars; } - @autobind public typeCheck(v: Expr): TypeError | null { if (isLiteralValue(v)) return null; @@ -61,7 +59,6 @@ export class HpmlTypeChecker { return null; } - @autobind public getExpectedType(v: Expr, slot: number): Type { const def = funcDefs[v.type ?? '']; if (def == null) { @@ -89,7 +86,6 @@ export class HpmlTypeChecker { } } - @autobind public infer(v: Expr): Type { if (v.type === null) return null; if (v.type === 'text') return 'string'; @@ -144,7 +140,6 @@ export class HpmlTypeChecker { } } - @autobind public getVarByName(name: string): Variable { const v = this.variables.find(x => x.name === name); if (v !== undefined) { @@ -154,25 +149,21 @@ export class HpmlTypeChecker { } } - @autobind public getVarsByType(type: Type): Variable[] { if (type == null) return this.variables; return this.variables.filter(x => (this.infer(x) === null) || (this.infer(x) === type)); } - @autobind public getEnvVarsByType(type: Type): string[] { if (type == null) return Object.keys(envVarsDef); return Object.entries(envVarsDef).filter(([k, v]) => v === null || type === v).map(([k, v]) => k); } - @autobind public getPageVarsByType(type: Type): string[] { if (type == null) return this.pageVars.map(v => v.name); return this.pageVars.filter(v => type === v.type).map(v => v.name); } - @autobind public isUsedName(name: string) { if (this.variables.some(v => v.name === name)) { return true; diff --git a/packages/misskey-js/package.json b/packages/misskey-js/package.json index 2ca56478c..1fac6a678 100644 --- a/packages/misskey-js/package.json +++ b/packages/misskey-js/package.json @@ -40,7 +40,6 @@ "dependencies": { "@swc/cli": "0.1.62", "@swc/core": "1.3.42", - "autobind-decorator": "^2.4.0", "eventemitter3": "5.0.0", "reconnecting-websocket": "^4.4.0" } diff --git a/packages/misskey-js/src/streaming.ts b/packages/misskey-js/src/streaming.ts index d97c2182f..12f386ddb 100644 --- a/packages/misskey-js/src/streaming.ts +++ b/packages/misskey-js/src/streaming.ts @@ -1,4 +1,3 @@ -import autobind from 'autobind-decorator'; import { EventEmitter } from 'eventemitter3'; import ReconnectingWebsocket from 'reconnecting-websocket'; import type { BroadcastEvents, Channels } from './streaming.types.js'; @@ -36,6 +35,20 @@ export default class Stream extends EventEmitter { WebSocket?: any; }) { super(); + + this.genId = this.genId.bind(this); + this.useChannel = this.useChannel.bind(this); + this.useSharedConnection = this.useSharedConnection.bind(this); + this.removeSharedConnection = this.removeSharedConnection.bind(this); + this.removeSharedConnectionPool = this.removeSharedConnectionPool.bind(this); + this.connectToChannel = this.connectToChannel.bind(this); + this.disconnectToChannel = this.disconnectToChannel.bind(this); + this.onOpen = this.onOpen.bind(this); + this.onClose = this.onClose.bind(this); + this.onMessage = this.onMessage.bind(this); + this.send = this.send.bind(this); + this.close = this.close.bind(this); + options = options ?? { }; const query = urlQuery({ @@ -56,12 +69,10 @@ export default class Stream extends EventEmitter { this.stream.addEventListener('message', this.onMessage); } - @autobind private genId(): string { return (++this.idCounter).toString(); } - @autobind public useChannel(channel: C, params?: Channels[C]['params'], name?: string): Connection { if (params) { return this.connectToChannel(channel, params); @@ -70,7 +81,6 @@ export default class Stream extends EventEmitter { } } - @autobind private useSharedConnection(channel: C, name?: string): SharedConnection { let pool = this.sharedConnectionPools.find(p => p.channel === channel); @@ -84,24 +94,20 @@ export default class Stream extends EventEmitter { return connection; } - @autobind public removeSharedConnection(connection: SharedConnection): void { this.sharedConnections = this.sharedConnections.filter(c => c !== connection); } - @autobind public removeSharedConnectionPool(pool: Pool): void { this.sharedConnectionPools = this.sharedConnectionPools.filter(p => p !== pool); } - @autobind private connectToChannel(channel: C, params: Channels[C]['params']): NonSharedConnection { const connection = new NonSharedConnection(this, channel, this.genId(), params); this.nonSharedConnections.push(connection); return connection; } - @autobind public disconnectToChannel(connection: NonSharedConnection): void { this.nonSharedConnections = this.nonSharedConnections.filter(c => c !== connection); } @@ -109,7 +115,6 @@ export default class Stream extends EventEmitter { /** * Callback of when open connection */ - @autobind private onOpen(): void { const isReconnect = this.state === 'reconnecting'; @@ -126,7 +131,6 @@ export default class Stream extends EventEmitter { /** * Callback of when close connection */ - @autobind private onClose(): void { if (this.state === 'connected') { this.state = 'reconnecting'; @@ -137,7 +141,6 @@ export default class Stream extends EventEmitter { /** * Callback of when received a message from connection */ - @autobind private onMessage(message: { data: string; }): void { const { type, body } = JSON.parse(message.data); @@ -167,7 +170,6 @@ export default class Stream extends EventEmitter { /** * Send a message to connection */ - @autobind public send(typeOrPayload: any, payload?: any): void { const data = payload === undefined ? typeOrPayload : { type: typeOrPayload, @@ -180,7 +182,6 @@ export default class Stream extends EventEmitter { /** * Close this connection */ - @autobind public close(): void { this.stream.close(); } @@ -197,6 +198,12 @@ class Pool { private isConnected = false; constructor(stream: Stream, channel: string, id: string) { + this.onStreamDisconnected = this.onStreamDisconnected.bind(this); + this.inc = this.inc.bind(this); + this.dec = this.dec.bind(this); + this.connect = this.connect.bind(this); + this.disconnect = this.disconnect.bind(this); + this.channel = channel; this.stream = stream; this.id = id; @@ -204,12 +211,10 @@ class Pool { this.stream.on('_disconnected_', this.onStreamDisconnected); } - @autobind private onStreamDisconnected(): void { this.isConnected = false; } - @autobind public inc(): void { if (this.users === 0 && !this.isConnected) { this.connect(); @@ -224,7 +229,6 @@ class Pool { } } - @autobind public dec(): void { this.users--; @@ -238,7 +242,6 @@ class Pool { } } - @autobind public connect(): void { if (this.isConnected) return; this.isConnected = true; @@ -248,7 +251,6 @@ class Pool { }); } - @autobind private disconnect(): void { this.stream.off('_disconnected_', this.onStreamDisconnected); this.stream.send('disconnect', { id: this.id }); @@ -268,12 +270,13 @@ export abstract class Connection = any> extends constructor(stream: Stream, channel: string, name?: string) { super(); + this.send = this.send.bind(this); + this.stream = stream; this.channel = channel; this.name = name; } - @autobind public send(type: T, body: Channel['receives'][T]): void { this.stream.send('ch', { id: this.id, @@ -297,11 +300,12 @@ class SharedConnection = any> extends Connection constructor(stream: Stream, channel: string, pool: Pool, name?: string) { super(stream, channel, name); + this.dispose = this.dispose.bind(this); + this.pool = pool; this.pool.inc(); } - @autobind public dispose(): void { this.pool.dec(); this.removeAllListeners(); @@ -316,13 +320,15 @@ class NonSharedConnection = any> extends Connect constructor(stream: Stream, channel: string, id: string, params: Channel['params']) { super(stream, channel); + this.connect = this.connect.bind(this); + this.dispose = this.dispose.bind(this); + this.params = params; this.id = id; this.connect(); } - @autobind public connect(): void { this.stream.send('connect', { channel: this.channel, @@ -331,7 +337,6 @@ class NonSharedConnection = any> extends Connect }); } - @autobind public dispose(): void { this.removeAllListeners(); this.stream.send('disconnect', { id: this.id }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a26b6d917..30fadac60 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -612,9 +612,6 @@ importers: '@vue/compiler-sfc': specifier: 3.2.47 version: 3.2.47 - autobind-decorator: - specifier: 2.4.0 - version: 2.4.0 autosize: specifier: 5.0.2 version: 5.0.2 @@ -865,9 +862,6 @@ importers: '@swc/core': specifier: 1.3.42 version: 1.3.42 - autobind-decorator: - specifier: ^2.4.0 - version: 2.4.0 eventemitter3: specifier: 5.0.0 version: 5.0.0 From c823cbe63b30d622d240adb92b696d0f507d084d Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 1 Apr 2023 13:42:40 +0900 Subject: [PATCH 3/4] refactor(frontend): remove $store --- packages/frontend/@types/vue.d.ts | 1 - .../frontend/src/components/MkContainer.vue | 10 +++--- .../frontend/src/components/MkContextMenu.vue | 9 +++--- .../src/components/MkFoldableSection.vue | 4 ++- packages/frontend/src/components/MkFolder.vue | 9 +++--- .../frontend/src/components/MkMention.vue | 3 +- .../frontend/src/components/MkPagination.vue | 8 ++--- .../src/components/MkReactionsViewer.vue | 21 ++++++------ .../frontend/src/components/MkTimeline.vue | 3 +- packages/frontend/src/components/MkToast.vue | 9 +++--- .../frontend/src/components/MkTooltip.vue | 9 +++--- .../frontend/src/components/MkUrlPreview.vue | 3 +- .../src/components/MkUrlPreviewPopup.vue | 3 +- .../frontend/src/components/MkUserPopup.vue | 9 +++--- packages/frontend/src/components/MkWindow.vue | 9 +++--- .../src/components/MkYoutubePlayer.vue | 3 +- .../frontend/src/components/form/suspense.vue | 4 ++- .../frontend/src/components/global/MkAcct.vue | 3 +- .../src/components/global/MkError.vue | 3 +- .../src/components/page/page.post.vue | 5 +-- packages/frontend/src/init.ts | 3 +- packages/frontend/src/pages/_error_.vue | 3 +- .../src/pages/admin/overview.instances.vue | 3 +- .../src/pages/admin/overview.moderators.vue | 3 +- .../src/pages/admin/overview.stats.vue | 3 +- .../src/pages/admin/overview.users.vue | 3 +- packages/frontend/src/pages/flash/flash.vue | 5 +-- packages/frontend/src/pages/gallery/post.vue | 3 +- packages/frontend/src/pages/note.vue | 3 +- packages/frontend/src/pages/page.vue | 4 +-- packages/frontend/src/pages/timeline.vue | 4 +-- packages/frontend/src/ui/_common_/common.vue | 11 ++++--- .../src/ui/_common_/stream-indicator.vue | 3 +- packages/frontend/src/ui/classic.header.vue | 6 ++-- packages/frontend/src/ui/classic.sidebar.vue | 8 +++-- packages/frontend/src/ui/classic.vue | 6 ++-- packages/frontend/src/ui/deck.vue | 17 +++++----- packages/frontend/src/ui/universal.vue | 32 +++++++++---------- packages/frontend/src/ui/visitor/a.vue | 5 +-- packages/frontend/src/ui/visitor/b.vue | 4 +-- .../frontend/src/widgets/WidgetFederation.vue | 3 +- .../frontend/src/widgets/WidgetTrends.vue | 3 +- 42 files changed, 150 insertions(+), 113 deletions(-) diff --git a/packages/frontend/@types/vue.d.ts b/packages/frontend/@types/vue.d.ts index 9c9c34ccc..661f45570 100644 --- a/packages/frontend/@types/vue.d.ts +++ b/packages/frontend/@types/vue.d.ts @@ -8,7 +8,6 @@ import type { i18n } from '@/i18n'; declare module 'vue' { interface ComponentCustomProperties { $i: typeof $i; - $store: typeof defaultStore; $instance: typeof instance; $t: typeof i18n['t']; $ts: typeof i18n['ts']; diff --git a/packages/frontend/src/components/MkContainer.vue b/packages/frontend/src/components/MkContainer.vue index 833fa9d38..e021cfbda 100644 --- a/packages/frontend/src/components/MkContainer.vue +++ b/packages/frontend/src/components/MkContainer.vue @@ -14,10 +14,10 @@ import { defineComponent } from 'vue'; +import { defaultStore } from '@/store'; export default defineComponent({ props: { @@ -79,6 +80,7 @@ export default defineComponent({ showBody: this.expanded, omitted: null, ignoreOmit: false, + defaultStore, }; }, mounted() { diff --git a/packages/frontend/src/components/MkContextMenu.vue b/packages/frontend/src/components/MkContextMenu.vue index 21cccaabd..5bdf47724 100644 --- a/packages/frontend/src/components/MkContextMenu.vue +++ b/packages/frontend/src/components/MkContextMenu.vue @@ -1,10 +1,10 @@ @@ -14,6 +14,7 @@ import { } from 'vue'; import tinycolor from 'tinycolor2'; import { host as localHost } from '@/config'; import { $i } from '@/account'; +import { defaultStore } from '@/store'; const props = defineProps<{ username: string; diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue index a1a61a6fd..867d43257 100644 --- a/packages/frontend/src/components/MkPagination.vue +++ b/packages/frontend/src/components/MkPagination.vue @@ -1,9 +1,9 @@