fix: webpack-migration

Shared-Reality-Lab · Jan 22, 2025 · 2240dcc · 2240dcc
1 parent 62cab53
commit 2240dcc
Show file tree

Hide file tree

Showing 28 changed files with 4,970 additions and 555 deletions.
diff --git a/.env.test → .env.development b/.env.test → .env.development
diff --git a/.env.prod → .env.production b/.env.prod → .env.production
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,52 +1,43 @@
 {
   "name": "image-browser-extension",
-  "targets": {
-    "webext-dev": {
-      "sourceMap": {
-        "inline": true,
-        "inlineSources": true
-      },
-      "distDir": "build"
-    },
-    "webext-prod-firefox": {
-      "distDir": "build-firefox"
-    },
-    "webext-prod-chrome": {
-      "distDir": "build-chrome"
-    }
-  },
   "scripts": {
-    "start": "parcel serve src/manifest.json --target webext-dev --dist-dir build",
-    "clean": "rm -rf build && rm -rf build-firefox && rm -rf build-chrome",
-    "pack:test": "npm run clean && cross-env NODE_ENV=test parcel build src/manifest.json --target webext-prod-chrome",
-    "pack:prod": "mv src/manifest.json src/manifest.json.bak && jq '.name = \"__MSG_extensionName__\"' src/manifest.json.bak > src/manifest.json && npm run clean && cross-env NODE_ENV=prod parcel build src/manifest.json --target webext-prod-chrome",
-    "prestart": "(cd schemas && json2ts -i '*.json' -o ../src/types)",
-    "build:chromium": "npm run pack:prod && chromium --pack-extension=build --pack-extension-key=$PATH_TO_CHROME_KEY && mkdir -p dist && mv build.crx dist/IMAGE-chrome.crx"
+    "pack:test": "webpack --define-process-env-node-env development --devtool false --config webpack.config.ts",
+    "pack:prod": "webpack --define-process-env-node-env production --config webpack.config.ts"
   },
   "devDependencies": {
     "@parcel/config-webextension": "^2.7.0",
     "@parcel/transformer-sass": "^2.7.0",
     "@parcel/transformer-typescript-tsc": "^2.7.0",
     "@parcel/validator-typescript": "^2.7.0",
+    "@tsconfig/recommended": "^1.0.8",
+    "@types/chrome": "^0.0.297",
     "@types/object-hash": "^2.2.1",
     "@types/progressbar.js": "^1.1.2",
     "@types/uuid": "^8.3.3",
     "@types/w3c-web-serial": "1.0.2",
     "@types/webextension-polyfill": "^0.8.2",
+    "babel-loader": "^9.2.1",
+    "copy-webpack-plugin": "^12.0.2",
+    "cross-env": "^7.0.2",
+    "css-loader": "^7.1.2",
+    "dotenv": "^16.4.7",
     "json-schema-to-typescript": "^10.1.4",
     "parcel": "^2.7.0",
-    "cross-env": "^7.0.2"
+    "style-loader": "^4.0.0",
+    "ts-loader": "^9.5.2",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.7.3",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4"
   },
   "dependencies": {
-    "@types/chrome": "^0.0.164",
+    "@popperjs/core": "2.11.6",
     "@types/w3c-web-serial": "1.0.2",
     "bootstrap": "^5.0.1",
     "browser-image-compression": "^2.0.0",
     "object-hash": "^3.0.0",
     "progressbar.js": "^1.1.0",
     "uuid": "^8.3.2",
-    "webextension-polyfill": "^0.8.0",
-    "typescript": "4.8.3",
-    "@popperjs/core": "2.11.6"
+    "webextension-polyfill": "^0.8.0"
   }
 }
