feat: support custom urls for wasm and js file (#7)

* feat: support custom urls for wasm and js file
gz65555 · Dec 10, 2024 · 55e41d4 · 55e41d4
1 parent f6d2d53
commit 55e41d4
Show file tree

Hide file tree

Showing 20 changed files with 926 additions and 607 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+**/*.js
diff --git a/example/page/DownloadComponent.tsx b/example/page/DownloadComponent.tsx
@@ -5,7 +5,7 @@ import jszip from "jszip";
 import { PreEncodeFile } from "./type";
 import { useState } from "react";
 import { downloadBlob } from "./utils";
-import { encodeToKTX2 } from "../../src";
+import { encodeToKTX2 } from "../../src/web";
 
 export const DownloadComponent: React.FC<{ list: PreEncodeFile[] }> = ({ list }) => {
   const [isLoading, setIsLoading] = useState(false);
@@ -19,7 +19,7 @@ export const DownloadComponent: React.FC<{ list: PreEncodeFile[] }> = ({ list })
         const promises = list.map((item) => {
           return item.file.arrayBuffer().then(async (buffer) => {
             return encodeToKTX2(new Uint8Array(buffer), {
-              isUASTC: false,
+              isUASTC: true,
               enableDebug: false,
               qualityLevel: 230,
               generateMipmap: true

diff --git a/index.html b/index.html
@@ -1,16 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>KTX2 Encoder</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="favicon.svg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>KTX2 Encoder</title>
-</head>
-
-<body>
-  <div id="root"></div>
-  <script type="module" src="/example/page/main.tsx"></script>
-</body>
-
-</html>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/example/page/main.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
   "scripts": {
     "dev": "vite --host",
     "docs": "typedoc ./src/web/index.ts --plugin typedoc-plugin-markdown --out ./docs",
-    "build": "tsc -p tsconfig.json && cp -R src/node/basis dist/node",
+    "build": "tsc -p tsconfig.json && cp -R src/basis dist",
     "test": "npm run test:node && npm run test:web",
     "test:node": "vitest run ./test/node.test.ts",
     "test:web": "vitest run --browser.name=chrome ./test/web.test.ts",
@@ -51,22 +51,22 @@
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/browser": "^1.3.1",
+    "@vitest/browser": "^2.1.8",
     "@webgpu/types": "^0.1.40",
     "antd": "^5.8.2",
     "bumpp": "^9.4.0",
     "jszip": "^3.10.1",
     "prettier": "^2.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sharp": "^0.33.2",
+    "sharp": "^0.33.5",
     "tsc-alias": "^1.8.8",
     "tsconfig-paths": "^4.2.0",
     "typedoc": "^0.26.3",
     "typedoc-plugin-markdown": "^4.1.1",
     "typescript": "^5",
     "vite": "^5.1.5",
-    "vitest": "^1.3.1",
+    "vitest": "^2.1.8",
     "webdriverio": "^8.32.4"
   },
   "dependencies": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/basis_encoder.wasm b/public/basis_encoder.wasm
diff --git a/public/tests/DuckCM-etc1s.ktx2 b/public/tests/DuckCM-etc1s.ktx2
diff --git a/public/tests/DuckCM-uastc.ktx2 b/public/tests/DuckCM-uastc.ktx2
diff --git a/src/basis/basis_encoder.d.ts b/src/basis/basis_encoder.d.ts
@@ -0,0 +1,4 @@
+import type { IBasisModule } from "../../type";
+
+declare const BASIS: () => IBasisModule;
+export default BASIS;
diff --git a/src/basis/basis_encoder.js b/src/basis/basis_encoder.js
diff --git a/src/basis/basis_encoder.wasm b/src/basis/basis_encoder.wasm
diff --git a/src/node/NodeBasisEncoder.ts b/src/node/NodeBasisEncoder.ts
@@ -1,7 +1,7 @@
 import { SourceType } from "../enum.js";
 import { IBasisModule, IEncodeOptions } from "../type.js";
 import { applyInputOptions } from "../utils.js";
-import BASIS from "./basis/basis_encoder.cjs";
+import BASIS from "../basis/basis_encoder.js";
 
 let promise: Promise<IBasisModule> | null = null;
 

diff --git a/src/node/basis/basis_encoder.cjs b/src/node/basis/basis_encoder.cjs
diff --git a/src/node/basis/basis_encoder.d.ts b/src/node/basis/basis_encoder.d.ts
diff --git a/src/node/basis/basis_encoder.wasm b/src/node/basis/basis_encoder.wasm
diff --git a/src/type.ts b/src/type.ts
@@ -180,4 +180,12 @@ export interface IEncodeOptions {
    * @returns
    */
   imageDecoder?: (buffer: Uint8Array) => Promise<{ width: number; height: number; data: Uint8Array }>;
+  /**
+   * js url
+   */
+  jsUrl?: string;
+  /**
+   * wasm url
+   */
+  wasmUrl?: string;
 }
