Needle Engine 3.32.23-alpha

Files changed (12) hide show

plugins/vite/index.js +30 -3
src/engine/engine_addressables.ts +72 -3
src/engine/engine_context.ts +0 -2
src/engine/engine_gameobject.ts +2 -2
src/engine/engine_input.ts +73 -17
plugins/types/index.d.ts +2 -1
src/engine-components/ui/PointerEvents.ts +4 -4
src/engine-components/ui/SpatialHtml.ts +15 -2
plugins/types/userconfig.d.ts +5 -0
src/engine-components/VideoPlayer.ts +1 -1
plugins/vite/pwa.js +418 -0
plugins/types/webmanifest.d.ts +26 -0

plugins/vite/index.js CHANGED Viewed

@@ -1,6 +1,9 @@
 import { needleDefines } from "./defines.js";
 export { needleDefines } from "./defines.js";
+import { needleBuildPipeline } from "./build-pipeline.js";
+export { needleBuildPipeline } from "./build-pipeline.js";
 import { needleBuild } from "./build.js";
 export { needleBuild } from "./build.js";
@@ -10,6 +13,9 @@
 import { needlePoster } from "./poster.js"
 export { needlePoster } from "./poster.js"
+import { needlePWA } from "./pwa.js";
+export { needlePWA } from "./pwa.js";
 import { needleReload } from "./reload.js"
 export { needleReload } from "./reload.js"
@@ -43,7 +49,6 @@
 import { vite_4_4_hack } from "./vite-4.4-hack.js";
 import { needleImportsLogger } from "./imports-logger.js";
 import { needleBuildInfo } from "./buildinfo.js";
-import { needleBuildPipeline } from "./build-pipeline.js";
 export * from "./gzip.js";
@@ -54,12 +59,33 @@
     allowHotReload: true,
 }
-/**
+/** # Needle Engine plugins for Vite
+ * Plugins include hot reload support, meta tags, defines, build pipeline, PWA, and more.
+ * ## Using PWA
+ * How to add PWA support to your vite project:
+ * 1) Install the [vite pwa plugin](https://vite-pwa-org.netlify.app/): `npm install vite-plugin-pwa --save-dev`
+ * 2) Add the following to your vite.config.js:
+ *   You first pass the PWAOptions to the needlePlugins function, then you pass the same PWAOptions to the VitePWA plugin.
+ * You *can* use also add a `.webmanifest` file to your web project and edit the [PWA manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest) settings there.
+* ```js
+ * export default defineConfig(async ({ command }) => {
+    // \@type(import("vite-plugin-pwa").VitePWAOptions) (remove the backslash)
+    const PWAOptions = {};
+    ...
+    return {
+        plugins: [
+            ...
+            needlePlugins(command, needleConfig, { pwaOptions: PWAOptions }),
+            VitePWA(PWAOptions),
+        ],
+    }
+ * ```
+ * @param {string} command
  * @param {import('../types').userSettings} userSettings
  */
 export const needlePlugins = async (command, config, userSettings) => {
-    if(!config) config = {}
+    if (!config) config = {}
     // ensure we have user settings initialized with defaults
     userSettings = { ...defaultUserSettings, ...userSettings }
@@ -81,6 +107,7 @@
         needleFacebookInstantGames(command, config, userSettings),
         needleImportsLogger(command, config, userSettings),
         needleBuildPipeline(command, config, userSettings),
+        needlePWA(command, config, userSettings),
     ];
     array.push(await editorConnection(command, config, userSettings, array));
     return array;

src/engine/engine_addressables.ts CHANGED Viewed

@@ -5,7 +5,7 @@
 import { getLoader } from "./engine_gltf.js";
 import { processNewScripts } from "./engine_mainloop_utils.js";
 import { registerPrefabProvider, syncInstantiate } from "./engine_networking_instantiate.js";
-import { assign,SerializationContext, TypeSerializer } from "./engine_serialization_core.js";
+import { assign, SerializationContext, TypeSerializer } from "./engine_serialization_core.js";
 import { Context } from "./engine_setup.js";
 import type { IComponent, IGameObject, SourceIdentifier } from "./engine_types.js";
 import { download } from "./engine_web_api.js";
@@ -413,9 +413,15 @@
 const failedTexturePromise = Promise.resolve(null);
+/** Use this if a file is a external image URL
+ * @example
+ * ```ts
+ * @serializable(ImageReference)
+ * myImage?:ImageReference;
+ * ```
+ */
 export class ImageReference {
     private static imageReferences = new Map<string, ImageReference>();
@@ -507,4 +513,67 @@
         return undefined;
     }
 }
