nuxt-typed-router 1.2.5 → 2.0.0-beta.1

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/>
 
@@ -42,9 +47,9 @@ yarn add -D nuxt-typed-router
 npm install -D nuxt-typed-router
 ```
 
-### For Nuxt 2
+### Nuxt 2 legacy
 
-For Nuxt 2 usage, check out the docs at the [`nuxt2` branch](https://github.com/victorgarciaesgi/nuxt-typed-router/tree/nuxt2)
+Nuxt 2 version is no longer maintained, but still available in [`nuxt2` branch](https://github.com/victorgarciaesgi/nuxt-typed-router/tree/nuxt2)
 
 ```bash
 yarn add -D nuxt-typed-router@legacy
@@ -52,188 +57,24 @@ yarn add -D nuxt-typed-router@legacy
 npm install -D nuxt-typed-router@legacy
 ```
 
-# Configuration
+# Quick start
 
 First, register the module in the `nuxt.config.ts`
 
 ```ts
 export default defineNuxtConfig({
   modules: ['nuxt-typed-router'],
-  nuxtTypedRouter: {
-    // options
-  },
-});
-```
-
-## Options:
-
-```ts
-interface ModuleOptions {
-  /** Output directory where you cant the files to be saved
-   * (ex: "./models")
-   * @default "<srcDir>/generated"
-   */
-  outDir?: string;
-  /** Name of the routesNames object (ex: "routesTree")
-   * @default "routerPagesNames"
-   * */
-  routesObjectName?: string;
-}
-```
-
-# Generated files
-
-The module will generate 4 files each time you modify the `pages` folder :
-
-- `~/<outDir>/__routes.ts` with the global object of the route names inside.
-- `~/<outDir>/__useTypedRouter.ts` Composable to simply access your typed routes
-- `~/<outDir>/typed-router.d.ts` containing the global typecript definitions and exports
-- `~/plugins/__typed_router.ts` Plugin that will inject `$typedRouter` and `$routesList` (`@nuxt/kit` has problems registering plugin templates so this is a workaround)
-
-# Usage in Vue/Nuxt
-
-<br/>
-
-### **_Requirements_**
-
-You can specify the output dir of the generated files in your configuration. It defaults to `<srcDir>/generated`
-
-```ts
-export default defineNuxtConfig({
-  buildModules: ['nuxt-typed-router'],
-  nuxtTypedRouter: {
-    outDir: './generated',
-  },
-});
-```
-
-# How it works
-
-Given this structure
-
-        ├── pages
-            ├── index
-                ├── content
-                    ├── [id].vue
-                ├── content.vue
-                ├── index.vue
-                ├── communication.vue
-                ├── statistics.vue
-                ├── [user].vue
-            ├── index.vue
-            ├── forgotpassword.vue
-            ├── reset-password.vue
-        │   └── login.vue
-        └── ...
-
-The generated route list will look like this
-
-```ts
-export const routerPagesNames = {
-  forgotpassword: 'forgotpassword' as const,
-  login: 'login' as const,
-  resetPassword: 'reset-password' as const,
-  index: {
-    index: 'index' as const,
-    communication: 'index-communication' as const,
-    content: {
-      id: 'index-content-id' as const,
-    },
-    statistics: 'index-statistics' as const,
-    user: 'index-user' as const,
-  },
-};
-export type TypedRouteList =
-  | 'forgotpassword'
-  | 'login'
-  | 'reset-password'
-  | 'index'
-  | 'index-communication'
-  | 'index-content-id'
-  | 'index-statistics'
-  | 'index-user';
-```
-
-> nuxt-typed-router will also create a plugin in your `<srcDir>/plugins` folder with the injected `$typedRouter` and `$routesList` helpers
-
-# Usage with `useTypedRouter` hook
-
-`useTypedRouter` is an exported composable from nuxt-typed-router. It contains a clone of `vue-router` but with strictly typed route names and params type-check
-
-```vue
-<script lang="ts">
-// The path here is `~/generated` because I set `outDir: './generated'` in my module options
-import { useTypedRouter } from '~/generated';
-
-export default defineComponent({
-  setup() {
-    // Fully typed
-    const { router, routes } = useTypedRouter();
-
-    function navigate() {
-      // Autocompletes the name and infer the params
-      router.push({ name: routes.index.user, params: { user: 1 } }); // ✅ valid
-      router.push({ name: routes.index.user, params: { foo: 1 } }); // ❌ invalid
-    }
-
-    return { navigate };
-  },
 });
