Merge pull request #155 from hakadao/dev-upgrade-eslint-config

Merge the dev-upgrade-eslint-config branch into dev

.eslintignore

@@ -1,5 +0,0 @@
-dist
-node_modules
-public
-extension
-extension-firefox

.eslintrc

@@ -1,34 +0,0 @@
-{
-  "extends": "@antfu",
-  "rules": {
-    "vue/max-attributes-per-line": [
-      "error",
-      {
-        "singleline": {
-          "max": 5
-        },
-        "multiline": {
-          "max": 5
-        }
-      }
-    ]
-    // "vue/max-len": [
-    //   "error",
-    //   {
-    //     "code": 120,
-    //     "template": 120,
-    //     "tabWidth": 2,
-    //     "comments": 120,
-    //     "ignorePattern": "",
-    //     "ignoreComments": false,
-    //     "ignoreTrailingComments": false,
-    //     "ignoreUrls": false,
-    //     "ignoreStrings": false,
-    //     "ignoreTemplateLiterals": false,
-    //     "ignoreRegExpLiterals": false,
-    //     "ignoreHTMLAttributeValues": false,
-    //     "ignoreHTMLTextContents": false
-    //   }
-    // ]
-  }
-}

.github/pull_request_template.md

@@ -1,4 +1,4 @@
 <!-- Description of the PR: https://github.com/hakadao/BewlyBewly?tab=readme-ov-file#-contribution -->
 <!-- PR 说明: https://github.com/hakadao/BewlyBewly/blob/main/README-cmn_CN.md#-%E8%B4%A1%E7%8C%AE -->
 <!-- PR 說明: https://github.com/hakadao/BewlyBewly/blob/main/README-cmn_TW.md#-%E8%B2%A2%E7%8D%BB -->
-<!-- PR 說明（廣東話）: https://github.com/hakadao/BewlyBewly/blob/main/README-jyut.md#-%E8%B2%A2%E7%8D%BB -->
+<!-- PR 說明（廣東話）: https://github.com/hakadao/BewlyBewly/blob/main/README-jyut.md#-%E8%B2%A2%E7%8D%BB -->

.vscode/settings.json

@@ -5,7 +5,7 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },
-  "eslint.experimental.useFlatConfig": false,
+  "eslint.experimental.useFlatConfig": true,
   "files.associations": {
     "*.css": "postcss"
   },

eslint.config.js

@@ -0,0 +1,27 @@
+const antfu = require('@antfu/eslint-config').default
+
+module.exports = antfu({
+  jsonc: false,
+  rules: {
+    'vue/max-attributes-per-line': [
+      'error',
+      {
+        singleline: {
+          max: 5,
+        },
+        multiline: {
+          max: 5,
+        },
+      },
+    ],
+  },
+  eslint: {
+    ignorePatterns: [
+      'dist',
+      'node_modules',
+      'public',
+      'extension',
+      'extension-firefox',
+    ],
+  },
+})

package.json

@@ -46,7 +46,7 @@
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.39.8",
+    "@antfu/eslint-config": "^2.6.1",
     "@ffflorian/jszip-cli": "^3.5.1",
     "@iconify/json": "^2.2.143",
     "@iconify/vue": "^4.1.1",

scripts/client.ts

@@ -1,4 +1,3 @@
-/* eslint-disable unused-imports/no-unused-vars */
 import type { ErrorPayload, HMRPayload, Update } from 'vite'
 import type { ViteHotContext } from 'vite/types/hot'
 import type { InferCustomEventPayload } from 'vite/types/customEvent'