-new ImageReferenceSerializer();
+new ImageReferenceSerializer();
+/** Use this if a file is a external file URL. The file can be any arbitrary binary data like a videofile or a text asset
+ */
+export class FileReference {
+    private static cache = new Map<string, FileReference>();
+    static getOrCreate(url: string) {
+        let ref = FileReference.cache.get(url);
+        if (!ref) {
+            ref = new FileReference(url);
+            FileReference.cache.set(url, ref);
+        }
+        return ref;
+    }
+    /** Load the file binary data
+     * @returns a promise that resolves to the binary data of the file. Make sure to await this request or use `.then(res => {...})` to get the result.
+     */
+    async loadRaw(): Promise<Blob> {
+        if (!this.res) this.res = fetch(this.url);
+        return this.res.then(res => res.blob());
+    }
+    /** Load the file as text (if the referenced file is a text file like a .txt or .json file)
+     * @returns a promise that resolves to the text data of the file. Make sure to await this request or use `.then(res => {...})` to get the result. If the format is json you can use `JSON.parse(result)` to convert it to a json object
+     */
+    async loadText(): Promise<string> {
+        if (!this.res) this.res = fetch(this.url);
+        return this.res.then(res => res.text());
+    }
+    /** The resolved url to the file */
+    readonly url: string;
+    private res?: Promise<Response>;
+    constructor(url: string) {
+        this.url = url;
+    }
+}
+export class FileReferenceSerializer extends TypeSerializer {
+    constructor() {
+        super([FileReference]);
+    }
+    onSerialize(_data: string, _context: SerializationContext) {
+        return null;
+    }
+    onDeserialize(data: string, _context: SerializationContext) {
+        if (typeof data === "string") {
+            const url = resolveUrl(_context.gltfId, data)
+            return FileReference.getOrCreate(url);
+        }
+        return undefined;
+    }
+}
+new FileReferenceSerializer();

src/engine/engine_context.ts CHANGED Viewed

@@ -431,8 +431,6 @@
 		this.renderer.shadowMap.type = PCFSoftShadowMap;
 		this.renderer.setSize(this.domWidth, this.domHeight);
 		this.renderer.outputColorSpace = SRGBColorSpace;
-		// https://github.com/mrdoob/three.js/pull/25556
-		this.renderer.useLegacyLights = false;
 		this.input.bindEvents();
 	}

src/engine/engine_gameobject.ts CHANGED Viewed

@@ -198,8 +198,8 @@
     destroyed_objects.push(obj);
     // first disable and call onDestroy on components
