Wand Enhancer Dependencies: Complete Guide to Runtime and Development Packages

Wand Enhancer requires four runtime dependencies (preact, ws, @lingui/core, @lingui/react) and twenty development dependencies including Vite, TypeScript, ESLint, and Tailwind CSS, all declared in web-panel/package.json.

The Wand Enhancer project is an Electron-based tool that enhances the Wand application through a web-panel interface built with modern TypeScript and Preact. All third-party libraries required to develop, build, and run this interface are strictly managed within the web-panel/package.json file in the k1tbyte/Wand-Enhancer repository. Understanding these dependencies is essential for contributors who need to set up local development environments or extend the panel's functionality.

Runtime Dependencies

Runtime dependencies are required for the web-panel to function inside the Electron bridge. These four packages handle the UI rendering, internationalization, and WebSocket communication.

UI Framework with Preact

preact (^10.27.2) serves as the core UI library. This lightweight, React-compatible framework powers all component rendering while maintaining a minimal bundle size. The project leverages Preact's compatibility layer to use React-style JSX syntax without the overhead of the full React library.

Internationalization via Lingui

The application uses Lingui for translation management. Two packages handle this at runtime:

• @lingui/core (^6.3.0) provides the core internationalization logic for translating UI strings
• @lingui/react (^6.3.0) offers React-compatible bindings that integrate with Preact components

These libraries enable compile-time message extraction and runtime locale switching for multi-language support.

WebSocket Communication

ws (^8.18.3) functions as the WebSocket client that enables real-time communication between the Electron bridge and Wand's backend. This dependency is critical for the panel to send and receive data from the main application process.

Development Dependencies

The project uses twenty development dependencies to handle transpilation, bundling, type-checking, linting, testing, and styling. These are only required during the build process and are not shipped with the production bundle.

Build Toolchain

Vite (^7.3.2) serves as the primary development server and build tool. The configuration in web-panel/vite.config.ts integrates several plugins:

• @vitejs/plugin-react (^5.2.0) enables JSX/TSX transpilation
• esbuild (0.27.7) handles fast bundling and transpilation during the build process
• @lingui/vite-plugin (^6.3.0) integrates the Lingui workflow into the dev server

TypeScript and Linting

The project maintains strict code quality through TypeScript (^5.9.3) and ESLint (^9.39.4):

• typescript-eslint (^8.61.0) provides the parser and rules for TypeScript files
• @eslint/js (^9.39.4) supplies core linting rules
• eslint-plugin-react-hooks (^7.0.1) enforces rules for React hooks (compatible with Preact)
• eslint-plugin-react-refresh (^0.5.2) supports hot-reloading lint checks
• globals (^16.5.0) provides global variable typings for the linting environment

Type definitions are supplied by @types/node (^24.12.0), @types/react (^19.2.14), and @types/react-dom (^19.2.3). The React types are required because Lingui's typings depend on them, even when using Preact.

Styling with Tailwind CSS

The UI utilizes Tailwind CSS (^4.2.1) for utility-first styling:

• @tailwindcss/vite (^4.2.1) integrates Tailwind into the Vite build pipeline
• prettier-plugin-tailwindcss (^0.7.2) ensures consistent formatting of Tailwind class lists
• prettier (^3.8.1) handles general code formatting

Testing Utilities

The testing stack relies on Vitest (^4.1.8) as the test runner:

• @testing-library/preact (^3.2.4) provides utilities for rendering and testing Preact components
• jsdom (^29.1.1) emulates the DOM environment for unit tests

Lingui Development Tools

Four additional Lingui packages facilitate translation management:

• @lingui/cli (^6.3.0) extracts and compiles translation files
• @lingui/babel-plugin-lingui-macro (^6.3.0) enables compile-time message extraction
• @lingui/format-po (^6.3.0) handles PO file formatting

Installation and Usage

All dependencies are installed via pnpm from the web-panel directory. The following commands demonstrate typical development workflows:

Install all runtime and development dependencies:

cd web-panel
pnpm install

Start the development server with hot-reload:

pnpm dev

Build the bridge and panel for production (utilizes esbuild and the custom bridge script):

pnpm build

Run the test suite (requires vitest, @testing-library/preact, and jsdom):

pnpm test

Key Configuration Files

Several configuration files in the web-panel directory reference these dependencies:

• web-panel/package.json: Declares all dependency versions and scripts
• web-panel/tsconfig.json: Configures TypeScript compiler options for strict checking
• web-panel/vite.config.ts: Integrates Tailwind, Lingui, and React plugins
• web-panel/bridge/build.mjs: Custom build script that bundles the bridge using esbuild

Summary

• Wand Enhancer separates runtime and development dependencies in web-panel/package.json
• Runtime dependencies include preact for UI, @lingui/core/@lingui/react for i18n, and ws for WebSocket communication
• Development dependencies encompass Vite, TypeScript, ESLint, Tailwind CSS, Vitest, and Lingui CLI tools
• Type checking requires React type definitions (@types/react) despite using Preact, due to Lingui's dependency chain
• Build process relies on Vite with esbuild for fast transpilation and bundling
• Testing uses Vitest with Preact Testing Library and jsdom for DOM emulation

Frequently Asked Questions

What package manager does Wand Enhancer use?

The project uses pnpm for dependency management. Install all dependencies by running pnpm install from the web-panel directory. This will install both runtime and development dependencies according to the lockfile.

Why does the project need React types if it uses Preact?

The @types/react and @types/react-dom packages are required because Lingui's TypeScript definitions depend on React types internally. While the runtime uses Preact for its smaller bundle size, the type system needs React declarations to satisfy Lingui's type constraints.

Can I use npm instead of pnpm to install dependencies?

While the project is configured for pnpm, npm may work but is not officially supported. The web-panel/package.json contains scripts and configurations tested specifically with pnpm. Using npm might lead to resolution differences with the esbuild binary or Vite plugins.

How do I update the Lingui translation files after modifying source code?

Run the Lingui CLI extraction command (typically configured in package.json scripts) to scan for new translation strings. This requires @lingui/cli and @lingui/babel-plugin-lingui-macro to parse the source code and update the PO files.

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