Add ScriptLoader

packages/core/src/animation/Keyframe.ts

@@ -10,16 +10,16 @@ export class Keyframe<
   T = V extends number
     ? number
     : V extends Vector2
-    ? Vector2
-    : V extends Vector3
-    ? Vector3
-    : V extends Vector4 | Color | Quaternion | Rect
-    ? Vector4
-    : V extends number[] | Float32Array
-    ? number[]
-    : V extends ReferResource
-    ? ReferResource
-    : never
+      ? Vector2
+      : V extends Vector3
+        ? Vector3
+        : V extends Vector4 | Color | Quaternion | Rect
+          ? Vector4
+          : V extends number[] | Float32Array
+            ? number[]
+            : V extends ReferResource
+              ? ReferResource
+              : never
 > {
   /** The time of the Keyframe. */
   time: number;

packages/core/src/animation/internal/animationCurveOwner/AnimationCurveOwner.ts

@@ -92,17 +92,17 @@ export class AnimationCurveOwner<V extends KeyframeValueType> {
           ? srcCurve._evaluateAdditive(srcTime, this.baseEvaluateData)
           : srcCurve._evaluate(srcTime, this.baseEvaluateData)
         : additive
-        ? this.cureType._getZeroValue(this.baseEvaluateData.value)
-        : this.defaultValue;
+          ? this.cureType._getZeroValue(this.baseEvaluateData.value)
+          : this.defaultValue;
 
     const destValue =
       destCurve && destCurve.keys.length
         ? additive
           ? destCurve._evaluateAdditive(destTime, this.crossEvaluateData)
           : destCurve._evaluate(destTime, this.crossEvaluateData)
         : additive
-        ? this.cureType._getZeroValue(this.crossEvaluateData.value)
-        : this.defaultValue;
+          ? this.cureType._getZeroValue(this.crossEvaluateData.value)
+          : this.defaultValue;
 
     return this._lerpValue(srcValue, destValue, crossWeight);
   }
@@ -126,8 +126,8 @@ export class AnimationCurveOwner<V extends KeyframeValueType> {
           ? destCurve._evaluateAdditive(destTime, this.crossEvaluateData)
           : destCurve._evaluate(destTime, this.crossEvaluateData)
         : additive
-        ? this.cureType._getZeroValue(this.crossEvaluateData.value)
-        : this.defaultValue;
+          ? this.cureType._getZeroValue(this.crossEvaluateData.value)
+          : this.defaultValue;
 
     return this._lerpValue(srcValue, destValue, crossWeight);
   }

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";
+
+export interface ESModule {
+  default?: any;
+  [key: string]: any;
+}
+
+@resourceLoader(AssetType.Script, ["js", "mjs"], false)
+export class ScriptLoader extends Loader<ESModule> {
+  load(item: LoadItem): AssetPromise<ESModule> {
+    return new AssetPromise((resolve, reject) => {
+      const { url } = item;
+      (import(/* @vite-ignore */ url) as Promise<ESModule>)
+        .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, type ESModule } from "./ScriptLoader";
 export * from "./gltf";
 export { KTX2Loader, KTX2Transcoder } from "./ktx2/KTX2Loader";
 export { KTX2TargetFormat } from "./ktx2/KTX2TargetFormat";

rollup.config.js

@@ -202,4 +202,4 @@ function getAll() {
   return [...getModule(), ...getMini(), ...getUMD()];
 }
 
-export default Promise.all(promises);
+export default Promise.all(promises);

tests/src/loader/ScriptLoader.test.ts

@@ -0,0 +1,55 @@
+import { WebGLEngine } from "@galacean/engine-rhi-webgl";
+import { AssetType } from "@galacean/engine-core";
+import "@galacean/engine-loader";
+import type { ESModule } from "@galacean/engine-loader";
+import { describe, it, expect, beforeAll, afterAll } from "vitest";
+
+let engine: WebGLEngine;
+
+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<ESModule>({
+      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<ESModule>({
+      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();
+  });
+});