Testing & local dev

Project audit (rect check)

Run the bundle-level audit before browser testing or publishing:

npx rect check
npx rect check --json

It builds the project and checks both authoring sources and the compiled Rect contract. Each warning/error includes an English fix, while --json provides stable codes for coding agents and CI.

Unit testing (@rectsh/rect/testing)

createMockRect is a full in-memory RectStore with no postMessage bridge. Feed it to RectProvider via the store prop and your components run against real store semantics (set/update/patch, paths, revision) synchronously.

import { render } from '@testing-library/react';
import { RectProvider } from '@rectsh/rect/react';
import { createMockRect } from '@rectsh/rect/testing';

test('renders the title', () => {
  const rect = createMockRect({ title: 'Draft', body: '' });
  render(
    <RectProvider store={rect}>
      <Editor />
    </RectProvider>,
  );
  // drive it like the host would:
  rect.setState?.({ title: 'Edited', body: '' });
  expect(rect.snapshot().title).toBe('Edited');
});

Local development (@rectsh/rect/dev)

Instead of the build → upload → open loop, develop in a normal browser with Vite HMR against a mock host. A dev.html harness embeds your view in an iframe and plays the host:

<!-- dev.html -->
<div id="panel"></div>
<iframe id="view" src="/index.html?rectSession=dev"></iframe>

<script type="module">
  import { createRectDevHost, mountRectDevPanel } from '@rectsh/rect/dev';
  import spec from './rect.view.json';

  const iframe = document.getElementById('view');
  const host = createRectDevHost({ iframe, initialState: spec.example });
  mountRectDevPanel(host, document.getElementById('panel'));
</script>

Run vite and open /dev.html. Your view renders in the iframe; the panel is a live JSON editor. Pushing state from the panel is exactly what an agent's rect_patch does — so you can see how your view reacts to live updates while you build it, with HMR on every save. (The CLI can drive this same dev host through the reserved dev id.)

The ?rectSession=dev on the iframe src is how the view finds the host; it must match the host's sessionToken (default 'dev').