DevTools

The retend-web-devtools package provides an in-app overlay for inspecting the component tree, viewing props, and highlighting rendered UI regions.

Features

• Component Inspector: Displays the application's component tree.
• Props Viewer: Inspects the props passed to a component.
• DOM Highlighting: Highlights the DOM elements corresponding to components in the devtools tree.
• Component Search: Finds components by name in the component tree.
• Customizable Interface: Allows selecting the inspector's highlight colors.

Installation

The devtools are installed as a development dependency:

npm install -D retend-web-devtools

Usage

Wrapping the application root with the <RetendDevTools> component enables the devtools.

In development, retend-web-devtools enables the full devtools build. In production, it resolves to a no-op component.

Client-Side Rendered (CSR) Apps

The component is imported and used to wrap the application root:

import { renderToDOM } from 'retend-web';
import { RetendDevTools } from 'retend-web-devtools';
import App from './App';

const root = document.getElementById('app')!;

renderToDOM(root, () => (
  <RetendDevTools>
    <App />
  </RetendDevTools>
));

Server-Side Rendered (SSR) / Hydration

When retend-server is used with hydrate, the wrap option is used:

import { hydrate } from 'retend-server/client';
import { createRouter } from './router';
import { RetendDevTools } from 'retend-web-devtools';

hydrate(createRouter, {
  rootId: 'app',
  wrap(root) {
    return <RetendDevTools>{root}</RetendDevTools>;
  },
});