# Wand Enhancer Dependencies: Complete Guide to Runtime and Development Packages > Explore Wand Enhancer dependencies. Understand runtime packages like preact and ws, plus development tools including Vite and TypeScript. Get the complete guide. - Repository: [k1tbyte/Wand-Enhancer](https://github.com/k1tbyte/Wand-Enhancer) - Tags: how-to-guide - Published: 2026-07-13 --- **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`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/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`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/package.json) file in the [k1tbyte/Wand-Enhancer](https://github.com/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`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/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: ```bash cd web-panel pnpm install ``` Start the development server with hot-reload: ```bash pnpm dev ``` Build the bridge and panel for production (utilizes `esbuild` and the custom bridge script): ```bash pnpm build ``` Run the test suite (requires `vitest`, `@testing-library/preact`, and `jsdom`): ```bash pnpm test ``` ## Key Configuration Files Several configuration files in the `web-panel` directory reference these dependencies: - **[`web-panel/package.json`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/package.json)**: Declares all dependency versions and scripts - **[`web-panel/tsconfig.json`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/tsconfig.json)**: Configures TypeScript compiler options for strict checking - **[`web-panel/vite.config.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/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`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/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`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/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`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/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.