@energy8platform/game-engine 0.2.1 → 0.4.0

package/src/vite/index.ts

@@ -1,83 +1,96 @@
 import type { UserConfig, Plugin } from 'vite';
 
-export interface GameViteConfig {
-  /** Base path for production builds (e.g., '/games/my-slot/') */
+// ─── Types ───────────────────────────────────────────────
+
+export interface GameConfig {
+  /** Vite `base` path for deployment (default: '/') */
   base?: string;
-  /** Output directory (default: 'dist') */
-  outDir?: string;
-  /** Enable DevBridge auto-injection in dev mode */
+
+  /** Enable DevBridge mock server in dev mode (default: false) */
   devBridge?: boolean;
-  /** Asset file extensions to include */
-  assetExtensions?: string[];
-  /** Additional Vite config overrides */
+
+  /** Path to DevBridge config file (default: './dev.config.ts') */
+  devBridgeConfig?: string;
+
+  /** Additional Vite config to merge */
   vite?: UserConfig;
 }
 
+// ─── DevBridge Plugin ────────────────────────────────────
+
 /**
- * Vite plugin that injects the DevBridge mock host in development mode.
- *
- * In dev mode, wraps the game page to simulate the casino host environment,
- * allowing SDK communication to work without a real backend.
+ * Vite plugin that auto-injects the DevBridge script into the
+ * HTML during development, so the game can communicate with a
+ * mock casino host without manual setup.
  */
-const VIRTUAL_DEV_BRIDGE_ID = 'virtual:game-engine-dev-bridge';
-const RESOLVED_VIRTUAL_ID = '\0' + VIRTUAL_DEV_BRIDGE_ID;
+const VIRTUAL_ID = '/@dev-bridge-entry.js';
+
+function devBridgePlugin(configPath: string): Plugin {
+  let entrySrc = '';
+  let resolvedConfigPath = configPath;
 
-function gameEngineDevPlugin(options: { devBridge?: boolean } = {}): Plugin {
   return {
-    name: 'game-engine-dev',
-    apply: 'serve',
+    name: 'game-engine:dev-bridge',
+    apply: 'serve', // dev only
+    enforce: 'pre',
+
+    configResolved(config) {
+      // Resolve relative config path against Vite root so the virtual
+      // module can import it with an absolute path.
+      if (configPath.startsWith('.')) {
+        resolvedConfigPath = config.root + '/' + configPath.replace(/^\.\//, '');
+      }
+    },
 
     resolveId(id) {
-      if (id === VIRTUAL_DEV_BRIDGE_ID) return RESOLVED_VIRTUAL_ID;
+      if (id === VIRTUAL_ID) return id;
     },
 
     load(id) {
-      if (id === RESOLVED_VIRTUAL_ID) {
-        // This module goes through Vite's transform pipeline,
-        // so bare specifiers like '@energy8platform/game-engine/debug' resolve correctly.
+      if (id === VIRTUAL_ID) {
+        // This goes through Vite's pipeline so bare imports are resolved
         return `
 import { DevBridge } from '@energy8platform/game-engine/debug';
 
-async function initDevBridge() {
-  let config = {};
-  try {
-    const mod = await import('/dev.config.ts');
-    config = mod.default || mod.devBridgeConfig || {};
-  } catch {
-    // No dev config — use defaults
-  }
-
-  const bridge = new DevBridge(config);
-  bridge.start();
-  window.__devBridge = bridge;
-  console.log('[GameEngine] DevBridge started in development mode');
+try {
+  const mod = await import('${resolvedConfigPath}');
+  const config = mod.default ?? mod.config ?? mod;
+  new DevBridge(config).start();
+} catch (e) {
+  console.warn('[DevBridge] Failed to load config:', e);
 }
 
-initDevBridge();
+await import('${entrySrc}');
 `;
       }
     },
 
     transformIndexHtml(html) {
-      if (options.devBridge === false) return html;
+      // Find the app's entry module script (skip Vite internal /@... scripts)
+      const scriptRegex = /<script\s+type="module"\s+src="((?!\/@)[^"]+)"\s*>\s*<\/script>/;
+      const match = html.match(scriptRegex);
 
-      // Inject a script that imports the virtual module — Vite resolves it properly
-      const devScript = `<script type="module" src="/${VIRTUAL_DEV_BRIDGE_ID}"></script>`;
+      if (!match) {
+        console.warn('[DevBridge] Could not find entry module script in index.html');
+        return html;
+      }
 
-      return html.replace('</head>', `${devScript}\n</head>`);
+      entrySrc = match[1];
+      return html.replace(match[0], `<script type="module" src="${VIRTUAL_ID}"></script>`);
     },
   };
 }
 
+// ─── defineGameConfig ────────────────────────────────────
+
 /**
- * Create a pre-configured Vite config for game projects.
+ * Define a Vite configuration tailored for Energy8 casino games.
  *
- * Includes:
- * - PixiJS optimization (exclude from dep optimization)
- * - DevBridge injection in dev mode
- * - HTML minification
- * - Gzip-friendly output
- * - Configurable base path for S3/CDN deploy
+ * Merges sensible defaults for iGaming projects:
+ * - Build target: ESNext (required for yoga-layout WASM top-level await)
+ * - Asset inlining threshold: 8KB
+ * - Source maps for dev, none for prod
+ * - Optional DevBridge auto-injection in dev mode
  *
  * @example
  * ```ts
@@ -85,69 +98,76 @@ initDevBridge();
  * import { defineGameConfig } from '@energy8platform/game-engine/vite';
  *
  * export default defineGameConfig({
- *   base: '/games/my-slot/',
+ *   base: '/',
  *   devBridge: true,
  * });
  * ```
  */
-export function defineGameConfig(config: GameViteConfig = {}): UserConfig {
-  const assetExtensions = config.assetExtensions ?? [
-    'png', 'jpg', 'jpeg', 'gif', 'webp', 'avif', 'svg',
-    'mp3', 'ogg', 'wav', 'webm',
-    'json', 'atlas', 'skel',
-    'fnt', 'ttf', 'otf', 'woff', 'woff2',
-    'mp4', 'm4v',
-  ];
+export function defineGameConfig(config: GameConfig = {}): UserConfig {
+  const plugins: Plugin[] = [];
+
+  if (config.devBridge) {
+    const configPath = config.devBridgeConfig ?? './dev.config';
+    plugins.push(devBridgePlugin(configPath));
+  }
+
+  const userVite = config.vite ?? {};
 
   return {
     base: config.base ?? '/',
 
     plugins: [
-      gameEngineDevPlugin({ devBridge: config.devBridge ?? true }),
-      ...(config.vite?.plugins ?? []) as Plugin[],
+      ...plugins,
+      ...((userVite.plugins as Plugin[]) ?? []),
     ],
 
     build: {
-      outDir: config.outDir ?? 'dist',
-      target: 'es2022',
-      minify: 'terser',
+      target: 'esnext',
+      assetsInlineLimit: 8192,
       sourcemap: false,
-      assetsInlineLimit: 4096,
       rollupOptions: {
         output: {
-          assetFileNames: 'assets/[name]-[hash][extname]',
-          chunkFileNames: 'js/[name]-[hash].js',
-          entryFileNames: 'js/[name]-[hash].js',
+          manualChunks: {
+            pixi: ['pixi.js'],
+          },
         },
       },
-      ...(config.vite?.build ?? {}),
-    },
-
-    optimizeDeps: {
-      // Pre-bundle libs for fast dev startup
-      include: ['pixi.js'],
-      exclude: ['@esotericsoftware/spine-pixi-v8'],
+      ...userVite.build,
     },
 
-    assetsInclude: assetExtensions.map((ext) => `**/*.${ext}`),
-
     server: {
       port: 3000,
       open: true,
-      ...(config.vite?.server ?? {}),
+      ...userVite.server,
     },
 
     resolve: {
-      ...(config.vite?.resolve ?? {}),
+      dedupe: [
+        'pixi.js',
+        '@pixi/layout',
+        '@pixi/layout/components',
+        '@pixi/ui',
+        'yoga-layout',
+        'yoga-layout/load',
+      ],
+      ...userVite.resolve,
     },
 
-    // Spread any additional user overrides
-    ...Object.fromEntries(
-      Object.entries(config.vite ?? {}).filter(
-        ([key]) => !['plugins', 'build', 'server', 'resolve'].includes(key),
-      ),
-    ),
+    optimizeDeps: {
+      include: [
+        'pixi.js',
+        '@pixi/layout',
+        '@pixi/layout/components',
+        '@pixi/ui',
+        'yoga-layout/load',
+      ],
+      exclude: [
+        'yoga-layout',
+      ],
+      esbuildOptions: {
+        target: 'esnext',
+      },
+      ...userVite.optimizeDeps,
+    },
   };
 }
-
-export { gameEngineDevPlugin };