#develop fixed typos

Author: bennobuilder

src/entrypoints/nodox.content/content-bridge.ts

@@ -1,4 +1,4 @@
 import { ContentBridge } from '@/lib';
-import { type TP2BGetPatterns, type TP2BUpdatedPatterns } from '@/types';
+import { type TP2BUpdatedPatterns } from '@/types';
 
-export const contentBridge = new ContentBridge<any, TP2BUpdatedPatterns | TP2BGetPatterns>();
+export const contentBridge = new ContentBridge<any, TP2BUpdatedPatterns>();

src/entrypoints/nodox.content/store.ts

@@ -1,31 +1,18 @@
-import { createState, withPersist, type StorageInterface } from 'feature-state';
+import { createState } from 'feature-state';
 import { storage } from 'wxt/storage';
 import { type TPattern } from '@/types';
 
 import { contentBridge } from './content-bridge';
 
-const localStorage: StorageInterface<TPattern[]> = {
-	async load(key) {
-		return (await storage.getItem<TPattern[]>(`local:${key}`)) ?? [];
-	},
-	async save(key, value) {
-		await storage.setItem(`local:${key}`, value);
-		return true;
-	},
-	async delete(key) {
-		await storage.removeItem(`local:${key}`);
-		return true;
-	}
-};
+export const $patterns = createState<TPattern[]>([]);
 
-export const $patterns = withPersist(createState<TPattern[]>([]), localStorage, 'patterns');
-
-$patterns.persist();
-
-contentBridge.listen('updated-patterns', (payload) => {
-	$patterns.set(payload.patterns);
+loadPatternsFormStorage().catch(() => {
+	// do nothing
 });
 
-contentBridge.listen('get-patterns', () => {
-	return { patterns: $patterns.get() as TPattern[] };
-});
+contentBridge.listen('updated-patterns', loadPatternsFormStorage);
+
+async function loadPatternsFormStorage(): Promise<void> {
+	const patterns = (await storage.getItem<TPattern[]>(`local:patterns`)) ?? [];
+	$patterns.set(patterns);
+}

src/entrypoints/popup/App.tsx

@@ -25,7 +25,6 @@ export const App: React.FC = () => {
 		raw: string;
 		error: string | null;
 	}>({ regex: null, raw: '', error: null });
-	const [, forceRender] = React.useReducer((s: number) => s + 1, 0);
 	const [isActive, setIsActive] = React.useState(true);
 
 	const handlePatternChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>): void => {
@@ -43,19 +42,16 @@ export const App: React.FC = () => {
 	const addPattern = React.useCallback(() => {
 		if (currentPattern.regex != null) {
 			$patterns.set([
-				...patterns,
+				...$patterns.get(),
 				{ source: currentPattern.regex.source, flags: currentPattern.regex.flags, isActive: true }
 			]);
 			setCurrentPattern({ regex: null, raw: '', error: null });
 		}
-	}, [currentPattern, patterns]);
+	}, [currentPattern]);
 
-	const removePattern = React.useCallback(
-		(index: number) => {
-			$patterns.set(patterns.filter((_, i) => i !== index));
-		},
-		[patterns]
-	);
+	const removePattern = React.useCallback((index: number) => {
+		$patterns.set($patterns.get().filter((_, i) => i !== index));
+	}, []);
 
 	return (
 		<div className="h-[500px] w-[350px] overflow-y-auto bg-background p-4 text-foreground">
@@ -111,14 +107,13 @@ export const App: React.FC = () => {
 										pressed={pattern.isActive}
 										onPressedChange={(pressed) => {
 											$patterns.set(
-												patterns.map((p, i) => {
+												$patterns.get().map((p, i) => {
 													if (i === index) {
 														return { ...p, isActive: pressed };
 													}
 													return p;
 												})
 											);
-											forceRender();
 										}}
 										className="text-blue-500 hover:bg-transparent hover:text-blue-400 data-[state=on]:bg-transparent data-[state=on]:text-gray-500 data-[state=on]:hover:text-gray-400"
 									>

src/entrypoints/popup/popup-bridge.ts

@@ -1,4 +1,4 @@
 import { PopupBridge } from '@/lib';
-import { type TP2BGetPatterns, type TP2BUpdatedPatterns } from '@/types';
+import { type TP2BUpdatedPatterns } from '@/types';
 
-export const popupBridge = new PopupBridge<TP2BUpdatedPatterns | TP2BGetPatterns, any>();
+export const popupBridge = new PopupBridge<TP2BUpdatedPatterns, any>();

src/entrypoints/popup/store.ts

@@ -6,22 +6,30 @@ import { popupBridge } from './popup-bridge';
 export const $patterns = withPersist(
 	createState<TPattern[]>([{ source: 'Benno', flags: 'g', isActive: true }]),
 	{
-		async load() {
-			const response = await popupBridge.sendMessageToContentOnActiveTab('get-patterns', undefined);
-			return response?.patterns ?? [];
+		async load(key) {
+			return (await storage.getItem<TPattern[]>(`local:${key}`)) ?? [];
 		},
-		async save(_, value) {
-			await popupBridge.sendMessageToContentOnAllTabs('updated-patterns', {
-				patterns: value
-			});
+		async save(key, value) {
+			await storage.setItem(`local:${key}`, value);
+			try {
+				await popupBridge.sendMessageToContentOnAllTabs('updated-patterns', undefined);
+			} catch (e) {
+				// do nothing
+			}
 			return true;
 		},
-		delete() {
-			// TODO
+		async delete(key) {
+			await storage.removeItem(`local:${key}`);
 			return true;
 		}
 	},
 	'patterns'
 );
 
-$patterns.persist();
+$patterns.persist().catch(() => {
+	// do nothing
+});
+
+$patterns.listen((value) => {
+	console.log('Changed', { value });
+});

src/types.ts

@@ -1,17 +1,6 @@
 import { type TBridgeMessage } from '@/lib';
 
-export type TP2BUpdatedPatterns = TBridgeMessage<
-	'content',
-	'updated-patterns',
-	{ patterns: TPattern[] }
->;
-
-export type TP2BGetPatterns = TBridgeMessage<
-	'content',
-	'get-patterns',
-	undefined,
-	{ patterns: TPattern[] }
->;
+export type TP2BUpdatedPatterns = TBridgeMessage<'content', 'updated-patterns'>;
 
 export interface TPattern {
 	source: string;