fix: update RouteContext

examples/route-context.tsx

+import { createApp, defineComponent, inject, reactive, watchEffect } from 'vue';
+import { Card, Space, Button, Tag } from 'ant-design-vue';
+import { useContext, createContext } from '../src/RouteContext';
+
+import 'ant-design-vue/dist/antd.less';
+
+const DemoComponent = {
+  setup() {
+    const state = reactive({
+      name: 'value',
+    });
+
+    const { state: routeContext, provider: RouteContextProvider } = createContext({
+      hasSiderMenu: true,
+      collapsed: true,
+      isMobile: false,
+      menuData: []
+    })
+
+    return () => (
+      <div class="components">
+        <h2># Template</h2>
+        <Card style={{ marginBottom: '24px', background: 'rgb(244,244,244)' }}>
+          <Space size="middle">
+            <Button
+              type="primary"
+              onClick={() => {
+                state.name = new Date().getTime().toString()
+                routeContext.collapsed = !routeContext.collapsed
+                routeContext.menuData = [
+                  {
+                    path: `/dashboard/${state.name}`,
+                    name: `${state.name}`,
+                    meta: { title: `custom title - ${state.name}` },
+                  }
+                ]
+              }}
+            >
+              Change Value
+            </Button>
+
+          </Space>
+          <div style={{ margin: '12px 0' }}>
+            <p>state.name: { JSON.stringify(state.name) }</p>
+          </div>
+        </Card>
+        <div class="demo" style="background: rgb(244,244,244);">
+          <RouteContextProvider>
+            <TestChildComponent />
+          </RouteContextProvider>
+        </div>
+      </div>
+    );
+  },
+};
+
+const TestChildComponent = defineComponent({
+  setup () {
+    const routeContext = useContext();
+    console.log('TestChildComponent.routeContext', routeContext)
+
+    return () => {
+      const { menuData, collapsed } = routeContext
+      return (
+        <div class="test-child-component">
+          menuData: {JSON.stringify(menuData)}
+          <p>
+            collapsed: {collapsed.toString()}
+          </p>
+        </div>
+      )
+    }
+  }
+});
+
+const app = createApp(DemoComponent);
+
+app.mount('#__vue-content>div');

package.json

@@ -28,12 +28,12 @@
     "ant-design-vue": ">=2.0.0"
   },
   "devDependencies": {
-    "@vue/babel-plugin-jsx": "^1.0.0-rc.3",
     "@babel/runtime": "^7.11.2",
     "@types/jest": "^24.0.17",
     "@types/node": "^13.13.15",
     "@typescript-eslint/eslint-plugin": "^2.33.0",
     "@typescript-eslint/parser": "^2.33.0",
+    "@vue/babel-plugin-jsx": "^1.0.0-rc.3",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-typescript": "~4.5.0",
@@ -54,7 +54,8 @@
     "typescript": "~3.9.3",
     "vc-tools": "^3.0.0",
     "vue": "^3.0.0-0",
-    "vue-jest": "^5.0.0-alpha.3"
+    "vue-jest": "^5.0.0-alpha.3",
+    "vue-router": "^4.0.0-beta.13"
   },
   "dependencies": {
     "@babel/runtime": "^7.10.4",

src/RouteContext.tsx

+import { defineComponent, h, reactive, provide, inject, toRefs, UnwrapRef, PropType, SetupContext, InjectionKey, VNode, RendererNode, RendererElement } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { RouteProps } from './typings';
+import { PureSettings } from './defaultSettings';
+
+export interface RouteContextProps extends Partial<PureSettings> {
+  breadcrumb?: any;
+  menuData?: any[];
+  isMobile?: boolean;
+  prefixCls?: string;
+  collapsed?: boolean;
+  hasSiderMenu?: boolean;
+  hasHeader?: boolean;
+  siderWidth?: 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);
+
+    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 default RouteContextProvider;