sample3 example integration react app

packages/client/src/RpgClientEngine.ts

@@ -305,12 +305,12 @@ export class RpgClientEngine {
      *
      * @title Start Client Engine
      * @method start()
-     * @returns {Promise< void >}
+     * @returns {Promise< RpgClientEngine >}
      * @memberof RpgClientEngine
      */
     async start(options: { renderLoop: boolean } = {
         renderLoop: true
-    }) {
+    }): Promise<RpgClientEngine> {
         await this._init()
         await this.renderer.init()
         const { maxFps } = this.options
@@ -345,6 +345,7 @@ export class RpgClientEngine {
                     envUrl ? envUrl : undefined
             )
         }
+        return this
     }
 
     /**
@@ -466,7 +467,7 @@ export class RpgClientEngine {
             this.renderer.transitionScene(id)
             if (reconnect) {
                 this.roomJoin.next('')
-                this.roomJoin.complete() 
+                this.roomJoin.complete()
             }
         })
 
@@ -478,7 +479,7 @@ export class RpgClientEngine {
             this.renderer.loadScene(name, data)
         })
 
-        this.socket.on(SocketEvents.ChangeServer, async({ url, port }) => {
+        this.socket.on(SocketEvents.ChangeServer, async ({ url, port }) => {
             const connection = url + ':' + port
             if (this.lastConnection == connection) {
                 return

packages/compiler/src/build/client-config.ts

@@ -1,9 +1,8 @@
-import { loadEnv, splitVendorChunkPlugin } from 'vite'
+import { splitVendorChunkPlugin } from 'vite'
+import { resolve, join } from 'path'
 import { VitePWA } from 'vite-plugin-pwa'
-import toml from '@iarna/toml';
 import nodePolyfills from 'rollup-plugin-node-polyfills'
 import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'
-import { resolve, join } from 'path'
 import requireTransform from './vite-plugin-require.js';
 import { flagTransform } from './vite-plugin-flag-transform.js';
 import vue from '@vitejs/plugin-vue'
@@ -20,62 +19,16 @@ import { DevOptions } from '../serve/index.js';
 import { codeInjectorPlugin } from './vite-plugin-code-injector.js';
 import { error, ErrorCodes } from '../utils/log.js';
 import configTomlPlugin from './vite-plugin-config.toml.js'
-import { createDistFolder, entryPointServer, replaceEnvVars } from './utils.js'
+import { createDistFolder, entryPointServer } from './utils.js'
 import cssPlugin from './vite-plugin-css.js';
 import { rpgjsPluginLoader } from './vite-plugin-rpgjs-loader.js';
 import { mapUpdatePlugin } from './vite-plugin-map-update.js';
 import { runtimePlugin } from './vite-plugin-lib.js';
-import { BuildOptions } from './index.js';
 import { defaultComposer } from "default-composer";
+import { Config, loadConfigFile } from './load-config-file.js';
 
 const require = createRequire(import.meta.url);
 
-export interface Config {
-    modules?: string[]
-    startMap?: string
-    name?: string
-    shortName?: string,
-    short_name?: string // old value
-    description?: string,
-    themeColor?: string,
-    background_color?: string // old value
-    icons?: {
-        src: string,
-        sizes: number[],
-        type: string
-    }[]
-    themeCss?: string
-    inputs?: {
-        [key: string]: {
-            name: string,
-            repeat?: boolean,
-            bind: string | string[],
-        }
-    }
-    start?: {
-        map?: string,
-        graphic?: string
-        hitbox?: [number, number]
-    }
-    spritesheetDirectories?: string[]
-    compilerOptions?: {
-        alias?: {
-            [key: string]: string
-        },
-        build?: {
-            pwaEnabled?: boolean // true by default
-            assetsPath?: string
-            outputDir?: string // dist by default
-            serverUrl?: string
-        }
-    },
-    pwa?: {
-        [key: string]: any
-    },
-    vite?: any
-    modulesRoot?: string
-    autostart?: boolean
-}
 
 export interface ClientBuildConfigOptions {
     buildEnd?: () => void,
@@ -92,53 +45,21 @@ export interface ClientBuildConfigOptions {
     optimizeDepsExclude?: string[]
 }
 
-export async function clientBuildConfig(dirname: string, options: ClientBuildConfigOptions = {}) {
+export async function clientBuildConfig(dirname: string, options: ClientBuildConfigOptions = {}, config: any) {
     const isServer = options.side === 'server'
     const isTest = options.mode === 'test'
     const isRpg = options.type === 'rpg'
     const isBuild = options.serveMode === false
     const mode = options.mode || 'development'
     const plugin = options.plugin
-    let config: Config = {}
     const { cwd, env } = process
 
     const envType = env.RPG_TYPE
     if (envType && !['rpg', 'mmorpg'].includes(envType)) {
         throw new Error('Invalid type. Choice between rpg or mmorpg')
     }
 
-    const tomlFile = resolve(cwd(), 'rpg.toml')
-    const jsonFile = resolve(cwd(), 'rpg.json')
-    // if file exists
-    if (_fs.existsSync(tomlFile)) {
-        config = toml.parse(await fs.readFile(tomlFile, 'utf8'));
-    }
-    else if (_fs.existsSync(jsonFile)) {
-        config = JSON.parse(await fs.readFile(jsonFile, 'utf8'));
-    }
-
-    const envs = loadEnv(mode, cwd())
-    config = replaceEnvVars(config, envs)
-    config.autostart = config.autostart ?? true
-    config.modulesRoot = config.modulesRoot ?? ''
-
-    let buildOptions = config.compilerOptions?.build || {}
-
-    if (!config.compilerOptions) {
-        config.compilerOptions = {}
-    }
-
-    if (!config.compilerOptions.build) {
-        config.compilerOptions.build = {}
-    }
-
-    if (buildOptions.pwaEnabled === undefined) {
-        buildOptions.pwaEnabled = true
-    }
-
-    if (buildOptions.outputDir === undefined) {
-        buildOptions.outputDir = 'dist'
-    }
+    const buildOptions = config.compilerOptions.build
 
     // found react packages in node_modules
     const hasPkg = pkg => _fs.existsSync(join(cwd(), 'node_modules', pkg))
@@ -235,7 +156,7 @@ export async function clientBuildConfig(dirname: string, options: ClientBuildCon
     else {
         if (!isBuild) {
             plugins.push(
-                 mapUpdatePlugin(isRpg ? '' : serverUrl, config)
+                mapUpdatePlugin(isRpg ? '' : serverUrl, config)
             )
         }
     }

packages/compiler/src/build/index.ts

@@ -1,6 +1,7 @@
 import { build } from 'vite'
 import { cleanDist } from './clean-dist.js'
 import { clientBuildConfig } from './client-config.js'
+import { loadConfigFile } from './load-config-file.js'
 
 export type BuildOptions = {
     runtime?: boolean | string
@@ -9,6 +10,7 @@ export type BuildOptions = {
 }
 
 export async function buildMode(props: BuildOptions) {
+    const jsonConfig = await loadConfigFile()
     const { outputDir } = props
 
     cleanDist(outputDir)
@@ -30,7 +32,7 @@ export async function buildMode(props: BuildOptions) {
             type: 'rpg',
             serveMode: false,
             buildEnd
-        })
+        }, jsonConfig)
         await build(config)
     }
     else {
@@ -39,15 +41,15 @@ export async function buildMode(props: BuildOptions) {
             buildEnd ,
             mode,
             side: 'client'
-        })
+        }, jsonConfig)
         await build(clientConfig)
 
         const serverConfig = await clientBuildConfig(cwd, { 
             serveMode: false, 
             buildEnd ,
             mode,
             side: 'server'
-        })
+        }, jsonConfig)
         await build(serverConfig)
     }
 }

packages/compiler/src/build/load-config-file.ts

@@ -0,0 +1,106 @@
+import { resolve } from 'path'
+import fs from 'fs/promises'
+import _fs from 'fs'
+import toml from '@iarna/toml';
+import { loadEnv } from 'vite'
+import { replaceEnvVars } from './utils.js'
+import path from 'path';
+
+export interface Config {
+    modules?: string[]
+    startMap?: string
+    name?: string
+    shortName?: string,
+    short_name?: string // old value
+    description?: string,
+    themeColor?: string,
+    background_color?: string // old value
+    icons?: {
+        src: string,
+        sizes: number[],
+        type: string
+    }[]
+    themeCss?: string
+    inputs?: {
+        [key: string]: {
+            name: string,
+            repeat?: boolean,
+            bind: string | string[],
+        }
+    }
+    start?: {
+        map?: string,
+        graphic?: string
+        hitbox?: [number, number]
+    }
+    spritesheetDirectories?: string[]
+    compilerOptions?: {
+        alias?: {
+            [key: string]: string
+        },
+        build?: {
+            pwaEnabled?: boolean // true by default
+            assetsPath?: string
+            outputDir?: string // dist by default
+            serverUrl?: string
+        }
+    },
+    pwa?: {
+        [key: string]: any
+    },
+    vite?: any
+    modulesRoot?: string
+    autostart?: boolean
+    type?: 'mmorpg' | 'rpg'
+}
+
+export async function loadConfigFile(mode: string = 'development') {
+    const { cwd, env } = process
+    let config: any = {}
+
+    const tomlFile = resolve(cwd(), 'rpg.toml')
+    const jsonFile = resolve(cwd(), 'rpg.json')
+    // if file exists
+    if (_fs.existsSync(tomlFile)) {
+        config = toml.parse(await fs.readFile(tomlFile, 'utf8'));
+    }
+    else if (_fs.existsSync(jsonFile)) {
+        config = JSON.parse(await fs.readFile(jsonFile, 'utf8'));
+    }
+
+    const envs = loadEnv(mode, cwd())
+    config = replaceEnvVars(config, envs)
+    config.autostart = config.autostart ?? true
+    config.modulesRoot = config.modulesRoot ?? ''
+
+    let buildOptions = config.compilerOptions?.build || {}
+
+    if (!config.compilerOptions) {
+        config.compilerOptions = {}
+    }
+
+    if (!config.compilerOptions.build) {
+        config.compilerOptions.build = {}
+    }
+
+    if (buildOptions.pwaEnabled === undefined) {
+        config.compilerOptions.build.pwaEnabled = true
+    }
+
+    if (buildOptions.outputDir === undefined) {
+        config.compilerOptions.build.outputDir = 'dist'
+    }
+
+    if (config.modules) {
+        config.modules = config.modules.map((module) => {
+            if (module.startsWith('.')) {
+                return './' + path.join(config.modulesRoot as string, module)
+            }
+            return module
+        })
+    }
+
+    config.startMap = config.startMap || config.start?.map
+
+    return config as any
+}

packages/compiler/src/build/load-global-config.ts

@@ -3,9 +3,9 @@ import colors from 'picocolors'
 import defaultConfig from '../jsonSchema/index.js'
 import fs from 'fs';
 import path from 'path';
-import type { ClientBuildConfigOptions, Config } from './client-config';
-import { loadEnv } from 'vite';
+import type { ClientBuildConfigOptions } from './client-config';
 import { warn } from '../logs/warning.js';
+import { type Config } from './load-config-file.js';
 
 export function loadGlobalConfig(modules: string[], config: Config, options: ClientBuildConfigOptions): {
     configClient: any;