src/components/Button.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 interface Props {
   type?: | 'default'
-  | 'primary'
-  | 'secondary'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'error'
+    | 'primary'
+    | 'secondary'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'error'
   size?: 'small' | 'medium' | 'large'
   color?: string
   textColor?: string

src/components/Dock/Dock.vue

@@ -61,7 +61,7 @@ onMounted(() => {
     hideDock.value = true
 
   if (settings.value.dockItemVisibilityList.length < currentDockItems.value.length || settings.value.dockItemVisibilityList.length > currentDockItems.value.length) {
-    const newDockItemVisibilityList = ref<{ page: AppPage; visible: boolean }[]>([])
+    const newDockItemVisibilityList = ref<{ page: AppPage, visible: boolean }[]>([])
     currentDockItems.value.forEach((item) => {
       newDockItemVisibilityList.value.push({ page: item.page, visible: true })
     })
@@ -89,8 +89,8 @@ onMounted(() => {
 function toggleDark(e: MouseEvent) {
   const isAppearanceTransition = typeof document !== 'undefined'
   // @ts-expect-error: Transition API
-  && document.startViewTransition
-  && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    && document.startViewTransition
+    && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
   if (!isAppearanceTransition) {
     if (currentAppColorScheme.value === 'light')
       settings.value.theme = 'dark'

src/components/SearchBar/SearchBar.vue

@@ -96,14 +96,14 @@ function handleKeyDown() {
 
   if (
     isShowSuggestion
-        && selectedIndex.value >= suggestions.length - 1
+    && selectedIndex.value >= suggestions.length - 1
   ) {
     selectedIndex.value = suggestions.length - 1
     return
   }
   if (
     !isShowSuggestion
-        && selectedIndex.value >= searchHistory.value.length - 1
+    && selectedIndex.value >= searchHistory.value.length - 1
   ) {
     selectedIndex.value = searchHistory.value.length - 1
     return

src/components/Settings/components/Appearance.vue

@@ -28,7 +28,7 @@ const themeColorOptions = computed<Array<string>>(() => {
 // const bilibiliEvolvedThemeColor = computed(() => {
 //   return getComputedStyle(document.querySelector('html') as HTMLElement).getPropertyValue('--theme-color').trim() ?? '#00a1d6'
 // })
-const wallpapers = computed<Array<{ name: string; url: string; thumbnail: string }>>(() => {
+const wallpapers = computed<Array<{ name: string, url: string, thumbnail: string }>>(() => {
   return [
     {
       name: 'Unsplash Random Nature Image',
@@ -52,7 +52,7 @@ const wallpapers = computed<Array<{ name: string; url: string; thumbnail: string
     },
   ]
 })
-const themeOptions = computed<Array<{ value: string; label: string }>>(() => {
+const themeOptions = computed<Array<{ value: string, label: string }>>(() => {
   return [
     {
       label: t('settings.theme_opt.light'),

src/components/Settings/components/General.vue

@@ -45,7 +45,7 @@ const dockPositions = computed(() => {
   ]
 })
 
-const pageOptions = computed((): { label: string;icon: string; value: string }[] => {
+const pageOptions = computed((): { label: string, icon: string, value: string }[] => {
   return mainStore.dockItems.map((e: any) => {
     return {
       label: t(e.i18nKey),

src/components/Settings/components/SearchPage.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { settings } from '~/logic'
 
-const searchBarFocusCharacters = computed<{ name: string; url: string }[]>(() => {
+const searchBarFocusCharacters = computed<{ name: string, url: string }[]>(() => {
   return [
     { name: '22 娘', url: 'https://pic.imgdb.cn/item/64d4f8891ddac507cc772ce5.png' },
     { name: '33 娘', url: 'https://cdn.jsdelivr.net/gh/hakadao/bilibili-simple-home@master/img/searchBar_33_2.png' },
@@ -9,7 +9,7 @@ const searchBarFocusCharacters = computed<{ name: string; url: string }[]>(() =>
     { name: '33 娘', url: 'https://pic.imgdb.cn/item/64d4fd251ddac507cc8458fa.png' },
   ]
 })
-const wallpapers = computed<Array<{ name: string; url: string; thumbnail: string }>>(() => {
+const wallpapers = computed<Array<{ name: string, url: string, thumbnail: string }>>(() => {
   return [
     {
       name: 'Unsplash Random Nature Image',

src/components/TopBar/components/FavoritesPop.vue

@@ -46,8 +46,8 @@ onMounted(async () => {
       // add the next page of data to the history list
       if (
         favoriteVideosWrap.value.clientHeight
-          + favoriteVideosWrap.value.scrollTop
-          >= favoriteVideosWrap.value.scrollHeight - 20
+        + favoriteVideosWrap.value.scrollTop
+        >= favoriteVideosWrap.value.scrollHeight - 20
         && favoriteResources.length > 0
         && !isLoading.value
       ) {

src/components/TopBar/components/HistoryPop.vue

@@ -67,7 +67,7 @@ onMounted(() => {
       // add the next page of data to the history list
       if (
         historysWrap.value.clientHeight + historysWrap.value.scrollTop
-          >= historysWrap.value.scrollHeight - 20
+        >= historysWrap.value.scrollHeight - 20
         && historys.length > 0
         && !isLoading.value
       ) {

src/components/TopBar/components/MomentsPop.vue

@@ -62,7 +62,7 @@ onMounted(() => {
     momentsWrap.value.addEventListener('scroll', () => {
       if (
         momentsWrap.value.clientHeight + momentsWrap.value.scrollTop
-          >= momentsWrap.value.scrollHeight - 20
+        >= momentsWrap.value.scrollHeight - 20
         && moments.length > 0
         && !isLoading.value
       ) {

src/components/TopBar/components/UserPanelPop.vue

@@ -15,7 +15,7 @@ const mid = computed(() => {
   return getUserID()
 })
 
-const otherLinks = computed((): { name: string; url: string }[] => {
+const otherLinks = computed((): { name: string, url: string }[] => {
   return [
     { name: t('topbar.user_dropdown.accout_settings'), url: 'https://account.bilibili.com/account/home' },
     { name: t('topbar.user_dropdown.uploads_manager'), url: 'https://member.bilibili.com/v2#/upload-manager/article' },

src/components/VideoCard/VideoCard.vue

@@ -33,11 +33,9 @@ interface Props {
   showPreview?: boolean
 }
 
-const props = withDefaults(defineProps<Props>(),
-  {
-    topRightContent: true,
-  },
-)
+const props = withDefaults(defineProps<Props>(), {
+  topRightContent: true,
+})
 
 const videoUrl = computed(() => {
   if (props.bvid || props.aid)

src/composables/useStorageLocal.ts

@@ -23,8 +23,6 @@ const storageLocal: StorageLikeAsync = {
   },
 }
 
-export function useStorageLocal<T>(key: string,
-  initialValue: MaybeRef<T>,
-  options?: UseStorageAsyncOptions<T>): RemovableRef<T> {
+export function useStorageLocal<T>(key: string, initialValue: MaybeRef<T>, options?: UseStorageAsyncOptions<T>): RemovableRef<T> {
   return useStorageAsync(key, initialValue, storageLocal, options)
 }

src/contentScripts/index.ts

@@ -70,7 +70,7 @@ let beforeLoadedStyleEl: HTMLStyleElement
 // We have to manually add a class to the <html> app to ensure that the transition effect is applied
 if (
   (settings.value.adaptToOtherPageStyles && settings.value.theme === 'dark')
-    || (settings.value.adaptToOtherPageStyles && settings.value.theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+  || (settings.value.adaptToOtherPageStyles && settings.value.theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
 )
   document.documentElement.classList.add('bewly-design', 'dark')
 

src/contentScripts/views/App.vue

@@ -2,7 +2,7 @@
 import { useToggle } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 import browser from 'webextension-polyfill'
-import type { Ref } from '@vue/runtime-dom'
+import type { Ref } from 'vue'
 
 import Home from './Home/Home.vue'
 import Search from './Search/Search.vue'

src/contentScripts/views/Favorites/Favorites.vue

@@ -11,7 +11,7 @@ const { t } = useI18n()
 
 const favoriteCategories = reactive<CategoryItem[]>([])
 const favoriteResources = reactive<FavoriteItem[]>([])
-const categoryOptions = reactive<Array<{ value: any; label: string }>>([])
+const categoryOptions = reactive<Array<{ value: any, label: string }>>([])
 
 const selectedCategory = ref<FavoriteCategory>()
 const activatedCategoryCover = ref<string>('')
@@ -117,7 +117,7 @@ async function getFavoriteResources(
 
       if (
         res.data.medias === null
-            || (res.data.medias.length < 20 && favoriteResources.length > 0)
+        || (res.data.medias.length < 20 && favoriteResources.length > 0)
       )
         noMoreContent.value = true
     }

src/logic/storage.ts

@@ -14,7 +14,7 @@ export interface Settings {
   autoHideTopBar: boolean
   dockPosition: 'left' | 'right' | 'bottom'
   autoHideDock: boolean
-  dockItemVisibilityList: { page: AppPage; visible: boolean }[]
+  dockItemVisibilityList: { page: AppPage, visible: boolean }[]
 
   theme: 'light' | 'dark' | 'auto'
   themeColor: string

src/stores/settingsStore.ts

@@ -11,7 +11,7 @@ interface Settings {
   autoHideTopBar: boolean
   dockPosition: 'left' | 'right' | 'bottom'
   autoHideDock: boolean
-  dockItemVisibilityList: { page: AppPage; visible: boolean }[]
+  dockItemVisibilityList: { page: AppPage, visible: boolean }[]
 
   theme: 'light' | 'dark' | 'auto'
   themeColor: string

src/tests/demo.spec.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-describe('Demo', () => {
+describe('demo', () => {
   it('should work', () => {
     expect(1 + 1).toBe(2)
   })

src/utils/authProvider.ts

@@ -29,7 +29,7 @@ export function grantAccessKey(t: any, element: HTMLButtonElement): void {
   const tip = t('auth.err_tip')
   fetch(
     'https://passport.bilibili.com/login/app/third?appkey=5fd5a7d8bfd9b0e6'
-      + '&api=https%3A%2F%2Fwww.mcbbs.net%2Ftemplate%2Fmcbbs%2Fimage%2Fspecial_photo_bg.png&sign=04224646d1fea004e79606d3b038c84a',
+    + '&api=https%3A%2F%2Fwww.mcbbs.net%2Ftemplate%2Fmcbbs%2Fimage%2Fspecial_photo_bg.png&sign=04224646d1fea004e79606d3b038c84a',
     {
       method: 'GET',
       credentials: 'include',

src/utils/main.ts

@@ -93,7 +93,7 @@ export function smoothScrollToTop(element: HTMLElement, duration: number, target
 export function injectCSS(css: string): HTMLStyleElement {
   const el = document.createElement('style')
   el.setAttribute('rel', 'stylesheet')
-  el.innerText = css
+  el.textContent = css
   document.documentElement.appendChild(el)
   return el
 }
@@ -115,10 +115,10 @@ export function delay(time: number) {
 export function isHomePage(): boolean {
   if (
     /https?:\/\/bilibili.com\/?$/.test(location.href)
-  || /https?:\/\/www.bilibili.com\/?$/.test(location.href)
-  || /https?:\/\/www.bilibili.com\/index.html$/.test(location.href)
-  || /https?:\/\/bilibili.com\/\?spm_id_from=.*/.test(location.href)
-  || /https?:\/\/www.bilibili.com\/\?spm_id_from=(.)*/.test(location.href)
+    || /https?:\/\/www.bilibili.com\/?$/.test(location.href)
+    || /https?:\/\/www.bilibili.com\/index.html$/.test(location.href)
+    || /https?:\/\/bilibili.com\/\?spm_id_from=.*/.test(location.href)
+    || /https?:\/\/www.bilibili.com\/\?spm_id_from=(.)*/.test(location.href)
   )
     return true
   return false

tsconfig.json

@@ -1,24 +1,24 @@
 {
   "compilerOptions": {
+    "incremental": false,
+    "target": "es2016",
+    "jsx": "preserve",
+    "lib": ["DOM", "ESNext"],
     "baseUrl": ".",
     "module": "ESNext",
-    "target": "es2016",
-    "lib": ["DOM", "ESNext"],
-    "strict": true,
-    "esModuleInterop": true,
-    "incremental": false,
-    "skipLibCheck": true,
-    "jsx": "preserve",
     "moduleResolution": "node",
+    "paths": {
+      "~/*": ["src/*"]
+    },
     "resolveJsonModule": true,
-    "noUnusedLocals": true,
-    "forceConsistentCasingInFileNames": true,
     "types": [
       "vite/client"
     ],
-    "paths": {
-      "~/*": ["src/*"]
-    }
+    "strict": true,
+    "noUnusedLocals": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true
   },
   "exclude": ["dist", "node_modules"]
 }

vite-mv3-hmr.ts

@@ -50,8 +50,7 @@ export function MV3Hmr(): PluginOption {
           for (const mod of importedModules) {
             code = code.replace(mod.url, normalizeViteUrl(isWin
               ? mod.url.replace(/[A-Z]:\//, '').replace(/:/, '.')
-              : mod.url,
-            mod.type)) // fix invalid colon in /@fs/C:, /@id/plugin-vue:export-helper
+              : mod.url, mod.type)) // fix invalid colon in /@fs/C:, /@id/plugin-vue:export-helper
             writeToDisk(mod.url)
           }
         }
@@ -70,8 +69,7 @@ export function MV3Hmr(): PluginOption {
 
           const targetFile = normalizeFsUrl(isWin
             ? urlModule.url.replace(/[A-Z]:\//, '').replace(/:/, '.')
-            : urlModule.url,
-          urlModule.type) // fix invalid colon in /@fs/C:, /@id/plugin-vue:export-helper
+            : urlModule.url, urlModule.type) // fix invalid colon in /@fs/C:, /@id/plugin-vue:export-helper
           await fs.ensureDir(dirname(targetFile))
           await fs.writeFile(targetFile, code)
         }