build: bundle assets inline for the component library (#513)

* build: bundle assets inline for the component library

* chore(deps): allow react version 17.x.x and 18.x.x

.depcheckrc.json

@@ -14,6 +14,7 @@
     "crypto*",
     "stream*",
     "env-paths",
-    "open"
+    "open",
+    "base64-inline-loader"
   ]
-}
+}

package-lock.json

@@ -33,9 +33,9 @@
         "notistack": "1.0.10",
         "opener": "1.5.2",
         "qrcode.react": "1.0.1",
-        "react": ">= 17.0.2",
+        "react": ">=17.0.0 || >=18.0.0",
         "react-copy-to-clipboard": "5.0.4",
-        "react-dom": ">= 17.0.2",
+        "react-dom": ">=17.0.0 || >=18.0.0",
         "react-identicons": "1.2.5",
         "react-router": "6.2.1",
         "react-router-dom": "6.2.1",
@@ -65,9 +65,9 @@
         "@types/file-saver": "2.0.4",
         "@types/jest": "27.0.2",
         "@types/qrcode.react": "1.0.2",
-        "@types/react": "17.0.34",
+        "@types/react": ">=17.0.0 || >=18.0.0",
         "@types/react-copy-to-clipboard": "5.0.2",
-        "@types/react-dom": "17.0.11",
+        "@types/react-dom": ">=17.0.0 || >=18.0.0",
         "@types/react-router": "5.1.18",
         "@types/react-router-dom": "5.3.2",
         "@types/react-syntax-highlighter": "13.5.2",
@@ -78,6 +78,7 @@
         "babel-loader": "8.1.0",
         "babel-plugin-syntax-dynamic-import": "6.18.0",
         "babel-plugin-tsconfig-paths": "1.0.2",
+        "base64-inline-loader": "^2.0.1",
         "cors": "^2.8.5",
         "depcheck": "^1.4.3",
         "env-paths": "^3.0.0",
@@ -98,6 +99,7 @@
         "prettier": "2.4.1",
         "puppeteer": "^15.4.0",
         "react-scripts": "^5.0.1",
+        "rimraf": "^3.0.2",
         "ts-node": "^10.8.1",
         "typescript": "4.7.3",
         "web-vitals": "2.1.2",
@@ -6565,6 +6567,20 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/base64-inline-loader": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/base64-inline-loader/-/base64-inline-loader-2.0.1.tgz",
+      "integrity": "sha512-PW2f2Xl2PDB+0ny7H81Ucxh3L0IcZVqbWdKrCf52OJhphy4lgv4G1KOLmhxRGwK9qVtPqqcEwvnemqOOFRSjOw==",
+      "dev": true,
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "mime-types": "^2.1.32"
+      },
+      "engines": {
+        "node": ">=6.2",
+        "npm": ">=3.8"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -25446,6 +25462,16 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "base64-inline-loader": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/base64-inline-loader/-/base64-inline-loader-2.0.1.tgz",
+      "integrity": "sha512-PW2f2Xl2PDB+0ny7H81Ucxh3L0IcZVqbWdKrCf52OJhphy4lgv4G1KOLmhxRGwK9qVtPqqcEwvnemqOOFRSjOw==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "mime-types": "^2.1.32"
+      }
+    },
     "base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",

package.json

@@ -50,9 +50,9 @@
     "notistack": "1.0.10",
     "opener": "1.5.2",
     "qrcode.react": "1.0.1",
-    "react": ">= 17.0.2",
+    "react": ">=17.0.0 || >=18.0.0",
     "react-copy-to-clipboard": "5.0.4",
-    "react-dom": ">= 17.0.2",
+    "react-dom": ">=17.0.0 || >=18.0.0",
     "react-identicons": "1.2.5",
     "react-router": "6.2.1",
     "react-router-dom": "6.2.1",
@@ -92,6 +92,7 @@
     "babel-loader": "8.1.0",
     "babel-plugin-syntax-dynamic-import": "6.18.0",
     "babel-plugin-tsconfig-paths": "1.0.2",
+    "base64-inline-loader": "^2.0.1",
     "cors": "^2.8.5",
     "depcheck": "^1.4.3",
     "env-paths": "^3.0.0",
@@ -112,6 +113,7 @@
     "prettier": "2.4.1",
     "puppeteer": "^15.4.0",
     "react-scripts": "^5.0.1",
+    "rimraf": "^3.0.2",
     "ts-node": "^10.8.1",
     "typescript": "4.7.3",
     "web-vitals": "2.1.2",
@@ -127,7 +129,7 @@
     "start": "react-scripts start",
     "desktop": "node ./desktop.mjs",
     "build": "react-scripts build",
-    "build:component": "webpack --mode=production",
+    "build:component": "rimraf ./lib && webpack --mode=production",
     "compile:types": "tsc --project tsconfig.lib.json --emitDeclarationOnly --declaration",
     "test": "react-scripts test",
     "test:ui": "node ui-test/index.js",
@@ -160,4 +162,4 @@
     "npm": ">=6.9.0",
     "bee": ">=0.6.0"
   }
-}
+}

webpack.config.js

@@ -35,18 +35,9 @@ module.exports = () => {
           use: ['style-loader', 'css-loader'],
         },
         {
-          test: /\.(png|jp(e*)g|svg|gif)$/,
+            test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
-          loader: 'file-loader',
+            use: ['base64-inline-loader'],
-          options: {
+            type: 'javascript/auto'
-            name: 'assets/[name].[ext]',
-          },
-        },
-        {
-          test: /\.(ttf)$/,
-          loader: 'file-loader',
-          options: {
-            name: 'assets/fonts/[name].[ext]',
-          },
         },
         {
           test: /\.(ts|js|tsx|jsx)$/,