From 7c154674bb74ed24bc4326ff7645df5bc2055bbf Mon Sep 17 00:00:00 2001
From: Krzysztof Modras <chrmod@chrmod.net>
Date: Wed, 20 Mar 2024 11:53:44 +0100
Subject: [PATCH] Cleanup

---
 .../settings/components/custom-filters.js     | 134 +++++++++---------
 .../src/pages/settings/dnr-converter.js       |  63 ++++----
 .../settings/store/custom-filters-input.js    |  19 +++
 3 files changed, 114 insertions(+), 102 deletions(-)
 create mode 100644 extension-manifest-v3/src/pages/settings/store/custom-filters-input.js

diff --git a/extension-manifest-v3/src/pages/settings/components/custom-filters.js b/extension-manifest-v3/src/pages/settings/components/custom-filters.js
index 977e69a195..a8ad98df07 100644
--- a/extension-manifest-v3/src/pages/settings/components/custom-filters.js
+++ b/extension-manifest-v3/src/pages/settings/components/custom-filters.js
@@ -11,93 +11,79 @@
 
 import { html, store } from 'hybrids';
 import { detectFilterType } from '@cliqz/adblocker';
-import createConverter from '../dnr-converter';
-
-const converter = createConverter();
+import convert from '../dnr-converter.js';
+import CustomFiltersInput from '../store/custom-filters-input.js';
 
 async function onSave(host) {
   const { networkFilters, cosmeticFilters } = host.filters;
-  const dnrRules = [];
+  const output = {
+    networkFilters,
+    cosmeticFilters,
+    dnrRules: [],
+  };
   const dnrErrors = [];
 
   const results = await Promise.allSettled(
-    networkFilters.map((filter) => converter.convert(filter)),
+    networkFilters.map((filter) => convert(filter)),
   );
 
   for (const result of results) {
     dnrErrors.push(...result.value.errors);
-    dnrRules.push(...result.value.rules);
+    output.dnrRules.push(...result.value.rules);
   }
 
   host.dnrErrors = dnrErrors;
 
   if (!dnrErrors.length) {
     store.submit(host.input);
-    store.set(CustomFiltersOutput, {
-      networkFilters,
-      cosmeticFilters,
-      dnrRules,
-    });
+    host.output = output;
   }
 }
 
