@waline/client 1.6.0 → 2.0.0-alpha.2

package/src/components/CommentCard.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="wl-item" :id="comment.objectId">
+    <div class="wl-user" aria-hidden="true">
+      <img v-if="comment.avatar" :src="comment.avatar" />
+      <VerifiedIcon v-if="comment.type" />
+    </div>
+
+    <div class="wl-card">
+      <div class="wl-head">
+        <a
+          v-if="link"
+          class="wl-nick"
+          :href="link"
+          target="_blank"
+          rel="nofollow noreferrer"
+          >{{ comment.nick }}</a
+        >
+        <span v-else class="wl-nick">{{ comment.nick }}</span>
+
+        <span
+          v-if="comment.type === 'administrator'"
+          class="wl-badge"
+          v-text="locale.admin"
+        />
+        <span v-if="comment.sticky" class="wl-badge" v-text="locale.sticky" />
+
+        <span class="wl-time" v-text="timeAgo(comment.insertedAt, locale)" />
+
+        <button
+          class="wl-reply"
+          :class="{ active: isReplyingCurrent }"
+          :title="isReplyingCurrent ? locale.cancelReply : locale.reply"
+          @click="$emit('reply', isReplyingCurrent ? null : comment)"
+        >
+          <ReplyIcon />
+        </button>
+      </div>
+      <div class="wl-meta" aria-hidden="true">
+        <span v-if="comment.browser" v-text="comment.browser" />
+        <span v-if="comment.os" v-text="comment.os" />
+      </div>
+      <div class="wl-content" v-html="comment.comment" />
+
+      <div v-if="isReplyingCurrent" class="wl-reply-wrapper">
+        <CommentBox
+          :replyId="comment.objectId"
+          :replyUser="comment.nick"
+          :rootId="rootId"
+          @submit="$emit('submit', $event)"
+          @cancel-reply="$emit('reply', null)"
+        />
+      </div>
+      <div v-if="comment.children" class="wl-quote">
+        <CommentCard
+          v-for="child in comment.children"
+          :key="child.objectId"
+          :comment="child"
+          :reply="reply"
+          :rootId="rootId"
+          @reply="$emit('reply', $event)"
+          @submit="$emit('submit', $event)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject } from 'vue';
+import CommentBox from './CommentBox.vue';
+import { ReplyIcon, VerifiedIcon } from './Icons';
+import { isLinkHttp, timeAgo } from '../utils';
+
+import type { ComputedRef, PropType } from 'vue';
+import type { Config } from '../utils';
+import type { WalineComment } from '../typings';
+
+export default defineComponent({
+  props: {
+    comment: {
+      type: Object as PropType<WalineComment>,
+      required: true,
+    },
+    rootId: {
+      type: String,
+      required: true,
+    },
+    reply: {
+      type: Object as PropType<WalineComment | null>,
+    },
+  },
+
+  components: {
+    CommentBox,
+    ReplyIcon,
+    VerifiedIcon,
+  },
+
+  emits: ['submit', 'reply'],
+
+  setup(props) {
+    const config = inject<ComputedRef<Config>>('config') as ComputedRef<Config>;
+    const locale = computed(() => config.value.locale);
+
+    const link = computed(() => {
+      let { link } = props.comment;
+
+      return link ? (isLinkHttp(link) ? link : `https://${link}`) : '';
+    });
+
+    const isReplyingCurrent = computed(
+      () => props.comment.objectId === props.reply?.objectId
+    );
+
+    return {
+      config,
+      locale,
+
+      isReplyingCurrent,
+      link,
+      timeAgo,
+    };
+  },
+});
+</script>

package/src/components/Icons.ts

