fix: readonly createContext

examples/route-context.tsx

@@ -6,14 +6,13 @@ import 'ant-design-vue/dist/antd.less';
 
 const DemoComponent = {
   setup() {
-    const jsonEditorRef = ref(null);
     const state = reactive({
       name: 'value',
     });
 
     const {
       state: routeContext,
-      provider: RouteContextProvider
+      Provider: RouteContextProvider
     } = createRouteContext({
       hasSideMenu: true,
       collapsed: true,
@@ -21,10 +20,6 @@ const DemoComponent = {
       menuData: []
     });
 
-    onMounted(() => {
-      console.log('jsonEditorRef', jsonEditorRef)
-    })
-
     return () => (
       <div class="components">
         <h2># Template</h2>
@@ -66,7 +61,7 @@ const DemoComponent = {
 const TestChildComponent = defineComponent({
   setup () {
     const routeContext = useRouteContext();
-    console.log('TestChildComponent.routeContext', routeContext)
+    console.log('TestChildComponent.routeContext', routeContext);
 
     return () => {
       const { menuData, collapsed } = routeContext

src/hooks/context/index.ts

 import {
   defineComponent,
-  h,
   InjectionKey,
   provide,
   inject,
   reactive,
-  RendererElement,
-  RendererNode,
+  readonly,
   SetupContext,
-  toRefs,
   UnwrapRef,
   VNode,
-  PropType,
   DefineComponent,
 } from 'vue';
 
 export type ContextType<T> = any;
 
 export interface CreateContext<T> {
-  provider: DefineComponent<{}, () => VNode | VNode[]>;
+  Provider: DefineComponent<{}, () => VNode | VNode[] | undefined, any>;
   state: UnwrapRef<T> | T;
 }
 
-const RouteContextProvider = defineComponent({
-  name: 'RouteContextProvider',
-  inheritAttrs: false,
-  props: {
-    contextInjectKey: {
-      type: [Object, String, Symbol] as PropType<InjectionKey<any>>,
-      required: true,
-    },
-  },
-  setup(props, { slots, attrs }: SetupContext) {
-    console.log('props', props, attrs);
-    const context = reactive({
-      ...attrs,
-    });
-    provide(props.contextInjectKey, context);
-
-    return () => slots.default();
-  },
-});
-
 export const createContext = <T>(context: ContextType<T>,
-                                 contextInjectKey: InjectionKey<ContextType<T>> = Symbol()
-                                ): CreateContext<T> => {
+                                 contextInjectKey: InjectionKey<ContextType<T>> = Symbol(),
+): CreateContext<T> => {
 
   const state = reactive<ContextType<T>>({
     ...context,
   });
 
-  const ContextProvider = defineComponent( {
+  const ContextProvider = defineComponent({
     name: 'ContextProvider',
     inheritAttrs: false,
     setup(props, { slots }: SetupContext) {
-      provide(contextInjectKey, state);
+      provide(contextInjectKey, readonly(state));
       return () => slots.default();
     },
-  })
+  });
 
   return {
     state,
-    provider: ContextProvider,
+    Provider: ContextProvider,
   };
 };
 
 export const useContext = <T>(contextInjectKey: InjectionKey<ContextType<T>> = Symbol(), defaultValue?: ContextType<T>): T => {
-  return inject(contextInjectKey, defaultValue || {} as T)
-}
+  return readonly(inject(contextInjectKey, defaultValue || {} as T));
+};
 
 // :: examples ::
 //