Skip to content

Commit

Permalink
refactor: カスタムディレクティブの型付け
Browse files Browse the repository at this point in the history
  • Loading branch information
@taiyme
taiyme committed Oct 22, 2024
1 parent b8a39e4 commit 350d04c
Show file tree
Hide file tree
Showing 14 changed files with 203 additions and 234 deletions.
80 changes: 40 additions & 40 deletions packages/frontend/src/components/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,30 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/

import { App } from 'vue';
import type { App } from 'vue';

import Mfm from './global/MkMfm.js';
import MkA from './global/MkA.vue';
import MkAcct from './global/MkAcct.vue';
import MkAvatar from './global/MkAvatar.vue';
import MkEmoji from './global/MkEmoji.vue';
import MkCondensedLine from './global/MkCondensedLine.vue';
import MkCustomEmoji from './global/MkCustomEmoji.vue';
import MkUserName from './global/MkUserName.vue';
import MkEllipsis from './global/MkEllipsis.vue';
import MkTime from './global/MkTime.vue';
import MkUrl from './global/MkUrl.vue';
import I18n from './global/I18n.vue';
import RouterView from './global/RouterView.vue';
import MkLoading from './global/MkLoading.vue';
import MkError from './global/MkError.vue';
import MkAd from './global/MkAd.vue';
import MkPageHeader from './global/MkPageHeader.vue';
import MkSpacer from './global/MkSpacer.vue';
import MkFooterSpacer from './global/MkFooterSpacer.vue';
import MkStickyContainer from './global/MkStickyContainer.vue';
import MkLazy from './global/MkLazy.vue';
import TmsNoCache from './global/TmsNoCache.vue';
import I18n from '@/components/global/I18n.vue';
import RouterView from '@/components/global/RouterView.vue';
import Mfm from '@/components/global/MkMfm.js';
import MkA from '@/components/global/MkA.vue';
import MkAcct from '@/components/global/MkAcct.vue';
import MkAd from '@/components/global/MkAd.vue';
import MkAvatar from '@/components/global/MkAvatar.vue';
import MkCondensedLine from '@/components/global/MkCondensedLine.vue';
import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
import MkEllipsis from '@/components/global/MkEllipsis.vue';
import MkEmoji from '@/components/global/MkEmoji.vue';
import MkError from '@/components/global/MkError.vue';
import MkFooterSpacer from '@/components/global/MkFooterSpacer.vue';
import MkLazy from '@/components/global/MkLazy.vue';
import MkLoading from '@/components/global/MkLoading.vue';
import MkPageHeader from '@/components/global/MkPageHeader.vue';
import MkSpacer from '@/components/global/MkSpacer.vue';
import MkStickyContainer from '@/components/global/MkStickyContainer.vue';
import MkTime from '@/components/global/MkTime.vue';
import MkUrl from '@/components/global/MkUrl.vue';
import MkUserName from '@/components/global/MkUserName.vue';
import TmsNoCache from '@/components/global/TmsNoCache.vue';

// eslint-disable-next-line import/no-default-export
export default function(app: App) {
Expand All @@ -41,24 +41,24 @@ export const components = {
Mfm: Mfm,
MkA: MkA,
MkAcct: MkAcct,
MkAd: MkAd,
MkAvatar: MkAvatar,
MkEmoji: MkEmoji,
MkCondensedLine: MkCondensedLine,
MkCustomEmoji: MkCustomEmoji,
MkUserName: MkUserName,
MkEllipsis: MkEllipsis,
MkTime: MkTime,
MkUrl: MkUrl,
MkLoading: MkLoading,
MkEmoji: MkEmoji,
MkError: MkError,
MkAd: MkAd,
MkFooterSpacer: MkFooterSpacer,
MkLazy: MkLazy,
MkLoading: MkLoading,
MkPageHeader: MkPageHeader,
MkSpacer: MkSpacer,
MkFooterSpacer: MkFooterSpacer,
MkStickyContainer: MkStickyContainer,
MkLazy: MkLazy,
MkTime: MkTime,
MkUrl: MkUrl,
MkUserName: MkUserName,
TmsNoCache: TmsNoCache,
};
} as const;

