Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(frontend): 非推奨となったReactivity Transformを使わないように (#12539)

Browse source 
* refactor(frontend): 非推奨となったReactivity Transformを使わないように

* refactor: 不要な括弧を除去

* fix: 不要なアノテーションを除去

* fix: Refの配列をrefしている部分の対応

* refactor: 不要な括弧を除去

* fix: lint

* refactor: Ref、ShallowRef、ComputedRefの変数の宣言をletからconstに置換

* fix: type error

* chore: drop reactivity transform from eslint configuration

* refactor: remove unnecessary import

* fix: 対応漏れ
This commit is contained in:
zyoshoka 2023-12-07 14:42:09 +09:00 • committed by GitHub
parent e42c91dee7
commit 406b4bdbe7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
277 changed files with 3353 additions and 3441 deletions
Download patch file Download diff file Expand all files Collapse all files

14
packages/frontend/src/pages/user/activity.following.vue
View file

@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import { onMounted, shallowRef, ref } from 'vue';
import { Chart, ChartDataset } from 'chart.js';
import * as Misskey from 'misskey-js';
import gradient from 'chartjs-plugin-gradient';
@ -32,12 +32,12 @@ const props = defineProps<{
user: Misskey.entities.User;
}>();
const chartEl = $shallowRef<HTMLCanvasElement>(null);
let legendEl = $shallowRef<InstanceType<typeof MkChartLegend>>();
const chartEl = shallowRef<HTMLCanvasElement>(null);
const legendEl = shallowRef<InstanceType<typeof MkChartLegend>>();
const now = new Date();
let chartInstance: Chart = null;
const chartLimit = 30;
let fetching = $ref(true);
const fetching = ref(true);
const { handler: externalTooltipHandler } = useChartTooltip();
@ -88,7 +88,7 @@ async function renderChart() {
}, extra);
}
chartInstance = new Chart(chartEl, {
chartInstance = new Chart(chartEl.value, {
type: 'bar',
data: {
datasets: [
@ -162,10 +162,10 @@ async function renderChart() {
gradient,
},
},
plugins: [chartVLine(vLineColor), chartLegend(legendEl)],
plugins: [chartVLine(vLineColor), chartLegend(legendEl.value)],
});
fetching = false;
fetching.value = false;
}
onMounted(async () => {

18
packages/frontend/src/pages/user/activity.heatmap.vue
View file

@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { onMounted, nextTick, watch } from 'vue';
import { onMounted, nextTick, watch, shallowRef, ref } from 'vue';
import { Chart } from 'chart.js';
import * as Misskey from 'misskey-js';
import * as os from '@/os.js';
@ -29,11 +29,11 @@ const props = defineProps<{
user: Misskey.entities.User;
}>();
const rootEl = $shallowRef<HTMLDivElement>(null);
const chartEl = $shallowRef<HTMLCanvasElement>(null);
const rootEl = shallowRef<HTMLDivElement>(null);
const chartEl = shallowRef<HTMLCanvasElement>(null);
const now = new Date();
let chartInstance: Chart = null;
let fetching = $ref(true);
const fetching = ref(true);
const { handler: externalTooltipHandler } = useChartTooltip({
position: 'middle',
@ -44,8 +44,8 @@ async function renderChart() {
chartInstance.destroy();
}
const wide = rootEl.offsetWidth > 700;
const narrow = rootEl.offsetWidth < 400;
const wide = rootEl.value.offsetWidth > 700;
const narrow = rootEl.value.offsetWidth < 400;
const weeks = wide ? 50 : narrow ? 10 : 25;
const chartLimit = 7 * weeks;
@ -78,7 +78,7 @@ async function renderChart() {
values = raw.inc;
}
fetching = false;
fetching.value = false;
await nextTick();
@ -91,7 +91,7 @@ async function renderChart() {
const marginEachCell = 4;
chartInstance = new Chart(chartEl, {
chartInstance = new Chart(chartEl.value, {
type: 'matrix',
data: {
datasets: [{
@ -203,7 +203,7 @@ async function renderChart() {
}
watch(() => props.src, () => {
fetching = true;
fetching.value = true;
renderChart();
});

14
packages/frontend/src/pages/user/activity.notes.vue
View file

@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import { onMounted, shallowRef, ref } from 'vue';
import { Chart, ChartDataset } from 'chart.js';
import * as Misskey from 'misskey-js';
import gradient from 'chartjs-plugin-gradient';
@ -32,12 +32,12 @@ const props = defineProps<{
user: Misskey.entities.User;
}>();
const chartEl = $shallowRef<HTMLCanvasElement>(null);
let legendEl = $shallowRef<InstanceType<typeof MkChartLegend>>();
const chartEl = shallowRef<HTMLCanvasElement>(null);
const legendEl = shallowRef<InstanceType<typeof MkChartLegend>>();
const now = new Date();
let chartInstance: Chart = null;
const chartLimit = 50;
let fetching = $ref(true);
const fetching = ref(true);
const { handler: externalTooltipHandler } = useChartTooltip();
@ -87,7 +87,7 @@ async function renderChart() {
}, extra);
}
chartInstance = new Chart(chartEl, {
chartInstance = new Chart(chartEl.value, {
type: 'bar',
data: {
datasets: [
@ -161,10 +161,10 @@ async function renderChart() {
gradient,
},
},
plugins: [chartVLine(vLineColor), chartLegend(legendEl)],
plugins: [chartVLine(vLineColor), chartLegend(legendEl.value)],
});
fetching = false;
fetching.value = false;
}
onMounted(async () => {

14
packages/frontend/src/pages/user/activity.pv.vue
View file

@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import { onMounted, shallowRef, ref } from 'vue';
import { Chart, ChartDataset } from 'chart.js';
import * as Misskey from 'misskey-js';
import gradient from 'chartjs-plugin-gradient';
@ -32,12 +32,12 @@ const props = defineProps<{
user: Misskey.entities.User;
}>();
const chartEl = $shallowRef<HTMLCanvasElement>(null);
let legendEl = $shallowRef<InstanceType<typeof MkChartLegend>>();
const chartEl = shallowRef<HTMLCanvasElement>(null);
const legendEl = shallowRef<InstanceType<typeof MkChartLegend>>();
const now = new Date();
let chartInstance: Chart = null;
const chartLimit = 30;
let fetching = $ref(true);
const fetching = ref(true);
const { handler: externalTooltipHandler } = useChartTooltip();
@ -88,7 +88,7 @@ async function renderChart() {
}, extra);
}
chartInstance = new Chart(chartEl, {
chartInstance = new Chart(chartEl.value, {
type: 'bar',
data: {
datasets: [
@ -172,10 +172,10 @@ async function renderChart() {
gradient,
},
},
plugins: [chartVLine(vLineColor), chartLegend(legendEl)],
plugins: [chartVLine(vLineColor), chartLegend(legendEl.value)],
});
fetching = false;
fetching.value = false;
}
onMounted(async () => {

24
packages/frontend/src/pages/user/followers.vue
View file

@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { computed, watch } from 'vue';
import { computed, watch, ref } from 'vue';
import * as Misskey from 'misskey-js';
import XFollowList from './follow-list.vue';
import * as os from '@/os.js';
@ -31,16 +31,16 @@ const props = withDefaults(defineProps<{
}>(), {
});
let user = $ref<null | Misskey.entities.UserDetailed>(null);
let error = $ref(null);
const user = ref<null | Misskey.entities.UserDetailed>(null);
const error = ref(null);
function fetchUser(): void {
if (props.acct == null) return;
user = null;
user.value = null;
os.api('users/show', Misskey.acct.parse(props.acct)).then(u => {
user = u;
user.value = u;
}).catch(err => {
error = err;
error.value = err;
});
}
@ -48,15 +48,15 @@ watch(() => props.acct, fetchUser, {
immediate: true,
});
const headerActions = $computed(() => []);
const headerActions = computed(() => []);
const headerTabs = $computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(computed(() => user ? {
definePageMetadata(computed(() => user.value ? {
icon: 'ti ti-user',
title: user.name ? `${user.name} (@${user.username})` : `@${user.username}`,
title: user.value.name ? `${user.value.name} (@${user.value.username})` : `@${user.value.username}`,
subtitle: i18n.ts.followers,
userName: user,
avatar: user,
userName: user.value,
avatar: user.value,
} : null));
</script>

24
packages/frontend/src/pages/user/following.vue
View file

@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { computed, watch } from 'vue';
import { computed, watch, ref } from 'vue';
import * as Misskey from 'misskey-js';
import XFollowList from './follow-list.vue';
import * as os from '@/os.js';
@ -31,16 +31,16 @@ const props = withDefaults(defineProps<{
}>(), {
});
let user = $ref<null | Misskey.entities.UserDetailed>(null);
let error = $ref(null);
const user = ref<null | Misskey.entities.UserDetailed>(null);
const error = ref(null);
function fetchUser(): void {
if (props.acct == null) return;
user = null;
user.value = null;
os.api('users/show', Misskey.acct.parse(props.acct)).then(u => {
user = u;
user.value = u;
}).catch(err => {
error = err;
error.value = err;
});
}
@ -48,15 +48,15 @@ watch(() => props.acct, fetchUser, {
immediate: true,
});
const headerActions = $computed(() => []);
const headerActions = computed(() => []);
const headerTabs = $computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(computed(() => user ? {
definePageMetadata(computed(() => user.value ? {
icon: 'ti ti-user',
title: user.name ? `${user.name} (@${user.username})` : `@${user.username}`,
title: user.value.name ? `${user.value.name} (@${user.value.username})` : `@${user.value.username}`,
subtitle: i18n.ts.following,
userName: user,
avatar: user,
userName: user.value,
avatar: user.value,
} : null));
</script>

60
packages/frontend/src/pages/user/home.vue
View file

@ -146,7 +146,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { defineAsyncComponent, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
import { defineAsyncComponent, computed, onMounted, onUnmounted, nextTick, watch, ref } from 'vue';
import * as Misskey from 'misskey-js';
import MkNote from '@/components/MkNote.vue';
import MkFollowButton from '@/components/MkFollowButton.vue';
@ -198,19 +198,19 @@ const props = withDefaults(defineProps<{
const router = useRouter();
let user = $ref(props.user);
let parallaxAnimationId = $ref<null | number>(null);
let narrow = $ref<null | boolean>(null);
let rootEl = $ref<null | HTMLElement>(null);
let bannerEl = $ref<null | HTMLElement>(null);
let memoTextareaEl = $ref<null | HTMLElement>(null);
let memoDraft = $ref(props.user.memo);
let isEditingMemo = $ref(false);
let moderationNote = $ref(props.user.moderationNote);
let editModerationNote = $ref(false);
const user = ref(props.user);
const parallaxAnimationId = ref<null | number>(null);
const narrow = ref<null | boolean>(null);
const rootEl = ref<null | HTMLElement>(null);
const bannerEl = ref<null | HTMLElement>(null);
const memoTextareaEl = ref<null | HTMLElement>(null);
const memoDraft = ref(props.user.memo);
const isEditingMemo = ref(false);
const moderationNote = ref(props.user.moderationNote);
const editModerationNote = ref(false);
watch($$(moderationNote), async () => {
await os.api('admin/update-user-note', { userId: props.user.id, text: moderationNote });
watch(moderationNote, async () => {
await os.api('admin/update-user-note', { userId: props.user.id, text: moderationNote.value });
});
const pagination = {
@ -221,32 +221,32 @@ const pagination = {
})),
};
const style = $computed(() => {
const style = computed(() => {
if (props.user.bannerUrl == null) return {};
return {
backgroundImage: `url(${ props.user.bannerUrl })`,
};
});
const age = $computed(() => {
const age = computed(() => {
return calcAge(props.user.birthday);
});
function menu(ev) {
const { menu, cleanup } = getUserMenu(user, router);
const { menu, cleanup } = getUserMenu(user.value, router);
os.popupMenu(menu, ev.currentTarget ?? ev.target).finally(cleanup);
}
function parallaxLoop() {
parallaxAnimationId = window.requestAnimationFrame(parallaxLoop);
parallaxAnimationId.value = window.requestAnimationFrame(parallaxLoop);
parallax();
}
function parallax() {
const banner = bannerEl as any;
const banner = bannerEl.value as any;
if (banner == null) return;
const top = getScrollPosition(rootEl);
const top = getScrollPosition(rootEl.value);
if (top < 0) return;
@ -256,33 +256,33 @@ function parallax() {
}
function showMemoTextarea() {
isEditingMemo = true;
isEditingMemo.value = true;
nextTick(() => {
memoTextareaEl?.focus();
memoTextareaEl.value?.focus();
});
}
function adjustMemoTextarea() {
if (!memoTextareaEl) return;
memoTextareaEl.style.height = '0px';
memoTextareaEl.style.height = `${memoTextareaEl.scrollHeight}px`;
if (!memoTextareaEl.value) return;
memoTextareaEl.value.style.height = '0px';
memoTextareaEl.value.style.height = `${memoTextareaEl.value.scrollHeight}px`;
}
async function updateMemo() {
await api('users/update-memo', {
memo: memoDraft,
memo: memoDraft.value,
userId: props.user.id,
});
isEditingMemo = false;
isEditingMemo.value = false;
}
watch([props.user], () => {
memoDraft = props.user.memo;
memoDraft.value = props.user.memo;
});
onMounted(() => {
window.requestAnimationFrame(parallaxLoop);
narrow = rootEl!.clientWidth < 1000;
narrow.value = rootEl.value!.clientWidth < 1000;
if (props.user.birthday) {
const m = new Date().getMonth() + 1;
@ -301,8 +301,8 @@ onMounted(() => {
});
onUnmounted(() => {
if (parallaxAnimationId) {
window.cancelAnimationFrame(parallaxAnimationId);
if (parallaxAnimationId.value) {
window.cancelAnimationFrame(parallaxAnimationId.value);
}
});
</script>

12
packages/frontend/src/pages/user/index.activity.vue
View file

@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { } from 'vue';
import { ref } from 'vue';
import * as Misskey from 'misskey-js';
import MkContainer from '@/components/MkContainer.vue';
import MkChart from '@/components/MkChart.vue';
@ -34,20 +34,20 @@ const props = withDefaults(defineProps<{
limit: 50,
});
let chartSrc = $ref('per-user-notes');
const chartSrc = ref('per-user-notes');
function showMenu(ev: MouseEvent) {
os.popupMenu([{
text: i18n.ts.notes,
active: chartSrc === 'per-user-notes',
active: chartSrc.value === 'per-user-notes',
action: () => {
chartSrc = 'per-user-notes';
chartSrc.value = 'per-user-notes';
},
}, {
text: i18n.ts.numberOfProfileView,
active: chartSrc === 'per-user-pv',
active: chartSrc.value === 'per-user-pv',
action: () => {
chartSrc = 'per-user-pv';
chartSrc.value = 'per-user-pv';
},
}, /*, {
text: i18n.ts.following,

12
packages/frontend/src/pages/user/index.files.vue
View file

@ -33,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import { onMounted, ref } from 'vue';
import * as Misskey from 'misskey-js';
import { getStaticImageUrl } from '@/scripts/media-proxy.js';
import { notePage } from '@/filters/note.js';
@ -47,12 +47,12 @@ const props = defineProps<{
user: Misskey.entities.UserDetailed;
}>();
let fetching = $ref(true);
let files = $ref<{
const fetching = ref(true);
const files = ref<{
note: Misskey.entities.Note;
file: Misskey.entities.DriveFile;
}[]>([]);
let showingFiles = $ref<string[]>([]);
const showingFiles = ref<string[]>([]);
function thumbnail(image: Misskey.entities.DriveFile): string {
return defaultStore.state.disableShowingAnimatedImages
@ -68,13 +68,13 @@ onMounted(() => {
}).then(notes => {
for (const note of notes) {
for (const file of note.files) {
files.push({
files.value.push({
note,
file,
});
}
}
fetching = false;
fetching.value = false;
});
});
</script>

36
packages/frontend/src/pages/user/index.vue
View file

@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { defineAsyncComponent, computed, watch } from 'vue';
import { defineAsyncComponent, computed, watch, ref } from 'vue';
import * as Misskey from 'misskey-js';
import { acct as getAcct } from '@/filters/user.js';
import * as os from '@/os.js';
@ -54,17 +54,17 @@ const props = withDefaults(defineProps<{
page: 'home',
});
let tab = $ref(props.page);
let user = $ref<null | Misskey.entities.UserDetailed>(null);
let error = $ref(null);
const tab = ref(props.page);
const user = ref<null | Misskey.entities.UserDetailed>(null);
const error = ref(null);
function fetchUser(): void {
if (props.acct == null) return;
user = null;
user.value = null;
os.api('users/show', Misskey.acct.parse(props.acct)).then(u => {
user = u;
user.value = u;
}).catch(err => {
error = err;
error.value = err;
});
}
@ -72,9 +72,9 @@ watch(() => props.acct, fetchUser, {
immediate: true,
});
const headerActions = $computed(() => []);
const headerActions = computed(() => []);
const headerTabs = $computed(() => user ? [{
const headerTabs = computed(() => user.value ? [{
key: 'home',
title: i18n.ts.overview,
icon: 'ti ti-home',
@ -86,11 +86,11 @@ const headerTabs = $computed(() => user ? [{
key: 'activity',
title: i18n.ts.activity,
icon: 'ti ti-chart-line',
}, ...(user.host == null ? [{
}, ...(user.value.host == null ? [{
key: 'achievements',
title: i18n.ts.achievements,
icon: 'ti ti-medal',
}] : []), ...($i && ($i.id === user.id)) || user.publicReactions ? [{
}] : []), ...($i && ($i.id === user.value.id)) || user.value.publicReactions ? [{
key: 'reactions',
title: i18n.ts.reaction,
icon: 'ti ti-mood-happy',
@ -120,15 +120,15 @@ const headerTabs = $computed(() => user ? [{
icon: 'ti ti-code',
}] : []);
definePageMetadata(computed(() => user ? {
definePageMetadata(computed(() => user.value ? {
icon: 'ti ti-user',
title: user.name ? `${user.name} (@${user.username})` : `@${user.username}`,
subtitle: `@${getAcct(user)}`,
userName: user,
avatar: user,
path: `/@${user.username}`,
title: user.value.name ? `${user.value.name} (@${user.value.username})` : `@${user.value.username}`,
subtitle: `@${getAcct(user.value)}`,
userName: user.value,
avatar: user.value,
path: `/@${user.value.username}`,
share: {
title: user.name,
title: user.value.name,
},
} : null));
</script>