nuxt-typed-router 2.2.0 → 2.2.2-beta.0

package/README.md

@@ -93,6 +93,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`
 
 
 ## Development

package/dist/module.d.ts

@@ -6,6 +6,30 @@ interface ModuleOptions {
      * @default false
      */
     plugin?: boolean;
+    /**
+     * Prevent passing a string path to `router` or `<NuxtLink/>`
+     * Ex:
+     *
+     * ```ts
+     * router.push('/login'); // Error ❌
+     * ```
+     * @default false
+     */
+    strict?: boolean | StrictOptions;
+}
+interface StrictOptions {
+    NuxtLink: StrictParamsOptions;
+    router: StrictParamsOptions;
+}
+interface StrictParamsOptions {
+    /**
+     * @default false
+     */
+    strictToArgument?: boolean;
+    /**
+     * @default false
+     */
+    strictRouteLocation?: 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": "2.2.0"
+  "version": "2.2.2-beta.0"
 }

package/dist/module.mjs

@@ -1,6 +1,7 @@
 import { addPluginTemplate, extendPages, defineNuxtModule, createResolver } from '@nuxt/kit';
 import chalk from 'chalk';
 import logSymbols from 'log-symbols';
+import { defu } from 'defu';
 import prettier from 'prettier';
 import fs from 'fs';
 import { fileURLToPath } from 'url';
@@ -8,6 +9,66 @@ import { dirname, resolve } from 'pathe';
 import mkdirp from 'mkdirp';
 import { camelCase } from 'lodash-es';
 
+class ModuleOptionsStore {
+  constructor() {
+    this.plugin = false;
+    this.strict = false;
+    this.autoImport = false;
+    this.rootDir = "";
+  }
+  updateOptions(options) {
+    if (options.plugin != null)
+      this.plugin = options.plugin;
+    if (options.strict != null)
+      this.strict = options.strict;
+    if (options.autoImport != null)
+      this.autoImport = options.autoImport;
+    if (options.rootDir != null)
+      this.rootDir = options.rootDir;
+  }
+  getResolvedStrictOptions() {
+    let resolved;
+    if (typeof this.strict === "boolean") {
+      if (this.strict) {
+        resolved = {
+          NuxtLink: {
+            strictRouteLocation: true,
+            strictToArgument: true
+          },
+          router: {
+            strictRouteLocation: true,
+            strictToArgument: true
+          }
+        };
+      } else {
+        resolved = {
+          NuxtLink: {
+            strictRouteLocation: false,
+            strictToArgument: false
+          },
+          router: {
+            strictRouteLocation: false,
+            strictToArgument: false
+          }
+        };
+      }
+    } else {
+      resolved = defu(this.strict, {
+        NuxtLink: {
+          strictRouteLocation: false,
+          strictToArgument: false
+        },
+        router: {
+          strictRouteLocation: false,
+          strictToArgument: false
+        }
+      });
+    }
+    return resolved;
+  }
+}
+const moduleOptionStore = new ModuleOptionsStore();
+
 function createRoutesNamesListExport(routesList) {
   return `
   /**
@@ -74,6 +135,23 @@ function createRoutesNamedLocationsResolvedExport(routesParams) {
   `;
 }
 
+function createRoutesParamsRecordResolvedExport(routesParams) {
+  return `
+  /** 
+   * Record resolved used for resolved routes
+   * 
+   * */
+  export type RoutesParamsRecordResolved = {
+    ${routesParams.map(
+    ({ name, params }) => `"${name}": ${params.length ? `{
+                ${params.map(
+      ({ key, notRequiredOnPage, catchAll }) => `"${key}"${notRequiredOnPage ? "?" : ""}: string${catchAll ? "[]" : ""}`
+    ).join(",\n")}
+        }` : "never"}`
+  ).join(",\n")}
+  }`;
+}
+
 function createRoutesTypesFile({
   routesList,
   routesObjectTemplate,
@@ -86,6 +164,8 @@ function createRoutesTypesFile({
     ${createRoutesNamesListExport(routesList)}
 
     ${createRoutesParamsRecordExport(routesParams)}
+    
+    ${createRoutesParamsRecordResolvedExport(routesParams)}
 
     ${createRoutesNamedLocationsExport(routesParams)}
 
@@ -100,7 +180,24 @@ function createRoutesTypesFile({
   );
 }
 
+function isItemLast(array, index) {
+  return array ? index === array.length - 1 : false;
+}
+function returnIfTrue(condition, template, otherwise) {
+  if (condition) {
+    return template;
+  }
+  return otherwise ?? "";
+}
+function returnIfFalse(condition, template, otherwise) {
+  if (!condition) {
+    return template;
+  }
+  return otherwise ?? "";
+}
+
 function createTypedRouterFile() {
+  const strictOptions = moduleOptionStore.getResolvedStrictOptions();
   return (
     /* typescript */
     `
