refactor: move to using bundle-text imports and reduce minification (#297)

Author: AndrewBastin

package.json

@@ -4,15 +4,16 @@
   "description": "Provides more features to the Hoppscotch webapp (https://hoppscotch.io/)",
   "scripts": {
     "clean": "rimraf dist .parcel-cache",
-    "build:chrome": "HOPP_EXTENSION_TARGET=CHROME parcel build src/* --dist-dir dist/ && copyfiles icons/* dist",
-    "build:firefox": "HOPP_EXTENSION_TARGET=FIREFOX parcel build src/* --dist-dir dist/ && copyfiles icons/* dist"
+    "build:chrome": "HOPP_EXTENSION_TARGET=CHROME parcel build src/* --dist-dir dist/ --no-optimize && copyfiles icons/* dist",
+    "build:firefox": "HOPP_EXTENSION_TARGET=FIREFOX parcel build src/* --dist-dir dist/ --no-optimize && copyfiles icons/* dist"
   },
   "author": "Andrew Bastin",
   "license": "MIT",
   "devDependencies": {
     "@parcel/config-default": "^2.10.0",
     "@parcel/core": "^2.10.0",
     "@parcel/plugin": "^2.10.0",
+    "@parcel/transformer-inline-string": "2.10.0",
     "@parcel/transformer-raw": "^2.10.0",
     "@types/chrome": "^0.0.246",
     "@types/node": "^17.0.23",
@@ -25,6 +26,7 @@
   },
   "dependencies": {
     "axios": "^1.5.1",
+    "lit": "^3.1.3",
     "lit-html": "^3.0.0"
   }
 }

pnpm-lock.yaml

@@ -1,22 +1,12 @@
-const fs = require("fs")
+import hookContent from "bundle-text:./hookContent.js"
+import hookContentInvalidOrigin from "bundle-text:./hookContentInvalidOrigin.js"
 
 declare global {
   interface Window {
     HOPP_CONTENT_SCRIPT_EXECUTED: boolean
   }
 }
 
-const hookContent = fs.readFileSync(__dirname + "/hookContent.js", {
-  encoding: "utf-8",
-})
-
-const hookContentInvalidOrigin = fs.readFileSync(
-  __dirname + "/hookContentInvalidOrigin.js",
-  {
-    encoding: "utf-8",
-  }
-)
-
 export type HOOK_MESSAGE = {
   type: "execute_hook"
   origin_type: "VALID_ORIGIN" | "UNKNOWN_ORIGIN"

src/contentScript.ts

@@ -1,14 +1,13 @@
 import { html, render } from "lit-html"
-import { unsafeSVG } from "lit-html/directives/unsafe-svg"
+import { unsafeSVG } from "lit/directives/unsafe-svg"
+import ICON_ADD from "bundle-text:./add-icon.svg"
+import ICON_DELETE from "bundle-text:./delete-icon.svg"
+import ICON_ERROR from "bundle-text:./error-icon.svg"
 
 import { DEFAULT_ORIGIN_LIST } from "./defaultOrigins"
 
 const fs = require("fs")
 
-const ICON_ADD = fs.readFileSync(__dirname + "/add-icon.svg", "utf8")
-const ICON_DELETE = fs.readFileSync(__dirname + "/delete-icon.svg", "utf8")
-const ICON_ERROR = fs.readFileSync(__dirname + "/error-icon.svg", "utf8")
-
 let origins: string[] = []
 
 let inputText = ""