-</script>
 ```
 
-# Usage with `$typedRouter` and `$routesList` injected helpers
-
-`$typedRouter` is an injected clone of vue-router `$router`, but fully typed with all your routes.
-It's available anywhere you have access to Nuxt context
-
-```vue
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'Index',
-  setup() {
-    const { $typedRouter, $routesList } = useNuxtApp();
-
-    function navigate() {
-      $typedRouter.push({ name: $routesList.activate });
-    }
-
-    return {
-      navigate,
-    };
-  },
-});
-</script>
-```
-
-# Usage outside Vue component
-
-You can import the `useTypedRouter` composable from where it's generated.
-Exemple with `pinia` store here
-
-```ts
-import pinia from 'pinia';
-import { useTypedRouter } from '~/generated';
-
-export const useFooStore = defineStore('foo', {
-  actions: {
-    bar() {
-      const { router, routes } = useTypedRouter();
-      router.push({ name: routes.index.user, params: { user: 2 } });
-    },
-  },
-});
-```
 
 ## Development
 
 1. Clone this repository
-2. Install dependencies using `yarn`
-3. Build project for local tests `yarn build:local`
-4. Start dev playground `yarn play`
-5. Build project for deploy `yarn prepack`
+2. Install dependencies using `pnpm`
+3. Build project for local tests `pnpm build:local`
+4. Start dev playground `pnpm play`
+5. Build project for deploy `pnpm prepack`
 
 ## 📑 License
 

package/dist/module.d.ts

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

package/dist/module.json

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

package/dist/module.mjs

@@ -1,13 +1,330 @@
+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: 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;
+  }
+}
+`;
+
+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 {routesNames, TypedRouteList} 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';
+
+  /** 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,9 +353,15 @@ async function formatOutputWithPrettier(template) {
 }
 
 dirname(fileURLToPath(import.meta.url));
-async function saveRouteFiles(outDir, srcDir, fileName, content) {
+async function processPathAndWriteFile({
+  content,
+  fileName,
+  srcDir,
+  outDir
+}) {
   try {
-    const processedOutDir = resolve(srcDir, outDir);
+    const finalOutDir = outDir ?? `.nuxt/typed-router`;
+    const processedOutDir = resolve(srcDir, finalOutDir);
     const outputFile = resolve(process.cwd(), `${processedOutDir}/${fileName}`);
     const formatedContent = await formatOutputWithPrettier(content);
     if (fs.existsSync(outputFile)) {
@@ -63,6 +386,100 @@ 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)
+    });
+  });
+}
+
+let previousGeneratedRoutes = "";
+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 }))
+  );
+  if (previousGeneratedRoutes !== routesList.join(",")) {
+    previousGeneratedRoutes = routesList.join(",");
+    console.log(logSymbols.success, `[typed-router] Routes definitions generated`);
+  }
+}
+
+function isItemLast(array, index) {
+  return array ? index === array.length - 1 : false;
+}
+
+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;
+      if (mtch) {
+        params.push({ name: key, required: !optional });
+      }
+    }
+  } while (matches);
+  let allMergedParams = params.map(
+    ({ name, required }) => ({
+      key: name,
+      type: "string | number",
+      required
+    })
+  );
+  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 +509,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 +530,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 +555,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,229 +568,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, plugin, routesObjectName }, srcDir, nuxt) {
+function createTypedRouter({ srcDir, plugin, nuxt }) {
   try {
     extendPages(async (routes) => {
       if (routes.length) {
-        const { routesDeclTemplate, routesList, routesObjectTemplate, routesParams } = constructRouteMap(routes);
+        const outputData = constructRouteMap(routes);
         if (plugin) {
-          const pluginName = "__typed-router.ts";
-          nuxt.hook("build:done", async () => {
-            const pluginFolder = `${srcDir}/plugins`;
-            await saveRouteFiles(
-              pluginFolder,
-              srcDir,
-              pluginName,
-              createRuntimePluginFile(routesDeclTemplate)
-            );
-          });
+          handlePluginFileSave({ nuxt, routesDeclTemplate: outputData.routesDeclTemplate, srcDir });
         }
-        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`);
+        await saveGeneratedFiles({
+          srcDir,
+          outputData
+        });
       } else {
         console.log(
           logSymbols.warning,
@@ -447,13 +634,19 @@ 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 { plugin = true, ...otherOptions } = moduleOptions;
-    nuxt.hook("pages:extend", () => routeHook({ ...otherOptions, plugin }, 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 }));
+    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.5",
+  "version": "2.0.0-beta.1",
   "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 dev:prepare && 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"
   }
 }