Add ScriptLoader

packages/core/src/asset/AssetType.ts

@@ -56,5 +56,7 @@ export enum AssetType {
   /** Source Font, include ttf、 otf and woff. */
   SourceFont = "SourceFont",
   /** Project asset. */
-  Project = "project"
+  Project = "project",
+  /** Script in ES module. */
+  Script = "Script"
 }

packages/loader/src/ScriptLoader.ts

@@ -0,0 +1,20 @@
+import { AssetPromise, AssetType, Loader, LoadItem, resourceLoader, Script } from "@galacean/engine-core";
+
+interface ESModuleStructure {
+  default?: Script;
+  [key: string]: any;
+}
+
+@resourceLoader(AssetType.Script, ["js", "mjs"], false)
+export class ScriptLoader extends Loader<ESModuleStructure> {
+  load(item: LoadItem): AssetPromise<ESModuleStructure> {
+    return new AssetPromise((resolve, reject) => {
+      const { url } = item;
+      (import(url) as Promise<ESModuleStructure>)
+        .then((esModule) => {
+          resolve(esModule);
+        })
+        .catch(reject);
+    });
+  }
+}

packages/loader/src/index.ts

@@ -19,12 +19,14 @@ import "./SpriteLoader";
 import "./Texture2DLoader";
 import "./TextureCubeLoader";
 import "./ktx2/KTX2Loader";
+import "./ScriptLoader";
 
 export { GLTFLoader } from "./GLTFLoader";
 export type { GLTFParams } from "./GLTFLoader";
 export * from "./SceneLoader";
 export type { Texture2DParams } from "./Texture2DLoader";
 export { parseSingleKTX } from "./compressed-texture";
+export { ScriptLoader } from "./ScriptLoader";
 export * from "./gltf";
 export { KTX2Loader, KTX2Transcoder } from "./ktx2/KTX2Loader";
 export { KTX2TargetFormat } from "./ktx2/KTX2TargetFormat";

tests/src/loader/ScriptLoader.test.ts

@@ -0,0 +1,59 @@
+import { WebGLEngine } from "@galacean/engine-rhi-webgl";
+import { AssetType, Script } from "@galacean/engine-core";
+import "@galacean/engine-loader";
+import { describe, it, expect, beforeAll, afterAll } from "vitest";
+
+let engine: WebGLEngine;
+
+interface ESModuleStructure {
+  default?: Script;
+  [key: string]: any;
+}
+
+beforeAll(async () => {
+  const canvasDOM = document.createElement("canvas");
+  canvasDOM.width = 1024;
+  canvasDOM.height = 1024;
+  engine = await WebGLEngine.create({ canvas: canvasDOM });
+});
+
+describe("ScriptLoader test", function () {
+  it("loader from string url", async () => {
+
+    engine.resourceManager.load<ESModuleStructure>({
+      url: "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
+      type: AssetType.Script
+    })
+    .then((script) => {
+      expect(script).not.to.be.null;
+      expect(script.default).not.to.be.null;
+      expect(script.colord).not.to.be.null;
+      expect(script.getFormat).not.to.be.null;
+      expect(script.random).not.to.be.null;
+    });
+  });
+
+  it("loader from blob raw script text", async () => {
+    const esModuleString = `
+      export const colord = "colord";
+      export const getFormat = () => "getFormat";
+      export default colord;
+    `
+    engine.resourceManager.load<ESModuleStructure>({
+      url: URL.createObjectURL(new Blob([esModuleString], { type: "application/javascript" })),
+      type: AssetType.Script
+    })
+    .then((script) => {
+      expect(script).not.to.be.null;
+      expect(script.colord).not.to.be.null;
+      expect(script.getFormat).not.to.be.null;
+      expect(script.default).not.to.be.null;
+      expect(script.default).equal(script.colord)
+    })
+  });
+
+  afterAll(function () {
+    engine.resourceManager.gc();
+    engine.destroy();
+  });
+});