feat: semi

Author: sheepzh

.vscode/settings.json

@@ -13,6 +13,7 @@
     "js/ts.format.insertSpaceAfterCommaDelimiter": true,
     "js/ts.preferences.quoteStyle": "single",
     "js/ts.format.semicolons": "remove",
+    "js/ts.preferences.preferTypeOnlyAutoImports": true,
     "js/ts.format.insertSpaceBeforeFunctionParenthesis": false,
     "files.eol": "\n",
     "cSpell.words": [

package.json

@@ -30,33 +30,33 @@
     "license": "MIT",
     "devDependencies": {
         "@commitlint/types": "^21.2.0",
-        "@crowdin/crowdin-api-client": "^1.56.3",
+        "@crowdin/crowdin-api-client": "^1.56.4",
         "@emotion/babel-plugin": "^11.13.5",
         "@rsdoctor/rspack-plugin": "^1.6.3",
-        "@rspack/cli": "^2.2.0",
-        "@rspack/core": "^2.2.0",
+        "@rspack/cli": "^2.2.1",
+        "@rspack/core": "^2.2.1",
         "@rstest/core": "^0.11.10",
         "@rstest/coverage-istanbul": "^0.11.10",
         "@types/chrome": "0.2.7",
         "@types/decompress": "^4.2.7",
         "@types/firefox-webext-browser": "^143.0.0",
-        "@types/node": "^26.3.0",
+        "@types/node": "^26.4.0",
         "@vue/babel-plugin-jsx": "^3.0.0",
         "babel-loader": "^10.1.1",
         "commitlint": "^21.2.2",
-        "css-loader": "^7.1.4",
+        "css-loader": "^7.1.5",
         "decompress": "^4.2.1",
         "fake-indexeddb": "^6.2.5",
         "husky": "^9.1.7",
         "jsdom": "^30.0.1",
         "jszip": "^3.10.1",
-        "knip": "^6.32.2",
+        "knip": "^6.33.0",
         "postcss": "^8.5.26",
         "postcss-loader": "^8.2.1",
         "postcss-rtlcss": "^6.0.0",
         "puppeteer": "^25.9.0",
         "ts-checker-rspack-plugin": "^1.6.1",
-        "tsx": "^4.23.12",
+        "tsx": "^4.23.13",
         "typescript": "7.0.2",
         "unplugin-element-plus": "^0.11.2"
     },
@@ -67,8 +67,8 @@
         "element-plus": "2.14.5",
         "qrcode-generator": "^2.0.4",
         "typescript-guard": "0.2.6",
-        "vue": "^3.5.41",
-        "vue-router": "^5.2.0"
+        "vue": "^3.5.42",
+        "vue-router": "^5.3.0"
     },
     "engines": {
         "node": ">=22"

src/background/limit-processor.ts

@@ -6,6 +6,7 @@
  */
 
 import { listTabs, sendMsg2Tab } from "@api/chrome/tab"
+import optionHolder from '@service/components/option-holder'
 import { getSite } from '@service/site-service'
 import { matches } from "@util/limit"
 import { extractHostname } from '@util/pattern'
@@ -25,6 +26,26 @@ function initDailyBroadcast() {
     )
 }
 
+function anyChanged(
+    newVal: tt4b.option.LimitOption,
+    oldVal: tt4b.option.LimitOption,
+    ...keys: (keyof tt4b.option.LimitOption)[]
+) {
+    return keys.some(key => newVal[key] !== oldVal[key])
+}
+
+function initOptionBroadcast() {
+    optionHolder.addChangeListener(async (newVal, oldVal) => {
+        if (!anyChanged(newVal, oldVal, 'limitCountdown', 'limitDelayDuration')) return
+        const tabs = await listTabs()
+        for (const { id: tabId } of tabs) {
+            try {
+                tabId && await sendMsg2Tab(tabId, 'limitOptionChanged', newVal)
+            } catch { }
+        }
+    })
+}
+
 const processAskHitVisit = async (item: tt4b.limit.Item) => {
     let tabs = await listTabs()
     const { cond } = item
@@ -55,6 +76,7 @@ async function querySummary(): Promise<tt4b.limit.Summary | undefined> {
 
 export default function init(dispatcher: MessageDispatcher) {
     initDailyBroadcast()
+    initOptionBroadcast()
 
     dispatcher
         .register('limit.list', selectLimit)

src/background/service/components/option-holder.ts

@@ -27,7 +27,7 @@ class OptionHolder {
     }
 
     addChangeListener(listener: ChangeListener) {
-        listener && this.#listeners.push(listener)
+        this.#listeners.push(listener)
     }
 
     async set(option: Partial<tt4b.option.AllOption>): Promise<void> {

src/content-script/limit/countdown/component/common.ts

@@ -0,0 +1,38 @@
+export const ICON_SIZE = 40
+export const HALF_SIZE = ICON_SIZE / 2
+
+export type Position = { x: number, y: number }
+export type Edge = 'left' | 'right'
+
+export abstract class StatefulNode<State, E extends Element> {
+    el: E
+    state: State | null = null
+
+    constructor() {
+        this.el = this.init()
+    }
+
+    protected abstract init(): E
+
+    render(state: State) {
+        if (this.sameAsCurrent(state)) return
+        this.doRender(state, this.state)
+        this.state = state
+    }
+
+    protected sameAsCurrent(newState: State) {
+        return newState === this.state
+    }
+
+    protected abstract doRender(state: State, last: State | null): void
+}
+
+export const getViewportSize = () => ({ w: window.innerWidth, h: window.innerHeight })
+
+export function clampPosition({ x, y }: Position): Position {
+    const { w, h } = getViewportSize()
+    return {
+        x: Math.max(HALF_SIZE, Math.min(w - HALF_SIZE, x)),
+        y: Math.max(HALF_SIZE, Math.min(h - HALF_SIZE, y)),
+    }
+}