@oinone/kunlun-vue-router 6.2.0

package/README.md

@@ -0,0 +1 @@
+默认layout

package/dist/oinone-kunlun-vue-router.esm.js

@@ -0,0 +1,15 @@
+import{SPI as e}from"@oinone/kunlun-spi";import{VueWidget as t,genToken as r,Widget as o,ViewWidget as n}from"@oinone/kunlun-vue-widget";import{inject as u,computed as l,provide as a,toRefs as i,getCurrentInstance as c,onMounted as s,Fragment as d,isVNode as p,ref as g,watch as v,cloneVNode as f,shallowRef as m}from"vue";import{_useMatched as h,matchPath as w,getRouterInstance as R}from"@oinone/kunlun-router";export{useMatched}from"@oinone/kunlun-router";
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */let b=class BaseRouterWidget extends t{};b=function(e,t,r,o){var n,u=arguments.length,l=u<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,r,o);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(l=(u<3?n(l):u>3?n(t,r,l):n(t,r))||l);return u>3&&l&&Object.defineProperty(t,r,l),l}([e.Base("Router",["widget"])],b);class RouterWidget extends b{}const M=r("router view location matched"),y=r("parent_segment_group"),S=e=>{const t=u(M),r=u(y,l((()=>t.value.root))),o=l((()=>{if(!(null==r?void 0:r.value))return;const{children:t}=r.value;return e?t[e]:t.primary}));e&&a(y,o);return{currentSegmentGroup:l((()=>{if(!o.value)return;const{children:e}=o.value;return Object.keys(e).length?e.primary:o.value}))}},W=r("root widget token"),k=e=>{const t=o.select(e);return a(W,t),t},j=()=>u(W),O=e=>{const t=j();if(!t)throw new Error("Need a root widget in Match tag");t.children.forEach((e=>e.dispose())),Object.entries(e).forEach((([e,r])=>{"default"===e&&t.createWidget(r),t.createWidget(r,e),t.forceUpdate()}))},E=()=>({setRootWidget:k,getRootWidget:j,registerWidgets:O}),N="Route",P={name:N,inheritAttrs:!1,props:{path:String,slotName:{type:String,required:!0},namespace:String,computedMatched:Object,widgets:Object,widget:String},setup(e,{slots:t}){const{widget:r,widgets:o}=e,{path:u,namespace:l,computedMatched:a}=i(e),{currentSegmentGroup:c}=S(null==l?void 0:l.value),{matched:s,setMatched:d}=h(),{registerWidgets:p}=E();let g={};if(r){const t=b.Selector({widget:r})||n.Selector({widget:r});if(!t||!e.slotName)throw new Error(`路由${u}对应的页面:${r}匹配异常`);g={[e.slotName]:t},p(g)}return o&&p(o),()=>{var e;if(!t.default||!c.value)return!c.value&&t.default?t.default():null;let r;const o=t.default();return r=(null==a?void 0:a.value)?a.value:u.value?w(null===(e=c.value)||void 0===e?void 0:e.segments,{path:u.value}):s,r&&d(r),r?o:null}}},$=P,x=()=>{const e=c();if(!e)throw new Error("No vue instance in current component.");return{router:e.appContext.config.globalProperties.$router}},G=()=>x().router,A="Redirect",B={name:A,props:{to:String},setup(e){const{router:t}=x();s((()=>{t.navigate(e.to,{replaceUrl:!0})}))}},C=[N,A],T=e=>e.reduce(((e,t)=>[...e,...t.type===d?T(t.children):[t]]),[]),U={name:"Match",props:{namespace:String,rootToken:String},setup(e,{slots:t}){const{rootToken:r}=e,{namespace:o}=i(e),{currentSegmentGroup:n}=S(null==o?void 0:o.value),{matched:u,setMatched:a}=h();let c;if(r){const{setRootWidget:e}=E(),t=e(r);c=t.getNodeCodeRef()}const s=l((()=>{if(!t.default)return null;let e,r=[];n.value&&(r=n.value.segments);let o=null;return T(t.default()).forEach((t=>{if(o||!p(t))return;const n=t.type,{name:l}=n;if(!C.includes(l))return;e=t;const{path:a}=t.props;o=a?w(r,{path:a}):u})),o?(a(o),{currentMatched:o,element:e}):null})),d=g(null);return v([s],(([e],[t])=>{d.value&&(null==e?void 0:e.currentMatched.path)===(null==t?void 0:t.currentMatched.path)||(d.value=e)}),{immediate:!0}),()=>{if(d.value&&c.value)return f(d.value.element,{key:d.value.element,computedMatched:d.value.currentMatched})}}},_=U,q=()=>{const e=R(),t=m(null);return e.activatedRoute.subscribe((e=>{t.value=e})),{install:r=>{if(r.config.globalProperties.$router)return void console.warn("Already install vue router: ",r.config.globalProperties.$router);r.config.globalProperties.$router=e,r.component("Route",$),r.component("Match",_),r.component("Redirect",B);const o=l((()=>t.value));r.provide(M,o),e.ignite()}}};export{b as BaseRouterWidget,_ as Match,A as REDIRECT_COMPONENT_NAME,N as ROUTE_COMPONENT_NAME,B as Redirect,$ as Route,RouterWidget,q as createVueRouter,G as getRouter,x as useRouter};

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from './src';

