@kitbag/router 0.1.1 → 0.2.0

package/dist/kitbag-router.d.ts

@@ -4,6 +4,7 @@ import { ComponentOptionsMixin } from 'vue';
 import { DeepReadonly } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
+import { FunctionalComponent } from 'vue';
 import { InjectionKey } from 'vue';
 import { Plugin as Plugin_2 } from 'vue';
 import { PropType } from 'vue';
@@ -145,9 +146,9 @@ export declare type ChildRouteProps = WithHooks & {
      */
     query?: string | Query;
     /**
-     * Type alias for Vue components, which can be either synchronous or asynchronous components.
+     * A Vue component, which can be either synchronous or asynchronous components.
      */
-    component: RouteComponent;
+    component: Component;
     /**
      * Represents additional metadata associated with a route, customizable via declaration merging.
      */
@@ -174,6 +175,30 @@ declare type CombineQuery<TParent extends Query | undefined, TChild extends Quer
 
 declare type CombineQueryString<TParent extends string | undefined, TChild extends string | undefined> = StringHasValue<TParent> extends true ? StringHasValue<TChild> extends true ? `${TParent}&${TChild}` : TParent : TChild;
 
+/**
+ * Creates a component wrapper which has no props itself but mounts another component within while binding its props
+ *
+ * @param component The component to mount
+ * @param props A callback that returns the props or attributes to bind to the component
+ * @returns A component
+ *
+ * @example
+ * ```ts
+ * import { createRoutes, component } from '@kitbag/router'
+ *
+ * export const routes = createRoutes([
+ *   {
+ *     name: 'User',
+ *     path: '/',
+ *     component: component(User, () => ({ userId: 1 }))
+ *   },
+ * ])
+ * ```
+ */
+export declare function component<TComponent extends Component>(component: TComponent, props: PropsGetter<TComponent>): Component;
+
+declare type Constructor = new (...args: any) => any;
+
 /**
  * Creates a router instance for a Vue application, equipped with methods for route handling, lifecycle hooks, and state management.
  *
@@ -228,11 +253,9 @@ export declare class DuplicateParamsError extends Error {
  */
 export declare type ExtractParamName<TParam extends string> = TParam extends `?${infer Param}` ? Param extends '' ? never : Param : TParam extends '' ? never : TParam;
 
-declare type ExtractParamsFromPathString<TPath extends string, TParams extends Record<string, Param | undefined> = Record<never, never>> = TPath extends `${infer Path}${ParamEnd}` ? ExtractParamsFromPathString<Path, TParams> : TPath extends `${string}:${infer Param}${ParamEnd}${infer Rest}` ? MergeParams<{
-    [P in ExtractParamName<Param>]: ExtractPathParamType<Param, TParams>;
-}, ExtractParamsFromPathString<Rest, TParams>> : TPath extends `${string}:${infer Param}` ? {
+declare type ExtractParamsFromPathString<TPath extends string, TParams extends Record<string, Param | undefined> = Record<never, never>> = TPath extends `${string}${ParamStart}${infer Param}${ParamEnd}${infer Rest}` ? MergeParams<{
     [P in ExtractParamName<Param>]: ExtractPathParamType<Param, TParams>;
-} : Record<never, never>;
+}, ExtractParamsFromPathString<Rest, TParams>> : Record<never, never>;
 
 /**
  * Extracts the actual type from a parameter type, handling getters, setters, and potential undefined values.
@@ -258,11 +281,9 @@ export declare type ExtractParamTypes<TParams extends Record<string, Param | und
  */
 export declare type ExtractPathParamType<TParam extends string, TParams extends Record<string, Param | undefined>> = TParam extends `?${infer OptionalParam}` ? OptionalParam extends keyof TParams ? TParams[OptionalParam] | undefined : StringConstructor | undefined : TParam extends keyof TParams ? TParams[TParam] : StringConstructor;
 
-declare type ExtractQueryParamsFromQueryString<TQuery extends string, TParams extends Record<string, Param | undefined> = Record<never, never>> = TQuery extends `${string}=:${infer Param}&${infer Rest}` ? MergeParams<{
+declare type ExtractQueryParamsFromQueryString<TQuery extends string, TParams extends Record<string, Param | undefined> = Record<never, never>> = TQuery extends `${string}=${ParamStart}${infer Param}${ParamEnd}${infer Rest}` ? MergeParams<{
     [P in ExtractParamName<Param>]: ExtractPathParamType<Param, TParams>;
-}, ExtractQueryParamsFromQueryString<Rest, TParams>> : TQuery extends `${string}:${infer Param}` ? {
-    [P in ExtractParamName<Param>]: ExtractPathParamType<Param, TParams>;
-} : Record<never, never>;
+}, ExtractQueryParamsFromQueryString<Rest, TParams>> : Record<never, never>;
 
 declare type ExtractRouteChildren<TRoute extends RouteProps> = TRoute extends ParentRouteProps ? TRoute['children'] extends Route[] ? TRoute['children'] : [] : [];
 
@@ -400,9 +421,11 @@ declare type OnlyRequiredProperties<T> = {
     [K in keyof T as Extract<T[K], undefined> extends never ? K : never]: T[K];
 };
 
-export declare type Param = ParamGetter | ParamGetSet | RegExp | BooleanConstructor | NumberConstructor | StringConstructor;
+export declare type Param = ParamGetter | ParamGetSet | RegExp | BooleanConstructor | NumberConstructor | StringConstructor | DateConstructor | JSON;
+
+export declare type ParamEnd = typeof paramEnd;
 
-declare type ParamEnd = '/';
+export declare const paramEnd = "]";
 
 export declare type ParamExtras = {
     invalid: (message?: string) => never;
@@ -417,6 +440,10 @@ export declare type ParamGetter<T = any> = (value: string, extras: ParamExtras)
 
 export declare type ParamSetter<T = any> = (value: T, extras: ParamExtras) => string;
 
+export declare type ParamStart = typeof paramStart;
+
+export declare const paramStart = "[";
+
 /**
  * Represents properties common to parent routes in a route configuration, including hooks, path, and optional query parameters.
  */
@@ -442,18 +469,18 @@ export declare type ParentRouteProps = WithHooks & {
      */
     children: Routes;
     /**
-     * Type alias for Vue components, which can be either synchronous or asynchronous components.
+     * A Vue component, which can be either synchronous or asynchronous components.
      */
-    component?: RouteComponent;
+    component?: Component;
     /**
      * Represents additional metadata associated with a route, customizable via declaration merging.
      */
     meta?: RouteMeta;
 };
 
-declare type Path<T extends string = any, P extends PathParams<T> = any> = {
-    path: T;
-    params: Identity<ExtractParamsFromPathString<T, P>>;
+declare type Path<TPath extends string = any, TParams extends PathParams<TPath> = any> = {
+    path: TPath;
+    params: Identity<ExtractParamsFromPathString<TPath, TParams>>;
     toString: () => string;
 };
 
@@ -474,7 +501,7 @@ declare type Path<T extends string = any, P extends PathParams<T> = any> = {
  * export const routes = createRoutes([
  *   {
  *     name: 'home',
- *     path: path('/:foo', { foo: Number }),
+ *     path: path('/[foo]', { foo: Number }),
  *     component: Home
  *   },
  * ])
@@ -482,10 +509,14 @@ declare type Path<T extends string = any, P extends PathParams<T> = any> = {
  */
 export declare function path<TPath extends string, TParams extends PathParams<TPath>>(path: TPath, params: Identity<TParams>): Path<TPath, TParams>;
 
-declare type PathParams<T extends string> = {
-    [K in keyof ExtractParamsFromPathString<T>]?: Param;
+declare type PathParams<TPath extends string> = {
+    [K in keyof ExtractParamsFromPathString<TPath>]?: Param;
 };
 
+declare type Props<TComponent extends Component> = TComponent extends Constructor ? InstanceType<TComponent>['$props'] : TComponent extends AsyncComponentLoader<infer T extends Component> ? Props<T> : TComponent extends FunctionalComponent<infer T> ? T : never;
+
+declare type PropsGetter<TComponent extends Component> = () => MaybePromise<Props<TComponent>>;
+
 declare type Query<T extends string = any, P extends QueryParams<T> = any> = {
     query: T;
     params: Identity<ExtractQueryParamsFromQueryString<T, P>>;
@@ -509,7 +540,7 @@ declare type Query<T extends string = any, P extends QueryParams<T> = any> = {
  * export const routes = createRoutes([
  *   {
  *     name: 'home',
- *     query: query('?bar=:bar', { bar: Boolean }),
+ *     query: query('bar=[bar]', { bar: Boolean }),
  *     component: Home
  *   },
  * ])
@@ -654,11 +685,6 @@ export declare type Route<TKey extends string | undefined = any, TPath extends s
     disabled: TDisabled extends boolean ? TDisabled : false;
 };
 
-/**
- * Type alias for Vue components, which can be either synchronous or asynchronous components.
- */
-export declare type RouteComponent = Component | DefineComponent | AsyncComponentLoader;
-
 declare type RouteGetByKey<TRoutes extends Routes, TKey extends RoutesKey<TRoutes>> = RoutesMap<TRoutes>[TKey];
 
 /**
@@ -897,11 +923,11 @@ export declare type RouterReject = (type: RouterRejectionType) => void;
 
 declare type RouterRejection = Ref<null | {
     type: RouterRejectionType;
-    component: RouteComponent;
+    component: Component;
 }>;
 
 declare type RouterRejectionComponents = {
-    rejections?: Partial<Record<RouterRejectionType, RouteComponent>>;
+    rejections?: Partial<Record<RouterRejectionType, Component>>;
 };
 
 export declare const routerRejectionKey: InjectionKey<RouterRejection>;
@@ -936,12 +962,12 @@ declare type RouterRoute<TRoute extends ResolvedRoute = ResolvedRoute> = Omit<Re
 export declare const RouterView: __VLS_WithTemplateSlots<DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {}>>, {}, {}>, Readonly<{
     default?: ((props: {
         route: RouterRoute;
-        component: RouteComponent;
+        component: Component;
     }) => unknown) | undefined;
 }> & {
     default?: ((props: {
         route: RouterRoute;
-        component: RouteComponent;
+        component: Component;
     }) => unknown) | undefined;
 }>;