Ryth Azhur
c15c6f3e14
The codegen used to live in mizan-react before mizan-django before
protocol/mizan-generate. Each move left sediment in the previous
home; the bin entry in particular shadowed mizan-generate's own bin
in node_modules/.bin/, breaking `npx mizan-generate`. Caught at
integration time when the harness install picked up the stale link.
frontends/mizan-react/package.json:
- Removed bin entry pointing at the long-gone ./dist/generator/cli.mjs.
- Simplified the build script — dropped `cpSync('src/generator',
'dist/generator', ...)`. src/generator hasn't existed in this package
since the first move; the cpSync would silently fail at every build.
- Removed optionalDependencies (chokidar, minimatch, openapi-typescript) —
these were codegen-watcher deps, no longer relevant to the React adapter.
examples/{django,fastapi}-react-site/harness/package.json:
- Added `mizan-generate` as a file: devDep so `npx mizan-generate
--config <config.mjs>` resolves to the right binary in the monorepo.
Mirrors the install pattern the README documents for downstream users.
Verified: mizan-react vitest 33/33 (78 skipped — integration tests).
Codegen runs from harness via npx for both example apps.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@rythazhur/mizan (TypeScript)
React client for the mizan framework. See the monorepo root for full documentation.
Install
npm install @rythazhur/mizan@git+https://git.impactsoundworks.com/isw/mizan.git#workspace=react
Usage
You don't use this package directly. You use the generated hooks.
1. Configure
// django.config.mjs
export default {
source: {
django: {
managePath: '../backend/manage.py',
command: ['uv', 'run', 'python'],
},
},
output: 'src/api/generated.ts',
}
2. Generate
npx mizan-generate # once
npx mizan-generate --watch # dev mode
3. Wrap your app
import { DjangoContext } from '@/api'
<DjangoContext>
<App />
</DjangoContext>
DjangoContext is the only provider you need. It handles HTTP, WebSocket, CSRF, session init, context auto-fetching, and channel connections.
4. Use generated hooks
import { useCurrentUser, useEcho, useContactForm, useChatChannel } from '@/api'
// Context (SSR-hydrated, auto-refreshed)
const user = useCurrentUser()
// Server function
const echo = useEcho()
const result = await echo({ text: 'hello' })
// Form (Zod + server validation)
const form = useContactForm()
form.set('email', 'test@example.com')
await form.submit()
// Channel (WebSocket)
const chat = useChatChannel({ room: 'general' })
chat.send({ text: 'hello' })
chat.messages // typed, reactive
Generated Files
| File | Contents |
|---|---|
generated.django.tsx |
DjangoContext + typed hooks |
generated.mizan.ts |
Pydantic types |
generated.forms.ts |
Form hooks with Zod |
generated.channels.hooks.tsx |
Channel hooks |
index.ts |
Re-exports everything |
Sub-exports
| Import | When to use |
|---|---|
@rythazhur/mizan |
Core: mizanProvider, hooks, forms, errors |
@rythazhur/mizan/channels |
WebSocket channels |
@rythazhur/mizan/jwt |
JWT token management |
@rythazhur/mizan/client |
HTTP clients (CSR/SSR) |
@rythazhur/mizan/allauth |
Allauth UI components |
These are library internals used by the generated code. You should import from @/api (your generated index), not from the library directly.
Running Tests
# Unit tests (Vitest, jsdom)
npm test
# E2E tests (Playwright, real browser)
# Requires Docker backend running
npx playwright test