WRNexusJS/REPLACE-FILES.md

WRNexusJS DevToolbar Integration

Extract this ZIP directly over the WRNexusJS repository root and allow these files to be replaced.

Replace files one by one

1. tsconfig.json

   • Adds workspace path aliases for @wrnexus/dev-toolbar exports.

2. packages/styles/src/config.ts

   • Adds DevToolbarConfig and devToolbar to AppConfig.

3. packages/dev-server/package.json

   • Confirms the workspace dependency on @wrnexus/dev-toolbar.

4. packages/dev-server/src/hmr.ts

   • Adds generic JSON broadcasting for toolbar events.

5. packages/dev-server/src/watch.ts

   • Clears stale source issues and triggers rescans for CSS changes.

6. packages/dev-server/src/runtime.ts

   • Serves toolbar routes.
   • Injects the toolbar only in development HTML.
   • Collects route, component, layout, and request errors.
   • Sends HMR/browser events used by the toolbar.

7. packages/dev-server/src/index.ts

   • Resolves toolbar configuration.
   • Creates the server issue collector.
   • Connects collector updates to HMR.
   • Passes the toolbar into runtime and watcher dependencies.

8. packages/dev-server/src/serve-entry.ts

   • Passes config.devToolbar from wrnexus.config.ts into the server.

9. packages/dev-toolbar/src/client/runtime.ts

   • Loads server-side issues.
   • Receives live toolbar issue/scan messages.
   • Rescans after HMR and client navigation.

Configuration

The toolbar is enabled automatically in development. Optional configuration:

export default {
  devToolbar: {
    enabled: true,
    position: "bottom-center",
    defaultOpen: false,
    scanOnNavigation: true,
    scanOnHmr: true,
    openEditor: true,
    editor: "code",
  },
};

Disable it for an app:

export default {
  devToolbar: false,
};

After replacement

Run from the repository root:

bun install
bun run format
bun run typecheck
bun run lint
bun test
bun run check

The toolbar is development-only and is not injected when the server mode is production.