@kitbag/router 0.7.0 → 0.7.1

package/README.md

@@ -11,7 +11,7 @@ Type safe router for Vue.js
 
 ## Getting Started
 
-Get Started with our [documentation](https://kitbag-router.netlify.app/)
+Get Started with our [documentation](https://kitbag-router.netlify.app/) or our [intro video](https://kitbag-router.netlify.app/)
 
 ## Installation
 
@@ -75,26 +75,27 @@ declare module '@kitbag/router' {
 To navigate to another route, you can use `router.push`. This method will update the URL for the browser and also add the URL into the history so when a user uses the back button on their browser it will behave as expected.
 
 ```ts
+import { defineAsyncComponent } from 'vue'
 import { createRoute, useRouter } from '@kitbag/router'
 
 const user = createRoute({
   name: 'user',
   path: '/user',
-  component: ...,
+  component: defineAsyncComponent(() => import('./UserPage.vue')),
 })
 
 const profile = createRoute({
   parent: user,
   name: 'profile',
   path: '/profile',
-  component: ...,
+  component: defineAsyncComponent(() => import('./ProfilePage.vue')),
 })
 
 const settings = createRoute({
   parent: user,
   name: 'settings',
   path: '/settings',
-  component: ...,
+  component: defineAsyncComponent(() => import('./SettingsPage.vue')),
 })
 
 const router = useRouter([user, profile, settings])
@@ -116,7 +117,7 @@ This `source` argument is type safe, expecting either a Url or a valid route "ke
 If you only wish to change the params on the current route you can use `router.route.update`.
 
 ```ts
-router.route.update('myParam': 123)
+router.route.update('myParam', 123)
 ```
 
 or for setting multiple params at once
@@ -162,6 +163,6 @@ This component gives the router the power to change the URL without reloading th
 [netlify-badge]: https://api.netlify.com/api/v1/badges/c12f79b8-49f9-4529-bc23-f8ffca8919a3/deploy-status
 [netlify-url]: https://app.netlify.com/sites/kitbag-router/deploys
 [discord-badge]: https://img.shields.io/discord/1079625926024900739?logo=discord&label=Discord
-[discord-url]: https://discord.gg/UT7JrAxU
+[discord-url]: https://discord.gg/zw7dpcc5HV
 [stackblitz-badge]: https://developer.stackblitz.com/img/open_in_stackblitz_small.svg
 [stackblitz-url]: https://stackblitz.com/~/github.com/kitbagjs/router-preview

package/dist/kitbag-router.d.ts

@@ -123,6 +123,8 @@ declare type BuiltInRejectionType = typeof builtInRejections[number];
 
 declare type CombineKey<TParentKey extends string | undefined, TChildKey extends string | undefined> = StringHasValue<TParentKey> extends true ? StringHasValue<TChildKey> extends true ? `${TParentKey}.${TChildKey}` : TParentKey : StringHasValue<TChildKey> extends true ? TChildKey : '';
 
+declare type CombineMeta<TParent extends Record<string, unknown>, TChild extends Record<string, unknown>> = TParent & TChild;
+
 declare type CombinePath<TParent extends Path, TChild extends Path> = ToPath<TParent> extends {
     path: infer TParentPath extends string;
     params: infer TParentParams extends Record<string, unknown>;
@@ -141,6 +143,8 @@ declare type CombineQuery<TParent extends Query, TChild extends Query> = ToQuery
 
 declare type CombineQueryString<TParent extends string | undefined, TChild extends string | undefined> = StringHasValue<TParent> extends true ? StringHasValue<TChild> extends true ? `${TParent}&${TChild}` : TParent : TChild;
 
+declare type CombineState<TParent extends Record<string, Param>, TChild extends Record<string, Param>> = TParent & TChild;
+
 /**
  * Creates a component wrapper which has no props itself but mounts another component within while binding its props
  *
@@ -177,17 +181,17 @@ export declare function createParam<TParam extends Param>(param: TParam): ParamG
 
 export declare function createParam<TParam extends Param>(param: TParam, defaultValue: ExtractParamType<TParam>): ParamWithDefault<TParam>;
 
-export declare function createRoute<const TName extends string | undefined = undefined, const TPath extends string | Path | undefined = undefined, const TQuery extends string | Query | undefined = undefined, const TMeta extends RouteMeta = RouteMeta>(options: CreateRouteOptions<TName, TPath, TQuery, TMeta> & WithHooks & WithoutComponents & WithoutParent): Route<ToKey<TName>, Host<'', {}>, ToPath<TPath>, ToQuery<TQuery>>;
+export declare function createRoute<const TName extends string | undefined = undefined, const TPath extends string | Path | undefined = undefined, const TQuery extends string | Query | undefined = undefined, const TMeta extends RouteMeta = RouteMeta, const TState extends Record<string, Param> = Record<string, Param>>(options: CreateRouteOptions<TName, TPath, TQuery, TMeta> & WithHooks & WithoutComponents & WithoutParent & (WithState<TState> | WithoutState)): Route<ToKey<TName>, Host<'', {}>, ToPath<TPath>, ToQuery<TQuery>, TMeta, TState>;
 
-export declare function createRoute<const TParent extends Route, const TName extends string | undefined = undefined, const TPath extends string | Path | undefined = undefined, const TQuery extends string | Query | undefined = undefined, const TMeta extends RouteMeta = RouteMeta>(options: CreateRouteOptions<TName, TPath, TQuery, TMeta> & WithHooks & WithoutComponents & WithParent<TParent>): Route<CombineKey<TParent['key'], ToKey<TName>>, Host<'', {}>, CombinePath<TParent['path'], ToPath<TPath>>, CombineQuery<TParent['query'], ToQuery<TQuery>>>;
+export declare function createRoute<const TParent extends Route, const TName extends string | undefined = undefined, const TPath extends string | Path | undefined = undefined, const TQuery extends string | Query | undefined = undefined, const TMeta extends RouteMeta = RouteMeta, const TState extends Record<string, Param> = Record<string, Param>>(options: CreateRouteOptions<TName, TPath, TQuery, TMeta> & WithHooks & WithoutComponents & WithParent<TParent> & (WithState<TState> | WithoutState)): Route<CombineKey<TParent['key'], ToKey<TName>>, Host<'', {}>, CombinePath<TParent['path'], ToPath<TPath>>, CombineQuery<TParent['query'], ToQuery<TQuery>>, CombineMeta<TMeta, TParent['meta']>, CombineState<TState, TParent['state']>>;
 
-export declare function createRoute<TComponent extends Component, const TName extends string | undefined = undefined, const TPath extends string | Path | undefined = undefined, const TQuery extends string | Query | undefined = undefined, const TMeta extends RouteMeta = RouteMeta>(options: CreateRouteOptions<TName, TPath, TQuery, TMeta> & WithHooks & WithComponent<TComponent, RouteParams<TPath, TQuery>> & WithoutParent): Route<ToKey<TName>, Host<'', {}>, ToPath<TPath>, ToQuery<TQuery>>;
+export declare function createRoute<TComponent extends Component, const TName extends string | undefined = undefined, const TPath extends string | Path | undefined = undefined, const TQuery extends string | Query | undefined = undefined, const TMeta extends RouteMeta = RouteMeta, const TState extends Record<string, Param> = Record<string, Param>>(options: CreateRouteOptions<TName, TPath, TQuery, TMeta> & WithHooks & WithComponent<TComponent, RouteParams<TPath, TQuery>> & WithoutParent & (WithState<TState> | WithoutState)): Route<ToKey<TName>, Host<'', {}>, ToPath<TPath>, ToQuery<TQuery>, TMeta, TState>;
 
-export declare function createRoute<TComponent extends Component, const TParent extends Route, const TName extends string | undefined = undefined, const TPath extends string | Path | undefined = undefined, const TQuery extends string | Query | undefined = undefined, const TMeta extends RouteMeta = RouteMeta>(options: CreateRouteOptions<TName, TPath, TQuery, TMeta> & WithHooks & WithComponent<TComponent, RouteParams<TPath, TQuery, TParent>> & WithParent<TParent>): Route<CombineKey<TParent['key'], ToKey<TName>>, Host<'', {}>, CombinePath<TParent['path'], ToPath<TPath>>, CombineQuery<TParent['query'], ToQuery<TQuery>>>;
+export declare function createRoute<TComponent extends Component, const TParent extends Route, const TName extends string | undefined = undefined, const TPath extends string | Path | undefined = undefined, const TQuery extends string | Query | undefined = undefined, const TMeta extends RouteMeta = RouteMeta, const TState extends Record<string, Param> = Record<string, Param>>(options: CreateRouteOptions<TName, TPath, TQuery, TMeta> & WithHooks & WithComponent<TComponent, RouteParams<TPath, TQuery, TParent>> & WithParent<TParent> & (WithState<TState> | WithoutState)): Route<CombineKey<TParent['key'], ToKey<TName>>, Host<'', {}>, CombinePath<TParent['path'], ToPath<TPath>>, CombineQuery<TParent['query'], ToQuery<TQuery>>, CombineMeta<TMeta, TParent['meta']>, CombineState<TState, TParent['state']>>;
 
-export declare function createRoute<TComponents extends Record<string, Component>, const TName extends string | undefined = undefined, const TPath extends string | Path | undefined = undefined, const TQuery extends string | Query | undefined = undefined, const TMeta extends RouteMeta = RouteMeta>(options: CreateRouteOptions<TName, TPath, TQuery, TMeta> & WithHooks & WithComponents<TComponents, RouteParams<TPath, TQuery>> & WithoutParent): Route<ToKey<TName>, Host<'', {}>, ToPath<TPath>, ToQuery<TQuery>>;
+export declare function createRoute<TComponents extends Record<string, Component>, const TName extends string | undefined = undefined, const TPath extends string | Path | undefined = undefined, const TQuery extends string | Query | undefined = undefined, const TMeta extends RouteMeta = RouteMeta, const TState extends Record<string, Param> = Record<string, Param>>(options: CreateRouteOptions<TName, TPath, TQuery, TMeta> & WithHooks & WithComponents<TComponents, RouteParams<TPath, TQuery>> & WithoutParent & (WithState<TState> | WithoutState)): Route<ToKey<TName>, Host<'', {}>, ToPath<TPath>, ToQuery<TQuery>, TMeta, TState>;
 
-export declare function createRoute<TComponents extends Record<string, Component>, const TParent extends Route, const TName extends string | undefined = undefined, const TPath extends string | Path | undefined = undefined, const TQuery extends string | Query | undefined = undefined, const TMeta extends RouteMeta = RouteMeta>(options: CreateRouteOptions<TName, TPath, TQuery, TMeta> & WithHooks & WithComponents<TComponents, RouteParams<TPath, TQuery, TParent>> & WithParent<TParent>): Route<CombineKey<TParent['key'], ToKey<TName>>, Host<'', {}>, CombinePath<TParent['path'], ToPath<TPath>>, CombineQuery<TParent['query'], ToQuery<TQuery>>>;
+export declare function createRoute<TComponents extends Record<string, Component>, const TParent extends Route, const TName extends string | undefined = undefined, const TPath extends string | Path | undefined = undefined, const TQuery extends string | Query | undefined = undefined, const TMeta extends RouteMeta = RouteMeta, const TState extends Record<string, Param> = Record<string, Param>>(options: CreateRouteOptions<TName, TPath, TQuery, TMeta> & WithHooks & WithComponents<TComponents, RouteParams<TPath, TQuery, TParent>> & WithParent<TParent> & (WithState<TState> | WithoutState)): Route<CombineKey<TParent['key'], ToKey<TName>>, Host<'', {}>, CombinePath<TParent['path'], ToPath<TPath>>, CombineQuery<TParent['query'], ToQuery<TQuery>>, CombineMeta<TMeta, TParent['meta']>, CombineState<TState, TParent['state']>>;
 
 export declare type CreateRouteOptions<TName extends string | undefined = string | undefined, TPath extends string | Path | undefined = string | Path | undefined, TQuery extends string | Query | undefined = string | Query | undefined, TMeta extends RouteMeta = RouteMeta> = {
     /**
@@ -211,7 +215,7 @@ export declare type CreateRouteOptions<TName extends string | undefined = string
 /**
  * The Route properties originally provided to `createRoute`. The only change is normalizing meta to always default to an empty object.
  */
-export declare type CreateRouteOptionsMatched = CreateRouteOptions & WithHooks & (WithHost | WithoutHost) & (WithComponent | WithComponents | WithoutComponents) & (WithParent | WithoutParent) & {
+declare type CreateRouteOptionsMatched = CreateRouteOptions & WithHooks & (WithHost | WithoutHost) & (WithComponent | WithComponents | WithoutComponents) & (WithParent | WithoutParent) & (WithState | WithoutState) & {
     meta: RouteMeta;
 };
 
@@ -335,6 +339,14 @@ declare type ExtractRouteParamTypesWithoutLosingOptional<TRoute> = TRoute extend
     };
 } ? ExtractParamTypesWithoutLosingOptional<HostParams & PathParams & QueryParams> : Record<string, unknown>;
 
+declare type ExtractRouteStateParamsAsOptional<T extends Record<string, Param>> = ExtractParamTypes<{
+    [K in keyof T as K extends string ? `?${K}` : never]: T[K];
+}>;
+
+declare type ExtractStateParams<TRoute> = TRoute extends {
+    state: infer TState extends Record<string, Param>;
+} ? ExtractParamTypes<TState> : Record<string, unknown>;
+
 declare type Host<THost extends string = string, TParams extends HostParamsWithParamNameExtracted<THost> = Record<string, Param | undefined>> = {
     host: THost;
     params: string extends THost ? Record<string, Param> : Identity<ExtractParamsFromHostString<THost, TParams>>;
@@ -634,6 +646,10 @@ declare type ResolvedRoute<TRoute extends Route = Route> = Readonly<{
      * Key value pair for route params, values will be the user provided value from current browser location.
      */
     params: ExtractRouteParamTypes<TRoute>;
+    /**
+     * Type for additional data intended to be stored in history state.
+     */
+    state: ExtractRouteStateParamsAsOptional<TRoute['state']>;
 }>;
 
 declare type ResolvedRouteQuery = {
@@ -647,13 +663,11 @@ declare type ResolvedRouteQuery = {
  * @template TPath - The type or structure of the route's path.
  * @template TQuery - The type or structure of the query parameters associated with the route.
  */
-export declare type Route<TKey extends string = string, THost extends Host = Host, TPath extends Path = Path, TQuery extends Query = Query, TMeta extends RouteMeta = RouteMeta> = {
+export declare type Route<TKey extends string = string, THost extends Host = Host, TPath extends Path = Path, TQuery extends Query = Query, TMeta extends RouteMeta = RouteMeta, TState extends Record<string, Param> = Record<string, Param>> = {
     /**
      * The specific route properties that were matched in the current route.
      */
-    matched: CreateRouteOptionsMatched & {
-        meta: TMeta;
-    };
+    matched: CreateRouteOptionsMatched;
     /**
      * The specific route properties that were matched in the current route, including any ancestors.
      * Order of routes will be from greatest ancestor to narrowest matched.
@@ -675,6 +689,14 @@ export declare type Route<TKey extends string = string, THost extends Host = Hos
      * Represents the structured query of the route, including query params.
      */
     query: TQuery;
+    /**
+     * Represents additional metadata associated with a route, combined with any parents.
+     */
+    meta: TMeta;
+    /**
+     * Represents the schema of the route state, combined with any parents.
+     */
+    state: TState;
     depth: number;
 };
 
@@ -882,9 +904,16 @@ export declare type RouterOptions = {
      */
     initialUrl?: string;
     /**
-     * Specifies the history mode for the router, such as 'hash', 'history', or 'abstract'.
+     * Specifies the history mode for the router, such as "browser", "memory", or "hash".
+     *
+     * @default "auto"
      */
     historyMode?: RouterHistoryMode;
+    /**
+     * Base path to be prepended to any URL. Can be used for Vue applications that run in nested folder for domain.
+     * For example having `base` of `/foo` would assume all routes should start with `your.domain.com/foo`.
+     */
+    base?: string;
 } & RouterRejectionComponents;
 
 declare type RouterPush<TRoutes extends Routes = any> = {
@@ -892,11 +921,12 @@ declare type RouterPush<TRoutes extends Routes = any> = {
     (source: Url, options?: RouterPushOptions): Promise<void>;
 };
 
-declare type RouterPushArgs<TRoutes extends Routes, TSource extends RoutesKey<TRoutes>, TParams = RouteParamsByKey<TRoutes, TSource>> = AllPropertiesAreOptional<TParams> extends true ? [params?: TParams, options?: RouterPushOptions] : [params: TParams, options?: RouterPushOptions];
+declare type RouterPushArgs<TRoutes extends Routes, TSource extends RoutesKey<TRoutes>> = AllPropertiesAreOptional<RouteParamsByKey<TRoutes, TSource>> extends true ? [params?: RouteParamsByKey<TRoutes, TSource>, options?: RouterPushOptions<RouteStateByKey<TRoutes, TSource>>] : [params: RouteParamsByKey<TRoutes, TSource>, options?: RouterPushOptions<RouteStateByKey<TRoutes, TSource>>];
 
-declare type RouterPushOptions = {
+declare type RouterPushOptions<TState = unknown> = {
     query?: Record<string, string>;
     replace?: boolean;
+    state?: Partial<TState>;
 };
 
 export declare type RouterReject = (type: RouterRejectionType) => void;
@@ -919,9 +949,12 @@ declare type RouterReplace<TRoutes extends Routes> = {
     (source: Url, options?: RouterReplaceOptions): Promise<void>;
 };
 
-declare type RouterReplaceArgs<TRoutes extends Routes, TSource extends RoutesKey<TRoutes>, TParams = RouteParamsByKey<TRoutes, TSource>> = AllPropertiesAreOptional<TParams> extends true ? [params?: TParams, options?: RouterReplaceOptions] : [params: TParams, options?: RouterReplaceOptions];
+declare type RouterReplaceArgs<TRoutes extends Routes, TSource extends RoutesKey<TRoutes>, TParams = RouteParamsByKey<TRoutes, TSource>> = AllPropertiesAreOptional<TParams> extends true ? [params?: TParams, options?: RouterReplaceOptions<RouteStateByKey<TRoutes, TSource>>] : [params: TParams, options?: RouterReplaceOptions<RouteStateByKey<TRoutes, TSource>>];
 
-declare type RouterReplaceOptions = Omit<RouterPushOptions, 'replace'>;
+declare type RouterReplaceOptions<TState = unknown> = {
+    query?: Record<string, string>;
+    state?: Partial<TState>;
+};
 
 declare type RouterResolve<TRoutes extends Routes> = {
     <TSource extends RoutesKey<TRoutes>>(source: TSource, ...args: RouterResolveArgs<TRoutes, TSource>): string;
@@ -938,6 +971,7 @@ declare type RouterRoute<TRoute extends ResolvedRoute = ResolvedRoute> = Readonl
     key: TRoute['key'];
     matched: TRoute['matched'];
     matches: TRoute['matches'];
+    state: TRoute['state'];
     query: ResolvedRouteQuery;
     params: Writable<TRoute['params']>;
     update: RouteUpdate<TRoute>;
@@ -958,10 +992,16 @@ name?: string | undefined;
     default?: ((props: {
         route: Readonly<{
             key: string;
-            matched: CreateRouteOptionsMatched & {
+            matched: CreateRouteOptions & WithHooks & (WithHost | WithoutHost) & (WithoutComponents | WithComponent | WithComponents) & (WithoutParent | WithParent) & (WithoutState | WithState) & {
                 meta: Record<string, unknown>;
             };
-            matches: CreateRouteOptionsMatched[];
+            matches: (CreateRouteOptions & WithHooks & (WithHost | WithoutHost) & (WithoutComponents | WithComponent | WithComponents) & (WithoutParent | WithParent) & (WithoutState | WithState) & {
+                meta: Record<string, unknown>;
+            })[];
+            state: {
+                [x: string]: any;
+                [x: number]: any;
+            };
             query: ResolvedRouteQuery;
             params: Writable<    {
             [x: string]: any;
@@ -987,10 +1027,16 @@ name?: string | undefined;
     default?: ((props: {
         route: Readonly<{
             key: string;
-            matched: CreateRouteOptionsMatched & {
+            matched: CreateRouteOptions & WithHooks & (WithHost | WithoutHost) & (WithoutComponents | WithComponent | WithComponents) & (WithoutParent | WithParent) & (WithoutState | WithState) & {
+                meta: Record<string, unknown>;
+            };
+            matches: (CreateRouteOptions & WithHooks & (WithHost | WithoutHost) & (WithoutComponents | WithComponent | WithComponents) & (WithoutParent | WithParent) & (WithoutState | WithState) & {
                 meta: Record<string, unknown>;
+            })[];
+            state: {
+                [x: string]: any;
+                [x: number]: any;
             };
-            matches: CreateRouteOptionsMatched[];
             query: ResolvedRouteQuery;
             params: Writable<    {
             [x: string]: any;
@@ -1025,6 +1071,8 @@ declare type RoutesMap<TRoutes extends Routes = []> = {
     [K in TRoutes[number] as AsNamedRoute<K>['key']]: AsNamedRoute<K>;
 };
 
+declare type RouteStateByKey<TRoutes extends Routes, TKey extends string> = ExtractStateParams<RouteGetByKey<TRoutes, TKey>>;
+
 declare type RouteUpdate<TRoute extends ResolvedRoute = ResolvedRoute> = ResolvedRoute extends TRoute ? {
     (key: string, value: unknown, options?: RouterPushOptions): Promise<void>;
     (params: Partial<TRoute['params']>, options?: RouterPushOptions): Promise<void>;
@@ -1206,10 +1254,21 @@ declare type WithoutParent = {
     parent?: never;
 };
 
+declare type WithoutState = {
+    state?: never;
+};
+
 declare type WithParent<TParent extends Route = Route> = {
     parent: TParent;
 };
 
+declare type WithState<TState extends Record<string, Param> = Record<string, Param>> = {
+    /**
+     * Type params for additional data intended to be stored in history state, all keys will be optional unless a default is provided.
+     */
+    state: TState;
+};
+
 declare type Writable<T> = {
     -readonly [P in keyof T]: T[P];
 };
@@ -1217,7 +1276,7 @@ declare type Writable<T> = {
 export { }
 
 
-declare module '@vue/runtime-core' {
+declare module 'vue' {
     interface GlobalComponents {
         RouterView: typeof RouterView;
         RouterLink: typeof RouterLink;