package/dist/types/src/Match.d.ts

@@ -0,0 +1,8 @@
+import { VNodeProps } from 'vue';
+export interface MatchProps {
+    namespace?: string;
+    rootToken?: string;
+}
+export declare const Match: new () => {
+    $props: VNodeProps & MatchProps;
+};

package/dist/types/src/Redirect.d.ts

@@ -0,0 +1,8 @@
+import { VNodeProps } from 'vue';
+export interface RedirectProps {
+    to: string;
+}
+export declare const REDIRECT_COMPONENT_NAME = "Redirect";
+export declare const Redirect: new () => {
+    $props: VNodeProps & RedirectProps;
+};

package/dist/types/src/Route.d.ts

@@ -0,0 +1,15 @@
+import { Matched } from '@oinone/kunlun-router';
+import { VNodeProps } from 'vue';
+import { Widgets } from './useWidget';
+export interface RouteProps {
+    path: string;
+    slotName: string;
+    namespace?: string;
+    computedMatched?: Matched;
+    widgets?: Widgets;
+    widget?: string;
+}
+export declare const ROUTE_COMPONENT_NAME = "Route";
+export declare const Route: new () => {
+    $props: VNodeProps & RouteProps;
+};

package/dist/types/src/basic/RouterWidget.d.ts

@@ -0,0 +1,3 @@
+import { BaseRouterWidget } from './token';
+export declare abstract class RouterWidget extends BaseRouterWidget {
+}

package/dist/types/src/basic/index.d.ts

@@ -0,0 +1,2 @@
+export * from './token';
+export * from './RouterWidget';

package/dist/types/src/basic/token/BaseRouterWidget.d.ts

@@ -0,0 +1,10 @@
+import { Constructor } from '@oinone/kunlun-shared';
+import { SPIOptions, SPISingleSelector, SPITokenFactory } from '@oinone/kunlun-spi';
+import { VueWidget } from '@oinone/kunlun-vue-widget';
+export interface BaseRouterOptions extends SPIOptions {
+    widget?: string;
+}
+export declare class BaseRouterWidget extends VueWidget {
+    static Token: SPITokenFactory<BaseRouterOptions>;
+    static Selector: SPISingleSelector<BaseRouterOptions, Constructor<BaseRouterWidget>>;
+}

package/dist/types/src/basic/token/index.d.ts

@@ -0,0 +1 @@
+export * from './BaseRouterWidget';

package/dist/types/src/helpers/useRouter.d.ts

@@ -0,0 +1,9 @@
+import { Router } from '@oinone/kunlun-router';
+export declare const useRouter: () => {
+    router: Router;
+};
+/**
+ * 该方法只能在beforeCreated、created、mounted生命周期中调用才会生效。
+ * 如果想全局使用，请调用 @see {@link getRouterInstance}
+ */
+export declare const getRouter: () => Router;

package/dist/types/src/helpers/useSegmentGroup.d.ts

@@ -0,0 +1,6 @@
+import { UrlSegmentGroup } from '@oinone/kunlun-router';
+import { ComputedRef } from 'vue';
+export declare const PARENT_SEGMENT_GROUP_TOKEN: import("vue").InjectionKey<ComputedRef<UrlSegmentGroup | undefined>>;
+export declare const useSegmentGroup: (namespace?: string | undefined) => {
+    currentSegmentGroup: ComputedRef<UrlSegmentGroup | undefined>;
+};

package/dist/types/src/index.d.ts

@@ -0,0 +1,7 @@
+export * from './basic';
+export * from './router';
+export * from './Route';
+export * from './Match';
+export * from './Redirect';
+export * from './helpers/useRouter';
+export { useMatched } from '@oinone/kunlun-router';

