From a7bd94af8293cc8f90f91dc220600202b19e5767 Mon Sep 17 00:00:00 2001 From: Vojtech Simetka Date: Wed, 3 Aug 2022 07:28:57 +0200 Subject: [PATCH] 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 | 5 +++-- package-lock.json | 34 ++++++++++++++++++++++++++++++---- package.json | 10 ++++++---- webpack.config.js | 15 +++------------ 4 files changed, 42 insertions(+), 22 deletions(-) diff --git a/.depcheckrc.json b/.depcheckrc.json index 2f958847..3261fd35 100644 --- a/.depcheckrc.json +++ b/.depcheckrc.json @@ -14,6 +14,7 @@ "crypto*", "stream*", "env-paths", - "open" + "open", + "base64-inline-loader" ] -} +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index d1ec15a3..9ddc29a7 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index afbb0218..2234c535 100644 --- a/package.json +++ b/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" } -} +} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 5333883c..2f9bf858 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -35,18 +35,9 @@ module.exports = () => { use: ['style-loader', 'css-loader'], }, { - test: /\.(png|jp(e*)g|svg|gif)$/, - loader: 'file-loader', - options: { - name: 'assets/[name].[ext]', - }, - }, - { - test: /\.(ttf)$/, - loader: 'file-loader', - options: { - name: 'assets/fonts/[name].[ext]', - }, + test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, + use: ['base64-inline-loader'], + type: 'javascript/auto' }, { test: /\.(ts|js|tsx|jsx)$/,