@needle-tools/engine 4.5.8 → 4.6.0-next.ffc175e

package/plugins/vite/local-files.js

@@ -1,116 +1,290 @@
 import https from 'https';
 import { createHash } from 'crypto';
-import { runInNewContext } from 'vm';
+import { existsSync, mkdirSync, writeFileSync } from 'fs';
+import { resolve } from 'path';
+import { start } from 'repl';
 
 /** 
- * @typedef {{pluginContext:import('rollup').TransformPluginContext, cache:Cache}} Context
+ * @typedef {{pluginContext:import('rollup').TransformPluginContext, cache:Cache, command:string, viteConfig:import("vite").ResolvedConfig | null}} Context
  */
 
+const debug = false;
+
+/**
+ * Checks if the local files plugin is enabled in user settings.
+ * @param {import('../types/userconfig.js').userSettings} userSettings - The user settings object
+ */
+export const makeFilesLocalIsEnabled = (userSettings) => {
+    if (typeof userSettings?.makeFilesLocal === "object") return userSettings?.makeFilesLocal?.enabled === true;
+    return userSettings?.makeFilesLocal === true;
+}
+
 /**
  * Download files and rewrite code
  * @param {string} command - The command that is being run
  * @param {object} config - The config object
  * @param {import('../types/userconfig.js').userSettings} userSettings
- * @returns {import('vite').Plugin}
+ * @returns {import('vite').Plugin | null}
  */
 export const needleMakeFilesLocal = (command, config, userSettings) => {
 
-    if (!userSettings?.makeFilesLocal?.enabled) {
-        return;
+    if (!makeFilesLocalIsEnabled(userSettings)) {
+        return null;
     }
 
     console.log(`[needle:local-files] Local files plugin is enabled`);
 
     const cache = new Cache();
 
-    return {
+    /** @type {import("vite").ResolvedConfig | null} */
+    let viteConfig = null;
+
+    /** @type {import("vite").Plugin} */
+    const plugin = {
         name: "needle:local-files",
-        enforce: 'pre',
+        // enforce: 'pre', // explictly DON'T define enforce:pre because of svelte postcss compat
         apply: "build",
+        configResolved(config) {
+            viteConfig = config;
+        },
         // transform bundle
-        async transform(src, id) {
+        async transform(src, _id) {
             src = await makeLocal(src, "ext/", "", {
                 pluginContext: this,
                 cache: cache,
+                command: command,
+                viteConfig: viteConfig,
             });
             return {
                 code: src,
                 map: null,
             };
+        },
+        buildEnd() {
+            const map = cache.map;
+            console.log(""); // Make a new line for better readability
+            console.log(`[needle:local-files] Made ${map.size} files local:`);
+            for (const [key, value] of map.entries()) {
+                console.log(`- ${key} → ${value}`);
+            }
         }
     }
-
+    return plugin;
 }
 
-
 /**
  * Rewrites the source code to make local files
  * @param {string} src - The source code to rewrite
  * @param {string} basePath - The base path where the files will be saved
  * @param {string} currentDir - The current directory of the file being processed
- * @param {Context} context - The Vite plugin context
+ * @param {Context} context - The Vite plugin context and command
  */
 async function makeLocal(src, basePath, currentDir, context) {
 
-    // find all google font urls fonts.googleapis.com
-    const googleFontRegex = /["'](https:\/\/fonts\.googleapis\.com\/.+?)["']/g;
-    let match;
+    const command = context.command;
+
+    if (debug) {
+        // Find all urls in the source code.
+        // Exclude URLs inside comments, like: 
+        // - // https://example.com
+        // - /* ... https://example.com ... */
+        // - @link https://example.com
+        // - * ... https://example.com
+        const urlRegexExcludingComments = /(?<!\/\/.*)(?<!\/\*.*)(?<!@link\s+)(["'])(https?:\/\/[^\s'"]+?)\1/g;
+        let match0;
+        while ((match0 = urlRegexExcludingComments.exec(src)) !== null) {
+            const url = match0[2];
+            if (debug) console.log(`\nFound URL: ${url} in ${currentDir}`);
+        }
+    }
 
-    while ((match = googleFontRegex.exec(src)) !== null) {
-        const fontUrl = match[1];
-        console.log(`\nFound google font URL: ${fontUrl}`);
+    // Google Fonts URLs
+    while (true) {
+        const match = /["'](https:\/\/fonts\.googleapis\.com\/.+?)["']/g.exec(src);
+        if (match === null) {
+            break;
+        }
+        const url = match[1];
+        if (debug) console.log(`\nFound google font URL: ${url}`);
         // Check if the font URL is already in the cache
-        const cachedPath = context.cache.getFromCache(fontUrl);
+        const cachedPath = context.cache.getFromCache(url);
         if (cachedPath) {
-            console.log(`Using cached font URL: ${cachedPath}`);
-            src = src.replace(fontUrl, cachedPath);
+            if (debug) console.log(`Using cached font URL: ${cachedPath}`);
+            src = src.replace(url, cachedPath);
             continue; // Skip downloading if already cached
         }
-        let font = await downloadText(fontUrl);
-        const familyNameMatch = /family=([^&]+)/.exec(fontUrl);
-        const familyName = getValidFilename(familyNameMatch[1], font);
+        let font = await downloadText(url);
+        const familyNameMatch = /family=([^&]+)/.exec(url);
+        const familyName = familyNameMatch ? getValidFilename(familyNameMatch[1], font) : (new URL(url).pathname.split('/').pop());
         font = await makeLocal(font, basePath, basePath, context);
         const fontFileName = `font-${familyName}.css`;
         const outputPath = basePath + fontFileName;
-        const referenceId = context.pluginContext.emitFile({
-            type: 'asset',
-            fileName: outputPath,
-            source: font,
-        });
-        const localPath = `${context.pluginContext.getFileName(referenceId)}`;
-        const newPath = getRelativeToBasePath(localPath, currentDir);
-        context.cache.addToCache(fontUrl, newPath);
-        src = src.replace(fontUrl, newPath);
+        let newPath;
+        if (command === 'build') {
+            const referenceId = context.pluginContext.emitFile({
+                type: 'asset',
+                fileName: outputPath,
+                source: font,
+            });
+            const localPath = `${context.pluginContext.getFileName(referenceId)}`;
+            newPath = getRelativeToBasePath(localPath, currentDir);
+            // ensureFileExists(localPath, font);
+        }
+        else {
+            // Create base64 URL for dev mode
+            const base64Font = Buffer.from(font).toString('base64');
+            newPath = `data:text/css;base64,${base64Font}`;
+        }
+        if (newPath) {
+            context.cache.addToCache(url, newPath);
+            src = src.replace(url, newPath);
+        }
     }
 
-
-    const gstatic = /["'(](https:\/\/fonts\.gstatic\.com\/)(.+?)["')]/g;
-    while ((match = gstatic.exec(src)) !== null) {
+    // Google Fonts gstatic URLs
+    while (true) {
+        const match = /["'(](https:\/\/fonts\.gstatic\.com\/)(.+?)["')]/g.exec(src);
+        if (match === null) {
+            break;
+        }
         const fontPath = match[2];
-        const fontUrl = match[1] + fontPath;
-        console.log(`\nFound gstatic URL: ${fontUrl}`);
+        const url = match[1] + fontPath;
+        if (debug) console.log(`\nFound gstatic URL: ${url}`);
         // Check if the font URL is already in the cache
-        const cachedPath = context.cache.getFromCache(fontUrl);
+        const cachedPath = context.cache.getFromCache(url);
         if (cachedPath) {
-            console.log(`Using cached gstatic font URL: ${cachedPath}`);
-            src = src.replace(fontUrl, cachedPath);
+            if (debug) console.log(`Using cached gstatic font URL: ${cachedPath}`);
+            src = src.replace(url, cachedPath);
             continue; // Skip downloading if already cached
         }
-        let font = await downloadBinary(fontUrl);
+        const font = await downloadBinary(url);
         const filename = getValidFilename(fontPath, font);
-        console.log(`Saving font to: ${basePath + filename}`);
-        const referenceId = context.pluginContext.emitFile({
-            type: 'asset',
-            fileName: basePath + filename,
-            source: font,
-        });
-        const localPath = `${context.pluginContext.getFileName(referenceId)}`;
-        const newPath = getRelativeToBasePath(localPath, currentDir);
-        context.cache.addToCache(fontUrl, newPath);
-        src = src.replace(fontUrl, newPath);
+        if (debug) console.log(`Saving font to: ${basePath + filename}`);
+        let newPath;
+        if (command === 'build') {
+            const referenceId = context.pluginContext.emitFile({
+                type: 'asset',
+                fileName: basePath + filename,
+                source: font,
+            });
+            const localPath = `${context.pluginContext.getFileName(referenceId)}`;
+            newPath = getRelativeToBasePath(localPath, currentDir);
+            // ensureFileExists(localPath, font);
+        } else {
+            // Create base64 URL for dev mode
+            const base64Font = Buffer.from(font).toString('base64');
+            newPath = `data:text/css;base64,${base64Font}`;
+        }
+        context.cache.addToCache(url, newPath);
+        src = src.replace(url, newPath);
+    }
+
+    // Load QRCode.js
+    while (true) {
+        // https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@gh-pages/qrcode.min.js
+        const match = /["'](https:\/\/cdn\.jsdelivr\.net\/gh\/davidshimjs\/qrcodejs@[^'"]+?\/qrcode\.min\.js)["']/g.exec(src);
+        if (match === null) {
+            break;
+        }
+        const url = match[1];
+        if (debug) console.log(`\nFound QR code URL: ${url}`);
+        // Check if the QR code URL is already in the cache
+        const cachedPath = context.cache.getFromCache(url);
+        if (cachedPath) {
+            if (debug) console.log(`Using cached QR code URL: ${cachedPath}`);
+            src = src.replace(url, cachedPath);
+            continue; // Skip downloading if already cached
+        }
+        const qrCode = await downloadBinary(url);
+        const filename = getValidFilename(url, qrCode);
+        if (debug) console.log(`Saving QR code to: ${basePath + filename}`);
+        let newPath;
+        if (command === 'build') {
+            const referenceId = context.pluginContext.emitFile({
+                type: 'asset',
+                fileName: basePath + filename,
+                source: qrCode,
+            });
+            const localPath = `${context.pluginContext.getFileName(referenceId)}`;
+            newPath = getRelativeToBasePath(localPath, currentDir);
+            // ensureFileExists(localPath, qrCode);
+        } else {
+            // create base64 URL for dev mode
+            const base64QrCode = Buffer.from(qrCode).toString('base64');
+            newPath = `data:application/javascript;base64,${base64QrCode}`;
+        }
+        context.cache.addToCache(url, newPath);
+        src = src.replace(url, newPath);
+    }
+
+    // Polyhaven.org URLs
+    let startIndex = 0;
+    while (true) {
+        const match = /["'](https:\/\/dl\.polyhaven\.org\/file\/.+?)["']/g.exec(src.slice(startIndex));
+        if (match === null) {
+            break;
+        }
+        startIndex += match.index + match[0].length; // Update startIndex to continue searching
+        const url = match[1];
+        if (url.endsWith("/")) {
+            if (debug) console.warn(`Skipping Polyhaven URL that ends with a slash: ${url}`);
+            continue; // Skip URLs that end with a slash
+        }
+        if (url.includes("\"") || url.includes("'")) {
+            if (debug) console.warn(`Skipping Polyhaven URL with quotes: ${url}`);
+            continue; // Skip URLs with quotes
+        }
+        if (debug) console.log(`\nFound Polyhaven URL: ${url}`);
+        // Check if the Polyhaven URL is already in the cache
+        const cachedPath = context.cache.getFromCache(url);
+        if (cachedPath) {
+            if (debug) console.log(`Using cached Polyhaven URL: ${cachedPath}`);
+            src = src.replace(url, cachedPath);
+            continue; // Skip downloading if already cached
+        }
+        const polyhavenFile = await downloadBinary(url);
+        const filename = getValidFilename(url, polyhavenFile);
+        if (debug) console.log(`Saving Polyhaven file to: ${basePath + filename}`);
+        let newPath;
+        if (command === 'build') {
+            const referenceId = context.pluginContext.emitFile({
+                type: 'asset',
+                fileName: basePath + filename,
+                source: polyhavenFile,
+            });
+            const localPath = `${context.pluginContext.getFileName(referenceId)}`;
+            newPath = getRelativeToBasePath(localPath, currentDir);
+            // ensureFileExists(localPath, polyhavenFile);
+        } else {
+            // Create base64 URL for dev mode
+            const base64PolyhavenFile = Buffer.from(polyhavenFile).toString('base64');
+            newPath = `data:application/octet-stream;base64,${base64PolyhavenFile}`;
+        }
+        if (newPath) {
+            context.cache.addToCache(url, newPath);
+            src = src.replace(url, newPath);
+        }
     }
 
     return src;
+
+    // /**
+    //  * Ensures that a file exists at the specified relative path with the given content.
+    //  * If the file does not exist, it will be created with the provided content.
+    //  * @param {string} relPath - The relative path to the file
+    //  * @param {string|Uint8Array} content - The content to write to the file
+    //  * @returns {void}
+    //  */
+    // function ensureFileExists(relPath, content) {
+    //     const outputPath = context.viteConfig?.build?.outDir || "dist";
+    //     const fullPath = resolve(outputPath, relPath);
+    //     if (!existsSync(fullPath)) {
+    //         if (debug) console.log(`Creating file: ${fullPath}`);
+    //         const dir = resolve(fullPath, '..');
+    //         mkdirSync(dir, { recursive: true });
+    //         writeFileSync(fullPath, content);
+    //     }
+    // }
 }
 
 
@@ -124,7 +298,7 @@ class Cache {
      */
     addToCache(key, value) {
         if (this.__cache.has(key)) {
-            console.warn(`Key ${key} already exists in cache, overwriting.`);
+            if (debug) console.warn(`Key ${key} already exists in cache, overwriting.`);
         }
         this.__cache.set(key, value);
     }
@@ -139,9 +313,18 @@ class Cache {
             return null;
         }
     }
+    get map() {
+        return this.__cache;
+    }
 }
 
 
+/**
+ * Returns a relative path based on the base path.
+ * @param {string} path - The path to check
+ * @param {string | undefined | null} basePath - The base path to compare against
+ * @return {string} - The relative path if it starts with the base path, otherwise the original path
+ */
 function getRelativeToBasePath(path, basePath) {
     if (basePath?.length && path.startsWith(basePath)) {
         return "./" + path.substring(basePath.length);
@@ -156,6 +339,15 @@ function getRelativeToBasePath(path, basePath) {
  * @param {string|Uint8Array} content - The content to hash for uniqueness (not used in this example)
  */
 function getValidFilename(path, content) {
+    if (path.startsWith("http:") || path.startsWith("https:")) {
+        const url = new URL(path);
+        const pathParts = url.pathname.split('/');
+        const filename = pathParts.pop() || 'file';
+        const nameParts = filename.split('.');
+        const nameWithoutExt = nameParts.slice(0, -1).join('.');
+        path = `${nameWithoutExt}-${createContentMd5(url.host + pathParts.join('/'))}.${nameParts.pop() || 'unknown'}`;
+    }
+
     // Remove any characters that are not valid in filenames
     let name = path.replace(/[^a-z0-9_\-\.\+]/gi, '-');
 
@@ -190,20 +382,25 @@ function createContentMd5(str) {
  * @param {string} url - The URL of the font to download
  */
 function downloadText(url) {
-    return new Promise((res => {
+    return new Promise(((res, rej) => {
         https.get(url, (response) => {
             if (response.statusCode !== 200) {
-                console.error(`Failed to download font from ${url}: ${response.statusCode}`);
-                res(null);
+                console.log();
+                console.error(`Failed to download (${response.statusCode}): ${url}`);
+                rej(new Error(`Failed to download (${response.statusCode}): ${url}`));
                 return;
             }
+
+            console.log(""); // Make a new line for better readability
+            console.log(`[needle:local-files] Make local: ${url}`);
+
             let data = '';
             response.on('data', (chunk) => {
                 data += chunk;
             });
             response.on('end', () => {
                 // Here you can save the data to a file or process it as needed
-                console.log(`Downloaded from ${url}`);
+                if (debug) console.log(`Downloaded from ${url}`);
                 res(data);
             });
         });
@@ -213,18 +410,30 @@ function downloadText(url) {
 function downloadBinary(url) {
     return new Promise((res, rej) => {
         https.get(url, (response) => {
+
+            // Handle redirects
+            if (response.statusCode && response.statusCode >= 300 && response.statusCode < 400 && response.headers.location) {
+                if (debug) console.log(`Redirecting to ${response.headers.location}`);
+                return downloadBinary(response.headers.location).then(res).catch(rej);
+            }
+
             if (response.statusCode !== 200) {
-                console.error(`Failed to download font from ${url}: ${response.statusCode}`);
-                rej(new Error(`Failed to download font from ${url}: ${response.statusCode}`));
+                console.log();
+                console.error(`Failed to download (${response.statusCode}): ${url}`);
+                rej(new Error(`Failed to download (${response.statusCode}): ${url}`));
                 return;
             }
+
+            console.log(""); // Make a new line for better readability
+            console.log(`[needle:local-files] Make local: ${url}`);
+
             const chunks = [];
             response.on('data', (chunk) => {
                 chunks.push(chunk);
             });
             response.on('end', () => {
                 // Here you can save the data to a file or process it as needed
-                console.log(`Downloaded  from ${url}`);
+                if (debug) console.log(`Downloaded from ${url}`);
                 res(Buffer.concat(chunks));
             });
         });

package/src/engine/engine_utils.ts

@@ -905,7 +905,7 @@ export async function generateQRCode(args: { domElement?: HTMLElement, text: str
 
     // Ensure that the QRCode library is loaded
     if (!globalThis["QRCode"]) {
-        const url = "https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js";
+        const url = "https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@gh-pages/qrcode.min.js";
         let script = document.head.querySelector(`script[src="${url}"]`) as HTMLScriptElement;
         if (!script) {
             script = document.createElement("script");

package/src/engine-components/AudioSource.ts

@@ -96,10 +96,10 @@ export class AudioSource extends Behaviour {
     /**
      * When true, the audio clip will be loaded during initialization rather than when play() is called.
      * This can reduce playback delay but increases initial loading time.
-     * @default false
+     * @default true
      */
     @serializable()
-    preload: boolean = false;
+    preload: boolean = true;
 
     /**
      * When true, audio will continue playing when the browser tab loses focus.
@@ -347,7 +347,8 @@ export class AudioSource extends Behaviour {
 
     /** @internal */
     awake() {
-        if (debug) console.log(this);
+        if (debug) console.log("[AudioSource]", this);
+
         this.audioLoader = new AudioLoader();
         if (this.playOnAwake) this.shouldPlay = true;
 
@@ -431,7 +432,6 @@ export class AudioSource extends Behaviour {
         if (this.context.application.muted) sound.setVolume(0);
         else sound.setVolume(this.volume);
         sound.autoplay = this.shouldPlay && AudioSource.userInteractionRegistered;
-
         this.applySpatialDistanceSettings();
 
         if (sound.isPlaying)
@@ -509,7 +509,7 @@ export class AudioSource extends Behaviour {
                     console.log("load audio", clip);
                 const buffer = await this.audioLoader.loadAsync(clip).catch(console.error);
                 if(this.destroyed) return;
-                this._lastClipStartedLoading = null;
+                if(this._lastClipStartedLoading === clip) this._lastClipStartedLoading = null;
                 if (buffer) this.createAudio(buffer);
             }
             else console.warn("Unsupported audio clip type", clip)

package/src/engine-components/Skybox.ts

@@ -124,11 +124,17 @@ function registerLoadedTexture(src: string, texture: Promise<Texture>) {
  *    evt.detail.apply(url);
  * });
  * ```
+ * 
+ * @example update skybox url
+ * ```ts
+ * skybox.setSkybox("https://example.com/skybox.hdr");
+ * ```
  */
 export class RemoteSkybox extends Behaviour {
 
     /**
-     * URL to a remote skybox. This value can also use a magic skybox name. Options are "quicklook", "quicklook-ar", "studio", "blurred-skybox".
+     * URL to a remote skybox. This value can also use a magic skybox name. Options are "quicklook", "quicklook-ar", "studio", "blurred-skybox".  
+     * To update the skybox/environment map use `setSkybox(url)`
      * @example
      * ```ts
      * skybox.url = "https://example.com/skybox.hdr";
@@ -197,6 +203,9 @@ export class RemoteSkybox extends Behaviour {
             if (this.isRemoteTexture(this.url)) {
                 this.setSkybox(this.url);
             }
+            else if (debug) {
+                console.warn(`RemoteSkybox: Not setting skybox: ${this.url} is not a remote texture. If you want to set a local texture, set allowNetworking to false.`);
+            }
         }
     }
 
@@ -222,7 +231,7 @@ export class RemoteSkybox extends Behaviour {
         if (debug) console.log("Set remote skybox url: " + url);
 
         if (this._prevUrl === url && this._prevLoadedEnvironment) {
-            this.applySkybox();
+            this.apply();
             return true;
         }
         else {
@@ -231,19 +240,30 @@ export class RemoteSkybox extends Behaviour {
         }
         this._prevUrl = url;
 
-        const envMap = await this.loadTexture(url, name);
-        if (!envMap) return false;
+        const texture = await this.loadTexture(url, name);
+        if (!texture) {
+            if (debug) console.warn("RemoteSkybox: Failed to load texture from url", url);
+            return false;
+        }
         // Check if we're still enabled
-        if (!this.enabled) return false;
+        if (!this.enabled) {
+            if (debug) console.warn("RemoteSkybox: Component is not enabled, aborting setSkybox");
+            return false;
+        }
+        // Check if the url has changed while loading
+        if (this._prevUrl !== url) {
+            if (debug) console.warn("RemoteSkybox: URL changed while loading texture, aborting setSkybox");
+            return false; // URL changed while loading
+        }
         // Update the current url
         this.url = url;
         const nameIndex = url.lastIndexOf("/");
-        envMap.name = url.substring(nameIndex >= 0 ? nameIndex + 1 : 0);
+        texture.name = url.substring(nameIndex >= 0 ? nameIndex + 1 : 0);
         if (this._loader instanceof TextureLoader) {
-            envMap.colorSpace = SRGBColorSpace;
+            texture.colorSpace = SRGBColorSpace;
         }
-        this._prevLoadedEnvironment = envMap;
-        this.applySkybox();
+        this._prevLoadedEnvironment = texture;
+        this.apply();
         return true;
     }
 
@@ -284,7 +304,7 @@ export class RemoteSkybox extends Behaviour {
         return envMap;
     }
 
-    private applySkybox() {
+    private apply() {
         const envMap = this._prevLoadedEnvironment;
         if (!envMap) return;