@rpgjs/vite 5.0.0-alpha.0

package/dist/module-config.d.ts

@@ -0,0 +1 @@
+export declare const rpgjsModuleViteConfig: () => import('vite').UserConfigFnPromise;

package/dist/remove-imports-plugin.d.ts

@@ -0,0 +1,36 @@
+import { Plugin } from 'vite';
+export interface RemoveImportsPluginOptions {
+    /**
+     * Array of patterns to match against import sources
+     * Can be strings (exact match) or RegExp objects
+     */
+    patterns: (string | RegExp)[];
+}
+/**
+ * Vite plugin that replaces import statements with const declarations set to null
+ *
+ * This plugin analyzes JavaScript/TypeScript files and replaces import statements
+ * whose source matches any of the provided patterns with const declarations set to null.
+ * This is useful for removing dependencies while maintaining variable declarations.
+ *
+ * @param options - Configuration options for the plugin
+ * @returns Vite plugin object
+ *
+ * @example
+ * ```typescript
+ * // Replace specific imports
+ * removeImportsPlugin({
+ *   patterns: ['react', 'vue', '@types/node']
+ * })
+ *
+ * // Replace imports using regex patterns
+ * removeImportsPlugin({
+ *   patterns: [/^@types\//, /^react-/, 'lodash']
+ * })
+ *
+ * // Transform example:
+ * // import React, { useState } from 'react';
+ * // becomes: const React = null; const useState = null;
+ * ```
+ */
+export declare function removeImportsPlugin(options: RemoveImportsPluginOptions): Plugin;

package/dist/tiled-map-folder-plugin.d.ts

@@ -0,0 +1,48 @@
+import { Plugin } from 'vite';
+export interface DataFolderPluginOptions {
+    /**
+     * Source folder containing the data files (TMX, TSX, images)
+     */
+    sourceFolder: string;
+    /**
+     * Public path prefix for accessing the data files
+     * @default '/data'
+     */
+    publicPath?: string;
+    /**
+     * Target folder in build output for the data files
+     * @default 'assets/data'
+     */
+    buildOutputPath?: string;
+    /**
+     * File extensions to include
+     * @default ['.tmx', '.tsx', '.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg']
+     */
+    allowedExtensions?: string[];
+}
+/**
+ * Vite plugin that serves a data folder in development mode and copies it to assets during build
+ *
+ * This plugin allows serving game data files (TMX maps, TSX tilesets, images) during development
+ * and automatically includes them in the build output for production deployment.
+ *
+ * @param options - Configuration options for the plugin
+ *
+ * @example
+ * ```js
+ * // In vite.config.ts
+ * import { defineConfig } from 'vite';
+ * import { dataFolderPlugin } from '@rpgjs/vite';
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     dataFolderPlugin({
+ *       sourceFolder: './game-data',
+ *       publicPath: '/data',
+ *       buildOutputPath: 'assets/data'
+ *     })
+ *   ]
+ * });
+ * ```
+ */
+export declare function tiledMapFolderPlugin(options: DataFolderPluginOptions): Plugin;

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@rpgjs/vite",
+  "version": "5.0.0-alpha.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "description": "Vite plugins for RPGJS",
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "acorn": "^8.14.1",
+    "acorn-walk": "^8.3.4",
+    "magic-string": "^0.30.0",
+    "typescript": "^5.0.0",
+    "vite": "^6.2.5",
+    "vite-plugin-dts": "^4.5.3",
+    "vitest": "^3.1.1"
+  },
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@canvasengine/compiler": "2.0.0-beta.21"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "test": "vitest run"
+  }
+}

package/src/directive-plugin.ts

