style: 🎨 format them again use prettier

BeiyanYunyi · Dec 10, 2024 · 7467ce9 · 7467ce9
1 parent 0e6474e
commit 7467ce9
Show file tree

Hide file tree

Showing 43 changed files with 176 additions and 241 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,9 +2,7 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "css.customData": ["./css-data.json"],
-  // Disable the default formatter, use eslint instead
-  "prettier.enable": false,
-  "editor.formatOnSave": false,
+  "editor.formatOnSave": true,
 
   // Auto fix
   "editor.codeActionsOnSave": {

diff --git a/docs/.vitepress/theme/RegisterSW.vue b/docs/.vitepress/theme/RegisterSW.vue
@@ -1,12 +1,8 @@
 <template>
   <template v-if="offlineReady">
     <div class="pwa-toast" role="alertdialog" aria-labelledby="pwa-message">
-      <div id="pwa-message" class="mb-3">
-        App ready to work offline
-      </div>
-      <button type="button" class="pwa-cancel" @click="close">
-        Close
-      </button>
+      <div id="pwa-message" class="mb-3">App ready to work offline</div>
+      <button type="button" class="pwa-cancel" @click="close">Close</button>
     </div>
   </template>
 </template>

diff --git a/docs/.vitepress/theme/ReloadPrompt.vue b/docs/.vitepress/theme/ReloadPrompt.vue
@@ -11,9 +11,7 @@
       <button v-if="needRefresh" type="button" class="pwa-refresh" @click="updateServiceWorker?.()">
         Reload
       </button>
-      <button type="button" class="pwa-cancel" @click="close">
-        Close
-      </button>
+      <button type="button" class="pwa-cancel" @click="close">Close</button>
     </div>
   </template>
 </template>

diff --git a/docs/.vitepress/theme/SodesuComment.vue b/docs/.vitepress/theme/SodesuComment.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="vp-doc">
-    <hr>
+    <hr />
     <blockquote>
       友情提示：评论区仅作评论展示，如有问题咨询请去
       <a href="https://github.com/BeiyanYunyi/sodesu/discussions" target="_blank">

diff --git a/docs/.vitepress/theme/SodesuLayout.vue b/docs/.vitepress/theme/SodesuLayout.vue
@@ -13,7 +13,7 @@
       <link
         rel="stylesheet"
         href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-tomorrow.min.css"
-      >
+      />
     </template>
   </Layout>
 </template>

diff --git a/docs/index.md b/docs/index.md
@@ -1,29 +1,29 @@
----
-layout: home
-title: Sodesu
-
-hero:
-  name: Sodesu
-  text: 一个精简版 Waline 评论系统前端
-  tagline: 小巧、快速，由 Solid.js 和 UnoCSS 驱动。
-  actions:
-    - theme: brand
-      text: 快速开始
-      link: /guide/getting-started
-    - theme: alt
-      text: 查看源码
-      link: https://github.com/BeiyanYunyi/sodesu
-features:
-  - icon: 🚀
-    title: Solid.js
-    details: 又快又小。使用长得像 JSX 的模板构建。
-  - icon: 📦
-    title: 使用 UnoCSS
-    details: CSS 体积控制在 8.97kB，如果你的博客系统也用了 UnoCSS，那么 CSS 体积不会简单相加。
-  - icon: ❤
-    title: 兼容 Waline
-    details: 可直接重用原版 Waline 前端的配置项，迁移简单。
-  - icon: ☁️
-    title: 轻量
-    details: 23 kB gzipped 的完整 JS 体积。
----
+---
+layout: home
+title: Sodesu
+
+hero:
+  name: Sodesu
+  text: 一个精简版 Waline 评论系统前端
+  tagline: 小巧、快速，由 Solid.js 和 UnoCSS 驱动。
+  actions:
+    - theme: brand
+      text: 快速开始
+      link: /guide/getting-started
+    - theme: alt
+      text: 查看源码
+      link: https://github.com/BeiyanYunyi/sodesu
+features:
+  - icon: 🚀
+    title: Solid.js
+    details: 又快又小。使用长得像 JSX 的模板构建。
+  - icon: 📦
+    title: 使用 UnoCSS
+    details: CSS 体积控制在 8.97kB，如果你的博客系统也用了 UnoCSS，那么 CSS 体积不会简单相加。
+  - icon: ❤
+    title: 兼容 Waline
+    details: 可直接重用原版 Waline 前端的配置项，迁移简单。
+  - icon: ☁️
+    title: 轻量
+    details: 23 kB gzipped 的完整 JS 体积。
+---
diff --git a/docs/special-features.md b/docs/special-features.md
@@ -32,7 +32,7 @@ import Sodesu from 'sodesu-comment';
 Sodesu.init({
   el: '#comment-container',
   // ...
-  renderPreview: async text => myProcessor(text), // 需要返回 Promise
+  renderPreview: async (text) => myProcessor(text), // 需要返回 Promise
 });
 ```
 

diff --git a/docs/trade-offs.md b/docs/trade-offs.md
@@ -11,7 +11,10 @@ Sodesu 与 Waline 官方前端的设计目的并不相同。我写 Sodesu 的初
 Waline 后端使用 Prism 将 markdown 中的代码块进行高亮处理，而 Sodesu 的样式中并未包括 Prism。为了让 Sodesu 正确呈现代码样式（而非一片灰），你需要在前端额外引入 Prism 的样式。经测试，在所有官方主题中，`prism-tomorrow` 主题的效果是最好的。示例引入方式如下：
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-tomorrow.min.css" />
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-tomorrow.min.css"
+/>
 ```
 
 ::: info

diff --git a/eslint.config.js b/eslint.config.js
@@ -12,7 +12,8 @@ export default antfu({
           order: ['template', 'script', 'style'],
         },
       ],
+      'vue/html-self-closing': 0,
     },
   },