@@ -118,6 +215,7 @@ function createTypedRouterFile() {
     RoutesNamedLocationsResolved,
     RoutesNamesList,
     RoutesParamsRecord,
+    RoutesParamsRecordResolved
   } from './__routes';
   import type { HasOneRequiredParameter } from './__types_utils';
 
@@ -129,15 +227,22 @@ function createTypedRouterFile() {
    * {@link RouteLocationRaw}
    * */
   export type TypedRouteLocationRaw =
-  | (Omit<Exclude<RouteLocationRaw, string>, 'name' | 'params'> & RoutesNamedLocations)
-  | string;
+  | (Omit<Exclude<RouteLocationRaw, string>, 'name' | 'params' ${returnIfTrue(
+      strictOptions.NuxtLink.strictRouteLocation,
+      `| 'path'`
+    )}> & RoutesNamedLocations)
+  ${returnIfFalse(strictOptions.NuxtLink.strictToArgument, "| string")};
+  
 
   /**
    * Alternative version of {@link TypedRouteLocationRaw} but with a name generic
    */
   export type TypedRouteLocationRawFromName<T extends RoutesNamesList> =
-  | (Omit<Exclude<RouteLocationRaw, string>, 'name' | 'params'> & TypedLocationAsRelativeRaw<T>)
-  | string;
+  | (Omit<Exclude<RouteLocationRaw, string>, 'name' | 'params' ${returnIfTrue(
+      strictOptions.NuxtLink.strictRouteLocation,
+      `| 'path'`
+    )}> & TypedLocationAsRelativeRaw<T>)
+  ${returnIfFalse(strictOptions.NuxtLink.strictToArgument, "| string")};
 
   /** 
    * Generic providing inference and dynamic inclusion of \`params\` property
@@ -226,7 +331,7 @@ function createTypedRouterFile() {
    * */
   export type TypedResolvedMatcherLocation<T extends RoutesNamesList> = {
     name: T;
-  } & ([RoutesParamsRecord[T]] extends [never] ? {} : { params: RoutesParamsRecord[T] });
+  } & ([RoutesParamsRecordResolved[T]] extends [never] ? {} : { params: RoutesParamsRecordResolved[T] });
   
 
   /** 
@@ -238,7 +343,9 @@ function createTypedRouterFile() {
   );
 }
 
-function createTypedRouterDefinitionFile({ autoImport, plugin }) {
+function createTypedRouterDefinitionFile() {
+  const { plugin, autoImport } = moduleOptionStore;
+  const strictOptions = moduleOptionStore.getResolvedStrictOptions();
   return (
     /* typescript */
     `
@@ -254,17 +361,24 @@ function createTypedRouterDefinitionFile({ autoImport, plugin }) {
 
     declare global {
  
-      ${autoImport ? (
+      ${returnIfTrue(
+      autoImport,
       /* typescript */
       `
             const useRoute: typeof _useRoute;
             const useRouter: typeof _useRouter;
             const navigateTo: typeof _navigateTo;`
-    ) : ""}
+    )}
     }
     
     type TypedNuxtLinkProps = Omit<NuxtLinkProps, 'to'> & {
-      to: string | Omit<Exclude<RouteLocationRaw, string>, 'name'> & RoutesNamedLocations;
+      to: ${returnIfFalse(
+      strictOptions.NuxtLink.strictToArgument,
+      "string |"
+    )} Omit<Exclude<RouteLocationRaw, string>, 'name' | 'params' ${returnIfTrue(
+      strictOptions.NuxtLink.strictRouteLocation,
+      `| 'path'`
+    )}> & RoutesNamedLocations;
     };
     
     export type TypedNuxtLink = DefineComponent<
@@ -290,7 +404,8 @@ function createTypedRouterDefinitionFile({ autoImport, plugin }) {
       }
     }
 
-    ${plugin ? (
+    ${returnIfTrue(
+      plugin,
       /* typescript */
       `
           interface CustomPluginProperties {
@@ -305,7 +420,7 @@ function createTypedRouterDefinitionFile({ autoImport, plugin }) {
             interface ComponentCustomProperties extends CustomPluginProperties {}
           }
         `
-    ) : ""}
+    )}
   `
   );
 }
