sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor(client): extract interval logic to a composable function

Browse Source 
あと`onUnmounted`を`onMounted`内で呼んでいたりしたのを修正したりとか
This commit is contained in:
syuilo
2022-06-26 03:12:58 +09:00
parent 6a4574b612
commit 5e95a1f7af
18 changed files with 207 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
packages/client/src/widgets/aichan.vue
View File

@ -6,8 +6,8 @@
<script lang="ts" setup>
import { onMounted, onUnmounted, reactive, ref } from 'vue';
import { GetFormResultType } from '@/scripts/form';
import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form';
const name = 'ai';
@ -38,22 +38,23 @@ const touched = () => {
//if (this.live2d) this.live2d.changeExpression('gurugurume');
};
onMounted(() => {
const onMousemove = (ev: MouseEvent) => {
const iframeRect = live2d.value.getBoundingClientRect();
live2d.value.contentWindow.postMessage({
type: 'moveCursor',
body: {
x: ev.clientX - iframeRect.left,
y: ev.clientY - iframeRect.top,
}
}, '*');
};
const onMousemove = (ev: MouseEvent) => {
const iframeRect = live2d.value.getBoundingClientRect();
live2d.value.contentWindow.postMessage({
type: 'moveCursor',
body: {
x: ev.clientX - iframeRect.left,
y: ev.clientY - iframeRect.top,
},
}, '*');
};
onMounted(() => {
window.addEventListener('mousemove', onMousemove, { passive: true });
onUnmounted(() => {
window.removeEventListener('mousemove', onMousemove);
});
});
onUnmounted(() => {
window.removeEventListener('mousemove', onMousemove);
});
defineExpose<WidgetComponentExpose>({

25
packages/client/src/widgets/calendar.vue
View File

@ -34,9 +34,10 @@
<script lang="ts" setup>
import { onUnmounted, ref } from 'vue';
import { GetFormResultType } from '@/scripts/form';
import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form';
import { i18n } from '@/i18n';
import { useInterval } from '@/scripts/use-interval';
const name = 'calendar';
@ -85,28 +86,26 @@ const tick = () => {
i18n.ts._weekday.wednesday,
i18n.ts._weekday.thursday,
i18n.ts._weekday.friday,
i18n.ts._weekday.saturday
i18n.ts._weekday.saturday,
][now.getDay()];
const dayNumer = now.getTime() - new Date(ny, nm, nd).getTime();
const dayDenom = 1000/*ms*/ * 60/*s*/ * 60/*m*/ * 24/*h*/;
const dayNumer = now.getTime() - new Date(ny, nm, nd).getTime();
const dayDenom = 1000/*ms*/ * 60/*s*/ * 60/*m*/ * 24/*h*/;
const monthNumer = now.getTime() - new Date(ny, nm, 1).getTime();
const monthDenom = new Date(ny, nm + 1, 1).getTime() - new Date(ny, nm, 1).getTime();
const yearNumer = now.getTime() - new Date(ny, 0, 1).getTime();
const yearDenom = new Date(ny + 1, 0, 1).getTime() - new Date(ny, 0, 1).getTime();
const yearNumer = now.getTime() - new Date(ny, 0, 1).getTime();
const yearDenom = new Date(ny + 1, 0, 1).getTime() - new Date(ny, 0, 1).getTime();
dayP.value = dayNumer / dayDenom * 100;
dayP.value = dayNumer / dayDenom * 100;
monthP.value = monthNumer / monthDenom * 100;
yearP.value = yearNumer / yearDenom * 100;
yearP.value = yearNumer / yearDenom * 100;
isHoliday.value = now.getDay() === 0 || now.getDay() === 6;
};
tick();
const intervalId = window.setInterval(tick, 1000);
onUnmounted(() => {
window.clearInterval(intervalId);
useInterval(tick, 1000, {
immediate: true,
afterMounted: false,
});
defineExpose<WidgetComponentExpose>({

10
packages/client/src/widgets/federation.vue
View File

@ -25,6 +25,7 @@ import { GetFormResultType } from '@/scripts/form';
import MkContainer from '@/components/ui/container.vue';
import MkMiniChart from '@/components/mini-chart.vue';
import * as os from '@/os';
import { useInterval } from '@/scripts/use-interval';
const name = 'federation';
@ -64,12 +65,9 @@ const fetch = async () => {
fetching.value = false;
};
onMounted(() => {
fetch();
const intervalId = window.setInterval(fetch, 1000 * 60);
onUnmounted(() => {
window.clearInterval(intervalId);
});
useInterval(fetch, 1000 * 60, {
immediate: true,
afterMounted: true,
});
defineExpose<WidgetComponentExpose>({

12
packages/client/src/widgets/online-users.vue
View File

@ -8,9 +8,10 @@
<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue';
import { GetFormResultType } from '@/scripts/form';
import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form';
import * as os from '@/os';
import { useInterval } from '@/scripts/use-interval';
const name = 'onlineUsers';
@ -43,12 +44,9 @@ const tick = () => {
});
};
onMounted(() => {
tick();
const intervalId = window.setInterval(tick, 1000 * 15);
onUnmounted(() => {
window.clearInterval(intervalId);
});
useInterval(tick, 1000 * 15, {
immediate: true,
afterMounted: true,
});
defineExpose<WidgetComponentExpose>({

12
packages/client/src/widgets/rss.vue
View File

@ -14,10 +14,11 @@
<script lang="ts" setup>
import { onMounted, onUnmounted, ref, watch } from 'vue';
import { GetFormResultType } from '@/scripts/form';
import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form';
import * as os from '@/os';
import MkContainer from '@/components/ui/container.vue';
import { useInterval } from '@/scripts/use-interval';
const name = 'rss';
@ -60,12 +61,9 @@ const tick = () => {
watch(() => widgetProps.url, tick);
onMounted(() => {
tick();
const intervalId = window.setInterval(tick, 60000);
onUnmounted(() => {
window.clearInterval(intervalId);
});
useInterval(tick, 60000, {
immediate: true,
afterMounted: true,
});
defineExpose<WidgetComponentExpose>({

15
packages/client/src/widgets/slideshow.vue
View File

@ -13,9 +13,10 @@
<script lang="ts" setup>
import { nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
import { GetFormResultType } from '@/scripts/form';
import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form';
import * as os from '@/os';
import { useInterval } from '@/scripts/use-interval';
const name = 'slideshow';
@ -75,7 +76,7 @@ const fetch = () => {
os.api('drive/files', {
folderId: widgetProps.folderId,
type: 'image/*',
limit: 100
limit: 100,
}).then(res => {
images.value = res;
fetching.value = false;
@ -96,15 +97,15 @@ const choose = () => {
});
};
useInterval(change, 10000, {
immediate: false,
afterMounted: true,
});
onMounted(() => {
if (widgetProps.folderId != null) {
fetch();
}
const intervalId = window.setInterval(change, 10000);
onUnmounted(() => {
window.clearInterval(intervalId);
});
});
defineExpose<WidgetComponentExpose>({

12
packages/client/src/widgets/trends.vue
View File

@ -19,11 +19,12 @@
<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue';
import { GetFormResultType } from '@/scripts/form';
import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form';
import MkContainer from '@/components/ui/container.vue';
import MkMiniChart from '@/components/mini-chart.vue';
import * as os from '@/os';
import { useInterval } from '@/scripts/use-interval';
const name = 'hashtags';
@ -58,12 +59,9 @@ const fetch = () => {
});
};
onMounted(() => {
fetch();
const intervalId = window.setInterval(fetch, 1000 * 60);
onUnmounted(() => {
window.clearInterval(intervalId);
});
useInterval(fetch, 1000 * 60, {
immediate: true,
afterMounted: true,
});
defineExpose<WidgetComponentExpose>({