refactoring

Resolve #7779

17 files changed, 0 insertions, 948 deletions

diff --git a/src/client/components/page/page.block.vue b/src/client/components/page/page.block.vue
deleted file mode 100644
index ffd9ce89f9..0000000000
--- a/src/client/components/page/page.block.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-<component :is="'x-' + block.type" :block="block" :hpml="hpml" :key="block.id" :h="h"/>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import XText from './page.text.vue';
-import XSection from './page.section.vue';
-import XImage from './page.image.vue';
-import XButton from './page.button.vue';
-import XNumberInput from './page.number-input.vue';
-import XTextInput from './page.text-input.vue';
-import XTextareaInput from './page.textarea-input.vue';
-import XSwitch from './page.switch.vue';
-import XIf from './page.if.vue';
-import XTextarea from './page.textarea.vue';
-import XPost from './page.post.vue';
-import XCounter from './page.counter.vue';
-import XRadioButton from './page.radio-button.vue';
-import XCanvas from './page.canvas.vue';
-import XNote from './page.note.vue';
-import { Hpml } from '@client/scripts/hpml/evaluator';
-import { Block } from '@client/scripts/hpml/block';
-
-export default defineComponent({
-	components: {
-		XText, XSection, XImage, XButton, XNumberInput, XTextInput, XTextareaInput, XTextarea, XPost, XSwitch, XIf, XCounter, XRadioButton, XCanvas, XNote
-	},
-	props: {
-		block: {
-			type: Object as PropType<Block>,
-			required: true
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true
-		},
-		h: {
-			type: Number,
-			required: true
-		}
-	},
-});
-</script>
diff --git a/src/client/components/page/page.button.vue b/src/client/components/page/page.button.vue
deleted file mode 100644
index c6ae675212..0000000000
--- a/src/client/components/page/page.button.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-<div>
-	<MkButton class="kudkigyw" @click="click()" :primary="block.primary">{{ hpml.interpolate(block.text) }}</MkButton>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType, unref } from 'vue';
-import MkButton from '../ui/button.vue';
-import * as os from '@client/os';
-import { ButtonBlock } from '@client/scripts/hpml/block';
-import { Hpml } from '@client/scripts/hpml/evaluator';
-
-export default defineComponent({
-	components: {
-		MkButton
-	},
-	props: {
-		block: {
-			type: Object as PropType<ButtonBlock>,
-			required: true
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true
-		}
-	},
-	methods: {
-		click() {
-			if (this.block.action === 'dialog') {
-				this.hpml.eval();
-				os.dialog({
-					text: this.hpml.interpolate(this.block.content)
-				});
-			} else if (this.block.action === 'resetRandom') {
-				this.hpml.updateRandomSeed(Math.random());
-				this.hpml.eval();
-			} else if (this.block.action === 'pushEvent') {
-				os.api('page-push', {
-					pageId: this.hpml.page.id,
-					event: this.block.event,
-					...(this.block.var ? {
-						var: unref(this.hpml.vars)[this.block.var]
-					} : {})
-				});
-
-				os.dialog({
-					type: 'success',
-					text: this.hpml.interpolate(this.block.message)
-				});
-			} else if (this.block.action === 'callAiScript') {
-				this.hpml.callAiScript(this.block.fn);
-			}
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.kudkigyw {
-	display: inline-block;
-	min-width: 200px;
-	max-width: 450px;
-	margin: 8px 0;
-}
-</style>
diff --git a/src/client/components/page/page.canvas.vue b/src/client/components/page/page.canvas.vue
deleted file mode 100644
index e26db597f2..0000000000
--- a/src/client/components/page/page.canvas.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-<div class="ysrxegms">
-	<canvas ref="canvas" :width="block.width" :height="block.height"/>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, onMounted, PropType, Ref, ref } from 'vue';
-import * as os from '@client/os';
-import { CanvasBlock } from '@client/scripts/hpml/block';
-import { Hpml } from '@client/scripts/hpml/evaluator';
-
-export default defineComponent({
-	props: {
-		block: {
-			type: Object as PropType<CanvasBlock>,
-			required: true
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true
-		}
-	},
-	setup(props, ctx) {
-		const canvas: Ref<any> = ref(null);
-
-		onMounted(() => {
-			props.hpml.registerCanvas(props.block.name, canvas.value);
-		});
-
-		return {
-			canvas
-		};
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.ysrxegms {
-	display: inline-block;
-	vertical-align: bottom;
-	overflow: auto;
-	max-width: 100%;
-
-	> canvas {
-		display: block;
-	}
-}
-</style>
diff --git a/src/client/components/page/page.counter.vue b/src/client/components/page/page.counter.vue
deleted file mode 100644
index dad7ac3da0..0000000000
--- a/src/client/components/page/page.counter.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-<div>
-	<MkButton class="llumlmnx" @click="click()">{{ hpml.interpolate(block.text) }}</MkButton>
-</div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkButton from '../ui/button.vue';
-import * as os from '@client/os';
-import { CounterVarBlock } from '@client/scripts/hpml/block';
-import { Hpml } from '@client/scripts/hpml/evaluator';
-
-export default defineComponent({
-	components: {
-		MkButton
-	},
-	props: {
-		block: {
-			type: Object as PropType<CounterVarBlock>,
-			required: true
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true
-		}
-	},
-	setup(props, ctx) {
-		const value = computed(() => {
-			return props.hpml.vars.value[props.block.name];
-		});
-
-		function click() {
-			props.hpml.updatePageVar(props.block.name, value.value + (props.block.inc || 1));
-			props.hpml.eval();
-		}
-
-		return {
-			click
-		};
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.llumlmnx {
-	display: inline-block;
-	min-width: 300px;
-	max-width: 450px;
-	margin: 8px 0;
-}
-</style>
diff --git a/src/client/components/page/page.if.vue b/src/client/components/page/page.if.vue
deleted file mode 100644
index a70525e07c..0000000000
--- a/src/client/components/page/page.if.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-<div v-show="hpml.vars.value[block.var]">
-	<XBlock v-for="child in block.children" :block="child" :hpml="hpml" :key="child.id" :h="h"/>
-</div>
-</template>
-
-<script lang="ts">
-import { IfBlock } from '@client/scripts/hpml/block';
-import { Hpml } from '@client/scripts/hpml/evaluator';
-import { defineComponent, defineAsyncComponent, PropType } from 'vue';
-
-export default defineComponent({
-	components: {
-		XBlock: defineAsyncComponent(() => import('./page.block.vue'))
-	},
-	props: {
-		block: {
-			type: Object as PropType<IfBlock>,
-			required: true
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true
-		},
-		h: {
-			type: Number,
-			required: true
-		}
-	},
-});
-</script>
diff --git a/src/client/components/page/page.image.vue b/src/client/components/page/page.image.vue
deleted file mode 100644
index 14dedc98a0..0000000000
--- a/src/client/components/page/page.image.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-<div class="lzyxtsnt">
-	<img v-if="image" :src="image.url"/>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import * as os from '@client/os';
-import { ImageBlock } from '@client/scripts/hpml/block';
-import { Hpml } from '@client/scripts/hpml/evaluator';
-
-export default defineComponent({
-	props: {
-		block: {
-			type: Object as PropType<ImageBlock>,
-			required: true
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true
-		}
-	},
-	setup(props, ctx) {
-		const image = props.hpml.page.attachedFiles.find(x => x.id === props.block.fileId);
-
-		return {
-			image
-		};
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.lzyxtsnt {
-	> img {
-		max-width: 100%;
-	}
-}
-</style>
diff --git a/src/client/components/page/page.note.vue b/src/client/components/page/page.note.vue
deleted file mode 100644
index 7a3f88bb1f..0000000000
--- a/src/client/components/page/page.note.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-<div class="voxdxuby">
-	<XNote v-if="note && !block.detailed" v-model:note="note" :key="note.id + ':normal'"/>
-	<XNoteDetailed v-if="note && block.detailed" v-model:note="note" :key="note.id + ':detail'"/>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, onMounted, PropType, Ref, ref } from 'vue';
-import XNote from '@client/components/note.vue';
-import XNoteDetailed from '@client/components/note-detailed.vue';
-import * as os from '@client/os';
-import { NoteBlock } from '@client/scripts/hpml/block';
-
-export default defineComponent({
-	components: {
-		XNote,
-		XNoteDetailed,
-	},
-	props: {
-		block: {
-			type: Object as PropType<NoteBlock>,
-			required: true
-		}
-	},
-	setup(props, ctx) {
-		const note: Ref<Record<string, any> | null> = ref(null);
-
-		onMounted(() => {
-			os.api('notes/show', { noteId: props.block.note })
-			.then(result => {
-				note.value = result;
-			});
-		});
-
-		return {
-			note
-		};
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.voxdxuby {
-	margin: 1em 0;
-}
-</style>
diff --git a/src/client/components/page/page.number-input.vue b/src/client/components/page/page.number-input.vue
deleted file mode 100644
index 5d9168f130..0000000000
--- a/src/client/components/page/page.number-input.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-<div>
-	<MkInput class="kudkigyw" :model-value="value" @update:modelValue="updateValue($event)" type="number">
-		<template #label>{{ hpml.interpolate(block.text) }}</template>
-	</MkInput>
-</div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkInput from '../form/input.vue';
-import * as os from '@client/os';
-import { Hpml } from '@client/scripts/hpml/evaluator';
-import { NumberInputVarBlock } from '@client/scripts/hpml/block';
-
-export default defineComponent({
-	components: {
-		MkInput
-	},
-	props: {
-		block: {
-			type: Object as PropType<NumberInputVarBlock>,
-			required: true
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true
-		}
-	},
-	setup(props, ctx) {
-		const value = computed(() => {
-			return props.hpml.vars.value[props.block.name];
-		});
-
-		function updateValue(newValue) {
-			props.hpml.updatePageVar(props.block.name, newValue);
-			props.hpml.eval();
-		}
-
-		return {
-			value,
-			updateValue
-		};
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.kudkigyw {
-	display: inline-block;
-	min-width: 300px;
-	max-width: 450px;
-	margin: 8px 0;
-}
-</style>
diff --git a/src/client/components/page/page.post.vue b/src/client/components/page/page.post.vue
deleted file mode 100644
index c20d7cade1..0000000000
--- a/src/client/components/page/page.post.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-<div class="ngbfujlo">
-	<MkTextarea :model-value="text" readonly style="margin: 0;"></MkTextarea>
-	<MkButton class="button" primary @click="post()" :disabled="posting || posted">
-		<i v-if="posted" class="fas fa-check"></i>
-		<i v-else class="fas fa-paper-plane"></i>
-	</MkButton>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import MkTextarea from '../form/textarea.vue';
-import MkButton from '../ui/button.vue';
-import { apiUrl } from '@client/config';
-import * as os from '@client/os';
-import { PostBlock } from '@client/scripts/hpml/block';
-import { Hpml } from '@client/scripts/hpml/evaluator';
-
-export default defineComponent({
-	components: {
-		MkTextarea,
-		MkButton,
-	},
-	props: {
-		block: {
-			type: Object as PropType<PostBlock>,
-			required: true
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true
-		}
-	},
-	data() {
-		return {
-			text: this.hpml.interpolate(this.block.text),
-			posted: false,
-			posting: false,
-		};
-	},
-	watch: {
-		'hpml.vars': {
-			handler() {
-				this.text = this.hpml.interpolate(this.block.text);
-			},
-			deep: true
-		}
-	},
-	methods: {
-		upload() {
-			const promise = new Promise((ok) => {
-				const canvas = this.hpml.canvases[this.block.canvasId];
-				canvas.toBlob(blob => {
-					const data = new FormData();
-					data.append('file', blob);
-					data.append('i', this.$i.token);
-					if (this.$store.state.uploadFolder) {
-						data.append('folderId', this.$store.state.uploadFolder);
-					}
-
-					fetch(apiUrl + '/drive/files/create', {
-						method: 'POST',
-						body: data
-					})
-					.then(response => response.json())
-					.then(f => {
-						ok(f);
-					})
-				});
-			});
-			os.promiseDialog(promise);
-			return promise;
-		},
-		async post() {
-			this.posting = true;
-			const file = this.block.attachCanvasImage ? await this.upload() : null;
-			os.apiWithDialog('notes/create', {
-				text: this.text === '' ? null : this.text,
-				fileIds: file ? [file.id] : undefined,
-			}).then(() => {
-				this.posted = true;
-			});
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.ngbfujlo {
-	position: relative;
-	padding: 32px;
-	border-radius: 6px;
-	box-shadow: 0 2px 8px var(--shadow);
-	z-index: 1;
-
-	> .button {
-		margin-top: 32px;
-	}
-
-	@media (max-width: 600px) {
-		padding: 16px;
-
-		> .button {
-			margin-top: 16px;
-		}
-	}
-}
-</style>
diff --git a/src/client/components/page/page.radio-button.vue b/src/client/components/page/page.radio-button.vue
deleted file mode 100644
index 590e59d706..0000000000
--- a/src/client/components/page/page.radio-button.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-<div>
-	<div>{{ hpml.interpolate(block.title) }}</div>
-	<MkRadio v-for="item in block.values" :modelValue="value" @update:modelValue="updateValue($event)" :value="item" :key="item">{{ item }}</MkRadio>
-</div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkRadio from '../form/radio.vue';
-import * as os from '@client/os';
-import { Hpml } from '@client/scripts/hpml/evaluator';
-import { RadioButtonVarBlock } from '@client/scripts/hpml/block';
-
-export default defineComponent({
-	components: {
-		MkRadio
-	},
-	props: {
-		block: {
-			type: Object as PropType<RadioButtonVarBlock>,
-			required: true
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true
-		}
-	},
-	setup(props, ctx) {
-		const value = computed(() => {
-			return props.hpml.vars.value[props.block.name];
-		});
-
-		function updateValue(newValue: string) {
-			props.hpml.updatePageVar(props.block.name, newValue);
-			props.hpml.eval();
-		}
-
-		return {
-			value,
-			updateValue
-		};
-	}
-});
-</script>
diff --git a/src/client/components/page/page.section.vue b/src/client/components/page/page.section.vue
deleted file mode 100644
index 81cab12501..0000000000
--- a/src/client/components/page/page.section.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-<section class="sdgxphyu">
-	<component :is="'h' + h">{{ block.title }}</component>
-
-	<div class="children">
-		<XBlock v-for="child in block.children" :block="child" :hpml="hpml" :key="child.id" :h="h + 1"/>
-	</div>
-</section>
-</template>
-
-<script lang="ts">
-import { defineComponent, defineAsyncComponent, PropType } from 'vue';
-import * as os from '@client/os';
-import { SectionBlock } from '@client/scripts/hpml/block';
-import { Hpml } from '@client/scripts/hpml/evaluator';
-
-export default defineComponent({
-	components: {
-		XBlock: defineAsyncComponent(() => import('./page.block.vue'))
-	},
-	props: {
-		block: {
-			type: Object as PropType<SectionBlock>,
-			required: true
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true
-		},
-		h: {
-			required: true
-		}
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.sdgxphyu {
-	margin: 1.5em 0;
-
-	> h2 {
-		font-size: 1.35em;
-		margin: 0 0 0.5em 0;
-	}
-
-	> h3 {
-		font-size: 1em;
-		margin: 0 0 0.5em 0;
-	}
-
-	> h4 {
-		font-size: 1em;
-		margin: 0 0 0.5em 0;
-	}
-
-	> .children {
-		//padding 16px
-	}
-}
-</style>
diff --git a/src/client/components/page/page.switch.vue b/src/client/components/page/page.switch.vue
deleted file mode 100644
index 4d74e5df39..0000000000
--- a/src/client/components/page/page.switch.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-<div class="hkcxmtwj">
-	<MkSwitch :model-value="value" @update:modelValue="updateValue($event)">{{ hpml.interpolate(block.text) }}</MkSwitch>
-</div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkSwitch from '../form/switch.vue';
-import * as os from '@client/os';
-import { Hpml } from '@client/scripts/hpml/evaluator';
-import { SwitchVarBlock } from '@client/scripts/hpml/block';
-
-export default defineComponent({
-	components: {
-		MkSwitch
-	},
-	props: {
-		block: {
-			type: Object as PropType<SwitchVarBlock>,
-			required: true
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true
-		}
-	},
-	setup(props, ctx) {
-		const value = computed(() => {
-			return props.hpml.vars.value[props.block.name];
-		});
-
-		function updateValue(newValue: boolean) {
-			props.hpml.updatePageVar(props.block.name, newValue);
-			props.hpml.eval();
-		}
-
-		return {
-			value,
-			updateValue
-		};
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.hkcxmtwj {
-	display: inline-block;
-	margin: 16px auto;
-
-	& + .hkcxmtwj {
-		margin-left: 16px;
-	}
-}
-</style>
diff --git a/src/client/components/page/page.text-input.vue b/src/client/components/page/page.text-input.vue
deleted file mode 100644
index 6e9ac0b543..0000000000
--- a/src/client/components/page/page.text-input.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-<div>
-	<MkInput class="kudkigyw" :model-value="value" @update:modelValue="updateValue($event)" type="text">
-		<template #label>{{ hpml.interpolate(block.text) }}</template>
-	</MkInput>
-</div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkInput from '../form/input.vue';
-import * as os from '@client/os';
-import { Hpml } from '@client/scripts/hpml/evaluator';
-import { TextInputVarBlock } from '@client/scripts/hpml/block';
-
-export default defineComponent({
-	components: {
-		MkInput
-	},
-	props: {
-		block: {
-			type: Object as PropType<TextInputVarBlock>,
-			required: true
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true
-		}
-	},
-	setup(props, ctx) {
-		const value = computed(() => {
-			return props.hpml.vars.value[props.block.name];
-		});
-
-		function updateValue(newValue) {
-			props.hpml.updatePageVar(props.block.name, newValue);
-			props.hpml.eval();
-		}
-
-		return {
-			value,
-			updateValue
-		};
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.kudkigyw {
-	display: inline-block;
-	min-width: 300px;
-	max-width: 450px;
-	margin: 8px 0;
-}
-</style>
diff --git a/src/client/components/page/page.text.vue b/src/client/components/page/page.text.vue
deleted file mode 100644
index 580c5a93bf..0000000000
--- a/src/client/components/page/page.text.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-<div class="mrdgzndn">
-	<Mfm :text="text" :is-note="false" :i="$i" :key="text"/>
-	<MkUrlPreview v-for="url in urls" :url="url" :key="url" class="url"/>
-</div>
-</template>
-
-<script lang="ts">
-import { TextBlock } from '@client/scripts/hpml/block';
-import { Hpml } from '@client/scripts/hpml/evaluator';
-import { defineAsyncComponent, defineComponent, PropType } from 'vue';
-import * as mfm from 'mfm-js';
-import { extractUrlFromMfm } from '@/misc/extract-url-from-mfm';
-
-export default defineComponent({
-	components: {
-		MkUrlPreview: defineAsyncComponent(() => import('@client/components/url-preview.vue')),
-	},
-	props: {
-		block: {
-			type: Object as PropType<TextBlock>,
-			required: true
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true
-		}
-	},
-	data() {
-		return {
-			text: this.hpml.interpolate(this.block.text),
-		};
-	},
-	computed: {
-		urls(): string[] {
-			if (this.text) {
-				return extractUrlFromMfm(mfm.parse(this.text));
-			} else {
-				return [];
-			}
-		}
-	},
-	watch: {
-		'hpml.vars': {
-			handler() {
-				this.text = this.hpml.interpolate(this.block.text);
-			},
-			deep: true
-		}
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.mrdgzndn {
-	&:not(:first-child) {
-		margin-top: 0.5em;
-	}
-
-	&:not(:last-child) {
-		margin-bottom: 0.5em;
-	}
-
-	> .url {
-		margin: 0.5em 0;
-	}
-}
-</style>
diff --git a/src/client/components/page/page.textarea-input.vue b/src/client/components/page/page.textarea-input.vue
deleted file mode 100644
index dfcb398937..0000000000
--- a/src/client/components/page/page.textarea-input.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-<div>
-	<MkTextarea :model-value="value" @update:modelValue="updateValue($event)">
-		<template #label>{{ hpml.interpolate(block.text) }}</template>
-	</MkTextarea>
-</div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkTextarea from '../form/textarea.vue';
-import * as os from '@client/os';
-import { Hpml } from '@client/scripts/hpml/evaluator';
-import { HpmlTextInput } from '@client/scripts/hpml';
-import { TextInputVarBlock } from '@client/scripts/hpml/block';
-
-export default defineComponent({
-	components: {
-		MkTextarea
-	},
-	props: {
-		block: {
-			type: Object as PropType<TextInputVarBlock>,
-			required: true
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true
-		}
-	},
-	setup(props, ctx) {
-		const value = computed(() => {
-			return props.hpml.vars.value[props.block.name];
-		});
-
-		function updateValue(newValue) {
-			props.hpml.updatePageVar(props.block.name, newValue);
-			props.hpml.eval();
-		}
-
-		return {
-			value,
-			updateValue
-		};
-	}
-});
-</script>
diff --git a/src/client/components/page/page.textarea.vue b/src/client/components/page/page.textarea.vue
deleted file mode 100644
index cf953bf041..0000000000
--- a/src/client/components/page/page.textarea.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-<MkTextarea :model-value="text" readonly></MkTextarea>
-</template>
-
-<script lang="ts">
-import { TextBlock } from '@client/scripts/hpml/block';
-import { Hpml } from '@client/scripts/hpml/evaluator';
-import { defineComponent, PropType } from 'vue';
-import MkTextarea from '../form/textarea.vue';
-
-export default defineComponent({
-	components: {
-		MkTextarea
-	},
-	props: {
-		block: {
-			type: Object as PropType<TextBlock>,
-			required: true
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true
-		}
-	},
-	data() {
-		return {
-			text: this.hpml.interpolate(this.block.text),
-		};
-	},
-	watch: {
-		'hpml.vars': {
-			handler() {
-				this.text = this.hpml.interpolate(this.block.text);
-			},
-			deep: true
-		}
-	}
-});
-</script>
diff --git a/src/client/components/page/page.vue b/src/client/components/page/page.vue
deleted file mode 100644
index f125365c3d..0000000000
--- a/src/client/components/page/page.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-<div class="iroscrza" :class="{ center: page.alignCenter, serif: page.font === 'serif' }" v-if="hpml">
-	<XBlock v-for="child in page.content" :block="child" :hpml="hpml" :key="child.id" :h="2"/>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, onMounted, nextTick, onUnmounted, PropType } from 'vue';
-import { parse } from '@syuilo/aiscript';
-import XBlock from './page.block.vue';
-import { Hpml } from '@client/scripts/hpml/evaluator';
-import { url } from '@client/config';
-import { $i } from '@client/account';
-import { defaultStore } from '@client/store';
-
-export default defineComponent({
-	components: {
-		XBlock
-	},
-	props: {
-		page: {
-			type: Object as PropType<Record<string, any>>,
-			required: true
-		},
-	},
-	setup(props, ctx) {
-
-		const hpml = new Hpml(props.page, {
-			randomSeed: Math.random(),
-			visitor: $i,
-			url: url,
-			enableAiScript: !defaultStore.state.disablePagesScript
-		});
-
-		onMounted(() => {
-			nextTick(() => {
-				if (props.page.script && hpml.aiscript) {
-					let ast;
-					try {
-						ast = parse(props.page.script);
-					} catch (e) {
-						console.error(e);
-						/*os.dialog({
-							type: 'error',
-							text: 'Syntax error :('
-						});*/
-						return;
-					}
-					hpml.aiscript.exec(ast).then(() => {
-						hpml.eval();
-					}).catch(e => {
-						console.error(e);
-						/*os.dialog({
-							type: 'error',
-							text: e
-						});*/
-					});
-				} else {
-					hpml.eval();
-				}
-			});
-			onUnmounted(() => {
-				if (hpml.aiscript) hpml.aiscript.abort();
-			});
-		});
-
-		return {
-			hpml,
-		};
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.iroscrza {
-	&.serif {
-		> div {
-			font-family: serif;
-		}
-	}
-
-	&.center {
-		text-align: center;
-	}
-}
-</style>