@waline/client 2.15.8 → 3.0.0-alpha.2

package/src/components/WalineComment.vue

@@ -1,353 +0,0 @@
-<template>
-  <div data-waline>
-    <Reaction />
-
-    <CommentBox v-if="!reply" @log="refresh" @submit="onSubmit" />
-
-    <div class="wl-meta-head">
-      <div class="wl-count">
-        <span v-if="count" class="wl-num" v-text="count" />
-        {{ i18n.comment }}
-      </div>
-
-      <ul class="wl-sort">
-        <li
-          v-for="item in sortingMethods"
-          :key="item"
-          :class="[item === commentSortingRef ? 'active' : '']"
-          @click="onSortByChange(item)"
-        >
-          {{ i18n[item] }}
-        </li>
-      </ul>
-    </div>
-
-    <div class="wl-cards">
-      <CommentCard
-        v-for="comment in data"
-        :key="comment.objectId"
-        :root-id="comment.objectId"
-        :comment="comment"
-        :reply="reply"
-        :edit="edit"
-        @log="refresh"
-        @reply="onReply"
-        @edit="onEdit"
-        @submit="onSubmit"
-        @status="onStatusChange"
-        @delete="onDelete"
-        @sticky="onSticky"
-        @like="onLike"
-      />
-    </div>
-
-    <div v-if="status === 'error'" class="wl-operation">
-      <button
-        type="button"
-        class="wl-btn"
-        @click="refresh"
-        v-text="i18n.refresh"
-      />
-    </div>
-
-    <template v-else>
-      <div v-if="status === 'loading'" class="wl-loading">
-        <LoadingIcon :size="30" />
-      </div>
-
-      <div v-else-if="!data.length" class="wl-empty" v-text="i18n.sofa" />
-
-      <!-- Load more button -->
-      <div v-else-if="page < totalPages" class="wl-operation">
-        <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="noopener noreferrer"
-      >
-        Waline
-      </a>
-      v{{ version }}
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-/* eslint-disable vue/define-props-declaration */
-/* eslint-disable vue/no-unused-properties */
-/* eslint-disable vue/require-prop-comment */
-/* eslint-disable vue/require-prop-types */
-import { useStyleTag } from '@vueuse/core';
-import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue';
-
-import Reaction from './ArticleReaction.vue';
-import CommentBox from './CommentBox.vue';
-import CommentCard from './CommentCard.vue';
-import { LoadingIcon } from './Icons.js';
-import { deleteComment, getComment, updateComment } from '../api/index.js';
-import { useUserInfo, useLikeStorage } from '../composables/index.js';
-import {
-  type WalineComment,
-  type WalineCommentSorting,
-  type WalineCommentStatus,
-  type WalineProps,
-} from '../typings/index.js';
-import { getConfig, getDarkStyle } from '../utils/index.js';
-import { version } from '../version.js';
-
-type SortKey = 'insertedAt_desc' | 'insertedAt_asc' | 'like_desc';
-
-const props = defineProps([
-  'serverURL',
-  'path',
-  'meta',
-  'requiredMeta',
-  'dark',
-  'commentSorting',
-  'lang',
-  'locale',
-  'pageSize',
-  'wordLimit',
-  'emoji',
-  'login',
-  'highlighter',
-  'texRenderer',
-  'imageUploader',
-  'search',
-  'copyright',
-  'recaptchaV3Key',
-  'turnstileKey',
-  'reaction',
-]);
-
-const sortKeyMap: Record<WalineCommentSorting, SortKey> = {
-  latest: 'insertedAt_desc',
-  oldest: 'insertedAt_asc',
-  hottest: 'like_desc',
-};
-const sortingMethods = Object.keys(sortKeyMap) as WalineCommentSorting[];
-
-const userInfo = useUserInfo();
-const likeStorage = useLikeStorage();
-
-const status = ref<'loading' | 'success' | 'error'>('loading');
-
-const count = ref(0);
-const page = ref(1);
-const totalPages = ref(0);
-
-const config = computed(() => getConfig(props as WalineProps));
-
-// eslint-disable-next-line vue/no-ref-object-destructure
-const commentSortingRef = ref(config.value.commentSorting);
-
-const data = ref<WalineComment[]>([]);
-const reply = ref<WalineComment | null>(null);
-const edit = ref<WalineComment | null>(null);
-
-const darkmodeStyle = computed(() => getDarkStyle(config.value.dark));
-
-const i18n = computed(() => config.value.locale);
-
-useStyleTag(darkmodeStyle, { id: 'waline-darkmode' });
-
-let abort: () => void;
-
-const getCommentData = (pageNumber: number): void => {
-  const { serverURL, path, pageSize } = config.value;
-  const controller = new AbortController();
-
-  status.value = 'loading';
-
-  abort?.();
-
-  getComment({
-    serverURL,
-    lang: config.value.lang,
-    path,
-    pageSize,
-    sortBy: sortKeyMap[commentSortingRef.value],
-    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: Error) => {
-      if (err.name !== 'AbortError') {
-        console.error(err.message);
-        status.value = 'error';
-      }
-    });
-
-  abort = controller.abort.bind(controller);
-};
-
-const loadMore = (): void => getCommentData(page.value + 1);
-
-const refresh = (): void => {
-  count.value = 0;
-  data.value = [];
-  getCommentData(1);
-};
-
-const onSortByChange = (item: WalineCommentSorting): void => {
-  if (commentSortingRef.value !== item) {
-    commentSortingRef.value = item;
-    refresh();
-  }
-};
-
-const onReply = (comment: WalineComment | null): void => {
-  reply.value = comment;
-};
-
-const onEdit = (comment: WalineComment | null): void => {
-  edit.value = comment;
-};
-
-const onSubmit = (comment: WalineComment): void => {
-  if (edit.value) {
-    edit.value.comment = comment.comment;
-    edit.value.orig = comment.orig;
-  } else 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);
-    count.value += 1;
-  }
-};
-
-const onStatusChange = async ({
-  comment,
-  status,
-}: {
-  comment: WalineComment;
-  status: WalineCommentStatus;
-}): Promise<void> => {
-  if (comment.status === status) return;
-
-  const { serverURL, lang } = config.value;
-
-  await updateComment({
-    serverURL,
-    lang,
-    token: userInfo.value?.token,
-    objectId: comment.objectId,
-    comment: { status },
-  });
-
-  comment.status = status;
-};
-
-const onSticky = async (comment: WalineComment): Promise<void> => {
-  if (comment.rid) return;
-
-  const { serverURL, lang } = config.value;
-
-  await updateComment({
-    serverURL,
-    lang,
-    token: userInfo.value?.token,
-    objectId: comment.objectId,
-    comment: { sticky: comment.sticky ? 0 : 1 },
-  });
-
-  comment.sticky = !comment.sticky;
-};
-
-const onDelete = async ({ objectId }: WalineComment): Promise<void> => {
-  if (!confirm('Are you sure you want to delete this comment?')) return;
-
-  const { serverURL, lang } = config.value;
-
-  await deleteComment({
-    serverURL,
-    lang,
-    token: userInfo.value?.token,
-    objectId,
-  });
-
-  // delete comment from data
-  data.value.some((item, index) => {
-    if (item.objectId === objectId) {
-      data.value = data.value.filter((_item, i) => i !== index);
-
-      return true;
-    }
-
-    return item.children.some((child, childIndex) => {
-      if (child.objectId === objectId) {
-        data.value[index].children = item.children.filter(
-          (_item, i) => i !== childIndex,
-        );
-
-        return true;
-      }
-
-      return false;
-    });
-  });
-};
-
-const onLike = async (comment: WalineComment): Promise<void> => {
-  const { serverURL, lang } = config.value;
-  const { objectId } = comment;
-  const hasLiked = likeStorage.value.includes(objectId);
-
-  await updateComment({
-    serverURL,
-    lang,
-    objectId,
-    token: userInfo.value?.token,
-    comment: { like: !hasLiked },
-  });
-
-  if (hasLiked)
-    likeStorage.value = likeStorage.value.filter((id) => id !== objectId);
-  else {
-    likeStorage.value = [...likeStorage.value, objectId];
-
-    if (likeStorage.value.length > 50)
-      likeStorage.value = likeStorage.value.slice(-50);
-  }
-
-  comment.like = (comment.like || 0) + (hasLiked ? -1 : 1);
-};
-
-provide('config', config);
-
-onMounted(() => {
-  watch(
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-    () => [props.serverURL, props.path],
-    () => refresh(),
-    { immediate: true },
-  );
-});
-onUnmounted(() => abort?.());
-</script>