diff --git a/src/web/BrowserBasisEncoder.ts b/src/web/BrowserBasisEncoder.ts
@@ -6,61 +6,23 @@ import { BasisTextureType, SourceType } from "../enum.js";
 declare function importScripts(...args: any): any;
 
 let promise: Promise<IBasisModule> | null = null;
-const isInWorker = typeof document === "undefined";
 
 class BrowserBasisEncoder {
-  async init() {
+  async init(options?: { jsUrl?: string; wasmUrl?: string }) {
     if (!promise) {
       function _init(): Promise<IBasisModule> {
         return new Promise((resolve, reject) => {
-          if (!isInWorker) {
-            Promise.all([
-              fetch(
-                "https://mdn.alipayobjects.com/rms/afts/file/A*SrRkQarYYl4AAAAAAAAAAAAAARQnAQ/basis_encoder.js"
-              ).then((res) => res.text()),
-              fetch(
-                "https://mdn.alipayobjects.com/rms/afts/file/A*qFWbTrA0hZYAAAAAAAAAAAAAARQnAQ/basis_encoder.wasm"
-              ).then((res) => res.arrayBuffer())
-            ])
-              .then(([basisEncoderCode, wasmBinary]) => {
-                const script = document.createElement("script");
-                script.onload = () => {
-                  const basisModule = {
-                    wasmBinary
-                  };
-                  // @ts-ignore
-                  BASIS(basisModule)
-                    .then((Module: any) => {
-                      Module.initializeBasis();
-                      resolve(Module);
-                    })
-                    .catch(reject);
-                };
-                script.src = URL.createObjectURL(new Blob([basisEncoderCode]));
-                script.onerror = reject;
-                document.body.appendChild(script);
-              })
-              .catch(reject);
-          } else {
-            importScripts(
-              "https://mdn.alipayobjects.com/rms/afts/file/A*SrRkQarYYl4AAAAAAAAAAAAAARQnAQ/basis_encoder.js"
-            );
-            fetch("https://mdn.alipayobjects.com/rms/afts/file/A*qFWbTrA0hZYAAAAAAAAAAAAAARQnAQ/basis_encoder.wasm")
-              .then((res) => res.arrayBuffer())
-              .then((wasmBinary) => {
-                const basisModule = {
-                  wasmBinary
-                };
-                // @ts-ignore
-                BASIS(basisModule)
-                  .then((Module: any) => {
-                    Module.initializeBasis();
-                    resolve(Module);
-                  })
-                  .catch(reject);
-              })
-              .catch(reject);
-          }
+          Promise.all([
+            options?.jsUrl ? import(/* @vite-ignore */ options.jsUrl) : import("../basis/basis_encoder.js"),
+            options?.wasmUrl ? fetch(options.wasmUrl).then((res) => res.arrayBuffer()) : undefined
+          ])
+            .then(([{ default: BASIS }, wasmBinary]) => {
+              return BASIS({ wasmBinary }).then((Module: IBasisModule) => {
+                Module.initializeBasis();
+                resolve(Module);
+              });
+            })
+            .catch(reject);
         });
       }
       promise = _init();
@@ -69,7 +31,7 @@ class BrowserBasisEncoder {
   }
 
   encode(imageBuffer: Uint8Array, options: Partial<IEncodeOptions> = {}) {
-    return this.init().then((basisModule) => {
+    return this.init(options).then((basisModule) => {
       const encoder = new basisModule.BasisEncoder();
       applyInputOptions(options, encoder);
       encoder.setTexType(BasisTextureType.cBASISTexType2D);

diff --git a/test/web.test.ts b/test/web.test.ts
@@ -7,7 +7,8 @@ test("uastc", async () => {
     isUASTC: true,
     enableDebug: false,
     qualityLevel: 230,
-    generateMipmap: true
+    generateMipmap: true,
+    wasmUrl: "/basis_encoder.wasm"
   });
 
   const resultBuffer = await fetch("/tests/DuckCM-uastc.ktx2").then((res) => res.arrayBuffer());

diff --git a/tsconfig.json b/tsconfig.json
@@ -6,14 +6,12 @@
     "module": "NodeNext",
     "skipLibCheck": true,
 
-    /* Bundler mode */
     "moduleResolution": "NodeNext",
     "allowImportingTsExtensions": false,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "react-jsx",
 
-    /* Linting */
     "strict": false,
     "noUnusedLocals": false,
     "noUnusedParameters": false,

diff --git a/vite.config.ts b/vite.config.ts
@@ -14,17 +14,5 @@ export default defineConfig({
       }
     }
   },
-  test: {
-    deps: {
-      interopDefault: true,
-      optimizer: {
-        web: { include: ["./src/node/basis/basis_encoder.cjs"] }
-      }
-    },
-    server: {
-      deps: {
-        fallbackCJS: true
-      }
-    }
-  }
+  test: {}
 });