chore(web): add inline assets (#1280)

* fix(web): add inline assets

* fix(scripts): ci failed

* fix(scripts): fix regex

* Update web/flat-web/scripts/vite-plugin-inline-assets.ts

fix cr

Co-authored-by: Black-Hole <[email protected]>

* Update web/flat-web/scripts/vite-plugin-inline-assets.ts

fix cr

Co-authored-by: Black-Hole <[email protected]>

* Update web/flat-web/scripts/vite-plugin-inline-assets.ts

fix cr

Co-authored-by: Black-Hole <[email protected]>

* Update web/flat-web/scripts/vite-plugin-inline-assets.ts

fix cr

Co-authored-by: Black-Hole <[email protected]>

* fix(scripts): import @netless/mini-svg-data-uri to encode svg file content

* chore(scripts): install mini-svg-data-uri

* fix(scripts): fix missing function

* Update web/flat-web/scripts/vite-plugin-inline-assets.ts

fix cr

Co-authored-by: LitoMore <[email protected]>

Co-authored-by: Black-Hole <[email protected]>
Co-authored-by: LitoMore <[email protected]>

Author: 3 people

web/flat-web/package.json

@@ -6,8 +6,10 @@
     "@babel/standalone": "7.14.1",
     "@hyrious/esbuild-dev": "^0.2.7",
     "@netless/eslint-plugin": "1.1.2",
+    "@netless/mini-svg-data-uri": "0.0.1",
     "@types/loadable__component": "^5.13.3",
     "@types/lodash-es": "^4.17.4",
+    "@types/mime": "^2.0.3",
     "@types/node": "^15.0.3",
     "@types/react": "^17.0.5",
     "@types/react-dom": "^17.0.3",
@@ -30,6 +32,7 @@
     "eslint-plugin-react-app": "^6.2.2",
     "less": "^4.1.1",
     "lint-staged": "^11.0.0",
+    "mime": "^3.0.0",
     "prettier": "^2.3.0",
     "vite": "^2.5.0"
   },

web/flat-web/scripts/vite-plugin-inline-assets.ts

@@ -0,0 +1,28 @@
+import type { Plugin } from "vite";
+import { promises as fsp } from "fs";
+import mime from "mime/lite";
+import svgToTinyDataUri from "@netless/mini-svg-data-uri";
+
+// e.g:
+// flat/node_modules/electron/index.js?v=19cea64f => flat/node_modules/electron/index.js
+const cleanUrl = (url: string): string => url.replace(/[?#].*$/, "");
+
+export function inlineAssets(): Plugin {
+    return {
+        name: "inline:assets",
+        enforce: "pre",
+        async transform(_, id: string) {
+            const filePath = cleanUrl(id);
+            if (/\.(svg|jpg|jpeg|png|gif)$/i.test(filePath)) {
+                const imageFileContent = await fsp.readFile(filePath);
+                const url = filePath.endsWith(".svg")
+                    ? svgToTinyDataUri(imageFileContent.toString("utf-8"), "utf8")
+                    : `data:${mime.getType(filePath)};base64,${imageFileContent.toString(
+                          "base64",
+                      )}`;
+                return `const content = "${url}";export default content;`;
+            }
+            return null;
+        },
+    };
+}

web/flat-web/vite.config.ts

@@ -5,15 +5,10 @@ import path from "path";
 import { dotenv } from "./scripts/vite-plugin-dotenv";
 import { injectHtmlHash } from "./scripts/vite-plugin-html-hash";
 import { version } from "./scripts/vite-plugin-version";
+import { inlineAssets } from "./scripts/vite-plugin-inline-assets";
 
 export default defineConfig({
-    plugins: [
-        refresh(),
-        legacy(),
-        dotenv(path.join(__dirname, "..", "..", "config")),
-        injectHtmlHash(),
-        version(path.join(__dirname, "..", "..", "desktop", "main-app", "package.json")),
-    ],
+    plugins: [refresh(), legacy(), dotenv("../../config"), injectHtmlHash(), version(path.join(__dirname, "..", "..", "desktop", "main-app", "package.json")), inlineAssets()],
     resolve: {
         alias: [
             // replace webpack alias

yarn.lock

@@ -1111,6 +1111,11 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/[email protected]":
+  version "7.13.9"
+  resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.13.9.tgz#38e78673e19f5077f4b294ad346780634e59e276"
+  integrity sha512-9ZpIl8rXXQqm5OdsQVhlBSPttwabiHGPGrl5N2bIxB9XS2NJW+1oiPFgMMNd+57C/xVwsEwD2mzv0KValOwlQA==
+
 "@babel/[email protected]":
   version "7.14.1"
   resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.14.1.tgz#2c5f6908f03108583eea75bdcc94eb29e720fbac"
@@ -1931,6 +1936,11 @@
   dependencies:
     query-string "^6.13.1"
 
+"@netless/[email protected]":
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/@netless/mini-svg-data-uri/-/mini-svg-data-uri-0.0.1.tgz#caae00d4fa23850fbb10644dba8e7bf4b64f7f8d"
+  integrity sha512-HsQ04Yzuh8PV4+N31erOeS2pEC6IHGCO/Y7RNwi3AWaQ5ASRpzUka5TxWE4QEXZoseccthcjVL5XN687b/cwRg==
+
 "@netless/player-controller@^0.0.9":
   version "0.0.9"
   resolved "https://registry.yarnpkg.com/@netless/player-controller/-/player-controller-0.0.9.tgz#2c2bad03d1d51c623a09cfa3e36a022809242fbb"
@@ -3244,6 +3254,11 @@
   dependencies:
     "@types/braces" "*"
 
+"@types/mime@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-2.0.3.tgz#c893b73721db73699943bfc3653b1deb7faa4a3a"
+  integrity sha512-Jus9s4CDbqwocc5pOAnh8ShfrnMcPHuJYzVcSUU7lrh8Ni5HuIqX3oilL86p3dlTrk0LzHRCgA/GQ7uNCw6l2Q==
+
 "@types/minimatch@*":
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.5.tgz#1001cc5e6a3704b83c236027e77f2f58ea010f40"
@@ -11577,6 +11592,11 @@ mime@^2.3.1, mime@^2.4.4, mime@^2.4.5, mime@^2.5.2:
   resolved "https://registry.yarnpkg.com/mime/-/mime-2.5.2.tgz#6e3dc6cc2b9510643830e5f19d5cb753da5eeabe"
   integrity sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==
 
+mime@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-3.0.0.tgz#b374550dca3a0c18443b0c950a6a58f1931cf7a7"
+  integrity sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==
+
 mimic-fn@^2.0.0, mimic-fn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"