-const CustomFiltersInput = {
-  text: '',
-  [store.connect]: {
-    async get() {
-      const storage = await chrome.storage.local.get(['custom-filters-input']);
-      return {
-        text: storage['custom-filters-input'] || '',
-      };
-    },
-    async set(_, { text }) {
-      await chrome.storage.local.set({ 'custom-filters-input': text });
-      return { text };
-    },
-  },
-};
-
-const CustomFiltersOutput = {
-  networkFilters: [String],
-  cosmeticFilters: [String],
-  dnrRules: [{}],
-  [store.connect]: {
-    async get() {
-      const storage = await chrome.storage.local.get(['custom-filters-output']);
+export default {
+  input: store(CustomFiltersInput, { draft: true }),
+  output: {
+    get: async () => {
       const {
         networkFilters = [],
         cosmeticFilters = [],
         dnrRules = [],
-      } = storage['custom-filters-output'] || {};
+      } = (await chrome.storage.local.get(['custom-filters-output']))[
+        'custom-filters-output'
+      ] || {};
+
       return {
         networkFilters,
         cosmeticFilters,
         dnrRules,
       };
     },
-    async set(_, { networkFilters = [], cosmeticFilters = [], dnrRules = [] }) {
-      await chrome.storage.local.set({
-        'custom-filters-output': {
-          networkFilters,
-          cosmeticFilters,
-          dnrRules,
-        },
-      });
-      return { networkFilters, cosmeticFilters, dnrRules };
+    set: async (
+      _,
+      { networkFilters = [], cosmeticFilters = [], dnrRules = [] } = {},
+      lastValue,
+    ) => {
+      if (lastValue) {
+        await chrome.storage.local.set({
+          'custom-filters-output': {
+            networkFilters,
+            cosmeticFilters,
+            dnrRules,
+          },
+        });
+      }
+      return {
+        networkFilters,
+        cosmeticFilters,
+        dnrRules,
+      };
     },
   },
-};
-
-export default {
-  input: store(CustomFiltersInput, { draft: true }),
-  output: store(CustomFiltersOutput),
   dnrErrors: { set: (_, values = []) => values },
   filters: (host) => {
-    const output = {
-      networkFilters: [],
-      cosmeticFilters: [],
-      errors: [],
-    };
+    const networkFilters = [];
+    const cosmeticFilters = [];
+    const errors = [];
 
     let filters = [];
 
@@ -112,17 +98,21 @@ export default {
       const filterType = detectFilterType(filter);
       switch (filterType) {
         case 1: // NETWORK
-          output.networkFilters.push(filter);
+          networkFilters.push(filter);
           break;
         case 2: // COSMETIC
-          output.cosmeticFilters.push(filter);
+          cosmeticFilters.push(filter);
           break;
         default:
-          output.errors.push(`Filter not supported: '${filter}'`);
+          errors.push(`Filter not supported: '${filter}'`);
       }
     }
 
-    return output;
+    return {
+      networkFilters,
+      cosmeticFilters,
+      errors,
+    };
   },
   content: ({ input, filters, output, dnrErrors }) => html`
     <template layout="column gap:3">
@@ -157,18 +147,22 @@ ${input.text}</textarea
         <div>Network filters: ${filters.networkFilters.length}</div>
         <div>Cosmetic filters: ${filters.cosmeticFilters.length}</div>
         <div>Filter errors: ${filters.errors.length}</div>
-        ${store.ready(output) &&
-        html`
-          <h4>Output</h4>
-          <div>Network filters: ${output.networkFilters.length}</div>
-          <div>Cosmetic filters: ${output.cosmeticFilters.length}</div>
-          <div>DNR rules: ${output.dnrRules.length}</div>
-          <ul>
-            ${output.dnrRules.map(
-              (rule) => html`<li>${JSON.stringify(rule, null, 2)}</li>`,
-            )}
-          </ul>
-        `}
+        ${html.resolve(
+          output.then(
+            ({ networkFilters, cosmeticFilters, dnrRules }) =>
+              html`
+                <h4>Output</h4>
+                <div>Network filters: ${networkFilters.length}</div>
+                <div>Cosmetic filters: ${cosmeticFilters.length}</div>
+                <div>DNR rules: ${dnrRules.length}</div>
+                <ul>
+                  ${dnrRules.map(
+                    (rule) => html`<li>${JSON.stringify(rule, null, 2)}</li>`,
+                  )}
+                </ul>
+              `,
+          ),
+        )}
       </section>
     </template>
   `,
diff --git a/extension-manifest-v3/src/pages/settings/dnr-converter.js b/extension-manifest-v3/src/pages/settings/dnr-converter.js
index 572ddbf962..d5b0b4d096 100644
--- a/extension-manifest-v3/src/pages/settings/dnr-converter.js
+++ b/extension-manifest-v3/src/pages/settings/dnr-converter.js
@@ -12,44 +12,43 @@
 const requests = new Map();
 let requestCount = 0;
 let iframe;
-let isReadyResolver;
-let isReady = new Promise((resolve) => {
-  isReadyResolver = resolve;
-});
+let isReady;
 
-function createConverter() {
-  if (!iframe) {
-    window.addEventListener('message', (event) => {
-      const requestId = event.data.rules.shift().condition.urlFilter;
-      requests.get(requestId)(event.data);
-      requests.delete(requestId);
-    });
+function createIframe() {
+  window.addEventListener('message', (event) => {
+    const requestId = event.data.rules.shift().condition.urlFilter;
+    requests.get(requestId)(event.data);
+    requests.delete(requestId);
+  });
 
-    iframe = document.createElement('iframe');
-    iframe.setAttribute('src', 'https://ghostery.github.io/urlfilter2dnr/');
-    iframe.setAttribute('style', 'display: none;');
-    iframe.addEventListener('load', isReadyResolver);
+  iframe = document.createElement('iframe');
+  iframe.setAttribute('src', 'https://ghostery.github.io/urlfilter2dnr/');
+  iframe.setAttribute('style', 'display: none;');
 
+  return new Promise((resolve) => {
+    iframe.addEventListener('load', () => resolve());
     document.head.appendChild(iframe);
+  });
+}
+
+async function convert(filter) {
+  if (!isReady) {
+    isReady = createIframe();
   }
+  await isReady;
 
-  return {
-    convert: async (filter) => {
-      await isReady;
-      const requestId = `request${requestCount++}`;
-      iframe.contentWindow.postMessage(
-        {
-          action: 'convert',
-          converter: 'adguard',
-          filters: [requestId, filter],
-        },
-        '*',
-      );
-      return new Promise((resolve) => {
-        requests.set(requestId, resolve);
-      });
+  const requestId = `request${requestCount++}`;
+  iframe.contentWindow.postMessage(
+    {
+      action: 'convert',
+      converter: 'adguard',
+      filters: [requestId, filter],
     },
-  };
+    '*',
+  );
+  return new Promise((resolve) => {
+    requests.set(requestId, resolve);
+  });
 }
 
-export default createConverter;
+export default convert;
diff --git a/extension-manifest-v3/src/pages/settings/store/custom-filters-input.js b/extension-manifest-v3/src/pages/settings/store/custom-filters-input.js
new file mode 100644
index 0000000000..6f9bcf515f
--- /dev/null
+++ b/extension-manifest-v3/src/pages/settings/store/custom-filters-input.js
@@ -0,0 +1,19 @@
+import { store } from 'hybrids';
+
+const CustomFiltersInput = {
+  text: '',
+  [store.connect]: {
+    async get() {
+      const storage = await chrome.storage.local.get(['custom-filters-input']);
+      return {
+        text: storage['custom-filters-input'] || '',
+      };
+    },
+    async set(_, { text }) {
+      await chrome.storage.local.set({ 'custom-filters-input': text });
+      return { text };
+    },
+  },
+};
+
+export default CustomFiltersInput;