@rpgjs/vite 5.0.0-beta.8 → 5.0.0-beta.9

package/src/compatibility-v4/load-config-file.ts

@@ -0,0 +1,38 @@
+import fs from "fs";
+import path from "path";
+import { loadEnv } from "vite";
+import toml from "@iarna/toml";
+import { Config, replaceEnvVars } from "./utils";
+
+export function loadConfigFileSync(mode = "development", root = process.cwd()): Config {
+  const tomlFile = path.resolve(root, "rpg.toml");
+  const jsonFile = path.resolve(root, "rpg.json");
+  let config: any = {};
+
+  if (fs.existsSync(tomlFile)) {
+    config = toml.parse(fs.readFileSync(tomlFile, "utf8"));
+  } else if (fs.existsSync(jsonFile)) {
+    config = JSON.parse(fs.readFileSync(jsonFile, "utf8"));
+  }
+
+  config = replaceEnvVars(config, loadEnv(mode, root, ""));
+  config.autostart = config.autostart ?? true;
+  config.modulesRoot = config.modulesRoot ?? "";
+  config.compilerOptions ??= {};
+  config.compilerOptions.build ??= {};
+  config.compilerOptions.build.pwaEnabled ??= true;
+  config.compilerOptions.build.outputDir ??= "dist";
+
+  if (config.modules) {
+    config.modules = config.modules.map((module: string) => {
+      if (module.startsWith(".")) {
+        return "./" + path.join(config.modulesRoot, module);
+      }
+      return module;
+    });
+  }
+
+  config.startMap = config.startMap || config.start?.map;
+  return config as Config;
+}
+

package/src/compatibility-v4/require-transform.ts

@@ -0,0 +1,67 @@
+import * as parser from "@babel/parser";
+import _traverse from "@babel/traverse";
+import _generate from "@babel/generator";
+import { importDeclaration, importDefaultSpecifier, identifier, stringLiteral } from "@babel/types";
+import type { Plugin } from "vite";
+
+const traverse = (_traverse as any).default ?? _traverse;
+const generate = (_generate as any).default ?? _generate;
+
+function readStaticRequireArg(arg: any, ast: any): string {
+  if (!arg) return "";
+  if (arg.type === "StringLiteral") return arg.value;
+  if (arg.type === "Identifier") {
+    let value = "";
+    traverse(ast, {
+      VariableDeclarator(path: any) {
+        if (path.node.id?.name === arg.name && path.node.init?.type === "StringLiteral") {
+          value = path.node.init.value;
+        }
+      },
+    });
+    return value;
+  }
+  if (arg.type === "BinaryExpression" && arg.operator === "+") {
+    const left = readStaticRequireArg(arg.left, ast);
+    const right = readStaticRequireArg(arg.right, ast);
+    return left && right ? left + right : "";
+  }
+  return "";
+}
+
+export default function vitePluginRequire(): Plugin {
+  return {
+    name: "rpgjs-v4-require-transform",
+    transform(code, id) {
+      const fileRegex = /(.jsx?|.tsx?)(\?.*)?$/;
+      const allowRegex = /^(?!.*node_modules(?:\/|\\)(?!rpgjs-|@rpgjs)).*$/;
+      if (!fileRegex.test(id) || !allowRegex.test(id)) {
+        return { code, map: null };
+      }
+
+      const ast = parser.parse(code, {
+        sourceType: "module",
+        plugins: ["typescript", "jsx", "decorators-legacy", "classProperties"],
+      });
+
+      let changed = false;
+      traverse(ast, {
+        CallExpression(path: any) {
+          if (!path.node.callee || path.node.callee.type !== "Identifier" || path.node.callee.name !== "require") return;
+
+          const request = readStaticRequireArg(path.node.arguments[0], ast);
+          if (!request) return;
+
+          const variableName = `__rpgjs_v4_require_${path.scope.generateUidIdentifier("asset").name}`;
+          ast.program.body.unshift(importDeclaration([importDefaultSpecifier(identifier(variableName))], stringLiteral(request)));
+          path.replaceWith(identifier(variableName));
+          changed = true;
+        },
+      });
+
+      if (!changed) return { code, map: null };
+      return { code: generate(ast, {}).code, map: null };
+    },
+  };
+}
+

