refactor(frontend): 非推奨となったReactivity Transformを使わないように (#12539)
* 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
@@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import * as os from '@/os.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
@@ -363,79 +363,79 @@ const props = defineProps<{
|
||||
id?: string;
|
||||
}>();
|
||||
|
||||
let flash = $ref(null);
|
||||
let visibility = $ref('public');
|
||||
const flash = ref(null);
|
||||
const visibility = ref('public');
|
||||
|
||||
if (props.id) {
|
||||
flash = await os.api('flash/show', {
|
||||
flash.value = await os.api('flash/show', {
|
||||
flashId: props.id,
|
||||
});
|
||||
}
|
||||
|
||||
let title = $ref(flash?.title ?? 'New Play');
|
||||
let summary = $ref(flash?.summary ?? '');
|
||||
let permissions = $ref(flash?.permissions ?? []);
|
||||
let script = $ref(flash?.script ?? PRESET_DEFAULT);
|
||||
const title = ref(flash.value?.title ?? 'New Play');
|
||||
const summary = ref(flash.value?.summary ?? '');
|
||||
const permissions = ref(flash.value?.permissions ?? []);
|
||||
const script = ref(flash.value?.script ?? PRESET_DEFAULT);
|
||||
|
||||
function selectPreset(ev: MouseEvent) {
|
||||
os.popupMenu([{
|
||||
text: 'Omikuji',
|
||||
action: () => {
|
||||
script = PRESET_OMIKUJI;
|
||||
script.value = PRESET_OMIKUJI;
|
||||
},
|
||||
}, {
|
||||
text: 'Shuffle',
|
||||
action: () => {
|
||||
script = PRESET_SHUFFLE;
|
||||
script.value = PRESET_SHUFFLE;
|
||||
},
|
||||
}, {
|
||||
text: 'Quiz',
|
||||
action: () => {
|
||||
script = PRESET_QUIZ;
|
||||
script.value = PRESET_QUIZ;
|
||||
},
|
||||
}, {
|
||||
text: 'Timeline viewer',
|
||||
action: () => {
|
||||
script = PRESET_TIMELINE;
|
||||
script.value = PRESET_TIMELINE;
|
||||
},
|
||||
}], ev.currentTarget ?? ev.target);
|
||||
}
|
||||
|
||||
async function save() {
|
||||
if (flash) {
|
||||
if (flash.value) {
|
||||
os.apiWithDialog('flash/update', {
|
||||
flashId: props.id,
|
||||
title,
|
||||
summary,
|
||||
permissions,
|
||||
script,
|
||||
visibility,
|
||||
title: title.value,
|
||||
summary: summary.value,
|
||||
permissions: permissions.value,
|
||||
script: script.value,
|
||||
visibility: visibility.value,
|
||||
});
|
||||
} else {
|
||||
const created = await os.apiWithDialog('flash/create', {
|
||||
title,
|
||||
summary,
|
||||
permissions,
|
||||
script,
|
||||
title: title.value,
|
||||
summary: summary.value,
|
||||
permissions: permissions.value,
|
||||
script: script.value,
|
||||
});
|
||||
router.push('/play/' + created.id + '/edit');
|
||||
}
|
||||
}
|
||||
|
||||
function show() {
|
||||
if (flash == null) {
|
||||
if (flash.value == null) {
|
||||
os.alert({
|
||||
text: 'Please save',
|
||||
});
|
||||
} else {
|
||||
os.pageWindow(`/play/${flash.id}`);
|
||||
os.pageWindow(`/play/${flash.value.id}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function del() {
|
||||
const { canceled } = await os.confirm({
|
||||
type: 'warning',
|
||||
text: i18n.t('deleteAreYouSure', { x: flash.title }),
|
||||
text: i18n.t('deleteAreYouSure', { x: flash.value.title }),
|
||||
});
|
||||
if (canceled) return;
|
||||
|
||||
@@ -445,12 +445,12 @@ async function del() {
|
||||
router.push('/play');
|
||||
}
|
||||
|
||||
const headerActions = $computed(() => []);
|
||||
const headerActions = computed(() => []);
|
||||
|
||||
const headerTabs = $computed(() => []);
|
||||
const headerTabs = computed(() => []);
|
||||
|
||||
definePageMetadata(computed(() => flash ? {
|
||||
title: i18n.ts._play.edit + ': ' + flash.title,
|
||||
definePageMetadata(computed(() => flash.value ? {
|
||||
title: i18n.ts._play.edit + ': ' + flash.value.title,
|
||||
} : {
|
||||
title: i18n.ts._play.new,
|
||||
}));
|
||||
|
||||
@@ -38,7 +38,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import MkFlashPreview from '@/components/MkFlashPreview.vue';
|
||||
import MkPagination from '@/components/MkPagination.vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
@@ -48,7 +48,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
let tab = $ref('featured');
|
||||
const tab = ref('featured');
|
||||
|
||||
const featuredFlashsPagination = {
|
||||
endpoint: 'flash/featured' as const,
|
||||
@@ -67,13 +67,13 @@ function create() {
|
||||
router.push('/play/new');
|
||||
}
|
||||
|
||||
const headerActions = $computed(() => [{
|
||||
const headerActions = computed(() => [{
|
||||
icon: 'ti ti-plus',
|
||||
text: i18n.ts.create,
|
||||
handler: create,
|
||||
}]);
|
||||
|
||||
const headerTabs = $computed(() => [{
|
||||
const headerTabs = computed(() => [{
|
||||
key: 'featured',
|
||||
title: i18n.ts._play.featured,
|
||||
icon: 'ti ti-flare',
|
||||
|
||||
@@ -57,7 +57,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onDeactivated, onUnmounted, Ref, ref, watch } from 'vue';
|
||||
import { computed, onDeactivated, onUnmounted, Ref, ref, watch, shallowRef } from 'vue';
|
||||
import { Interpreter, Parser, values } from '@syuilo/aiscript';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import * as os from '@/os.js';
|
||||
@@ -78,45 +78,45 @@ const props = defineProps<{
|
||||
id: string;
|
||||
}>();
|
||||
|
||||
let flash = $ref(null);
|
||||
let error = $ref(null);
|
||||
const flash = ref(null);
|
||||
const error = ref(null);
|
||||
|
||||
function fetchFlash() {
|
||||
flash = null;
|
||||
flash.value = null;
|
||||
os.api('flash/show', {
|
||||
flashId: props.id,
|
||||
}).then(_flash => {
|
||||
flash = _flash;
|
||||
flash.value = _flash;
|
||||
}).catch(err => {
|
||||
error = err;
|
||||
error.value = err;
|
||||
});
|
||||
}
|
||||
|
||||
function copyLink() {
|
||||
copyToClipboard(`${url}/play/${flash.id}`);
|
||||
copyToClipboard(`${url}/play/${flash.value.id}`);
|
||||
os.success();
|
||||
}
|
||||
|
||||
function share() {
|
||||
navigator.share({
|
||||
title: flash.title,
|
||||
text: flash.summary,
|
||||
url: `${url}/play/${flash.id}`,
|
||||
title: flash.value.title,
|
||||
text: flash.value.summary,
|
||||
url: `${url}/play/${flash.value.id}`,
|
||||
});
|
||||
}
|
||||
|
||||
function shareWithNote() {
|
||||
os.post({
|
||||
initialText: `${flash.title} ${url}/play/${flash.id}`,
|
||||
initialText: `${flash.value.title} ${url}/play/${flash.value.id}`,
|
||||
});
|
||||
}
|
||||
|
||||
function like() {
|
||||
os.apiWithDialog('flash/like', {
|
||||
flashId: flash.id,
|
||||
flashId: flash.value.id,
|
||||
}).then(() => {
|
||||
flash.isLiked = true;
|
||||
flash.likedCount++;
|
||||
flash.value.isLiked = true;
|
||||
flash.value.likedCount++;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -127,10 +127,10 @@ async function unlike() {
|
||||
});
|
||||
if (confirm.canceled) return;
|
||||
os.apiWithDialog('flash/unlike', {
|
||||
flashId: flash.id,
|
||||
flashId: flash.value.id,
|
||||
}).then(() => {
|
||||
flash.isLiked = false;
|
||||
flash.likedCount--;
|
||||
flash.value.isLiked = false;
|
||||
flash.value.likedCount--;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -138,28 +138,28 @@ watch(() => props.id, fetchFlash, { immediate: true });
|
||||
|
||||
const parser = new Parser();
|
||||
|
||||
let started = $ref(false);
|
||||
let aiscript = $shallowRef<Interpreter | null>(null);
|
||||
const started = ref(false);
|
||||
const aiscript = shallowRef<Interpreter | null>(null);
|
||||
const root = ref<AsUiRoot>();
|
||||
const components: Ref<AsUiComponent>[] = $ref([]);
|
||||
const components = ref<Ref<AsUiComponent>[]>([]);
|
||||
|
||||
function start() {
|
||||
started = true;
|
||||
started.value = true;
|
||||
run();
|
||||
}
|
||||
|
||||
async function run() {
|
||||
if (aiscript) aiscript.abort();
|
||||
if (aiscript.value) aiscript.value.abort();
|
||||
|
||||
aiscript = new Interpreter({
|
||||
aiscript.value = new Interpreter({
|
||||
...createAiScriptEnv({
|
||||
storageKey: 'flash:' + flash.id,
|
||||
storageKey: 'flash:' + flash.value.id,
|
||||
}),
|
||||
...registerAsUiLib(components, (_root) => {
|
||||
...registerAsUiLib(components.value, (_root) => {
|
||||
root.value = _root.value;
|
||||
}),
|
||||
THIS_ID: values.STR(flash.id),
|
||||
THIS_URL: values.STR(`${url}/play/${flash.id}`),
|
||||
THIS_ID: values.STR(flash.value.id),
|
||||
THIS_URL: values.STR(`${url}/play/${flash.value.id}`),
|
||||
}, {
|
||||
in: (q) => {
|
||||
return new Promise(ok => {
|
||||
@@ -184,7 +184,7 @@ async function run() {
|
||||
|
||||
let ast;
|
||||
try {
|
||||
ast = parser.parse(flash.script);
|
||||
ast = parser.parse(flash.value.script);
|
||||
} catch (err) {
|
||||
os.alert({
|
||||
type: 'error',
|
||||
@@ -193,7 +193,7 @@ async function run() {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await aiscript.exec(ast);
|
||||
await aiscript.value.exec(ast);
|
||||
} catch (err) {
|
||||
os.alert({
|
||||
type: 'error',
|
||||
@@ -204,24 +204,24 @@ async function run() {
|
||||
}
|
||||
|
||||
onDeactivated(() => {
|
||||
if (aiscript) aiscript.abort();
|
||||
if (aiscript.value) aiscript.value.abort();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (aiscript) aiscript.abort();
|
||||
if (aiscript.value) aiscript.value.abort();
|
||||
});
|
||||
|
||||
const headerActions = $computed(() => []);
|
||||
const headerActions = computed(() => []);
|
||||
|
||||
const headerTabs = $computed(() => []);
|
||||
const headerTabs = computed(() => []);
|
||||
|
||||
definePageMetadata(computed(() => flash ? {
|
||||
title: flash.title,
|
||||
avatar: flash.user,
|
||||
path: `/play/${flash.id}`,
|
||||
definePageMetadata(computed(() => flash.value ? {
|
||||
title: flash.value.title,
|
||||
avatar: flash.value.user,
|
||||
path: `/play/${flash.value.id}`,
|
||||
share: {
|
||||
title: flash.title,
|
||||
text: flash.summary,
|
||||
title: flash.value.title,
|
||||
text: flash.value.summary,
|
||||
},
|
||||
} : null));
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user