retiam 1.0.0 → 1.0.2

package/bin/export.js

@@ -1,323 +1,323 @@
-#!/usr/bin/env node
-
-// tools/builder/build-embed.js
-import { build } from 'vite';
-import path from 'path';
-import fs from 'fs';
-
-const rootDir = process.cwd();
-
-const args = process.argv.slice(2);
-const isHelp = args.includes('--help') || args.includes('-h') || args.includes('help');
-if (isHelp) {
-    console.log(`
-📦 Retiam WebGPU Engine - Web Embed Bundle Exporter
-
-Usage:
-  npx retiam export [file] [outputDir] [options]
-
-Arguments:
-  [file]                    Source scene file to bundle (default: src/main.ts)
-  [outputDir]               Target distribution folder (default: outputs/embed)
-
-Options:
-  -o, --out <dir>           Target distribution folder (default: outputs/embed)
-  --help, -h                Show this help message and exit
-
-Description:
-  Compiles the scene and Retiam engine into a self-contained, standalone
-  JavaScript web component (<retiam-scene>) for embedding into web pages,
-  blogs, and documentation with zero external dependencies.
-
-Examples:
-  npx retiam export src/scenes/AStarScene.ts
-  npx retiam export src/scenes/AStarScene.ts ./outputs/embed
-  npx retiam export src/scenes/AStarScene.ts -o ./public/embeds
-`);
-    process.exit(0);
-}
-
-let targetOutDir = 'outputs/embed';
-let inputPath = null;
-
-for (let i = 0; i < args.length; i++) {
-    if (args[i] === '-o' || args[i] === '--out') {
-        targetOutDir = args[++i];
-    } else if (!args[i].startsWith('-')) {
-        if (!inputPath) {
-            inputPath = args[i];
-        } else {
-            targetOutDir = args[i];
-        }
-    }
-}
-
-inputPath = inputPath || 'src/main.ts';
-const fullInputPath = path.resolve(rootDir, inputPath);
-
-if (!fs.existsSync(fullInputPath)) {
-    console.error(`❌ Error: Scene file not found at "${inputPath}"`);
-    console.log('Run "npx retiam export --help" for more details.');
-    process.exit(1);
-}
-
-const sceneName = path.basename(inputPath, path.extname(inputPath)).toLowerCase();
-const outputFile = `${sceneName}.js`;
-
-const tempEntryPath = path.resolve(rootDir, 'src/_temp_embed_entry.ts');
-let rel = path.relative(path.dirname(tempEntryPath), fullInputPath).replace(/\\/g, '/');
-if (!rel.startsWith('.')) rel = './' + rel;
-const relativeScenePath = rel;
-
-const entryCode = `
-import { Scene } from "./engine/_core/Scene";
-import * as SceneModule from "${relativeScenePath}";
-
-export class RetiamElement extends HTMLElement {
-    private canvas;
-    public sceneInstance;
-    private resizeObserver;
-
-    async connectedCallback() {
-        if (!navigator.gpu) {
-            this.innerHTML = '<div style="color:red;padding:20px;">WebGPU not supported</div>';
-            return;
-        }
-
-        // Base styles if not specified
-        if (!this.style.display) this.style.display = "block";
-        if (!this.style.position) this.style.position = "relative";
-
-        this.canvas = document.createElement("canvas");
-        this.canvas.style.display = "block";
-        this.canvas.style.width = "100%";
-        this.canvas.style.height = "100%";
-        this.appendChild(this.canvas);
-
-        const updateCanvasSize = () => {
-            if (!this.canvas) return;
-            const rect = this.getBoundingClientRect();
-            const dpr = window.devicePixelRatio || 1;
-            const w = Math.floor((rect.width || 800) * dpr);
-            const h = Math.floor((rect.height || 450) * dpr);
-            if (w > 0 && h > 0 && (this.canvas.width !== w || this.canvas.height !== h)) {
-                this.canvas.width = w;
-                this.canvas.height = h;
-            }
-        };
-
-        updateCanvasSize();
-
-        this.resizeObserver = new ResizeObserver(() => {
-            updateCanvasSize();
-        });
-        this.resizeObserver.observe(this);
-
-        try {
-            // 1. Search exports for an actual Scene class (e.g., SubnetRouteGame)
-            let SceneClass = null;
-            for (const key of Object.keys(SceneModule)) {
-                const item = (SceneModule as any)[key];
-                if (item && item.prototype && item.prototype instanceof Scene) {
-                    SceneClass = item;
-                    break;
-                }
-            }
-
-            if (SceneClass) {
-                // Instantiate class directly with the component's canvas
-                this.sceneInstance = new (SceneClass as any)();
-                await this.sceneInstance.start(this.canvas);
-            } else {
-                // 2. Fallback: If no Scene class was exported, pass canvas to default export
-                const defaultFn = (SceneModule as any).default;
-                if (typeof defaultFn === 'function') {
-                    const origGetElementById = document.getElementById.bind(document);
-                    const compCanvas = this.canvas;
-                    const origStart = Scene.prototype.start;
-                    const self = this;
-
-                    // Intercept Scene.prototype.start to capture the instantiated Scene
-                    Scene.prototype.start = async function(...args: any[]) {
-                        self.sceneInstance = this;
-                        return await origStart.apply(this, args);
-                    };
-
-                    document.getElementById = function(id) {
-                        if (id === 'canvas') return compCanvas;
-                        return origGetElementById(id);
-                    };
-
-                    try {
-                        await defaultFn(this.canvas);
-                    } finally {
-                        document.getElementById = origGetElementById;
-                        Scene.prototype.start = origStart;
-                    }
-                }
-            }
-
-            if (this.sceneInstance) {
-                (window as any).retiamScene = this.sceneInstance;
-                (window as any).retiamElement = this;
-                this.dispatchEvent(new CustomEvent("retiam-ready", {
-                    detail: { scene: this.sceneInstance, element: this },
-                    bubbles: true
-                }));
-                this.dispatchEvent(new CustomEvent("retiam-scene-ready", {
-                    detail: { scene: this.sceneInstance, element: this },
-                    bubbles: true
-                }));
-            }
-        } catch (err) {
-            console.error("[Retiam Embed] Scene execution error:", err);
-        }
-    }
-
-    disconnectedCallback() {
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-            this.resizeObserver = null;
-        }
-        if (this.sceneInstance) {
-            this.sceneInstance.destroy();
-            this.sceneInstance = null;
-        }
-        if ((window as any).retiamScene === this.sceneInstance) {
-            (window as any).retiamScene = null;
-        }
-    }
-}
-
-export const RetiamSceneElement = RetiamElement;
-
-try {
-    if (!customElements.get("retiam")) {
-        customElements.define("retiam", RetiamElement);
-    }
-} catch (e) {}
-
-if (!customElements.get("retiam-scene")) {
-    customElements.define("retiam-scene", RetiamElement);
-}
-
-function autoMountRetiamTags() {
-    const nodes = document.querySelectorAll("retiam, Retiam");
-    nodes.forEach(node => {
-        if (!(node as any).__retiamMounted) {
-            (node as any).__retiamMounted = true;
-            const elem = document.createElement("retiam-scene");
-            for (let i = 0; i < node.attributes.length; i++) {
-                const attr = node.attributes[i];
-                elem.setAttribute(attr.name, attr.value);
-            }
-            node.replaceWith(elem);
-        }
-    });
-}
-
-if (typeof document !== "undefined") {
-    const styleId = "retiam-embed-default-style";
-    if (!document.getElementById(styleId)) {
-        const style = document.createElement("style");
-        style.id = styleId;
-        style.textContent = "retiam, retiam-scene { display: block; position: relative; }";
-        document.head?.appendChild(style);
-    }
-
-    if (document.readyState === "loading") {
-        document.addEventListener("DOMContentLoaded", autoMountRetiamTags);
-    } else {
-        autoMountRetiamTags();
-    }
-
-    try {
-        const obs = new MutationObserver(() => autoMountRetiamTags());
-        obs.observe(document.documentElement || document.body, { childList: true, subtree: true });
-    } catch (e) {}
-}
-`;
-
-fs.writeFileSync(tempEntryPath, entryCode);
-
-function minifyWGSL(code) {
-    return code
-        .replace(/\/\*[\s\S]*?\*\//g, '')  // Remove block comments
-        .replace(/\/\/.*/g, '')             // Remove line comments
-        .split('\n')                        // Process line by line
-        .map(line => line.trim())           // Trim whitespace per line
-        .filter(line => line.length > 0)    // Remove empty lines
-        .join('\n');                        // Preserve line breaks for WebGPU debugging
-}
-
-const wgslPlugin = () => ({
-    name: 'wgsl-loader',
-    transform(code, id) {
-        if (id.endsWith('.wgsl')) {
-            const minified = minifyWGSL(code);
-            return { code: `export default ${JSON.stringify(minified)};`, map: null };
-        }
-    }
-});
-
-const tzaPlugin = () => ({
-    name: 'tza-loader',
-    enforce: 'pre',
-    load(id) {
-        if (/\.(tza|ttf|png)$/i.test(id) || id.endsWith('.json?url')) {
-            const filePath = id.replace(/\?url$/, '');
-            const source = fs.readFileSync(filePath);
-            const referenceId = this.emitFile({
-                type: 'asset',
-                fileName: `assets/${path.basename(filePath)}`,
-                source: source
-            });
-            return `export default import.meta.ROLLUP_FILE_URL_${referenceId};`;
-        }
-        return null;
-    }
-});
-
-console.log(`🚀 Building standalone embed for: ${inputPath} -> ${targetOutDir}/${outputFile}`);
-
-try {
-    await build({
-        configFile: false,
-        publicDir: false,
-        assetsInclude: ['**/*.tza', '**/*.ttf', '**/*.png'],
-        plugins: [tzaPlugin(), wgslPlugin()],
-        resolve: {
-            alias: [
-                { find: '../../index', replacement: path.resolve(rootDir, 'src/engine/_core/Constants.ts') },
-                { find: '../index', replacement: path.resolve(rootDir, 'src/engine/_core/Constants.ts') }
-            ]
-        },
-        build: {
-            outDir: targetOutDir,
-            emptyOutDir: false,
-            lib: {
-                entry: tempEntryPath,
-                name: 'RetiamEmbed',
-                fileName: () => outputFile,
-                formats: ['iife']
-            },
-            rollupOptions: {
-                output: { inlineDynamicImports: true }
-            },
-            minify: 'esbuild'
-        },
-        esbuild: {
-            drop: ['debugger'],
-            legalComments: 'none',
-            treeShaking: true
-        }
-    });
-
-    console.log(`✅ Build successful! Output: ${targetOutDir}/${outputFile}`);
-} catch (e) {
-    console.error("❌ Build failed:", e);
-} finally {
-    if (fs.existsSync(tempEntryPath)) {
-        fs.unlinkSync(tempEntryPath);
-    }
+#!/usr/bin/env node
+
+// tools/builder/build-embed.js
+import { build } from 'vite';
+import path from 'path';
+import fs from 'fs';
+
+const rootDir = process.cwd();
+
+const args = process.argv.slice(2);
+const isHelp = args.includes('--help') || args.includes('-h') || args.includes('help');
+if (isHelp) {
+    console.log(`
+📦 Retiam WebGPU Engine - Web Embed Bundle Exporter
+
+Usage:
+  npx retiam export [file] [outputDir] [options]
+
+Arguments:
+  [file]                    Source scene file to bundle (default: src/main.ts)
+  [outputDir]               Target distribution folder (default: outputs/embed)
+
+Options:
+  -o, --out <dir>           Target distribution folder (default: outputs/embed)
+  --help, -h                Show this help message and exit
+
+Description:
+  Compiles the scene and Retiam engine into a self-contained, standalone
+  JavaScript web component (<retiam-scene>) for embedding into web pages,
+  blogs, and documentation with zero external dependencies.
+
+Examples:
+  npx retiam export src/scenes/AStarScene.ts
+  npx retiam export src/scenes/AStarScene.ts ./outputs/embed
+  npx retiam export src/scenes/AStarScene.ts -o ./public/embeds
+`);
+    process.exit(0);
+}
+
+let targetOutDir = 'outputs/embed';
+let inputPath = null;
+
+for (let i = 0; i < args.length; i++) {
+    if (args[i] === '-o' || args[i] === '--out') {
+        targetOutDir = args[++i];
+    } else if (!args[i].startsWith('-')) {
+        if (!inputPath) {
+            inputPath = args[i];
+        } else {
+            targetOutDir = args[i];
+        }
+    }
+}
+
+inputPath = inputPath || 'src/main.ts';
+const fullInputPath = path.resolve(rootDir, inputPath);
+
+if (!fs.existsSync(fullInputPath)) {
+    console.error(`❌ Error: Scene file not found at "${inputPath}"`);
+    console.log('Run "npx retiam export --help" for more details.');
+    process.exit(1);
+}
+
+const sceneName = path.basename(inputPath, path.extname(inputPath)).toLowerCase();
+const outputFile = `${sceneName}.js`;
+
+const tempEntryPath = path.resolve(rootDir, 'src/_temp_embed_entry.ts');
+let rel = path.relative(path.dirname(tempEntryPath), fullInputPath).replace(/\\/g, '/');
+if (!rel.startsWith('.')) rel = './' + rel;
+const relativeScenePath = rel;
+
+const entryCode = `
+import { Scene } from "./engine/_core/Scene";
+import * as SceneModule from "${relativeScenePath}";
+
+export class RetiamElement extends HTMLElement {
+    private canvas;
+    public sceneInstance;
+    private resizeObserver;
+
+    async connectedCallback() {
+        if (!navigator.gpu) {
+            this.innerHTML = '<div style="color:red;padding:20px;">WebGPU not supported</div>';
+            return;
+        }
+
+        // Base styles if not specified
+        if (!this.style.display) this.style.display = "block";
+        if (!this.style.position) this.style.position = "relative";
+
+        this.canvas = document.createElement("canvas");
+        this.canvas.style.display = "block";
+        this.canvas.style.width = "100%";
+        this.canvas.style.height = "100%";
+        this.appendChild(this.canvas);
+
+        const updateCanvasSize = () => {
+            if (!this.canvas) return;
+            const rect = this.getBoundingClientRect();
+            const dpr = window.devicePixelRatio || 1;
+            const w = Math.floor((rect.width || 800) * dpr);
+            const h = Math.floor((rect.height || 450) * dpr);
+            if (w > 0 && h > 0 && (this.canvas.width !== w || this.canvas.height !== h)) {
+                this.canvas.width = w;
+                this.canvas.height = h;
+            }
+        };
+
+        updateCanvasSize();
+
+        this.resizeObserver = new ResizeObserver(() => {
+            updateCanvasSize();
+        });
+        this.resizeObserver.observe(this);
+
+        try {
+            // 1. Search exports for an actual Scene class (e.g., SubnetRouteGame)
+            let SceneClass = null;
+            for (const key of Object.keys(SceneModule)) {
+                const item = (SceneModule as any)[key];
+                if (item && item.prototype && item.prototype instanceof Scene) {
+                    SceneClass = item;
+                    break;
+                }
+            }
+
+            if (SceneClass) {
+                // Instantiate class directly with the component's canvas
+                this.sceneInstance = new (SceneClass as any)();
+                await this.sceneInstance.start(this.canvas);
+            } else {
+                // 2. Fallback: If no Scene class was exported, pass canvas to default export
+                const defaultFn = (SceneModule as any).default;
+                if (typeof defaultFn === 'function') {
+                    const origGetElementById = document.getElementById.bind(document);
+                    const compCanvas = this.canvas;
+                    const origStart = Scene.prototype.start;
+                    const self = this;
+
+                    // Intercept Scene.prototype.start to capture the instantiated Scene
+                    Scene.prototype.start = async function(...args: any[]) {
+                        self.sceneInstance = this;
+                        return await origStart.apply(this, args);
+                    };
+
+                    document.getElementById = function(id) {
+                        if (id === 'canvas') return compCanvas;
+                        return origGetElementById(id);
+                    };
+
+                    try {
+                        await defaultFn(this.canvas);
+                    } finally {
+                        document.getElementById = origGetElementById;
+                        Scene.prototype.start = origStart;
+                    }
+                }
+            }
+
+            if (this.sceneInstance) {
+                (window as any).retiamScene = this.sceneInstance;
+                (window as any).retiamElement = this;
+                this.dispatchEvent(new CustomEvent("retiam-ready", {
+                    detail: { scene: this.sceneInstance, element: this },
+                    bubbles: true
+                }));
+                this.dispatchEvent(new CustomEvent("retiam-scene-ready", {
+                    detail: { scene: this.sceneInstance, element: this },
+                    bubbles: true
+                }));
+            }
+        } catch (err) {
+            console.error("[Retiam Embed] Scene execution error:", err);
+        }
+    }
+
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+        if (this.sceneInstance) {
+            this.sceneInstance.destroy();
+            this.sceneInstance = null;
+        }
+        if ((window as any).retiamScene === this.sceneInstance) {
+            (window as any).retiamScene = null;
+        }
+    }
+}
+
+export const RetiamSceneElement = RetiamElement;
+
+try {
+    if (!customElements.get("retiam")) {
+        customElements.define("retiam", RetiamElement);
+    }
+} catch (e) {}
+
+if (!customElements.get("retiam-scene")) {
+    customElements.define("retiam-scene", RetiamElement);
+}
+
+function autoMountRetiamTags() {
+    const nodes = document.querySelectorAll("retiam, Retiam");
+    nodes.forEach(node => {
+        if (!(node as any).__retiamMounted) {
+            (node as any).__retiamMounted = true;
+            const elem = document.createElement("retiam-scene");
+            for (let i = 0; i < node.attributes.length; i++) {
+                const attr = node.attributes[i];
+                elem.setAttribute(attr.name, attr.value);
+            }
+            node.replaceWith(elem);
+        }
+    });
+}
+
+if (typeof document !== "undefined") {
+    const styleId = "retiam-embed-default-style";
+    if (!document.getElementById(styleId)) {
+        const style = document.createElement("style");
+        style.id = styleId;
+        style.textContent = "retiam, retiam-scene { display: block; position: relative; }";
+        document.head?.appendChild(style);
+    }
+
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", autoMountRetiamTags);
+    } else {
+        autoMountRetiamTags();
+    }
+
+    try {
+        const obs = new MutationObserver(() => autoMountRetiamTags());
+        obs.observe(document.documentElement || document.body, { childList: true, subtree: true });
+    } catch (e) {}
+}
+`;
+
+fs.writeFileSync(tempEntryPath, entryCode);
+
+function minifyWGSL(code) {
+    return code
+        .replace(/\/\*[\s\S]*?\*\//g, '')  // Remove block comments
+        .replace(/\/\/.*/g, '')             // Remove line comments
+        .split('\n')                        // Process line by line
+        .map(line => line.trim())           // Trim whitespace per line
+        .filter(line => line.length > 0)    // Remove empty lines
+        .join('\n');                        // Preserve line breaks for WebGPU debugging
+}
+
+const wgslPlugin = () => ({
+    name: 'wgsl-loader',
+    transform(code, id) {
+        if (id.endsWith('.wgsl')) {
+            const minified = minifyWGSL(code);
+            return { code: `export default ${JSON.stringify(minified)};`, map: null };
+        }
+    }
+});
+
+const tzaPlugin = () => ({
+    name: 'tza-loader',
+    enforce: 'pre',
+    load(id) {
+        if (/\.(tza|ttf|png)$/i.test(id) || id.endsWith('.json?url')) {
+            const filePath = id.replace(/\?url$/, '');
+            const source = fs.readFileSync(filePath);
+            const referenceId = this.emitFile({
+                type: 'asset',
+                fileName: `assets/${path.basename(filePath)}`,
+                source: source
+            });
+            return `export default import.meta.ROLLUP_FILE_URL_${referenceId};`;
+        }
+        return null;
+    }
+});
+
+console.log(`🚀 Building standalone embed for: ${inputPath} -> ${targetOutDir}/${outputFile}`);
+
+try {
+    await build({
+        configFile: false,
+        publicDir: false,
+        assetsInclude: ['**/*.tza', '**/*.ttf', '**/*.png'],
+        plugins: [tzaPlugin(), wgslPlugin()],
+        resolve: {
+            alias: [
+                { find: '../../index', replacement: path.resolve(rootDir, 'src/engine/_core/Constants.ts') },
+                { find: '../index', replacement: path.resolve(rootDir, 'src/engine/_core/Constants.ts') }
+            ]
+        },
+        build: {
+            outDir: targetOutDir,
+            emptyOutDir: false,
+            lib: {
+                entry: tempEntryPath,
+                name: 'RetiamEmbed',
+                fileName: () => outputFile,
+                formats: ['iife']
+            },
+            rollupOptions: {
+                output: { inlineDynamicImports: true }
+            },
+            minify: 'esbuild'
+        },
+        esbuild: {
+            drop: ['debugger'],
+            legalComments: 'none',
+            treeShaking: true
+        }
+    });
+
+    console.log(`✅ Build successful! Output: ${targetOutDir}/${outputFile}`);
+} catch (e) {
+    console.error("❌ Build failed:", e);
+} finally {
+    if (fs.existsSync(tempEntryPath)) {
+        fs.unlinkSync(tempEntryPath);
+    }
 }