From b1c84b99ac6a4c26be4cc5253106a19e60cd4472 Mon Sep 17 00:00:00 2001 From: Kuba Orlik Date: Sat, 29 Jan 2022 21:16:53 +0100 Subject: [PATCH] Move to external React --- esbuild.config.js | 37 +++- package.json | 1 - sidebar/sidebar.html | 4 +- sidebar/sidebar.tsx | 439 ++++++++++++++++++++++--------------------- 4 files changed, 264 insertions(+), 217 deletions(-) diff --git a/esbuild.config.js b/esbuild.config.js index 63fc4e6..6f66cfa 100644 --- a/esbuild.config.js +++ b/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')) diff --git a/package.json b/package.json index 8125e12..a657706 100644 --- a/package.json +++ b/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" } diff --git a/sidebar/sidebar.html b/sidebar/sidebar.html index 7518769..ab525c3 100644 --- a/sidebar/sidebar.html +++ b/sidebar/sidebar.html @@ -18,8 +18,10 @@ rel="stylesheet" href="/lib/sidebar/sidebar.css" > + + - \ No newline at end of file + diff --git a/sidebar/sidebar.tsx b/sidebar/sidebar.tsx index 5cb2861..5350fd9 100644 --- a/sidebar/sidebar.tsx +++ b/sidebar/sidebar.tsx @@ -17,234 +17,247 @@ import './global.scss'; import './sidebar.scss'; const Sidebar = () => { - const [origin, setOrigin] = React.useState(null); - const [minValueLength, setMinValueLength] = React.useState( - localStorage.getItem('minValueLength') === null - ? 7 - : (localStorage.getItem('minValueLength') as unknown as number) - ); - const [cookiesOnly, setCookiesOnly] = React.useState(false); - const [stolenDataView, setStolenDataView] = React.useState(true); - const [cookiesOrOriginOnly, setCookiesOrOriginOnly] = - React.useState(false); - const [counter, setCounter] = useEmitter(getMemory()); - const [marksOccurrence, setMarksOccurrence] = - React.useState(false); - const [warningDataDialogAck, setWarningDataDialogAck] = - React.useState( - localStorage.getItem('warningDataDialogAck') === null - ? true - : localStorage.getItem('warningDataDialogAck') == 'true' + try { + const [origin, setOrigin] = React.useState(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(false); + const [stolenDataView, setStolenDataView] = + React.useState(true); + const [cookiesOrOriginOnly, setCookiesOrOriginOnly] = + React.useState(false); + const [counter, setCounter] = useEmitter(getMemory()); + const [marksOccurrence, setMarksOccurrence] = + React.useState(false); + const [warningDataDialogAck, setWarningDataDialogAck] = + React.useState( + localStorage.getItem('warningDataDialogAck') === null + ? true + : localStorage.getItem('warningDataDialogAck') == 'true' + ? true + : false + ); + const [logoVisibility, setLogoVisibility] = React.useState( + localStorage.getItem('logoVisibility') === null + ? false + : localStorage.getItem('logoVisibility') == 'true' ? true : false ); - const [logoVisibility, setLogoVisibility] = React.useState( - localStorage.getItem('logoVisibility') === null - ? false - : localStorage.getItem('logoVisibility') == 'true' - ? true - : false - ); - 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; - } - 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 ( -
-
{ + 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; } - > - -
{ + 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 ( +
+
- {origin ? ( - <> - Analiza strony - - {origin} + +
+ {origin ? ( + <> + Analiza strony + + {origin} + + + ) : ( + Przejdź do wybranej strony internetowej + )} +
+ {stolenDataView ? ( + + + + ) : ( + + )} +
+ + {stolenDataView ? ( + + ) : null} + +
+ {stolenDataView ? ( + <> + {warningDataDialogAck ? ( +
+ + Uwaga! 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. + + +
+ ) : null} + setCounter((c) => c + 1)} + minValueLength={minValueLength} + cookiesOnly={cookiesOnly} + cookiesOrOriginOnly={cookiesOrOriginOnly} + /> ) : ( - Przejdź do wybranej strony internetowej - )} -
- {stolenDataView ? ( - - - - ) : ( - - )} -
- - {stolenDataView ? ( - - ) : null} - -
- {stolenDataView ? ( - <> - {warningDataDialogAck ? ( -
- - Uwaga! 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. - - -
- ) : null} - setCounter((c) => c + 1)} + - - ) : ( - - )} -
-
- ); + )} + + + ); + } catch (e) { + console.error(e); + } }; - +debugger; ReactDOM.render(, document.getElementById('app'));