diff --git a/src/background.ts b/src/background.ts
@@ -338,12 +338,12 @@ async function updateDebugContextMenu() {
     if (items["processItem"] === "" && items["requestItem"] === "") {
       browser.contextMenus.create({
         id: "preprocess-only",
-        title: (extVersion == 'test') ? (browser.i18n.getMessage("preprocessItem") + process.env.SUFFIX_TEXT) : browser.i18n.getMessage("preprocessItem"),
+        title: (extVersion == 'development') ? (browser.i18n.getMessage("preprocessItem") + process.env.SUFFIX_TEXT) : browser.i18n.getMessage("preprocessItem"),
         contexts: ["image"]
       }, onCreated);
       browser.contextMenus.create({
         id: "request-only",
-        title: (extVersion == 'test') ? (browser.i18n.getMessage("requestItem") + process.env.SUFFIX_TEXT) : browser.i18n.getMessage("requestItem"),
+        title: (extVersion == 'development') ? (browser.i18n.getMessage("requestItem") + process.env.SUFFIX_TEXT) : browser.i18n.getMessage("requestItem"),
         contexts: ["image"]
       }, onCreated);
     }
@@ -384,7 +384,7 @@ function storeConnection(p: Runtime.Port) {
   if (id) {
     ports[id] = p;
     ports[id].onMessage.addListener(handleMessage.bind(null, p));
-    const pingInterval = setInterval((id) => {
+    const pingInterval = setInterval((id:any) => {
       //console.debug("Ping to port with Id "+ id);
       if(ports[id]){
         ports[id].postMessage({
@@ -406,16 +406,16 @@ function storeConnection(p: Runtime.Port) {
 function enableContextMenu() {
   browser.contextMenus.update("mwe-item", {
     enabled: true,
-    title: (extVersion == 'test') ? (browser.i18n.getMessage("menuItem") + process.env.SUFFIX_TEXT) : browser.i18n.getMessage("menuItem")
+    title: (extVersion == 'development') ? (browser.i18n.getMessage("menuItem") + process.env.SUFFIX_TEXT) : browser.i18n.getMessage("menuItem")
   });
   if (showDebugOptions) {
     browser.contextMenus.update("preprocess-only", {
       enabled: true,
-      title: (extVersion == 'test') ? (browser.i18n.getMessage("preprocessItem") + process.env.SUFFIX_TEXT) : browser.i18n.getMessage("preprocessItem"),
+      title: (extVersion == 'development') ? (browser.i18n.getMessage("preprocessItem") + process.env.SUFFIX_TEXT) : browser.i18n.getMessage("preprocessItem"),
     })
     browser.contextMenus.update("request-only", {
       enabled: true,
-      title: (extVersion == 'test') ? (browser.i18n.getMessage("requestItem") + process.env.SUFFIX_TEXT) : browser.i18n.getMessage("requestItem"),
+      title: (extVersion == 'development') ? (browser.i18n.getMessage("requestItem") + process.env.SUFFIX_TEXT) : browser.i18n.getMessage("requestItem"),
     });
   }
 }
@@ -486,12 +486,12 @@ getAllStorageSyncData().then((items) => {
   if (showDebugOptions) {
     browser.contextMenus.create({
       id: "preprocess-only",
-      title: (extVersion == 'test') ? (browser.i18n.getMessage("preprocessItem") + process.env.SUFFIX_TEXT) : browser.i18n.getMessage("preprocessItem"),
+      title: (extVersion == 'development') ? (browser.i18n.getMessage("preprocessItem") + process.env.SUFFIX_TEXT) : browser.i18n.getMessage("preprocessItem"),
       contexts: ["image"]
     }, onCreated);
     browser.contextMenus.create({
       id: "request-only",
-      title: (extVersion == 'test') ? (browser.i18n.getMessage("requestItem") + process.env.SUFFIX_TEXT) : browser.i18n.getMessage("preprocessItem"),
+      title: (extVersion == 'development') ? (browser.i18n.getMessage("requestItem") + process.env.SUFFIX_TEXT) : browser.i18n.getMessage("preprocessItem"),
       contexts: ["image"]
     }, onCreated);
   }
@@ -514,7 +514,7 @@ browser.runtime.onInstalled.addListener(function (object) {
 
   browser.contextMenus.create({
     id: "mwe-item",
-    title: (extVersion == 'test') ? (browser.i18n.getMessage("menuItem") + process.env.SUFFIX_TEXT) : browser.i18n.getMessage("menuItem"),
+    title: (extVersion == 'development') ? (browser.i18n.getMessage("menuItem") + process.env.SUFFIX_TEXT) : browser.i18n.getMessage("menuItem"),
     contexts: ["image"]
   }, onCreated);
 });

diff --git a/src/buttons.js b/src/buttons.js
@@ -31,8 +31,8 @@ function processCharts() {
     for (let chart of window.Highcharts.charts) {
       if (chart) {
         chart.reflow = false;
-        divId = chart.renderTo.id;
-        containerDivId = chart.container.id;
+        let divId = chart.renderTo.id;
+        let containerDivId = chart.container.id;
         document.getElementById(containerDivId).style.height = "max-content";
         document.getElementById(divId).style.height = "max-content";
         divChartMap[divId] = chart
@@ -44,7 +44,7 @@ function processCharts() {
           chartButtonText = "Interpréter ce graphique avec IMAGE";
         else
           chartButtonText = "Interpret this chart with IMAGE";
-        if (extVersion === "test") {
+        if (extVersion === "development") {
           chartButtonText += " (test)"
         }
 
@@ -53,11 +53,11 @@ function processCharts() {
         chartButton.style.marginTop = "1rem";
         chartButton.setAttribute("data-chart-id", divId);
         chartButton.addEventListener("click", function (event) {
-          targetId = event.target.parentElement.id;
-          chartObj = divChartMap[targetId];
+          let targetId = event.target.parentElement.id;
+          let chartObj = divChartMap[targetId];
           let chartData = utils.getChartData(chart);
           console.debug(chartData);
-          messageObj = { "messageFrom": "imageCharts", "charts": chartData };
+          let messageObj = { "messageFrom": "imageCharts", "charts": chartData };
           window.postMessage(messageObj, "*");
         });
         document.getElementById(divId).style.overflow = "visible";

diff --git a/src/charts/charts-utils.js b/src/charts/charts-utils.js
@@ -54,7 +54,7 @@ function getSeriesData(series) {
         if (point.accessibility && point.accessibility.description){
             pointInfo.altText = point.accessibility.description;
         }
-        pointKeys = ['x', 'y', 'z', 'open', 'high', 'low', 'close', 'value', 'percentage','name', "text"];
+        let pointKeys = ['x', 'y', 'z', 'open', 'high', 'low', 'close', 'value', 'percentage','name', "text"];
         pointKeys.forEach(key => {
             if (point[key] !== undefined) {
                 pointInfo[key] = (key == "text")?sanitizeHTMLString(point[key]):point[key];

diff --git a/src/errors/errors.ts b/src/errors/errors.ts
@@ -15,7 +15,7 @@
  * If not, see <https://github.com/Shared-Reality-Lab/IMAGE-browser/LICENSE>.
  */
 import { queryLocalisation } from "../utils";
-
+import './errors.css';
 queryLocalisation();
 
 const closeButton : Element | null = document.getElementById('closingButton');

diff --git a/src/errors/http_error.html b/src/errors/http_error.html
@@ -1,14 +1,14 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <link rel="stylesheet" href="./errors.css" />
+    <!-- <link rel="stylesheet" href="./errors.css" /> -->
   </head>
   <body>
     <p>
       <span class="localisation" id="errorMessage"></span> 
       <a href="mailto:[email protected]">[email protected]</a>.
     </p>
     <button class="localisation" id="closingButton" type="button"></button>
-    <script type="module" src="./errors.ts"></script>
+    <script type="module" src="./errors.js"></script>
   </body>
 </html>
diff --git a/src/errors/no_renderings.html b/src/errors/no_renderings.html
@@ -2,7 +2,7 @@
 
 <head>
     <meta charset="utf-8">
-    <link rel="stylesheet" href="./errors.css">
+    <!-- <link rel="stylesheet" href="./errors.css"> -->
 </head>
 
 <body>
@@ -19,7 +19,7 @@
     <p class="localisation" id="commonIssuesHighCharts" />
     <p class="localisation" id="commonIssuesMaps" />
     <button class="localisation" id="closingButton" type="button"></button>
-    <script type="module" src="./errors.ts"></script>
+    <script type="module" src="./errors.js"></script>
 </body>
 
 </html>
diff --git a/src/feedback/feedback.html b/src/feedback/feedback.html
@@ -16,6 +16,6 @@
                 <button type="submit" class="btn btn-primary localisation" id="feedbackSubmit"></button>
             </div>
         </main>
-        <script type="module" src="./feedback.ts"></script>
+        <script type="module" src="./feedback.js"></script>
     </body>
 </html>
diff --git a/src/firstLaunch/firstLaunch.scss → src/firstLaunch/firstLaunch.css b/src/firstLaunch/firstLaunch.scss → src/firstLaunch/firstLaunch.css
@@ -1,4 +1,4 @@
-@import '../../node_modules/bootstrap/scss/bootstrap.scss';
+@import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
 
 #firstlaunch-container{
     display: flex;

diff --git a/src/firstLaunch/firstLaunch.html b/src/firstLaunch/firstLaunch.html
@@ -12,6 +12,6 @@ <h1 class="localisation" id="popUpTitle"></h1>
             </div>
             <button class="btn btn-primary localisation" type="button" id="closingButton"></button>
         </div>
-        <script type="module" src="./firstLaunch.ts"></script>
+        <script src="./firstLaunch.js"></script>
     </body>
 </html>
diff --git a/src/firstLaunch/firstLaunch.ts b/src/firstLaunch/firstLaunch.ts
@@ -1,6 +1,6 @@
 import 'bootstrap/dist/css/bootstrap.css';
 import 'bootstrap';
-import "./firstLaunch.scss";
+import "./firstLaunch.css";
 import { queryLocalisation } from '../utils';
 
 // Load localised labels
@@ -12,7 +12,8 @@ window.onload = () =>{
     let title = document.getElementById("popUpTitle");
     if (title) {
         console.log("extVersion from info", process.env.NODE_ENV);
-        if (process.env.NODE_ENV == "test" && process.env.SUFFIX_TEXT){
+        console.log("Suffix text", process.env.SUFFIX_TEXT);
+        if (process.env.NODE_ENV == "development" && process.env.SUFFIX_TEXT){
             title.textContent += process.env.SUFFIX_TEXT
         }
     }

diff --git a/src/info/info.scss → src/info/info.css b/src/info/info.scss → src/info/info.css
@@ -1,5 +1,4 @@
-@import '../../node_modules/bootstrap/scss/bootstrap.scss';
-//@import '../../node_modules/plyr/src/sass/plyr.scss';
+@import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
 
 .plyr--audio {
     display: flex;

diff --git a/src/info/info.html b/src/info/info.html
@@ -18,6 +18,6 @@ <h1 class="localisation title" id="renderingTitle"></h1>
                 <span class="localisation" id="feedbackFormCaution"></span>
             </p>
         </footer>
-        <script type="module" src="./info.ts"></script>
+        <script src="./info.js"></script>
     </body>
 </html>
diff --git a/src/info/info.ts b/src/info/info.ts
@@ -17,7 +17,7 @@
 import 'bootstrap';
 import 'bootstrap/dist/css/bootstrap.css';
 //import Plyr from "plyr";
-import "./info.scss";
+import "./info.css";
 import browser from "webextension-polyfill";
 import hash from "object-hash";
 import { v4 as uuidv4 } from 'uuid';
@@ -49,7 +49,7 @@ window.onload = () => {
     setTimeout(()=>{
         let title = document.getElementById("renderingTitle");
         if (title) {
-            if (process.env.NODE_ENV == "test" && process.env.SUFFIX_TEXT) {
+            if (process.env.NODE_ENV == "development" && process.env.SUFFIX_TEXT) {
                 title.textContent += process.env.SUFFIX_TEXT
             }
         }

diff --git a/src/launchpad/launchpad.scss → src/launchpad/launchpad.css b/src/launchpad/launchpad.scss → src/launchpad/launchpad.css
@@ -1,4 +1,4 @@
-@import '../../node_modules/bootstrap/scss/bootstrap.scss';
+@import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
 
 #launchpad-container{
     display: flex;

diff --git a/src/launchpad/launchpad.html b/src/launchpad/launchpad.html
@@ -19,6 +19,6 @@ <h1 class="title localisation" id="popUpTitle"></h1>
             </div>
             <button class="btn btn-primary localisation" type="button" id="optionsLaunchPad"></button>
         </div>
-        <script type="module" src="./launchpad.ts"></script>
+        <script src="./launchpad.js"></script>
     </body>
 </html>
diff --git a/src/launchpad/launchpad.ts b/src/launchpad/launchpad.ts
@@ -1,6 +1,6 @@
 import browser from "webextension-polyfill";
 import 'bootstrap/dist/css/bootstrap.css';
-import "./launchpad.scss";
+import "./launchpad.css";
 import { TUTORIAL_PAGE } from "../config";
 import { queryLocalisation } from "../utils";
 
@@ -13,7 +13,7 @@ window.onload = () => {
     // Update renderings label
     let launchpadTitle = document.getElementById("popUpTitle");
     if (launchpadTitle) {
-        if (process.env.NODE_ENV == "test" && process.env.SUFFIX_TEXT){
+        if (process.env.NODE_ENV == "development" && process.env.SUFFIX_TEXT){
             launchpadTitle.textContent += process.env.SUFFIX_TEXT
         }
     }

diff --git a/src/manifest.json b/src/manifest.json
@@ -30,7 +30,7 @@
     "host_permissions" : ["<all_urls>"],
 
     "background": {
-        "service_worker": "background.ts",
+        "service_worker": "background.js",
         "type": "module"
     },
     "commands": {
@@ -43,22 +43,20 @@
     },
     "content_scripts": [{
         "matches": ["<all_urls>"],
-        "js": ["content.ts"],
+        "js": ["content.js"],
         "css": ["styles.css"]
     }],
 
     "web_accessible_resources": [{
         "resources": [ 
-            "info/*.ts",
-            "info/info.html",
+            "info/*",
             "feedback/*",
             "charts/*",
             "launchpad/*",
             "firstLaunch/*",
-            "maps/maps-utils.ts",
-            "hAPI/hapi-utils.ts",
-            "hAPI/worker.ts",
-            "errors/*.html",
+            "maps/*",
+            "hAPI/*.js",
+            "errors/*",
             "progressBar/progressBar.html",
             "audio/*",
             "offscreen.html",

diff --git a/src/maps/maps-utils.ts b/src/maps/maps-utils.ts
@@ -15,7 +15,7 @@ export function processMap(port: browser.Runtime.Port, map: any, origin: string,
 
         mapButton.innerText = browser.i18n.getMessage("getMapRendering");
         //console.log("ext version from map", extVersion);
-        if (extVersion === "test") {
+        if (extVersion === "development") {
             mapButton.innerText += process.env.SUFFIX_TEXT;
         }
         let preprocessorMapButton = document.createElement("button");

diff --git a/src/options/options.html b/src/options/options.html
@@ -1,7 +1,7 @@
 <html>
     <head>
         <meta charset="utf-8">
-        <link rel="stylesheet" href="./options.css">
+        <!-- <link rel="stylesheet" href="./options.css"> -->
     </head>
     <body>
         <div>
@@ -77,5 +77,5 @@ <h3 class="localisation" id="debugText"></h3>
         <button class="localisation" type="button" id="cancelButton"/>
         <button class="localisation" type="button" id="saveChangesButton"/>
     </body>
-    <script type="module" src="./options.ts"></script>
+    <script src="./options.js"></script>
 </html>