nuxt-typed-router 1.1.0 → 1.2.0

package/README.md

@@ -1,4 +1,4 @@
-# 🚗🚦 Typed Router for Nuxt 3
+# 🚗🚦 Typed Router for Nuxt
 
 [npm-version-src]: https://img.shields.io/npm/v/nuxt-typed-router.svg
 [npm-version-href]: https://www.npmjs.com/package/nuxt-typed-router
@@ -11,13 +11,21 @@
 [![npm downloads][npm-total-downloads-src]][npm-downloads-href]
 <img src='https://img.shields.io/npm/l/simple-graphql-to-typescript.svg'>
 
-> Provide a type safe router to Nuxt 3 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
 - 🚦 Provides auto-completion and errors for route params in `push` and `replace` methods
 
 <br/>
+
+Demo 🧪 : [nuxt-typed-router-demo](https://github.com/victorgarciaesgi/nuxt-typed-router-demo)
+
+## Compatibility:
+
+- Nuxt 3
+- Nuxt 2 (via [`nuxt2` branch](https://github.com/victorgarciaesgi/nuxt-typed-router/tree/nuxt2))
+
 <br/>
 <p align="center">
   <img src="https://github.com/victorgarciaesgi/nuxt-typed-router/blob/master/medias/in-action.gif?raw=true"/>
@@ -80,14 +88,12 @@ interface ModuleOptions {
 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 tu simply access your typed routes
+- `~/<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
 
-## Check out this demo and clone it! [nuxt-typed-router-demo](https://github.com/victorgarciaesgi/nuxt-typed-router-demo)
-
 <br/>
 
 ### **_Requirements_**
@@ -156,7 +162,7 @@ export type TypedRouteList =
 
 # Usage with `useTypedRouter` hook
 
-`useTypedRouter` is an exported composable from nuxt-typed-router. It contains a clone of `vue-router` but with stritly typed route names and params type-check
+`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">

package/dist/module.json

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

package/dist/module.mjs

@@ -1,10 +1,10 @@
 import { extendPages, defineNuxtModule } from '@nuxt/kit';
-import { fileURLToPath } from 'url';
 import chalk from 'chalk';
 import logSymbols from 'log-symbols';
-import { resolve, dirname } from 'pathe';
 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';
 
@@ -35,9 +35,11 @@ async function formatOutputWithPrettier(template) {
   }
 }
 
-async function saveRouteFiles(outDir, fileName, content) {
+dirname(fileURLToPath(import.meta.url));
+async function saveRouteFiles(outDir, srcDir, fileName, content) {
   try {
-    const outputFile = resolve(process.cwd(), `${outDir}/${fileName}`);
+    const processedOutDir = resolve(srcDir, outDir);
+    const outputFile = resolve(process.cwd(), `${processedOutDir}/${fileName}`);
     const formatedContent = await formatOutputWithPrettier(content);
     if (fs.existsSync(outputFile)) {
       await writeFile(outputFile, formatedContent);
@@ -128,14 +130,16 @@ function startGeneratorProcedure({
   output,
   routesConfig
 }) {
-  const rootSiblingsRoutes = routesConfig.map((route) => route.path);
-  routesConfig.forEach((route, index) => walkThoughRoutes({
-    route,
-    level: 0,
-    output,
-    siblings: rootSiblingsRoutes,
-    isLast: isItemLast(routesConfig, index)
-  }));
+  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 += "}";
 }
@@ -207,15 +211,6 @@ import type {
   RouteQueryAndHash,
 } from 'vue-router';
 import type { TypedRouteList } from './__routes'
-
-// -- Unbuild CommonJS Shims --
-import __cjs_url__ from 'url';
-import __cjs_path__ from 'path';
-import __cjs_mod__ from 'module';
-const __filename = __cjs_url__.fileURLToPath(import.meta.url);
-const __dirname = __cjs_path__.dirname(__filename);
-const require = __cjs_mod__.createRequire(import.meta.url);
-
 `;
 const staticDeclarations = `
   type TypedRouteParamsStructure = {
@@ -279,7 +274,7 @@ const staticDeclarations = `
     ): Promise<NavigationFailure | void | undefined>;
   }
   
-  declare module 'nuxt3/dist/app/nuxt' {
+  declare module 'nuxt/dist/app/nuxt' {
     export interface NuxtApp {
       $typedRouter: TypedRouter;
       $routesList: RouteListDecl;
@@ -390,24 +385,21 @@ function createTypedRouteParamsExport(routesParams) {
   }`;
 }
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
 function routeHook(outDir, routesObjectName, srcDir, nuxt) {
   try {
     extendPages(async (routes) => {
       if (routes.length) {
         const { routesDeclTemplate, routesList, routesObjectTemplate, routesParams } = constructRouteMap(routes);
         const pluginName = "__typed-router.ts";
-        const runtimeDir = resolve(__dirname, process.env.NUXT_BUILD_TYPE === "stub" ? "../../dist/runtime" : "./runtime");
-        const pluginPath = resolve(runtimeDir, pluginName);
         nuxt.hook("build:done", async () => {
           const pluginFolder = `${srcDir}/plugins`;
-          await saveRouteFiles(pluginFolder, pluginName, createRuntimePluginFile(routesDeclTemplate));
+          await saveRouteFiles(pluginFolder, srcDir, pluginName, createRuntimePluginFile(routesDeclTemplate));
         });
         await Promise.all([
-          saveRouteFiles(outDir, "__useTypedRouter.ts", createRuntimeHookFile(routesDeclTemplate)),
-          saveRouteFiles(outDir, `__routes.ts`, createRuntimeRoutesFile({ routesList, routesObjectTemplate, routesObjectName })),
-          saveRouteFiles(outDir, `typed-router.d.ts`, createDeclarationRoutesFile({ routesDeclTemplate, routesList, routesParams })),
-          saveRouteFiles(outDir, "index.ts", createRuntimeIndexFile())
+          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 {
@@ -423,15 +415,11 @@ const module = defineNuxtModule({
   meta: {
     name: "nuxt-typed-router",
     configKey: "nuxtTypedRouter",
-    compatibility: { nuxt: "^3.0.0", bridge: false }
-  },
-  defaults: {
-    routesObjectName: "routerPagesNames",
-    stripAtFromName: false
+    compatibility: { nuxt: "^3.0.0-rc.1", bridge: false }
   },
   setup(moduleOptions, nuxt) {
     const srcDir = nuxt.options.srcDir;
-    const { outDir = `${srcDir}/generated`, routesObjectName } = moduleOptions;
+    const { outDir = `./generated`, routesObjectName = "routerPagesNames" } = moduleOptions;
     nuxt.hook("pages:extend", () => routeHook(outDir, routesObjectName, srcDir, nuxt));
     routeHook(outDir, routesObjectName, srcDir, nuxt);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-typed-router",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Provide autocompletion for pages route names generated by Nuxt router",
   "type": "module",
   "scripts": {
@@ -9,9 +9,9 @@
     "prepack": "nuxt-module-build",
     "build:local": "nuxt-module-build --stub && cross-env NUXT_BUILD_TYPE=stub nuxi dev playground",
     "init:build": "nuxt-module-build --stub && nuxi prepare playground",
-    "build:test": "cross-env NUXT_BUILD_TYPE=stub yarn init:build && yarn prepack && yarn play:build",
-    "test": "yarn build:test && jest",
-    "test:reset": "yarn test --updateSnapshot"
+    "build:test": "cross-env NUXT_BUILD_TYPE=stub yarn prepack && yarn play:build",
+    "test": "yarn build:test && vitest run",
+    "test:watch": "yarn build:test && vitest"
   },
   "exports": {
     ".": {
@@ -51,40 +51,28 @@
     "url": "https://github.com/victorgarciaesgi/nuxt-typed-router/issues"
   },
   "dependencies": {
-    "@nuxt/kit": "npm:@nuxt/kit-edge@latest",
+    "@nuxt/kit": "^3.0.0-rc.9",
     "chalk": "^4.1.2",
     "lodash-es": "^4.17.21",
     "log-symbols": "^5.1.0",
     "mkdirp": "^1.0.4",
     "pathe": "^0.2.0",
-    "prettier": "^2.5.1"
+    "prettier": "^2.7.1"
   },
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "^7.16.10",
-    "@babel/preset-env": "^7.16.11",
     "@nuxt/module-builder": "latest",
-    "@nuxt/test-utils": "^0.2.2",
     "@nuxt/types": "^2.15.8",
     "@nuxtjs/eslint-config-typescript": "latest",
-    "@types/jest": "^27.4.0",
-    "@types/lodash": "^4.14.178",
+    "@types/lodash-es": "^4.17.6",
     "@types/mkdirp": "^1.0.2",
-    "@types/node": "^16.11.12",
-    "@types/prettier": "^2.4.3",
-    "babel-jest": "^27.4.6",
-    "copyfiles": "^2.4.0",
-    "core-js": "^3.20.3",
+    "@types/node": "^17.0.23",
+    "@types/prettier": "^2.7.0",
     "cross-env": "^7.0.3",
-    "eslint": "8.8.0",
-    "eslint-config-prettier": "^8.3.0",
-    "jest": "^27.4.7",
-    "nuxt3": "latest",
-    "path": "^0.12.7",
-    "playwright": "^1.18.1",
-    "rimraf": "^3.0.2",
-    "ts-jest": "^27.1.3",
-    "typescript": "^4.5.1",
-    "unbuild": "^0.6.9",
-    "vue-router": "^4.0.12"
+    "eslint": "8.23.0",
+    "eslint-config-prettier": "^8.5.0",
+    "nuxt": "^3.0.0-rc.9",
+    "typescript": "^4.6.3",
+    "vitest": "^0.22.1",
+    "vue-router": "^4.1.5"
   }
 }