[#1220] fix settings for the fetch request not being applied in es6 builds

obiot · obiot · commit 600959be82e6 · 2024-02-24T14:50:45.000+08:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,9 +5,12 @@
 ### Added
 - Sprite: add support for aseprite texture atlas  
 - Atlas: `createSpritefromAnim` parameter is now optional, and if not defined will use all defined index in the corresponding atlas
+- Loader: new `setOptions` method that allows specifying custom settings to be applied to fetch requests (crossOrigin, withCredentials, etc..)
 
 ### Fixed
 - Doc: fix hyperlinks to source code within documentation (thanks @Waltibaba)
+- Loader: fix settings for the fetch request not being applied in es6 builds (thanks @B0sh)
+
 
 ## [16.1.2] (melonJS 2) - _2024-02-12_
 
diff --git a/src/audio/audio.js b/src/audio/audio.js
@@ -1,7 +1,6 @@
 // external import
 import {Howl, Howler} from "howler";
 import {clamp} from "./../math/math.js";
-import { nocache, withCredentials} from "./../loader/settings.js";
 import { isDataUrl } from "./../utils/string.js";
 
 /**
@@ -141,9 +140,10 @@ export function disable() {
  * @param {loader.Asset} sound
  * @param {Function} [onloadcb] - function to be called when the resource is loaded
  * @param {Function} [onerrorcb] - function to be called in case of error
+ * @param {Object} [settings] - custom settings to apply to the request (@link https://developer.mozilla.org/en-US/docs/Web/API/fetch#options)
  * @returns {number} the amount of asset loaded (always 1 if successfull)
  */
-export function load(sound, onloadcb, onerrorcb) {
+export function load(sound, onloadcb, onerrorcb, settings = {}) {
     let urls = [];
     if (audioExts.length === 0) {
         throw new Error("target audio extension(s) should be set through me.audio.init() before calling the preloader.");
@@ -152,7 +152,7 @@ export function load(sound, onloadcb, onerrorcb) {
         urls.push(sound.src);
     } else {
         for (let i = 0; i < audioExts.length; i++) {
-            urls.push(sound.src + sound.name + "." + audioExts[i] + nocache);
+            urls.push(sound.src + sound.name + "." + audioExts[i] + settings.nocache);
         }
     }
 
@@ -162,7 +162,7 @@ export function load(sound, onloadcb, onerrorcb) {
         autoplay : sound.autoplay === true,
         loop : sound.loop = true,
         html5 : sound.stream === true || sound.html5 === true,
-        xhrWithCredentials : withCredentials,
+        xhrWithCredentials : settings.withCredentials,
         onloaderror() {
             soundLoadError.call(this, sound.name, onerrorcb);
         },
diff --git a/src/loader/loader.js b/src/loader/loader.js
@@ -10,17 +10,127 @@ import { preloadJSON } from "./parsers/json.js";
 import { preloadBinary } from "./parsers/binary.js";
 import { preloadJavascript } from "./parsers/script.js";
 import { preloadVideo } from "./parsers/video.js";
-import { baseURL } from "./settings.js";
 import { warning } from "../lang/console.js";
 
-
 /**
  * a small class to manage loading of stuff and manage resources
  * @namespace loader
  */
 
-// for backward compatibility
-export * from "./settings.js";
+
+//  to enable/disable caching
+export let nocache = "";
+
+// baseURL
+export let baseURL = {};
+
+/**
+ * crossOrigin attribute to configure the CORS requests for Image and Video data element.
+ * By default (that is, when the attribute is not specified), CORS is not used at all.
+ * The "anonymous" keyword means that there will be no exchange of user credentials via cookies,
+ * client-side SSL certificates or HTTP authentication as described in the Terminology section of the CORS specification.<br>
+ * @type {string}
+ * @name crossOrigin
+ * @default undefined
+ * @see loader.setOptions
+ * @memberof loader
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes
+ * @example
+ *  // allow for cross-origin texture loading
+ * me.loader.crossOrigin = "anonymous";
+ *
+ * // set all ressources to be loaded
+ * me.loader.preload(game.resources, () => this.loaded());
+ */
+export let crossOrigin;
+
+/**
+ * indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies,
+ * authorization headers or TLS client certificates. Setting withCredentials has no effect on same-site requests.
+ * @public
+ * @type {boolean}
+ * @name withCredentials
+ * @see loader.setOptions
+ * @default false
+ * @memberof loader
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials
+ * @example
+ *  // enable withCredentials
+ * me.loader.withCredentials = true;
+ *
+ * // set all ressources to be loaded
+ * me.loader.preload(game.resources, () => this.loaded());
+ */
+export let withCredentials = false;
+
+/**
+ * enable the nocache mechanism
+ * @ignore
+ */
+export function setNocache(enable = false) {
+    nocache = enable ? "?" + ~~(Math.random() * 10000000) : "";
+}
+
+/**
+ * Sets the options for the loader.
+ * @memberof loader
+ * @param {Object} options - The options to set.
+ * @param {string} [options.crossOrigin] - The crossOrigin attribute to configure the CORS requests for Image and Video data element.
+ * @param {boolean} [options.nocache] - Enable or disable the nocache mechanism.
+ * @param {boolean} [options.withCredentials] - Indicates whether or not cross-site Access-Control requests should be made using credentials.
+ * @example
+ * // Set the crossOrigin attribute to "anonymous"
+ * me.loader.setOptions({ crossOrigin: "anonymous" });
+ *
+ * // Enable the nocache mechanism
+ * me.loader.setOptions({ nocache: true });
+ *
+ * // Enable withCredentials
+ * me.loader.setOptions({ withCredentials: true });
+ */
+export function setOptions(options) {
+    if (options.crossOrigin !== undefined) {
+        crossOrigin = options.crossOrigin;
+    }
+    if (options.nocache !== undefined) {
+        setNocache(options.nocache);
+    }
+    if (options.withCredentials !== undefined) {
+        withCredentials = options.withCredentials;
+    }
+}
+
+/**
+ * change the default baseURL for the given asset type.<br>
+ * (this will prepend the asset URL and must finish with a '/')
+ * @name setBaseURL
+ * @memberof loader
+ * @public
+ * @param {string} type  - "*", "audio", "video", "binary", "image", "json", "js", "tmx", "tsx"
+ * @param {string} [url="./"] - default base URL
+ * @example
+ * // change the base URL relative address for audio assets
+ * me.loader.setBaseURL("audio", "data/audio/");
+ * // change the base URL absolute address for all object types
+ * me.loader.setBaseURL("*", "http://myurl.com/")
+ */
+export function setBaseURL(type, url) {
+    if (type !== "*") {
+        baseURL[type] = url;
+    } else {
+        // "wildcards"
+        baseURL["audio"] = url;
+        baseURL["video"] = url;
+        baseURL["binary"] = url;
+        baseURL["image"] = url;
+        baseURL["json"] = url;
+        baseURL["js"] = url;
+        baseURL["tmx"] = url;
+        baseURL["tsx"] = url;
+        // XXX ?
+        //baseURL["fontface"] = url;
+    }
+}
 
 /**
  * onload callback
@@ -375,7 +485,11 @@ export function load(asset, onload, onerror) {
     }
 
     // parser returns the amount of asset to be loaded (usually 1 unless an asset is splitted into several ones)
-    return parser.call(this, asset, onload, onerror);
+    return parser.call(this, asset, onload, onerror, {
+        nocache: nocache,
+        crossOrigin: crossOrigin,
+        withCredentials: withCredentials
+    });
 }
 
 /**
diff --git a/src/loader/parsers/binary.js b/src/loader/parsers/binary.js
@@ -6,12 +6,13 @@ import { fetchData } from "./fetchdata.js";
  * @param {loader.Asset} data - asset data
  * @param {Function} [onload] - function to be called when the asset is loaded
  * @param {Function} [onerror] - function to be called in case of error
+ * @param {Object} [settings] - Additional settings to be passed when loading the asset
  * @returns {number} the amount of corresponding resource parsed/preloaded
  * @ignore
  */
-export function preloadBinary(data, onload, onerror) {
+export function preloadBinary(data, onload, onerror, settings) {
 
-    fetchData(data.src, "arrayBuffer")
+    fetchData(data.src, "arrayBuffer", settings)
         .then(response => {
             // this method is native and might be slightly more efficient
             const decoder = new TextDecoder(); // the default for this is 'utf-8'
diff --git a/src/loader/parsers/fetchdata.js b/src/loader/parsers/fetchdata.js
@@ -1,9 +1,8 @@
-import { nocache, crossOrigin, withCredentials } from "../settings.js";
-
 /**
  * Fetches data from the specified URL.
  * @param {string} url - The URL to fetch the data from.
  * @param {string} responseType - The type of response expected ('json', 'text', 'blob', 'arrayBuffer').
+ * @param {Object} [settings] - custom settings to apply to the request (@link https://developer.mozilla.org/en-US/docs/Web/API/fetch#options)
  * @returns {Promise} A promise that resolves with the fetched data or rejects with an error.
  * @example
  * fetchData('https://api.example.com/data', 'json')
@@ -14,15 +13,18 @@ import { nocache, crossOrigin, withCredentials } from "../settings.js";
  *         // Handle the error
  *     });
  */
-export function fetchData(url, responseType) {
+export function fetchData(url, responseType, settings = {}) {
+    console.log("cache", settings.nocache);
+    console.log("crossOrigin", settings.crossOrigin);
+    console.log("withCredentials", settings.withCredentials);
     return new Promise((resolve, reject) => {
         fetch(url, {
             method: "GET",
             // internally nocache is a string with a generated random number
-            cache: nocache === "" ? "no-cache" : "reload",
-            credentials: withCredentials ? "include" : "omit",
+            cache: settings.nocache === "" ? "no-cache" : "reload",
+            credentials: settings.withCredentials === true ? "include" : "omit",
             // see setting.crossorigin, "anonymous" is used for cross-origin requests
-            mode: crossOrigin === "anonymous" ? "cors" : "no-cors"
+            mode: settings.crossOrigin === "anonymous" ? "cors" : "no-cors"
         })
             .then(response => {
                 if (!response.ok) {
diff --git a/src/loader/parsers/image.js b/src/loader/parsers/image.js
@@ -7,6 +7,7 @@ import * as fileUtil from "./../../utils/file.js";
  * @param {loader.Asset} img
  * @param {Function} [onload] - function to be called when the resource is loaded
  * @param {Function} [onerror] - function to be called in case of error
+ * @param {Object} [settings] - Additional settings to be passed when loading the asset
  * @returns {number} the amount of corresponding resource parsed/preloaded
  * @ignore
  * @example
@@ -17,7 +18,7 @@ import * as fileUtil from "./../../utils/file.js";
  *     { name : 'image4', src : 'images/image4.png'}
  * ]);
  */
-export function preloadImage(img, onload, onerror) {
+export function preloadImage(img, onload, onerror, settings) {
     if (typeof imgList[img.name] !== "undefined") {
         // already loaded
         return 0;
@@ -26,7 +27,7 @@ export function preloadImage(img, onload, onerror) {
     // handle SVG file loading
     if (fileUtil.getExtension(img.src) === "svg") {
         // handle SVG file
-        fetchData(img.src, "text")
+        fetchData(img.src, "text", settings)
             .then(svgText => {
                 const svgImage = new Image();
                 svgImage.onload = function() {
@@ -50,7 +51,7 @@ export function preloadImage(img, onload, onerror) {
             });
     } else {
         // handle all other image files
-        fetchData(img.src, "blob")
+        fetchData(img.src, "blob", settings)
             .then(blob => {
                 globalThis.createImageBitmap(blob)
                     .then((bitmap) => {
diff --git a/src/loader/parsers/json.js b/src/loader/parsers/json.js
@@ -4,18 +4,19 @@ import { fetchData } from "./fetchdata.js";
 /**
  * parse/preload a JSON files
  * @param {loader.Asset} data - asset data
- * @param {Function} [onload] - function to be called when the asset is loaded
+ * @param {Function} [onload] - function to be called when the resource is loaded
  * @param {Function} [onerror] - function to be called in case of error
+ * @param {Object} [settings] - Additional settings to be passed when loading the asset
  * @returns {number} the amount of corresponding resource parsed/preloaded
  * @ignore
  */
-export function preloadJSON(data, onload, onerror) {
+export function preloadJSON(data, onload, onerror, settings) {
     if (typeof jsonList[data.name] !== "undefined") {
         // already loaded
         return 0;
     }
 
-    fetchData(data.src, "json")
+    fetchData(data.src, "json", settings)
         .then(response => {
             jsonList[data.name] = response;
             if (typeof onload === "function") {
diff --git a/src/loader/parsers/script.js b/src/loader/parsers/script.js
@@ -1,20 +1,19 @@
-import { crossOrigin } from "../settings.js";
-
 /**
  * parse/preload a Javascript files
  * @param {loader.Asset} data - asset data
- * @param {Function} [onload] - function to be called when the asset is loaded
+ * @param {Function} [onload] - function to be called when the resource is loaded
  * @param {Function} [onerror] - function to be called in case of error
+ * @param {Object} [settings] - Additional settings to be passed when loading the asset
  * @returns {number} the amount of corresponding resource parsed/preloaded
  * @ignore
  */
-export function preloadJavascript(data, onload, onerror) {
+export function preloadJavascript(data, onload, onerror, settings) {
     let script = globalThis.document.createElement("script");
 
     script.src = data.src;
     script.type = "text/javascript";
     if (typeof (crossOrigin) === "string") {
-        script.crossOrigin = crossOrigin;
+        script.crossOrigin = settings.crossOrigin;
     }
     script.defer = true;
 
diff --git a/src/loader/parsers/tmx.js b/src/loader/parsers/tmx.js
@@ -9,12 +9,13 @@ import { fetchData } from "./fetchdata.js";
  * parse/preload a TMX file
  * @param {loader.Asset} data - asset data
  * @param {Function} [onload] - function to be called when the asset is loaded
+ * @param {Function} [onload] - function to be called when the resource is loaded
  * @param {Function} [onerror] - function to be called in case of error
- * @param {Function} [fetchData] - function to use instead of default window.fetch, has some error handling and things
+ * @param {Object} [settings] - Additional settings to be passed when loading the asset
  * @returns {number} the amount of corresponding resource parsed/preloaded
  * @ignore
  */
-export function preloadTMX(tmxData, onload, onerror) {
+export function preloadTMX(tmxData, onload, onerror, settings) {
     if (typeof tmxList[tmxData.name] !== "undefined") {
         // already loaded
         return 0;
@@ -42,7 +43,7 @@ export function preloadTMX(tmxData, onload, onerror) {
         return;
     }
 
-    fetchData(tmxData.src, "text")
+    fetchData(tmxData.src, "text", settings)
         .then(response => {
             if (typeof response !== "string") {
                 throw new Error("Invalid response type");
diff --git a/src/loader/parsers/video.js b/src/loader/parsers/video.js
@@ -2,18 +2,18 @@ import { videoList } from "../cache.js";
 import { fetchData } from "./fetchdata.js";
 import { hasVideoFormat } from "../../system/device.js";
 import * as fileUtil from "../../utils/file.js";
-import { crossOrigin } from "../settings.js";
 import { isDataUrl } from "./../../utils/string.js";
 
 /**
  * parse/preload a Video file
  * @param {loader.Asset} data - asset data
- * @param {Function} [onload] - function to be called when the asset is loaded
+ * @param {Function} [onload] - function to be called when the resource is loaded
  * @param {Function} [onerror] - function to be called in case of error
+ * @param {Object} [settings] - Additional settings to be passed when loading the asset
  * @returns {number} the amount of corresponding resource parsed/preloaded
  * @ignore
  */
-export function preloadVideo(data, onload, onerror) {
+export function preloadVideo(data, onload, onerror, settings) {
 
     if (typeof videoList[data.name] !== "undefined") {
         // Video already preloaded
@@ -34,7 +34,7 @@ export function preloadVideo(data, onload, onerror) {
     }
 
     if (isDataUrl(data.src)) {
-        fetchData(data.src, "blob")
+        fetchData(data.src, "blob", settings)
             .then(blob => {
                 videoElement.src = globalThis.URL.createObjectURL(blob);
             })
@@ -52,7 +52,7 @@ export function preloadVideo(data, onload, onerror) {
     videoElement.setAttribute("playsinline", "true");
     videoElement.setAttribute("disablePictureInPicture", "true");
     videoElement.setAttribute("controls", "false");
-    videoElement.setAttribute("crossorigin", crossOrigin);
+    videoElement.setAttribute("crossorigin", settings.crossOrigin);
 
     if (data.autoplay === true) {
         videoElement.setAttribute("autoplay", "true");
diff --git a/src/loader/settings.js b/src/loader/settings.js