package/dist/types/src/router.d.ts

@@ -0,0 +1,5 @@
+import { App } from 'vue';
+declare const createVueRouter: () => {
+    install: (app: App) => void;
+};
+export { createVueRouter };

package/dist/types/src/token.d.ts

@@ -0,0 +1,3 @@
+import { ComputedRef } from 'vue';
+import { ActivatedRoute } from '@oinone/kunlun-router';
+export declare const ACTIVATED_ROUTE_TOKEN: import("vue").InjectionKey<ComputedRef<ActivatedRoute>>;

package/dist/types/src/useWidget.d.ts

@@ -0,0 +1,13 @@
+import { VueWidget } from '@oinone/kunlun-vue-widget';
+export interface Widgets {
+    [namespace: string]: VueWidget;
+}
+declare const setRootWidget: (token: string) => VueWidget;
+declare const getRootWidget: () => VueWidget | undefined;
+declare const registerWidgets: (widgets: Widgets) => void;
+export declare const useWidgetService: () => {
+    setRootWidget: typeof setRootWidget;
+    getRootWidget: typeof getRootWidget;
+    registerWidgets: typeof registerWidgets;
+};
+export {};

package/index.ts

@@ -0,0 +1 @@
+export * from './src';

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@oinone/kunlun-vue-router",
+  "version": "6.2.0",
+  "main": "index.ts",
+  "scripts": {
+    "prebuild": "rimraf dist",
+    "build": "rollup -c",
+    "dist": "npm run prepublishOnly",
+    "index": "npm run postpublish",
+    "x-prepublishOnly": "node ../../scripts/prepublish-only.js",
+    "x-postpublish": "node ../../scripts/postpublish.js",
+    "doc": "typedoc --out docs src/index.ts"
+  },
+  "dependencies": {
+    "@oinone/kunlun-vue-widget": "6.2.0"
+  },
+  "devDependencies": {
+    "@oinone/kunlun-router": "~6.2.0",
+    "@oinone/kunlun-shared": "~6.2.0",
+    "@oinone/kunlun-spi": "~6.2.0",
+    "@rollup/plugin-json": "4.1.0",
+    "@rollup/plugin-node-resolve": "11.2.1",
+    "@rollup/plugin-replace": "2.4.2",
+    "@types/lodash": "4.14.182",
+    "@types/lodash-es": "4.17.6",
+    "lodash": "4.17.21",
+    "lodash-es": "4.17.21"
+  },
+  "peerDependencies": {
+    "vue": "3.2.40"
+  },
+  "gitHead": "b65bbf1d649da1017810c5608473d5daa1a41f94"
+}

package/rollup.config.js

@@ -0,0 +1,8 @@
+import pkg from './package.json';
+import rollupConfig from '../../scripts/build.config.js';
+
+export default rollupConfig(
+  pkg.name,
+  ['@oinone/kunlun-router', '@oinone/kunlun-spi', '@oinone/kunlun-vue-widget', 'lodash', 'lodash-es', 'vue'],
+  false
+);

package/src/Match.ts