@@ -0,0 +1,124 @@
+import { h } from 'vue';
+import type { FunctionalComponent } from 'vue';
+
+export const CloseIcon: FunctionalComponent<{ size: number }> = ({ size }) =>
+  h(
+    'svg',
+    {
+      class: 'vclose-icon',
+      viewBox: '0 0 1024 1024',
+      width: size,
+      height: size,
+    },
+    [
+      h('path', {
+        d: 'M697.173 85.333h-369.92c-144.64 0-241.92 101.547-241.92 252.587v348.587c0 150.613 97.28 252.16 241.92 252.16h369.92c144.64 0 241.494-101.547 241.494-252.16V337.92c0-151.04-96.854-252.587-241.494-252.587z',
+        fill: 'currentColor',
+      }),
+      h('path', {
+        d: 'm640.683 587.52-75.947-75.861 75.904-75.862a37.29 37.29 0 0 0 0-52.778 37.205 37.205 0 0 0-52.779 0l-75.946 75.818-75.862-75.946a37.419 37.419 0 0 0-52.821 0 37.419 37.419 0 0 0 0 52.821l75.947 75.947-75.776 75.733a37.29 37.29 0 1 0 52.778 52.821l75.776-75.776 75.947 75.947a37.376 37.376 0 0 0 52.779-52.821z',
+        fill: '#888',
+      }),
+    ]
+  );
+
+export const EmojiIcon: FunctionalComponent = () =>
+  h(
+    'svg',
+    { viewBox: '0 0 1024 1024', width: '24', height: '24' },
+    h('path', {
+      d: 'M563.2 463.3 677 540c1.7 1.2 3.7 1.8 5.8 1.8.7 0 1.4-.1 2-.2 2.7-.5 5.1-2.1 6.6-4.4l25.3-37.8c1.5-2.3 2.1-5.1 1.6-7.8s-2.1-5.1-4.4-6.6l-73.6-49.1 73.6-49.1c2.3-1.5 3.9-3.9 4.4-6.6.5-2.7 0-5.5-1.6-7.8l-25.3-37.8a10.1 10.1 0 0 0-6.6-4.4c-.7-.1-1.3-.2-2-.2-2.1 0-4.1.6-5.8 1.8l-113.8 76.6c-9.2 6.2-14.7 16.4-14.7 27.5.1 11 5.5 21.3 14.7 27.4zM387 348.8h-45.5c-5.7 0-10.4 4.7-10.4 10.4v153.3c0 5.7 4.7 10.4 10.4 10.4H387c5.7 0 10.4-4.7 10.4-10.4V359.2c0-5.7-4.7-10.4-10.4-10.4zm333.8 241.3-41-20a10.3 10.3 0 0 0-8.1-.5c-2.6.9-4.8 2.9-5.9 5.4-30.1 64.9-93.1 109.1-164.4 115.2-5.7.5-9.9 5.5-9.5 11.2l3.9 45.5c.5 5.3 5 9.5 10.3 9.5h.9c94.8-8 178.5-66.5 218.6-152.7 2.4-5 .3-11.2-4.8-13.6zm186-186.1c-11.9-42-30.5-81.4-55.2-117.1-24.1-34.9-53.5-65.6-87.5-91.2-33.9-25.6-71.5-45.5-111.6-59.2-41.2-14-84.1-21.1-127.8-21.1h-1.2c-75.4 0-148.8 21.4-212.5 61.7-63.7 40.3-114.3 97.6-146.5 165.8-32.2 68.1-44.3 143.6-35.1 218.4 9.3 74.8 39.4 145 87.3 203.3.1.2.3.3.4.5l36.2 38.4c1.1 1.2 2.5 2.1 3.9 2.6 73.3 66.7 168.2 103.5 267.5 103.5 73.3 0 145.2-20.3 207.7-58.7 37.3-22.9 70.3-51.5 98.1-85 27.1-32.7 48.7-69.5 64.2-109.1 15.5-39.7 24.4-81.3 26.6-123.8 2.4-43.6-2.5-87-14.5-129zm-60.5 181.1c-8.3 37-22.8 72-43 104-19.7 31.1-44.3 58.6-73.1 81.7-28.8 23.1-61 41-95.7 53.4-35.6 12.7-72.9 19.1-110.9 19.1-82.6 0-161.7-30.6-222.8-86.2l-34.1-35.8c-23.9-29.3-42.4-62.2-55.1-97.7-12.4-34.7-18.8-71-19.2-107.9-.4-36.9 5.4-73.3 17.1-108.2 12-35.8 30-69.2 53.4-99.1 31.7-40.4 71.1-72 117.2-94.1 44.5-21.3 94-32.6 143.4-32.6 49.3 0 97 10.8 141.8 32 34.3 16.3 65.3 38.1 92 64.8 26.1 26 47.5 56 63.6 89.2 16.2 33.2 26.6 68.5 31 105.1 4.6 37.5 2.7 75.3-5.6 112.3z',
+      fill: 'currentColor',
+    })
+  );
+
+export const ImageIcon: FunctionalComponent = () =>
+  h('svg', { viewBox: '0 0 1024 1024', width: '24', height: '24' }, [
+    h('path', {
+      d: 'M784 112H240c-88 0-160 72-160 160v480c0 88 72 160 160 160h544c88 0 160-72 160-160V272c0-88-72-160-160-160zm96 640c0 52.8-43.2 96-96 96H240c-52.8 0-96-43.2-96-96V272c0-52.8 43.2-96 96-96h544c52.8 0 96 43.2 96 96v480z',
+      fill: 'currentColor',
+    }),
+    h('path', {
+      d: 'M352 480c52.8 0 96-43.2 96-96s-43.2-96-96-96-96 43.2-96 96 43.2 96 96 96zm0-128c17.6 0 32 14.4 32 32s-14.4 32-32 32-32-14.4-32-32 14.4-32 32-32zm462.4 379.2-3.2-3.2-177.6-177.6c-25.6-25.6-65.6-25.6-91.2 0l-80 80-36.8-36.8c-25.6-25.6-65.6-25.6-91.2 0L200 728c-4.8 6.4-8 14.4-8 24 0 17.6 14.4 32 32 32 9.6 0 16-3.2 22.4-9.6L380.8 640l134.4 134.4c6.4 6.4 14.4 9.6 24 9.6 17.6 0 32-14.4 32-32 0-9.6-4.8-17.6-9.6-24l-52.8-52.8 80-80L769.6 776c6.4 4.8 12.8 8 20.8 8 17.6 0 32-14.4 32-32 0-8-3.2-16-8-20.8z',
+      fill: 'currentColor',
+    }),
+  ]);
+
+export const PreviewIcon: FunctionalComponent = () =>
+  h('svg', { viewBox: '0 0 1024 1024', width: '24', height: '24' }, [
+    h('path', {
+      d: 'M710.816 654.301c70.323-96.639 61.084-230.578-23.705-314.843-46.098-46.098-107.183-71.109-172.28-71.109-65.008 0-126.092 25.444-172.28 71.109-45.227 46.098-70.756 107.183-70.756 172.106 0 64.923 25.444 126.007 71.194 172.106 46.099 46.098 107.184 71.109 172.28 71.109 51.414 0 100.648-16.212 142.824-47.404l126.53 126.006c7.058 7.06 16.297 10.979 26.406 10.979 10.105 0 19.343-3.919 26.402-10.979 14.467-14.467 14.467-38.172 0-52.723L710.816 654.301zm-315.107-23.265c-65.88-65.88-65.88-172.54 0-238.42 32.069-32.07 74.245-49.149 119.471-49.149 45.227 0 87.407 17.603 119.472 49.149 65.88 65.879 65.88 172.539 0 238.42-63.612 63.178-175.242 63.178-238.943 0zm0 0',
+      fill: 'currentColor',
+    }),
+    h('path', {
+      d: 'M703.319 121.603H321.03c-109.8 0-199.469 89.146-199.469 199.38v382.034c0 109.796 89.236 199.38 199.469 199.38h207.397c20.653 0 37.384-16.645 37.384-37.299 0-20.649-16.731-37.296-37.384-37.296H321.03c-68.582 0-124.352-55.77-124.352-124.267V321.421c0-68.496 55.77-124.267 124.352-124.267h382.289c68.582 0 124.352 55.771 124.352 124.267V524.72c0 20.654 16.736 37.299 37.385 37.299 20.654 0 37.384-16.645 37.384-37.299V320.549c-.085-109.8-89.321-198.946-199.121-198.946zm0 0',
+      fill: 'currentColor',
+    }),
+  ]);
+
+export const MarkdownIcon: FunctionalComponent = () =>
+  h(
+    'svg',
+    { width: '16', height: '16', ariaHidden: 'true' },
+    h('path', {
+      d: 'M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z',
+      fill: 'currentColor',
+    })
+  );
+
+export const ReplyIcon: FunctionalComponent = () =>
+  h(
+    'svg',
+    { viewBox: '0 0 1024 1024', width: '18', height: '18' },
+    h('path', {
+      d: 'M1019.2 720C1001.6 625.6 968 566.4 904 497.6c-89.6-89.6-214.4-150.4-347.2-176v-120c0-25.6-8-51.2-25.6-64-33.6-30.4-81.6-30.4-112-4.8L33.6 441.6C12.8 459.2 0 484.8 0 510.4c0 25.6 12.8 51.2 30.4 68.8l385.6 312c17.6 12.8 33.6 17.6 51.2 17.6 12.8 0 25.6-4.8 38.4-8C536 888 552 857.6 552 824v-99.2c124.8 20.8 248 86.4 339.2 140.8 25.6 17.6 59.2 17.6 89.6 0 25.6-17.6 43.2-46.4 43.2-76.8 0-33.6 0-56-4.8-68.8zm-500.8-89.6-46.4-4.8v193.6L86.4 510.4 472 201.6V400l38.4 4.8c128 12.8 248 68.8 334.4 153.6 51.2 56 76.8 102.4 94.4 179.2 0 4.8 4.8 20.8 4.8 51.2C835.2 720 672 640 518.4 630.4z',
+      fill: 'currentColor',
+    })
+  );
+
+export const VerifiedIcon: FunctionalComponent = () =>
+  h(
+    'svg',
+    {
+      class: 'verified-icon',
+      viewBox: '0 0 1024 1024',
+      width: '14',
+      height: '14',
+    },
+    h('path', {
+      d: 'm894.4 461.56-54.4-63.2c-10.4-12-18.8-34.4-18.8-50.4v-68c0-42.4-34.8-77.2-77.2-77.2h-68c-15.6 0-38.4-8.4-50.4-18.8l-63.2-54.4c-27.6-23.6-72.8-23.6-100.8 0l-62.8 54.8c-12 10-34.8 18.4-50.4 18.4h-69.2c-42.4 0-77.2 34.8-77.2 77.2v68.4c0 15.6-8.4 38-18.4 50l-54 63.6c-23.2 27.6-23.2 72.4 0 100l54 63.6c10 12 18.4 34.4 18.4 50v68.4c0 42.4 34.8 77.2 77.2 77.2h69.2c15.6 0 38.4 8.4 50.4 18.8l63.2 54.4c27.6 23.6 72.8 23.6 100.8 0l63.2-54.4c12-10.4 34.4-18.8 50.4-18.8h68c42.4 0 77.2-34.8 77.2-77.2v-68c0-15.6 8.4-38.4 18.8-50.4l54.4-63.2c23.2-27.6 23.2-73.2-.4-100.8zm-216-25.2-193.2 193.2a30 30 0 0 1-42.4 0l-96.8-96.8a30.16 30.16 0 0 1 0-42.4c11.6-11.6 30.8-11.6 42.4 0l75.6 75.6 172-172c11.6-11.6 30.8-11.6 42.4 0 11.6 11.6 11.6 30.8 0 42.4z',
+      fill: '#27ae60',
+    })
+  );
+
+export const LoadingIcon: FunctionalComponent<{ size: number }> = ({ size }) =>
+  h(
+    'svg',
+    {
+      width: size,
+      height: size,
+      viewBox: '0 0 100 100',
+      preserveAspectRatio: 'xMidYMid',
+    },
+    h(
+      'circle',
+      {
+        cx: 50,
+        cy: 50,
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: '4',
+        r: '40',
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        'stroke-dasharray': '85 30',
+      },
+      h('animateTransform', {
+        attributeName: 'transform',
+        type: 'rotate',
+        repeatCount: 'indefinite',
+        dur: '1s',
+        values: '0 50 50;360 50 50',
+        keyTimes: '0;1',
+      })
+    )
+  );

