fix: upgrade

Author: sylingd

src/pages/background/core/rules.ts

@@ -223,6 +223,7 @@ function remove(tableName: TABLE_NAMES, id: number): Promise<void> {
         updateCache(tableName);
         notify.other({ method: APIs.ON_EVENT, event: EVENTs.RULE_DELETE, table: tableName, id: Number(id) });
         emitter.emit(emitter.INNER_RULE_REMOVE, { table: tableName, id: Number(id) });
+        getLocal().remove(`rule_switch_${tableName}-${id}`);
         // check common mark
         getLocal()
           .get('common_rule')

src/pages/background/upgrade.ts

@@ -7,7 +7,6 @@ import { getVirtualKey, isValidArray } from '@/share/core/utils';
 import { getDatabase } from './core/db';
 import { getAll, save, updateCache, waitLoad } from './core/rules';
 
-// Upgrade
 async function doUpgrade() {
   if (typeof localStorage !== 'undefined') {
     const downloadHistory = localStorage.getItem('dl_history');
@@ -24,7 +23,7 @@ async function doUpgrade() {
     version = 0;
   }
   if (version < 1) {
-    // Upgrade group
+    // Upgrade groups
     const rebindRuleWithGroup = (group) => {
       return new Promise((resolve) => {
         const cacheQueue: Array<Promise<void>> = [];
@@ -70,20 +69,17 @@ async function doUpgrade() {
       if (groups) {
         const g = JSON.parse(groups);
         localStorage.removeItem('groups');
-        rebindRuleWithGroup(g);
+        await rebindRuleWithGroup(g);
       } else {
-        storage
-          .getLocal()
-          .get('groups')
-          .then((r) => {
-            if (r.groups !== undefined) {
-              rebindRuleWithGroup(r.groups).then(() => storage.getLocal().remove('groups'));
-            } else {
-              const g = {};
-              g[browser.i18n.getMessage('ungrouped')] = [];
-              rebindRuleWithGroup(g);
-            }
-          });
+        const r = await storage.getLocal().get('groups');
+        if (r.groups !== undefined) {
+          await rebindRuleWithGroup(r.groups);
+          await storage.getLocal().remove('groups');
+        } else {
+          const g = {};
+          g[browser.i18n.getMessage('ungrouped')] = [];
+          await rebindRuleWithGroup(g);
+        }
       }
     }
   }
@@ -120,27 +116,12 @@ async function doUpgrade() {
       });
     });
     await Promise.all(queue);
-    tableToUpdate.forEach((table) => {
-      updateCache(table);
-    });
-    // rule_switch_
+    await Promise.all(tableToUpdate.map((table) => updateCache(table)));
   }
 
-  storage.getLocal().set({
+  await storage.getLocal().set({
     version_mark: 2,
   });
 }
 
-if (MANIFEST_VER === 'v3') {
-  browser.runtime.onInstalled.addListener((details) => {
-    if (IS_DEV) {
-      console.log('chrome onInstalled', details);
-    }
-    if (details.reason !== 'install' && details.reason !== 'update') {
-      return;
-    }
-    doUpgrade();
-  });
-} else {
-  doUpgrade();
-}
+doUpgrade();

src/pages/options/sections/rules/edit/form-content/exclude.tsx

@@ -57,7 +57,7 @@ const Exclude = () => {
         <Form.Input
           label={t('match_regexp')}
           field="condition.excludeRegex"
-          helpText={MANIFEST_VER === 'v3' ? <Text type="tertiary">{t('lite_not_supported')}</Text> : undefined}
+          helpText={MANIFEST_VER === 'v3' ? <Text type="tertiary">{t('lite_not_support')}</Text> : undefined}
         />
       )}
       {editExcludeType.includes('domain') && (

src/pages/options/sections/rules/edit/form-content/execution.tsx

@@ -1,19 +1,19 @@
-import {
-  Form,
-  useFormState,
-} from '@douyinfe/semi-ui';
+import { Form, useFormState } from '@douyinfe/semi-ui';
 import * as React from 'react';
 import { BoolRadioGroupField } from '@/pages/options/components/bool-radio';
 import { RULE_TYPE } from '@/share/core/constant';
 import { t } from '@/share/core/utils';
 import HeaderField from '@/share/components/header-field';
+import usePref from '@/share/hooks/use-pref';
 import { CodeEditorField } from '../code-editor';
 import ENCODING_LIST from '../encoding';
 import { RuleInput } from '../utils';
 
 const Execution = () => {
   const { values } = useFormState();
 
+  const [showCommonHeader] = usePref('show-common-header');
+
   const { ruleType, isFunction } = values as RuleInput;
   const isHeaderSend = values.ruleType === 'modifySendHeader';
   const isHeaderReceive = values.ruleType === 'modifyReceiveHeader';
@@ -44,7 +44,11 @@ const Execution = () => {
       {/* Header modify */}
       {isHeader && !isFunction && (
         <Form.Slot label={t(isHeaderSend ? 'request_headers' : 'response_headers')}>
-          <HeaderField field="editHeader" type={isHeaderSend ? 'request' : 'response'} />
+          <HeaderField
+            field="editHeader"
+            // eslint-disable-next-line no-nested-ternary
+            type={showCommonHeader ? (isHeaderSend ? 'request' : 'response') : undefined}
+          />
         </Form.Slot>
       )}
       {/* Custom function */}

src/pages/options/sections/rules/edit/index.tsx

@@ -140,7 +140,7 @@ const Edit = ({ visible, rule: ruleProp, onClose }: EditProps) => {
       }
     >
       <Form
-        labelCol={{ fixedSpan: 6 }}
+        labelCol={{ fixedSpan: 4 }}
         getFormApi={(api) => (formApi.current = api)}
         labelPosition="left"
         labelAlign="right"

src/share/core/prefs.ts

@@ -49,7 +49,7 @@ class Prefs {
     });
   }
 
-  get<T = any>(key: string, defaultValue?: T): T | undefined {
+  get<K extends keyof PrefValue>(key: K, defaultValue?: PrefValue[K]): PrefValue[K] {
     if (key in this.boundMethods) {
       if (key in this.boundWrappers) {
         return this.boundWrappers[key];
@@ -64,11 +64,7 @@ class Prefs {
     if (defaultValue !== undefined) {
       return defaultValue;
     }
-    if (key in defaultPrefValue) {
-      return defaultPrefValue[key];
-    }
-    console.warn(`No default preference for ${key}`);
-    return defaultValue;
+    return defaultPrefValue[key];
   }
 
   getAll() {

src/share/core/types.ts

@@ -73,7 +73,6 @@ export interface InitdRule extends Rule {
 }
 
 export interface PrefValue {
-  [key: string]: any;
   'disable-all': boolean;
   'manage-collapse-group': boolean; // Collapse groups
   'exclude-he': boolean; // rules take no effect on HE or not

src/share/hooks/use-pref.ts

@@ -0,0 +1,33 @@
+import { useCallback, useEffect, useState } from 'react';
+import { defaultPrefValue } from '../core/constant';
+import { PrefValue } from '../core/types';
+import { prefs } from '../core/prefs';
+import emitter from '../core/emitter';
+
+const usePref = <K extends keyof PrefValue>(key: K) => {
+  const [state, setState] = useState(defaultPrefValue[key]);
+
+  useEffect(() => {
+    prefs.ready(() => {
+      setState(prefs.get(key));
+    });
+    const handler = (k: keyof PrefValue, val: any) => {
+      if (key === k) {
+        setState(val);
+      }
+    };
+    emitter.on(emitter.EVENT_PREFS_UPDATE, handler);
+    return () => {
+      emitter.off(emitter.EVENT_PREFS_UPDATE, handler);
+    };
+  }, []);
+
+  const set = useCallback((value: PrefValue[K]) => {
+    prefs.set(key, value);
+    setState(value);
+  }, []);
+
+  return [state, set];
+};
+
+export default usePref;