-  stylistic: { semi: true },
+  stylistic: false,
 });
diff --git a/index.html b/index.html
@@ -11,10 +11,8 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
     阅读量: <span id="/" class="waline-pageview-count"></span> 评论数:
     <span id="/" class="waline-comment-count"></span>页面阅读量 1：
-    <span class="waline-pageview-count" data-path="/guide/features/pageview.html"></span>页面阅读量 2：<span
-      class="waline-pageview-count"
-      data-path="/guide/features/i18n.html"
-    ></span>
+    <span class="waline-pageview-count" data-path="/guide/features/pageview.html"></span>页面阅读量
+    2：<span class="waline-pageview-count" data-path="/guide/features/i18n.html"></span>
     <div id="root"></div>
     <script type="module">
       import Sodesu from '/src/index.tsx';
@@ -24,13 +22,17 @@
         el: '#root',
         serverURL: 'https://walinejs.comment.lithub.cc',
         dark: 'auto',
-        path: window.location.pathname === '/' ? '/' : window.location.pathname.replace(/\/$/, '.html'),
+        path:
+          window.location.pathname === '/' ? '/' : window.location.pathname.replace(/\/$/, '.html'),
         pageview: true,
         comment: true,
         commentClassName: 'prose',
         renderPreview: remarkRenderer,
       });
     </script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-tomorrow.min.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-tomorrow.min.css"
+    />
   </body>
 </html>
diff --git a/scripts/vBuild.ts b/scripts/vBuild.ts
@@ -11,7 +11,7 @@ const p0 = await build({
       entry: 'src/index.tsx',
       name: 'Sodesu',
       formats: ['es', 'umd'],
-      fileName: format => format === 'es' ? `sodesu.aio.mjs` : `sodesu.aio.umd.js`,
+      fileName: (format) => (format === 'es' ? `sodesu.aio.mjs` : `sodesu.aio.umd.js`),
     },
     emptyOutDir: false,
   },
@@ -79,14 +79,8 @@ transform({
   },
 });
 const result = Array.from(new Set(classes));
