proj: minor ref

Author: ChouChiu

src/components/ScrollToTopButton.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, computed } from "vue";
 
+const CIRCUMFERENCE = 2 * Math.PI * 18;
+
 const scrollTop = ref(0);
 const scrollHeight = ref(0);
 const clientHeight = ref(0);
@@ -12,15 +14,21 @@ const progress = computed(() => {
 	return (scrollTop.value / (scrollHeight.value - clientHeight.value)) * 100;
 });
 
-const circumference = 2 * Math.PI * 18;
 const strokeDashoffset = computed(() => {
-	return circumference - (progress.value / 100) * circumference;
+	return CIRCUMFERENCE - (progress.value / 100) * CIRCUMFERENCE;
 });
 
+let ticking = false;
+
 function onScroll() {
-	scrollTop.value = document.documentElement.scrollTop;
-	scrollHeight.value = document.documentElement.scrollHeight;
-	clientHeight.value = document.documentElement.clientHeight;
+	if (ticking) return;
+	ticking = true;
+	requestAnimationFrame(() => {
+		scrollTop.value = document.documentElement.scrollTop;
+		scrollHeight.value = document.documentElement.scrollHeight;
+		clientHeight.value = document.documentElement.clientHeight;
+		ticking = false;
+	});
 }
 
 function scrollToTop() {
@@ -61,7 +69,7 @@ onUnmounted(() => {
           r="18"
           cx="22"
           cy="22"
-          :stroke-dasharray="circumference"
+          :stroke-dasharray="CIRCUMFERENCE"
           :stroke-dashoffset="strokeDashoffset"
         />
       </svg>

src/components/SettingsPanel.vue

@@ -4,22 +4,33 @@ import { isReleasePage } from "../utils/release-sorter";
 
 const open = ref(false);
 const onReleasePage = ref(isReleasePage());
+const settingsRef = ref<HTMLElement>();
 
-let checkInterval: ReturnType<typeof setInterval>;
+function checkPage() {
+	onReleasePage.value = isReleasePage();
+}
+
+function onClickOutside(e: MouseEvent) {
+	if (open.value && settingsRef.value && !settingsRef.value.contains(e.target as Node)) {
+		open.value = false;
+	}
+}
 
 onMounted(() => {
-	checkInterval = setInterval(() => {
-		onReleasePage.value = isReleasePage();
-	}, 1000);
+	document.addEventListener("turbo:load", checkPage);
+	window.addEventListener("popstate", checkPage);
+	document.addEventListener("click", onClickOutside);
 });
 
 onUnmounted(() => {
-	clearInterval(checkInterval);
+	document.removeEventListener("turbo:load", checkPage);
+	window.removeEventListener("popstate", checkPage);
+	document.removeEventListener("click", onClickOutside);
 });
 </script>
 
 <template>
-  <div v-if="onReleasePage" class="sp-settings">
+  <div v-if="onReleasePage" ref="settingsRef" class="sp-settings">
     <Transition name="sp-panel">
       <div v-if="open" class="sp-panel" @wheel.stop>
         <slot />

src/main.ts

@@ -5,10 +5,6 @@ import { initReleaseSorter } from "./utils/release-sorter";
 
 initReleaseSorter();
 
-createApp(App).mount(
-	(() => {
-		const app = document.createElement("div");
-		document.body.append(app);
-		return app;
-	})(),
-);
+const app = document.createElement("div");
+document.body.append(app);
+createApp(App).mount(app);

src/style.css

@@ -1,5 +1,12 @@
 #app {
-	all: unset;
+	position: static;
+	display: contents;
+	margin: 0;
+	padding: 0;
+	border: none;
+	background: none;
+	font: inherit;
+	color: inherit;
 }
 
 .better-gh-matched {

src/utils/release-sorter.ts

@@ -120,10 +120,18 @@ export function detectArch(): Exclude<ArchOption, "auto"> {
 	const ua = navigator.userAgent.toLowerCase();
 	if (/arm64|aarch64/.test(ua)) return "arm64";
 	if (/arm/.test(ua)) return "arm";
-	if (/x86/.test(ua) || /i386|i686/.test(ua)) return "x86";
+	if (/x86(?!_64)/.test(ua) || /i386|i686/.test(ua)) return "x86";
 	return "x64";
 }
 
+function resolveOs(os: OsOption): Exclude<OsOption, "auto"> {
+	return os === "auto" ? detectPlatform() : os;
+}
+
+function resolveArch(arch: ArchOption): Exclude<ArchOption, "auto"> {
+	return arch === "auto" ? detectArch() : arch;
+}
+
 export function getSelectedArch(): ArchOption {
 	const saved = GM_getValue(ARCH_STORAGE_KEY, "auto");
 	if (ARCH_OPTIONS.includes(saved as ArchOption)) return saved as ArchOption;
@@ -144,15 +152,22 @@ export function setSelectedPkg(pkg: PkgOption): void {
 	GM_setValue(PKG_STORAGE_KEY, pkg);
 }
 
+let keywordCache: Set<string> | null = null;
+let keywordCacheKey = "";
+
+const regexCache = new Map<string, RegExp>();
+
 function buildMatchKeywords(): Set<string> {
 	const os = getSelectedOs();
 	const arch = getSelectedArch();
 	const pkg = getSelectedPkg();
+	const cacheKey = `${os}:${arch}:${pkg}`;
+	if (keywordCache && keywordCacheKey === cacheKey) return keywordCache;
 
-	const resolvedOs = os === "auto" ? detectPlatform() : os;
+	const resolvedOs = resolveOs(os);
 	const keywords = new Set(SYSTEM_KEYWORDS[resolvedOs]);
 
-	const resolvedArch = arch === "auto" ? detectArch() : arch;
+	const resolvedArch = resolveArch(arch);
 	for (const kw of ARCH_KEYWORDS[resolvedArch]) {
 		keywords.add(kw);
 	}
@@ -163,6 +178,8 @@ function buildMatchKeywords(): Set<string> {
 		for (const kw of PKG_KEYWORDS.portable[resolvedOs]) keywords.add(kw);
 	}
 
+	keywordCache = keywords;
+	keywordCacheKey = cacheKey;
 	return keywords;
 }
 
@@ -171,15 +188,15 @@ export function getKeywordsPreview(
 	arch: ArchOption,
 	pkg: PkgOption,
 ): string[] {
-	const resolvedOs = os === "auto" ? detectPlatform() : os;
-	const resolvedArch = arch === "auto" ? detectArch() : arch;
+	const resolvedOs = resolveOs(os);
+	const resolvedArch = resolveArch(arch);
 
 	const result = [
 		...SYSTEM_KEYWORDS[resolvedOs],
 		...ARCH_KEYWORDS[resolvedArch],
+		...PKG_KEYWORDS.installer[resolvedOs],
 	];
 
-	result.push(...PKG_KEYWORDS.installer[resolvedOs]);
 	if (pkg === "all") {
 		result.push(...PKG_KEYWORDS.portable[resolvedOs]);
 	} else {
@@ -211,9 +228,12 @@ function extractFilename(anchor: HTMLAnchorElement): string | null {
 function countMatches(filename: string, keywords: Set<string>): number {
 	let count = 0;
 	for (const keyword of keywords) {
-		if (new RegExp(`(^|[^a-z0-9])${keyword}([^a-z0-9]|$)`).test(filename)) {
-			count++;
+		let re = regexCache.get(keyword);
+		if (!re) {
+			re = new RegExp(`(^|[^a-z0-9])${keyword}([^a-z0-9]|$)`);
+			regexCache.set(keyword, re);
 		}
+		if (re.test(filename)) count++;
 	}
 	return count;
 }

tsconfig.app.json

@@ -1,7 +1,7 @@
 {
 	"compilerOptions": {
 		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-		"target": "ES2020",
+		"target": "ES2022",
 		"useDefineForClassFields": true,
 		"module": "ESNext",
 		"lib": ["ES2020", "DOM", "DOM.Iterable"],

vite.config.ts

@@ -11,7 +11,7 @@ export default defineConfig({
 			userscript: {
 				name: "Better Github",
 				description: "一个提升 GitHub 浏览体验的用户脚本",
-				icon: "https://vitejs.dev/logo.svg",
+				icon: "https://github.com/favicon.ico",
 				namespace: "npm/vite-plugin-monkey",
 				match: ["https://github.com/*"],
 				grant: ["GM_addStyle", "GM_getValue", "GM_setValue"],