package/src/compatibility-v4/utils.ts

@@ -0,0 +1,170 @@
+import fs from "fs";
+import path from "path";
+
+export interface ClientBuildConfigOptions {
+  serveMode?: boolean;
+  side?: "client" | "server";
+  type?: "rpg" | "mmorpg";
+  mode?: string;
+  config?: Config;
+  tiledMapBasePath?: string;
+}
+
+export interface Config {
+  modules?: string[];
+  modulesRoot?: string;
+  startMap?: string;
+  start?: {
+    map?: string;
+    graphic?: string;
+    hitbox?: [number, number];
+  };
+  inputs?: Record<string, { bind: string | string[] }>;
+  spritesheetDirectories?: string[];
+  compilerOptions?: {
+    alias?: Record<string, string>;
+    build?: {
+      outputDir?: string;
+      pwaEnabled?: boolean;
+      assetsPath?: string;
+      serverUrl?: string;
+    };
+  };
+  autostart?: boolean;
+  type?: "rpg" | "mmorpg";
+  vite?: any;
+  [key: string]: any;
+}
+
+export interface ImportObject {
+  importString: string;
+  variablesString: string;
+  folder: string;
+  relativePath: string;
+}
+
+export function dedent(strings: TemplateStringsArray, ...values: unknown[]) {
+  const fullString = strings.reduce((acc, str, i) => acc + str + (values[i] ?? ""), "");
+  const lines = fullString.split("\n");
+  let minIndent = Infinity;
+
+  for (const line of lines) {
+    if (!line.trim()) continue;
+    minIndent = Math.min(minIndent, line.match(/^\s*/)?.[0].length ?? 0);
+  }
+
+  if (minIndent === Infinity) return fullString.trim();
+
+  return lines
+    .map((line) => line.trim() ? line.slice(minIndent) : line)
+    .join("\n")
+    .trim();
+}
+
+export function warn(message: string) {
+  console.warn(`[RPG-JS v4 compatibility] ${message}`);
+}
+
+export function toPosix(value: string) {
+  return value.replace(/\\/g, "/");
+}
+
+export function formatVariableName(value: string) {
+  return value.replace(/\./g, "").replace(/[.@/\\ -]/g, "_").replace(/[^A-Za-z0-9_$]/g, "_");
+}
+
+export function transformPathIfModule(moduleName: string) {
+  if (moduleName.startsWith("@rpgjs") || moduleName.startsWith("rpgjs-")) {
+    return path.join("node_modules", moduleName);
+  }
+  return moduleName;
+}
+
+export function resolveModuleImport(moduleName: string) {
+  return moduleName.replace(/^\.\//, "");
+}
+
+export function getAllFiles(dirPath: string): string[] {
+  if (!fs.existsSync(dirPath)) return [];
+  const files: string[] = [];
+  const dirents = fs.readdirSync(dirPath, { withFileTypes: true });
+
+  for (const dirent of dirents) {
+    const fullPath = path.join(dirPath, dirent.name);
+    if (dirent.isDirectory()) {
+      files.push(...getAllFiles(fullPath));
+    } else {
+      files.push(fullPath);
+    }
+  }
+
+  return files;
+}
+
+export function importPathForFile(file: string, root: string) {
+  const srcPath = path.join(root, "src");
+  if (file.startsWith(srcPath + path.sep)) {
+    return `@/${toPosix(path.relative(srcPath, file))}`;
+  }
+  return `./${toPosix(path.relative(root, file))}`;
+}
+
+export function importString(modulePath: string, fileName: string, variableName = fileName, projectRoot = process.cwd()) {
+  const file = path.resolve(projectRoot, transformPathIfModule(modulePath), `${fileName}.ts`);
+  if (!fs.existsSync(file)) return "";
+  return `import ${variableName} from '${importPathForFile(file, projectRoot)}'`;
+}
+
+export function searchFolderAndTransformToImportString(
+  folderPath: string,
+  modulePath: string,
+  extensionFilter: string | string[],
+  returnCb?: (file: string, variableName: string, absoluteFile: string) => string,
+  options?: {
+    customFilter?: (file: string) => boolean;
+  },
+  projectRoot = process.cwd()
+): ImportObject {
+  const folder = path.resolve(projectRoot, transformPathIfModule(modulePath), folderPath);
+  if (!fs.existsSync(folder)) {
+    return { variablesString: "", importString: "", folder: "", relativePath: "" };
+  }
+
+  const extensions = Array.isArray(extensionFilter) ? extensionFilter : [extensionFilter];
+  let importString = "";
+  let relativePath = "";
+  const variablesString = getAllFiles(folder)
+    .filter((file) => extensions.some((ext) => file.endsWith(ext)))
+    .filter((file) => options?.customFilter ? options.customFilter(file) : true)
+    .map((file) => {
+      const importPath = importPathForFile(file, projectRoot);
+      const variableName = formatVariableName(importPath);
+      relativePath = importPath;
+      importString += `\nimport ${variableName} from '${importPath}'`;
+      return returnCb ? returnCb(importPath, variableName, file) : variableName;
+    })
+    .join(",");
+
+  return {
+    variablesString,
+    importString,
+    folder,
+    relativePath,
+  };
+}
+
+export function replaceEnvVars(obj: any, envs: Record<string, string | undefined>): any {
+  if (obj == null) return obj;
+  if (typeof obj === "string" && obj.startsWith("$ENV:")) {
+    return envs[obj.slice(5)];
+  }
+  if (Array.isArray(obj)) return obj.map((item) => replaceEnvVars(item, envs));
+  if (typeof obj === "object") {
+    return Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, replaceEnvVars(value, envs)]));
+  }
+  return obj;
+}
+
+export function assetsFolder(outputDir: string) {
+  return path.join(outputDir, "assets");
+}