package/src/components/Waline.vue

@@ -0,0 +1,359 @@
+<template>
+  <div data-waline>
+    <CommentBox v-if="!reply" @submit="onSubmit" />
+    <div class="wl-count">
+      <span v-if="count" class="wl-num" v-text="count" />
+      {{ i18n.comment }}
+    </div>
+
+    <div v-if="status === 'error'" class="wl-action">
+      <button
+        type="button"
+        class="wl-btn"
+        @click="refresh"
+        v-text="i18n.refresh"
+      />
+    </div>
+
+    <div v-else-if="status === 'loading'" class="wl-loading">
+      <LoadingIcon :size="30" />
+    </div>
+
+    <template v-else>
+      <div v-if="!data.length" class="wl-empty" v-text="i18n.sofa" />
+
+      <div v-else class="wl-cards">
+        <CommentCard
+          v-for="comment in data"
+          :key="comment.objectId"
+          :root-id="comment.objectId"
+          :comment="comment"
+          :reply="reply"
+          @reply="onReply"
+          @submit="onSubmit"
+        />
+      </div>
+
+      <!-- Load more button -->
+      <div v-if="page < totalPages" class="wl-more">
+        <button
+          type="button"
+          class="wl-btn"
+          @click="loadMore"
+          v-text="i18n.more"
+        />
+      </div>
+    </template>
+
+    <!-- Copyright Information -->
+    <div v-if="config.copyright" class="wl-power">
+      Powered by
+      <a
+        href="https://github.com/walinejs/waline"
+        target="_blank"
+        rel="noreferrer"
+      >
+        Waline
+      </a>
+      v{{ version }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  onBeforeUnmount,
+  onMounted,
+  provide,
+  ref,
+  watch,
+  watchEffect,
+} from 'vue';
+import CommentBox from './CommentBox.vue';
+import CommentCard from './CommentCard.vue';
+import { LoadingIcon } from './Icons';
+import { useUserInfo } from '../composables';
+import { locales } from '../config';
+import { fetchCommentList, getConfig, getDarkStyle } from '../utils';
+
+import type { PropType } from 'vue';
+import type {
+  WalineComment,
+  WalineEmojiInfo,
+  WalineHighlighter,
+  WalineTexRenderer,
+  WalineImageUploader,
+  WalineLocale,
+  WalineProps,
+} from '../typings';
+
+declare const SHOULD_VALIDATE: boolean;
+declare const VERSION: string;
+
+export default defineComponent({
+  name: 'Waline-Root',
+
+  components: {
+    CommentBox,
+    CommentCard,
+    LoadingIcon,
+  },
+
+  props: {
+    serverURL: {
+      type: String,
+      required: true,
+    },
+
+    path: {
+      type: String,
+      required: true,
+    },
+
+    meta: {
+      type: Array,
+      // default: (): Meta[] => ['nick', 'mail', 'link'],
+      ...(SHOULD_VALIDATE
+        ? {
+            validator: (value: unknown): boolean =>
+              Array.isArray(value) &&
+              value.every((item) => ['nick', 'mail', 'link'].includes(item)),
+          }
+        : {}),
+    },
+
+    requiredMeta: {
+      type: Array,
+      // default: (): Meta[] => [],
+      ...(SHOULD_VALIDATE
+        ? {
+            validator: (value: unknown): boolean =>
+              Array.isArray(value) &&
+              value.every((item) => ['nick', 'mail', 'link'].includes(item)),
+          }
+        : {}),
+    },
+
+    visitor: {
+      type: Boolean,
+      // default: false,
+    },
+
+    dark: {
+      type: [String, Boolean],
+      // default: false,
+    },
+
+    lang: {
+      type: String,
+      // default: 'zh-CN',
+      ...(SHOULD_VALIDATE
+        ? {
+            validator: (value: unknown): boolean =>
+              Object.keys(locales).includes(value as string),
+          }
+        : {}),
+    },
+
+    locale: {
+      type: Object as PropType<Partial<WalineLocale>>,
+    },
+
+    pageSize: {
+      type: Number,
+      // default: 10,
+    },
+
+    wordLimit: {
+      type: [Number, Array] as PropType<number | [number, number]>,
+      // default: 0,
+      ...(SHOULD_VALIDATE
+        ? {
+            validator: (value: unknown): boolean =>
+              typeof value === 'number' ||
+              (Array.isArray(value) &&
+                value.length === 2 &&
+                value.every((item) => typeof item === 'number')),
+          }
+        : {}),
+    },
+
+    emoji: {
+      type: Array as PropType<(string | WalineEmojiInfo)[]>,
+      // default: (): string[] => [
+      //   'https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo',
+      // ],
+      ...(SHOULD_VALIDATE
+        ? {
+            validator: (value: unknown): boolean =>
+              Array.isArray(value) &&
+              value.every(
+                (item) =>
+                  typeof item === 'string' ||
+                  (typeof item === 'object' &&
+                    typeof item.name === 'string' &&
+                    typeof item.folder === 'string' &&
+                    typeof item.icon === 'string' &&
+                    Array.isArray(item.items) &&
+                    (item.items as unknown[]).every(
+                      (icon) => typeof icon === 'string'
+                    ))
+              ),
+          }
+        : {}),
+    },
+
+    login: {
+      type: String as PropType<'enable' | 'disable' | 'force'>,
+      // default: 'enable',
+    },
+
+    highlighter: {
+      type: Function as PropType<WalineHighlighter>,
+      // default: (text: string): string => text,
+    },
+
+    imageUploader: {
+      type: [Function, false] as PropType<WalineImageUploader>,
+      // default: (file: File): Promise<string> =>
+      //   new Promise((resolve, reject) => {
+      //     const reader = new FileReader();
+      //     reader.readAsDataURL(file);
+      //     reader.onload = (): void => resolve(reader.result?.toString() || '');
+      //     reader.onerror = reject;
+      //   }),
+    },
+
+    texRender: {
+      type: Function as PropType<WalineTexRenderer>,
+      // default: (blockMode: boolean): string =>
+      //   blockMode === true
+      //     ? '<p class="vtex">Tex is not available in preview</p>'
+      //     : '<span class="vtex">Tex is not available in preview</span>',
+    },
+  },
+
+  setup(props) {
+    const config = computed(() => getConfig(props as WalineProps));
+
+    const { userInfo } = useUserInfo();
+
+    const status = ref<'loading' | 'success' | 'error'>('loading');
+
+    const count = ref(0);
+    const page = ref(1);
+    const totalPages = ref(0);
+
+    const data = ref<WalineComment[]>([]);
+    const reply = ref<WalineComment | null>(null);
+
+    const darkmodeStyle = computed(() => getDarkStyle(config.value.dark));
+
+    // eslint-disable-next-line vue/no-setup-props-destructure
+    let abort: () => void;
+    let stop: () => void;
+
+    const fetchComment = (pageNumber: number): void => {
+      const { serverURL, path, pageSize } = config.value;
+      const controller = new AbortController();
+
+      status.value = 'loading';
+
+      abort?.();
+
+      fetchCommentList({
+        serverURL,
+        path,
+        pageSize,
+        page: pageNumber,
+        signal: controller.signal,
+        token: userInfo.value?.token,
+      })
+        .then((resp) => {
+          status.value = 'success';
+          count.value = resp.count;
+          data.value.push(...resp.data);
+          page.value = pageNumber;
+          totalPages.value = resp.totalPages;
+        })
+        .catch((err) => {
+          if (err.name !== 'AbortError') {
+            console.error(err.message);
+            status.value = 'error';
+          }
+        });
+
+      abort = controller.abort.bind(controller);
+    };
+
+    const loadMore = (): void => fetchComment(page.value + 1);
+
+    const refresh = (): void => {
+      count.value = 0;
+      data.value = [];
+      fetchComment(1);
+    };
+
+    const onReply = (comment: WalineComment | null): void => {
+      reply.value = comment;
+    };
+
+    const onSubmit = (comment: WalineComment): void => {
+      if (comment.rid) {
+        const repliedComment = data.value.find(
+          ({ objectId }) => objectId === comment.rid
+        );
+
+        if (!repliedComment) return;
+
+        if (!Array.isArray(repliedComment.children))
+          repliedComment.children = [];
+
+        repliedComment.children.push(comment);
+      } else data.value.unshift(comment);
+    };
+
+    provide('config', config);
+
+    watch(() => props.path, refresh);
+
+    onMounted(() => {
+      refresh();
+
+      const style = document.createElement('style');
+
+      style.innerText = darkmodeStyle.value;
+
+      document.querySelector('[data-waline]')?.appendChild(style);
+
+      stop = watchEffect(() => {
+        style.innerText = darkmodeStyle.value;
+      });
+    });
+
+    onBeforeUnmount(() => stop());
+
+    return {
+      config,
+      darkmodeStyle,
+      i18n: computed(() => config.value.locale),
+
+      status,
+      count,
+      page,
+      totalPages,
+      data,
+      reply,
+
+      loadMore,
+      refresh,
+      onReply,
+      onSubmit,
+
+      version: VERSION,
+    };
+  },
+});
+</script>

