Merge changes made up for now (HotoRas#3)

ROADMAP.md

@@ -7,9 +7,12 @@ This is the phase we are at now. We need to make a high-maintenance environment
 
 - ~~Make the number of type errors zero (backend)~~ → Done ✔️
 - Make the number of type errors zero (frontend)
+	- https://github.com/nekoplanet/misskey-io/pull/2
 - Improve CI
 	- ~~Fix tests~~ → Done ✔️
-	- Fix random test failures - https://github.com/misskey-dev/misskey/issues/7985 and https://github.com/misskey-dev/misskey/issues/7986
+	- ~~Fix random test failures~~ → Done ✔️
+		- https://github.com/misskey-dev/misskey/issues/7985
+		- https://github.com/misskey-dev/misskey/issues/7986
 	- Add more tests
 		- ~~May need to implement a mechanism that allows for DI~~ → Done ✔️
 			- https://github.com/misskey-dev/misskey/pull/9085

packages/backend/test/unit/FileInfoService.ts

@@ -338,9 +338,11 @@ describe('FileInfoService', () => {
 			assert.deepStrictEqual(info, {
 				size: 9817,
 				md5: '74c9279a4abe98789565f1dc1a541a42',
-				type: {
-					mime: 'audio/mp4',
-					ext: 'm4a',
+				type: { // Chromium returns MPEG4-audio (audio/mp4, ext: m4a) to video/mp4, mp4
+					//mime: 'audio/mp4',
+					mime: 'video/mp4',
+					//ext: 'm4a',
+					ext: 'mp4',
 				},
 			});
 		});
@@ -358,8 +360,9 @@ describe('FileInfoService', () => {
 			assert.deepStrictEqual(info, {
 				size: 8879,
 				md5: '53bc1adcb6acbbda67ff9bd484896438',
-				type: {
-					mime: 'audio/webm',
+				type: { // Chromium returns WEBM Audio (audio/webm) to mime video/webm
+					//mime: 'audio/webm',
+					mime: 'video/webm',
 					ext: 'webm',
 				},
 			});

packages/backend/test/unit/activitypub.ts

@@ -326,7 +326,7 @@ describe('ActivityPub', () => {
 		});
 	});
 
-	describe('JSON-LD', () =>{
+	describe('JSON-LD', () => {
 		test('Compaction', async () => {
 			const jsonLd = jsonLdService.use();
 

packages/frontend/lib/rollup-plugin-unwind-css-module-class-name.test.ts

@@ -170,7 +170,7 @@ const cssModules = {
 const index_photos = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
 
 export { index_photos as default };
-`.slice(1), { ecmaVersion: 'latest', sourceType: 'module' });
+`.slice(1), { ecmaVersion: 'latest', sourceType: 'module' }) /* as unknown */ as estree.Program;
 	unwindCssModuleClassName(ast);
 	expect(generate(ast)).toBe(`
 import {c as api, d as defaultStore, i as i18n, aD as notePage, bN as ImgWithBlurhash, bY as getStaticImageUrl, _ as _export_sfc} from './app-!~{001}~.js';
@@ -437,7 +437,7 @@ const cssModules = {
 const MkDateSeparatedList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
 
 export { MkDateSeparatedList as M };
-`.slice(1), { ecmaVersion: 'latest', sourceType: 'module' });
+`.slice(1), { ecmaVersion: 'latest', sourceType: 'module' }) as unknown as estree.Program;
 	unwindCssModuleClassName(ast);
 	expect(generate(ast)).toBe(`
 import {a7 as getCurrentInstance, b as defineComponent, G as useCssModule, a1 as h, H as TransitionGroup} from './!~{002}~.js';

packages/frontend/lib/rollup-plugin-unwind-css-module-class-name.ts

@@ -432,6 +432,7 @@ export function unwindCssModuleClassName(ast: estree.Node): void {
 								type: 'ArrayExpression',
 								elements: node.declarations[0].init.arguments[1].elements.slice(0, __cssModulesIndex).concat(node.declarations[0].init.arguments[1].elements.slice(__cssModulesIndex + 1)),
 							}],
+							optional: false,
 						},
 					}],
 					kind: 'const',

packages/frontend/src/components/form/suspense.vue

@@ -24,7 +24,7 @@ import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n.js';
 
 const props = defineProps<{
-	p: () => Promise<any>;
+	p: (() => Promise<any>) | null;
 }>();
 
 const pending = ref(true);

packages/frontend/src/directives/adaptive-bg.ts

@@ -6,8 +6,9 @@
 import { Directive } from 'vue';
 
 export default {
-	mounted(src, binding, vn) {
-		const getBgColor = (el: HTMLElement) => {
+	mounted(src: HTMLElement) {
+		const getBgColor = (el: HTMLElement | null): string => {
+			if (el === null) return 'transparent';
 			const style = window.getComputedStyle(el);
 			if (style.backgroundColor && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(style.backgroundColor)) {
 				return style.backgroundColor;

packages/frontend/src/directives/adaptive-border.ts

@@ -6,8 +6,9 @@
 import { Directive } from 'vue';
 
 export default {
-	mounted(src, binding, vn) {
-		const getBgColor = (el: HTMLElement) => {
+	mounted(src: HTMLElement) {
+		const getBgColor = (el: HTMLElement | null) => {
+			if (el === null) return 'transparent';
 			const style = window.getComputedStyle(el);
 			if (style.backgroundColor && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(style.backgroundColor)) {
 				return style.backgroundColor;

packages/frontend/src/directives/anim.ts

@@ -6,15 +6,15 @@
 import { Directive } from 'vue';
 
 export default {
-	beforeMount(src, binding, vn) {
+	beforeMount(src: HTMLElement) {
 		src.style.opacity = '0';
 		src.style.transform = 'scale(0.9)';
 		// ページネーションと相性が悪いので
 		//if (typeof binding.value === 'number') src.style.transitionDelay = `${binding.value * 30}ms`;
 		src.classList.add('_zoom');
 	},
 
-	mounted(src, binding, vn) {
+	mounted(src: HTMLElement) {
 		window.setTimeout(() => {
 			src.style.opacity = '1';
 			src.style.transform = 'none';

packages/frontend/src/directives/appear.ts

@@ -5,8 +5,12 @@
 
 import { Directive } from 'vue';
 
+export interface MkObserverHTMLElement extends HTMLElement {
+	_observer_?: IntersectionObserver,
+}
+
 export default {
-	mounted(src, binding, vn) {
+	mounted(src: MkObserverHTMLElement, binding) {
 		const fn = binding.value;
 		if (fn == null) return;
 
@@ -21,7 +25,7 @@ export default {
 		src._observer_ = observer;
 	},
 
-	unmounted(src, binding, vn) {
+	unmounted(src: MkObserverHTMLElement) {
 		if (src._observer_) src._observer_.disconnect();
 	},
 } as Directive;

packages/frontend/src/directives/click-anime.ts

@@ -7,12 +7,12 @@ import { Directive } from 'vue';
 import { defaultStore } from '@/store.js';
 
 export default {
-	mounted(el: HTMLElement, binding, vn) {
+	mounted(el: HTMLElement) {
 		if (!defaultStore.state.animation) return;
 
 		const target = el.children[0];
 
-		if (target == null) return;
+		//if (target == null) return;
 
 		target.classList.add('_anime_bounce_standBy');
 

packages/frontend/src/directives/follow-append.ts

@@ -6,8 +6,12 @@
 import { Directive } from 'vue';
 import { getScrollContainer, getScrollPosition } from '@/scripts/scroll.js';
 
+export interface MkRoHTMLElement extends HTMLElement {
+	_ro_?: ResizeObserver,
+}
+
 export default {
-	mounted(src, binding, vn) {
+	mounted(src: MkRoHTMLElement, binding) {
 		if (binding.value === false) return;
 
 		let isBottom = true;
@@ -34,7 +38,7 @@ export default {
 		src._ro_ = ro;
 	},
 
-	unmounted(src, binding, vn) {
+	unmounted(src: MkRoHTMLElement) {
 		if (src._ro_) src._ro_.unobserve(src);
 	},
 } as Directive;

packages/frontend/src/directives/get-size.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { Directive } from 'vue';
+import { Directive, DirectiveBinding } from 'vue';
 
 const mountings = new Map<Element, {
 	resize: ResizeObserver;
@@ -38,7 +38,7 @@ function calc(src: Element) {
 }
 
 export default {
-	mounted(src, binding, vn) {
+	mounted(src: Element, binding: DirectiveBinding<(w: number, h: number) => void>) {
 		const resize = new ResizeObserver((entries, observer) => {
 			calc(src);
 		});
@@ -48,7 +48,7 @@ export default {
 		calc(src);
 	},
 
-	unmounted(src, binding, vn) {
+	unmounted(src: Element, binding: DirectiveBinding<(w: number, h: number) => void>) {
 		binding.value(0, 0);
 		const info = mountings.get(src);
 		if (!info) return;

packages/frontend/src/directives/hotkey.ts

@@ -6,8 +6,13 @@
 import { Directive } from 'vue';
 import { makeHotkey } from '../scripts/hotkey.js';
 
+export interface MkHotkeyHTMLElement extends HTMLElement {
+	_hotkey_global?: boolean,
+	_keyHandler?: (event: KeyboardEvent) => void,
+}
+
 export default {
-	mounted(el, binding) {
+	mounted(el: MkHotkeyHTMLElement, binding) {
 		el._hotkey_global = binding.modifiers.global === true;
 
 		el._keyHandler = makeHotkey(binding.value);
@@ -19,7 +24,8 @@ export default {
 		}
 	},
 
-	unmounted(el) {
+	unmounted(el: MkHotkeyHTMLElement) {
+		if (el._keyHandler === undefined) return;
 		if (el._hotkey_global) {
 			document.removeEventListener('keydown', el._keyHandler);
 		} else {

packages/frontend/src/directives/panel.ts

@@ -6,8 +6,9 @@
 import { Directive } from 'vue';
 
 export default {
-	mounted(src, binding, vn) {
-		const getBgColor = (el: HTMLElement) => {
+	mounted(src: HTMLElement) {
+		const getBgColor = (el: HTMLElement | null) => {
+			if (el === null) return 'transparent';
 			const style = window.getComputedStyle(el);
 			if (style.backgroundColor && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(style.backgroundColor)) {
 				return style.backgroundColor;

packages/frontend/src/directives/ripple.ts

@@ -2,12 +2,12 @@
  * SPDX-FileCopyrightText: syuilo and misskey-project
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
+import { Directive, DirectiveBinding } from 'vue';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
 import { popup } from '@/os.js';
 
 export default {
-	mounted(el, binding, vn) {
+	mounted(el: HTMLElement, binding: DirectiveBinding<boolean>) {
 		// 明示的に false であればバインドしない
 		if (binding.value === false) return;
 
@@ -20,4 +20,4 @@ export default {
 			popup(MkRippleEffect, { x, y }, {}, 'end');
 		});
 	},
-};
+} as Directive;

packages/frontend/src/directives/tooltip.ts

@@ -6,33 +6,42 @@
 // TODO: useTooltip関数使うようにしたい
 // ただディレクティブ内でonUnmountedなどのcomposition api使えるのか不明
 
-import { defineAsyncComponent, Directive, ref } from 'vue';
+import { defineAsyncComponent, Directive, ref, DirectiveBinding } from 'vue';
 import { isTouchUsing } from '@/scripts/touch.js';
 import { popup, alert } from '@/os.js';
 
 const start = isTouchUsing ? 'touchstart' : 'mouseenter';
 const end = isTouchUsing ? 'touchend' : 'mouseleave';
 
+export type MkTooltip = {
+	text?: string;
+	_close?: () => void;
+	showTimer?: number;
+	hideTimer?: number;
+	checkTimer?: number;
+	close?: () => void;
+	show?: () => void;
+};
+
+export interface MkTooltipDirectiveHTMLElement extends HTMLElement {
+	_tooltipDirective_?: MkTooltip,
+}
+
 export default {
-	mounted(el: HTMLElement, binding, vn) {
+	mounted(el: MkTooltipDirectiveHTMLElement, binding: DirectiveBinding<string>) {
 		const delay = binding.modifiers.noDelay ? 0 : 100;
 
-		const self = (el as any)._tooltipDirective_ = {} as any;
-
-		self.text = binding.value as string;
-		self._close = null;
-		self.showTimer = null;
-		self.hideTimer = null;
-		self.checkTimer = null;
+		const self: MkTooltip = {
+			text: binding.value,
+		};
 
 		self.close = () => {
 			if (self._close) {
 				window.clearInterval(self.checkTimer);
 				self._close();
-				self._close = null;
+				self._close = undefined;
 			}
 		};
-
 		if (binding.arg === 'dialog') {
 			el.addEventListener('click', (ev) => {
 				ev.preventDefault();
@@ -48,7 +57,7 @@ export default {
 		self.show = () => {
 			if (!document.body.contains(el)) return;
 			if (self._close) return;
-			if (self.text == null) return;
+			if (self.text === undefined) return;
 
 			const showing = ref(true);
 			popup(defineAsyncComponent(() => import('@/components/MkTooltip.vue')), {
@@ -64,6 +73,8 @@ export default {
 			};
 		};
 
+		(el)._tooltipDirective_ = self;
+
 		el.addEventListener('selectstart', ev => {
 			ev.preventDefault();
 		});
@@ -72,35 +83,35 @@ export default {
 			window.clearTimeout(self.showTimer);
 			window.clearTimeout(self.hideTimer);
 			if (delay === 0) {
-				self.show();
+				self.show!();
 			} else {
-				self.showTimer = window.setTimeout(self.show, delay);
+				self.showTimer = window.setTimeout(self.show!, delay);
 			}
 		}, { passive: true });
 
 		el.addEventListener(end, () => {
 			window.clearTimeout(self.showTimer);
 			window.clearTimeout(self.hideTimer);
 			if (delay === 0) {
-				self.close();
+				self.close!();
 			} else {
-				self.hideTimer = window.setTimeout(self.close, delay);
+				self.hideTimer = window.setTimeout(self.close!, delay);
 			}
 		}, { passive: true });
 
 		el.addEventListener('click', () => {
 			window.clearTimeout(self.showTimer);
-			self.close();
+			self.close!();
 		});
 	},
 
-	updated(el, binding) {
+	updated(el: MkTooltipDirectiveHTMLElement, binding: DirectiveBinding<string>) {
 		const self = el._tooltipDirective_;
-		self.text = binding.value as string;
+		self!.text = binding.value;
 	},
 
-	unmounted(el, binding, vn) {
+	unmounted(el: MkTooltipDirectiveHTMLElement) {
 		const self = el._tooltipDirective_;
-		window.clearInterval(self.checkTimer);
+		window.clearInterval(self!.checkTimer);
 	},
 } as Directive;