@@ -0,0 +1,80 @@
+import { Plugin } from 'vite';
+import MagicString from 'magic-string';
+import { parse } from 'acorn';
+import * as walk from 'acorn-walk';
+
+export interface DirectivePluginOptions {
+    side: 'client' | 'server';
+}
+
+function removeNode(s: MagicString, start: number, end: number) {
+    s.remove(start, end);
+}
+
+function isDirective(node: any): node is any {
+    return node.type === 'ExpressionStatement' &&
+        node.expression.type === 'Literal' &&
+        (node.expression.value === 'use client' || node.expression.value === 'use server');
+}
+
+export function directivePlugin(options: DirectivePluginOptions): Plugin {
+    return {
+        name: 'rpgjs-directive',
+        transform(code, id) {
+            const ast = parse(code, { ecmaVersion: 'latest', sourceType: 'module' }) as any;
+            const s = new MagicString(code);
+
+            let fileDirective: 'client' | 'server' | null = null;
+            if (ast.body.length && isDirective(ast.body[0])) {
+                fileDirective = (ast.body[0].expression.value as string).split(' ')[1] as 'client' | 'server';
+                if (fileDirective !== options.side) {
+                    return {
+                        code: 'export default null;',
+                        map: { mappings: '' }
+                    };
+                }
+                removeNode(s, ast.body[0].start, ast.body[0].end);
+            }
+
+            walk.ancestor(ast, {
+                FunctionDeclaration(node: any, ancestors: any[]) {
+                    if (node.body && node.body.body && node.body.body.length && isDirective(node.body.body[0])) {
+                        const directive = (node.body.body[0].expression.value as string).split(' ')[1] as 'client' | 'server';
+                        if (directive !== options.side) {
+                            removeNode(s, node.start, node.end);
+                        } else {
+                            removeNode(s, node.body.body[0].start, node.body.body[0].end);
+                        }
+                    }
+                },
+                FunctionExpression(node: any, ancestors: any[]) {
+                    if (node.body && node.body.body && node.body.body.length && isDirective(node.body.body[0])) {
+                        const directive = (node.body.body[0].expression.value as string).split(' ')[1] as 'client' | 'server';
+                        if (directive !== options.side) {
+                            removeNode(s, node.start, node.end);
+                        } else {
+                            removeNode(s, node.body.body[0].start, node.body.body[0].end);
+                        }
+                    }
+                },
+                ArrowFunctionExpression(node: any, ancestors: any[]) {
+                    if (node.body && node.body.body && node.body.body.length && isDirective(node.body.body[0])) {
+                        const directive = (node.body.body[0].expression.value as string).split(' ')[1] as 'client' | 'server';
+                        if (directive !== options.side) {
+                            const decl = ancestors.slice().reverse().find((n: any) => n.type === 'VariableDeclaration');
+                            if (decl) {
+                                removeNode(s, decl.start, decl.end);
+                            } else {
+                                removeNode(s, node.start, node.end);
+                            }
+                        } else {
+                            removeNode(s, node.body.body[0].start, node.body.body[0].end);
+                        }
+                    }
+                }
+            });
+
+            return { code: s.toString(), map: s.generateMap({ hires: true }) };
+        }
+    };
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export { tiledMapFolderPlugin, type DataFolderPluginOptions } from './tiled-map-folder-plugin'; 
+export { rpgjsModuleViteConfig } from './module-config';
+export { directivePlugin, type DirectivePluginOptions } from './directive-plugin';
+export { removeImportsPlugin, type RemoveImportsPluginOptions } from './remove-imports-plugin';

package/src/module-config.ts

@@ -0,0 +1,122 @@
+import { defineConfig, build } from "vite";
+import canvasengine from "@canvasengine/compiler";
+import dts from "vite-plugin-dts";
+import { directivePlugin, removeImportsPlugin } from "./index";
+
+/**
+ * Creates a build configuration for client or server side
+ * 
+ * This function generates a standardized Vite build configuration that can be used
+ * for both client and server builds with different plugins and output directories.
+ * 
+ * @param {Object} options - Build configuration options
+ * @param {string} options.side - The build side ('client' or 'server')
+ * @param {boolean} options.watch - Whether to enable watch mode
+ * @returns {Object} Vite build configuration object
+ * 
+ * @example
+ * ```typescript
+ * const clientConfig = createBuildConfig({ side: 'client', watch: false });
+ * const serverConfig = createBuildConfig({ side: 'server', watch: true });
+ * ```
+ */
+function createBuildConfig({ side, watch }: { side: 'client' | 'server', watch: boolean }) {
+  const isClient = side === 'client';
+  
+  const plugins = isClient 
+    ? [
+        canvasengine(),
+        removeImportsPlugin({ patterns: [/server/] }),
+        directivePlugin({ side: "client" }),
+      ]
+    : [
+        removeImportsPlugin({ patterns: [/\.ce$/, /client/] }),
+        directivePlugin({ side: "server" }),
+      ];
+
+  return {
+    configFile: false as const, // Prevent using this config file
+    plugins: [
+      ...plugins,
+      dts({ 
+        include: ['src/**/*.ts'],
+        outDir: 'dist'
+      })
+    ],
+    build: {
+      watch: watch ? {} : undefined,
+      outDir: `dist/${side}`,
+      minify: false,
+      lib: {
+        entry: {
+          index: "src/index.ts",
+        },
+        fileName: "index",
+        formats: ["es" as const],
+      },
+      rollupOptions: {
+        external: [
+          /@rpgjs/,
+          "canvasengine",
+          "esbuild",
+          "@canvasengine/presets",
+          "rxjs",
+        ],
+        output: {
+          preserveModules: true,
+          preserveModulesRoot: "src",
+        },
+      },
+    },
+  };
+}
+
+/**
+ * Builds both client and server configurations in parallel
+ * 
+ * This function creates and executes build configurations for both client and server
+ * sides simultaneously using Promise.all for better performance.
+ * 
+ * @param {boolean} watch - Whether to enable watch mode for both builds
+ * @returns {Promise<void[]>} Promise that resolves when both builds are complete
+ * 
+ * @example
+ * ```typescript
+ * // Build once
+ * await buildClientAndServer(false);
+ * 
+ * // Build with watch mode
+ * await buildClientAndServer(true);
+ * ```
+ */
+async function buildClientAndServer(watch: boolean = false) {
+  const clientBuild = build(createBuildConfig({ side: 'client', watch }));
+  const serverBuild = build(createBuildConfig({ side: 'server', watch }));
+
+  await Promise.all([clientBuild, serverBuild]);
+
+  console.log("✅ Build complete");
+}
+
+const isWatchMode = process.argv.includes("--watch");
+const isBuildCommand = process.argv.includes("build");
+const isManualControl = isWatchMode && isBuildCommand;
+
+export const rpgjsModuleViteConfig = () => {
+  return defineConfig(async ({ command }) => {
+    if (isManualControl) {
+      buildClientAndServer(true);
+      return {};
+    }
+    if (command === "build") {
+      console.log("👀 Building...");
+      await buildClientAndServer();
+      // Return empty config to prevent default build
+      process.exit(0);
+    } else {
+      return {
+        plugins: [],
+      };
+    }
+  });
+};

package/src/remove-imports-plugin.ts

@@ -0,0 +1,164 @@
+import { Plugin } from 'vite';
+import MagicString from 'magic-string';
+import { parse } from 'acorn';
+import * as walk from 'acorn-walk';
+
+export interface RemoveImportsPluginOptions {
+    /**
+     * Array of patterns to match against import sources
+     * Can be strings (exact match) or RegExp objects
+     */
+    patterns: (string | RegExp)[];
+}
+
+/**
+ * Replaces a node in the source code using MagicString
+ * @param s - MagicString instance
+ * @param start - Start position of the node
+ * @param end - End position of the node
+ * @param replacement - The replacement string
+ */
+function replaceNode(s: MagicString, start: number, end: number, replacement: string) {
+    s.overwrite(start, end, replacement);
+}
+
+/**
+ * Checks if an import source matches any of the provided patterns
+ * @param source - The import source string
+ * @param patterns - Array of string or RegExp patterns
+ * @returns True if the source matches any pattern
+ * 
+ * @example
+ * ```typescript
+ * matchesPattern('react', ['react', /^@types/]) // true
+ * matchesPattern('@types/node', ['react', /^@types/]) // true
+ * matchesPattern('lodash', ['react', /^@types/]) // false
+ * ```
+ */
+function matchesPattern(source: string, patterns: (string | RegExp)[]): boolean {
+    return patterns.some(pattern => {
+        if (typeof pattern === 'string') {
+            return source === pattern;
+        } else if (pattern instanceof RegExp) {
+            return pattern.test(source);
+        }
+        return false;
+    });
+}
+
+/**
+ * Generates const declarations from import specifiers
+ * @param node - The import declaration node
+ * @returns String with const declarations set to null
+ * 
+ * @example
+ * ```typescript
+ * // import React, { useState, useEffect } from 'react'
+ * // becomes: const React = null; const useState = null; const useEffect = null;
+ * 
+ * // import * as utils from 'utils'
+ * // becomes: const utils = null;
+ * 
+ * // import 'side-effect-module'
+ * // becomes: // removed import: side-effect-module
+ * ```
+ */
+function generateConstDeclarations(node: any): string {
+    const declarations: string[] = [];
+    
+    if (node.specifiers && node.specifiers.length > 0) {
+        for (const specifier of node.specifiers) {
+            if (specifier.type === 'ImportDefaultSpecifier') {
+                // import React from 'react' -> const React = null;
+                declarations.push(`const ${specifier.local.name} = null;`);
+            } else if (specifier.type === 'ImportSpecifier') {
+                // import { useState } from 'react' -> const useState = null;
+                declarations.push(`const ${specifier.local.name} = null;`);
+            } else if (specifier.type === 'ImportNamespaceSpecifier') {
+                // import * as React from 'react' -> const React = null;
+                declarations.push(`const ${specifier.local.name} = null;`);
+            }
+        }
+    } else {
+        // Side-effect import like import 'module' -> comment
+        declarations.push(`// removed import: ${node.source.value}`);
+    }
+    
+    return declarations.join(' ');
+}
+
+/**
+ * Vite plugin that replaces import statements with const declarations set to null
+ * 
+ * This plugin analyzes JavaScript/TypeScript files and replaces import statements
+ * whose source matches any of the provided patterns with const declarations set to null.
+ * This is useful for removing dependencies while maintaining variable declarations.
+ * 
+ * @param options - Configuration options for the plugin
+ * @returns Vite plugin object
+ * 
+ * @example
+ * ```typescript
+ * // Replace specific imports
+ * removeImportsPlugin({
+ *   patterns: ['react', 'vue', '@types/node']
+ * })
+ * 
+ * // Replace imports using regex patterns
+ * removeImportsPlugin({
+ *   patterns: [/^@types\//, /^react-/, 'lodash']
+ * })
+ * 
+ * // Transform example:
+ * // import React, { useState } from 'react';
+ * // becomes: const React = null; const useState = null;
+ * ```
+ */
+export function removeImportsPlugin(options: RemoveImportsPluginOptions): Plugin {
+    return {
+        name: 'rpgjs-remove-imports',
+        transform(code, id) {
+            // Skip non-JS/TS files
+            if (!id.match(/\.(js|ts|jsx|tsx)$/)) {
+                return null;
+            }
+
+            try {
+                const ast = parse(code, { 
+                    ecmaVersion: 'latest', 
+                    sourceType: 'module' 
+                }) as any;
+                
+                const s = new MagicString(code);
+                let hasChanges = false;
+
+                // Walk through the AST to find import declarations
+                walk.simple(ast, {
+                    ImportDeclaration(node: any) {
+                        const importSource = node.source.value;
+                        
+                        if (matchesPattern(importSource, options.patterns)) {
+                            const replacement = generateConstDeclarations(node);
+                            replaceNode(s, node.start, node.end, replacement);
+                            hasChanges = true;
+                        }
+                    }
+                });
+
+                // Only return transformed code if changes were made
+                if (hasChanges) {
+                    return {
+                        code: s.toString(),
+                        map: s.generateMap({ hires: true })
+                    };
+                }
+
+                return null;
+            } catch (error) {
+                // If parsing fails, return the original code
+                console.warn(`Failed to parse ${id}:`, error);
+                return null;
+            }
+        }
+    };
+}