@needle-tools/engine 3.28.6-beta → 3.28.7-beta.1

package/plugins/vite/meta.js

@@ -1,150 +1,150 @@
-import { loadConfig } from './config.js';
-import fs from 'fs';
-import { getPosterPath } from './poster.js';
-import { tryGetNeedleEngineVersion } from '../common/version.js';
-
-/**
- * @param {import('../types').userSettings} userSettings
- */
-export const needleMeta = (command, config, userSettings) => {
-
-    // we can check if this is a build
-    // const isBuild = command === 'build';
-
-    async function updateConfig() {
-        config = await loadConfig();
-    }
-
-    if (!userSettings) userSettings = {};
-
-    return {
-        // replace meta tags
-        name: 'needle-meta',
-        transformIndexHtml: {
-            enforce: 'pre',
-            transform(html, _ctx) {
-
-                html = insertNeedleCredits(html);
-
-                if (userSettings.allowMetaPlugin === false) return [];
-
-                // this is useful to get the latest config exported from editor
-                // whenever vite wants to transform the html
-                updateConfig();
-
-                // early out of the config is invalid / doesn't contain meta information
-                // TODO might be better to handle these edge cases / special cases right from Unity/Blender and not here
-                if (!config) return [];
-
-                let meta = config.meta;
-
-                if (!meta) {
-                    meta = {};
-                    meta.title = config.sceneName;
-                }
-
-                if (!meta.image?.length) {
-                    const path = getPosterPath();
-                    if (fs.existsSync('./' + path))
-                        meta.image = path;
-                }
-
-                const tags = [];
-
-                let img = meta.image;
-                if (img?.length) {
-                    // for a regular build the absolutePath is url (since we dont know the deployment target)
-                    if (config.absolutePath?.length) {
-                        const baseUrl = config.absolutePath;
-                        let url = baseUrl + "/" + img;
-                        url = removeDuplicateSlashesInUrl(url);
-                        // url = appendVersion(url);
-                        tags.push({ tag: 'meta', attrs: { name: 'twitter:card', content: 'summary_large_image' } });
-                        tags.push({ tag: 'meta', attrs: { name: 'twitter:image', content: url } });
-                        tags.push({ tag: 'meta', attrs: { name: 'og:image', content: url } });
-                        // Keep in sync with poster
-                        tags.push({ tag: 'meta', attrs: { name: 'og:image:width', content: 1080 } });
-                        tags.push({ tag: 'meta', attrs: { name: 'og:image:height', content: 1080 } });
-                    }
-                }
-
-                if (config.absolutePath?.length) {
-                    html = updateUrlMetaTag(html, config.absolutePath);
-                }
-
-                if (meta.title?.length) {
-                    tags.push({ tag: 'meta', attrs: { name: 'og:title', content: meta.title } });
-
-                    html = html.replace(
-                        /<title>(.*?)<\/title>/,
-                        `<title>${meta.title}</title>`,
-                    );
-
-                    if (userSettings.allowRemoveMetaTags !== false)
-                        html = removeMetaTag(html, 'og:title');
-
-                }
-
-                if (meta.description?.length) {
-                    tags.push({ tag: 'meta', attrs: { name: 'description', content: meta.description } });
-                    tags.push({ tag: 'meta', attrs: { name: 'og:description', content: meta.description } });
-
-                    if (userSettings.allowRemoveMetaTags !== false) {
-                        html = removeMetaTag(html, 'description');
-                        html = removeMetaTag(html, 'og:description');
-                    }
-                }
-
-                let generator = "Needle";
-                if (config.generator?.length > 5) {
-                    generator = config.generator;
-                }
-                tags.push({ tag: 'meta', attrs: { name: 'generator', content: generator } });
-
-                const needleEngineVersion = tryGetNeedleEngineVersion();
-                if (needleEngineVersion) {
-                    if (command === "build")
-                        console.log("Needle Engine version: " + needleEngineVersion);
-                    tags.push({ tag: 'meta', attrs: { name: 'needle-engine', content: needleEngineVersion } });
-                }
-                else console.log("WARN: could not find needle engine package.json")
-
-                return { html, tags }
-            },
-        }
-    }
-}
-
-
-function updateUrlMetaTag(html, url) {
-    html = html.replace(`<meta name="url" content="http://needle.tools">`, `<meta name="url" content="${url}">`);
-    return html;
-}
-
-function appendVersion(str) {
-    return str + "?v=" + Date.now();
-}
-
-function removeDuplicateSlashesInUrl(url) {
-    return url.replace(/([^:]\/)\/+/g, "$1");
-}
-
-function removeMetaTag(html, name) {
-    // TODO: maybe we could also just replace the content
-    const regex = new RegExp(`<meta (name|property)="${name}".+?\/?>`, 'gs');
-    const newHtml = html.replace(
-        regex,
-        '',
-    );
-    // console.log(newHtml);
-    return newHtml;
-}
-
-function insertNeedleCredits(html) {
-    const needleCredits = `<!-- 🌵 Made with Needle — https://needle.tools -->`;
-    html = html.replace(
-        /<head/,
-        needleCredits + "\n<head",
-    );
-    return html;
+import { loadConfig } from './config.js';
+import fs from 'fs';
+import { getPosterPath } from './poster.js';
+import { tryGetNeedleEngineVersion } from '../common/version.js';
+
+/**
+ * @param {import('../types').userSettings} userSettings
+ */
+export const needleMeta = (command, config, userSettings) => {
+
+    // we can check if this is a build
+    // const isBuild = command === 'build';
+
+    async function updateConfig() {
+        config = await loadConfig();
+    }
+
+    if (!userSettings) userSettings = {};
+
+    return {
+        // replace meta tags
+        name: 'needle-meta',
+        transformIndexHtml: {
+            enforce: 'pre',
+            transform(html, _ctx) {
+
+                html = insertNeedleCredits(html);
+
+                if (userSettings.allowMetaPlugin === false) return [];
+
+                // this is useful to get the latest config exported from editor
+                // whenever vite wants to transform the html
+                updateConfig();
+
+                // early out of the config is invalid / doesn't contain meta information
+                // TODO might be better to handle these edge cases / special cases right from Unity/Blender and not here
+                if (!config) return [];
+
+                let meta = config.meta;
+
+                if (!meta) {
+                    meta = {};
+                    meta.title = config.sceneName;
+                }
+
+                if (!meta.image?.length) {
+                    const path = getPosterPath();
+                    if (fs.existsSync('./' + path))
+                        meta.image = path;
+                }
+
+                const tags = [];
+
+                let img = meta.image;
+                if (img?.length) {
+                    // for a regular build the absolutePath is url (since we dont know the deployment target)
+                    if (config.absolutePath?.length) {
+                        const baseUrl = config.absolutePath;
+                        let url = baseUrl + "/" + img;
+                        url = removeDuplicateSlashesInUrl(url);
+                        // url = appendVersion(url);
+                        tags.push({ tag: 'meta', attrs: { name: 'twitter:card', content: 'summary_large_image' } });
+                        tags.push({ tag: 'meta', attrs: { name: 'twitter:image', content: url } });
+                        tags.push({ tag: 'meta', attrs: { name: 'og:image', content: url } });
+                        // Keep in sync with poster
+                        tags.push({ tag: 'meta', attrs: { name: 'og:image:width', content: 1080 } });
+                        tags.push({ tag: 'meta', attrs: { name: 'og:image:height', content: 1080 } });
+                    }
+                }
+
+                if (config.absolutePath?.length) {
+                    html = updateUrlMetaTag(html, config.absolutePath);
+                }
+
+                if (meta.title?.length) {
+                    tags.push({ tag: 'meta', attrs: { name: 'og:title', content: meta.title } });
+
+                    html = html.replace(
+                        /<title>(.*?)<\/title>/,
+                        `<title>${meta.title}</title>`,
+                    );
+
+                    if (userSettings.allowRemoveMetaTags !== false)
+                        html = removeMetaTag(html, 'og:title');
+
+                }
+
+                if (meta.description?.length) {
+                    tags.push({ tag: 'meta', attrs: { name: 'description', content: meta.description } });
+                    tags.push({ tag: 'meta', attrs: { name: 'og:description', content: meta.description } });
+
+                    if (userSettings.allowRemoveMetaTags !== false) {
+                        html = removeMetaTag(html, 'description');
+                        html = removeMetaTag(html, 'og:description');
+                    }
+                }
+
+                let generator = "Needle";
+                if (config.generator?.length > 5) {
+                    generator = config.generator;
+                }
+                tags.push({ tag: 'meta', attrs: { name: 'generator', content: generator } });
+
+                const needleEngineVersion = tryGetNeedleEngineVersion();
+                if (needleEngineVersion) {
+                    if (command === "build")
+                        console.log("Needle Engine version: " + needleEngineVersion);
+                    tags.push({ tag: 'meta', attrs: { name: 'needle-engine', content: needleEngineVersion } });
+                }
+                else console.log("WARN: could not find needle engine package.json")
+
+                return { html, tags }
+            },
+        }
+    }
+}
+
+
+function updateUrlMetaTag(html, url) {
+    html = html.replace(`<meta name="url" content="http://needle.tools">`, `<meta name="url" content="${url}">`);
+    return html;
+}
+
+function appendVersion(str) {
+    return str + "?v=" + Date.now();
+}
+
+function removeDuplicateSlashesInUrl(url) {
+    return url.replace(/([^:]\/)\/+/g, "$1");
+}
+
+function removeMetaTag(html, name) {
+    // TODO: maybe we could also just replace the content
+    const regex = new RegExp(`<meta (name|property)="${name}".+?\/?>`, 'gs');
+    const newHtml = html.replace(
+        regex,
+        '',
+    );
+    // console.log(newHtml);
+    return newHtml;
+}
+
+function insertNeedleCredits(html) {
+    const needleCredits = `<!-- 🌵 Made with Needle — https://needle.tools -->`;
+    html = html.replace(
+        /<head/,
+        needleCredits + "\n<head",
+    );
+    return html;
 }

package/plugins/vite/peer.js

@@ -1,31 +1,31 @@
-
-const peerjsString = `/* needle: injected fix for peerjs */
-window.global = window;
-var parcelRequire;`
-
-/**
- * @param {import('../types').userSettings} userSettings
- */
-export const needlePeerjs = (command, config, userSettings) => {
-
-    if (userSettings.noPeer === true) return;
-
-    return {
-        name: 'needle-peerjs',
-        transformIndexHtml: {
-            enforce: 'pre',
-            transform(html, _ctx) {
-                return {
-                    html,
-                    tags: [
-                        {
-                            tag: 'script',
-                            children: peerjsString,
-                            injectTo: 'body-prepend',
-                        },
-                    ]
-                }
-            }
-        }
-    }
-}
+
+const peerjsString = `/* needle: injected fix for peerjs */
+window.global = window;
+var parcelRequire;`
+
+/**
+ * @param {import('../types').userSettings} userSettings
+ */
+export const needlePeerjs = (command, config, userSettings) => {
+
+    if (userSettings.noPeer === true) return;
+
+    return {
+        name: 'needle-peerjs',
+        transformIndexHtml: {
+            enforce: 'pre',
+            transform(html, _ctx) {
+                return {
+                    html,
+                    tags: [
+                        {
+                            tag: 'script',
+                            children: peerjsString,
+                            injectTo: 'body-prepend',
+                        },
+                    ]
+                }
+            }
+        }
+    }
+}

package/plugins/vite/poster-client.js

@@ -1,60 +1,60 @@
-
-async function generatePoster() {
-    const { screenshot } = await import("@needle-tools/engine");
-
-    try {
-        const needleEngine = document.querySelector("needle-engine");
-        if (!needleEngine) return null;
-
-        // Keep in sync with og:image:width meta tags
-        // https://developers.facebook.com/docs/sharing/best-practices/
-        const width = 1080;
-        const height = 1080;
-        const context = await needleEngine.getContext();
-
-        // wait a fixed time for e.g. fonts to load
-        while(context.time.frameCount < 2)
-            await new Promise((resolve) => setTimeout(resolve, 200));
-
-        const mimeType = "image/webp";
-        console.log("Generating poster...");
-        const dataUrl = screenshot(context, width, height, mimeType);
-
-        return dataUrl;
-    }
-    catch (e) {
-        console.error(e);
-        return null;
-    }
-}
-
-async function sendPoster() {
-    const blob = await generatePoster();
-    import.meta.hot.send("needle:screenshot", { data: blob });
-}
-
-// communicate via vite
-if (import.meta.hot) {
-    // wait for needle engine to be fully loaded
-    const needleEngine = document.querySelector("needle-engine");
-    needleEngine?.addEventListener("loadfinished", () => {
-        // wait a moment
-        setTimeout(() => {
-            sendPoster();
-        }, 200);
-    });
-
-    // for debugging: build extra button with dev-only options
-    /*
-    var button = document.createElement("button");
-    button.id = "send-msg";
-    button.innerHTML = "Generate Poster";
-    button.style.position = "fixed";
-    button.style.zIndex = "9999";
-    document.body.appendChild(button);
-
-    document.querySelector("#send-msg").addEventListener("click", async () => {
-        sendPoster();
-    });
-    */
+
+async function generatePoster() {
+    const { screenshot } = await import("@needle-tools/engine");
+
+    try {
+        const needleEngine = document.querySelector("needle-engine");
+        if (!needleEngine) return null;
+
+        // Keep in sync with og:image:width meta tags
+        // https://developers.facebook.com/docs/sharing/best-practices/
+        const width = 1080;
+        const height = 1080;
+        const context = await needleEngine.getContext();
+
+        // wait a fixed time for e.g. fonts to load
+        while(context.time.frameCount < 2)
+            await new Promise((resolve) => setTimeout(resolve, 200));
+
+        const mimeType = "image/webp";
+        console.log("Generating poster...");
+        const dataUrl = screenshot(context, width, height, mimeType);
+
+        return dataUrl;
+    }
+    catch (e) {
+        console.error(e);
+        return null;
+    }
+}
+
+async function sendPoster() {
+    const blob = await generatePoster();
+    import.meta.hot.send("needle:screenshot", { data: blob });
+}
+
+// communicate via vite
+if (import.meta.hot) {
+    // wait for needle engine to be fully loaded
+    const needleEngine = document.querySelector("needle-engine");
+    needleEngine?.addEventListener("loadfinished", () => {
+        // wait a moment
+        setTimeout(() => {
+            sendPoster();
+        }, 200);
+    });
+
+    // for debugging: build extra button with dev-only options
+    /*
+    var button = document.createElement("button");
+    button.id = "send-msg";
+    button.innerHTML = "Generate Poster";
+    button.style.position = "fixed";
+    button.style.zIndex = "9999";
+    document.body.appendChild(button);
+
+    document.querySelector("#send-msg").addEventListener("click", async () => {
+        sendPoster();
+    });
+    */
 }

package/plugins/vite/poster.js

@@ -1,74 +1,74 @@
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-export function getPosterPath() {
-    return "include/poster.webp";
-}
-
-/**
- * @param {import('../types').userSettings} userSettings
- */
-export const needlePoster = (command, config, userSettings) => {
-    // only relevant for local development
-    if (command === 'build') return [];
-
-    if (userSettings.noPoster) return;
-
-    return {
-        name: 'needle-poster',
-        configureServer(server) {
-            server.ws.on('needle:screenshot', async (data, client) => {
-                if (userSettings.noPoster) return;
-                if (!data?.data) {
-                    console.warn("Received empty screenshot data, ignoring");
-                    return;
-                }
-
-                if (userSettings.posterGenerationMode === "once") {
-                    if (fs.existsSync(getPosterPath())) {
-                        console.log("Poster already exists, ignoring screenshot");
-                        return;
-                    }
-                }
-                const targetPath = "./" + getPosterPath();
-                console.log("Received poster, saving to " + targetPath);
-                // remove data:image/png;base64, from the beginning of the string
-                if (targetPath.endsWith(".webp"))
-                    data.data = data.data.replace(/^data:image\/webp;base64,/, "");
-                else
-                    data.data = data.data.replace(/^data:image\/png;base64,/, "");
-                const dir = path.dirname(targetPath);
-                if (!fs.existsSync(dir)) {
-                    fs.mkdirSync(dir, { recursive: true })
-                }
-                fs.writeFileSync(targetPath, Buffer.from(data.data, "base64"));
-            });
-        },
-        transformIndexHtml: {
-            enforce: 'pre',
-            transform(html, ctx) {
-                const file = path.join(__dirname, 'poster-client.js');
-                let scriptContent = fs.readFileSync(file, 'utf8');
-                switch (userSettings.posterFormat) {
-                    case "image/png":
-                        scriptContent = scriptContent.replace("image/webp", "image/png");
-                        break;
-                }
-                return [
-                    {
-                        tag: 'script',
-                        attrs: {
-                            type: 'module',
-                        },
-                        children: scriptContent,
-                        injectTo: 'body',
-                    },
-                ];
-            },
-        },
-    }
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export function getPosterPath() {
+    return "include/poster.webp";
+}
+
+/**
+ * @param {import('../types').userSettings} userSettings
+ */
+export const needlePoster = (command, config, userSettings) => {
+    // only relevant for local development
+    if (command === 'build') return [];
+
+    if (userSettings.noPoster) return;
+
+    return {
+        name: 'needle-poster',
+        configureServer(server) {
+            server.ws.on('needle:screenshot', async (data, client) => {
+                if (userSettings.noPoster) return;
+                if (!data?.data) {
+                    console.warn("Received empty screenshot data, ignoring");
+                    return;
+                }
+
+                if (userSettings.posterGenerationMode === "once") {
+                    if (fs.existsSync(getPosterPath())) {
+                        console.log("Poster already exists, ignoring screenshot");
+                        return;
+                    }
+                }
+                const targetPath = "./" + getPosterPath();
+                console.log("Received poster, saving to " + targetPath);
+                // remove data:image/png;base64, from the beginning of the string
+                if (targetPath.endsWith(".webp"))
+                    data.data = data.data.replace(/^data:image\/webp;base64,/, "");
+                else
+                    data.data = data.data.replace(/^data:image\/png;base64,/, "");
+                const dir = path.dirname(targetPath);
+                if (!fs.existsSync(dir)) {
+                    fs.mkdirSync(dir, { recursive: true })
+                }
+                fs.writeFileSync(targetPath, Buffer.from(data.data, "base64"));
+            });
+        },
+        transformIndexHtml: {
+            enforce: 'pre',
+            transform(html, ctx) {
+                const file = path.join(__dirname, 'poster-client.js');
+                let scriptContent = fs.readFileSync(file, 'utf8');
+                switch (userSettings.posterFormat) {
+                    case "image/png":
+                        scriptContent = scriptContent.replace("image/webp", "image/png");
+                        break;
+                }
+                return [
+                    {
+                        tag: 'script',
+                        attrs: {
+                            type: 'module',
+                        },
+                        children: scriptContent,
+                        injectTo: 'body',
+                    },
+                ];
+            },
+        },
+    }
 };

package/plugins/vite/reload-client.js

@@ -1,16 +1,16 @@
-import { showBalloonMessage } from "@needle-tools/engine";
-
-try {
-    // communicate via vite
-    if (import.meta.hot) {
-        // listen to needle-reload event
-        import.meta.hot.on('needle:reload', (evt) => {
-            console.log("Received reload event");
-            showBalloonMessage("Detected files changing\npage will reload in a moment");
-        });
-
-    }
-}
-catch {
-    // ignore
+import { showBalloonMessage } from "@needle-tools/engine";
+
+try {
+    // communicate via vite
+    if (import.meta.hot) {
+        // listen to needle-reload event
+        import.meta.hot.on('needle:reload', (evt) => {
+            console.log("Received reload event");
+            showBalloonMessage("Detected files changing\npage will reload in a moment");
+        });
+
+    }
+}
+catch {
+    // ignore
 }