nuxt-typed-router 1.2.4 → 2.0.0-beta.0

package/README.md

@@ -1,5 +1,10 @@
 # 🚗🚦 Typed Router for Nuxt
 
+<p align="center">
+  <img width='100' src="https://raw.githubusercontent.com/victorgarciaesgi/nuxt-typed-router/master/.github/images/logo.png" alt="nuxt-typed-router logo">
+</p>
+
+
 [npm-version-src]: https://img.shields.io/npm/v/nuxt-typed-router.svg
 [npm-version-href]: https://www.npmjs.com/package/nuxt-typed-router
 [npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-typed-router.svg
@@ -9,9 +14,9 @@
 [![npm version][npm-version-src]][npm-version-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
 [![npm downloads][npm-total-downloads-src]][npm-downloads-href]
-<img src='https://img.shields.io/npm/l/simple-graphql-to-typescript.svg'>
+<img src='https://img.shields.io/npm/l/nuxt-typed-router.svg'>
 
-> Provide a type safe router to Nuxt with auto-generated typed definitions for route names and autocompletion for route params
+## Provide a type safe router to Nuxt with auto-generated typed definitions for route names and autocompletion for route params
 
 - 🏎 Provides a hook `useTypedRouter` that returns an alias of `$typedRouter` and also a typed list of your routes
 - 🚚 Expose a global method `$typedRouter` (clone of vue-router), but typed with the routes defined in `pages` directory
@@ -28,7 +33,7 @@ Demo 🧪 : [nuxt-typed-router-demo](https://github.com/victorgarciaesgi/nuxt-ty
 
 <br/>
 <p align="center">
-  <img src="https://github.com/victorgarciaesgi/nuxt-typed-router/blob/master/medias/in-action.gif?raw=true"/>
+  <img src="https://github.com/victorgarciaesgi/nuxt-typed-router/blob/master/.github/images/in-action.gif?raw=true"/>
 </p>
 <br/>
 
@@ -78,6 +83,11 @@ interface ModuleOptions {
    * @default "routerPagesNames"
    * */
   routesObjectName?: string;
+  /**
+   * Set to false if you don't want a plugin generated
+   * @default false
+   */
+  plugin?: boolean;
 }
 ```
 
@@ -100,7 +110,7 @@ You can specify the output dir of the generated files in your configuration. It
 
 ```ts
 export default defineNuxtConfig({
-  buildModules: ['nuxt-typed-router'],
+  modules: ['nuxt-typed-router'],
   nuxtTypedRouter: {
     outDir: './generated',
   },

package/dist/module.d.ts

@@ -1,16 +1,11 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
 interface ModuleOptions {
-    /** Output directory where you cant the files to be saved (ex: "./generated")
-     * @default "<srcDir>/generated"
+    /**
+     * Set to false if you don't want a plugin generated
+     * @default false
      */
-    outDir?: string;
-    /**  Name of the routesNames object (ex: "routesTree")
-     * @default "routerPagesNames"
-     * */
-    routesObjectName?: string;
-    /** @deprecated */
-    stripAtFromName?: boolean;
+    plugin?: boolean;
 }
 
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;

package/dist/module.json

@@ -5,5 +5,5 @@
     "nuxt": "^3.0.0-rc.1",
     "bridge": false
   },
-  "version": "1.2.4"
+  "version": "2.0.0-beta.0"
 }

package/dist/module.mjs

@@ -1,13 +1,331 @@
+import { fileURLToPath } from 'url';
 import { extendPages, defineNuxtModule } from '@nuxt/kit';
 import chalk from 'chalk';
 import logSymbols from 'log-symbols';
 import prettier from 'prettier';
 import fs from 'fs';
-import { fileURLToPath } from 'url';
 import { dirname, resolve } from 'pathe';
 import mkdirp from 'mkdirp';
 import { camelCase } from 'lodash-es';
 
+const staticTypesImports = `
+import type {
+  NavigationFailure,
+  RouteLocation,
+  RouteLocationNormalizedLoaded,
+  RouteLocationOptions,
+  RouteQueryAndHash,
+  RouteLocationRaw,
+  Router,
+} from 'vue-router';
+import type { DefineComponent } from 'vue';
+import type { NuxtLinkProps } from '#app';
+import type {
+  TypedRouteList,
+  TypedRouteNamedMapper,
+  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: 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;
+  }
+}
+`;
+
+const watermarkTemplate = `
+  // @ts-nocheck
+  // eslint-disable
+  /** 
+  * ---------------------------------------------------
+  * \u{1F697}\u{1F6A6} Generated by nuxt-typed-router. Do not modify !
+  * ---------------------------------------------------
+  * */
+ 
+`;
+
+function createDeclarationRoutesFile() {
+  return `
+    ${watermarkTemplate}
+    
+    ${staticTypesImports}
+
+    ${staticTypeUtils}
+  `;
+}
+
+function createRuntimeIndexFile() {
+  return `
+  ${watermarkTemplate}
+  export * from './__routes';
+  export * from './__useTypedRouter';
+  export * from './__useTypedRoute';
+  `;
+}
+
+function createRuntimePluginFile(routesDeclTemplate) {
+  return `
+  ${watermarkTemplate}
+  import { defineNuxtPlugin } from '#app';
+
+  export default defineNuxtPlugin(() => {
+    const router = useRouter();
+    const route = useRoute();
+    const routesNames = ${routesDeclTemplate};
+
+    return {
+      provide: {
+        typedRouter: router as TypedRouter,
+        typedRoute: route as TypedRoute,
+        routesNames,
+      },
+    };
+  });
+  `;
+}
+
+function createTypedRouteListExport(routesList) {
+  return `export type TypedRouteList = ${routesList.map((m) => `'${m}'`).join("|\n")}`;
+}
+function createTypedRouteParamsExport(routesParams) {
+  return `export type TypedRouteParams = {
+    ${routesParams.map(
+    ({ name, params }) => `"${name}": ${params.length ? `{
+          ${params.map(({ key, required, type }) => `"${key}"${required ? "" : "?"}: ${type}`).join(",\n")}
+        }` : "never"}`
+  ).join(",\n")}
+  }`;
+}
+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, type }) => `"${key}"${required ? "" : "?"}: ${type}`).join(",\n")}
+        }` : ""}}`
+  ).join("|\n")}
+  `;
+}
+function createResolvedTypedRouteNamedMapperExport(routesParams) {
+  return `export type ResolvedTypedRouteNamedMapper = 
+  {
+    name: TypedRouteList;
+    params: unknown;
+  } & (
+    ${routesParams.map(
+    ({ name, params }) => `{name: "${name}" ${params.length ? `, params: {
+          ${params.map(({ key, type }) => `"${key}": ${type}`).join(",\n")}
+        }` : ""}}`
+  ).join("|\n")}
+      )
+  `;
+}
+
+function createRuntimeRoutesFile({
+  routesList,
+  routesObjectTemplate,
+  routesDeclTemplate,
+  routesParams
+}) {
+  return `
+    ${watermarkTemplate}
+
+    export const routesNames = ${routesObjectTemplate};
+
+    ${createTypedRouteListExport(routesList)}
+
+    export type RouteListDecl = ${routesDeclTemplate};
+
+    /** 
+     * Routes params are only required for the exact targeted route name,
+     * vue-router behaviour allow to navigate between children routes without the need to provide all the params every time.
+     * So we can't enforce params when navigating between routes, only a \`[xxx].vue\` page will have required params in the type definition
+     * 
+     * 
+     * */
+
+    ${createTypedRouteParamsExport(routesParams)}
+
+    ${createTypedRouteNamedMapperExport(routesParams)}
+
+    ${createResolvedTypedRouteNamedMapperExport(routesParams)}
+  `;
+}
+
+function createUseTypedRouteFile(routesDeclTemplate) {
+  return `
+  ${watermarkTemplate}
+  import { useRoute } from '#app';
+  import { TypedRouteList } from './__routes';
+
+  /** Acts the same as \`useRoute\`, but typed.
+ *
+ * @exemple
+ *
+ * \`\`\`ts
+ * const route = useTypedRoute();
+ * \`\`\`
+ *
+ * \`\`\`ts
+ * const route = useTypedRoute('my-route-with-param-id');
+ * route.params.id // autocompletes!
+ * \`\`\`
+ *
+ * \`\`\`ts
+ * const route = useTypedRoute();
+ * if (route.name === 'my-route-with-param-id') {
+ *    route.params.id // autocompletes!
+ * }
+ * \`\`\`
+ */
+export function useTypedRoute<T extends TypedRouteList = never>(
+  name?: T
+): [T] extends [never] ? TypedRoute : TypedNamedRoute<T> {
+  const route = useRoute();
+
+  return route as any;
+}
+
+  `;
+}
+
+function createRuntimeUseTypedRouterFile(routesDeclTemplate) {
+  return `
+  ${watermarkTemplate}
+  import { useRouter } from '#app';
+  import { TypedRouter } from './typed-router';
+  import { RouteListDecl } from './__routes';
+
+  /** Returns instances of $typedRouter and $routesList fully typed to use in your components or your Vuex/Pinia store
+   * 
+   * @exemple
+   * 
+   * \`\`\`ts
+   * const { router, routes } = useTypedRouter();
+   * \`\`\`
+   */
+  export function useTypedRouter(): TypedRouter {
+    const router = useRouter();
+
+    return router;
+  };
+
+  `;
+}
+
 const { resolveConfig, format } = prettier;
 const defaultPrettierOptions = {
   printWidth: 100,
@@ -36,8 +354,13 @@ async function formatOutputWithPrettier(template) {
 }
 
 dirname(fileURLToPath(import.meta.url));
-async function saveRouteFiles(outDir, srcDir, fileName, content) {
+async function processPathAndWriteFile({
+  content,
+  fileName,
+  srcDir
+}) {
   try {
+    const outDir = `.nuxt/typed-router`;
     const processedOutDir = resolve(srcDir, outDir);
     const outputFile = resolve(process.cwd(), `${processedOutDir}/${fileName}`);
     const formatedContent = await formatOutputWithPrettier(content);
@@ -63,6 +386,87 @@ async function writeFile(path, content) {
   }
 }
 
+function handlePluginFileSave({
+  nuxt,
+  srcDir,
+  routesDeclTemplate
+}) {
+  const pluginName = "__typed-router.ts";
+  nuxt.hook("build:done", async () => {
+    const pluginFolder = `${srcDir}/plugins`;
+    await processPathAndWriteFile({
+      outDir: pluginFolder,
+      srcDir,
+      fileName: pluginName,
+      content: createRuntimePluginFile(routesDeclTemplate)
+    });
+  });
+}
+
+async function saveGeneratedFiles({
+  srcDir,
+  outputData: { routesDeclTemplate, routesList, routesObjectTemplate, routesParams }
+}) {
+  const filesMap = [
+    {
+      fileName: "__useTypedRouter.ts",
+      content: createRuntimeUseTypedRouterFile()
+    },
+    {
+      fileName: "__useTypedRoute.ts",
+      content: createUseTypedRouteFile()
+    },
+    {
+      fileName: `__routes.ts`,
+      content: createRuntimeRoutesFile({
+        routesList,
+        routesObjectTemplate,
+        routesDeclTemplate,
+        routesParams
+      })
+    },
+    {
+      fileName: `typed-router.d.ts`,
+      content: createDeclarationRoutesFile()
+    },
+    {
+      fileName: "index.ts",
+      content: createRuntimeIndexFile()
+    }
+  ];
+  await Promise.all(
+    filesMap.map(({ content, fileName }) => processPathAndWriteFile({ srcDir, content, fileName }))
+  );
+  console.log(logSymbols.success, `[typed-router] Routes definitions generated`);
+}
+
+function isItemLast(array, index) {
+  return array ? index === array.length - 1 : false;
+}
+
+const routeParamExtractRegxp = /:(\w+)/;
+function extractRouteParamsFromPath(path, isIndexFileForRouting, previousParams) {
+  const params = path.match(routeParamExtractRegxp) ?? [];
+  params?.shift();
+  let allMergedParams = params.map(
+    (m) => ({
+      key: m,
+      type: "string | number",
+      required: true
+    })
+  );
+  if (previousParams?.length) {
+    allMergedParams = previousParams.map((m) => ({ ...m, required: false })).concat(allMergedParams);
+  }
+  if (!params.length && isIndexFileForRouting) {
+    const lastItem = allMergedParams[allMergedParams.length - 1];
+    if (lastItem) {
+      lastItem.required = true;
+    }
+  }
+  return allMergedParams;
+}
+
 function extractMatchingSiblings(mainRoute, siblingRoutes) {
   return siblingRoutes?.filter((s) => {
     const chunkName = extractChunkMain(mainRoute.file);
@@ -92,61 +496,6 @@ function extractChunkMain(chunkName) {
   return chunkArray?.join("/");
 }
 
-const routeParamExtractRegxp = /:(\w+)/;
-function extractRouteParamsFromPath(path, previousParams) {
-  const params = path.match(routeParamExtractRegxp) ?? [];
-  params?.shift();
-  let allMergedParams = params.map(
-    (m) => ({
-      key: m,
-      type: "string | number",
-      required: true
-    })
-  );
-  if (previousParams?.length) {
-    allMergedParams = allMergedParams.concat(
-      previousParams.map((m) => ({ ...m, required: false }))
-    );
-  }
-  return allMergedParams;
-}
-
-function isItemLast(array, index) {
-  return index === array.length - 1;
-}
-function constructRouteMap(routesConfig) {
-  try {
-    let routesObjectTemplate = "{";
-    let routesDeclTemplate = "{";
-    let routesList = [];
-    let routesParams = [];
-    const output = { routesObjectTemplate, routesDeclTemplate, routesList, routesParams };
-    startGeneratorProcedure({
-      output,
-      routesConfig
-    });
-    return output;
-  } catch (e) {
-    throw new Error("Generation failed");
-  }
-}
-function startGeneratorProcedure({
-  output,
-  routesConfig
-}) {
-  routesConfig.forEach((route, index) => {
-    const rootSiblingsRoutes = routesConfig.filter((rt) => rt.chunkName !== route.chunkName);
-    walkThoughRoutes({
-      route,
-      level: 0,
-      output,
-      siblings: rootSiblingsRoutes,
-      isLast: isItemLast(routesConfig, index)
-    });
-  });
-  output.routesObjectTemplate += "}";
-  output.routesDeclTemplate += "}";
-}
 function walkThoughRoutes({
   route,
   level,
@@ -168,7 +517,7 @@ function walkThoughRoutes({
     const nameKey = camelCase(parentPath || "index");
     output.routesObjectTemplate += `${nameKey}:{`;
     output.routesDeclTemplate += `"${nameKey}":{`;
-    const allRouteParams = extractRouteParamsFromPath(route.path, previousParams);
+    const allRouteParams = extractRouteParamsFromPath(route.path, false, previousParams);
     childrenChunks?.map(
       (routeConfig, index) => walkThoughRoutes({
         route: routeConfig,
@@ -193,7 +542,12 @@ function walkThoughRoutes({
     output.routesObjectTemplate += `'${keyName}': '${route.name}' as const,`;
     output.routesDeclTemplate += `"${keyName}": "${route.name}"${isLast ? "" : ","}`;
     output.routesList.push(route.name);
-    const allRouteParams = extractRouteParamsFromPath(route.path, previousParams);
+    const isIndexFileForRouting = route.path === "";
+    const allRouteParams = extractRouteParamsFromPath(
+      route.path,
+      isIndexFileForRouting,
+      previousParams
+    );
     output.routesParams.push({
       name: route.name,
       params: allRouteParams
@@ -201,227 +555,49 @@ function walkThoughRoutes({
   }
 }
 
-const signatureTemplate = `/** 
-  * ---------------------
-  * \u{1F697}\u{1F6A6} Generated by nuxt-typed-router. Do not modify !
-  * ---------------------
-  * */
- 
-`;
-const staticDeclImports = `
-import type {
-  NavigationFailure,
-  RouteLocation,
-  RouteLocationNormalizedLoaded,
-  RouteLocationOptions,
-  RouteQueryAndHash,
-} from 'vue-router';
-import type { TypedRouteList } from './__routes'
-`;
-const staticDeclarations = `
-  type TypedRouteParamsStructure = {
-    [K in TypedRouteList]: Record<string, string | number> | never;
-  };
-  
-  type TypedLocationAsRelativeRaw<T extends TypedRouteList> = {
-    name?: T;
-    params?: TypedRouteParams[T];
-  };
-  
-  type TypedRouteLocationRaw<T extends TypedRouteList> = RouteQueryAndHash &
-    TypedLocationAsRelativeRaw<T> &
-    RouteLocationOptions;
-  
-  interface _TypedRouter {
-    /**
-     * 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<T extends TypedRouteList>(
-      to: TypedRouteLocationRaw<T>,
-      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<T extends TypedRouteList>(
-      to: TypedRouteLocationRaw<T>
-    ): 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<T extends TypedRouteList>(
-      to: TypedRouteLocationRaw<T>
-    ): Promise<NavigationFailure | void | undefined>;
-  }
-
-  export interface TypedRouter extends _TypedRouter {}
-  declare global {
-    export interface TypedRouter extends _TypedRouter {}
+function constructRouteMap(routesConfig) {
+  try {
+    let routesObjectTemplate = "{";
+    let routesDeclTemplate = "{";
+    let routesList = [];
+    let routesParams = [];
+    const output = { routesObjectTemplate, routesDeclTemplate, routesList, routesParams };
+    startGenerator({
+      output,
+      routesConfig
+    });
+    return output;
+  } catch (e) {
+    throw new Error("Generation failed");
   }
-  `;
-
-function createRuntimePluginFile(routesDeclTemplate) {
-  return `
-  ${signatureTemplate}
-  import { defineNuxtPlugin } from '#app';
-
-  export default defineNuxtPlugin(() => {
-    const router = useRouter();
-    const routesList = ${routesDeclTemplate};
-
-    return {
-      provide: {
-        typedRouter: router as TypedRouter,
-        routesList,
-      },
-    };
-  });
-  `;
-}
-function createRuntimeHookFile(routesDeclTemplate) {
-  return `
-  ${signatureTemplate}
-  import { useNuxtApp } from '#app';
-  import { TypedRouter, RouteListDecl } from './typed-router';
-
-  /** Returns instances of $typedRouter and $routesList fully typed to use in your components or your Vuex/Pinia store
-   * 
-   * @exemple
-   * 
-   * \`\`\`ts
-   * const { router, routes } = useTypedRouter();
-   * \`\`\`
-   */
-  export const useTypedRouter = (): {
-    /** Export of $router with type check */
-    router: TypedRouter,
-    /** Contains a typed dictionnary of all your route names (for syntax sugar) */
-    routes: RouteListDecl
-  } => {
-    const { $router } = useNuxtApp();
-
-    const routesList = ${routesDeclTemplate};
-
-    return {
-      router: $router,
-      routes: routesList,
-    } as any;
-  };
-
-  `;
 }
-function createRuntimeIndexFile() {
-  return `
-  ${signatureTemplate}
-  export * from './__routes';
-  export * from './__useTypedRouter';
-  `;
-}
-function createRuntimeRoutesFile({
-  routesList,
-  routesObjectTemplate,
-  routesObjectName
-}) {
-  return `
-    ${signatureTemplate}
-
-    export const ${routesObjectName} = ${routesObjectTemplate};
-
-    ${createTypedRouteListExport(routesList)}
-  `;
-}
-function createDeclarationRoutesFile({
-  routesDeclTemplate,
-  routesList,
-  routesParams
-}) {
-  return `
-    ${signatureTemplate}
-    ${staticDeclImports}
-
-    export type RouteListDecl = ${routesDeclTemplate};
-
-    ${createTypedRouteParamsExport(routesParams)}
-
-    ${staticDeclarations}
-  `;
-}
-function createTypedRouteListExport(routesList) {
-  return `export type TypedRouteList = ${routesList.map((m) => `'${m}'`).join("|\n")}`;
-}
-function createTypedRouteParamsExport(routesParams) {
-  return `export type TypedRouteParams = {
-    ${routesParams.map(
-    ({ name, params }) => `"${name}": ${params.length ? `{
-          ${params.map(({ key, required, type }) => `"${key}"${required ? "" : "?"}: ${type}`).join(",\n")}
-        }` : "never"}`
-  ).join(",\n")}
-  }`;
+function startGenerator({ output, routesConfig }) {
+  routesConfig.forEach((route, index) => {
+    const rootSiblingsRoutes = routesConfig.filter((rt) => rt.chunkName !== route.chunkName);
+    walkThoughRoutes({
+      route,
+      level: 0,
+      output,
+      siblings: rootSiblingsRoutes,
+      isLast: isItemLast(routesConfig, index)
+    });
+  });
+  output.routesObjectTemplate += "}";
+  output.routesDeclTemplate += "}";
 }
 
-function routeHook(outDir, routesObjectName, srcDir, nuxt) {
+function createTypedRouter({ srcDir, plugin, nuxt }) {
   try {
     extendPages(async (routes) => {
       if (routes.length) {
-        const { routesDeclTemplate, routesList, routesObjectTemplate, routesParams } = constructRouteMap(routes);
-        const pluginName = "__typed-router.ts";
-        nuxt.hook("build:done", async () => {
-          const pluginFolder = `${srcDir}/plugins`;
-          await saveRouteFiles(
-            pluginFolder,
-            srcDir,
-            pluginName,
-            createRuntimePluginFile(routesDeclTemplate)
-          );
+        const outputData = constructRouteMap(routes);
+        if (plugin) {
+          handlePluginFileSave({ nuxt, routesDeclTemplate: outputData.routesDeclTemplate, srcDir });
+        }
+        await saveGeneratedFiles({
+          srcDir,
+          outputData
         });
-        await Promise.all([
-          saveRouteFiles(
-            outDir,
-            srcDir,
-            "__useTypedRouter.ts",
-            createRuntimeHookFile(routesDeclTemplate)
-          ),
-          saveRouteFiles(
-            outDir,
-            srcDir,
-            `__routes.ts`,
-            createRuntimeRoutesFile({ routesList, routesObjectTemplate, routesObjectName })
-          ),
-          saveRouteFiles(
-            outDir,
-            srcDir,
-            `typed-router.d.ts`,
-            createDeclarationRoutesFile({ routesDeclTemplate, routesList, routesParams })
-          ),
-          saveRouteFiles(outDir, srcDir, "index.ts", createRuntimeIndexFile())
-        ]);
-        console.log(logSymbols.success, `[typed-router] Routes definitions generated`);
       } else {
         console.log(
           logSymbols.warning,
@@ -445,14 +621,18 @@ const module = defineNuxtModule({
     compatibility: { nuxt: "^3.0.0-rc.1", bridge: false }
   },
   defaults: {
-    outDir: `./generated`,
-    routesObjectName: "routerPagesNames"
+    plugin: false
   },
   setup(moduleOptions, nuxt) {
     const srcDir = nuxt.options.srcDir;
-    const { outDir, routesObjectName } = moduleOptions;
-    nuxt.hook("pages:extend", () => routeHook(outDir, routesObjectName, srcDir, nuxt));
-    routeHook(outDir, routesObjectName, srcDir, nuxt);
+    const { plugin } = moduleOptions;
+    nuxt.options.alias = {
+      ...nuxt.options.alias,
+      "@typed-router": fileURLToPath(
+        new URL(`${nuxt.options.rootDir}/.nuxt/typed-router`, import.meta.url)
+      )
+    };
+    nuxt.hook("pages:extend", () => createTypedRouter({ srcDir, nuxt, plugin }));
   }
 });
 

package/main.d.ts

@@ -1,2 +1 @@
-import './dist/types';
 export { default } from './dist/module';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-typed-router",
-  "version": "1.2.4",
+  "version": "2.0.0-beta.0",
   "description": "Provide autocompletion for pages route names generated by Nuxt router",
   "type": "module",
   "main": "./dist/module.cjs",
@@ -20,9 +20,11 @@
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
-    "build:test": "cross-env NUXT_BUILD_TYPE=stub yarn prepack && yarn dev:build",
-    "test": "yarn build:test && vitest run",
-    "test:watch": "yarn build:test && vitest"
+    "build:test": "cross-env NUXT_BUILD_TYPE=stub pnpm run prepack && pnpm run dev:build",
+    "test": "pnpm run dev:prepare && pnpm run build:test && vitest run",
+    "test:watch": "pnpm run build:test && vitest",
+    "docs:dev": "cd docs && pnpm run dev",
+    "docs:buid": "(cd docs && nuxi build)"
   },
   "publishConfig": {
     "access": "public"
@@ -67,11 +69,11 @@
     "@types/node": "^17.0.23",
     "@types/prettier": "^2.7.2",
     "cross-env": "^7.0.3",
-    "eslint": "8.30.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint": "8.31.0",
+    "eslint-config-prettier": "^8.6.0",
     "nuxt": "3.0.0",
     "typescript": "^4.9.4",
-    "vitest": "^0.26.1",
+    "vitest": "^0.27.0",
     "vue-router": "^4.1.6"
   }
 }