esbuild.config.js

@@ -1,5 +1,6 @@
 import esbuild from 'esbuild';
 import scss from 'esbuild-plugin-sass';
+import svg from 'esbuild-plugin-svgr';
 
 const watch = process.argv.includes('--watch') && {
     onRebuild(error) {
@@ -8,39 +9,6 @@ const watch = process.argv.includes('--watch') && {
     },
 };
 
-// see https://github.com/evanw/esbuild/issues/806#issuecomment-779138268
-let skipReactImports = {
-    name: 'skipReactImports',
-    setup(build) {
-        build.onResolve({ filter: /^react(-dom)?$/ }, (args) => {
-            return {
-                path: args.path,
-                namespace: `globalExternal_${args.path}`,
-            };
-        });
-
-        build.onLoad(
-            { filter: /.*/, namespace: 'globalExternal_react' },
-            () => {
-                return {
-                    contents: `module.exports = globalThis.React`,
-                    loader: 'js',
-                };
-            }
-        );
-
-        build.onLoad(
-            { filter: /.*/, namespace: 'globalExternal_react-dom' },
-            () => {
-                return {
-                    contents: `module.exports = globalThis.ReactDOM`,
-                    loader: 'js',
-                };
-            }
-        );
-    },
-};
-
 esbuild
     .build({
         entryPoints: [
@@ -53,8 +21,7 @@ esbuild
         // minify: true,
         outdir: './lib',
         loader: { '.woff': 'file', '.woff2': 'file' },
-        plugins: [scss(), skipReactImports],
+        plugins: [scss(), svg()],
-        external: ['react', 'react-dom'],
         watch,
     })
     .then(() => console.log('Add-on was built'))

package.json

@@ -44,6 +44,7 @@
         "addons-linter": "^4.7.0",
         "esbuild": "^0.14.14",
         "esbuild-plugin-sass": "^1.0.1",
+        "esbuild-plugin-svgr": "^1.0.0",
         "web-ext": "^6.6.0",
         "web-ext-types": "^3.2.1"
     }

report-window/email-template-1.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useState } from 'react';
 import { RequestCluster } from '../request-cluster';
 import { StolenDataEntry } from '../stolen-data-entry';
 import { getDate, toBase64 } from '../util';
