From b038fe4f597c4303fadfee66c7367305464af4c4 Mon Sep 17 00:00:00 2001 From: Marvin Alexander Krebber Date: Thu, 9 Jan 2025 20:04:31 +0100 Subject: [PATCH 1/5] disable minification on dev command --- package.json | 8 ++++---- vite.config.ts | 3 +++ 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 791fd12..fdfe433 100644 --- a/package.json +++ b/package.json @@ -89,11 +89,11 @@ }, "scripts": { "build": "npm run build:chrome && npm run build:firefox", - "build:chrome": "cross-env NODE_ENV=production vite build -c vite.chrome.config.ts", - "build:firefox": "cross-env NODE_ENV=production vite build -c vite.firefox.config.ts", + "build:chrome": "cross-env MINIFY=true NODE_ENV=production vite build -c vite.chrome.config.ts", + "build:firefox": "cross-env MINIFY=true NODE_ENV=production vite build -c vite.firefox.config.ts", "dev": "concurrently \"npm run dev:chrome\" \"npm run dev:firefox\"", - "dev:chrome": "cross-env NODE_ENV=development vite -c vite.chrome.config.ts", - "dev:firefox": "cross-env NODE_ENV=development vite build --mode development --watch -c vite.firefox.config.ts", + "dev:chrome": "cross-env MINIFY=false NODE_ENV=development vite -c vite.chrome.config.ts", + "dev:firefox": "cross-env MINIFY=false NODE_ENV=development vite build --mode development --watch -c vite.firefox.config.ts", "format": "prettier --write .", "launch": "tsx scripts/launch.ts", "launch:all": "tsx scripts/launch.ts --all", diff --git a/vite.config.ts b/vite.config.ts index cecf85b..08d06cf 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -17,6 +17,8 @@ import { dirname, relative, resolve } from "node:path" import "dotenv/config" const PORT = Number(process.env.PORT || "") || 3303 +const shouldMinify = process.env.MINIFY === "true" +console.log("MINIFY", shouldMinify) function getImmediateDirectories(dirPath: string): string[] { try { @@ -173,6 +175,7 @@ export default defineConfig({ devtoolsPanel: "src/ui/devtools-panel/index.html", }, }, + minify: shouldMinify, }, server: { From ddc9aed8569aa67bfe687473a11c55f3ae9d3114 Mon Sep 17 00:00:00 2001 From: Marvin Alexander Krebber Date: Thu, 9 Jan 2025 20:15:59 +0100 Subject: [PATCH 2/5] Revert "disable minification on dev command" This reverts commit b038fe4f597c4303fadfee66c7367305464af4c4. --- package.json | 8 ++++---- vite.config.ts | 3 --- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index fdfe433..791fd12 100644 --- a/package.json +++ b/package.json @@ -89,11 +89,11 @@ }, "scripts": { "build": "npm run build:chrome && npm run build:firefox", - "build:chrome": "cross-env MINIFY=true NODE_ENV=production vite build -c vite.chrome.config.ts", - "build:firefox": "cross-env MINIFY=true NODE_ENV=production vite build -c vite.firefox.config.ts", + "build:chrome": "cross-env NODE_ENV=production vite build -c vite.chrome.config.ts", + "build:firefox": "cross-env NODE_ENV=production vite build -c vite.firefox.config.ts", "dev": "concurrently \"npm run dev:chrome\" \"npm run dev:firefox\"", - "dev:chrome": "cross-env MINIFY=false NODE_ENV=development vite -c vite.chrome.config.ts", - "dev:firefox": "cross-env MINIFY=false NODE_ENV=development vite build --mode development --watch -c vite.firefox.config.ts", + "dev:chrome": "cross-env NODE_ENV=development vite -c vite.chrome.config.ts", + "dev:firefox": "cross-env NODE_ENV=development vite build --mode development --watch -c vite.firefox.config.ts", "format": "prettier --write .", "launch": "tsx scripts/launch.ts", "launch:all": "tsx scripts/launch.ts --all", diff --git a/vite.config.ts b/vite.config.ts index 08d06cf..cecf85b 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -17,8 +17,6 @@ import { dirname, relative, resolve } from "node:path" import "dotenv/config" const PORT = Number(process.env.PORT || "") || 3303 -const shouldMinify = process.env.MINIFY === "true" -console.log("MINIFY", shouldMinify) function getImmediateDirectories(dirPath: string): string[] { try { @@ -175,7 +173,6 @@ export default defineConfig({ devtoolsPanel: "src/ui/devtools-panel/index.html", }, }, - minify: shouldMinify, }, server: { From b4a2593a47c3f412f41bf80f0002b7879847f4e9 Mon Sep 17 00:00:00 2001 From: Marvin Alexander Krebber Date: Sun, 19 Jan 2025 17:27:37 +0100 Subject: [PATCH 3/5] storage, added promise, nextTick, fixed bugs --- src/composables/useBrowserStorage.ts | 165 ++++++++++++--------------- src/stores/options.store.ts | 4 +- 2 files changed, 73 insertions(+), 96 deletions(-) diff --git a/src/composables/useBrowserStorage.ts b/src/composables/useBrowserStorage.ts index 7787621..b308106 100644 --- a/src/composables/useBrowserStorage.ts +++ b/src/composables/useBrowserStorage.ts @@ -1,111 +1,88 @@ -import { ref, watch } from "vue" +import { ref, watch, nextTick } from "vue" function mergeDeep(defaults: any, source: any): any { - // Merge the default options with the stored options - const output = { ...defaults } // Start with defaults + // Merge the default options with the stored options + const output = { ...defaults } // Start with defaults - Object.keys(defaults).forEach((key) => { - const defaultValue = defaults[key] - const sourceValue = source?.[key] + Object.keys(defaults).forEach((key) => { + const defaultValue = defaults[key] + const sourceValue = source?.[key] - if (isObject(defaultValue) && sourceValue != null) { - // Recursively merge nested objects - output[key] = mergeDeep(defaultValue, sourceValue) - } else if (checkType(defaultValue, sourceValue)) { - output[key] = sourceValue - } else { - // If the type is different, use the default value - output[key] = defaultValue - } - }) + if (isObject(defaultValue) && sourceValue != null) { + // Recursively merge nested objects + output[key] = mergeDeep(defaultValue, sourceValue) + } else if (checkType(defaultValue, sourceValue)) { + output[key] = sourceValue + } else { + // If the type is different, use the default value + output[key] = defaultValue + console.log("Type mismatch", key, sourceValue) + } + }) - return output + return output } function checkType(defaultValue: any, value: any): boolean { - // Check if the value type is the same type as the default value or null - // there are only strings, booleans, nulls and arrays as types left - return ( - (typeof value === typeof defaultValue && - Array.isArray(value) == Array.isArray(defaultValue)) || - value === null - ) + // Check if the value type is the same type as the default value or null + // there are only strings, booleans, nulls and arrays as types left + return (typeof value === typeof defaultValue && Array.isArray(value) == Array.isArray(defaultValue)) || value === null } function isObject(value: any): boolean { - return value !== null && value instanceof Object && !Array.isArray(value) + return value !== null && value instanceof Object && !Array.isArray(value) } export function useBrowserSyncStorage(key: string, defaultValue: T) { - const data = ref(defaultValue) - // Blocking setting storage if it is updating from storage - let isUpdatingFromStorage = false - // Initialize storage with the value from chrome.storage.sync - chrome.storage.sync.get(key, (result) => { - if (result?.[key] !== undefined) { - if (isObject(defaultValue) && isObject(result[key])) { - data.value = mergeDeep(defaultValue, result[key]) - } else if (checkType(defaultValue, result[key])) { - data.value = result[key] - } - } - }) - - // Watch for changes in the storage and update chrome.storage.sync - watch( - data, - (newValue) => { - if (!isUpdatingFromStorage) - chrome.storage.sync.set({ [key]: toRaw(newValue) }) - }, - { deep: true }, - ) - // Add the onChanged listener here - chrome.storage.sync.onChanged.addListener(function (changes) { - if (changes?.[key]) { - isUpdatingFromStorage = true - const { oldValue, newValue } = changes[key] - data.value = newValue - setTimeout(() => { - isUpdatingFromStorage = false - }, 5) - } - }) - return data + return useBrowserStorage(key, defaultValue, "sync") } export function useBrowserLocalStorage(key: string, defaultValue: T) { - const data = ref(defaultValue) - // Blocking setting storage if it is updating from storage - let isUpdatingFromStorage = false - // Initialize storage with the value from chrome.storage.local - chrome.storage.local.get(key, (result) => { - if (result?.[key] !== undefined) { - if (isObject(defaultValue) && isObject(result[key])) { - data.value = mergeDeep(defaultValue, result[key]) - } else if (checkType(defaultValue, result[key])) { - data.value = result[key] - } - } - }) + return useBrowserStorage(key, defaultValue, "local") +} + +function useBrowserStorage(key: string, defaultValue: T, storageType: "sync" | "local" = "sync") { + const data = ref(defaultValue) + // Blocking setting storage if it is updating from storage + let isUpdatingFromStorage = true + const defaultIsObject = isObject(defaultValue) + // Initialize storage with the value from chrome.storage + const promise = new Promise((resolve) => { + chrome.storage[storageType].get(key, async (result) => { + if (result?.[key] !== undefined) { + if (defaultIsObject && isObject(result[key])) { + data.value = mergeDeep(defaultValue, result[key]) + } else if (checkType(defaultValue, result[key])) { + data.value = result[key] + } + } + await nextTick() + isUpdatingFromStorage = false + resolve(true) + }) + }) - // Watch for changes in the storage and update chrome.storage.local - watch( - data, - (newValue) => { - if (!isUpdatingFromStorage) - chrome.storage.local.set({ [key]: toRaw(newValue) }) - }, - { deep: true }, - ) - // Add the onChanged listener here - chrome.storage.local.onChanged.addListener(function (changes) { - if (changes?.[key]) { - isUpdatingFromStorage = true - const { oldValue, newValue } = changes[key] - data.value = newValue - setTimeout(() => { - isUpdatingFromStorage = false - }, 5) - } - }) - return data + // Watch for changes in the storage and update chrome.storage + watch( + data, + (newValue) => { + if (!isUpdatingFromStorage) { + if (checkType(defaultValue, newValue)) { + chrome.storage[storageType].set({ [key]: toRaw(newValue) }) + } else { + console.error("not updating " + key + ": type mismatch") + } + } + }, + { deep: true, flush: "post" }, + ) + // Add the onChanged listener here + chrome.storage[storageType].onChanged.addListener(async function (changes) { + if (changes?.[key]) { + isUpdatingFromStorage = true + const { oldValue, newValue } = changes[key] + data.value = newValue + await nextTick() + isUpdatingFromStorage = false + } + }) + return { data, promise } } diff --git a/src/stores/options.store.ts b/src/stores/options.store.ts index 4e31d57..3338785 100644 --- a/src/stores/options.store.ts +++ b/src/stores/options.store.ts @@ -1,7 +1,7 @@ export const useOptionsStore = defineStore("options", () => { const { isDark, toggleDark } = useTheme() - const profile = useBrowserSyncStorage<{ + const { data: profile } = useBrowserSyncStorage<{ name: string age: number }>("profile", { @@ -9,7 +9,7 @@ export const useOptionsStore = defineStore("options", () => { age: 24, }) - const others = useBrowserLocalStorage<{ + const { data: others } = useBrowserLocalStorage<{ awesome: boolean counter: number }>("options", { From 91968461599633a3594d53ce2cc7f455c18d1e0f Mon Sep 17 00:00:00 2001 From: Marvin Alexander Krebber Date: Sun, 19 Jan 2025 17:31:06 +0100 Subject: [PATCH 4/5] { data: colorSchema } --- src/composables/useTheme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/composables/useTheme.ts b/src/composables/useTheme.ts index 3b5aef1..af74941 100644 --- a/src/composables/useTheme.ts +++ b/src/composables/useTheme.ts @@ -2,7 +2,7 @@ import type { BasicColorSchema } from "@vueuse/core" import { useBrowserLocalStorage } from "./useBrowserStorage" export function useTheme() { - const colorSchema = useBrowserLocalStorage("mode", "auto") + const { data: colorSchema } = useBrowserLocalStorage("mode", "auto") const isDark = useDark({ initialValue: colorSchema, From 967357ddecd06fdafe63f34b0d5036a561e49fed Mon Sep 17 00:00:00 2001 From: Marvin Alexander Krebber Date: Sun, 19 Jan 2025 17:31:39 +0100 Subject: [PATCH 5/5] { data: currentLocale } --- src/composables/useLocale.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/composables/useLocale.ts b/src/composables/useLocale.ts index f33063b..edef049 100644 --- a/src/composables/useLocale.ts +++ b/src/composables/useLocale.ts @@ -7,7 +7,7 @@ export function useLocale() { const localeKey = "user-locale" // Use the useBrowserLocalStorage composable to persist the locale - const currentLocale = useBrowserLocalStorage(localeKey, defaultLocale) + const { data: currentLocale } = useBrowserLocalStorage(localeKey, defaultLocale) // Initialize the locale from i18n // currentLocale.value = i18n.global.locale.value