feat: separate steam build and directory build to save space

apps/showcase/package.json

@@ -5,9 +5,10 @@
     "type": "module",
     "main": "index.ts",
     "scripts": {
-        "dev:showcase": "vite --clearScreen false",
+        "dev:showcase": "bunx --bun vite --clearScreen false",
         "build": "mode=build bun runner.ts",
-        "preview:showcase": "vite preview",
+        "build:directory": "mode=build:directory bun runner.ts",
+        "preview:showcase": "bunx --bun vite preview",
         "lint": "eslint && prettier --check ."
     },
     "peerDependencies": {

apps/showcase/runner.ts

@@ -5,34 +5,41 @@ import { envParser, file } from '@aklive2d/libs'
 import { copyShowcaseData, copyProjectJSON } from '@aklive2d/vite-helpers'
 import * as dirs from './index.js'
 
-const build = async (namesToBuild: string[]) => {
+const build = async (namesToBuild: string[], mode: string) => {
     const names = !namesToBuild.length ? Object.keys(operators) : namesToBuild
     console.log('Generating assets for', names.length, 'operators')
     for (const name of names) {
         copyShowcaseData(name, {
             dataDir: dirs.DATA_DIR,
             publicAssetsDir: dirs.PUBLIC_ASSETS_DIR,
+            mode,
         })
         await viteBuild()
         const releaseDir = path.join(dirs.DIST_DIR, name)
         file.mv(dirs.OUT_DIR, releaseDir)
         file.rm(dirs.DATA_DIR)
-        copyProjectJSON(name, {
-            releaseDir,
-        })
+        if (mode !== 'build:directory') {
+            copyProjectJSON(name, {
+                releaseDir,
+            })
+        }
     }
 }
 
 async function main() {
-    const { name } = envParser.parse({
+    const { name, mode } = envParser.parse({
         name: {
             type: 'string',
             short: 'n',
             multiple: true,
             default: [],
         },
+        mode: {
+            type: 'string',
+            short: 'm',
+        },
     })
-    await build(name as string[])
+    await build(name as string[], mode as string)
 }
 
 main()

apps/showcase/src/components/background.js

@@ -13,7 +13,7 @@ export default class Background {
     #parentEl
     #videoEl
     #default = {
-        location: `${import.meta.env.BASE_URL}assets/${buildConfig.background_folder}/`,
+        location: `${import.meta.env.BASE_URL}${buildConfig.build_assets_dir}${buildConfig.background_folder}/`,
         image: buildConfig.default_background,
     }
     #config = {

apps/showcase/src/components/fallback.js

@@ -30,7 +30,7 @@ export default class Fallback {
         this.#el.innerHTML = `
       <div id="fallback-container">
         <div id="fallback"
-          style="background-image: url(./assets/${buildConfig.fallback_name}.png)"
+          style="background-image: url(${import.meta.env.BASE_URL}${buildConfig.default_assets_dir}${buildConfig.fallback_name}.png)"
         />
       </div>
     `

apps/showcase/src/components/logo.js

@@ -13,7 +13,7 @@ export default class Logo {
     #imageEl
     #parentEl
     #default = {
-        location: `${import.meta.env.BASE_URL}assets/`,
+        location: `${import.meta.env.BASE_URL}${buildConfig.build_assets_dir}${buildConfig.logo_dir}`,
         image: `${buildConfig.logo_filename}.png`,
         useInvertFilter: buildConfig.invert_filter,
         ratio: 61.8,

apps/showcase/src/components/music.js

@@ -104,8 +104,8 @@ export default class Music {
     #playMusic() {
         if (!this.#config.name) {
             const introOgg = this.#music.mapping[this.#music.current].intro
-            const intro = `./assets/${this.#music.location}/${introOgg}`
-            const loop = `./assets/${this.#music.location}/${this.#music.mapping[this.#music.current].loop}`
+            const intro = `${import.meta.env.BASE_URL}${buildConfig.build_assets_dir}${this.#music.location}/${introOgg}`
+            const loop = `${import.meta.env.BASE_URL}${buildConfig.build_assets_dir}${this.#music.location}/${this.#music.mapping[this.#music.current].loop}`
             this.#audio.loop.el.src = loop
             this.#audio.loop.el.querySelector('source').type = 'audio/ogg'
             if (introOgg) {

apps/showcase/src/components/player.js

@@ -45,7 +45,7 @@ export default class Player {
     async init() {
         const _this = this
         const playerConfig = {
-            atlasUrl: `./assets/${buildConfig.filename}.atlas`,
+            atlasUrl: `${import.meta.env.BASE_URL}${buildConfig.default_assets_dir}${buildConfig.filename}.atlas`,
             premultipliedAlpha: true,
             alpha: true,
             backgroundColor: '#00000000',
@@ -115,9 +115,9 @@ export default class Player {
             },
         }
         if (buildConfig.use_json) {
-            playerConfig.jsonUrl = `./assets/${buildConfig.filename}.json`
+            playerConfig.jsonUrl = `${import.meta.env.BASE_URL}${buildConfig.default_assets_dir}${buildConfig.filename}.json`
         } else {
-            playerConfig.skelUrl = `./assets/${buildConfig.filename}.skel`
+            playerConfig.skelUrl = `${import.meta.env.BASE_URL}${buildConfig.default_assets_dir}${buildConfig.filename}.skel`
         }
         this.#spine = new SpinePlayer(this.#el, playerConfig)
     }

apps/showcase/src/components/voice.js

@@ -83,7 +83,9 @@ export default class Voice {
     }
 
     async init() {
-        const res = await fetch('./assets/charword_table.json')
+        const res = await fetch(
+            `${import.meta.env.BASE_URL}${buildConfig.default_assets_dir}charword_table.json`
+        )
         this.#charwordTable = await res.json()
         this.#voice.languages = Object.keys(
             this.#charwordTable.voiceLangs[this.#default.region]
@@ -170,7 +172,7 @@ export default class Voice {
         if (!this.useVoice) return
         this.#voice.id.last = this.#voice.id.current
         this.#voice.id.current = id
-        this.#audio.el.src = `./assets/${this.#getVoiceLocation()}/${id}.ogg`
+        this.#audio.el.src = `${import.meta.env.BASE_URL}${buildConfig.default_assets_dir}${this.#getVoiceLocation()}/${id}.ogg`
         let startPlayPromise = this.#audio.el.play()
         if (startPlayPromise !== undefined) {
             startPlayPromise