@needle-tools/engine/plugins/vite/asap.js

Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in

import { existsSync, readFileSync, writeFileSync } from 'fs';

const code = `import('@needle-tools/engine/src/asap/needle-asap.ts');`


/**
 * Injects needle asap script into the index.html for when the main needle engine bundle is still being downloaded
 * @param {"build" | "serve"} command
 * @param {import('../types').userSettings} userSettings
 * @returns {Promise<import('vite').Plugin | null>}
 */
export const needleAsap = async (command, config, userSettings) => {

    if (userSettings.noAsap) return null;

    fixMainTs();

    if (command != "build") {
        return null;
    }

    return {
        name: 'needle:asap',
        transformIndexHtml: {
            order: 'pre',
            handler(html, _ctx) {
                if (existsSync(process.cwd() + "/node_modules/@needle-tools/engine/src/asap/needle-asap.ts")) {
                    return {
                        html,
                        tags: [
                            {
                                tag: 'script',
                                children: code,
                                attrs: {
                                    type: "module",
                                    async: true,
                                }
                            },
                        ]
                    }
                }
            }
        },
    }

}

function fixMainTs() {
    // TODO: remove me
    // we could also do this via a transform call - not sure if it's not better for users to see this change that's why i chose to modify the file on disc
    const mainTsFilePath = process.cwd() + '/src/main.ts';
    if (existsSync(mainTsFilePath)) {
        let code = readFileSync(mainTsFilePath, 'utf-8');
        if (code.includes('import \"@needle-tools/engine\"')) {
            console.log("Change main.ts and replace needle engine import with async import");
            code = code.replace(/import \"@needle-tools\/engine\"/g, 'import("@needle-tools/engine") /* async import of needle engine */');
            writeFileSync(mainTsFilePath, code);
        }
    }
}