package/src/composables/index.ts

@@ -1,6 +0,0 @@
-export * from './inputs';
-export * from './like';
-export * from './reaction';
-export * from './recaptchaV3';
-export * from './turnstile';
-export * from './userInfo';

package/src/composables/inputs.ts

@@ -1,17 +0,0 @@
-import { type RemovableRef, useStorage } from '@vueuse/core';
-
-export interface UserMeta {
-  nick: string;
-  mail: string;
-  link: string;
-}
-
-export const useUserMeta = (): RemovableRef<UserMeta> =>
-  useStorage<UserMeta>('WALINE_USER_META', {
-    nick: '',
-    mail: '',
-    link: '',
-  });
-
-export const useEditor = (): RemovableRef<string> =>
-  useStorage<string>('WALINE_COMMENT_BOX_EDITOR', '');

package/src/composables/like.ts

@@ -1,13 +0,0 @@
-import { useStorage } from '@vueuse/core';
-import { type Ref } from 'vue';
-
-const LIKE_KEY = 'WALINE_LIKE';
-
-export type LikeID = number | string;
-
-export type LikeRef = Ref<LikeID[]>;
-
-let likeStorage: LikeRef | null = null;
-
-export const useLikeStorage = (): LikeRef =>
-  likeStorage || (likeStorage = useStorage<LikeID[]>(LIKE_KEY, []));