package/src/index.ts

@@ -5,4 +5,5 @@ export { removeImportsPlugin, type RemoveImportsPluginOptions } from './remove-i
 export { replaceConfigImport } from './replace-config-import';
 export { rpgjs } from './rpgjs-plugin';
 export { serverPlugin } from './server-plugin';
-export { entryPointPlugin, type EntryPointPluginOptions } from './entry-point-plugin';
+export { entryPointPlugin, type EntryPointPluginOptions } from './entry-point-plugin';
+export { default as compatibilityV4Plugin } from './compatibility-v4';

package/tests/compatibility-v4.spec.ts

@@ -0,0 +1,105 @@
+import { describe, expect, it } from "vitest";
+import path from "path";
+import { flagTransform } from "../src/compatibility-v4/flag-transform";
+import { createClientConfigLoad, createModulesLoad, createTiledMapEntries, createWorldMapEntries, loadClientFiles, loadServerFiles, loadSpriteSheet } from "../src/compatibility-v4";
+import { loadConfigFileSync } from "../src/compatibility-v4/load-config-file";
+
+const fixtureRoot = path.resolve(__dirname, "fixtures/v4-game");
+
+describe("compatibilityV4Plugin", () => {
+  it("loads and normalizes a v4 rpg.toml", () => {
+    const config = loadConfigFileSync("development", fixtureRoot);
+
+    expect(config.modules).toEqual(["./src/modules/main"]);
+    expect(config.startMap).toBe("map");
+    expect(config.compilerOptions?.build?.outputDir).toBe("dist");
+  });
+
+  it("generates a v5 server from a v4 module layout", () => {
+    const config = loadConfigFileSync("development", fixtureRoot);
+    const code = loadServerFiles("./src/modules/main", { modulesCreated: [], type: "rpg", serveMode: true, config, tiledMapBasePath: "map" }, config, fixtureRoot);
+
+    expect(code).toContain("createServer");
+    expect(code).toContain("provideServerModules");
+    expect(code).toContain("provideTiledMap()");
+    expect(code).toContain("player.setGraphic('hero')");
+    expect(code).toContain("player.setHitbox(32, 32)");
+    expect(code).toContain("await player.changeMap('map')");
+    expect(code).toContain("events:");
+    expect(code).toContain("database:");
+    expect(code).toContain("worldMaps:");
+  });
+
+  it("generates a v5 client from a v4 module layout", () => {
+    const config = loadConfigFileSync("development", fixtureRoot);
+    const code = loadClientFiles("./src/modules/main", { type: "rpg", serveMode: true, config }, config, fixtureRoot);
+
+    expect(code).toContain("spritesheets:");
+    expect(code).toContain("sprite,");
+    expect(code).toContain("engine,");
+    expect(code).toContain("sceneMap:");
+    expect(code).toContain("gui:");
+    expect(code).toContain("sounds:");
+    expect(code).toContain("prototype.width = 32");
+    expect(code).toContain("prototype.height = 32");
+  });
+
+  it("registers v4 spritesheet images by file basename", () => {
+    const config = loadConfigFileSync("development", fixtureRoot);
+    const spritesheet = loadSpriteSheet("characters", "./src/modules/main", { type: "rpg", serveMode: true, config }, fixtureRoot);
+
+    expect(spritesheet.variablesString).toContain("...");
+    expect(spritesheet.propImagesString).toContain("hero.svg?url");
+    expect(spritesheet.propImagesString).toContain('"hero":');
+    expect(spritesheet.propImagesString).toContain("id,");
+    expect(spritesheet.propImagesString).toContain("image,");
+  });
+
+  it("generates a client config with Tiled as the default map loader", () => {
+    const config = loadConfigFileSync("development", fixtureRoot);
+    const code = createClientConfigLoad(config);
+
+    expect(code).toContain("from '@rpgjs/tiledmap/client'");
+    expect(code).toContain("provideTiledMap({ basePath: 'map' })");
+    expect(code).toContain("provideClientModules(modules)");
+  });
+
+  it("autoloads Tiled maps from v4 map roots with public paths", () => {
+    const config = loadConfigFileSync("development", fixtureRoot);
+    const code = createTiledMapEntries("./src/modules/main", { type: "rpg", serveMode: true, config, tiledMapBasePath: "map" }, fixtureRoot);
+
+    expect(code).toContain("{ id: 'world-map', file: '/map/world-map.tmx' }");
+    expect(code).not.toContain("{ id: 'map'");
+  });
+
+  it("normalizes Tiled world files for the v5 world map manager", () => {
+    const code = createWorldMapEntries("./src/modules/main", fixtureRoot);
+
+    expect(code).toContain('"id":"world"');
+    expect(code).toContain('"id":"world-map"');
+    expect(code).toContain('"worldX":64');
+    expect(code).toContain('"worldY":-160');
+  });
+
+  it("maps RPGJS v4 starter legacy modules to virtual v5 modules", () => {
+    const code = createModulesLoad(["./main", "@rpgjs/mobile-gui", "@rpgjs/default-gui", "@rpgjs/gamepad"]);
+
+    expect(code).toContain("virtual:rpgjs-v4-legacy-mobile-gui");
+    expect(code).toContain("virtual:rpgjs-v4-legacy-default-gui");
+    expect(code).toContain("virtual:rpgjs-v4-legacy-gamepad");
+  });
+
+  it("removes flagged imports for the opposite side", async () => {
+    const plugin = flagTransform({ side: "client", type: "mmorpg", mode: "development" });
+    const result = await plugin.transform?.call({} as any, "export default 1", "/tmp/mod.ts?server");
+
+    expect(result).toEqual({ code: "export default null;", map: null });
+  });
+
+  it("keeps server flagged imports when the import chain is server-side", async () => {
+    const plugin = flagTransform({ side: "client", type: "mmorpg", mode: "development" });
+    const result = await plugin.transform?.call({} as any, "export default 1", "/tmp/mod.ts?server&side=server");
+
+    expect(result).toEqual({ code: "export default 1", map: null });
+  });
+});

