# How Custom Renderer Scripts Are Injected into Wand-Enhancer

> Discover how Wand-Enhancer injects custom renderer scripts using CopySelectedJavaScriptFiles and bundles them into the Electron web panel for runtime execution. Learn more about this process.

- Repository: [k1tbyte/Wand-Enhancer](https://github.com/k1tbyte/Wand-Enhancer)
- Tags: internals
- Published: 2026-09-01

---

**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.

```csharp
// 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`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/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.

```csharp
// 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`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/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`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/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.

```csharp
// 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.

```typescript
// 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`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/PatchVectorsPopup.xaml.cs) before enhancement begins.
- **File Operations**: The `CopySelectedJavaScriptFiles` method in [`Enhancer.cs`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/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`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/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`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/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.