Move to external React
This commit is contained in:
Kuba Orlik
parent
46e6c448b2
commit
b1c84b99ac
|
|
@ -1,6 +1,5 @@
|
||||||
import esbuild from 'esbuild';
|
import esbuild from 'esbuild';
|
||||||
import scss from 'esbuild-plugin-sass';
|
import scss from 'esbuild-plugin-sass';
|
||||||
import svg from 'esbuild-plugin-svgr';
|
|
||||||
|
|
||||||
const watch = process.argv.includes('--watch') && {
|
const watch = process.argv.includes('--watch') && {
|
||||||
onRebuild(error) {
|
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
|
esbuild
|
||||||
.build({
|
.build({
|
||||||
entryPoints: [
|
entryPoints: [
|
||||||
|
|
@ -21,7 +53,8 @@ esbuild
|
||||||
// minify: true,
|
// minify: true,
|
||||||
outdir: './lib',
|
outdir: './lib',
|
||||||
loader: { '.woff': 'file', '.woff2': 'file' },
|
loader: { '.woff': 'file', '.woff2': 'file' },
|
||||||
plugins: [scss(), svg()],
|
plugins: [scss(), skipReactImports],
|
||||||
|
external: ['react', 'react-dom'],
|
||||||
watch,
|
watch,
|
||||||
})
|
})
|
||||||
.then(() => console.log('Add-on was built'))
|
.then(() => console.log('Add-on was built'))
|
||||||
|
|
|
||||||
|
|
@ -44,7 +44,6 @@
|
||||||
"addons-linter": "^4.7.0",
|
"addons-linter": "^4.7.0",
|
||||||
"esbuild": "^0.14.14",
|
"esbuild": "^0.14.14",
|
||||||
"esbuild-plugin-sass": "^1.0.1",
|
"esbuild-plugin-sass": "^1.0.1",
|
||||||
"esbuild-plugin-svgr": "^1.0.0",
|
|
||||||
"web-ext": "^6.6.0",
|
"web-ext": "^6.6.0",
|
||||||
"web-ext-types": "^3.2.1"
|
"web-ext-types": "^3.2.1"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -18,8 +18,10 @@
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="/lib/sidebar/sidebar.css"
|
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>
|
<script src="/lib/sidebar/sidebar.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -17,234 +17,247 @@ import './global.scss';
|
||||||
import './sidebar.scss';
|
import './sidebar.scss';
|
||||||
|
|
||||||
const Sidebar = () => {
|
const Sidebar = () => {
|
||||||
const [origin, setOrigin] = React.useState<string | null>(null);
|
try {
|
||||||
const [minValueLength, setMinValueLength] = React.useState<number | null>(
|
const [origin, setOrigin] = React.useState<string | null>(null);
|
||||||
localStorage.getItem('minValueLength') === null
|
const [minValueLength, setMinValueLength] = React.useState<
|
||||||
? 7
|
number | null
|
||||||
: (localStorage.getItem('minValueLength') as unknown as number)
|
>(
|
||||||
);
|
localStorage.getItem('minValueLength') === null
|
||||||
const [cookiesOnly, setCookiesOnly] = React.useState<boolean>(false);
|
? 7
|
||||||
const [stolenDataView, setStolenDataView] = React.useState<boolean>(true);
|
: (localStorage.getItem('minValueLength') as unknown as number)
|
||||||
const [cookiesOrOriginOnly, setCookiesOrOriginOnly] =
|
);
|
||||||
React.useState<boolean>(false);
|
const [cookiesOnly, setCookiesOnly] = React.useState<boolean>(false);
|
||||||
const [counter, setCounter] = useEmitter(getMemory());
|
const [stolenDataView, setStolenDataView] =
|
||||||
const [marksOccurrence, setMarksOccurrence] =
|
React.useState<boolean>(true);
|
||||||
React.useState<boolean>(false);
|
const [cookiesOrOriginOnly, setCookiesOrOriginOnly] =
|
||||||
const [warningDataDialogAck, setWarningDataDialogAck] =
|
React.useState<boolean>(false);
|
||||||
React.useState<boolean>(
|
const [counter, setCounter] = useEmitter(getMemory());
|
||||||
localStorage.getItem('warningDataDialogAck') === null
|
const [marksOccurrence, setMarksOccurrence] =
|
||||||
? true
|
React.useState<boolean>(false);
|
||||||
: localStorage.getItem('warningDataDialogAck') == 'true'
|
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
|
? true
|
||||||
: false
|
: false
|
||||||
);
|
);
|
||||||
const [logoVisibility, setLogoVisibility] = React.useState<boolean>(
|
|
||||||
localStorage.getItem('logoVisibility') === null
|
|
||||||
? false
|
|
||||||
: localStorage.getItem('logoVisibility') == 'true'
|
|
||||||
? true
|
|
||||||
: false
|
|
||||||
);
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
const listener = async (data: any) => {
|
const listener = async (data: any) => {
|
||||||
console.log('tab change!');
|
console.log('tab change!');
|
||||||
const tab = await getCurrentTab();
|
const tab = await getCurrentTab();
|
||||||
const url = new URL(tab.url);
|
const url = new URL(tab.url);
|
||||||
if (url.origin.startsWith('moz-extension')) {
|
if (url.origin.startsWith('moz-extension')) {
|
||||||
return;
|
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'
|
|
||||||
}
|
}
|
||||||
>
|
setOrigin(url.origin);
|
||||||
<img
|
};
|
||||||
src="../assets/logo-internet-czas-dzialac.svg"
|
browser.tabs.onUpdated.addListener(listener);
|
||||||
height={40}
|
return () => {
|
||||||
style={!logoVisibility ? { display: 'none' } : null}
|
browser.tabs.onUpdated.removeListener(listener);
|
||||||
></img>
|
};
|
||||||
<div
|
});
|
||||||
|
|
||||||
|
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={
|
className={
|
||||||
logoVisibility
|
logoVisibility
|
||||||
? 'webpage-metadata'
|
? 'header'
|
||||||
: 'webpage-metadata webpage-metadata--without-logo'
|
: 'header header--without-logo'
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{origin ? (
|
<img
|
||||||
<>
|
src="../assets/logo-internet-czas-dzialac.svg"
|
||||||
<span>Analiza strony</span>
|
height={40}
|
||||||
<span className="webpage-metadata--hyperlink">
|
style={!logoVisibility ? { display: 'none' } : null}
|
||||||
{origin}
|
></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>
|
</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>
|
<Options
|
||||||
)}
|
|
||||||
</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}
|
minValueLength={minValueLength}
|
||||||
|
setMinValueLength={setMinValueLength}
|
||||||
cookiesOnly={cookiesOnly}
|
cookiesOnly={cookiesOnly}
|
||||||
|
setCookiesOnly={setCookiesOnly}
|
||||||
cookiesOrOriginOnly={cookiesOrOriginOnly}
|
cookiesOrOriginOnly={cookiesOrOriginOnly}
|
||||||
|
setCookiesOrOriginOnly={setCookiesOrOriginOnly}
|
||||||
|
warningDataDialogAck={warningDataDialogAck}
|
||||||
|
setWarningDataDialogAck={setWarningDataDialogAck}
|
||||||
|
logoVisibility={logoVisibility}
|
||||||
|
setLogoVisibility={setLogoVisibility}
|
||||||
/>
|
/>
|
||||||
</>
|
)}
|
||||||
) : (
|
</section>
|
||||||
<Options
|
</div>
|
||||||
minValueLength={minValueLength}
|
);
|
||||||
setMinValueLength={setMinValueLength}
|
} catch (e) {
|
||||||
cookiesOnly={cookiesOnly}
|
console.error(e);
|
||||||
setCookiesOnly={setCookiesOnly}
|
}
|
||||||
cookiesOrOriginOnly={cookiesOrOriginOnly}
|
|
||||||
setCookiesOrOriginOnly={setCookiesOrOriginOnly}
|
|
||||||
warningDataDialogAck={warningDataDialogAck}
|
|
||||||
setWarningDataDialogAck={setWarningDataDialogAck}
|
|
||||||
logoVisibility={logoVisibility}
|
|
||||||
setLogoVisibility={setLogoVisibility}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
debugger;
|
||||||
ReactDOM.render(<Sidebar />, document.getElementById('app'));
|
ReactDOM.render(<Sidebar />, document.getElementById('app'));
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue