nuxt-typed-router 2.2.2-beta.1 → 2.3.0-beta.0

package/dist/module.json

@@ -2,8 +2,8 @@
   "name": "nuxt-typed-router",
   "configKey": "nuxtTypedRouter",
   "compatibility": {
-    "nuxt": "^3.0.0-rc.1",
+    "nuxt": "^3.0.0",
     "bridge": false
   },
-  "version": "2.2.2-beta.1"
+  "version": "2.3.0-beta.0"
 }

package/dist/module.mjs

@@ -15,6 +15,8 @@ class ModuleOptionsStore {
     this.strict = false;
     this.autoImport = false;
     this.rootDir = "";
+    this.i18n = false;
+    this.i18nLocales = [];
   }
   updateOptions(options) {
     if (options.plugin != null)
@@ -25,6 +27,10 @@ class ModuleOptionsStore {
       this.autoImport = options.autoImport;
     if (options.rootDir != null)
       this.rootDir = options.rootDir;
+    if (options.i18n != null)
+      this.i18n = options.i18n;
+    if (options.i18nLocales != null)
+      this.i18nLocales = options.i18nLocales;
   }
   getResolvedStrictOptions() {
     let resolved;
@@ -171,8 +177,6 @@ function createRoutesTypesFile({
 
     ${createRoutesNamedLocationsResolvedExport(routesParams)}
 
-   
-
     export type RoutesNamesListRecord = ${routesDeclTemplate};
 
     export const routesNames = ${routesObjectTemplate};
@@ -209,6 +213,7 @@ function createTypedRouterFile() {
     RouteLocationNormalizedLoaded,
     RouteLocationRaw,
     Router,
+    RouteLocationPathRaw
   } from 'vue-router';
   import type {
     RoutesNamedLocations,
@@ -227,22 +232,26 @@ function createTypedRouterFile() {
    * {@link RouteLocationRaw}
    * */
   export type TypedRouteLocationRaw =
-  | (Omit<Exclude<RouteLocationRaw, string>, 'name' | 'params' ${returnIfTrue(
+  | (Omit<Exclude<RouteLocationRaw, string>, 'name' | 'params'> & RoutesNamedLocations)
+  ${returnIfFalse(strictOptions.router.strictToArgument, "| string")}
+  ${returnIfTrue(
       strictOptions.router.strictRouteLocation,
-      `| 'path'`
-    )}> & RoutesNamedLocations)
-  ${returnIfFalse(strictOptions.router.strictToArgument, "| string")};
+      `| Omit<RouteLocationPathRaw, 'path'>`,
+      "| RouteLocationPathRaw"
+    )};
   
 
   /**
    * Alternative version of {@link TypedRouteLocationRaw} but with a name generic
    */
   export type TypedRouteLocationRawFromName<T extends RoutesNamesList> =
-  | (Omit<Exclude<RouteLocationRaw, string>, 'name' | 'params' ${returnIfTrue(
+  | (Omit<Exclude<RouteLocationRaw, string>, 'name' | 'params'> & TypedLocationAsRelativeRaw<T>)
+  ${returnIfFalse(strictOptions.router.strictToArgument, "| string")}
+  ${returnIfTrue(
       strictOptions.router.strictRouteLocation,
-      `| 'path'`
-    )}> & TypedLocationAsRelativeRaw<T>)
-  ${returnIfFalse(strictOptions.router.strictToArgument, "| string")};
+      `| Omit<RouteLocationPathRaw, 'path'>`,
+      "| RouteLocationPathRaw"
+    )}
 
   /** 
    * Generic providing inference and dynamic inclusion of \`params\` property
@@ -344,7 +353,7 @@ function createTypedRouterFile() {
 }
 
 function createTypedRouterDefinitionFile() {
-  const { plugin, autoImport } = moduleOptionStore;
+  const { plugin, autoImport, i18n } = moduleOptionStore;
   const strictOptions = moduleOptionStore.getResolvedStrictOptions();
   return (
     /* typescript */
@@ -352,12 +361,13 @@ function createTypedRouterDefinitionFile() {
     
     import type { NuxtLinkProps } from '#app';
     import type { DefineComponent } from 'vue';
-    import type { RouteLocationRaw } from 'vue-router';
+    import type { RouteLocationRaw, RouteLocationPathRaw } from 'vue-router';
     import type { RoutesNamedLocations, RoutesNamesListRecord } from './__routes';
     import type {TypedRouter, TypedRoute} from './__router';
     import { useRoute as _useRoute } from './__useTypedRoute';
     import { useRouter as _useRouter } from './__useTypedRouter';
     import { navigateTo as _navigateTo } from './__navigateTo';
+    import { useLocalePath as _useLocalePath, useLocaleRoute as _useLocaleRoute} from './__i18n-router';
 
     declare global {
  
@@ -367,18 +377,28 @@ function createTypedRouterDefinitionFile() {
       `
             const useRoute: typeof _useRoute;
             const useRouter: typeof _useRouter;
-            const navigateTo: typeof _navigateTo;`
+            const navigateTo: typeof _navigateTo;
+            ${returnIfTrue(
+        i18n,
+        /* typescript */
+        `
+              const useLocalePath: typeof _useLocalePath;
+              const useLocaleRoute: typeof _useLocaleRoute;
+            `
+      )}
+          `
     )}
     }
     
     type TypedNuxtLinkProps = Omit<NuxtLinkProps, 'to'> & {
-      to: ${returnIfFalse(
-      strictOptions.NuxtLink.strictToArgument,
-      "string |"
-    )} Omit<Exclude<RouteLocationRaw, string>, 'name' | 'params' ${returnIfTrue(
+      to: 
+      Omit<Exclude<RouteLocationRaw, string>, 'name' | 'params'> & RoutesNamedLocations
+      ${returnIfFalse(strictOptions.NuxtLink.strictToArgument, "| string")}
+      ${returnIfTrue(
       strictOptions.NuxtLink.strictRouteLocation,
-      `| 'path'`
-    )}> & RoutesNamedLocations;
+      `| Omit<RouteLocationPathRaw, 'path'>`,
+      "| RouteLocationPathRaw"
+    )}
     };
     
     export type TypedNuxtLink = DefineComponent<
@@ -426,31 +446,33 @@ function createTypedRouterDefinitionFile() {
 }
 
 function createIndexFile() {
+  const { i18n } = moduleOptionStore;
   return (
     /* typescript */
     `
 
-  export type {
-    TypedLocationAsRelativeRaw,
-    TypedResolvedMatcherLocation,
-    TypedRoute,
-    TypedRouteFromName,
-    TypedRouteLocationFromName,
-    TypedRouteLocationRaw,
-    TypedRouteLocationRawFromName,
-    TypedRouter,
-  } from './__router';
-  export { routesNames } from './__routes';
-  export type {
-    RoutesNamedLocations,
-    RoutesNamedLocationsResolved,
-    RoutesNamesList,
-    RoutesNamesListRecord,
-    RoutesParamsRecord,
-  } from './__routes';
-  export { useRoute } from './__useTypedRoute';
-  export { useRouter } from './__useTypedRouter';
-  export { navigateTo } from './__navigateTo';
+    export type {
+      TypedLocationAsRelativeRaw,
+      TypedResolvedMatcherLocation,
+      TypedRoute,
+      TypedRouteFromName,
+      TypedRouteLocationFromName,
+      TypedRouteLocationRaw,
+      TypedRouteLocationRawFromName,
+      TypedRouter,
+    } from './__router';
+    export { routesNames } from './__routes';
+    export type {
+      RoutesNamedLocations,
+      RoutesNamedLocationsResolved,
+      RoutesNamesList,
+      RoutesNamesListRecord,
+      RoutesParamsRecord,
+    } from './__routes';
+    export { useRoute } from './__useTypedRoute';
+    export { useRouter } from './__useTypedRouter';
+    export { navigateTo } from './__navigateTo';
+    ${returnIfTrue(i18n, `export {useLocalePath, useLocaleRoute} from './__i18n-router.ts';`)}
   `
   );
 }
@@ -598,6 +620,35 @@ function createTypeUtilsRuntimeFile() {
   );
 }
 
+function createi18nRouterFile() {
+  const { i18nLocales } = moduleOptionStore;
+  return (
+    /* typescript */
+    `
+
+  import { useLocalePath as _useLocalePath, useLocaleRoute as _useLocaleRoute} from 'vue-i18n-routing';
+  import type {TypedRouteLocationRawFromName, TypedRouteFromName} from './__router';
+  import type {RoutesNamesList} from './__routes';
+
+  export type I18nLocales = ${i18nLocales.map((loc) => `"${loc}"`).join("|")};
+
+  export type TypedToLocalePath = <T extends RoutesNamesList>(to: TypedRouteLocationRawFromName<T>, locale?: I18nLocales | undefined) => TypedRouteLocationRawFromName<T>;
+
+  export function useLocalePath(options?: Pick<NonNullable<Parameters<typeof _useLocalePath>[0]>, 'i18n'>): TypedToLocalePath {
+     return _useLocalePath(options) as any;
+  }
+  
+  export type TypedLocaleRoute = <T extends RoutesNamesList>(to: TypedRouteLocationRawFromName<T>, locale?: I18nLocales | undefined) => TypedRouteFromName<T>;
+
+
+  export function useLocaleRoute(options?: Pick<NonNullable<Parameters<typeof _useLocaleRoute>[0]>, 'i18n'>): TypedLocaleRoute {
+    return _useLocaleRoute(options) as any;
+  }
+
+  `
+  );
+}
+
 async function handleAddPlugin() {
   const pluginName = "__typed-router.plugin.ts";
   addPluginTemplate({
@@ -683,6 +734,7 @@ let previousGeneratedRoutes = "";
 async function saveGeneratedFiles({
   outputData: { routesDeclTemplate, routesList, routesObjectTemplate, routesParams }
 }) {
+  const { i18n } = moduleOptionStore;
   const filesMap = [
     {
       fileName: "__useTypedRouter.ts",
@@ -722,6 +774,12 @@ async function saveGeneratedFiles({
       content: createIndexFile()
     }
   ];
+  if (i18n) {
+    filesMap.push({
+      fileName: "__i18n-router.ts",
+      content: createi18nRouterFile()
+    });
+  }
   await Promise.all(
     filesMap.map(({ content, fileName }) => {
       const waterMakeredContent = `
@@ -800,6 +858,22 @@ function extractChunkMain(chunkName) {
   return chunkArray?.join("/");
 }
 
+function createKeyedName(route) {
+  const splittedPaths = route.path.split("/");
+  const parentPath = splittedPaths[splittedPaths.length - 1];
+  const nameKey = camelCase(parentPath || "index");
+  return nameKey;
+}
+function createNameKeyFromFullName(route, level, parentName) {
+  let splitted = [];
+  splitted = route.name?.split("-") ?? [];
+  splitted = splitted.slice(level, splitted.length);
+  if (splitted[0] === parentName) {
+    splitted.splice(0, 1);
+  }
+  const keyName = route.path === "" ? "index" : camelCase(splitted.join("-")) || "index";
+  return keyName;
+}
 function walkThoughRoutes({
   route,
   level,
@@ -816,9 +890,14 @@ function walkThoughRoutes({
   const isRootSibling = lastChunkArray === "index";
   if (route.children?.length && !haveMatchingSiblings || !route.children?.length && haveMatchingSiblings && isRootSibling) {
     let childrenChunks = haveMatchingSiblings ? matchingSiblings : route.children;
-    const splittedPaths = route.path.split("/");
-    const parentPath = splittedPaths[splittedPaths.length - 1];
-    const nameKey = camelCase(parentPath || "index");
+    let nameKey = createKeyedName(route);
+    const hasSamePathI18nSibling = siblings?.some((sibling) => {
+      const _name = createKeyedName(sibling);
+      return _name === nameKey;
+    });
+    if (hasSamePathI18nSibling) {
+      nameKey = camelCase(route.path.split("/").join("-"));
+    }
     output.routesObjectTemplate += `${nameKey}:{`;
     output.routesDeclTemplate += `"${nameKey}":{`;
     const allRouteParams = extractRouteParamsFromPath(route.path, false, previousParams);
@@ -836,13 +915,14 @@ function walkThoughRoutes({
     output.routesObjectTemplate += "},";
     output.routesDeclTemplate += `}${isLast ? "" : ","}`;
   } else if (route.name) {
-    let splitted = [];
-    splitted = route.name.split("-");
-    splitted = splitted.slice(level, splitted.length);
-    if (splitted[0] === parentName) {
-      splitted.splice(0, 1);
+    let keyName = createNameKeyFromFullName(route, level, parentName);
+    const hasSameNameI18nSibling = siblings?.some((sibling) => {
+      const _name = createNameKeyFromFullName(sibling, level, parentName);
+      return _name === keyName;
+    });
+    if (hasSameNameI18nSibling) {
+      keyName = camelCase(route.name);
     }
-    const keyName = route.path === "" ? "index" : camelCase(splitted.join("-")) || "index";
     output.routesObjectTemplate += `'${keyName}': '${route.name}' as const,`;
     output.routesDeclTemplate += `"${keyName}": "${route.name}"${isLast ? "" : ","}`;
     output.routesList.push(route.name);
@@ -877,7 +957,7 @@ function constructRouteMap(routesConfig) {
 }
 function startGenerator({ output, routesConfig }) {
   routesConfig.forEach((route, index) => {
-    const rootSiblingsRoutes = routesConfig.filter((rt) => rt.chunkName !== route.chunkName);
+    const rootSiblingsRoutes = routesConfig.filter((rt) => rt.path !== route.path);
     walkThoughRoutes({
       route,
       level: 0,
@@ -946,16 +1026,21 @@ const module = defineNuxtModule({
   meta: {
     name: "nuxt-typed-router",
     configKey: "nuxtTypedRouter",
-    compatibility: { nuxt: "^3.0.0-rc.1", bridge: false }
+    compatibility: { nuxt: "^3.0.0", bridge: false }
   },
   defaults: {
     plugin: false,
     strict: false
   },
   setup(moduleOptions, nuxt) {
-    const rootDir = nuxt.options.rootDir;
-    moduleOptionStore.updateOptions(moduleOptions);
     const { resolve } = createResolver(import.meta.url);
+    const rootDir = nuxt.options.rootDir;
+    const hasi18nModuleRegistered = !!nuxt.options.modules.find((mod) => mod === "@nuxtjs/i18n");
+    moduleOptionStore.updateOptions({
+      ...moduleOptions,
+      i18n: hasi18nModuleRegistered,
+      i18nLocales: nuxt.options?.i18n?.locales ?? []
+    });
     nuxt.options.alias = {
       ...nuxt.options.alias,
       "@typed-router": resolve(`${rootDir}/.nuxt/typed-router`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-typed-router",
-  "version": "2.2.2-beta.1",
+  "version": "2.3.0-beta.0",
   "description": "Provide autocompletion for pages route names generated by Nuxt router",
   "type": "module",
   "main": "./dist/module.cjs",
@@ -21,10 +21,10 @@
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground && pnpm run test:prepare-fixtures",
     "build:test": "cross-env NUXT_BUILD_TYPE=stub pnpm run prepack && pnpm run dev:build",
-    "test:prepare-fixtures": "nuxi prepare test/fixtures/simple && nuxi generate test/fixtures/complex",
+    "test:prepare-fixtures": "nuxi prepare test/fixtures/simple && nuxi prepare test/fixtures/withOptions && nuxi prepare test/fixtures/complex",
     "test:fixtures": " vitest run --dir test",
     "test:types": "pnpm run typecheck && pnpm run test:vue && vitest typecheck --run --dir test",
-    "test:vue": "vue-tsc -p test/fixtures/simple/tsconfig.json --noEmit && vue-tsc -p test/fixtures/complex/tsconfig.json --noEmit",
+    "test:vue": "vue-tsc -p test/fixtures/simple/tsconfig.json --noEmit && vue-tsc -p test/fixtures/complex/tsconfig.json --noEmit && vue-tsc -p test/fixtures/withOptions/tsconfig.json --noEmit",
     "test": "pnpm run dev:prepare && pnpm run test:fixtures && pnpm run test:types",
     "docs:dev": "cd docs && pnpm run dev",
     "docs:build": "npm run dev:prepare && cd docs && nuxi generate",
@@ -59,31 +59,33 @@
   "dependencies": {
     "@nuxt/kit": "3.1.1",
     "chalk": "^5.2.0",
+    "defu": "^6.1.2",
     "lodash-es": "^4.17.21",
     "log-symbols": "^5.1.0",
     "mkdirp": "^1.0.4",
     "pathe": "1.1.0",
-    "prettier": "2.8.3",
-    "defu": "^6.1.2"
+    "prettier": "2.8.3"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.2.1",
     "@nuxt/test-utils": "^3.1.1",
     "@nuxt/types": "^2.15.8",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
+    "@nuxtjs/i18n": "8.0.0-beta.9",
     "@types/lodash-es": "^4.17.6",
     "@types/mkdirp": "^1.0.2",
     "@types/node": "^17.0.23",
     "@types/prettier": "^2.7.2",
-    "@typescript-eslint/eslint-plugin": "^5.49.0",
-    "@typescript-eslint/parser": "^5.49.0",
+    "@typescript-eslint/eslint-plugin": "^5.50.0",
+    "@typescript-eslint/parser": "^5.50.0",
+    "@vue/test-utils": "^2.2.8",
     "cross-env": "^7.0.3",
     "eslint": "8.33.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-vue": "^9.9.0",
     "nuxt": "3.1.1",
     "playwright": "1.30.0",
-    "typescript": "^4.9.4",
+    "typescript": "^4.9.5",
     "vitest": "^0.28.3",
     "vue-eslint-parser": "^9.1.0",
     "vue-router": "^4.1.6",