package/tests/fixtures/v4-game/rpg.toml

@@ -0,0 +1,11 @@
+modulesRoot = './src/modules'
+modules = ['./main']
+
+[start]
+map = 'map'
+graphic = 'hero'
+hitbox = [32, 32]
+
+[compilerOptions.build]
+pwaEnabled = false
+

package/tests/fixtures/v4-game/src/modules/main/characters/assets/hero.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><rect width="32" height="32"/></svg>
+

package/tests/fixtures/v4-game/src/modules/main/characters/hero.ts

@@ -0,0 +1,2 @@
+export default class HeroSpritesheet {}
+

package/tests/fixtures/v4-game/src/modules/main/client.ts

@@ -0,0 +1,4 @@
+export default {
+  onStart() {}
+}
+

package/tests/fixtures/v4-game/src/modules/main/database/potion.ts

@@ -0,0 +1,6 @@
+export default {
+  Potion: {
+    name: 'Potion'
+  }
+}
+

package/tests/fixtures/v4-game/src/modules/main/events/npc.ts

@@ -0,0 +1,4 @@
+export default {
+  name: 'EV-1'
+}
+

package/tests/fixtures/v4-game/src/modules/main/gui/menu.vue

@@ -0,0 +1,2 @@
+<template><div>Menu</div></template>
+

