82 lines
2.0 KiB
Markdown
82 lines
2.0 KiB
Markdown
# 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:
|
|
|
|
```ts
|
|
export default {
|
|
devToolbar: {
|
|
enabled: true,
|
|
position: "bottom-center",
|
|
defaultOpen: false,
|
|
scanOnNavigation: true,
|
|
scanOnHmr: true,
|
|
openEditor: true,
|
|
editor: "code",
|
|
},
|
|
};
|
|
```
|
|
|
|
Disable it for an app:
|
|
|
|
```ts
|
|
export default {
|
|
devToolbar: false,
|
|
};
|
|
```
|
|
|
|
## After replacement
|
|
|
|
Run from the repository root:
|
|
|
|
```bash
|
|
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`.
|