package/src/composables/index.ts

@@ -0,0 +1,3 @@
+export * from './inputs';
+export * from './userInfo';
+export * from './store';

package/src/composables/inputs.ts

@@ -0,0 +1,29 @@
+import { reactive } from 'vue';
+import { useStore } from './store';
+
+import type { Store } from './store';
+
+export interface Inputs {
+  nick: string;
+  mail: string;
+  link: string;
+  editor: string;
+}
+
+let store: Store;
+let inputs: Inputs;
+
+export const useInputs = (): { inputs: Inputs; store: Store } => {
+  if (!inputs) {
+    store = useStore('WALINE_USER_CACHE');
+
+    inputs = reactive({
+      nick: store.get<string>('nick') || '',
+      mail: store.get<string>('mail') || '',
+      link: store.get<string>('link') || '',
+      editor: '',
+    });
+  }
+
+  return { inputs, store };
+};

package/src/composables/store.ts

@@ -0,0 +1,38 @@
+export interface Store {
+  get: <T = unknown>(key: string) => T | null;
+  set: <T = unknown>(key: string, content: T) => void;
+  update: <T = unknown>(content: T) => void;
+}
+
+export const useStore = (cacheKey: string): Store => {
+  let storage: Record<string, unknown> = {};
+  const content = localStorage.getItem(cacheKey);
+
+  if (content) {
+    try {
+      storage = JSON.parse(content) as Record<string, unknown>;
+    } catch (err) {
+      // do nothing
+    }
+  }
+
+  return {
+    get: <T>(key: string): T | null => (storage[key] as T) || null,
+
+    set<T>(key: string, content: T): void {
+      try {
+        // make sure the content can be stringify and make a deep copy here
+        storage[key] = JSON.parse(JSON.stringify(content));
+        localStorage.setItem(cacheKey, JSON.stringify(storage));
+      } catch (err) {
+        // do nothing
+      }
+    },
+
+    update<T>(content: T): void {
+      // make sure the content can be stringify and make a deep copy here
+      storage = JSON.parse(JSON.stringify(content)) as Record<string, unknown>;
+      localStorage.setItem(cacheKey, JSON.stringify(storage));
+    },
+  };
+};