nuxt-typed-router 2.0.3 → 2.1.0-beta.1

package/README.md

@@ -18,11 +18,11 @@
 
 ## Provide a type safe router to Nuxt with auto-generated typed definitions for route names and autocompletion for route params
 
-- Automaticaly provides types check and autocomplete to `NuxtLink`
-- Exports a `useTypedRouter` and `useTypedRoute` composable
-- Supports routes defined in `config.extendRoutes`
-- Infer route params based on route name
-- Provide global `$typedRouter` util
+- Provides types check and autocomplete to `NuxtLink`
+  - Provides types check for `useRouter` and `useRoute` 
+  - Supports routes defined in `config.extendRoutes`
+  - Supports optional params and catchAll routes
+  - Infer route params based on route name
 
 <br/>
 

package/dist/module.json

@@ -5,5 +5,5 @@
     "nuxt": "^3.0.0-rc.1",
     "bridge": false
   },
-  "version": "2.0.3"
+  "version": "2.1.0-beta.1"
 }

package/dist/module.mjs

@@ -26,125 +26,8 @@ import type {
   TypedRouteParams,
   ResolvedTypedRouteNamedMapper,
 } from './__routes';
-`;
-
-const staticTypeUtils = `
-// Type utils
-type ExtractRequiredParameters<T extends Record<string, any>> = Pick<
-  T,
-  { [K in keyof T]: undefined extends T[K] ? never : K }[keyof T]
->;
-
-type HasOneRequiredParameter<T extends TypedRouteList> = [TypedRouteParams[T]] extends [never]
-  ? false
-  : [keyof ExtractRequiredParameters<TypedRouteParams[T]>] extends [undefined]
-  ? false
-  : true;
-
-type TypedLocationAsRelativeRaw<T extends TypedRouteList> = {
-  name?: T;
-} & ([TypedRouteParams[T]] extends [never]
-  ? {}
-  : HasOneRequiredParameter<T> extends false
-  ? { params?: TypedRouteParams[T] }
-  : { params: TypedRouteParams[T] });
-
-type ResolvedTypedLocationAsRelativeRaw<T extends TypedRouteList> = {
-  name?: T;
-} & ([TypedRouteParams[T]] extends [never] ? {} : { params: Required<TypedRouteParams[T]> });
-
-type TypedRouteLocationRaw = RouteQueryAndHash & TypedRouteNamedMapper & RouteLocationOptions;
-
-type _TypedRoute = Omit<RouteLocationNormalizedLoaded, 'name' | 'params'> &
-  ResolvedTypedRouteNamedMapper;
-type _TypedNamedRoute<T extends TypedRouteList> = Omit<
-  RouteLocationNormalizedLoaded,
-  'name' | 'params'
-> &
-  ResolvedTypedLocationAsRelativeRaw<T>;
-
-/** Augmented Router interface */
-interface _TypedRouter
-  extends Omit<Router, 'removeRoute' | 'hasRoute' | 'resolve' | 'push' | 'replace'> {
-  /**
-   * Remove an existing route by its name.
-   *
-   * @param name - Name of the route to remove
-   */
-  removeRoute(name: TypedRouteList): void;
-  /**
-   * Checks if a route with a given name exists
-   *
-   * @param name - Name of the route to check
-   */
-  hasRoute(name: TypedRouteList): boolean;
-  /**
-   * Returns the {@link RouteLocation | normalized version} of a
-   * {@link RouteLocationRaw | route location}. Also includes an \`href\` property
-   * that includes any existing \`base\`. By default the \`currentLocation\` used is
-   * \`route.currentRoute\` and should only be overriden in advanced use cases.
-   *
-   * @param to - Raw route location to resolve
-   * @param currentLocation - Optional current location to resolve against
-   */
-  resolve(
-    to: TypedRouteLocationRaw,
-    currentLocation?: RouteLocationNormalizedLoaded
-  ): RouteLocation & {
-    href: string;
-  };
-  /**
-   * Programmatically navigate to a new URL by pushing an entry in the history
-   * stack.
-   *
-   * @param to - Route location to navigate to
-   */
-  push(to: TypedRouteLocationRaw): Promise<NavigationFailure | void | undefined>;
-  /**
-   * Programmatically navigate to a new URL by replacing the current entry in
-   * the history stack.
-   *
-   * @param to - Route location to navigate to
-   */
-  replace(to: TypedRouteLocationRaw): Promise<NavigationFailure | void | undefined>;
-}
-
-export interface TypedRouter extends _TypedRouter {}
-export type TypedRoute = _TypedRoute;
-export type TypedNamedRoute<T extends TypedRouteList> = _TypedNamedRoute<T>;
-
-declare global {
-  export interface TypedRouter extends _TypedRouter {}
-  export type TypedRoute = _TypedRoute;
-  export type TypedNamedRoute<T extends TypedRouteList> = _TypedNamedRoute<T>;
-}
-
-type TypedNuxtLinkProps = Omit<NuxtLinkProps, 'to'> & {
-  to: string | Omit<Exclude<RouteLocationRaw, string>, 'name'> & TypedRouteNamedMapper;
-};
-
-type _NuxtLink = DefineComponent<
-  TypedNuxtLinkProps,
-  {},
-  {},
-  import('vue').ComputedOptions,
-  import('vue').MethodOptions,
-  import('vue').ComponentOptionsMixin,
-  import('vue').ComponentOptionsMixin,
-  {},
-  string,
-  import('vue').VNodeProps &
-    import('vue').AllowedComponentProps &
-    import('vue').ComponentCustomProps,
-  Readonly<TypedNuxtLinkProps>,
-  {}
->;
-
-declare module '@vue/runtime-core' {
-  export interface GlobalComponents {
-    NuxtLink: _NuxtLink;
-  }
-}
+import {useTypedRoute} from './__useTypedRoute';
+import {useTypedRouter} from './__useTypedRouter';
 `;
 
 const watermarkTemplate = `
