@archie/devtools

Devtools runtime for Archie-generated applications.

Public API

This package exposes only two supported entrypoints:

• @archie/devtools -> archieDevTools
• @archie/devtools/client -> ArchieDevToolProvider, ArchieDevToolProviderProps

Everything else is internal implementation detail.

Usage

1. Configure the Vite plugin

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { archieDevTools } from '@archie/devtools';

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

2. Bootstrap the app runtime

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { ArchieDevToolProvider } from '@archie/devtools/client';
import App, { router } from './App';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ArchieDevToolProvider router={router}>
      <App />
    </ArchieDevToolProvider>
  </StrictMode>,
);

3. Export the router

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

export const router = createBrowserRouter([
  // routes
]);

export default function App() {
  return <RouterProvider router={router} />;
}

Responsibilities

• archieDevTools() handles compile-time editor metadata and internal DnD scope injection.
• ArchieDevToolProvider handles runtime bootstrap: DnD provider, route sync, sanitizer install, and inspector initialization.

Requirements

• React 18+
• React Router DOM 6.4+
• Vite 5+

Local linking

pnpm add file:../archie-devtools

After changing the library:

pnpm build

Development

pnpm test
pnpm typecheck

Tests follow a colocated-by-feature convention:

• small modules keep *.test.ts(x) beside the source file
• larger subsystems may use a local __tests__/ folder next to the feature
• src/client/dnd/design-mode/__tests__/ is the reference pattern for multi-file feature coverage