Move to external React

This commit is contained in:
Kuba Orlik 2022-01-29 21:16:53 +01:00
parent 46e6c448b2
commit b1c84b99ac
4 changed files with 264 additions and 217 deletions

View File

@ -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'))

View File

@ -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"
}

View File

@ -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>

View File

@ -17,234 +17,247 @@ import './global.scss';
import './sidebar.scss';
const Sidebar = () => {
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'
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
);
const [logoVisibility, setLogoVisibility] = React.useState<boolean>(
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 (
<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 ? (
<>
<span>Analiza strony</span>
<span className="webpage-metadata--hyperlink">
{origin}
<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'
}
>
{origin ? (
<>
<span>Analiza strony</span>
<span className="webpage-metadata--hyperlink">
{origin}
</span>
</>
) : (
<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}
/>
</>
) : (
<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)}
<Options
minValueLength={minValueLength}
setMinValueLength={setMinValueLength}
cookiesOnly={cookiesOnly}
setCookiesOnly={setCookiesOnly}
cookiesOrOriginOnly={cookiesOrOriginOnly}
setCookiesOrOriginOnly={setCookiesOrOriginOnly}
warningDataDialogAck={warningDataDialogAck}
setWarningDataDialogAck={setWarningDataDialogAck}
logoVisibility={logoVisibility}
setLogoVisibility={setLogoVisibility}
/>
</>
) : (
<Options
minValueLength={minValueLength}
setMinValueLength={setMinValueLength}
cookiesOnly={cookiesOnly}
setCookiesOnly={setCookiesOnly}
cookiesOrOriginOnly={cookiesOrOriginOnly}
setCookiesOrOriginOnly={setCookiesOrOriginOnly}
warningDataDialogAck={warningDataDialogAck}
setWarningDataDialogAck={setWarningDataDialogAck}
logoVisibility={logoVisibility}
setLogoVisibility={setLogoVisibility}
/>
)}
</section>
</div>
);
)}
</section>
</div>
);
} catch (e) {
console.error(e);
}
};
debugger;
ReactDOM.render(<Sidebar />, document.getElementById('app'));