@@ -0,0 +1,130 @@
+import {
+  cloneVNode,
+  SetupContext,
+  VNodeProps,
+  isVNode,
+  VNode,
+  RendererNode,
+  RendererElement,
+  ConcreteComponent,
+  toRefs,
+  Fragment,
+  computed,
+  ref,
+  watch
+} from 'vue';
+import { UrlSegment, matchPath, Matched, _useMatched } from '@oinone/kunlun-router';
+
+import { RouteProps, ROUTE_COMPONENT_NAME } from './Route';
+import { REDIRECT_COMPONENT_NAME } from './Redirect';
+import { useSegmentGroup } from './helpers/useSegmentGroup';
+import { useWidgetService } from './useWidget';
+
+export interface MatchProps {
+  namespace?: string;
+  rootToken?: string;
+}
+
+const MATCH_COMPONENTS = [ROUTE_COMPONENT_NAME, REDIRECT_COMPONENT_NAME];
+
+const unwrapFragment = (
+  children: VNode<RendererNode, RendererElement, RouteProps>[]
+): VNode<RendererNode, RendererElement, RouteProps>[] => {
+  return children.reduce(
+    (prev, child) => [...prev, ...(child.type === Fragment ? unwrapFragment(child.children as any) : [child])],
+    [] as any
+  );
+};
+
+const MatchImpl = {
+  name: 'Match',
+  props: {
+    namespace: String,
+    rootToken: String
+  },
+  setup(props: MatchProps, { slots }: SetupContext) {
+    const { rootToken } = props;
+    const { namespace } = toRefs(props);
+    const { currentSegmentGroup } = useSegmentGroup(namespace?.value);
+    const { matched, setMatched } = _useMatched();
+
+    // widgets
+    let nodeCodeRef: any;
+    if (rootToken) {
+      const { setRootWidget } = useWidgetService();
+      const rootWidget = setRootWidget(rootToken);
+      nodeCodeRef = rootWidget.getNodeCodeRef();
+    }
+
+    const computedMatched = computed(() => {
+      if (!slots.default) {
+        return null;
+      }
+
+      let segments: UrlSegment[] = [];
+      if (currentSegmentGroup.value) {
+        segments = currentSegmentGroup.value.segments;
+      }
+
+      let element!: VNode;
+      let currentMatched: Matched = null as any;
+      const children = unwrapFragment(slots.default() as VNode<RendererNode, RendererElement, RouteProps>[]);
+      children.forEach((child) => {
+        if (currentMatched || !isVNode(child)) {
+          return;
+        }
+        const comp = child.type as ConcreteComponent;
+        const { name } = comp;
+        if (!MATCH_COMPONENTS.includes(name as string)) {
+          return;
+        }
+
+        // 这样能匹配到 redirect
+        element = child;
+
+        const { path: childPath } = child.props!;
+
+        currentMatched = childPath ? matchPath(segments, { path: childPath })! : matched;
+      });
+
+      if (!currentMatched) {
+        return null;
+      }
+
+      setMatched(currentMatched);
+
+      return { currentMatched, element };
+    });
+
+    const cacheMatched: any = ref(null);
+
+    watch(
+      [computedMatched],
+      ([cm], [prevCm]) => {
+        if (cacheMatched.value && cm?.currentMatched.path === prevCm?.currentMatched.path) {
+          return;
+        }
+        cacheMatched.value = cm;
+      },
+      { immediate: true }
+    );
+
+    return () => {
+      if (!cacheMatched.value || !nodeCodeRef.value) {
+        return;
+      }
+
+      // TODO: 不使用 key 來觸发 vnode 更新
+      return cloneVNode(cacheMatched.value!.element, {
+        key: cacheMatched.value!.element! as any,
+        computedMatched: cacheMatched.value!.currentMatched
+      });
+    };
+  }
+};
+
+export const Match = (MatchImpl as any) as {
+  new (): {
+    $props: VNodeProps & MatchProps;
+  };
+};

package/src/Redirect.ts

@@ -0,0 +1,29 @@
+import { VNodeProps, onMounted } from 'vue';
+
+import { useRouter } from './helpers/useRouter';
+
+export interface RedirectProps {
+  to: string;
+}
+
+export const REDIRECT_COMPONENT_NAME = 'Redirect';
+
+const RedirectImpl = {
+  name: REDIRECT_COMPONENT_NAME,
+  props: {
+    to: String
+  },
+  setup(props: RedirectProps) {
+    const { router } = useRouter();
+
+    onMounted(() => {
+      router.navigate(props.to, { replaceUrl: true });
+    });
+  }
+};
+
+export const Redirect = (RedirectImpl as any) as {
+  new (): {
+    $props: VNodeProps & RedirectProps;
+  };
+};

package/src/Route.ts

