@playcraft/build 0.0.9 → 0.0.10

package/dist/vite/plugin-template-minifier.js

@@ -0,0 +1,392 @@
+/**
+ * Vite 插件：模板字符串压缩
+ *
+ * 在构建完成后（closeBundle 阶段）对输出的 HTML 文件进行后处理，
+ * 压缩 JS 代码中的多行模板字符串，减小包体积。
+ *
+ * 这个插件必须在 vite-plugin-singlefile 之后运行，
+ * 因为它直接处理最终输出的文件，而不是通过 Vite 的 HTML 处理管道。
+ */
+import fs from 'fs/promises';
+import path from 'path';
+/**
+ * 压缩 JS 代码中的模板字符串
+ *
+ * 处理策略：
+ * 1. 找到所有多行模板字符串（包含 \n 的反引号字符串）
+ * 2. 对于不包含 ${...} 的简单模板字符串，将换行和多余空白压缩
+ * 3. 对于包含 ${...} 的复杂模板字符串，保守处理
+ */
+function minifyTemplateStrings(code) {
+    const result = [];
+    let i = 0;
+    let minifiedCount = 0;
+    let totalSaved = 0;
+    while (i < code.length) {
+        // 跳过字符串字面量（避免误处理）
+        if (code[i] === '"' || code[i] === "'") {
+            const quote = code[i];
+            result.push(code[i]);
+            i++;
+            while (i < code.length && code[i] !== quote) {
+                if (code[i] === '\\' && i + 1 < code.length) {
+                    result.push(code[i], code[i + 1]);
+                    i += 2;
+                }
+                else {
+                    result.push(code[i]);
+                    i++;
+                }
+            }
+            if (i < code.length) {
+                result.push(code[i]);
+                i++;
+            }
+            continue;
+        }
+        // 处理模板字符串
+        if (code[i] === '`') {
+            const startPos = i;
+            i++; // 跳过开始的反引号
+            // 收集模板字符串内容
+            let content = '';
+            let nestingLevel = 0; // 跟踪 ${...} 嵌套
+            while (i < code.length) {
+                if (code[i] === '\\' && i + 1 < code.length) {
+                    // 转义字符
+                    content += code[i] + code[i + 1];
+                    i += 2;
+                }
+                else if (code[i] === '$' && code[i + 1] === '{') {
+                    // 模板表达式开始
+                    content += '${';
+                    i += 2;
+                    nestingLevel++;
+                    // 找到匹配的 }
+                    let braceCount = 1;
+                    while (i < code.length && braceCount > 0) {
+                        if (code[i] === '{') {
+                            braceCount++;
+                            content += code[i];
+                        }
+                        else if (code[i] === '}') {
+                            braceCount--;
+                            content += code[i];
+                        }
+                        else if (code[i] === '`') {
+                            // 嵌套的模板字符串，递归处理
+                            content += code[i];
+                            i++;
+                            while (i < code.length && code[i] !== '`') {
+                                if (code[i] === '\\' && i + 1 < code.length) {
+                                    content += code[i] + code[i + 1];
+                                    i += 2;
+                                }
+                                else {
+                                    content += code[i];
+                                    i++;
+                                }
+                            }
+                            if (i < code.length) {
+                                content += code[i];
+                            }
+                        }
+                        else if (code[i] === '"' || code[i] === "'") {
+                            // 嵌套的字符串
+                            const quote = code[i];
+                            content += code[i];
+                            i++;
+                            while (i < code.length && code[i] !== quote) {
+                                if (code[i] === '\\' && i + 1 < code.length) {
+                                    content += code[i] + code[i + 1];
+                                    i += 2;
+                                }
+                                else {
+                                    content += code[i];
+                                    i++;
+                                }
+                            }
+                            if (i < code.length) {
+                                content += code[i];
+                            }
+                        }
+                        else {
+                            content += code[i];
+                        }
+                        i++;
+                    }
+                    nestingLevel--;
+                }
+                else if (code[i] === '`') {
+                    // 找到结束的反引号
+                    break;
+                }
+                else {
+                    content += code[i];
+                    i++;
+                }
+            }
+            const originalLength = content.length;
+            // 决定是否压缩这个模板字符串
+            if (shouldMinifyTemplate(content)) {
+                const minified = minifyTemplateContent(content);
+                result.push('`' + minified + '`');
+                const saved = originalLength - minified.length;
+                if (saved > 0) {
+                    minifiedCount++;
+                    totalSaved += saved;
+                }
+            }
+            else {
+                result.push('`' + content + '`');
+            }
+            i++; // 跳过结束的反引号
+        }
+        else {
+            result.push(code[i]);
+            i++;
+        }
+    }
+    if (minifiedCount > 0) {
+        console.log(`[TemplateMinifier] 压缩了 ${minifiedCount} 个模板字符串，节省约 ${(totalSaved / 1024).toFixed(2)} KB`);
+    }
+    return result.join('');
+}
+/**
+ * 判断是否应该压缩这个模板字符串
+ */
+function shouldMinifyTemplate(content) {
+    // 必须包含换行才需要压缩
+    if (!content.includes('\n')) {
+        return false;
+    }
+    // 长度太短不值得压缩
+    if (content.length < 50) {
+        return false;
+    }
+    // 着色器代码也需要压缩！不要跳过
+    return true;
+}
+/**
+ * 判断是否是着色器代码（GLSL 或 WGSL）
+ */
+function isShaderCode(content) {
+    // GLSL 关键特征
+    const glslKeywords = [
+        /\buniform\s+\w+/,
+        /\bvarying\s+\w+/,
+        /\battribute\s+\w+/,
+        /\bvoid\s+main\s*\(/,
+        /\bgl_Position\b/,
+        /\bgl_FragColor\b/,
+        /\bgl_FragCoord\b/,
+        /\bprecision\s+(highp|mediump|lowp)/,
+        /\b(vec2|vec3|vec4|mat3|mat4|sampler2D)\b/,
+        /\btexture2D\s*\(/,
+        /\btexelFetch\s*\(/,
+    ];
+    // WGSL 关键特征
+    const wgslKeywords = [
+        /@(vertex|fragment|compute)\b/,
+        /@(group|binding)\s*\(/,
+        /@builtin\s*\(/,
+        /@workgroup_size\s*\(/,
+        /\bfn\s+\w+\s*\(/,
+        /\bvar<\w+>/,
+        /\b(vec2f|vec3f|vec4f|vec2i|vec3i|vec4i|vec2u|vec3u|vec4u)\b/,
+        /\bstruct\s+\w+\s*\{/,
+        /\btextureLoad\s*\(/,
+        /\btextureSample\s*\(/,
+        /\bworkgroupBarrier\s*\(/,
+        /\barray<\w+/,
+    ];
+    const allKeywords = [...glslKeywords, ...wgslKeywords];
+    let matchCount = 0;
+    for (const keyword of allKeywords) {
+        if (keyword.test(content)) {
+            matchCount++;
+            if (matchCount >= 2) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+/**
+ * 压缩模板字符串内容
+ */
+function minifyTemplateContent(content) {
+    // 检查是否是着色器代码
+    if (isShaderCode(content)) {
+        return minifyShaderContent(content);
+    }
+    // 检查是否包含 ${...} 模板表达式
+    const hasTemplateExpr = /\$\{/.test(content);
+    if (hasTemplateExpr) {
+        // 包含模板表达式，保守处理
+        // 只压缩纯空白行和行首缩进，保留换行结构
+        return content
+            // 移除行首缩进（保留换行）
+            .replace(/\n[ \t]+/g, '\n')
+            // 移除多个连续空行
+            .replace(/\n{3,}/g, '\n\n')
+            // 移除开头的空白
+            .replace(/^[ \t\n]+/, '')
+            // 移除结尾的空白
+            .replace(/[ \t\n]+$/, '');
+    }
+    // 不包含模板表达式，可以更激进地压缩
+    // 但要注意保留字符串内容的语义
+    // 检查是否像是 JSON 或配置数据
+    const trimmed = content.trim();
+    if ((trimmed.startsWith('{') && trimmed.endsWith('}')) ||
+        (trimmed.startsWith('[') && trimmed.endsWith(']'))) {
+        // 可能是 JSON，尝试压缩
+        try {
+            // 尝试解析为 JSON，然后重新序列化为紧凑格式
+            const parsed = JSON.parse(trimmed);
+            return JSON.stringify(parsed);
+        }
+        catch {
+            // 不是有效 JSON，按普通文本处理
+        }
+    }
+    // 普通多行文本，压缩空白但保留必要的空格
+    return content
+        // 将换行和周围空白替换为单个空格
+        .replace(/\s*\n\s*/g, ' ')
+        // 合并多个空格
+        .replace(/  +/g, ' ')
+        .trim();
+}
+/**
+ * 压缩着色器代码（GLSL/WGSL）
+ *
+ * 着色器代码需要特殊处理：
+ * 1. 预处理器指令（#define, #ifdef 等）需要独占一行
+ * 2. 可以移除多余的空白和缩进
+ * 3. 保留关键字之间的空格
+ */
+function minifyShaderContent(code) {
+    const lines = code.split('\n');
+    const processedLines = [];
+    for (let line of lines) {
+        // 移除行首尾空白
+        line = line.trim();
+        // 跳过空行
+        if (!line)
+            continue;
+        // 跳过单行注释
+        if (line.startsWith('//'))
+            continue;
+        // 预处理器指令需要独占一行（#define, #ifdef, #endif, #include 等）
+        if (line.startsWith('#')) {
+            processedLines.push('\n' + line);
+        }
+        else {
+            // 压缩行内多余空白，但保守处理
+            line = line
+                // 将多个空白替换为单个空格
+                .replace(/\s+/g, ' ')
+                // 移除分号后的空格（但不移除分号）
+                .replace(/;\s+/g, ';')
+                // 移除逗号后多余空格（保留一个）
+                .replace(/,\s+/g, ', ')
+                // 移除括号内侧的空格
+                .replace(/\(\s+/g, '(')
+                .replace(/\s+\)/g, ')')
+                // 移除花括号内侧的空格
+                .replace(/\{\s+/g, '{')
+                .replace(/\s+\}/g, '}')
+                // 移除方括号内侧的空格
+                .replace(/\[\s+/g, '[')
+                .replace(/\s+\]/g, ']')
+                // 移除冒号周围的空格（WGSL 类型声明）
+                .replace(/\s*:\s*/g, ':')
+                // 移除箭头周围的空格（WGSL 返回类型）
+                .replace(/\s*->\s*/g, '->')
+                .trim();
+            if (line) {
+                processedLines.push(line);
+            }
+        }
+    }
+    // 合并非预处理器行，预处理器指令保留换行
+    let result = '';
+    for (const line of processedLines) {
+        if (line.startsWith('\n')) {
+            // 预处理器指令，保留换行
+            result += line;
+        }
+        else {
+            // 普通代码，用换行连接（保守做法，避免语法错误）
+            if (result && !result.endsWith('\n')) {
+                result += '\n';
+            }
+            result += line;
+        }
+    }
+    return result.trim();
+}
+/**
+ * 创建模板字符串压缩插件
+ */
+export function viteTemplateMinifierPlugin(options) {
+    const { outputDir, enabled = true } = options;
+    return {
+        name: 'vite-plugin-template-minifier',
+        enforce: 'post', // 在其他插件之后执行
+        async closeBundle() {
+            if (!enabled) {
+                return;
+            }
+            // 查找输出目录中的 HTML 文件
+            const htmlPath = path.join(outputDir, 'index.html');
+            try {
+                await fs.access(htmlPath);
+            }
+            catch {
+                // HTML 文件不存在，跳过
+                return;
+            }
+            console.log('[TemplateMinifier] 开始压缩模板字符串...');
+            try {
+                let html = await fs.readFile(htmlPath, 'utf-8');
+                const originalSize = html.length;
+                // 压缩 HTML 中的 JS 代码里的模板字符串
+                // 找到所有 <script> 标签并处理其内容
+                html = html.replace(/<script([^>]*)>([\s\S]*?)<\/script>/gi, (match, attrs, content) => {
+                    // 跳过外部脚本
+                    if (/\bsrc\s*=/.test(attrs)) {
+                        return match;
+                    }
+                    // 跳过非 JS 脚本（如 JSON、importmap）
+                    const typeMatch = attrs.match(/\btype\s*=\s*["']([^"']+)["']/i);
+                    if (typeMatch) {
+                        const type = typeMatch[1].toLowerCase();
+                        if (type === 'application/json' ||
+                            type === 'importmap' ||
+                            type === 'application/ld+json') {
+                            return match;
+                        }
+                    }
+                    // 压缩 JS 中的模板字符串
+                    const minified = minifyTemplateStrings(content);
+                    return `<script${attrs}>${minified}</script>`;
+                });
+                const newSize = html.length;
+                const saved = originalSize - newSize;
+                if (saved > 0) {
+                    await fs.writeFile(htmlPath, html, 'utf-8');
+                    console.log(`[TemplateMinifier] 完成！节省 ${(saved / 1024).toFixed(2)} KB (${((saved / originalSize) * 100).toFixed(2)}%)`);
+                }
+                else {
+                    console.log('[TemplateMinifier] 没有可压缩的内容');
+                }
+            }
+            catch (error) {
+                console.error('[TemplateMinifier] 压缩失败:', error);
+            }
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playcraft/build",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",
@@ -27,27 +27,27 @@
     "release": "node scripts/release.js"
   },
   "dependencies": {
-    "@gltf-transform/core": "^4.0.0",
-    "@gltf-transform/extensions": "^4.0.0",
-    "@gltf-transform/functions": "^4.0.0",
-    "@vheemstra/vite-plugin-imagemin": "^2.0.0",
+    "@gltf-transform/core": "^4.3.0",
+    "@gltf-transform/extensions": "^4.3.0",
+    "@gltf-transform/functions": "^4.3.0",
+    "@vheemstra/vite-plugin-imagemin": "^2.2.1",
     "archiver": "^7.0.1",
     "draco3dgltf": "^1.5.7",
     "imagemin-mozjpeg": "^10.0.0",
     "imagemin-pngquant": "^10.0.0",
     "imagemin-webp": "^8.0.0",
-    "lightningcss": "^1.27.0",
+    "lightningcss": "^1.31.1",
     "mime-types": "^2.1.35",
     "rollup-plugin-visualizer": "^6.0.5",
-    "sharp": "^0.33.0",
-    "terser": "^5.30.0",
-    "vite": "^6.0.0",
-    "vite-plugin-singlefile": "^2.0.0"
+    "sharp": "^0.33.5",
+    "terser": "^5.46.0",
+    "vite": "^6.4.1",
+    "vite-plugin-singlefile": "^2.3.0"
   },
   "devDependencies": {
     "@types/archiver": "^6.0.4",
     "@types/mime-types": "^2.1.4",
-    "@types/node": "^22.10.5",
-    "typescript": "^5.7.2"
+    "@types/node": "^22.19.8",
+    "typescript": "^5.9.3"
   }
 }

package/templates/patches/one-page-mraid-resize-canvas.js

@@ -9,10 +9,13 @@
     var windowWidth = window.innerWidth;
     var windowHeight = window.innerHeight;
 
-    if (window.mraid) {
+    // Get MRAID max size if available
+    if (window.mraid && typeof mraid.getMaxSize === 'function') {
       var mraidSize = mraid.getMaxSize();
-      windowWidth = mraidSize.width;
-      windowHeight = mraidSize.height;
+      if (mraidSize && mraidSize.width && mraidSize.height) {
+        windowWidth = mraidSize.width;
+        windowHeight = mraidSize.height;
+      }
     }
 
     if (this._fillMode === pc.FILLMODE_KEEP_ASPECT) {
@@ -29,8 +32,19 @@
     } else if (this._fillMode === pc.FILLMODE_FILL_WINDOW) {
       width = windowWidth;
       height = windowHeight;
+    } else {
+      // FILLMODE_NONE: For MRAID, use KEEP_ASPECT behavior to ensure correct sizing
+      var r = this.graphicsDevice.canvas.width / this.graphicsDevice.canvas.height;
+      var winR = windowWidth / windowHeight;
+
+      if (r > winR) {
+        width = windowWidth;
+        height = width / r;
+      } else {
+        height = windowHeight;
+        width = height * r;
+      }
     }
-    // OTHERWISE: FILLMODE_NONE use width and height that are provided
 
     this.graphicsDevice.canvas.style.width = width + 'px';
     this.graphicsDevice.canvas.style.height = height + 'px';

package/dist/templates/__loading__.js

@@ -1,100 +0,0 @@
-pc.script.createLoadingScreen((app) => {
-    const createCss = () => {
-        const css = `
-            body {
-                background-color: #283538;
-            }
-
-            #application-splash-wrapper {
-                position: absolute;
-                top: 0;
-                left: 0;
-                height: 100%;
-                width: 100%;
-                background-color: #283538;
-            }
-
-            #application-splash {
-                position: absolute;
-                top: calc(50% - 28px);
-                width: 264px;
-                left: calc(50% - 132px);
-            }
-
-            #application-splash img {
-                width: 100%;
-            }
-
-            #progress-bar-container {
-                margin: 20px auto 0 auto;
-                height: 2px;
-                width: 100%;
-                background-color: #1d292c;
-            }
-
-            #progress-bar {
-                width: 0%;
-                height: 100%;
-                background-color: #f60;
-            }
-
-            @media (max-width: 480px) {
-                #application-splash {
-                    width: 170px;
-                    left: calc(50% - 85px);
-                }
-            }
-        `;
-
-        const style = document.createElement('style');
-        style.textContent = css;
-        document.head.appendChild(style);
-    };
-
-    const showSplash = () => {
-        const wrapper = document.createElement('div');
-        wrapper.id = 'application-splash-wrapper';
-        document.body.appendChild(wrapper);
-
-        const splash = document.createElement('div');
-        splash.id = 'application-splash';
-        wrapper.appendChild(splash);
-        splash.style.display = 'none';
-
-        const logo = document.createElement('img');
-        logo.src = `${ASSET_PREFIX}logo.png`;
-        splash.appendChild(logo);
-        logo.onload = () => {
-            splash.style.display = 'block';
-        };
-
-        const container = document.createElement('div');
-        container.id = 'progress-bar-container';
-        splash.appendChild(container);
-
-        const bar = document.createElement('div');
-        bar.id = 'progress-bar';
-        container.appendChild(bar);
-    };
-
-    const setProgress = (value) => {
-        const bar = document.getElementById('progress-bar');
-        if (bar) {
-            value = Math.min(1, Math.max(0, value));
-            bar.style.width = `${value * 100}%`;
-        }
-    };
-
-    const hideSplash = () => {
-        document.getElementById('application-splash-wrapper').remove();
-    };
-
-    createCss();
-    showSplash();
-
-    app.on('preload:end', () => {
-        app.off('preload:progress');
-    });
-    app.on('preload:progress', setProgress);
-    app.on('start', hideSplash);
-});

package/dist/templates/__modules__.js

@@ -1,47 +0,0 @@
-var loadModules = function (modules, urlPrefix, doneCallback) { // eslint-disable-line no-unused-vars
-
-    if (typeof modules === "undefined" || modules.length === 0) {
-        // caller may depend on callback behaviour being async
-        setTimeout(doneCallback);
-    } else {
-        let remaining = modules.length;
-        const moduleLoaded = () => {
-            if (--remaining === 0) {
-                doneCallback();
-            }
-        };
-
-        modules.forEach(function (m) {
-            pc.WasmModule.setConfig(m.moduleName, {
-                glueUrl: urlPrefix + m.glueUrl,
-                wasmUrl: urlPrefix + m.wasmUrl,
-                fallbackUrl: urlPrefix + m.fallbackUrl
-            });
-
-            if (!m.hasOwnProperty('preload') || m.preload) {
-                if (m.moduleName === 'BASIS') {
-                    // preload basis transcoder
-                    pc.basisInitialize();
-                    moduleLoaded();
-                } else if (m.moduleName === 'DracoDecoderModule') {
-                    // preload draco decoder
-                    if (pc.dracoInitialize) {
-                        // 1.63 onwards
-                        pc.dracoInitialize();
-                        moduleLoaded();
-                    } else {
-                        // 1.62 and earlier
-                        pc.WasmModule.getInstance(m.moduleName, () => { moduleLoaded(); });
-                    }
-                } else {
-                    // load remaining modules in global scope
-                    pc.WasmModule.getInstance(m.moduleName, () => { moduleLoaded(); });
-                }
-            } else {
-                moduleLoaded();
-            }
-        });
-    }
-};
-
-window.loadModules = loadModules;

package/dist/templates/__settings__.template.js

@@ -1,20 +0,0 @@
-window.ASSET_PREFIX = "";
-window.SCRIPT_PREFIX = "";
-window.SCENE_PATH = "{{SCENE_PATH}}";
-window.CONTEXT_OPTIONS = {
-    'antialias': {{ANTIALIAS}},
-    'alpha': false,
-    'preserveDrawingBuffer': {{PRESERVE_DRAWING_BUFFER}},
-    'deviceTypes': [`webgl2`, `webgl1`],
-    'powerPreference': "{{POWER_PREFERENCE}}"
-};
-window.SCRIPTS = {{SCRIPTS}};
-window.CONFIG_FILENAME = "config.json";
-window.INPUT_SETTINGS = {
-    useKeyboard: {{USE_KEYBOARD}},
-    useMouse: {{USE_MOUSE}},
-    useGamepads: {{USE_GAMEPAD}},
-    useTouch: {{USE_TOUCH}}
-};
-pc.script.legacy = {{USE_LEGACY_SCRIPTS}};
-window.PRELOAD_MODULES = {{PRELOAD_MODULES}};