Files

Ryth Azhur 558c7c6d6c Update documentation to reflect Djarea's RPC architecture

- Root README: full quick start, architecture diagram, feature table,
  code generation workflow, error handling, forms, channels, testing
- Django README: setup, auth variations, contexts, forms, channels
- React README: clarify that generated hooks are the API (not library
  primitives), DjangoContext is the only provider needed, sub-exports
  are internals

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

2026-03-31 01:22:32 -04:00

2.4 KiB

Raw Blame History

@rythazhur/djarea (TypeScript)

React client for the Djarea framework. See the monorepo root for full documentation.

Install

npm install @rythazhur/djarea@git+https://git.impactsoundworks.com/isw/djarea.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 djarea-generate        # once
npx djarea-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.djarea.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/djarea`	Core: DjareaProvider, hooks, forms, errors
`@rythazhur/djarea/channels`	WebSocket channels
`@rythazhur/djarea/jwt`	JWT token management
`@rythazhur/djarea/client`	HTTP clients (CSR/SSR)
`@rythazhur/djarea/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

2.4 KiB Raw Blame History