@@ -0,0 +1,83 @@
+import { _useMatched, Matched, matchPath } from '@oinone/kunlun-router';
+import { ViewWidget } from '@oinone/kunlun-vue-widget';
+import { SetupContext, toRefs, VNodeProps } from 'vue';
+import { BaseRouterWidget } from './basic';
+import { useSegmentGroup } from './helpers/useSegmentGroup';
+import { useWidgetService, Widgets } from './useWidget';
+
+export interface RouteProps {
+  path: string;
+  slotName: string;
+  namespace?: string;
+  computedMatched?: Matched;
+  widgets?: Widgets;
+  widget?: string;
+}
+
+export const ROUTE_COMPONENT_NAME = 'Route';
+
+const RouteImpl = {
+  name: ROUTE_COMPONENT_NAME,
+  inheritAttrs: false,
+  props: {
+    path: String,
+    slotName: {
+      type: String,
+      required: true
+    },
+    namespace: String,
+    computedMatched: Object,
+    widgets: Object,
+    widget: String
+  },
+  setup(props: RouteProps, { slots }: SetupContext) {
+    const { widget, widgets } = props;
+    const { path, namespace, computedMatched } = toRefs(props);
+    const { currentSegmentGroup } = useSegmentGroup(namespace?.value);
+    const { matched, setMatched } = _useMatched();
+    const { registerWidgets } = useWidgetService();
+    let widgetClass = {};
+    if (widget) {
+      const constructor = BaseRouterWidget.Selector({ widget }) || ViewWidget.Selector({ widget });
+      if (constructor && props.slotName) {
+        widgetClass = { [props.slotName]: constructor };
+      } else {
+        throw new Error(`路由${path}对应的页面:${widget}匹配异常`);
+      }
+      registerWidgets(widgetClass);
+    }
+    if (widgets) {
+      registerWidgets(widgets);
+    }
+    return () => {
+      if (!slots.default || !currentSegmentGroup.value) {
+        if (!currentSegmentGroup.value && slots.default) {
+          return slots.default();
+        }
+        return null;
+      }
+
+      let currentMatched: Matched | null;
+      const children = slots.default();
+
+      if (computedMatched?.value) {
+        currentMatched = computedMatched.value;
+      } else {
+        // 有配置路由 path 則去匹配 matched 結構，沒有配置路由 path 則使用上下文的 matched 結構
+        currentMatched = path.value ? matchPath(currentSegmentGroup.value?.segments, { path: path.value }) : matched;
+      }
+
+      if (currentMatched) {
+        setMatched(currentMatched);
+      }
+
+      return currentMatched ? children : null;
+    };
+  }
+};
+
+export const Route = RouteImpl as any as {
+  new (): {
+    $props: VNodeProps & RouteProps;
+  };
+};

package/src/basic/RouterWidget.ts

@@ -0,0 +1,3 @@
+import { BaseRouterWidget } from './token';
+
+export abstract class RouterWidget extends BaseRouterWidget {}

package/src/basic/index.ts

@@ -0,0 +1,2 @@
+export * from './token';
+export * from './RouterWidget';

package/src/basic/token/BaseRouterWidget.ts

@@ -0,0 +1,14 @@
+import { Constructor } from '@oinone/kunlun-shared';
+import { SPI, SPIOptions, SPISingleSelector, SPITokenFactory } from '@oinone/kunlun-spi';
+import { VueWidget } from '@oinone/kunlun-vue-widget';
+
+export interface BaseRouterOptions extends SPIOptions {
+  widget?: string;
+}
+
+@SPI.Base('Router', ['widget'])
+export class BaseRouterWidget extends VueWidget {
+  public static Token: SPITokenFactory<BaseRouterOptions>;
+
+  public static Selector: SPISingleSelector<BaseRouterOptions, Constructor<BaseRouterWidget>>;
+}

package/src/basic/token/index.ts

@@ -0,0 +1 @@
+export * from './BaseRouterWidget';

package/src/helpers/useRouter.ts

@@ -0,0 +1,21 @@
+import { getCurrentInstance } from 'vue';
+import { Router } from '@oinone/kunlun-router';
+
+// export type Router = Omit<ReturnType<typeof createRouter>, '_instance' | 'ignite' | 'activatedRoute'>;
+export const useRouter = (): { router: Router } => {
+  const instance = getCurrentInstance();
+  if (!instance) {
+    throw new Error(`No vue instance in current component.`);
+  }
+  const router: any = instance.appContext.config.globalProperties.$router;
+
+  return { router };
+};
+
+/**
+ * 该方法只能在beforeCreated、created、mounted生命周期中调用才会生效。
+ * 如果想全局使用，请调用 @see {@link getRouterInstance}
+ */
+export const getRouter = (): Router => {
+  return useRouter().router;
+};

package/src/helpers/useSegmentGroup.ts