-    const components = obj.userData.components;
-    if (components) {
+    const components = obj.userData?.components;
+    if (components != null && Array.isArray(components)) {
         let lastLength = components.length;
         for (let i = 0; i < components.length; i++) {
             const comp: Component = components[i];

src/engine/engine_input.ts CHANGED Viewed

@@ -69,6 +69,7 @@
     /** the browser event that triggered this event (if any) */
     readonly source: Event | null;
+    /** Is the pointer event created via a touch on screen or a spatial device like a XR controller or hand tracking? */
     readonly mode: XRTargetRayMode;
     /** A ray in worldspace for the event.
      * If the ray is undefined you can also use `space.worldForward` and `space.worldPosition` */
@@ -83,12 +84,20 @@
     /** true if this event is a double click */
     isDoubleClick: boolean = false;
+    /** @returns `true` if the event is marked to be used (when `use()` has been called). Default: `false` */
+    get used() { return this._used; }
+    private _used: boolean = false;
+    /** Call to mark an event to be used */
+    use() {
+        this._used = true;
+    }
     /** Unique identifier for this input: a combination of the deviceIndex + button to uniquely identify the exact input (e.g. LeftController:Button0 = 0, RightController:Button1 = 101) */
     override get pointerId(): number { return this._pointerid; }
     private readonly _pointerid;
     // this is set via the init arguments (we override it here for intellisense to show the string options)
+    /** What type of input created this event: touch, mouse, xr controller, xr hand tracking... */
     override get pointerType(): PointerTypeNames { return this._pointerType; }
     private readonly _pointerType: PointerTypeNames;
@@ -162,37 +171,84 @@
 declare type KeyboardEventListener = (evt: NEKeyboardEvent) => void;
 declare type InputEventListener = PointerEventListener | KeyboardEventListener;
+export enum InputEventQueue {
+    Early = -100,
+    Default = 0,
+    Late = 100,
+}
 export class Input implements IInput {
-    private readonly _eventListeners: { [key: string]: InputEventListener[] } = {};
+    /** This is a list of event listeners per event type (e.g. pointerdown, pointerup, keydown...). Each entry contains a priority and list of listeners.
+     * That way users can control if they want to receive events before or after other listeners (e.g subscribe to pointer events before the EventSystem receives them) - this allows certain listeners to be always invoked first (or last) and stop propagation
+     * Listeners per event are sorted
+     */
+    private readonly _eventListeners: { [key: string]: Array<{ priority: number, listeners: InputEventListener[] }> } = {};
-    addEventListener(type: InputEvents | InputEventNames, callback: PointerEventListener): void {
+    /** Adds an event listener for the specified event type. The callback will be called when the event is triggered.
+     * @param type The event type to listen for
+     * @param callback The callback to call when the event is triggered
+     * @param queue The queue to add the listener to. Listeners in the same queue are called in the order they were added. Default is 0.
+     */
+    addEventListener(type: InputEvents | InputEventNames, callback: PointerEventListener, queue: InputEventQueue = 0): void {
         if (!this._eventListeners[type]) this._eventListeners[type] = [];
-        this._eventListeners[type].push(callback);
+        const listeners = this._eventListeners[type];
+        const queueListeners = listeners.find(l => l.priority === queue);
+        if (!queueListeners) {
+            listeners.push({ priority: queue, listeners: [callback] });
+            // ensure we sort the listeners by priority
+            listeners.sort((a, b) => a.priority - b.priority);
+        } else {
+            queueListeners.listeners.push(callback);
+        }
     }
-    removeEventListener(type: InputEvents | InputEventNames, callback: PointerEventListener): void {
+    /** Removes the event listener from the specified event type. If no queue is specified the listener will be removed from all queues.
+     * @param type The event type to remove the listener from
+     * @param callback The callback to remove
+     * @param queue The queue to remove the listener from. If no queue is specified the listener will be removed from all queues
+     */
+    removeEventListener(type: InputEvents | InputEventNames, callback: PointerEventListener, queue?: InputEventQueue): void {
         if (!this._eventListeners[type]) return;
-        const index = this._eventListeners[type].indexOf(callback);
-        if (index >= 0) this._eventListeners[type].splice(index, 1);
+        const listeners = this._eventListeners[type];
+        // if a specific queue is requested the callback should only be removed from that queue
+        if (queue !== undefined) {
+            const queueListeners = listeners.find(l => l.priority === queue);
+            if (!queueListeners) return;
+            const index = queueListeners.listeners.indexOf(callback);
+            if (index >= 0) queueListeners.listeners.splice(index, 1);
+        }
+        // if no queue is requested the callback will be removed from all queues
+        else {
+            for (const l of listeners) {
+                const index = l.listeners.indexOf(callback);
+                if (index >= 0) l.listeners.splice(index, 1);
+            }
+        }
     }
     private dispatchEvent(evt: NEPointerEvent | NEKeyboardEvent) {
+        let propagationStopped = false;
         if (evt instanceof NEKeyboardEvent) {
             const listeners = this._eventListeners[evt.type];
             if (listeners) {
-                for (const l of listeners) {
-                    (l as KeyboardEventListener)(evt);
+                for (const queue of listeners) {
+                    for (const l of queue.listeners)
+                        (l as KeyboardEventListener)(evt);
                 }
             }
         }
         else if (evt instanceof NEPointerEvent) {
             const listeners = this._eventListeners[evt.type];
             if (listeners) {
-                for (const l of listeners) {
-                    if (evt.immediatePropagationStopped) {
-                        if (debug) console.log("immediatePropagationStopped", evt.type);
-                        break;
+                for (const queue of listeners) {
+                    if (propagationStopped) break;
+                    for (const l of queue.listeners) {
+                        if (evt.immediatePropagationStopped) {
+                            propagationStopped = true;
+                            if (debug) console.log("immediatePropagationStopped", evt.type);
+                            break;
+                        }
+                        (l as PointerEventListener)(evt);
                     }
-                    (l as PointerEventListener)(evt);
                 }
             }
         }
@@ -917,14 +973,14 @@
     private isMouseEventEmmitedFromTouch(evt: NEPointerEvent) {
         if (evt.pointerType === PointerType.Mouse) {
-            const lastPointer = this._pointerUpTimestamp.map((v, i) => ({ timestamp: v, index: i})).sort((a, b) => a.timestamp - b.timestamp).at(-1);
-            if(lastPointer && this._pointerTypes[lastPointer.index] === PointerType.Touch) {
+            const lastPointer = this._pointerUpTimestamp.map((v, i) => ({ timestamp: v, index: i })).sort((a, b) => a.timestamp - b.timestamp).at(-1);
+            if (lastPointer && this._pointerTypes[lastPointer.index] === PointerType.Touch) {
                 if (lastPointer.timestamp > 0 && evt.source?.timeStamp !== undefined) {
                     const diff = (evt.source.timeStamp - lastPointer.timestamp);
                     if (diff < 320 && diff >= 0) {
                         // we received an UP event for a touch, ignore this DOWN event
                         if (debug) console.log("Ignoring mouse.down for touch.up");
                         return true;
                     }
                 }
@@ -947,7 +1003,7 @@
     private updatePointerPosition(evt: NEPointerEvent) {
         const index = evt.pointerId;
         while (index >= this._pointerPositions.length) this._pointerPositions.push(new Vector2());
         while (index >= this._pointerPositionsLastFrame.length) this._pointerPositionsLastFrame.push(new Vector2());
         while (index >= this._pointerPositionsDelta.length) this._pointerPositionsDelta.push(new Vector2());

plugins/types/index.d.ts CHANGED Viewed

@@ -1,2 +1,3 @@
 export * from './userconfig';
-export * from "./needleConfig";
+export * from "./needleConfig";
+export * from "./webmanifest";

src/engine-components/ui/PointerEvents.ts CHANGED Viewed

@@ -35,16 +35,16 @@
     readonly buttonName: MouseButtonName | GamepadButtonName | undefined;
     get pressure(): number { return this.event.pressure; }
-    private _used: boolean = false;
-    /** true when `use()` has been called */
+    /** @returns `true` when `use()` has been called. Default: false */
     get used(): boolean {
         return this._used;
     }
+    private _used: boolean = false;
     /** mark this event to be used */
     use() {
         if (this._used) return;
         this._used = true;
+        this.event.use();
         if (this.pointerId !== undefined)
             this.input.setPointerUsed(this.pointerId);
     }
@@ -179,7 +179,7 @@
     const res = GameObject.foreachComponent(obj, comp => {
         // ignore disabled components
         if (!comp.enabled) return undefined;
         const handler = comp as IPointerEventHandler;
         // if a specific event is passed in, we only check for that event
         if (event) {

src/engine-components/ui/SpatialHtml.ts CHANGED Viewed

@@ -2,15 +2,25 @@
 import { HTMLMesh } from 'three/examples/jsm/interactive/HTMLMesh.js';
 import { InteractiveGroup } from 'three/examples/jsm/interactive/InteractiveGroup.js';
+import { serializable } from '../../engine/engine_serialization.js';
 import { getWorldEuler, getWorldRotation, setWorldRotationXYZ } from '../../engine/engine_three_utils.js';
 import { Behaviour } from '../Component.js';
 export class SpatialHtml extends Behaviour {
+    @serializable()
     id: string | null = null;
+    @serializable()
     keepAspect: boolean = false;
-    start() {
+    private _object: InteractiveGroup | null = null;
+    onEnable() {
+        if (this._object) {
+            this.gameObject.add(this._object);
+            return;
+        }
         if (!this.id || !this.context.mainCamera) return;
         const div = document.getElementById(this.id);
         if (!div) {
@@ -27,7 +37,6 @@
         group.add(mesh);
         mesh.visible = false;
-        console.log(mesh);
         const mat = mesh.material as THREE.MeshBasicMaterial;
         mat.transparent = true;
@@ -61,4 +70,8 @@
             mesh.scale.multiply(factor);
         }, 1);
     }
+    onDisable(): void {
+        this._object?.removeFromParent();
+    }
 }

plugins/types/userconfig.d.ts CHANGED Viewed

@@ -43,6 +43,11 @@
     */
     posterGenerationMode?: "default" | "once";
+    /** When set to true the needle pwa plugin will not run */
+    noPWA?: boolean;
+    /** Pass in the VitePWA options */
+    pwaOptions?: {};
     /** used by nextjs config to forward the webpack module */
     modules: needleModules
 }

src/engine-components/VideoPlayer.ts CHANGED Viewed

@@ -144,7 +144,7 @@
     }
     get videoElement() {
-        if (this._videoElement) if (!this.create(false)) return null;
+        if (!this._videoElement) if (!this.create(false)) return null;
         return this._videoElement!;
     }

plugins/vite/pwa.js ADDED Viewed

@@ -0,0 +1,418 @@
+import { resolve, join, isAbsolute } from 'path'
+import { readdirSync, existsSync, readFileSync, copyFileSync, writeFileSync, rmSync, mkdirSync } from 'fs';
+import { builtAssetsDirectory, getOutputDirectory, tryLoadProjectConfig } from './config.js';
+/** Process the PWA manifest
+ * @param {import('../types').userSettings} userSettings
+ * @returns {import('vite').Plugin}
+ */
+export const needlePWA = (command, config, userSettings) => {
+    if (command !== "build") return;
+    if (config?.noPWA === true || userSettings?.noPWA === true) {
+        return;
+    }
+    const pwaOptions = userSettings.pwaOptions;
+    const currentDir = process.cwd();
+    const manifests = readdirSync(currentDir).filter(f => f.endsWith(".webmanifest")) || [];
+    if (manifests.length <= 0 && !pwaOptions) {
+        log("No webmanifests found in web project directory or in pwa options that are passed to the needle plugin (via `needlePlugin(command, needleConfig, { pwaOptions: PWAOptions })`)");
+        return;
+    }
+    /** The context contains files that are generated by the plugin and should be deleted after
+     * @type {import('../types').NeedlePWAProcessContext} */
+    const context = { generatedFiles: [] }
+    if (manifests.length <= 0) {
+        // write the manifes to disc temporarely
+        log("No webmanifests found in web project directory. Generating temporary webmanifest...");
+        const manifestName = "needle.generated.webmanifest";
+        const tempManifestPath = currentDir + "/" + manifestName;
+        const content = JSON.stringify(pwaOptions.manifest || {});
+        writeFileSync(tempManifestPath, content, 'utf8');
+        context.generatedFiles.push(tempManifestPath);
+        manifests.push(manifestName);
+    }
+    if (!pwaOptions) {
+        log("WARN: No PWA options found in user settings. Please pass in the pwaOptions to the needlePlugin like so: \"needlePlugins(command, needleConfig, { pwaOptions: PWAOptions })\" and pass the same options to vitePWA plugin like so \"VitePWA(PWAOptions)\"");
+        return cleanup(context);
+    }
+    else {
+        if (!pwaOptions.registerType) {
+            log("Set PWA registerType to autoUpdate. This will automatically update the service worker when the content changes. If you want to manually update the service worker set the registerType to manual. See https://vite-pwa-org.netlify.app/guide/#configuring-vite-plugin-pwa");
+            pwaOptions.registerType = "autoUpdate";
+        }
+        if (!pwaOptions.outDir) {
+            const outDir = getOutputDirectory();
+            log("Set PWA outDir to " + outDir);
+            pwaOptions.outDir = outDir;
+        }
+    }
+    // backup the original manifests
+    /** @type {Array<{path:string, copypath:string}>} */
+    const originalManifestContents = manifests.map(filename => {
+        const path = currentDir + "/" + filename;
+        const backupDir = currentDir + "/node_modules/.needle";
+        if (!existsSync(backupDir)) {
+            mkdirSync(backupDir, { recursive: true });
+        }
+        const copyPath = backupDir + "/" + filename + ".original";
+        log("Backup original webmanifest", path, "to", copyPath);
+        copyFileSync(path, copyPath);
+        return { path, copyPath };
+    });
+    // modify the manifests so they're loaded via VitePlugin
+    for (const manifest of manifests) {
+        try {
+            processPWA(manifest, context).catch(e => log("Error post processing PWA", manifest, e));
+            log("Assign PWA manifest to VitePWA plugin: \"" + manifest + "\"");
+            pwaOptions.manifest = {
+                start_url: "./index.html",
+                ...JSON.parse(readFileSync(manifest, 'utf8')),
+                ...pwaOptions.manifest
+            };
+            // we only want to process the first manifest
+            break;
+        }
+        catch (e) {
+            log("Error post processing PWA", manifest, e);
+            restoreOriginalManifests(originalManifestContents);
+            break;
+        }
+    }
+    /** @type {Array<string>} */
+    const postBuildMessages = [];
+    return {
+        name: 'needle-pwa',
+        apply: 'build',
+        enforce: "post",
+        config(config) {
+            try {
+                checkIfVitePWAPluginIsPresent(config);
+                // check if the index header contains the webmanifest ALSO
+                // if yes then we want to log a waring at the end
+                const indexPath = currentDir + "/index.html";
+                if (existsSync(indexPath)) {
+                    const indexContent = readFileSync(indexPath, 'utf8');
+                    if (indexContent.includes(".webmanifest")) {
+                        throw new Error("ERR: [needle-pwa] index.html contains a reference to a webmanifest. This is not supported in PWA mode. Please remove the reference from the index.html");
+                    }
+                }
+            }
+            catch (err) {
+                cleanup(context);
+                throw err;
+            }
+            finally {
+                restoreOriginalManifests(originalManifestContents);
+            }
+        },
+        transformIndexHtml: {
+            enforce: 'pre',
+            transform(html, _ctx) {
+                // see https://vite-pwa-org.netlify.app/guide/auto-update.html
+                // post transform so we want to linebreak after the vite logs
+                console.log("\n");
+                const scriptContent = `// Injected by needle-pwa
+import { registerSW } from 'virtual:pwa-register'
+registerSW({ immediate: true })`;
+                log("Inject PWA script into index.html");
+                return {
+                    html,
+                    tags: [
+                        {
+                            tag: 'script',
+                            children: scriptContent,
+                            attrs: { type: "module" },
+                            injectTo: 'head',
+                        },
+                    ]
+                }
+            }
+        },
+        closeBundle() {
+            // copy the icons to the output directory
+            const outputDir = getOutputDirectory();
+            const webmanifestPath = outputDir + "/" + readdirSync(outputDir).find(f => f.endsWith(".webmanifest"));
+            if (webmanifestPath) {
+                try {
+                    const manifest = JSON.parse(readFileSync(webmanifestPath, 'utf8'));
+                    copyIcons(manifest, outputDir);
+                }
+                catch (e) {
+                    log("Error post processing PWA", webmanifestPath, e);
+                }
+            }
+            cleanup(context);
+            for (const msg of postBuildMessages) {
+                console.log(msg);
+            }
+        }
+    }
+}
+/** Checks if the vite-plugin-pwa is present in the vite config
+ * @param {import('vite').UserConfig} config
+ */
+function checkIfVitePWAPluginIsPresent(config) {
+    const plugins = config.plugins || [];
+    let foundVitePWAPlugin = false;
+    for (const plugin of plugins) {
+        if (isVitePWAPlugin(plugin)) {
+            foundVitePWAPlugin = true;
+            return;
+        }
+    }
+    function isVitePWAPlugin(p) {
+        if (Array.isArray(p)) {
+            return p.some(isVitePWAPlugin);
+        }
+        return p.name === "vite-plugin-pwa";
+    }
+    if (!foundVitePWAPlugin) {
+        // const { default: VitePWA } = await import('vite-plugin-pwa');
+        // log("Add vite-plugin-pwa to the vite config");
+        // config.plugins.push(VitePWA());
+        throw new Error("ERR: [needle-pwa] vite-plugin-pwa is not present in the vite config. Please install vite-plugin-pwa and add it to the vite config like so: \"VitePWA(PWAOptions)\". \n\nIf you don't intent to build a PWA then don't pass the PWA options to the needlePlugin or set `noPWA: true` in the user settings (third argument).");
+    }
+}
+function cleanup(context) {
+    for (const file of context.generatedFiles) {
+        log("Cleanup generated file", file);
+        rmSync(file);
+    }
+    context.generatedFiles.length = 0;
+}
+/**
+ * @param {Array<{path:string, copypath:string}>} manifests
+ */
+function restoreOriginalManifests(manifests) {
+    // restore the manifest
+    for (const manifest of manifests) {
+        try {
+            log("Restore original webmanifest", manifest.path);
+            copyFileSync(manifest.copyPath, manifest.path);
+            rmSync(manifest.copyPath);
+        }
+        catch (e) {
+            log("Error restoring original webmanifest", manifest, e);
+        }
+    }
+    manifests.length = 0;
+}
+function log(...args) {
+    console.log("[needle-pwa]", ...args);
+}
+function delay(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+/**
+ * @param {string} webmanifestPath
+ * @param {import("../types/index.d.ts").NeedlePWAProcessContext} context
+ * @param {import("../types/index.d.ts").NeedlePWAOptions?} options
+ */
+async function processPWA(webmanifestPath, context, options, iteration = 0) {
+    const outDir = getOutputDirectory();
+    if (!existsSync(webmanifestPath)) {
+        if (iteration > 2)
+            return log("No webmanifest found at", webmanifestPath);
+        // try a few times...
+        await delay(100);
+        return processPWA(webmanifestPath, context, options, iteration + 2);
+    }
+    /** @type {import("../types/webmanifest.d.ts").Webmanifest}} */
+    const manifest = JSON.parse(readFileSync(webmanifestPath, 'utf8'));
+    let modifiedManifest = false;
+    if (processIcons(manifest, outDir, context) === true) modifiedManifest = true;
+    if (processWorkboxConfig(manifest) === true) modifiedManifest = true;
+    const packageJsonPath = process.cwd() + "/package.json";
+    const packageJson = existsSync(packageJsonPath) ? JSON.parse(readFileSync(packageJsonPath, 'utf8')) : {};
+    if (manifest.id === undefined) {
+        let name = packageJson.name || manifest.short_name || manifest.name;
+        if (name) {
+            manifest.id = "com." + name.toLowerCase().replace(/[^a-z0-9\/\-]/g, '').replace("\/", ".");
+            modifiedManifest = true;
+        }
+    }
+    if (manifest.description === undefined) {
+        manifest.description = packageJson.description || "Made with Needle Engine";
+        if (manifest.description?.length)
+            modifiedManifest = true;
+    }
+    if (modifiedManifest) {
+        log("Write modified webmanifest to " + webmanifestPath);
+        const newManifest = JSON.stringify(manifest);
+        writeFileSync(webmanifestPath, newManifest, 'utf8');
+    }
+}
+/** Copies icons to the output directory
+ * If a start_url is provided, it will be used as the base path for relative icon paths
+ * @param {import("../types/webmanifest.d.ts").Webmanifest} manifest
+ * @param {string} outDir
+ * @param {import("../types/index.d.ts").NeedlePWAProcessContext} context
+ * @returns {boolean} */
+function processIcons(manifest, outDir, context) {
+    let modified = false;
+    if (!manifest.icons?.length) {
+        // generate icons
+        generateIcons(manifest, context);
+    }
+    for (let i = 0; i < manifest.icons?.length; i++) {
+        try {
+            const icon = manifest.icons[i];
+            let src = icon.src;
+            const iconSrcIsAbsolute = src.startsWith("http://") || src.startsWith("https://");
+            const hasAbsoluteStartUrl = manifest.start_url?.startsWith("http://") || manifest.start_url?.startsWith("https://");
+            if (!iconSrcIsAbsolute && hasAbsoluteStartUrl) {
+                log("Making icon src relative to start_url", src);
+                icon.src = manifest.start_url + src;
+                modified = true;
+            }
+        }
+        catch (e) {
+            log("Error processing PWA icon[" + i + "]", e);
+        }
+    }
+    return modified;
+}
+/**
+ * @param {import("../types/webmanifest.d.ts").Webmanifest} manifest
+ * @param {import("../types/index.d.ts").NeedlePWAProcessContext} context
+ */
+function generateIcons(manifest, context) {
+    if (!manifest.icons) manifest.icons = [];
+    log("Generating PWA icons");
+    const sizes = [192, 512];
+    const defaultIconSVG = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 160 187.74"><defs><linearGradient id="a" x1="89.64" y1="184.81" x2="90.48" y2="21.85" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#62d399"/><stop offset=".51" stop-color="#acd842"/><stop offset=".9" stop-color="#d7db0a"/></linearGradient><linearGradient id="b" x1="69.68" y1="178.9" x2="68.08" y2="16.77" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0ba398"/><stop offset=".5" stop-color="#4ca352"/><stop offset="1" stop-color="#76a30a"/></linearGradient><linearGradient id="c" x1="36.6" y1="152.17" x2="34.7" y2="84.19" gradientUnits="userSpaceOnUse"><stop offset=".19" stop-color="#36a382"/><stop offset=".54" stop-color="#49a459"/><stop offset="1" stop-color="#76a30b"/></linearGradient><linearGradient id="d" x1="15.82" y1="153.24" x2="18" y2="90.86" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#267880"/><stop offset=".51" stop-color="#457a5c"/><stop offset="1" stop-color="#717516"/></linearGradient><linearGradient id="e" x1="135.08" y1="135.43" x2="148.93" y2="63.47" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#b0d939"/><stop offset="1" stop-color="#eadb04"/></linearGradient><linearGradient id="f" x1="-4163.25" y1="2285.12" x2="-4160.81" y2="2215.34" gradientTransform="rotate(20 4088.49 13316.712)" gradientUnits="userSpaceOnUse"><stop offset=".17" stop-color="#74af52"/><stop offset=".48" stop-color="#99be32"/><stop offset="1" stop-color="#c0c40a"/></linearGradient><symbol id="g" viewBox="0 0 160 187.74"><path style="fill:url(#a)" d="M79.32 36.98v150.76L95 174.54l6.59-156.31-22.27 18.75z"/><path style="fill:url(#b)" d="M79.32 36.98 57.05 18.23l6.59 156.31 15.68 13.2V36.98z"/><path style="fill:url(#c)" d="m25.19 104.83 8.63 49.04 12.5-14.95-2.46-56.42-18.67 22.33z"/><path style="fill:url(#d)" d="M25.19 104.83 0 90.24l16.97 53.86 16.85 9.77-8.63-49.04z"/><path style="fill:#9c3" d="M43.86 82.5 18.69 67.98 0 90.24l25.18 14.59L43.86 82.5z"/><path style="fill:url(#e)" d="m134.82 78.69-9.97 56.5 15.58-9.04L160 64.1l-25.18 14.59z"/><path style="fill:url(#f)" d="m134.82 78.69-18.68-22.33-2.86 65 11.57 13.83 9.97-56.5z"/><path style="fill:#ffe113" d="m160 64.1-18.69-22.26-25.17 14.52 18.67 22.33L160 64.1z"/><path style="fill:#f3e600" d="M101.59 18.23 79.32 0 57.05 18.23l22.27 18.75 22.27-18.75z"/></symbol></defs><use width="160" height="187.74" xlink:href="#g"/></svg>`;
+    const iconDir = process.cwd();
+    for (let size of sizes) {
+        const iconName = "pwa-icon-" + size + ".svg";
+        const iconPath = iconDir + "/" + iconName;
+        writeFileSync(iconPath, defaultIconSVG, 'utf8');
+        context.generatedFiles.push(iconPath);
+        const iconSrc = "./" + iconName;
+        log("Generated PWA icon", iconSrc);
+        const iconInfo = {
+            src: iconSrc,
+            type: "image/svg+xml",
+            sizes: size + "x" + size,
+            "purpose": "any"
+        };
+        manifest.icons.push(iconInfo);
+        manifest.icons.push({
+            ...iconInfo,
+            purpose: "maskable"
+        })
+    }
+}
+/** Tries to copy the icons to the output directory
+ */
+function copyIcons(manifest, outDir) {
+    for (let i = 0; i < manifest.icons?.length; i++) {
+        try {
+            const icon = manifest.icons[i];
+            let src = icon.src;
+            // if the icon starts with the start url we remove it (to get the output folder relative URL for copying)
+            if (src.startsWith(manifest.start_url)) {
+                src = src.substring(manifest.start_url.length);
+            }
+            // check again if the src is absolute
+            const srcIsAbsolute = src.startsWith("http://") || src.startsWith("https://") || src.startsWith("//");
+            if (srcIsAbsolute) {
+                log("PWA icon src is absolute, not supported", icon.src);
+                continue;
+            }
+            // src is relative -> we copy the file to the output directory
+            const srcPath = process.cwd() + "/" + src;
+            if (existsSync(srcPath)) {
+                const targetPath = outDir + "/" + src;
+                // if the icon already exists in the output directory we skip it
+                if (existsSync(targetPath)) {
+                    continue;
+                }
+                const outputDirectory = targetPath.substring(0, targetPath.lastIndexOf('/'));
+                if (!existsSync(outputDirectory)) {
+                    mkdirSync(outputDirectory, { recursive: true });
+                }
+                log("Copy PWA icon " + src + " to output");
+                copyFileSync(srcPath, targetPath);
+            }
+        }
+        catch (e) {
+            log("Error processing PWA icon[" + i + "]", e);
+        }
+    }
+}
+/**
+ * Merges the current workbox config with the default workbox config
+ * @param {import("../types/webmanifest.d.ts").Webmanifest} manifest
+ */
+function processWorkboxConfig(manifest) {
+    // Workaround: urlPattern, ignoreSearch und ignoreURLParametersMatching, dontCacheBustURLsMatching are because we currently append ?v=... to loaded GLB files
+    // this is our default config
+    const defaultWorkboxConfig = {
+        globPatterns: ['**'],
+        // glb files are large – we need to increase the cache size here.
+        // In practice we want to precache everything for offline usage,
+        // but we still want to get a warning beyond 50MB.
+        maximumFileSizeToCacheInBytes: 50000000,
+        dontCacheBustURLsMatching: /\.[a-f0-9]{8}\./,
+        ignoreURLParametersMatching: [/.*/],
+        runtimeCaching: [
+            {
+                urlPattern: ({ url }) => url,
+                // Apply a network-first strategy.
+                handler: 'NetworkFirst',
+                options: {
+                    matchOptions: {
+                        ignoreSearch: true,
+                    },
+                }
+            },
+        ],
+    }
+    if (manifest.workboxConfig) {
+        manifest.workboxConfig = { ...defaultWorkboxConfig, ...manifest.workboxConfig };
+        return true;
+    }
+    else {
+        manifest.workboxConfig = defaultWorkboxConfig;
+        return true;
+    }
+}

plugins/types/webmanifest.d.ts ADDED Viewed

@@ -0,0 +1,26 @@
+declare type Icon = {
+    src: string;
+    sizes: string;
+    type: string;
+    purpose: string;
+}
+export declare type Webmanifest = {
+    start_url: string;
+    name?: string;
+    short_name?: string;
+    id?: string;
+    icons?: Array<Icon>;
+    workbox?: object;
+}
+export declare type NeedlePWAOptions = {
+}
+export declare type NeedlePWAProcessContext = {
+    generatedFiles: Array<string>;
+}