package/tests/fixtures/v4-game/src/modules/main/maps/map.tmx

@@ -0,0 +1,2 @@
+<map version="1.10" tiledversion="1.10.2" orientation="orthogonal" renderorder="right-down" width="1" height="1" tilewidth="32" tileheight="32" infinite="0"></map>
+

package/tests/fixtures/v4-game/src/modules/main/maps/map.ts

@@ -0,0 +1,7 @@
+export default {
+  id: 'script-map',
+  width: 320,
+  height: 320,
+  events: []
+}
+

package/tests/fixtures/v4-game/src/modules/main/player.ts

@@ -0,0 +1,4 @@
+export default {
+  onConnected() {}
+}
+

package/tests/fixtures/v4-game/src/modules/main/scene-map.ts

@@ -0,0 +1,4 @@
+export default {
+  onAfterLoading() {}
+}
+

package/tests/fixtures/v4-game/src/modules/main/server.ts

@@ -0,0 +1,4 @@
+export default {
+  onStart() {}
+}
+

package/tests/fixtures/v4-game/src/modules/main/sounds/theme.ogg

@@ -0,0 +1,2 @@
+fixture
+

package/tests/fixtures/v4-game/src/modules/main/sounds/theme.ts

@@ -0,0 +1,5 @@
+export default {
+  id: 'theme',
+  src: 'theme.ogg'
+}
+

package/tests/fixtures/v4-game/src/modules/main/sprite.ts

@@ -0,0 +1,4 @@
+export default {
+  onInit() {}
+}
+

package/tests/fixtures/v4-game/src/modules/main/worlds/maps/world-map.tmx

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<map version="1.9" tiledversion="1.9.2" orientation="orthogonal" renderorder="right-down" width="1" height="1" tilewidth="32" tileheight="32" infinite="0" nextlayerid="2" nextobjectid="1">
+ <layer id="1" name="Ground" width="1" height="1">
+  <data encoding="csv">0</data>
+ </layer>
+</map>

package/tests/fixtures/v4-game/src/modules/main/worlds/world.world

@@ -0,0 +1,13 @@
+{
+  "maps": [
+    {
+      "fileName": "maps/world-map.tmx",
+      "height": 640,
+      "width": 800,
+      "x": 64,
+      "y": -160
+    }
+  ],
+  "onlyShowAdjacentMaps": false,
+  "type": "world"
+}

package/vite.config.ts

@@ -36,9 +36,15 @@ export default defineConfig({
         'vite',
         'vite-plugin-dts',
         '@canvasengine/compiler',
+        '@iarna/toml',
+        'image-size',
+        '@babel/parser',
+        '@babel/traverse',
+        '@babel/generator',
+        '@babel/types',
         'chokidar',
         'ws'
       ]
     }
   },
-})
+})