@needle-tools/engine 4.11.0-beta → 4.11.0-beta.1

package/plugins/common/needle-engine.js

@@ -0,0 +1,41 @@
+
+
+// https://regex101.com/r/SVhzzD/1
+// @ts-ignore
+const needleEngineRegex = /<needle-engine.*?src=["'](?<src>[\w\d]+?)["']>/gm;
+
+
+/**
+ * @param {string} html
+ * @returns {string[]} urls
+ */
+export function tryParseNeedleEngineSrcAttributeFromHtml(html) {
+    const needleEngineMatches = html.matchAll(needleEngineRegex);
+    
+    /**
+     * @type {string[]}
+     */
+    const results = [];
+
+    if (needleEngineMatches) {
+        while (true) {
+            const match = needleEngineMatches.next();
+            if (match.done) break;
+            /** @type {undefined | null | string} */
+            const value = match.value?.groups?.src;
+            if (value) {
+                if (value.startsWith("[")) {
+                    // we have an array assigned
+                    const arr = JSON.parse(value);
+                    for (const item of arr) {
+                        results.push(item);
+                    }
+                }
+                else {
+                    results.push(value);
+                }
+            }
+        }
+    }
+    return results;
+}

package/plugins/common/worker.js

@@ -0,0 +1,129 @@
+
+
+
+
+/** 
+ * @type {() => import("vite").Plugin}
+ */
+export function viteFixWorkerImport() {
+    return {
+        name: 'vite-rewriteWorkerImport',
+        config: function (config, env) {
+            if (!config.build) {
+                config.build = {};
+            }
+            if (!config.build.rollupOptions) {
+                config.build.rollupOptions = {};
+            }
+            if (!config.build.rollupOptions.plugins) {
+                config.build.rollupOptions.plugins = [];
+            }
+            if (!Array.isArray(config.build.rollupOptions.plugins)) {
+                const value = config.build.rollupOptions.plugins;
+                config.build.rollupOptions.plugins = [];
+                config.build.rollupOptions.plugins.push(value);
+            }
+            config.build.rollupOptions.plugins.push(rollupFixWorkerImport({ logFail: false }));
+        }
+    }
+}
+
+
+
+// https://regex101.com/r/hr01H4/1
+const regex = /new\s+Worker\s*\(\s*new\s+URL\s*\(\s*(?:\/\*.*?\*\/\s*)?\"(?<url>[^"]+)\"\s*,\s*(?<base>import\.meta\.url|self\.location)[^)]*\)/gm;
+
+
+
+/** 
+ * @type {(opts?: {logFail:boolean}) => import("vite").Plugin} 
+*/
+export function rollupFixWorkerImport(opts = { logFail: true }) {
+    return {
+        name: 'rewriteWorkerImport',
+        renderChunk: {
+            order: 'post',
+            async handler(code, chunk, outputOptions) {
+                let regexMatchedWorkerCode = false;
+                const newWorkerStartIndex = code.indexOf("new Worker");
+                if (newWorkerStartIndex >= 0) {
+                    const res = code.replace(regex, (match, url, _base) => {
+                        regexMatchedWorkerCode = true;
+                        // console.log("WORKER?", url)
+                        if (url?.startsWith("/")) {
+                            console.log(`[rollup] Rewrite worker import in ${chunk.fileName}`);
+                            // Make url file-relative
+                            const newUrl = url.replace(/^\//, "");
+                            // For CORS issues we need to use importScripts: https://linear.app/needle/issue/NE-6572#comment-ea5dc65e
+                            const output = `/* new-worker */ new Worker(URL.createObjectURL(new Blob(["import '" + \`\${new URL('./${newUrl}', import.meta.url).toString()}\` + "';"], { type: 'text/javascript' }))`;
+                            console.log("[rollup] Did rewrite worker output to:", output);
+                            return output;
+                            // return `new Worker(new URL("./${newUrl}", import.meta.url)`;
+                        }
+                        return match;
+                    });
+                    if (!regexMatchedWorkerCode) {
+
+                        const fixedCode = fixWorkerSelfLocation(chunk.fileName, code);
+                        if (fixedCode !== code) {
+                            return fixedCode;
+                        }
+                        if (opts?.logFail !== false) {
+                            const str = `[...]${code.substring(newWorkerStartIndex, newWorkerStartIndex + 200)}[...]`
+                            console.warn(`\n[rollup] Worker import in ${chunk.fileName} was not rewritten: ${str}`);
+                        }
+                    }
+                    return res;
+                }
+            },
+        }
+    };
+}
+
+
+/**
+ * Fix worker self.location to import.meta.url
+ * @param {string} filename
+ * @param {string} code
+ */
+function fixWorkerSelfLocation(filename, code) {
+    let lastIndex = 0;
+    while (true) {
+        const startIndex = code.indexOf("new Worker", lastIndex);
+        if (startIndex < 0) break;
+        let index = startIndex + 1;
+        let endIndex = -1;
+        let openingBraceCount = 0;
+        let foundAnyOpening = false;
+        while (true) {
+            const char = code[index];
+            if (char === "(") {
+                openingBraceCount++;
+                foundAnyOpening = true;
+            }
+            if (char === ")") openingBraceCount--;
+            if (openingBraceCount === 0 && foundAnyOpening) {
+                endIndex = index;
+                break;
+            }
+            // console.log(openingBraceCount, char, index, code.length);
+            index++;
+            if (index >= code.length) break;
+        }
+        if (endIndex > startIndex) {
+            const workerCode = code.substring(startIndex, endIndex + 1);
+            if (workerCode.indexOf("self.location") >= 0) {
+                const fixedCode = workerCode.replace("self.location", "import.meta.url");
+                code = code.substring(0, startIndex) + fixedCode + code.substring(endIndex + 1);
+                lastIndex = startIndex + fixedCode.length;
+                console.log(`[rollup] Rewrite worker 'self.location' to 'import.meta.url' in ${filename}`);
+            } else {
+                lastIndex = endIndex;
+            }
+        }
+        else {
+            lastIndex = startIndex + "new Worker".length;
+        }
+    }
+    return code;
+}

package/plugins/vite/asap.js

@@ -1,5 +1,6 @@
 import { existsSync, readdirSync, readFileSync, writeFileSync } from 'fs';
 import path from 'path';
+import { tryParseNeedleEngineSrcAttributeFromHtml } from '../common/needle-engine.js';
 import { preloadScriptPaths } from './dependencies.js';
 import { makeFilesLocalIsEnabled } from './local-files.js';
 
@@ -159,10 +160,6 @@ function generateScriptPreloadLinks(_config, tags) {
 // @ts-ignore
 const codegenRegex = /\"(?<gltf>.+(.glb|.gltf)(\?.*)?)\"/gm;
 
-// https://regex101.com/r/SVhzzD/1
-// @ts-ignore
-const needleEngineRegex = /<needle-engine.*?src=["'](?<src>[\w\d]+?)["']>/gm;
-
 /**
  * @param {import('../types').needleConfig} config
  * @param {string} html
@@ -171,25 +168,10 @@ const needleEngineRegex = /<needle-engine.*?src=["'](?<src>[\w\d]+?)["']>/gm;
 function generateGltfPreloadLinks(config, html, tags) {
 
     // TODO: try to get the <needle-engine src> element src attribute and preload that
-    const needleEngineMatches = html.matchAll(needleEngineRegex);
-    if (needleEngineMatches) {
-        while (true) {
-            const match = needleEngineMatches.next();
-            if (match.done) break;
-            /** @type {undefined | null | string} */
-            const value = match.value?.groups?.src;
-            if (value) {
-                if (value.startsWith("[")) {
-                    // we have an array assigned
-                    const arr = JSON.parse(value);
-                    for (const item of arr) {
-                        insertPreloadLink(tags, item, "model/gltf+json");
-                    }
-                }
-                else {
-                    insertPreloadLink(tags, value, "model/gltf+json");
-                }
-            }
+    const needleEngineMatches = tryParseNeedleEngineSrcAttributeFromHtml(html);
+    if (needleEngineMatches?.length) {
+        for (const item of needleEngineMatches) {
+            insertPreloadLink(tags, item, "model/gltf+json");
         }
     }
 

package/plugins/vite/dependencies.js

@@ -8,23 +8,26 @@ export const preloadScriptPaths = [];
 
 /**
  * @param {import('../types').userSettings} userSettings
+ * @returns {import('vite').Plugin[]}
  */
 export const needleDependencies = (command, config, userSettings) => {
 
     /**
      * @type {import('vite').Plugin}
      */
-    return {
-        name: 'needle:dependencies',
-        enforce: 'pre',
-        /**
-         * @param {import('vite').UserConfig} config
-         */
-        config: (config, env) => {
-            handleOptimizeDeps(config);
-            handleManualChunks(config);
-        }
-    }
+    return [
+        {
+            name: 'needle:dependencies',
+            enforce: 'pre',
+            /**
+             * @param {import('vite').UserConfig} config
+             */
+            config: (config, env) => {
+                handleOptimizeDeps(config);
+                handleManualChunks(config);
+            },
+        },
+    ]
 }
 
 const excludeDependencies = [
@@ -167,6 +170,13 @@ function handleManualChunks(config) {
                 return name;
             }
         }
+        // else if(chunk.name === 'index') {
+        //     console.log(chunk);
+        //     debugger
+        //     // this is the main chunk
+        //     // we don't want to add a hash here to be able to easily import the main script
+        //     return `index.js`;
+        // }
         return `assets/[name].[hash].js`;
     }
 

package/plugins/vite/index.js

@@ -63,11 +63,16 @@ export { needleImportsLogger } from "./imports-logger.js";
 import { needleBuildInfo } from "./buildinfo.js";
 export { needleBuildInfo } from "./buildinfo.js";
 
+import { needleApp } from "./needle-app.js";
+export { needleApp } from "./needle-app.js";
+
 import { needleServer } from "./server.js";
 import { needleNPM } from "./npm.js";
 import { needleTransformCode } from "./transform.js";
 import { needleMaterialXLoader } from "./materialx.js";
 import { needleLogger } from "./logger.js";
+import { viteFixWorkerImport } from "../common/worker.js";
+
 export { needleServer } from "./server.js";
 
 
@@ -137,6 +142,8 @@ export const needlePlugins = async (command, config = undefined, userSettings =
         needleServer(command, config, userSettings),
         needleNPM(command, config, userSettings),
         needleMaterialXLoader(command, config, userSettings),
+        needleApp(command, config, userSettings),
+        viteFixWorkerImport()
     ];
 
     const asap = await needleAsap(command, config, userSettings);

package/plugins/vite/needle-app.js

@@ -0,0 +1,194 @@
+import { writeFile } from 'fs';
+import { tryParseNeedleEngineSrcAttributeFromHtml } from '../common/needle-engine.js';
+
+
+
+/**
+ * @param {'serve' | 'build'} command
+ * @param {{} | undefined | null} config
+ * @param {import('../types').userSettings} userSettings
+ * @returns {import('vite').Plugin[] | null}
+ */
+export const needleApp = (command, config, userSettings) => {
+
+    if (command !== "build") {
+        return null;
+    }
+
+    /** @type {Array<import("rollup").OutputChunk>} */
+    const entryFiles = new Array();
+
+    let outputDir = "dist";
+
+    /**
+     * @type {import('vite').Plugin}
+     */
+    return [
+        {
+            name: 'needle:app',
+            enforce: "post",
+            configResolved(config) {
+                outputDir = config.build.outDir || "dist";
+            },
+            transformIndexHtml: {
+                handler: async function (html, context) {
+                    const name = context.filename;
+                    if (name.includes("index.html")) {
+                        if (context.chunk?.isEntry) {
+                            try {
+                                entryFiles.push(context.chunk);
+                                const path = context.chunk.fileName;
+                                // console.log("[needle-dependencies] entry chunk imports", {
+                                //     name: context.chunk.fileName,
+                                //     imports: context.chunk.imports,
+                                //     dynamicImports: context.chunk.dynamicImports,
+                                //     refs: context.chunk.referencedFiles,
+                                // });
+
+                                // TODO: here we try to find the main asset (entrypoint) for this web app. It's a bit hacky right now but we have to assign this url directly to make it work with `gen.js` where multiple needle-apps are on different (or the same) pages.
+                                const attribute_src = tryParseNeedleEngineSrcAttributeFromHtml(html);
+                                const imported_glbs = Array.from(context.chunk.viteMetadata?.importedAssets?.values() || [])?.filter(f => f.endsWith(".glb") || f.endsWith(".gltf"));
+
+                                const main_asset = attribute_src?.[0] || imported_glbs?.[0];
+
+                                const webComponent = generateNeedleEmbedWebComponent(path, main_asset);
+                                await writeFile(`${outputDir}/needle-app.js`, webComponent, (err) => {
+                                    if (err) {
+                                        console.error("[needle-app] could not create needle-app.js", err);
+                                    }
+                                    else {
+                                        console.log("[needle-app] created needle-app.js");
+                                    }
+                                });
+                            }
+                            catch (e) {
+                                console.warn("WARN: could not create needle-app.js\n", e);
+                            }
+                        }
+                    }
+                }
+            },
+
+        }
+    ]
+}
+
+
+/**
+ * @param {string} filepath
+ * @param {string | null} src
+ * @returns {string}
+ */
+function generateNeedleEmbedWebComponent(filepath, src) {
+
+
+    // filepath is e.g. `assets/index-XXXXXXXX.js`
+    // we want to make sure the path is correct relative to where the component will be used
+    // this script will be emitted in the output directory root (e.g. needle-embed.js)
+
+    const componentDefaultName = 'needle-app';
+
+    return `
+
+// Needle Engine attributes we want to allow to be overriden
+const knownAttributes = [
+    "src",
+    "background-color", 
+    "background-image", 
+    "environment-image", 
+    "focus-rect",
+];
+
+const scriptUrl = new URL(import.meta.url);
+const componentName = scriptUrl.searchParams.get("component-name") || '${componentDefaultName}';
+
+
+if (!customElements.get(componentName)) {
+    console.debug(\`Defining needle-app as <\${componentName}>\`);
+    customElements.define(componentName, class extends HTMLElement {
+
+        static get observedAttributes() {
+            return knownAttributes;
+        }
+
+        constructor() {
+            super();
+            this.attachShadow({ mode: 'open' });
+            const template = document.createElement('template');
+            template.innerHTML = \`
+                <style>
+                    :host {
+                        position: relative;
+                        display: block;
+                        width: max(360px 100%);
+                        height: max(240px, 100%);
+                        margin: 0;
+                        padding: 0;
+                    }
+                    needle-engine {
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 100%;
+                        height: 100%;
+                    }
+                </style>
+            \`;
+            this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+            const script = document.createElement('script');
+            script.type = 'module';
+            const url = new URL('.', import.meta.url);
+            this.basePath = this.getAttribute('base-path') || \`\${url.protocol}//\${url.host}\${url.pathname}\`;
+            while(this.basePath.endsWith('/')) {
+                this.basePath = this.basePath.slice(0, -1);
+            }
+            script.src = this.getAttribute('script-src') || \`\${this.basePath}/${filepath}\`;
+            this.shadowRoot.appendChild(script);
+
+            this.needleEngine = document.createElement('needle-engine');
+            this.updateAttributes();
+            this.shadowRoot.appendChild(this.needleEngine);
+
+            console.debug(this.basePath, script.src, this.needleEngine.getAttribute("src"));
+        }
+
+        onConnectedCallback() {
+            console.debug('NeedleEmbed connected to the DOM');
+        }
+
+        disconnectedCallback() {
+            console.debug('NeedleEmbed disconnected from the DOM');
+        }
+        
+        attributeChangedCallback(name, oldValue, newValue) {
+            console.debug(\`NeedleApp attribute changed: \${name} from \${oldValue} to \${newValue}\`);
+            this.updateAttributes();
+        }
+
+        updateAttributes() {
+            console.debug("NeedleApp updating attributes");
+            
+            const src = this.getAttribute('src') || ${src?.length ? `\`\${this.basePath}/${src}\`` : null};
+            if(src) this.needleEngine.setAttribute("src", src);
+            else this.needleEngine.removeAttribute("src");
+
+            for(const attr of knownAttributes) {
+                
+                if(attr === "src") continue; // already handled above
+
+                if(this.hasAttribute(attr)) {
+                    this.needleEngine.setAttribute(attr, this.getAttribute(attr));
+                }
+                else {
+                    this.needleEngine.removeAttribute(attr);    
+                }
+            }
+        }
+    });
+}
+else {
+    console.warn(\`needle-app <\${componentName}> already defined.\`);
+}
+`
+}

package/src/engine/engine_physics.ts

@@ -572,6 +572,9 @@ declare module 'three' {
 
 
 namespace NEMeshBVH {
+
+    let failedToCreateMeshBVHWorker = 0;
+
     export function runMeshBVHRaycast(method: Raycaster | Sphere, mesh: Mesh, results: Intersection[], context: Pick<Context, "xr">, options: { allowSlowRaycastFallback?: boolean }): boolean {
         if (!mesh.geometry) {
             return false;
@@ -630,6 +633,10 @@ namespace NEMeshBVH {
                 || geom.index && geom.index?.["isInterleavedBufferAttribute"]) {
                 canUseWorker = false;
             }
+            else if (failedToCreateMeshBVHWorker > 10) {
+                // if we failed to create a worker multiple times, don't try again
+                canUseWorker = false;
+            }
 
             // if we have a worker use that
             if (canUseWorker && _GenerateMeshBVHWorker) {
@@ -646,8 +653,23 @@ namespace NEMeshBVH {
                     }
                     // if there are no workers available, create a new one
                     if (!workerInstance && workerInstances.length < 3) {
-                        workerInstance = new _GenerateMeshBVHWorker();
-                        workerInstances.push(workerInstance);
+                        try {
+                            workerInstance = new _GenerateMeshBVHWorker();
+                            workerInstances.push(workerInstance);
+                        }
+                        catch (err) {
+                            const isSecurityError = err instanceof DOMException && err.name === "SecurityError";
+                            if (isSecurityError) {
+                                console.warn("Failed to create MeshBVH worker, falling back to main thread generation. This can happen when running from file://, if the browser does not support workers or if the browser is blocking workers for other reasons.");
+                                console.debug(err);
+                                failedToCreateMeshBVHWorker += 10;
+                            }
+                            else {
+                                console.error("Failed to create MeshBVH worker");
+                                console.debug(err);
+                            }
+                            failedToCreateMeshBVHWorker++;
+                        }
                     }
 
                     if (workerInstance != null && !workerInstance.running) {
@@ -806,6 +828,9 @@ namespace NEMeshBVH {
                 if (debugPhysics || isDevEnvironment()) {
                     console.warn("Failed to setup mesh bvh worker");
                 }
+                else {
+                    console.debug("Failed to setup mesh bvh worker", _err);
+                }
             })
             .finally(() => {
                 isRequestingWorker = false;

package/src/engine/physics/workers/mesh-bvh/GenerateMeshBVHWorker.js

@@ -4,14 +4,16 @@ import { MeshBVH } from 'three-mesh-bvh';
 // Modified according to https://github.com/gkjohnson/three-mesh-bvh/issues/636#issuecomment-2209571751
 import { WorkerBase } from "three-mesh-bvh/src/workers/utils/WorkerBase.js";
 
+
 export class GenerateMeshBVHWorker extends WorkerBase {
 
 	constructor() {
 		// TODO: make mesh bvh worker "work" for prebundled CDN loading
 		// https://linear.app/needle/issue/NE-6572
 		// Also we don't use toplevel imports to not completely fail to load needle-engine where loading the worker fails
-		// const url = new URL('three-mesh-bvh/src/workers/generateMeshBVH.worker.js', import.meta.url)
+		// const meta_url = import.meta.url;
 		// const getWorker = () => new Worker(url, { type: 'module' })
+		// console.log(meta_url, url, getWorker());
 		super(new Worker(new URL('three-mesh-bvh/src/workers/generateMeshBVH.worker.js', import.meta.url), { type: 'module' }));
 		this.name = 'GenerateMeshBVHWorker';
 

package/src/engine-components/web/ScrollFollow.ts

@@ -473,7 +473,7 @@ function tryGetElementsForSelector(index: number): Element | null {
 
     if (!needsScrollMarkerRefresh) {
         const element = needleScrollMarkerCache[index] || null;
-        if (element) return element;
+        return element;
     }
     needsScrollMarkerRefresh = false;
     needleScrollMarkerCache.length = 0;