@@ -158,13 +41,138 @@ const watermarkTemplate = `
  
 `;
 
-function createDeclarationRoutesFile() {
+function createRuntimeTypeUtils(autoImport) {
+  return `
+ // Type utils
+ type ExtractRequiredParameters<T extends Record<string, any>> = Pick<
+   T,
+   { [K in keyof T]: undefined extends T[K] ? never : K }[keyof T]
+ >;
+ 
+ type HasOneRequiredParameter<T extends TypedRouteList> = [TypedRouteParams[T]] extends [never]
+   ? false
+   : [keyof ExtractRequiredParameters<TypedRouteParams[T]>] extends [undefined]
+   ? false
+   : true;
+ 
+ type TypedLocationAsRelativeRaw<T extends TypedRouteList> = {
+   name?: T;
+ } & ([TypedRouteParams[T]] extends [never]
+   ? {}
+   : HasOneRequiredParameter<T> extends false
+   ? { params?: TypedRouteParams[T] }
+   : { params: TypedRouteParams[T] });
+ 
+ type ResolvedTypedLocationAsRelativeRaw<T extends TypedRouteList> = {
+   name?: T;
+ } & ([TypedRouteParams[T]] extends [never] ? {} : { params: TypedRouteParams[T] });
+ 
+ type TypedRouteLocationRaw = RouteQueryAndHash & TypedRouteNamedMapper & RouteLocationOptions;
+ 
+ type _TypedRoute = Omit<RouteLocationNormalizedLoaded, 'name' | 'params'> &
+   ResolvedTypedRouteNamedMapper;
+ type _TypedNamedRoute<T extends TypedRouteList> = Omit<
+   RouteLocationNormalizedLoaded,
+   'name' | 'params'
+ > &
+   ResolvedTypedLocationAsRelativeRaw<T>;
+ 
+ /** Augmented Router interface */
+ interface _TypedRouter
+   extends Omit<Router, 'removeRoute' | 'hasRoute' | 'resolve' | 'push' | 'replace', 'currentRoute'> {
+   readonly currentRoute: _TypedRoute;
+   /**
+    * Remove an existing route by its name.
+    *
+    * @param name - Name of the route to remove
+    */
+   removeRoute(name: TypedRouteList): void;
+   /**
+    * Checks if a route with a given name exists
+    *
+    * @param name - Name of the route to check
+    */
+   hasRoute(name: TypedRouteList): boolean;
+   /**
+    * Returns the {@link RouteLocation | normalized version} of a
+    * {@link RouteLocationRaw | route location}. Also includes an \`href\` property
+    * that includes any existing \`base\`. By default the \`currentLocation\` used is
+    * \`route.currentRoute\` and should only be overriden in advanced use cases.
+    *
+    * @param to - Raw route location to resolve
+    * @param currentLocation - Optional current location to resolve against
+    */
+   resolve(
+     to: TypedRouteLocationRaw,
+     currentLocation?: RouteLocationNormalizedLoaded
+   ): RouteLocation & {
+     href: string;
+   };
+   /**
+    * Programmatically navigate to a new URL by pushing an entry in the history
+    * stack.
+    *
+    * @param to - Route location to navigate to
+    */
+   push(to: TypedRouteLocationRaw): Promise<NavigationFailure | void | undefined>;
+   /**
+    * Programmatically navigate to a new URL by replacing the current entry in
+    * the history stack.
+    *
+    * @param to - Route location to navigate to
+    */
+   replace(to: TypedRouteLocationRaw): Promise<NavigationFailure | void | undefined>;
+ }
+ 
+ export interface TypedRouter extends _TypedRouter {}
+ export type TypedRoute = _TypedRoute;
+ export type TypedNamedRoute<T extends TypedRouteList> = _TypedNamedRoute<T>;
+ 
+ declare global {
+   export interface TypedRouter extends _TypedRouter {}
+   export type TypedRoute = _TypedRoute;
+   export type TypedNamedRoute<T extends TypedRouteList> = _TypedNamedRoute<T>;
+ 
+   ${autoImport ? `const useRoute: typeof useTypedRoute;
+      const useRouter: typeof useTypedRouter;` : ""}
+ }
+ 
+ type TypedNuxtLinkProps = Omit<NuxtLinkProps, 'to'> & {
+   to: string | Omit<Exclude<RouteLocationRaw, string>, 'name'> & TypedRouteNamedMapper;
+ };
+ 
+ type _NuxtLink = DefineComponent<
+   TypedNuxtLinkProps,
+   {},
+   {},
+   import('vue').ComputedOptions,
+   import('vue').MethodOptions,
+   import('vue').ComponentOptionsMixin,
+   import('vue').ComponentOptionsMixin,
+   {},
+   string,
+   import('vue').VNodeProps &
+     import('vue').AllowedComponentProps &
+     import('vue').ComponentCustomProps,
+   Readonly<TypedNuxtLinkProps>,
+   {}
+ >;
+ 
+ declare module '@vue/runtime-core' {
+   export interface GlobalComponents {
+     NuxtLink: _NuxtLink;
+   }
+ }
+ `;
+}
+
+function createDeclarationRoutesFile(autoImport) {
   return `
     ${watermarkTemplate}
     
     ${staticTypesImports}
 
-    ${staticTypeUtils}
+    ${createRuntimeTypeUtils(autoImport)}
   `;
 }
 
@@ -173,8 +181,8 @@ function createRuntimeIndexFile() {
   ${watermarkTemplate}
   export { routesNames } from './__routes';
   export type { TypedRouteList } from './__routes';
-  export * from './__useTypedRouter';
-  export * from './__useTypedRoute';
+  export {useRouter} from './__useTypedRouter';
+  export {useRoute} from './__useTypedRoute';
   `;
 }
 
@@ -215,7 +223,9 @@ function createTypedRouteNamedMapperExport(routesParams) {
   return `export type TypedRouteNamedMapper = 
     ${routesParams.map(
     ({ name, params }) => `{name: "${name}" ${params.length ? `, params${params.some((s) => s.required) ? "" : "?"}: {
-          ${params.map(({ key, required }) => `"${key}"${required ? "" : "?"}: string | number`).join(",\n")}
+          ${params.map(
+      ({ key, required, catchAll }) => `"${key}"${required ? "" : "?"}: (string | number)${catchAll ? "[]" : ""}`
+    ).join(",\n")}
         }` : ""}}`
   ).join("|\n")}
   `;
@@ -229,7 +239,7 @@ function createResolvedTypedRouteNamedMapperExport(routesParams) {
     ${routesParams.map(
     ({ name, params }) => `{name: "${name}" ${params.length ? `, params: {
                 ${params.map(
-      ({ key, notRequiredOnPage }) => `"${key}"${notRequiredOnPage ? "?" : ""}: string`
+      ({ key, notRequiredOnPage, catchAll }) => `"${key}"${notRequiredOnPage ? "?" : ""}: string${catchAll ? "[]" : ""}`
     ).join(",\n")}
         }` : ""}}`
   ).join("|\n")}
@@ -302,7 +312,9 @@ export function useTypedRoute<T extends TypedRouteList = never>(
   return route as any;
 }
 
-  `;
+export const useRoute = useTypedRoute;
+
+`;
 }
 
 function createRuntimeUseTypedRouterFile(routesDeclTemplate) {
@@ -325,6 +337,7 @@ function createRuntimeUseTypedRouterFile(routesDeclTemplate) {
     return router;
   };
 
+  export const useRouter = useTypedRouter;
   `;
 }
 
@@ -409,6 +422,7 @@ function handlePluginFileSave({
 let previousGeneratedRoutes = "";
 async function saveGeneratedFiles({
   rootDir,
+  autoImport,
   outputData: { routesDeclTemplate, routesList, routesObjectTemplate, routesParams }
 }) {
   const filesMap = [
@@ -431,7 +445,7 @@ async function saveGeneratedFiles({
     },
     {
       fileName: `typed-router.d.ts`,
-      content: createDeclarationRoutesFile()
+      content: createDeclarationRoutesFile(autoImport)
     },
     {
       fileName: "index.ts",
@@ -443,7 +457,7 @@ async function saveGeneratedFiles({
   );
   if (previousGeneratedRoutes !== routesList.join(",")) {
     previousGeneratedRoutes = routesList.join(",");
-    console.log(logSymbols.success, `[typed-router] Routes definitions generated`);
+    console.log(logSymbols.success, `Router autocompletions generated \u{1F6A6}`);
   }
 }
 
@@ -451,24 +465,25 @@ function isItemLast(array, index) {
   return array ? index === array.length - 1 : false;
 }
 
-const routeParamExtractRegxp = /(:(\w+)(\?)?)+/g;
+const routeParamExtractRegxp = /(:(\w+)(\(.+\)[*+]?)?(\?)?)+/g;
 function extractRouteParamsFromPath(path, isIndexFileForRouting, previousParams) {
   let params = [];
   let matches;
   do {
     matches = routeParamExtractRegxp.exec(path);
     if (matches) {
-      const [_, mtch, key, optional] = matches;
+      const [_, mtch, key, catchAll, optional] = matches;
       if (mtch) {
-        params.push({ name: key, optional: !!optional });
+        params.push({ name: key, optional: !!optional, catchAll: !!catchAll });
       }
     }
   } while (matches);
   let allMergedParams = params.map(
-    ({ name, optional }) => ({
+    ({ name, optional, catchAll }) => ({
       key: name,
       required: !optional,
-      notRequiredOnPage: optional
+      notRequiredOnPage: optional,
+      catchAll
     })
   );
   if (previousParams?.length) {
@@ -602,8 +617,10 @@ function startGenerator({ output, routesConfig }) {
   output.routesDeclTemplate += "}";
 }
 
-function createTypedRouter({ rootDir, plugin, nuxt }) {
+function createTypedRouter({ plugin, nuxt }) {
   try {
+    const rootDir = nuxt.options.rootDir;
+    const autoImport = nuxt.options.imports.autoImport ?? true;
     extendPages(async (routes) => {
       if (routes.length) {
         const outputData = constructRouteMap(routes);
@@ -615,6 +632,7 @@ function createTypedRouter({ rootDir, plugin, nuxt }) {
           });
         }
         await saveGeneratedFiles({
+          autoImport,
           rootDir,
           outputData
         });
@@ -651,8 +669,12 @@ const module = defineNuxtModule({
       ...nuxt.options.alias,
       "@typed-router": resolve(`${rootDir}/.nuxt/typed-router`)
     };
-    nuxt.hook("pages:extend", () => createTypedRouter({ rootDir, nuxt, plugin }));
-    createTypedRouter({ rootDir, nuxt, plugin });
+    nuxt.options.typescript.tsConfig = {
+      include: ["./typed-router/typed-router.d.ts"]
+    };
+    const typedRouterOptions = { nuxt, plugin };
+    nuxt.hook("pages:extend", () => createTypedRouter(typedRouterOptions));
+    createTypedRouter(typedRouterOptions);
   }
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-typed-router",
-  "version": "2.0.3",
+  "version": "2.1.0-beta.1",
   "description": "Provide autocompletion for pages route names generated by Nuxt router",
   "type": "module",
   "main": "./dist/module.cjs",
@@ -59,10 +59,11 @@
     "log-symbols": "^5.1.0",
     "mkdirp": "^1.0.4",
     "pathe": "1.0.0",
-    "prettier": "2.8.1"
+    "prettier": "2.8.3"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.2.1",
+    "@nuxt/test-utils": "^3.0.0",
     "@nuxt/types": "^2.15.8",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@types/lodash-es": "^4.17.6",
@@ -70,11 +71,12 @@
     "@types/node": "^17.0.23",
     "@types/prettier": "^2.7.2",
     "cross-env": "^7.0.3",
-    "eslint": "8.31.0",
+    "eslint": "8.32.0",
     "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-vue": "^9.9.0",
     "nuxt": "3.0.0",
     "typescript": "^4.9.4",
-    "vitest": "^0.27.0",
+    "vitest": "^0.27.2",
     "vue-router": "^4.1.6"
   }
 }