package/src/composables/reaction.ts

@@ -1,15 +0,0 @@
-import { useStorage } from '@vueuse/core';
-import { type Ref } from 'vue';
-
-const REACTION_KEY = 'WALINE_REACTION';
-
-export interface WalineReactionStore {
-  [VOTE_IDENTIFIER: string]: number | undefined;
-}
-
-export type VoteRef = Ref<WalineReactionStore>;
-
-let reactionStorage: VoteRef | null = null;
-
-export const useReactionStorage = (): VoteRef =>
-  (reactionStorage ??= useStorage<WalineReactionStore>(REACTION_KEY, {}));

package/src/composables/recaptchaV3.ts

@@ -1,19 +0,0 @@
-import { type ReCaptchaInstance, load } from 'recaptcha-v3';
-
-const recaptchaStore: Record<string, Promise<ReCaptchaInstance>> = {};
-
-interface ReCaptcha {
-  execute: (action: string) => Promise<string>;
-}
-
-export const useReCaptcha = (key: string): ReCaptcha => {
-  const init = (recaptchaStore[key] ??= load(key, {
-    useRecaptchaNet: true,
-    autoHideBadge: true,
-  }));
-
-  return {
-    execute: (action: string) =>
-      init.then((instance) => instance.execute(action)),
-  };
-};

package/src/composables/turnstile.ts

@@ -1,50 +0,0 @@
-import { useScriptTag } from '@vueuse/core';
-
-interface TurnstileOptions {
-  sitekey: string;
-  action?: string;
-  size?: 'normal' | 'compact';
-  callback?: (token: string) => void;
-}
-interface TurnstileInstance {
-  ready: (fn: () => void) => void;
-  excute: (className: string, options?: TurnstileOptions) => void;
-  render: (className: string, options?: TurnstileOptions) => void;
-}
-
-declare global {
-  interface Window {
-    turnstile?: TurnstileInstance;
-  }
-}
-
-interface Turnstile {
-  execute: (action: string) => Promise<string>;
-}
-
-export const useTurnstile = (key: string): Turnstile => {
-  const execute = async (action: string): Promise<string> => {
-    const { load } = useScriptTag(
-      'https://challenges.cloudflare.com/turnstile/v0/api.js',
-      undefined,
-      { async: false },
-    );
-
-    await load();
-
-    const turnstile = window?.turnstile;
-
-    return new Promise((resolve) => {
-      turnstile?.ready(() => {
-        turnstile?.render('.wl-captcha-container', {
-          sitekey: key,
-          action,
-          size: 'compact',
-          callback: resolve,
-        });
-      });
-    });
-  };
-
-  return { execute };
-};

package/src/composables/userInfo.ts

@@ -1,16 +0,0 @@
-import { useStorage } from '@vueuse/core';
-import { type Ref } from 'vue';
-
-import { type UserInfo } from '../api/index.js';
-
-export const USER_KEY = 'WALINE_USER';
-
-export type UserInfoRef = Ref<UserInfo | Record<string, never>>;
-
-let userInfoStorage: UserInfoRef | null = null;
-
-export const useUserInfo = (): UserInfoRef =>
-  (userInfoStorage ??= useStorage<UserInfo | Record<string, never>>(
-    USER_KEY,
-    {},
-  ));

package/src/config/default.ts