declare module '@vue/runtime-core' {
export interface GlobalComponents {
Expand All @@ -67,22 +67,22 @@ declare module '@vue/runtime-core' {
Mfm: typeof Mfm;
MkA: typeof MkA;
MkAcct: typeof MkAcct;
MkAd: typeof MkAd;
MkAvatar: typeof MkAvatar;
MkEmoji: typeof MkEmoji;
MkCondensedLine: typeof MkCondensedLine;
MkCustomEmoji: typeof MkCustomEmoji;
MkUserName: typeof MkUserName;
MkEllipsis: typeof MkEllipsis;
MkTime: typeof MkTime;
MkUrl: typeof MkUrl;
MkLoading: typeof MkLoading;
MkEmoji: typeof MkEmoji;
MkError: typeof MkError;
MkAd: typeof MkAd;
MkFooterSpacer: typeof MkFooterSpacer;
MkLazy: typeof MkLazy;
MkLoading: typeof MkLoading;
MkPageHeader: typeof MkPageHeader;
MkSpacer: typeof MkSpacer;
MkFooterSpacer: typeof MkFooterSpacer;
MkStickyContainer: typeof MkStickyContainer;
MkLazy: typeof MkLazy;
MkTime: typeof MkTime;
MkUrl: typeof MkUrl;
MkUserName: typeof MkUserName;
TmsNoCache: typeof TmsNoCache;
}
}
9 changes: 4 additions & 5 deletions packages/frontend/src/directives/adaptive-bg.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,11 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/

import { Directive } from 'vue';
import type { ObjectDirective } from 'vue';
import { getBgColor } from '@/scripts/tms/get-bg-color.js';

// eslint-disable-next-line import/no-default-export
export default {
mounted(src, binding, vn) {
export const vAdaptiveBg: ObjectDirective<HTMLElement, null | undefined> = {
mounted(src) {
const parentBg = getBgColor(src.parentElement) ?? 'transparent';

const myBg = window.getComputedStyle(src).backgroundColor;
Expand All @@ -19,4 +18,4 @@ export default {
src.style.backgroundColor = myBg;
}
},
} as Directive;
};
9 changes: 4 additions & 5 deletions packages/frontend/src/directives/adaptive-border.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,11 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/

import { Directive } from 'vue';
import type { ObjectDirective } from 'vue';
import { getBgColor } from '@/scripts/tms/get-bg-color.js';

// eslint-disable-next-line import/no-default-export
export default {
mounted(src, binding, vn) {
export const vAdaptiveBorder: ObjectDirective<HTMLElement, null | undefined> = {
mounted(src) {
const parentBg = getBgColor(src.parentElement) ?? 'transparent';

const myBg = window.getComputedStyle(src).backgroundColor;
Expand All @@ -19,4 +18,4 @@ export default {
src.style.borderColor = myBg;
}
},
} as Directive;
};
15 changes: 8 additions & 7 deletions packages/frontend/src/directives/anim.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,23 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/

import { Directive } from 'vue';
import type { ObjectDirective } from 'vue';

// eslint-disable-next-line import/no-default-export
export default {
beforeMount(src, binding, vn) {
export const vAnim: ObjectDirective<HTMLElement, number | null | undefined> = {
beforeMount(src) {
src.style.opacity = '0';
src.style.transform = 'scale(0.9)';
// ページネーションと相性が悪いので
// if (typeof binding.value === 'number') src.style.transitionDelay = `${binding.value * 30}ms`;
// if (typeof binding.value === 'number') {
// src.style.transitionDelay = `${binding.value * 30}ms`;
// }
src.classList.add('_zoom');
},

mounted(src, binding, vn) {
mounted(src) {
window.setTimeout(() => {
src.style.opacity = '1';
src.style.transform = 'none';
}, 1);
},
} as Directive;
};
17 changes: 8 additions & 9 deletions packages/frontend/src/directives/appear.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,15 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/

import { Directive } from 'vue';
import type { ObjectDirective } from 'vue';

// eslint-disable-next-line import/no-default-export
export default {
mounted(src, binding, vn) {
export const vAppear: ObjectDirective<HTMLElement, (() => unknown) | null | undefined> = {
mounted(src, binding) {
const fn = binding.value;
if (fn == null) return;

const observer = new IntersectionObserver(entries => {
if (entries.some(entry => entry.isIntersecting)) {
const observer = new IntersectionObserver((entries) => {
if (entries.some((entry) => entry.isIntersecting)) {
fn();
}
});
Expand All @@ -22,7 +21,7 @@ export default {
src._observer_ = observer;
},

unmounted(src, binding, vn) {
if (src._observer_) src._observer_.disconnect();
unmounted(src) {
src._observer_?.disconnect();
},
} as Directive;
};
17 changes: 8 additions & 9 deletions packages/frontend/src/directives/click-anime.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,20 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/

import { Directive } from 'vue';
import type { ObjectDirective } from 'vue';
import { defaultStore } from '@/store.js';

// eslint-disable-next-line import/no-default-export
export default {
mounted(el: HTMLElement, binding, vn) {
export const vClickAnime: ObjectDirective<HTMLElement, null | undefined> = {
mounted(src) {
if (!defaultStore.state.animation) return;

const target = el.children[0];
const target = src.children[0];

if (target == null) return;

target.classList.add('_anime_bounce_standBy');

el.addEventListener('mousedown', () => {
src.addEventListener('mousedown', () => {
target.classList.remove('_anime_bounce');

target.classList.add('_anime_bounce_standBy');
Expand All @@ -28,14 +27,14 @@ export default {
}, { passive: true });
}, { passive: true });

el.addEventListener('click', () => {
src.addEventListener('click', () => {
target.classList.add('_anime_bounce');
target.classList.remove('_anime_bounce_ready');
}, { passive: true });

el.addEventListener('animationend', () => {
src.addEventListener('animationend', () => {
target.classList.remove('_anime_bounce');
target.classList.add('_anime_bounce_standBy');
}, { passive: true });
},
} as Directive;
};
41 changes: 0 additions & 41 deletions packages/frontend/src/directives/follow-append.ts
View file

This file was deleted.

53 changes: 26 additions & 27 deletions packages/frontend/src/directives/get-size.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,36 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/

import { Directive } from 'vue';
import type { ObjectDirective } from 'vue';

const mountings = new Map<Element, {
const mountings = new Map<HTMLElement, {
resize: ResizeObserver;
intersection?: IntersectionObserver;
fn: (w: number, h: number) => void;
}>();

function calc(src: Element) {
export const vGetSize: ObjectDirective<HTMLElement, ((w: number, h: number) => unknown) | null | undefined> = {
mounted(src, binding) {
const resize = new ResizeObserver(() => {
calc(src);
});
resize.observe(src);

mountings.set(src, { resize, fn: binding.value });
calc(src);
},

unmounted(src, binding) {
binding.value(0, 0);
const info = mountings.get(src);
if (!info) return;
info.resize.disconnect();
if (info.intersection) info.intersection.disconnect();
mountings.delete(src);
},
};

function calc(src: HTMLElement) {
const info = mountings.get(src);
const height = src.clientHeight;
const width = src.clientWidth;
Expand All @@ -22,8 +43,8 @@ function calc(src: Element) {
if (!height) {
// IntersectionObserverで表示検出する
if (!info.intersection) {
info.intersection = new IntersectionObserver(entries => {
if (entries.some(entry => entry.isIntersecting)) calc(src);
info.intersection = new IntersectionObserver((entries) => {
if (entries.some((entry) => entry.isIntersecting)) calc(src);
});
}
info.intersection.observe(src);
Expand All @@ -36,25 +57,3 @@ function calc(src: Element) {

info.fn(width, height);
}

// eslint-disable-next-line import/no-default-export
export default {
mounted(src, binding, vn) {
const resize = new ResizeObserver((entries, observer) => {
calc(src);
});
resize.observe(src);

mountings.set(src, { resize, fn: binding.value });
calc(src);
},

unmounted(src, binding, vn) {
binding.value(0, 0);
const info = mountings.get(src);
if (!info) return;
info.resize.disconnect();
if (info.intersection) info.intersection.disconnect();
mountings.delete(src);
},
} as Directive<Element, (w: number, h: number) => void>;
Loading

0 comments on commit 350d04c

Please sign in to comment.