Move to external React

esbuild.config.js

@@ -1,6 +1,5 @@
 import esbuild from 'esbuild';
 import scss from 'esbuild-plugin-sass';
-import svg from 'esbuild-plugin-svgr';
 
 const watch = process.argv.includes('--watch') && {
     onRebuild(error) {
@@ -9,6 +8,39 @@ 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: [
@@ -21,7 +53,8 @@ esbuild
         // minify: true,
         outdir: './lib',
         loader: { '.woff': 'file', '.woff2': 'file' },
-        plugins: [scss(), svg()],
+        plugins: [scss(), skipReactImports],
+        external: ['react', 'react-dom'],
         watch,
     })
     .then(() => console.log('Add-on was built'))

package.json

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

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

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

report-window/email-template-2.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React 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] = useState<EmailTemplate2Config>({
+    const [config, setConfig] = React.useState<EmailTemplate2Config>({
         popup_type: 'none',
         popup_action: 'ignored',
         popup_screenshot_base64: null,

report-window/email-template.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React 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] = useState('2');
+    const [templateVersion, setTemplateVersion] = React.useState('2');
     return (
         <div>
             <select

report-window/har-converter.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React 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] = useState<Blob | null>(null);
-    const [filename, setFilename] = useState('');
+    const [filtered, setFiltered] = React.useState<Blob | null>(null);
+    const [filename, setFilename] = React.useState('');
     const [fakeHAR, setFakeHAR] =
-        useState<ReturnType<typeof generateFakeHAR>>();
-    useEffect(() => {
+        React.useState<ReturnType<typeof generateFakeHAR>>();
+    React.useEffect(() => {
         setFakeHAR(generateFakeHAR(entries));
     }, []);
 

report-window/report-window.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import ReactDOM from 'react-dom';
 import { getMemory } from '../memory';
 import { Classifications, StolenDataEntry } from '../stolen-data-entry';
@@ -88,15 +88,12 @@ 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] = useState<StolenDataEntry[]>([]);
+    const [entries, setEntries] = React.useState<StolenDataEntry[]>([]);
     console.time('useEffect report-window');
-    useEffect(() => {
+    React.useEffect(() => {
         setEntries(
             Object.values(clusters)
                 .map((cluster) => {

sidebar/sidebar.html

@@ -18,8 +18,10 @@
         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>
 
-</html>
+</html>

sidebar/sidebar.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useState } from 'react';
+import React from 'react';
 import ReactDOM from 'react-dom';
 import Options from '../options';
 import { StolenData } from './stolen-data';
@@ -17,232 +17,247 @@ import './global.scss';
 import './sidebar.scss';
 
 const Sidebar = () => {
-    const [origin, setOrigin] = useState<string | null>(null);
-    const [minValueLength, setMinValueLength] = useState<number | null>(
-        localStorage.getItem('minValueLength') === null
-            ? 7
-            : (localStorage.getItem('minValueLength') as unknown as number)
-    );
-    const [cookiesOnly, setCookiesOnly] = useState<boolean>(false);
-    const [stolenDataView, setStolenDataView] = useState<boolean>(true);
-    const [cookiesOrOriginOnly, setCookiesOrOriginOnly] =
-        useState<boolean>(false);
-    const [counter, setCounter] = useEmitter(getMemory());
-    const [marksOccurrence, setMarksOccurrence] = useState<boolean>(false);
-    const [warningDataDialogAck, setWarningDataDialogAck] = useState<boolean>(
-        localStorage.getItem('warningDataDialogAck') === null
-            ? true
-            : localStorage.getItem('warningDataDialogAck') == 'true'
-            ? true
-            : false
-    );
-    const [logoVisibility, setLogoVisibility] = useState<boolean>(
-        localStorage.getItem('logoVisibility') === null
-            ? false
-            : localStorage.getItem('logoVisibility') == 'true'
-            ? true
-            : false
-    );
+    try {
+        const [origin, setOrigin] = React.useState<string | null>(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 [stolenDataView, setStolenDataView] =
+            React.useState<boolean>(true);
+        const [cookiesOrOriginOnly, setCookiesOrOriginOnly] =
+            React.useState<boolean>(false);
+        const [counter, setCounter] = useEmitter(getMemory());
+        const [marksOccurrence, setMarksOccurrence] =
+            React.useState<boolean>(false);
+        const [warningDataDialogAck, setWarningDataDialogAck] =
+            React.useState<boolean>(
+                localStorage.getItem('warningDataDialogAck') === null
+                    ? true
+                    : localStorage.getItem('warningDataDialogAck') == 'true'
+                    ? true
+                    : false
+            );
+        const [logoVisibility, setLogoVisibility] = React.useState<boolean>(
+            localStorage.getItem('logoVisibility') === null
+                ? false
+                : localStorage.getItem('logoVisibility') == 'true'
+                ? true
+                : false
+        );
 
-    useEffect(() => {
-        const listener = async (data: any) => {
-            console.log('tab change!');
-            const tab = await getCurrentTab();
-            const url = new URL(tab.url);
-            if (url.origin.startsWith('moz-extension')) {
-                return;
-            }
-            setOrigin(url.origin);
-        };
-        browser.tabs.onUpdated.addListener(listener);
-        return () => {
-            browser.tabs.onUpdated.removeListener(listener);
-        };
-    });
-
-    useEffect(() => {
-        for (const cluster of Object.values(
-            getMemory().getClustersForOrigin(origin)
-        )) {
-            if (cluster.hasMarks()) {
-                return setMarksOccurrence(true);
-            }
-        }
-        return setMarksOccurrence(false);
-    }, [counter, origin]);
-
-    return (
-        <div className="sidebar">
-            <header
-                className={
-                    logoVisibility ? 'header' : 'header header--without-logo'
+        React.useEffect(() => {
+            const listener = async (data: any) => {
+                console.log('tab change!');
+                const tab = await getCurrentTab();
+                const url = new URL(tab.url);
+                if (url.origin.startsWith('moz-extension')) {
+                    return;
                 }
-            >
-                <img
-                    src="../assets/logo-internet-czas-dzialac.svg"
-                    height={40}
-                    style={!logoVisibility ? { display: 'none' } : null}
-                ></img>
-                <div
+                setOrigin(url.origin);
+            };
+            browser.tabs.onUpdated.addListener(listener);
+            return () => {
+                browser.tabs.onUpdated.removeListener(listener);
+            };
+        });
+
+        React.useEffect(() => {
+            for (const cluster of Object.values(
+                getMemory().getClustersForOrigin(origin)
+            )) {
+                if (cluster.hasMarks()) {
+                    return setMarksOccurrence(true);
+                }
+            }
+            return setMarksOccurrence(false);
+        }, [counter, origin]);
+
+        return (
+            <div className="sidebar">
+                <header
                     className={
                         logoVisibility
-                            ? 'webpage-metadata'
-                            : 'webpage-metadata webpage-metadata--without-logo'
+                            ? 'header'
+                            : 'header header--without-logo'
                     }
                 >
-                    {origin ? (
-                        <Fragment>
-                            <span>Analiza strony</span>
-                            <span className="webpage-metadata--hyperlink">
-                                {origin}
-                            </span>
-                        </Fragment>
-                    ) : (
-                        <span>Przejdź do wybranej strony internetowej</span>
-                    )}
-                </div>
-                {stolenDataView ? (
-                    <a href="https://internet-czas-dzialac.pl">
-                        <img
-                            src="/assets/icons/info_circle_outline.svg"
-                            width="20"
-                            height="20"
-                        />
-                    </a>
-                ) : (
-                    <button onClick={() => setStolenDataView(true)}>
-                        <img
-                            src="/assets/icons/short_left.svg"
-                            width="20"
-                            height="20"
-                        />
-                    </button>
-                )}
-            </header>
-
-            {stolenDataView ? (
-                <nav>
-                    <button onClick={() => setStolenDataView(!stolenDataView)}>
-                        <img
-                            src="/assets/icons/settings.svg"
-                            width="20"
-                            height="20"
-                        />
-                        <span>Ustawienia</span>
-                    </button>
-                    <button
-                        onClick={() => {
-                            getMemory().removeRequestsFor(origin);
-                            setCounter((c) => c + 1);
-                            setMarksOccurrence(false);
-                        }}
-                    >
-                        <img
-                            src="/assets/icons/trash_full.svg"
-                            width="20"
-                            height="20"
-                        />
-                        <span>Wyczyść historię wtyczki</span>
-                    </button>
-                    <button
-                        onClick={() => {
-                            getMemory().removeCookiesFor(origin);
-                            setCounter((c) => c + 1);
-                            setMarksOccurrence(false);
-                        }}
-                    >
-                        <img
-                            src="/assets/icons/cookie.svg"
-                            width="20"
-                            height="20"
-                        />
-                        <span>Wyczyść ciasteczka</span>
-                    </button>
-                    <button
-                        disabled={!marksOccurrence}
-                        title={
-                            marksOccurrence
-                                ? 'Kliknij, aby wygenerować wiadomość'
-                                : 'Zaznacz poniżej elementy, aby móc wygenerować wiadomość'
+                    <img
+                        src="../assets/logo-internet-czas-dzialac.svg"
+                        height={40}
+                        style={!logoVisibility ? { display: 'none' } : null}
+                    ></img>
+                    <div
+                        className={
+                            logoVisibility
+                                ? 'webpage-metadata'
+                                : 'webpage-metadata webpage-metadata--without-logo'
                         }
-                        onClick={() => {
-                            const params = [
-                                'height=' + screen.height,
-                                'width=' + screen.width,
-                                'fullscreen=yes',
-                            ].join(',');
-                            window.open(
-                                `/report-window/report-window.html?origin=${origin}`,
-                                'new_window',
-                                params
-                            );
-                        }}
                     >
-                        <img
-                            src="/assets/icons/mail.svg"
-                            width="20"
-                            height="20"
-                        />
-                        <span>Utwórz wiadomość dla administratora witryny</span>
-                    </button>
-                </nav>
-            ) : null}
-
-            <section>
-                {stolenDataView ? (
-                    <Fragment>
-                        {warningDataDialogAck ? (
-                            <section className="warning-container">
-                                <span>
-                                    <strong>Uwaga!</strong> Niekoniecznie każda
-                                    przechwycona poniżej informacja jest daną
-                                    osobową. Niektóre z podanych domen mogą
-                                    należeć do właściciela strony i nie
-                                    reprezentować podmiotów trzecich.
+                        {origin ? (
+                            <>
+                                <span>Analiza strony</span>
+                                <span className="webpage-metadata--hyperlink">
+                                    {origin}
                                 </span>
-                                <button
-                                    onClick={() => {
-                                        setWarningDataDialogAck(false);
-                                        localStorage.setItem(
-                                            'warningDataDialogAck',
-                                            false as unknown as string
-                                        );
-                                    }}
-                                >
-                                    <img
-                                        src="/assets/icons/close_big.svg"
-                                        width="16"
-                                        height="16"
-                                    />
-                                </button>
-                            </section>
-                        ) : null}
-                        <StolenData
-                            origin={origin}
-                            refreshToken={counter}
-                            refresh={() => setCounter((c) => c + 1)}
-                            minValueLength={minValueLength}
-                            cookiesOnly={cookiesOnly}
-                            cookiesOrOriginOnly={cookiesOrOriginOnly}
-                        />
-                    </Fragment>
-                ) : (
-                    <Options
-                        minValueLength={minValueLength}
-                        setMinValueLength={setMinValueLength}
-                        cookiesOnly={cookiesOnly}
-                        setCookiesOnly={setCookiesOnly}
-                        cookiesOrOriginOnly={cookiesOrOriginOnly}
-                        setCookiesOrOriginOnly={setCookiesOrOriginOnly}
-                        warningDataDialogAck={warningDataDialogAck}
-                        setWarningDataDialogAck={setWarningDataDialogAck}
-                        logoVisibility={logoVisibility}
-                        setLogoVisibility={setLogoVisibility}
-                    />
-                )}
-            </section>
-        </div>
-    );
-};
+                            </>
+                        ) : (
+                            <span>Przejdź do wybranej strony internetowej</span>
+                        )}
+                    </div>
+                    {stolenDataView ? (
+                        <a href="https://internet-czas-dzialac.pl">
+                            <img
+                                src="/assets/icons/info_circle_outline.svg"
+                                width="20"
+                                height="20"
+                            />
+                        </a>
+                    ) : (
+                        <button onClick={() => setStolenDataView(true)}>
+                            <img
+                                src="/assets/icons/short_left.svg"
+                                width="20"
+                                height="20"
+                            />
+                        </button>
+                    )}
+                </header>
 
+                {stolenDataView ? (
+                    <nav>
+                        <button
+                            onClick={() => setStolenDataView(!stolenDataView)}
+                        >
+                            <img
+                                src="/assets/icons/settings.svg"
+                                width="20"
+                                height="20"
+                            />
+                            <span>Ustawienia</span>
+                        </button>
+                        <button
+                            onClick={() => {
+                                getMemory().removeRequestsFor(origin);
+                                setCounter((c) => c + 1);
+                                setMarksOccurrence(false);
+                            }}
+                        >
+                            <img
+                                src="/assets/icons/trash_full.svg"
+                                width="20"
+                                height="20"
+                            />
+                            <span>Wyczyść historię wtyczki</span>
+                        </button>
+                        <button
+                            onClick={() => {
+                                getMemory().removeCookiesFor(origin);
+                                setCounter((c) => c + 1);
+                                setMarksOccurrence(false);
+                            }}
+                        >
+                            <img
+                                src="/assets/icons/cookie.svg"
+                                width="20"
+                                height="20"
+                            />
+                            <span>Wyczyść ciasteczka</span>
+                        </button>
+                        <button
+                            disabled={!marksOccurrence}
+                            title={
+                                marksOccurrence
+                                    ? 'Kliknij, aby wygenerować wiadomość'
+                                    : 'Zaznacz poniżej elementy, aby móc wygenerować wiadomość'
+                            }
+                            onClick={() => {
+                                const params = [
+                                    'height=' + screen.height,
+                                    'width=' + screen.width,
+                                    'fullscreen=yes',
+                                ].join(',');
+                                window.open(
+                                    `/report-window/report-window.html?origin=${origin}`,
+                                    'new_window',
+                                    params
+                                );
+                            }}
+                        >
+                            <img
+                                src="/assets/icons/mail.svg"
+                                width="20"
+                                height="20"
+                            />
+                            <span>
+                                Utwórz wiadomość dla administratora witryny
+                            </span>
+                        </button>
+                    </nav>
+                ) : null}
+
+                <section>
+                    {stolenDataView ? (
+                        <>
+                            {warningDataDialogAck ? (
+                                <section className="warning-container">
+                                    <span>
+                                        <strong>Uwaga!</strong> Niekoniecznie
+                                        każda przechwycona poniżej informacja
+                                        jest daną osobową. Niektóre z podanych
+                                        domen mogą należeć do właściciela strony
+                                        i nie reprezentować podmiotów trzecich.
+                                    </span>
+                                    <button
+                                        onClick={() => {
+                                            setWarningDataDialogAck(false);
+                                            localStorage.setItem(
+                                                'warningDataDialogAck',
+                                                false as unknown as string
+                                            );
+                                        }}
+                                    >
+                                        <img
+                                            src="/assets/icons/close_big.svg"
+                                            width="16"
+                                            height="16"
+                                        />
+                                    </button>
+                                </section>
+                            ) : null}
+                            <StolenData
+                                origin={origin}
+                                refreshToken={counter}
+                                refresh={() => setCounter((c) => c + 1)}
+                                minValueLength={minValueLength}
+                                cookiesOnly={cookiesOnly}
+                                cookiesOrOriginOnly={cookiesOrOriginOnly}
+                            />
+                        </>
+                    ) : (
+                        <Options
+                            minValueLength={minValueLength}
+                            setMinValueLength={setMinValueLength}
+                            cookiesOnly={cookiesOnly}
+                            setCookiesOnly={setCookiesOnly}
+                            cookiesOrOriginOnly={cookiesOrOriginOnly}
+                            setCookiesOrOriginOnly={setCookiesOrOriginOnly}
+                            warningDataDialogAck={warningDataDialogAck}
+                            setWarningDataDialogAck={setWarningDataDialogAck}
+                            logoVisibility={logoVisibility}
+                            setLogoVisibility={setLogoVisibility}
+                        />
+                    )}
+                </section>
+            </div>
+        );
+    } catch (e) {
+        console.error(e);
+    }
+};
+debugger;
 ReactDOM.render(<Sidebar />, document.getElementById('app'));

sidebar/tab-dropdown.tsx

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

tsconfig.json

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

util.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from 'events';
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import React 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, Dispatch<SetStateAction<number>>] {
-    const [counter, setCounter] = useState<number>(0);
-    useEffect(() => {
+): [number, React.Dispatch<React.SetStateAction<number>>] {
+    const [counter, setCounter] = React.useState<number>(0);
+    React.useEffect(() => {
         const callback = () => {
             setCounter((counter) => counter + 1);
         };