@@ -523,10 +638,10 @@ dirname(fileURLToPath(import.meta.url));
 async function processPathAndWriteFile({
   content,
   fileName,
-  rootDir,
   outDir
 }) {
   try {
+    const { rootDir } = moduleOptionStore;
     const finalOutDir = outDir ?? `.nuxt/typed-router`;
     const processedOutDir = resolve(rootDir, finalOutDir);
     const outputFile = resolve(process.cwd(), `${processedOutDir}/${fileName}`);
@@ -566,9 +681,6 @@ const watermarkTemplate = `
 
 let previousGeneratedRoutes = "";
 async function saveGeneratedFiles({
-  rootDir,
-  autoImport,
-  plugin,
   outputData: { routesDeclTemplate, routesList, routesObjectTemplate, routesParams }
 }) {
   const filesMap = [
@@ -603,7 +715,7 @@ async function saveGeneratedFiles({
     },
     {
       fileName: `typed-router.d.ts`,
-      content: createTypedRouterDefinitionFile({ autoImport, plugin })
+      content: createTypedRouterDefinitionFile()
     },
     {
       fileName: "index.ts",
@@ -617,7 +729,7 @@ async function saveGeneratedFiles({
 
         ${content}
       `;
-      return processPathAndWriteFile({ rootDir, content: waterMakeredContent, fileName });
+      return processPathAndWriteFile({ content: waterMakeredContent, fileName });
     })
   );
   if (previousGeneratedRoutes !== routesList.join(",")) {
@@ -626,10 +738,6 @@ async function saveGeneratedFiles({
   }
 }
 
-function isItemLast(array, index) {
-  return array ? index === array.length - 1 : false;
-}
-
 const routeParamExtractRegxp = /(:(\w+)(\(.+\)[*+]?)?(\?)?)+/g;
 function extractRouteParamsFromPath(path, isIndexFileForRouting, previousParams) {
   let params = [];
@@ -785,7 +893,6 @@ function startGenerator({ output, routesConfig }) {
 let hasLoggedNoPages = false;
 let hasRoutesDefined = false;
 async function createTypedRouter({
-  plugin,
   nuxt,
   routesConfig,
   isHookCall = false
@@ -793,18 +900,19 @@ async function createTypedRouter({
   try {
     const rootDir = nuxt.options.rootDir;
     const autoImport = nuxt.options.imports.autoImport ?? true;
+    moduleOptionStore.updateOptions({ rootDir, autoImport });
     if (!isHookCall) {
       if (routesConfig) {
         await nuxt.callHook("pages:extend", routesConfig);
         return;
       }
       nuxt.hook("pages:extend", (routesConfig2) => {
-        createTypedRouter({ nuxt, plugin, routesConfig: routesConfig2, isHookCall: true });
+        createTypedRouter({ nuxt, routesConfig: routesConfig2, isHookCall: true });
       });
       nuxt.hook("modules:done", () => {
-        createTypedRouter({ nuxt, plugin, isHookCall: true });
+        createTypedRouter({ nuxt, isHookCall: true });
       });
-      if (plugin) {
+      if (moduleOptionStore.plugin) {
         await handleAddPlugin();
       }
       return;
@@ -813,10 +921,7 @@ async function createTypedRouter({
       hasRoutesDefined = true;
       const outputData = constructRouteMap(routes);
       await saveGeneratedFiles({
-        autoImport,
-        rootDir,
-        outputData,
-        plugin
+        outputData
       });
     });
     setTimeout(() => {
@@ -844,11 +949,12 @@ const module = defineNuxtModule({
     compatibility: { nuxt: "^3.0.0-rc.1", bridge: false }
   },
   defaults: {
-    plugin: false
+    plugin: false,
+    strict: false
   },
   setup(moduleOptions, nuxt) {
     const rootDir = nuxt.options.rootDir;
-    const { plugin } = moduleOptions;
+    moduleOptionStore.updateOptions(moduleOptions);
     const { resolve } = createResolver(import.meta.url);
     nuxt.options.alias = {
       ...nuxt.options.alias,
@@ -857,8 +963,7 @@ const module = defineNuxtModule({
     nuxt.options.typescript.tsConfig = {
       include: ["./typed-router/typed-router.d.ts"]
     };
-    const typedRouterOptions = { nuxt, plugin };
-    createTypedRouter({ ...typedRouterOptions });
+    createTypedRouter({ nuxt });
   }
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-typed-router",
-  "version": "2.2.0",
+  "version": "2.2.2-beta.0",
   "description": "Provide autocompletion for pages route names generated by Nuxt router",
   "type": "module",
   "main": "./dist/module.cjs",
@@ -63,7 +63,8 @@
     "log-symbols": "^5.1.0",
     "mkdirp": "^1.0.4",
     "pathe": "1.1.0",
-    "prettier": "2.8.3"
+    "prettier": "2.8.3",
+    "defu": "^6.1.2"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.2.1",
@@ -74,14 +75,17 @@
     "@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",
     "cross-env": "^7.0.3",
-    "eslint": "8.32.0",
+    "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",
-    "vitest": "^0.28.2",
+    "vitest": "^0.28.3",
+    "vue-eslint-parser": "^9.1.0",
     "vue-router": "^4.1.6",
     "vue-tsc": "^1.0.24"
   }