@needle-tools/engine 4.7.0-alpha → 4.7.0-next.da47826

package/plugins/vite/meta.js

@@ -1,164 +1,164 @@
-import fs from 'fs';
-
-import { tryGetNeedleEngineVersion } from '../common/version.js';
-import { loadConfig } from './config.js';
-import { getPosterPath } from './poster.js';
-
-/**
- * @param {string} command
- * @param {import('../types').needleMeta | null} config
- * @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: {
-            order: 'pre',
-            handler(html, _ctx) {
-
-                if (userSettings.allowMetaPlugin === false) return [];
-
-                // this is useful to get the latest config exported from editor
-                // whenever vite wants to transform the html
-                updateConfig();
-
-                if (!config?.license)
-                    html = insertNeedleCredits(html);
-
-                // 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;
-                }
-
-                /** @type {Array<{ tag: string, attrs: Record<string, string> }>} */
-                const tags = [];
-
-                // tags.push({"tag": "meta", attrs: { name: "viewport", content: "width=device-width, initial-scale=1" }});
-
-                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 } });
-                    }
-                    else if (isBuild) {
-                        console.warn(`Needle: meta.image is set but absolutePath is ${config.absolutePath} in userSettings. Skipping meta.image.`);
-                    }
-                }
-
-                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")
-
-                tags.push({ tag: 'meta', attrs: { name: 'needle:buildtime', content: new Date().toISOString() } });
-
-                return { html, tags }
-            },
-        }
-    }
-}
-
-
-function updateUrlMetaTag(html, url) {
-    const result = `<meta name="url" content="${url}">`;
-    html = html.replace(`<meta name="url" content="https://needle.tools">`, result);
-    html = html.replace(`<meta name="url" content="http://needle.tools">`, result);
-    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 fs from 'fs';
+
+import { tryGetNeedleEngineVersion } from '../common/version.js';
+import { loadConfig } from './config.js';
+import { getPosterPath } from './poster.js';
+
+/**
+ * @param {string} command
+ * @param {import('../types').needleMeta | null} config
+ * @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: {
+            order: 'pre',
+            handler(html, _ctx) {
+
+                if (userSettings.allowMetaPlugin === false) return [];
+
+                // this is useful to get the latest config exported from editor
+                // whenever vite wants to transform the html
+                updateConfig();
+
+                if (!config?.license)
+                    html = insertNeedleCredits(html);
+
+                // 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;
+                }
+
+                /** @type {Array<{ tag: string, attrs: Record<string, string> }>} */
+                const tags = [];
+
+                // tags.push({"tag": "meta", attrs: { name: "viewport", content: "width=device-width, initial-scale=1" }});
+
+                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 } });
+                    }
+                    else if (isBuild) {
+                        console.warn(`Needle: meta.image is set but absolutePath is ${config.absolutePath} in userSettings. Skipping meta.image.`);
+                    }
+                }
+
+                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")
+
+                tags.push({ tag: 'meta', attrs: { name: 'needle:buildtime', content: new Date().toISOString() } });
+
+                return { html, tags }
+            },
+        }
+    }
+}
+
+
+function updateUrlMetaTag(html, url) {
+    const result = `<meta name="url" content="${url}">`;
+    html = html.replace(`<meta name="url" content="https://needle.tools">`, result);
+    html = html.replace(`<meta name="url" content="http://needle.tools">`, result);
+    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/npm.js

@@ -1,8 +1,8 @@
-import { ensureNpmDirectoryExists } from '../common/npm.js';
-
-/**
- * @param {import('../types').userSettings} userSettings
- */
-export const needleNPM = (command, config, userSettings) => {
-    ensureNpmDirectoryExists();
+import { ensureNpmDirectoryExists } from '../common/npm.js';
+
+/**
+ * @param {import('../types').userSettings} userSettings
+ */
+export const needleNPM = (command, config, userSettings) => {
+    ensureNpmDirectoryExists();
 }

package/plugins/vite/peer.js

@@ -1,29 +1,29 @@
-
-const peerjsString = `/* needle: 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: {
-            order: 'pre',
-            handler(html, _ctx) {
-                return {
-                    html,
-                    tags: [
-                        {
-                            tag: 'script',
-                            children: peerjsString,
-                            injectTo: 'body-prepend',
-                        },
-                    ]
-                }
-            }
-        }
-    }
-}
+
+const peerjsString = `/* needle: 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: {
+            order: 'pre',
+            handler(html, _ctx) {
+                return {
+                    html,
+                    tags: [
+                        {
+                            tag: 'script',
+                            children: peerjsString,
+                            injectTo: 'body-prepend',
+                        },
+                    ]
+                }
+            }
+        }
+    }
+}

package/plugins/vite/poster-client.js

@@ -1,74 +1,74 @@
-
-async function generatePoster() {
-    const { screenshot2 } = 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";
-
-        // We're reading back as a blob here because that's async, and doesn't seem
-        // to stress the GPU so much on memory-constrained devices.
-        const blob = await screenshot2({context, width, height, mimeType, type: "blob"});
-        
-        // We can only send a DataURL, so we need to convert it back here.
-        const dataUrl = await new Promise((resolve, reject) => {
-            const reader = new FileReader();
-            reader.onload = function() {
-                resolve(reader.result);
-            };
-            reader.onloadend = function() {
-                resolve(null);
-            };
-            reader.readAsDataURL(blob);
-        });
-
-        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 { screenshot2 } = 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";
+
+        // We're reading back as a blob here because that's async, and doesn't seem
+        // to stress the GPU so much on memory-constrained devices.
+        const blob = await screenshot2({context, width, height, mimeType, type: "blob"});
+        
+        // We can only send a DataURL, so we need to convert it back here.
+        const dataUrl = await new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = function() {
+                resolve(reader.result);
+            };
+            reader.onloadend = function() {
+                resolve(null);
+            };
+            reader.readAsDataURL(blob);
+        });
+
+        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();
+    });
+    */
 }