feat(assets): compress the atlas

modules/asset-generator.ts

@@ -2,6 +2,7 @@ import { defineNuxtModule, useLogger } from "@nuxt/kit";
 import { readdir, readFile, writeFile } from "fs/promises";
 import { join, relative, parse } from "path";
 import { existsSync, watch } from "fs";
+import { execSync } from "child_process";
 import sharp from "sharp";
 
 type AtlasRect = {
@@ -28,10 +29,15 @@ type ImageData = {
 
 const IMAGE_EXTENSIONS = [".png", ".webp"];
 const MODEL_EXTENSIONS = [".gltf"];
-const MAX_WIDTH = 1024;
+const MAX_WIDTH = 2048;
 
-const toCamelCase = (str: string) =>
+const toCamelCase = (str: string) => {
-  str.replace(/[-_](.)/g, (_, c) => c.toUpperCase()).replaceAll(".", "_");
+  const camel = str
+    .replace(/[-_](.)/g, (_, c) => c.toUpperCase())
+    .replaceAll(".", "_");
+  // Prefix with underscore if starts with a digit to avoid octal literals
+  return /^\d/.test(camel) ? `_${camel}` : camel;
+};
 
 const scanByExt = async (
   dir: string,
@@ -245,6 +251,11 @@ ${sp}  }`;
 
           await writeFile(atlasOutputPath, atlasBuffer);
 
+          execSync(
+            `magick "${atlasOutputPath}" -define webp:lossless=true -define webp:method=6 "${atlasOutputPath}"`,
+            { stdio: "pipe" },
+          );
+
           const imageTree = buildImageTree(imagePaths, rects);
           imageCode = generateImageCode(imageTree);
         }