How Custom Renderer Scripts Are Injected into Wand-Enhancer

Wand-Enhancer injects custom renderer scripts by copying user-selected JavaScript files from the PatchConfig.CustomScriptPaths collection into the remote-panel/renderer-scripts directory via the CopySelectedJavaScriptFiles method, then bundling them into the bridge build for runtime execution by the Electron web panel.

Wand-Enhancer is an open-source modification framework for the Wand platform that enables developers to extend the remote web panel functionality through custom JavaScript. The injection mechanism orchestrates file operations between the WPF configuration interface and the core enhancement engine, ensuring user-provided scripts are available to the embedded web view at runtime. Understanding how custom renderer scripts are injected requires tracing the data flow from UI selection through file system operations to final runtime loading.

Step 1: Script Selection and Path Persistence

The injection pipeline begins in the WPF user interface, where users select JavaScript files through the Patch Vectors dialog. The selected file paths are stored in the configuration model before the enhancement process initiates.

The PatchConfig Model

The PatchConfig class maintains the list of target scripts in the CustomScriptPaths property. This collection stores absolute file paths as strings, ensuring the enhancer can locate the scripts during the file copying phase.

// WandEnhancer/Models/PatchConfig.cs
public class PatchConfig
{
    public List<string> CustomScriptPaths { get; set; } = new List<string>();
    // ... additional configuration properties
}

The PatchVectorsPopup Interface

When users confirm their selection in the Patch Vectors dialog, the PatchVectorsPopup.xaml.cs file populates the configuration object. The code extracts the full path from each selected script object and assigns the list to the configuration instance.

// WandEnhancer/View/Popups/PatchVectorsPopup.xaml.cs
CustomScriptPaths = _selectedScripts
    .Select(s => s.FullPath)
    .ToList();

This persistence step ensures the enhancement engine receives the complete list of JavaScript files to inject into the remote panel.

Step 2: File Copying During Enhancement

Once the configuration is established, the Enhancer.cs core logic handles the physical injection of files into the target directory structure. This occurs during the enhancement pipeline before the bridge compilation stage.

The CopySelectedJavaScriptFiles Method

The CopySelectedJavaScriptFiles method in Enhancer.cs accepts the list of custom script paths and the target directory root. It iterates through the configuration list, verifies file existence, and copies valid JavaScript files into the renderer-scripts folder.

// WandEnhancer/Core/Enhancer.cs
int selectedScriptCount = CopySelectedJavaScriptFiles(
    _config.CustomScriptPaths,
    targetScriptsRoot);

Target Directory Resolution

The targetScriptsRoot parameter points to the remote-panel/renderer-scripts directory within the web-panel distribution folder. The method ensures this directory exists before copying, creating it if necessary under web-panel/dist/renderer-scripts. This location serves as the staging area where the TypeScript bridge expects to find user-provided scripts during the build process.

The copying operation validates each path in _config.CustomScriptPaths against the file system, skipping missing files while reporting successful copies via the return count.

Step 3: Bridge Build and Runtime Loading

After the physical files are copied, the enhancement pipeline triggers the bridge compilation process. The TypeScript bridge automatically bundles any JavaScript files found in the renderer-scripts directory, making them available to the Electron runtime.

Build Integration

The bridge build process, managed in web-panel/bridge/build.mjs, scans the web-panel/dist/renderer-scripts directory. It embeds these scripts into the final bridge.cjs output, ensuring they are packaged within the ASAR archive that Wand loads at startup.

Runtime Script Execution

At runtime, the remote panel initializes the bridge loader, which executes all scripts from the renderer-scripts bundle. Custom scripts gain access to the same IPC channels (wand-remote-*) as built-in scripts, allowing them to manipulate the UI, respond to game status events, and implement trainer logic through the exposed API.

// Conceptual runtime loading within the bridge
import { loadCustomScripts } from "./renderer-scripts";
loadCustomScripts(); // Executes during bridge initialization

Summary

• Configuration Storage: Selected script paths are stored in PatchConfig.CustomScriptPaths via PatchVectorsPopup.xaml.cs before enhancement begins.
• File Operations: The CopySelectedJavaScriptFiles method in Enhancer.cs copies validated JavaScript files from their original locations to targetScriptsRoot (the remote-panel/renderer-scripts directory).
• Build Integration: The TypeScript bridge automatically bundles files from the renderer-scripts folder during compilation, embedding them into web-panel/dist/bridge.cjs.
• Runtime Access: Injected scripts load automatically when the remote panel initializes, with full access to Wand's IPC channels and game state events.

Frequently Asked Questions

Where does Wand-Enhancer store the paths to custom renderer scripts before injection?

The paths are stored in the CustomScriptPaths property of the PatchConfig model class. The PatchVectorsPopup.xaml.cs file populates this list from the user's file selection, storing absolute paths as strings for the enhancement engine to access later.

What method is responsible for copying the custom scripts into the target directory?

The CopySelectedJavaScriptFiles method in WandEnhancer/Core/Enhancer.cs handles the copying. It accepts the configuration's script path list and the targetScriptsRoot directory parameter, verifying file existence before copying each script to the remote-panel/renderer-scripts folder.

Which directory serves as the destination for injected custom scripts?

The target destination is the remote-panel/renderer-scripts directory, resolved as targetScriptsRoot during the enhancement process. This folder resides within the web-panel/dist output directory and serves as the staging area for the bridge build system.

How do injected custom scripts communicate with the main Wand application?

Custom scripts communicate through the same IPC channels (wand-remote-*) used by built-in scripts. Once loaded by the bridge runtime, these scripts can emit and listen to IPC events to interact with game state, modify UI elements, and execute trainer functionality within the Electron remote panel.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}