Wirestate

Appearance

@wirestate/dev [monorepo] [docs] ​

npmlicense

Bundler plugins enabling hot reload for Wirestate services.

Use this package during development so that editing a service file swaps the affected containers in place instead of remounting the application tree. It applies to the dev server only and has no effect on production builds.

The swap rebuilds containers that have a registered owner. ContainerProvider from @wirestate/react registers the managed containers it creates, so React applications need no setup. A container created elsewhere, including one provided to Lit, is rebuilt only after it is registered as its own hot-swap owner.

Install ​

bash
npm install --save-dev @wirestate/dev

Start ​

Register the plugin in the Vite config, before the framework plugin:

ts
import { wirestate } from "@wirestate/dev/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [wirestate(), react()],
});

Application code stays as it is. Containers, providers, and services need no changes.

Editing a service now reports the swap instead of reloading the page:

[wirestate] Hot swap replaced 1 container(s).

How It Works ​

Wirestate keys bindings by class identity, and a hot update replaces the class. The plugin wraps every module mentioning Injectable in two markers: a header that opens the module in the Wirestate hot runtime and a footer that closes it. While the module body evaluates, @Injectable() registers each decorated class under a stable id derived from the module path and the class name, so nothing is parsed. A module that declares such classes accepts its own hot updates. The update stops propagating up the import graph, and the runtime rebuilds the containers bound to the previous class: teardown deepest-first, then replacements root-first, as one synchronous step.

React state, DOM state, scroll position, and form inputs survive. Services are constructed fresh, so resource work belongs in @OnProvision and cleanup in @OnDeprovision.

What Is Included ​

  • @wirestate/dev/vite: the wirestate() Vite plugin, with include and exclude options for projects using different file conventions.
  • The package root: transformHotModule, createHotHeader, and createHotFooter, the bundler-agnostic transform the adapters build on.

By default .ts, .mts, .js, and .mjs files are transformed, skipping node_modules, declaration files, test files, and server-side transforms. Component files (.tsx, .jsx) are excluded because React Fast Refresh already owns them, so keep services in their own modules.

Every module-scope class decorated with @Injectable() participates, whatever name the decorator is imported under. Classes created later at runtime, for example inside a factory function, are not registered.

Requires @wirestate/core in the application: the injected markers import the @wirestate/core/hot runtime that performs the swap. The package has no other dependencies.

Learn More ​

License ​

MIT