-const pms2 = writeFile(
-  'dist/safeList.cjs',
-  `module.exports=${JSON.stringify(result)}`,
-);
-const pms3 = writeFile(
-  'dist/safeList.js',
-  `export default ${JSON.stringify(result)}`,
-);
+const pms2 = writeFile('dist/safeList.cjs', `module.exports=${JSON.stringify(result)}`);
+const pms3 = writeFile('dist/safeList.js', `export default ${JSON.stringify(result)}`);
 const pms4 = writeFile(
   'dist/safeList.d.ts',
   'declare const safeList: string[]; export default safeList;',

diff --git a/src/App.tsx b/src/App.tsx
@@ -46,13 +46,12 @@ const App: Component = () => {
         <div class="flex-shrink flex-grow text-xl text-sColor font-bold">
           <Show when={count()}>
             <span>{count()}</span>
-          </Show>
-          {' '}
+          </Show>{' '}
           {locale().comment}
         </div>
         <ul class="m-0 list-none p-0">
           <For each={sortingMethods}>
-            {item => (
+            {(item) => (
               <li class="ms-3 inline-block">
                 <button
                   class="cursor-pointer border-none bg-transparent pe-0 ps-0 text-[0.75rem] hover:text-sActive"
@@ -75,13 +74,13 @@ const App: Component = () => {
       </div>
       <div>
         <Index each={data()}>
-          {item => <CommentCard content={item()} rootId={item().objectId} />}
+          {(item) => <CommentCard content={item()} rootId={item().objectId} />}
         </Index>
       </div>
       <div class="text-center">
         <Show
           when={status() !== 'error'}
-          fallback={(
+          fallback={
             <CommonButton
               onClick={(e) => {
                 e.preventDefault();
@@ -90,7 +89,7 @@ const App: Component = () => {
             >
               {locale().refresh}
             </CommonButton>
-          )}
+          }
         >
           <Switch>
             <Match when={status() === 'loading'}>
@@ -115,14 +114,11 @@ const App: Component = () => {
         </Show>
       </div>
       <div class="py-1 text-end text-sLightGrey text-info">
-        Powered by
-        {' '}
+        Powered by{' '}
         <a href="https://github.com/BeiyanYunyi/sodesu" target="_blank" rel="noopener noreferrer">
           Sodesu
-        </a>
-        {' '}
-        v
-        {version}
+        </a>{' '}
+        v{version}
       </div>
     </div>
   );

diff --git a/src/ComponentEntry.tsx b/src/ComponentEntry.tsx
@@ -7,8 +7,7 @@ import configProvider from './controllers/configProvider';
 const ComponentEntry: Component<Omit<SodesuInitOptions, 'el'>> = (prop) => {
   const { path = window.location.pathname } = prop;
   const { setProps } = configProvider;
-  if (!prop.serverURL)
-    throw new Error('Option \'serverURL\' is missing!');
+  if (!prop.serverURL) throw new Error("Option 'serverURL' is missing!");
   setProps({ ...prop, path });
   return <App />;
 };

diff --git a/src/components/CommentBox.tsx b/src/components/CommentBox.tsx
@@ -51,14 +51,12 @@ const CommentBox: Component<{ isMain?: boolean }> = (props) => {
             ref={commentBoxState.editorRef}
             value={content()}
             placeholder={(() => {
-              if (replyUser())
-                return `@${replyUser()}`;
+              if (replyUser()) return `@${replyUser()}`;
               return locale().placeholder;
             })()}
             onKeyDown={(e) => {
               const { key } = e;
-              if ((e.ctrlKey || e.metaKey) && key === 'Enter')
-                submitComment();
+              if ((e.ctrlKey || e.metaKey) && key === 'Enter') submitComment();
             }}
           />
           <Show when={showPreview()}>

diff --git a/src/components/CommentBoxFooter.tsx b/src/components/CommentBoxFooter.tsx
@@ -28,7 +28,7 @@ const CommentBoxFooter: Component = () => {
           title={locale().preview}
           onClick={(e) => {
             e.preventDefault();
-            setShowPreview(ori => !ori);
+            setShowPreview((ori) => !ori);
           }}
         >
           <PreviewIcon />
@@ -37,7 +37,7 @@ const CommentBoxFooter: Component = () => {
       <div class="flex flex-shrink flex-grow-3 items-center justify-end">
         <Show
           when={config().login !== 'disable' && !isLogin()}
-          fallback={(
+          fallback={
             <CommonButton
               type="button"
               onClick={(e) => {
@@ -47,7 +47,7 @@ const CommentBoxFooter: Component = () => {
             >
               {locale().logout}
             </CommonButton>
-          )}
+          }
         >
           <CommonButton
             type="button"

diff --git a/src/components/CommentCard.tsx b/src/components/CommentCard.tsx
@@ -13,8 +13,7 @@ import { VerifiedIcon } from './Icons';
 const CommentCard: Component<{ content: ReactiveComment; rootId: string }> = (props) => {
   const link = createMemo(() => {
     const { link: link2 } = props.content;
-    if (!link2)
-      return '';
+    if (!link2) return '';
     return isLinkHttp(link2) ? link2 : `https://${link2}`;
   });
   const { replyId, edit } = commentBoxState;
@@ -39,11 +38,11 @@ const CommentCard: Component<{ content: ReactiveComment; rootId: string }> = (pr
         <div class="overflow-hidden">
           <Show
             when={link()}
-            fallback={(
+            fallback={
               <span class="me-2 inline-block text-sm text-sDarkGrey font-bold decoration-none">
                 {props.content.nick}
               </span>
-            )}
+            }
           >
             <a
               class="me-2 inline-block text-sm text-sDarkGrey font-bold decoration-none"
@@ -93,7 +92,7 @@ const CommentCard: Component<{ content: ReactiveComment; rootId: string }> = (pr
         </Show>
         <Show when={props.content.children}>
           <Index each={props.content.children()}>
-            {item => <CommentCard content={item()} rootId={props.rootId} />}
+            {(item) => <CommentCard content={item()} rootId={props.rootId} />}
           </Index>
         </Show>
       </div>

diff --git a/src/components/CommentCardActions.tsx b/src/components/CommentCardActions.tsx
@@ -12,8 +12,8 @@ import { DeleteIcon, EditIcon, LikeIcon, ReplyIcon } from './Icons';
 
 const CommentCardActions: Component<{ comment: ReactiveComment; rootId: string }> = (props) => {
   const { locale, config } = configProvider;
-  const { replyId, setReplyId, setReplyUser, setRootId, setContent, setEdit, edit }
-    = commentBoxState;
+  const { replyId, setReplyId, setReplyUser, setRootId, setContent, setEdit, edit } =
+    commentBoxState;
   const { likes } = likeState;
   const liked = createMemo(() => likes()?.includes(props.comment.objectId) || false);
   const isReplyingCurrent = createMemo(() => replyId() === props.comment.objectId);
@@ -33,8 +33,7 @@ const CommentCardActions: Component<{ comment: ReactiveComment; rootId: string }
             if (editingThis()) {
               setEdit(null);
               setContent('');
-            }
-            else {
+            } else {
               setEdit(props.comment);
               setContent(props.comment.orig() || '');
             }
@@ -49,8 +48,7 @@ const CommentCardActions: Component<{ comment: ReactiveComment; rootId: string }
           class="me-2 inline-flex cursor-pointer items-center border-none bg-transparent text-sColor sds-btn"
           onClick={async (e) => {
             e.preventDefault();
-            if (!confirm('Are you sure you want to delete this comment?'))
-              return;
+            if (!confirm('Are you sure you want to delete this comment?')) return;
             const { serverURL, lang } = config();
             await deleteComment({
               serverURL,
@@ -85,8 +83,7 @@ const CommentCardActions: Component<{ comment: ReactiveComment; rootId: string }
             e.preventDefault();
             if (isReplyingCurrent()) {
               clearReplyState();
-            }
-            else {
+            } else {
               setReplyId(props.comment.objectId);
               setReplyUser(props.comment.nick);
               setRootId(props.rootId);

diff --git a/src/components/CommentMeta.tsx b/src/components/CommentMeta.tsx
@@ -1,6 +1,6 @@
 import { type Component, Show } from 'solid-js';
 
-const CommentMeta: Component<{ addr?: string; browser?: string; os?: string }> = props => (
+const CommentMeta: Component<{ addr?: string; browser?: string; os?: string }> = (props) => (
   <div aria-hidden>
     <Show when={props.addr}>
       <span class="me-1 rounded bg-sInfoBg p-1 text-sInfo text-info">{props.addr}</span>