@@ -14,13 +15,12 @@ export default function EmailTemplate1({
     clusters: Record<string, RequestCluster>;
     version: number;
 }): JSX.Element {
-    const [popupState, setPopupState] =
+    const [popupState, setPopupState] = useState<PopupState>('not_clicked');
-        React.useState<PopupState>('not_clicked');
+    const [acceptAllName, setAcceptAllName] = useState<string>(
-    const [acceptAllName, setAcceptAllName] = React.useState<string>(
         'Zaakceptuj wszystkie'
     );
     const [popupScreenshotBase64, setPopupScreenshotBase64] =
-        React.useState<string>(null);
+        useState<string>(null);
 
     return (
         <div>

report-window/email-template-2-controls.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Dispatch, SetStateAction } from 'react';
 import { toBase64 } from '../util';
 import { EmailTemplate2Config } from './email-template-2';
 
@@ -7,7 +8,7 @@ export default function EmailTemplate2Controls({
     setConfig,
 }: {
     config: EmailTemplate2Config;
-    setConfig: React.Dispatch<React.SetStateAction<EmailTemplate2Config>>;
+    setConfig: Dispatch<SetStateAction<EmailTemplate2Config>>;
 }): JSX.Element {
     return (
         <div>

report-window/email-template-2.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { RequestCluster } from '../request-cluster';
 import { StolenDataEntry } from '../stolen-data-entry';
 import { getDate, unique } from '../util';
@@ -75,7 +75,7 @@ export default function EmailTemplate2({
     clusters: Record<string, RequestCluster>;
     version: number;
 }): JSX.Element {
-    const [config, setConfig] = React.useState<EmailTemplate2Config>({
+    const [config, setConfig] = useState<EmailTemplate2Config>({
         popup_type: 'none',
         popup_action: 'ignored',
         popup_screenshot_base64: null,

report-window/email-template.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { RequestCluster } from '../request-cluster';
 import { StolenDataEntry } from '../stolen-data-entry';
 import EmailTemplate1 from './email-template-1';
@@ -13,7 +13,7 @@ export default function EmailTemplate({
     clusters: Record<string, RequestCluster>;
     version: number;
 }) {
-    const [templateVersion, setTemplateVersion] = React.useState('2');
+    const [templateVersion, setTemplateVersion] = useState('2');
     return (
         <div>
             <select

report-window/har-converter.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { HAREntry } from '../extended-request';
 import { StolenDataEntry } from '../stolen-data-entry';
 import { getshorthost, unique } from '../util';
@@ -80,11 +80,11 @@ export default function HARConverter({
 }: {
     entries: StolenDataEntry[];
 }) {
-    const [filtered, setFiltered] = React.useState<Blob | null>(null);
+    const [filtered, setFiltered] = useState<Blob | null>(null);
-    const [filename, setFilename] = React.useState('');
+    const [filename, setFilename] = useState('');
     const [fakeHAR, setFakeHAR] =
-        React.useState<ReturnType<typeof generateFakeHAR>>();
+        useState<ReturnType<typeof generateFakeHAR>>();
-    React.useEffect(() => {
+    useEffect(() => {
         setFakeHAR(generateFakeHAR(entries));
     }, []);
 

report-window/report-window.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { getMemory } from '../memory';
 import { Classifications, StolenDataEntry } from '../stolen-data-entry';
@@ -88,12 +88,15 @@ function Report() {
     console.time('useMemory');
     const [counter, setCounter] = useEmitter(getMemory());
     console.timeEnd('useMemory');
+    function refresh() {
+        setCounter((c) => c + 1);
+    }
     console.time('getClustersForOrigin');
     const clusters = getMemory().getClustersForOrigin(origin);
     console.timeEnd('getClustersForOrigin');
-    const [entries, setEntries] = React.useState<StolenDataEntry[]>([]);
+    const [entries, setEntries] = useState<StolenDataEntry[]>([]);
     console.time('useEffect report-window');
-    React.useEffect(() => {
+    useEffect(() => {
         setEntries(
             Object.values(clusters)
                 .map((cluster) => {

sidebar/sidebar.html

@@ -18,8 +18,6 @@
         rel="stylesheet"
         href="/lib/sidebar/sidebar.css"
     >
-	<script src="/node_modules/react/umd/react.production.min.js"></script>
-	<script src="/node_modules/react-dom/umd/react-dom.production.min.js"></script>
     <script src="/lib/sidebar/sidebar.js"></script>
 
 </body>

sidebar/sidebar.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import Options from '../options';
 import { StolenData } from './stolen-data';
@@ -17,32 +17,26 @@ import './global.scss';
 import './sidebar.scss';
 
 const Sidebar = () => {
-    try {
+    const [origin, setOrigin] = useState<string | null>(null);
-        const [origin, setOrigin] = React.useState<string | null>(null);
+    const [minValueLength, setMinValueLength] = useState<number | null>(
-        const [minValueLength, setMinValueLength] = React.useState<
-            number | null
-        >(
         localStorage.getItem('minValueLength') === null
             ? 7
             : (localStorage.getItem('minValueLength') as unknown as number)
     );
-        const [cookiesOnly, setCookiesOnly] = React.useState<boolean>(false);
+    const [cookiesOnly, setCookiesOnly] = useState<boolean>(false);
-        const [stolenDataView, setStolenDataView] =
+    const [stolenDataView, setStolenDataView] = useState<boolean>(true);
-            React.useState<boolean>(true);
     const [cookiesOrOriginOnly, setCookiesOrOriginOnly] =
-            React.useState<boolean>(false);
+        useState<boolean>(false);
     const [counter, setCounter] = useEmitter(getMemory());
-        const [marksOccurrence, setMarksOccurrence] =
+    const [marksOccurrence, setMarksOccurrence] = useState<boolean>(false);
-            React.useState<boolean>(false);
+    const [warningDataDialogAck, setWarningDataDialogAck] = useState<boolean>(
-        const [warningDataDialogAck, setWarningDataDialogAck] =
-            React.useState<boolean>(
         localStorage.getItem('warningDataDialogAck') === null
             ? true
             : localStorage.getItem('warningDataDialogAck') == 'true'
             ? true
             : false
     );
-        const [logoVisibility, setLogoVisibility] = React.useState<boolean>(
+    const [logoVisibility, setLogoVisibility] = useState<boolean>(
         localStorage.getItem('logoVisibility') === null
             ? false
             : localStorage.getItem('logoVisibility') == 'true'
@@ -50,7 +44,7 @@ const Sidebar = () => {
             : false
     );
 
-        React.useEffect(() => {
+    useEffect(() => {
         const listener = async (data: any) => {
             console.log('tab change!');
             const tab = await getCurrentTab();
@@ -66,7 +60,7 @@ const Sidebar = () => {
         };
     });
 
-        React.useEffect(() => {
+    useEffect(() => {
         for (const cluster of Object.values(
             getMemory().getClustersForOrigin(origin)
         )) {
@@ -81,9 +75,7 @@ const Sidebar = () => {
         <div className="sidebar">
             <header
                 className={
-                        logoVisibility
+                    logoVisibility ? 'header' : 'header header--without-logo'
-                            ? 'header'
-                            : 'header header--without-logo'
                 }
             >
                 <img
@@ -99,12 +91,12 @@ const Sidebar = () => {
                     }
                 >
                     {origin ? (
-                            <>
+                        <Fragment>
                             <span>Analiza strony</span>
                             <span className="webpage-metadata--hyperlink">
                                 {origin}
                             </span>
-                            </>
+                        </Fragment>
                     ) : (
                         <span>Przejdź do wybranej strony internetowej</span>
                     )}
@@ -130,9 +122,7 @@ const Sidebar = () => {
 
             {stolenDataView ? (
                 <nav>
-                        <button
+                    <button onClick={() => setStolenDataView(!stolenDataView)}>
-                            onClick={() => setStolenDataView(!stolenDataView)}
-                        >
                         <img
                             src="/assets/icons/settings.svg"
                             width="20"
@@ -193,24 +183,22 @@ const Sidebar = () => {
                             width="20"
                             height="20"
                         />
-                            <span>
+                        <span>Utwórz wiadomość dla administratora witryny</span>
-                                Utwórz wiadomość dla administratora witryny
-                            </span>
                     </button>
                 </nav>
             ) : null}
 
             <section>
                 {stolenDataView ? (
-                        <>
+                    <Fragment>
                         {warningDataDialogAck ? (
                             <section className="warning-container">
                                 <span>
-                                        <strong>Uwaga!</strong> Niekoniecznie
+                                    <strong>Uwaga!</strong> Niekoniecznie każda
-                                        każda przechwycona poniżej informacja
+                                    przechwycona poniżej informacja jest daną
-                                        jest daną osobową. Niektóre z podanych
+                                    osobową. Niektóre z podanych domen mogą
-                                        domen mogą należeć do właściciela strony
+                                    należeć do właściciela strony i nie
-                                        i nie reprezentować podmiotów trzecich.
+                                    reprezentować podmiotów trzecich.
                                 </span>
                                 <button
                                     onClick={() => {
@@ -237,7 +225,7 @@ const Sidebar = () => {
                             cookiesOnly={cookiesOnly}
                             cookiesOrOriginOnly={cookiesOrOriginOnly}
                         />
-                        </>
+                    </Fragment>
                 ) : (
                     <Options
                         minValueLength={minValueLength}
@@ -255,9 +243,6 @@ const Sidebar = () => {
             </section>
         </div>
     );
-    } catch (e) {
-        console.error(e);
-    }
 };
-debugger;
+
 ReactDOM.render(<Sidebar />, document.getElementById('app'));

sidebar/tab-dropdown.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useEffect, useState } from 'react';
 
 export default function TabDropdown({
     setPickedTab,
@@ -7,8 +8,8 @@ export default function TabDropdown({
     setPickedTab: (tab_id: number) => void;
     pickedTab: number;
 }) {
-    const [tabs, setTabs] = React.useState([]);
+    const [tabs, setTabs] = useState([]);
-    React.useEffect(() => {
+    useEffect(() => {
         browser.tabs.query({ currentWindow: true }).then(setTabs);
     }, []);
     return (

tsconfig.json

@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-        "jsx": "react-jsx",
+        "jsx": "react",
         "noImplicitAny": true,
         "esModuleInterop": true,
         "lib": ["es2017", "dom", "es2019"],

util.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from 'events';
-import React from 'react';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 
 export type Unpromisify<T> = T extends Promise<infer R> ? R : T;
 export type Unarray<T> = T extends Array<infer R> ? R : T;
@@ -47,9 +47,9 @@ export function getshorthost(host: string) {
 
 export function useEmitter(
     e: EventEmitter
-): [number, React.Dispatch<React.SetStateAction<number>>] {
+): [number, Dispatch<SetStateAction<number>>] {
-    const [counter, setCounter] = React.useState<number>(0);
+    const [counter, setCounter] = useState<number>(0);
-    React.useEffect(() => {
+    useEffect(() => {
         const callback = () => {
             setCounter((counter) => counter + 1);
         };