nuxt-typed-router 2.2.2-beta.2 → 2.3.0

package/README.md

@@ -21,7 +21,7 @@
 - `NuxtLink` route autocomplete and params type-check 
 - `useRouter`, `useRoute` and `navigateTo` route autocomplete and params type-check
 - Supports optional params and catchAll routes
-- Infer route params based on route name
+- Out of the box `i18n` support
 - Supports routes extended by config and modules
 
 > ⚠️ Since `v2.1.x`, `useTypedRouter` and `useTypedRoute` are no longer exported.   
@@ -94,6 +94,7 @@ export default defineNuxtConfig({
 - [ ] Add `path` autocomplete with TS string templates
 - [ ] Enforce strong params typing depending of origin route
 - [ ] Add support for `validate` in `definePageMeta`
+- [ ] Add `strict` option to prevent path navigation
 
 
 ## Development

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.2"
+  "version": "2.3.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};
@@ -349,7 +353,7 @@ function createTypedRouterFile() {
 }
 
 function createTypedRouterDefinitionFile() {
-  const { plugin, autoImport } = moduleOptionStore;
+  const { plugin, autoImport, i18n } = moduleOptionStore;
   const strictOptions = moduleOptionStore.getResolvedStrictOptions();
   return (
     /* typescript */
@@ -363,6 +367,7 @@ function createTypedRouterDefinitionFile() {
     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 {
  
@@ -372,7 +377,16 @@ 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;
+            `
+      )}
+          `
     )}
     }
     
@@ -432,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';`)}
   `
   );
 }
@@ -604,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.length ? i18nLocales.map((loc) => `"${loc}"`).join("|") : "string"};
+
+  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({
@@ -689,6 +734,7 @@ let previousGeneratedRoutes = "";
 async function saveGeneratedFiles({
   outputData: { routesDeclTemplate, routesList, routesObjectTemplate, routesParams }
 }) {
+  const { i18n } = moduleOptionStore;
   const filesMap = [
     {
       fileName: "__useTypedRouter.ts",
@@ -728,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 = `
@@ -806,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,
@@ -822,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);
@@ -842,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);
@@ -883,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,
@@ -952,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.2",
+  "version": "2.3.0",
   "description": "Provide autocompletion for pages route names generated by Nuxt router",
   "type": "module",
   "main": "./dist/module.cjs",
@@ -71,12 +71,14 @@
     "@nuxt/test-utils": "^3.1.1",
     "@nuxt/types": "^2.15.8",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
+    "@nuxtjs/web-vitals": "^0.2.2",
+    "@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",
@@ -84,7 +86,7 @@
     "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",