C6: Runtime kernel owns data, status, error — adapters subscribe

The kernel is no longer a blind refetch pipe. Each context entry has: { data, status: idle|loading|success|error, error } registerContext() returns { getState, subscribe, refetch, unregister }. Adapters subscribe to state changes via callbacks. The kernel does the fetch and notifies subscribers with the new state. React adapter uses useSyncExternalStore for tear-free reads. Vue adapter uses ref + subscribe callback. Svelte adapter uses readable store backed by kernel subscription. All three adapters also get: - Mutation hooks with { mutate, isPending, error } (fixes H5) - Vue: onServerPrefetch for Nuxt SSR (fixes M9) - Svelte: readable store auto-cleans up on unsubscribe (fixes H9) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-07 12:38:53 -04:00
parent 07f1c7842c
commit bb88fd984b
7 changed files with 586 additions and 361 deletions
--- a/packages/mizan-django/generate/generator/lib/adapters/react.mjs
+++ b/packages/mizan-django/generate/generator/lib/adapters/react.mjs
@@ -1,5 +1,8 @@
 /**
 * React Stage 2 — Generates hooks + context providers from Stage 1 output.
+ *
+ * Generated providers subscribe to the runtime kernel for state.
+ * The kernel owns data, status, and error. React just renders.
 */

 function pascalCase(str) {
@@ -19,8 +22,8 @@ export function generateReactAdapter(schema) {
        '',
        '// AUTO-GENERATED by mizan — do not edit',
        '',
-        "import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react'",
-        "import { registerContext, mizanCall, mizanFetch } from '@mizan/runtime'",
+        "import { createContext, useContext, useState, useEffect, useCallback, useRef, useSyncExternalStore, type ReactNode } from 'react'",
+        "import { registerContext, mizanFetch, mizanCall, type ContextState } from '@mizan/runtime'",
        '',
    ]

@@ -38,103 +41,114 @@ export function generateReactAdapter(schema) {
        lines.push('')
    }

-    // ── Global context hooks ────────────────────────────────────────────
+    // ── Helper hook: subscribe to kernel state ──────────────────────────

-    if (globalContexts.length > 0) {
-        const p = pascalCase('global')
+    lines.push('// Subscribe to kernel state via useSyncExternalStore')
+    lines.push('function useContextState<T>(')
+    lines.push('    name: string,')
+    lines.push('    params: Record<string, any>,')
+    lines.push('    fetchFn: () => Promise<T>,')
+    lines.push('    initialData?: T,')
+    lines.push('): ContextState<T> {')
+    lines.push('    const ref = useRef<ReturnType<typeof registerContext> | null>(null)')
+    lines.push('')
+    lines.push('    if (!ref.current) {')
+    lines.push('        ref.current = registerContext(name, params, fetchFn, initialData)')
+    lines.push('    }')
+    lines.push('')
+    lines.push('    const handle = ref.current')
+    lines.push('')
+    lines.push('    // Fetch on mount if no data')
+    lines.push('    useEffect(() => {')
+    lines.push("        if (handle.getState().status === 'idle') handle.refetch()")
+    lines.push('        return () => handle.unregister()')
+    lines.push('    }, [handle])')
+    lines.push('')
+    lines.push('    return useSyncExternalStore(')
+    lines.push('        handle.subscribe,')
+    lines.push('        handle.getState,')
+    lines.push('        handle.getState,')
+    lines.push('    )')
+    lines.push('}')
+    lines.push('')

-        lines.push(`// Global context — fetched once at app init`)
-        lines.push(`const GlobalCtx = createContext<${p}ContextData | null>(null)`)
-        lines.push('')
+    // ── Mutation hook helper ────────────────────────────────────────────

-        lines.push(`export function GlobalContextProvider({ children }: { children: ReactNode }) {`)
-        lines.push(`    const [data, setData] = useState<${p}ContextData | null>(() => {`)
-        lines.push(`        if (typeof window === 'undefined') return null`)
-        lines.push(`        const ssr = (window as any).__MIZAN_SSR_DATA__`)
-        lines.push(`        return ssr ?? null`)
-        lines.push(`    })`)
-        lines.push('')
-        lines.push(`    const refetch = useCallback(async () => {`)
-        lines.push(`        const result = await fetch${p}Context({} as any)`)
-        lines.push(`        setData(result)`)
-        lines.push(`    }, [])`)
-        lines.push('')
-        lines.push(`    useEffect(() => { if (!data) refetch() }, [data, refetch])`)
-        lines.push(`    useEffect(() => registerContext('global', {}, refetch), [refetch])`)
-        lines.push('')
-        lines.push(`    return <GlobalCtx.Provider value={data}>{children}</GlobalCtx.Provider>`)
-        lines.push('}')
-        lines.push('')
+    lines.push('// Mutation hook with loading/error state')
+    lines.push('function useMutation<TArgs, TResult>(')
+    lines.push('    callFn: (args: TArgs) => Promise<TResult>,')
+    lines.push('): { mutate: (args: TArgs) => Promise<TResult>; isPending: boolean; error: Error | null } {')
+    lines.push('    const [isPending, setIsPending] = useState(false)')
+    lines.push('    const [error, setError] = useState<Error | null>(null)')
+    lines.push('')
+    lines.push('    const mutate = useCallback(async (args: TArgs) => {')
+    lines.push('        setIsPending(true)')
+    lines.push('        setError(null)')
+    lines.push('        try {')
+    lines.push('            const result = await callFn(args)')
+    lines.push('            return result')
+    lines.push('        } catch (e) {')
+    lines.push('            setError(e as Error)')
+    lines.push('            throw e')
+    lines.push('        } finally {')
+    lines.push('            setIsPending(false)')
+    lines.push('        }')
+    lines.push('    }, [callFn])')
+    lines.push('')
+    lines.push('    return { mutate, isPending, error }')
+    lines.push('}')
+    lines.push('')

-        for (const fn of globalContexts) {
-            const hookPascal = pascalCase(fn.camelName)
-            lines.push(`export function use${hookPascal}(): ${fn.outputType} {`)
-            lines.push(`    const ctx = useContext(GlobalCtx)`)
-            lines.push(`    if (!ctx) throw new Error('use${hookPascal} requires GlobalContextProvider')`)
-            lines.push(`    return ctx.${fn.name}`)
-            lines.push('}')
-            lines.push('')
-        }
-    }
+    // ── Context hooks ───────────────────────────────────────────────────

-    // ── Named context providers ─────────────────────────────────────────
-
-    for (const [ctxName, ctxMeta] of namedContexts) {
+    for (const [ctxName, ctxMeta] of Object.entries(contextGroups)) {
        const p = pascalCase(ctxName)
        const ctxFunctions = functions.filter(fn => fn.isContext === ctxName)
        const paramEntries = Object.entries(ctxMeta.params || {})

-        lines.push(`// ${p} context`)
-        lines.push(`const ${p}Ctx = createContext<${p}ContextData | null>(null)`)
+        lines.push(`// ── ${p} Context ──`)
        lines.push('')

-        // Provider
-        lines.push(`export function ${p}Context({ children, ...params }: ${p}ContextParams & { children: ReactNode }) {`)
-        lines.push(`    const [data, setData] = useState<${p}ContextData | null>(() => {`)
-        lines.push(`        if (typeof window === 'undefined') return null`)
-        lines.push(`        const ssr = (window as any).__MIZAN_SSR_DATA__`)
-        if (ctxFunctions.length > 0) {
-            lines.push(`        if (ssr?.${ctxFunctions[0].name} !== undefined) return ssr`)
+        // Hook that returns the full kernel state
+        if (paramEntries.length > 0) {
+            lines.push(`export function use${p}Context(params: ${p}ContextParams): ContextState<${p}ContextData> {`)
+            lines.push(`    const ssrData = typeof window !== 'undefined' ? (window as any).__MIZAN_SSR_DATA__ : null`)
+            lines.push(`    return useContextState('${ctxName}', params, () => fetch${p}Context(params), ssrData)`)
+        } else {
+            lines.push(`export function use${p}Context(): ContextState<${p}ContextData> {`)
+            lines.push(`    const ssrData = typeof window !== 'undefined' ? (window as any).__MIZAN_SSR_DATA__ : null`)
+            lines.push(`    return useContextState('${ctxName}', {}, () => fetch${p}Context({} as any), ssrData)`)
        }
-        lines.push(`        return null`)
-        lines.push(`    })`)
-        lines.push('')
-        lines.push(`    const refetch = useCallback(async () => {`)
-        lines.push(`        const result = await fetch${p}Context(params)`)
-        lines.push(`        setData(result)`)
-
-        const deps = paramEntries.map(([pName]) => `params.${pName}`)
-        lines.push(`    }, [${deps.join(', ')}])`)
-        lines.push('')
-        lines.push(`    useEffect(() => { if (!data) refetch() }, [data, refetch])`)
-        lines.push(`    useEffect(() => registerContext('${ctxName}', params, refetch), [${deps.join(', ')}, refetch])`)
-        lines.push('')
-        lines.push(`    return <${p}Ctx.Provider value={data}>{children}</${p}Ctx.Provider>`)
        lines.push('}')
        lines.push('')

-        // Hooks
+        // Convenience hooks for individual data fields
        for (const fn of ctxFunctions) {
            const hookPascal = pascalCase(fn.camelName)
-            lines.push(`export function use${hookPascal}(): ${fn.outputType} | null {`)
-            lines.push(`    const ctx = useContext(${p}Ctx)`)
-            lines.push(`    return ctx?.${fn.name} ?? null`)
+            if (paramEntries.length > 0) {
+                lines.push(`export function use${hookPascal}(params: ${p}ContextParams): ${fn.outputType} | null {`)
+                lines.push(`    const state = use${p}Context(params)`)
+            } else {
+                lines.push(`export function use${hookPascal}(): ${fn.outputType} | null {`)
+                lines.push(`    const state = use${p}Context()`)
+            }
+            lines.push(`    return state.data?.${fn.name} ?? null`)
            lines.push('}')
            lines.push('')
        }
    }

-    // ── Mutation hooks ──────────────────────────────────────────────────
+    // ── Mutation hooks (with loading/error) ──────────────────────────────

    for (const fn of mutations) {
        const p = pascalCase(fn.camelName)
        if (fn.hasInput) {
            lines.push(`export function use${p}() {`)
-            lines.push(`    return useCallback((args: Parameters<typeof call${p}>[0]) => call${p}(args), [])`)
+            lines.push(`    return useMutation<Parameters<typeof call${p}>[0], Awaited<ReturnType<typeof call${p}>>>(call${p})`)
            lines.push('}')
        } else {
            lines.push(`export function use${p}() {`)
-            lines.push(`    return useCallback(() => call${p}(), [])`)
+            lines.push(`    return useMutation<void, Awaited<ReturnType<typeof call${p}>>>(() => call${p}() as any)`)
            lines.push('}')
        }
        lines.push('')
@@ -146,15 +160,21 @@ export function generateReactAdapter(schema) {
        const p = pascalCase(fn.camelName)
        if (fn.hasInput) {
            lines.push(`export function use${p}() {`)
-            lines.push(`    return useCallback((args: Parameters<typeof call${p}>[0]) => call${p}(args), [])`)
+            lines.push(`    return useMutation<Parameters<typeof call${p}>[0], Awaited<ReturnType<typeof call${p}>>>(call${p})`)
            lines.push('}')
        } else {
            lines.push(`export function use${p}() {`)
-            lines.push(`    return useCallback(() => call${p}(), [])`)
+            lines.push(`    return useMutation<void, Awaited<ReturnType<typeof call${p}>>>(() => call${p}() as any)`)
            lines.push('}')
        }
        lines.push('')
    }

+    // ── Re-export runtime types ─────────────────────────────────────────
+
+    lines.push("export type { ContextState } from '@mizan/runtime'")
+    lines.push("export { configure, initSession, MizanError } from '@mizan/runtime'")
+    lines.push('')
+
    return lines.join('\n')
 }