@@ -1,93 +0,0 @@
-import { type IGif } from '@giphy/js-types';
-
-import {
-  type WalineEmojiPresets,
-  type WalineMeta,
-  type WalineSearchOptions,
-  type WalineSearchResult,
-} from '../typings/index.js';
-
-const AVAILABLE_META: WalineMeta[] = ['nick', 'mail', 'link'];
-
-export const getMeta = (meta: WalineMeta[]): WalineMeta[] =>
-  meta.filter((item) => AVAILABLE_META.includes(item));
-
-export const DEFAULT_EMOJI: WalineEmojiPresets[] = [
-  '//unpkg.com/@waline/emojis@1.1.0/weibo',
-];
-
-export const DEFAULT_LANG = 'en-US';
-
-export const DEFAULT_REACTION = [
-  '//unpkg.com/@waline/emojis/tieba/tieba_agree.png',
-  '//unpkg.com/@waline/emojis/tieba/tieba_look_down.png',
-  '//unpkg.com/@waline/emojis/tieba/tieba_sunglasses.png',
-  '//unpkg.com/@waline/emojis/tieba/tieba_pick_nose.png',
-  '//unpkg.com/@waline/emojis/tieba/tieba_awkward.png',
-  '//unpkg.com/@waline/emojis/tieba/tieba_sleep.png',
-];
-
-export const defaultUploadImage = (file: File): Promise<string> =>
-  new Promise((resolve, reject) => {
-    if (file.size > 128 * 1000)
-      return reject(new Error('File too large! File size limit 128KB'));
-
-    const reader = new FileReader();
-
-    reader.readAsDataURL(file);
-    reader.onload = (): void => resolve(reader.result?.toString() || '');
-    reader.onerror = reject;
-  });
-
-export const defaultTeXRenderer = (blockMode: boolean): string =>
-  blockMode === true
-    ? '<p class="wl-tex">TeX is not available in preview</p>'
-    : '<span class="wl-tex">TeX is not available in preview</span>';
-
-export const getDefaultSearchOptions = (lang: string): WalineSearchOptions => {
-  interface GifResult {
-    data: IGif[];
-    meta: {
-      msg: string;
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      response_id: string;
-      status: number;
-    };
-    pagination: {
-      count: number;
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      total_count: number;
-      offset: number;
-    };
-  }
-
-  const fetchGiphy = async (
-    url: string,
-    params: Record<string, string> = {},
-  ): Promise<WalineSearchResult> =>
-    fetch(
-      `https://api.giphy.com/v1/gifs/${url}?${new URLSearchParams({
-        lang,
-        limit: '20',
-        rating: 'g',
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        api_key: '6CIMLkNMMOhRcXPoMCPkFy4Ybk2XUiMp',
-        ...params,
-      }).toString()}`,
-    )
-      .then((resp) => <Promise<GifResult>>resp.json())
-      .then(({ data }) =>
-        data.map((gif) => ({
-          title: gif.title,
-          src: gif.images.downsized_medium.url,
-        })),
-      );
-
-  return {
-    search: (word: string): Promise<WalineSearchResult> =>
-      fetchGiphy('search', { q: word, offset: '0' }),
-    default: (): Promise<WalineSearchResult> => fetchGiphy('trending', {}),
-    more: (word: string, offset = 0): Promise<WalineSearchResult> =>
-      fetchGiphy('search', { q: word, offset: offset.toString() }),
-  };
-};

package/src/config/highlighter.ts

@@ -1,74 +0,0 @@
-/**
- * The MIT License (MIT)
- *
- * Copyright (c) egoist <0x142857@gmail.com> (https://egoistian.com)
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- *
- */
-
-const WORD_REGEXP =
-  /[\u4E00-\u9FFF\u3400-\u4dbf\uf900-\ufaff\u3040-\u309f\uac00-\ud7af\u0400-\u04FF]+|\w+/;
-const LEFT_ANGLE_REGEXP = /</;
-const LINE_COMMENT_REGEXP = /(?:^|\s)\/\/(.+?)$/gm;
-const BLOCK_COMMENT_REGEXP = /\/\*([\S\s]*?)\*\//gm;
-const REGEXP = new RegExp(
-  `(${WORD_REGEXP.source}|${LEFT_ANGLE_REGEXP.source})|((?:${LINE_COMMENT_REGEXP.source})|(?:${BLOCK_COMMENT_REGEXP.source}))`,
-  'gmi',
-);
-
-const COLORS = [
-  '23AC69',
-  '91C132',
-  'F19726',
-  'E8552D',
-  '1AAB8E',
-  'E1147F',
-  '2980C1',
-  '1BA1E6',
-  '9FA0A0',
-  'F19726',
-  'E30B20',
-  'E30B20',
-  'A3338B',
-];
-const cache: Record<string, string> = {};
-
-export const defaultHighlighter = (input: string): string => {
-  let index = 0;
-
-  return input.replace(REGEXP, (_match, word: string, comment: string) => {
-    if (comment) return `<span style="color: slategray">${comment}</span>`;
-    if (word === '<') return '&lt;';
-
-    let color: string;
-
-    if (cache[word]) color = cache[word];
-    else {
-      color = COLORS[index];
-      cache[word] = color;
-    }
-
-    const out = `<span style="color: #${color}">${word}</span>`;
-
-    index = ++index % COLORS.length;
-
-    return out;
-  });
-};