Create seperate branch for fix building

.gitignore

@@ -1,7 +1,5 @@
 .log
 node_modules
-sidebar.js
 /web-ext-artifacts/
-lib/*
+/dist/*
-/yarn-error.log
+/yarn-error.log
-/rentgen.zip

esbuild.config.js

@@ -44,17 +44,25 @@ let skipReactImports = {
 esbuild
     .build({
         entryPoints: [
-            'components/toolbar/toolbar.tsx',
+            'src/components/toolbar/toolbar.tsx',
-            'components/sidebar/sidebar.tsx',
+            'src/components/sidebar/sidebar.tsx',
-            'components/report-window/report-window.tsx',
+            'src/components/report-window/report-window.tsx',
-            'background.ts',
+            'src/background.ts',
-            'styles/global.scss',
+            'src/styles/global.scss',
-            'styles/fonts.scss',
+            'src/styles/fonts.scss',
         ],
         bundle: true,
         // minify: true,
-        outdir: './lib',
+        outdir: './dist',
-        loader: { '.woff': 'file', '.woff2': 'file' },
+        loader: {
+            '.woff': 'file',
+            '.woff2': 'file',
+            '.eot': 'file',
+            '.ttf': 'file',
+            '.svg': 'file',
+            '.json': 'json',
+            '.html': 'file',
+        },
         plugins: [scss(), skipReactImports],
         define: {
             PLUGIN_NAME: '"Rentgen"',

manifest.json

@@ -3,11 +3,11 @@
     "manifest_version": 2,
     "name": "Rentgen",
     "short_name": "Rentgen",
-    "version": "0.1.2",
+    "version": "0.1.3",
     "author": "Kuba Orlik, Arkadiusz Wieczorek (Internet. Czas działać!)",
     "homepage_url": "https://git.internet-czas-dzialac.pl/icd/rentgen",
     "background": {
-        "scripts": ["lib/background.js"]
+        "scripts": ["dist/background.js"]
     },
     "commands": {
         "_execute_sidebar_action": {
@@ -17,14 +17,14 @@
         }
     },
     "browser_action": {
-        "default_icon": "assets/icon-addon.svg",
+        "default_icon": "src/assets/icon-addon.svg",
         "default_title": "Rentgen",
-        "default_popup": "components/toolbar/toolbar.html"
+        "default_popup": "src/components/toolbar/toolbar.html"
     },
     "icons": {
-        "16": "assets/icon-addon.svg",
+        "16": "src/assets/icon-addon.svg",
-        "32": "assets/icon-addon.svg",
+        "32": "src/assets/icon-addon.svg",
-        "64": "assets/icon-addon.svg"
+        "64": "src/assets/icon-addon.svg"
     },
     "permissions": [
         "proxy",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "rentgen",
-    "version": "0.1.2",
+    "version": "0.1.3",
     "description": "Rentgen is an add-on prepared for Firefox based browsers. This extension will automatically visualize all the data that a given website sends to third parties.",
     "main": "esbuild.config.js",
     "type": "module",
@@ -8,7 +8,7 @@
         "build": "node esbuild.config.js",
         "watch": "node esbuild.config.js --watch",
         "ext-test": "web-ext run",
-        "create-package": "web-ext build",
+        "create-package": "web-ext build --overwrite-dest",
         "typecheck": "tsc --noEmit",
         "lint": "web-ext lint"
     },

src/components/report-window/report-window.html

@@ -6,7 +6,7 @@
     <title>Rentgen - generowanie raportu</title>
     <link
         rel="stylesheet"
-        href="/lib/styles/fonts.css"
+        href="/dist/styles/fonts.css"
     >
     <link
         rel="stylesheet"
@@ -18,11 +18,11 @@
     />
     <link
         rel="stylesheet"
-        href="/lib/components/report-window/report-window.css"
+        href="/dist/components/report-window/report-window.css"
     />
     <link
         rel="shortcut icon"
-        href="../../../assets/icon-addon.svg"
+        href="../../assets/icon-addon.svg"
         type="image/x-icon"
     >
 </head>
@@ -31,8 +31,8 @@
     <div id="app"></div>
     <script src="/node_modules/react/umd/react.development.js"></script>
     <script src="/node_modules/react-dom/umd/react-dom.development.js"></script>
-	<script src="/node_modules/survey-react/survey.react.min.js"></script>
+    <script src="/node_modules/survey-react/survey.react.min.js"></script>
-    <script src="/lib/components/report-window/report-window.js"></script>
+    <script src="/dist/components/report-window/report-window.js"></script>
 </body>
 
-</html>
+</html>

src/components/sidebar/sidebar.html

@@ -6,11 +6,11 @@
     <title>Rentgen - analiza strony</title>
     <link
         rel="stylesheet"
-        href="/lib/styles/global.css"
+        href="/dist/styles/global.css"
     >
     <link
         rel="stylesheet"
-        href="/lib/components/sidebar/sidebar.css"
+        href="/dist/components/sidebar/sidebar.css"
     >
     <link
         rel="shortcut icon"
@@ -24,7 +24,7 @@
 
     <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/components/sidebar/sidebar.js"></script>
+    <script src="/dist/components/sidebar/sidebar.js"></script>
 
 </body>
 

src/components/sidebar/sidebar.tsx

@@ -93,7 +93,7 @@ const Sidebar = () => {
                             );
                         }}
                     >
-                        <img src="/assets/icons/report.svg" width="20" height="20" />
+                        <img src="/src/assets/icons/report.svg" width="20" height="20" />
                         <span>Generuj raport</span>
                     </button>
                     <button
@@ -104,8 +104,8 @@ const Sidebar = () => {
                         <img
                             src={
                                 detailsVisibility
-                                    ? '/assets/icons/file_minus.svg'
+                                    ? '/src/assets/icons/file_minus.svg'
-                                    : '/assets/icons/file_find.svg'
+                                    : '/src/assets/icons/file_find.svg'
                             }
                             width="20"
                             height="20"
@@ -116,7 +116,7 @@ const Sidebar = () => {
                         </span>
                     </button>
                     <button onClick={() => setStolenDataView(!stolenDataView)}>
-                        <img src="/assets/icons/settings.svg" width="20" height="20" />
+                        <img src="/src/assets/icons/settings.svg" width="20" height="20" />
                         <span>Ustawienia</span>
                     </button>
 
@@ -142,7 +142,7 @@ const Sidebar = () => {
                                 }
                             }}
                         >
-                            <img src="/assets/icons/bulb.svg" width="20" height="20" />
+                            <img src="/src/assets/icons/bulb.svg" width="20" height="20" />
                             <span>Odwiedź wszystkie domeny</span>
                         </button>
                     ) : null}
@@ -170,7 +170,11 @@ const Sidebar = () => {
                                         );
                                     }}
                                 >
-                                    <img src="/assets/icons/close_big.svg" width="16" height="16" />
+                                    <img
+                                        src="/src/assets/icons/close_big.svg"
+                                        width="16"
+                                        height="16"
+                                    />
                                 </button>
                             </section>
                         ) : null}
@@ -191,7 +195,11 @@ const Sidebar = () => {
                                         );
                                     }}
                                 >
-                                    <img src="/assets/icons/close_big.svg" width="16" height="16" />
+                                    <img
+                                        src="/src/assets/icons/close_big.svg"
+                                        width="16"
+                                        height="16"
+                                    />
                                 </button>
                             </section>
                         ) : null}

src/components/sidebar/stolen-data-cluster.tsx

@@ -54,7 +54,7 @@ function StolenDataRow({ entry }: { entry: StolenDataEntry }) {
                 {entry.source === 'cookie' ? (
                     <span title="Dane przechowywane w Cookies">
                         <img
-                            src="/assets/icons/cookie.svg"
+                            src="/src/assets/icons/cookie.svg"
                             height={16}
                             width={16}
                             className="cookie-data"
@@ -63,7 +63,7 @@ function StolenDataRow({ entry }: { entry: StolenDataEntry }) {
                 ) : entry.request.hasCookie() ? (
                     <span title="Wysłane w zapytaniu opatrzonym Cookies" style={{ opacity: 0.25 }}>
                         <img
-                            src="/assets/icons/cookie.svg"
+                            src="/src/assets/icons/cookie.svg"
                             height={16}
                             width={16}
                             className="request-with-cookie"
@@ -73,7 +73,7 @@ function StolenDataRow({ entry }: { entry: StolenDataEntry }) {
                 {entry.exposesOrigin() ? (
                     <span title="Pokazuje część historii przeglądania">
                         <img
-                            src="/assets/icons/warning.svg"
+                            src="/src/assets/icons/warning.svg"
                             height={16}
                             width={16}
                             className="show-history-part"
@@ -85,7 +85,7 @@ function StolenDataRow({ entry }: { entry: StolenDataEntry }) {
                         style={{ opacity: 0.25 }}
                     >
                         <img
-                            src="/assets/icons/warning.svg"
+                            src="/src/assets/icons/warning.svg"
                             height={16}
                             width={16}
                             className="request-with-history-part"

src/components/toolbar/toolbar.html

@@ -5,11 +5,11 @@
     <meta charset="utf-8" />
     <link
         rel="stylesheet"
-        href="/lib/styles/global.css"
+        href="/dist/styles/global.css"
     >
     <link
         rel="stylesheet"
-        href="/lib/components/toolbar/toolbar.css"
+        href="/dist/components/toolbar/toolbar.css"
     >
 
 </head>
@@ -19,7 +19,7 @@
 
     <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/components/toolbar/toolbar.js"></script>
+    <script src="/dist/components/toolbar/toolbar.js"></script>
 
 </body>
 

src/components/toolbar/toolbar.tsx

@@ -135,7 +135,7 @@ const Toolbar = () => {
     return (
         <div className="toolbar">
             <header className={origin ? 'header' : 'header header--no-page'}>
-                <img src="../../assets/icon-addon.svg" height={32}></img>
+                <img src="/src/assets/icon-addon.svg" height={32}></img>
                 <div className="webpage-metadata">
                     {origin ? (
                         <>
@@ -148,7 +148,11 @@ const Toolbar = () => {
                 </div>
                 {origin ? (
                     <a href="https://internet-czas-dzialac.pl">
-                        <img src="/assets/icons/info_circle_outline.svg" width="20" height="20" />
+                        <img
+                            src="/src/assets/icons/info_circle_outline.svg"
+                            width="20"
+                            height="20"
+                        />
                     </a>
                 ) : null}
             </header>
@@ -161,7 +165,7 @@ const Toolbar = () => {
                             <div className="counters">
                                 <div className="counter counter--cookies">
                                     <img
-                                        src="/assets/icons/cookie.svg#color"
+                                        src="/src/assets/icons/cookie.svg#color"
                                         width="24"
                                         height="24"
                                     />
@@ -175,7 +179,7 @@ const Toolbar = () => {
                                 </div>
                                 <div className="counter counter--browser-history">
                                     <img
-                                        src="/assets/icons/warning.svg#color"
+                                        src="/src/assets/icons/warning.svg#color"
                                         width="24"
                                         height="24"
                                     />

src/options.tsx

@@ -34,7 +34,7 @@ export default function Options({
         <Fragment>
             <nav>
                 <button onClick={() => setStolenDataView(true)}>
-                    <img src="/assets/icons/short_left.svg" width="20" height="20" />
+                    <img src="/src/assets/icons/short_left.svg" width="20" height="20" />
                     <span>Wróć do szczegółów</span>
                 </button>
             </nav>
@@ -120,13 +120,13 @@ export default function Options({
                 <div className="buttons">
                     <div className="button-container">
                         <button onClick={() => removeRequests()}>
-                            <img src="/assets/icons/trash_full.svg" width="20" height="20" />
+                            <img src="/src/assets/icons/trash_full.svg" width="20" height="20" />
                             <span>Wyczyść historię wtyczki</span>
                         </button>
                     </div>
                     <div className="button-container">
                         <button onClick={() => removeCookies()}>
-                            <img src="/assets/icons/cookie.svg" width="20" height="20" />
+                            <img src="/src/assets/icons/cookie.svg" width="20" height="20" />
                             <span>Wyczyść ciasteczka</span>
                         </button>
                     </div>