Two-stage codegen: React + Vue + Svelte from one schema
Stage 1 (framework-agnostic):
types.ts — OpenAPI interfaces
contexts/<name>.ts — fetchXxxContext(params) using mizanFetch
mutations/<name>.ts — callXxx(args) using mizanCall
functions/<name>.ts — callXxx(args) using mizanCall
index.ts — re-exports
Stage 2 (per framework):
react.tsx — hooks + context providers + SSR hydration
vue.ts — composables with provide/inject + ref/computed
svelte.ts — writable/derived store factories
New packages:
mizan-runtime — the kernel (~200 lines, zero framework deps)
configure(), initSession(), registerContext(), invalidate(),
mizanFetch(), mizanCall(), MizanError
mizan-vue — Vue adapter (package.json, codegen template)
mizan-svelte — Svelte adapter (package.json, codegen template)
CLI: mizan-generate --target react,vue,svelte
Config: target: 'react' (default) in django.config.mjs
Verified: codegen produces 33 functions across 2 contexts,
14 plain functions, 0 mutations, generating all three Stage 2
outputs from one schema fetch.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
96
examples/django-react-site/harness/src/api/vue.ts
Normal file
96
examples/django-react-site/harness/src/api/vue.ts
Normal file
@@ -0,0 +1,96 @@
|
||||
// AUTO-GENERATED by mizan — do not edit
|
||||
|
||||
import { ref, computed, watch, onMounted, onUnmounted, provide, inject, type Ref, type ComputedRef, type InjectionKey } from 'vue'
|
||||
import { registerContext } from '@mizan/runtime'
|
||||
|
||||
import { fetchGlobalContext, type GlobalContextData, type GlobalContextParams, fetchLocalContext, type LocalContextData, type LocalContextParams, callEcho, callAdd, callWhoami, callHttpOnlyEcho, callStaffOnly, callSuperuserOnly, callVerifiedOnly, callMultiply, callNotImplementedFn, callBuggyFn, callPermissionCheckFn, callWsWhoami, callJwtObtain, callJwtRefresh } from '../index'
|
||||
|
||||
// Global context
|
||||
const GlobalKey: InjectionKey<{ data: Ref<GlobalContextData | null>, loading: Ref<boolean> }> = Symbol('global')
|
||||
|
||||
export function provideGlobalContext() {
|
||||
const data = ref<GlobalContextData | null>(null)
|
||||
const loading = ref(true)
|
||||
|
||||
const refetch = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
data.value = await fetchGlobalContext({} as any)
|
||||
} catch (e) { console.error('[mizan] global fetch failed:', e) }
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
let unregister: (() => void) | null = null
|
||||
onMounted(() => {
|
||||
refetch()
|
||||
unregister = registerContext('global', {}, refetch)
|
||||
})
|
||||
onUnmounted(() => { unregister?.() })
|
||||
|
||||
provide(GlobalKey, { data, loading })
|
||||
}
|
||||
|
||||
export function useCurrentUser(): ComputedRef<currentUserOutput | null> {
|
||||
const ctx = inject(GlobalKey)
|
||||
if (!ctx) throw new Error('useCurrentUser requires provideGlobalContext in a parent')
|
||||
return computed(() => ctx.data.value?.current_user ?? null)
|
||||
}
|
||||
|
||||
// Local context
|
||||
const LocalKey: InjectionKey<{ data: Ref<LocalContextData | null>, loading: Ref<boolean> }> = Symbol('local')
|
||||
|
||||
export function provideLocalContext(params: { name: string }) {
|
||||
const data = ref<LocalContextData | null>(null)
|
||||
const loading = ref(true)
|
||||
|
||||
const refetch = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
data.value = await fetchLocalContext(params as any)
|
||||
} catch (e) { console.error('[mizan] local fetch failed:', e) }
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
let unregister: (() => void) | null = null
|
||||
onMounted(() => {
|
||||
refetch()
|
||||
unregister = registerContext('local', params, refetch)
|
||||
})
|
||||
onUnmounted(() => { unregister?.() })
|
||||
|
||||
provide(LocalKey, { data, loading })
|
||||
}
|
||||
|
||||
export function useGreet(): ComputedRef<greetOutput | null> {
|
||||
const ctx = inject(LocalKey)
|
||||
if (!ctx) throw new Error('useGreet requires provideLocalContext in a parent')
|
||||
return computed(() => ctx.data.value?.greet ?? null)
|
||||
}
|
||||
|
||||
export const useEcho = callEcho
|
||||
|
||||
export const useAdd = callAdd
|
||||
|
||||
export const useWhoami = callWhoami
|
||||
|
||||
export const useHttpOnlyEcho = callHttpOnlyEcho
|
||||
|
||||
export const useStaffOnly = callStaffOnly
|
||||
|
||||
export const useSuperuserOnly = callSuperuserOnly
|
||||
|
||||
export const useVerifiedOnly = callVerifiedOnly
|
||||
|
||||
export const useMultiply = callMultiply
|
||||
|
||||
export const useNotImplementedFn = callNotImplementedFn
|
||||
|
||||
export const useBuggyFn = callBuggyFn
|
||||
|
||||
export const usePermissionCheckFn = callPermissionCheckFn
|
||||
|
||||
export const useWsWhoami = callWsWhoami
|
||||
|
||||
export const useJwtObtain = callJwtObtain
|
||||
|
||||
export const useJwtRefresh = callJwtRefresh
|
||||
Reference in New Issue
Block a user