@@ -0,0 +1,38 @@
+import { UrlSegmentGroup } from '@oinone/kunlun-router';
+import { genToken } from '@oinone/kunlun-vue-widget';
+import { computed, ComputedRef, inject, provide } from 'vue';
+import { ACTIVATED_ROUTE_TOKEN } from '../token';
+
+export const PARENT_SEGMENT_GROUP_TOKEN = genToken<ComputedRef<UrlSegmentGroup | undefined>>('parent_segment_group');
+
+export const useSegmentGroup = (namespace?: string) => {
+  const activatedRoute = inject(ACTIVATED_ROUTE_TOKEN)!;
+  const parentSegmentGroup = inject(
+    PARENT_SEGMENT_GROUP_TOKEN,
+    computed(() => activatedRoute.value.root)
+  );
+
+  const currentSegmentGroupRef = computed(() => {
+    if (!parentSegmentGroup?.value) {
+      return;
+    }
+    const { children } = parentSegmentGroup.value;
+    return namespace ? children[namespace] : children.primary;
+  });
+
+  if (namespace) {
+    provide(PARENT_SEGMENT_GROUP_TOKEN, currentSegmentGroupRef);
+  }
+
+  // 如果没有 children 的话 SegmentGroup 信息会在当前 group 下
+  // 如果有 children，SegmentGroup 信息会被移到 children.primary 下
+  const currentSegmentGroup = computed(() => {
+    if (!currentSegmentGroupRef.value) {
+      return;
+    }
+    const { children } = currentSegmentGroupRef.value;
+    return Object.keys(children).length ? children.primary : currentSegmentGroupRef.value;
+  });
+
+  return { currentSegmentGroup };
+};

package/src/index.ts

@@ -0,0 +1,9 @@
+export * from './basic';
+export * from './router';
+
+export * from './Route';
+export * from './Match';
+export * from './Redirect';
+
+export * from './helpers/useRouter';
+export { useMatched } from '@oinone/kunlun-router';

package/src/router.ts

@@ -0,0 +1,36 @@
+import { App, shallowRef, computed } from 'vue';
+import { getRouterInstance, ActivatedRoute } from '@oinone/kunlun-router';
+
+import { ACTIVATED_ROUTE_TOKEN } from './token';
+import { Route } from './Route';
+import { Match } from './Match';
+import { Redirect } from './Redirect';
+
+const createVueRouter = () => {
+  const router = getRouterInstance();
+  const currentRoute = shallowRef<ActivatedRoute | null>(null);
+
+  router.activatedRoute.subscribe((activatedRoute) => {
+    currentRoute.value = activatedRoute;
+  });
+
+  return {
+    install: (app: App) => {
+      if (app.config.globalProperties.$router) {
+        console.warn(`Already install vue router: `, app.config.globalProperties.$router);
+        return;
+      }
+      app.config.globalProperties.$router = router;
+      app.component('Route', Route);
+      app.component('Match', Match);
+      app.component('Redirect', Redirect);
+
+      const reactiveRoute = computed(() => currentRoute.value);
+      app.provide(ACTIVATED_ROUTE_TOKEN, reactiveRoute);
+
+      router.ignite();
+    }
+  };
+};
+
+export { createVueRouter };

package/src/token.ts

@@ -0,0 +1,10 @@
+import { ComputedRef } from 'vue';
+import { ActivatedRoute } from '@oinone/kunlun-router';
+
+import { genToken } from '@oinone/kunlun-vue-widget';
+
+const __DEV__ = process.env.NODE_ENV === 'development';
+
+export const ACTIVATED_ROUTE_TOKEN = genToken<ComputedRef<ActivatedRoute>>(
+  __DEV__ ? 'router view location matched' : 'rvlm'
+);

package/src/useWidget.ts

@@ -0,0 +1,47 @@
+import { genToken, VueWidget, Widget } from '@oinone/kunlun-vue-widget';
+import { inject, provide } from 'vue';
+
+export interface Widgets {
+  [namespace: string]: VueWidget;
+}
+
+const ROOT_WIDGET_TOKEN = genToken<VueWidget>('root widget token');
+
+const setRootWidget = (token: string): VueWidget => {
+  const rootWidget = Widget.select(token) as VueWidget;
+  provide(ROOT_WIDGET_TOKEN, rootWidget);
+  return rootWidget;
+};
+
+const getRootWidget = (): VueWidget | undefined => {
+  return inject(ROOT_WIDGET_TOKEN);
+};
+
+const registerWidgets = (widgets: Widgets): void => {
+  const rootWidget = getRootWidget();
+  if (!rootWidget) {
+    throw new Error(`Need a root widget in Match tag`);
+  }
+
+  (rootWidget as unknown as { children: Widget[] }).children.forEach((c) => c.dispose());
+
+  Object.entries(widgets).forEach(([k, w]) => {
+    if (k === 'default') {
+      rootWidget.createWidget(w);
+    }
+    rootWidget.createWidget(w, k);
+    rootWidget.forceUpdate();
+  });
+};
+
+export const useWidgetService = (): {
+  setRootWidget: typeof setRootWidget;
+  getRootWidget: typeof getRootWidget;
+  registerWidgets: typeof registerWidgets;
+} => {
+  return {
+    setRootWidget,
+    getRootWidget,
+    registerWidgets
+  };
+};