feat: createContext, useContext

examples/route-context.tsx

-import { createApp, defineComponent, inject, reactive, watchEffect } from 'vue';
+import { createApp, defineComponent, ref, reactive, toRaw, onMounted } from 'vue';
 import { Card, Space, Button, Tag } from 'ant-design-vue';
-import { useContext, createContext } from '../src/RouteContext';
+import { createRouteContext, useRouteContext } from '../src/RouteContext';
 
 import 'ant-design-vue/dist/antd.less';
 
 const DemoComponent = {
   setup() {
+    const jsonEditorRef = ref(null);
     const state = reactive({
       name: 'value',
     });
 
-    const { state: routeContext, provider: RouteContextProvider } = createContext({
-      hasSiderMenu: true,
+    const {
+      state: routeContext,
+      provider: RouteContextProvider
+    } = createRouteContext({
+      hasSideMenu: true,
       collapsed: true,
       isMobile: false,
       menuData: []
+    });
+
+    onMounted(() => {
+      console.log('jsonEditorRef', jsonEditorRef)
     })
 
     return () => (
@@ -38,10 +46,11 @@ const DemoComponent = {
             >
               Change Value
             </Button>
-
           </Space>
           <div style={{ margin: '12px 0' }}>
             <p>state.name: { JSON.stringify(state.name) }</p>
+            routeContext:
+            <pre>{  JSON.stringify(routeContext, null, 4) }</pre>
           </div>
         </Card>
         <div class="demo" style="background: rgb(244,244,244);">
@@ -56,14 +65,17 @@ const DemoComponent = {
 
 const TestChildComponent = defineComponent({
   setup () {
-    const routeContext = useContext();
+    const routeContext = useRouteContext();
     console.log('TestChildComponent.routeContext', routeContext)
 
     return () => {
       const { menuData, collapsed } = routeContext
       return (
         <div class="test-child-component">
-          menuData: {JSON.stringify(menuData)}
+          menuData:
+          <pre>
+            {JSON.stringify(menuData, null, 4)}
+          </pre>
           <p>
             collapsed: {collapsed.toString()}
           </p>

src/RouteContext.tsx

-import { defineComponent, h, reactive, provide, inject, toRefs, UnwrapRef, PropType, SetupContext, InjectionKey, VNode, RendererNode, RendererElement } from 'vue';
-
-import { RouteProps } from './typings';
+import { InjectionKey } from 'vue';
+import { createContext, useContext } from './hooks/context';
 import { PureSettings } from './defaultSettings';
 
 export interface RouteContextProps extends Partial<PureSettings> {
@@ -9,97 +8,17 @@ export interface RouteContextProps extends Partial<PureSettings> {
   isMobile?: boolean;
   prefixCls?: string;
   collapsed?: boolean;
-  hasSiderMenu?: boolean;
+  hasSideMenu?: boolean;
   hasHeader?: boolean;
-  siderWidth?: number;
+  sideWidth?: number;
   hasFooterToolbar?: boolean;
   hasFooter?: boolean;
   setHasFooterToolbar?: (bool: boolean) => void;
 }
 
-export const routeContextProps = {
-  isMobile: {
-    type: Boolean,
-    default: false,
-  },
-  menuData: {
-    type: Object as PropType<RouteProps[]>,
-    default: undefined,
-  },
-  prefixCls: {
-    type: String,
-    default: 'ant-pro',
-  },
-  collapsed: {
-    type: Boolean,
-  },
-  hasSiderMenu: {
-    type: Boolean,
-  },
-  siderWidth: {
-    type: Number,
-  },
-  hasFooterToolbar: {
-    type: Boolean,
-  },
-  hasFooter: {
-    type: Boolean,
-  },
-  setHasFooterToolbar: {
-    type: Function as PropType<(bool: boolean) => void>,
-  },
-};
-
-export const defaultRouteContext: RouteContextProps = {
-
-};
-
-export const contextKey: InjectionKey<RouteContextProps> = Symbol();
-
-export const useContext = () => {
-  return inject(contextKey, defaultRouteContext);
-};
-
-export const RouteContextProvider = defineComponent({
-  name: 'RouteContextProvider',
-  props: routeContextProps,
-  setup(props, { slots }: SetupContext) {
-    // const route = useRoute();
-    // if (route === undefined) {
-    //   console.info('route not used')
-    // }
-    // const route = useRoute();
-
-    const routeContext = reactive({
-      ...toRefs(props),
-      // ...toRefs(route),
-    });
-    provide(contextKey, routeContext);
+const routeContextInjectKey: InjectionKey<RouteContextProps> = Symbol();
 
-    return () => slots.default && slots.default();
-  },
-});
-
-export interface IRouteContext<T> {
-  provider: (props: any, ctx: any) => VNode<RendererNode, RendererElement, {
-    [key: string]: any;
-  }>
-  state: UnwrapRef<T> | T;
-}
-
-export const createContext = (context: RouteContextProps): IRouteContext<RouteContextProps> => {
-  const state = reactive<RouteContextProps>({
-    ...context,
-  });
-
-  const Provider = (_, ctx) => {
-    return h(RouteContextProvider, state, ctx.slots)
-  }
-
-  return {
-    provider: Provider,
-    state,
-  };
-}
+export const createRouteContext = (context: RouteContextProps) =>
+  createContext<RouteContextProps>(context, routeContextInjectKey);
 
-export default RouteContextProvider;
+export const useRouteContext = () => useContext<RouteContextProps>(routeContextInjectKey);

src/hooks/context/index.ts

+import {
+  defineComponent,
+  h,
+  InjectionKey,
+  provide,
+  inject,
+  reactive,
+  RendererElement,
+  RendererNode,
+  SetupContext,
+  toRefs,
+  UnwrapRef,
+  VNode,
+  PropType,
+  DefineComponent,
+} from 'vue';
+
+export type ContextType<T> = any;
+
+// VNode<RendererNode, RendererElement, {
+//     [key: string]: any;
+//   }>
+
+/**
+ (props: any, ctx: SetupContext) => DefineComponent<{}, () => VNode<RendererNode, RendererElement, {
+    [key: string]: any;
+  }>>;
+ */
+export interface CreateContext<T> {
+  provider: DefineComponent<{}, () => VNode | VNode[]>;
+  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> => {
+
+  const state = reactive<ContextType<T>>({
+    ...context,
+  });
+
+  const ContextProvider = defineComponent( {
+    name: 'ContextProvider',
+    inheritAttrs: false,
+    setup(props, { slots }: SetupContext) {
+      provide(contextInjectKey, state);
+      return () => slots.default();
+    },
+  })
+
+  return {
+    state,
+    provider: ContextProvider,
+  };
+};
+
+export const useContext = <T>(contextInjectKey: InjectionKey<ContextType<T>> = Symbol(), defaultValue?: ContextType<T>): T => {
+  return inject(contextInjectKey, defaultValue || {} as T)
+}
+
+// :: examples ::
+//
+// interface MyContextProps {
+//   param1: string;
+//   param2: boolean;
+//   someData?: string[];
+// }
+//
+// const { state, provider } = createContext<MyContextProps>({
+//   param1: 'abc',
+//   param2: false,
+//   someData: ['a', 'b', 'c', 'd']
+// });
+//
+// const value = useContext<MyContextProps>();
+//
+// console.log('value', toRaw(value));
+// console.log('param1', value.param1); // 'abc'
+// console.log('param2', value.param2); // false
+// console.log('someData', value.someData); // ['a', 'b', 'c', 'd']