nuxt-typed-router 1.0.0 → 1.0.4

package/README.md

@@ -1,4 +1,4 @@
-# 🚗🚦 Nuxt typed router
+# 🚗🚦 Typed Router for Nuxt 3
 
 [npm-version-src]: https://img.shields.io/npm/v/nuxt-typed-router.svg
 [npm-version-href]: https://www.npmjs.com/package/nuxt-typed-router
@@ -17,6 +17,13 @@
 - 🚚 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/>
+<br/>
+<p align="center">
+  <img src="https://github.com/victorgarciaesgi/nuxt-typed-router/blob/master/medias/in-action.gif?raw=true"/>
+</p>
+<br/>
+
 # Installation
 
 ### For Nuxt 3
@@ -77,9 +84,13 @@ The module will create 2 files:
 
 # 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_**
 
-You have to specify the output dir of the generated files in your configuration
+You can specify the output dir of the generated files in your configuration. It defaults to `<srcDir>/generated`
 
 ```ts
 import TypedRouter from 'nuxt-typed-router';
@@ -139,6 +150,8 @@ export type TypedRouteList =
   | '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 stritly typed route names and params type-check
@@ -164,7 +177,7 @@ export default defineComponent({
 </script>
 ```
 
-# Usage with `$typedRouter` injected method
+# 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
@@ -176,10 +189,10 @@ import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'Index',
   setup() {
-    const { $typedRouter } = useNuxtApp();
+    const { $typedRouter, $routesList } = useNuxtApp();
 
     function navigate() {
-      $typedRouter.push({ name: 'activate' });
+      $typedRouter.push({ name: $routesList.activate });
     }
 
     return {
@@ -190,6 +203,25 @@ export default defineComponent({
 </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 'nuxt-typed-router/hook';
+
+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

package/dist/module.json

@@ -5,5 +5,5 @@
     "nuxt": "^3.0.0",
     "bridge": false
   },
-  "version": "1.0.0"
+  "version": "1.0.4"
 }

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { extendPages, addPluginTemplate, defineNuxtModule } from '@nuxt/kit';
+import { extendPages, defineNuxtModule } from '@nuxt/kit';
 import { fileURLToPath } from 'url';
 import chalk from 'chalk';
 import logSymbols from 'log-symbols';
@@ -298,17 +298,26 @@ const staticDeclarations = `
   }
   `;
 
+function createRuntimePluginFile(routesDeclTemplate) {
+  return `
+  import { defineNuxtPlugin } from '#app';
+
+  export default defineNuxtPlugin((nuxtApp) => {
+    const routesList = ${routesDeclTemplate};
+
+    return {
+      provide: {
+        typedRouter: nuxtApp.$router,
+        routesList,
+      },
+    };
+  });
+  `;
+}
 function createRuntimeHookFile(routesDeclTemplate) {
   return `
   import { getCurrentInstance } from 'vue';
-
-  function useNuxtApp() {
-    const vm = getCurrentInstance();
-    if (!vm) {
-      throw new Error('nuxt instance unavailable');
-    }
-    return vm.appContext.app.$nuxt;
-  }
+  import { useNuxtApp } from '#app';
 
   export const useTypedRouter = () => {
     const { $router } = useNuxtApp();
@@ -364,27 +373,25 @@ function createTypedRouteParamsExport(routesParams) {
 }
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
-function routeHook(outDir, routesObjectName) {
+function routeHook(outDir, routesObjectName, srcDir, nuxt) {
   try {
     extendPages(async (routes) => {
-      const { routesDeclTemplate, routesList, routesObjectTemplate, routesParams } = constructRouteMap(routes);
-      const pluginName = "typed-router.mjs";
-      const runtimeDir = resolve(__dirname, process.env.NUXT_BUILD_TYPE === "stub" ? "../../dist/runtime" : "./runtime");
-      const pluginPath = resolve(runtimeDir, pluginName);
-      await Promise.all([
-        saveRouteFiles(runtimeDir, "useTypedRouter.mjs", createRuntimeHookFile(routesDeclTemplate)),
-        saveRouteFiles(runtimeDir, pluginName, createRuntimeHookFile(routesDeclTemplate))
-      ]);
-      addPluginTemplate({
-        src: pluginPath,
-        filename: pluginName,
-        options: {
-          routesList: "test"
-        }
-      });
-      await saveRouteFiles(outDir, `__routes.ts`, createRuntimeRoutesFile({ routesList, routesObjectTemplate, routesObjectName }));
-      await saveRouteFiles(outDir, `typed-router.d.ts`, createDeclarationRoutesFile({ routesDeclTemplate, routesList, routesParams }));
-      console.log(logSymbols.success, `[typed-router] Routes definitions generated`);
+      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(runtimeDir, "useTypedRouter.mjs", createRuntimeHookFile(routesDeclTemplate));
+        await saveRouteFiles(outDir, `__routes.ts`, createRuntimeRoutesFile({ routesList, routesObjectTemplate, routesObjectName }));
+        await saveRouteFiles(outDir, `typed-router.d.ts`, createDeclarationRoutesFile({ routesDeclTemplate, routesList, routesParams }));
+        console.log(logSymbols.success, `[typed-router] Routes definitions generated`);
+      } else {
+        console.log(logSymbols.warning, chalk.yellow(`[typed-router] No routes defined. Check if your ${chalk.underline(chalk.bold("pages"))} folder exists and remove ${chalk.underline(chalk.bold("app.vue"))}`));
+      }
     });
   } catch (e) {
     console.error(chalk.red("Error while generating routes definitions model"), "\n" + e);
@@ -402,10 +409,10 @@ const module = defineNuxtModule({
     stripAtFromName: false
   },
   setup(moduleOptions, nuxt) {
-    const { outDir = `${nuxt.options.srcDir}/generated`, routesObjectName } = moduleOptions;
-    nuxt.hook("pages:extend", () => routeHook(outDir, routesObjectName));
-    nuxt.hook("build:extendRoutes", () => routeHook(outDir, routesObjectName));
-    routeHook(outDir, routesObjectName);
+    const srcDir = nuxt.options.srcDir;
+    const { outDir = `${srcDir}/generated`, routesObjectName } = moduleOptions;
+    nuxt.hook("pages:extend", () => routeHook(outDir, routesObjectName, srcDir, nuxt));
+    routeHook(outDir, routesObjectName, srcDir, nuxt);
   }
 });
 

package/dist/runtime/typed-router.d.ts

@@ -1,20 +1,12 @@
-import { getCurrentInstance } from 'vue';
-
-function useNuxtApp() {
-  const vm = getCurrentInstance();
-  if (!vm) {
-    throw new Error('nuxt instance unavailable');
-  }
-  return vm.appContext.app.$nuxt;
-}
-
-export const useTypedRouter = () => {
-  const { $router } = useNuxtApp();
+import { defineNuxtPlugin } from '#app';
 
+export default defineNuxtPlugin((nuxtApp) => {
   const routesList = {};
 
   return {
-    router: $router,
-    routes: routesList,
+    provide: {
+      typedRouter: nuxtApp.$router,
+      routesList,
+    },
   };
-};
+});

package/dist/runtime/typed-router.mjs

@@ -1,20 +1,12 @@
-import { getCurrentInstance } from 'vue';
-
-function useNuxtApp() {
-  const vm = getCurrentInstance();
-  if (!vm) {
-    throw new Error('nuxt instance unavailable');
-  }
-  return vm.appContext.app.$nuxt;
-}
-
-export const useTypedRouter = () => {
-  const { $router } = useNuxtApp();
+import { defineNuxtPlugin } from '#app';
 
+export default defineNuxtPlugin((nuxtApp) => {
   const routesList = {};
 
   return {
-    router: $router,
-    routes: routesList,
+    provide: {
+      typedRouter: nuxtApp.$router,
+      routesList,
+    },
   };
-};
+});

package/dist/runtime/useTypedRouter.d.ts

@@ -1,17 +1,32 @@
 import { getCurrentInstance } from 'vue';
-
-function useNuxtApp() {
-  const vm = getCurrentInstance();
-  if (!vm) {
-    throw new Error('nuxt instance unavailable');
-  }
-  return vm.appContext.app.$nuxt;
-}
+import { useNuxtApp } from '#app';
 
 export const useTypedRouter = () => {
   const { $router } = useNuxtApp();
 
-  const routesList = {};
+  const routesList = {
+    activate: 'activate',
+    index: 'index',
+    childOne: {
+      childOneChildOneSubOne: 'parent-child-one-child-one-sub-one',
+      user: { index: 'parent-child-one-child-one-sub-one-user' },
+      childOneChildOneSubTwo: 'parent-child-one-child-one-sub-two',
+      index: 'parent-child-one',
+    },
+    childTwo: {
+      childTwoId: 'parent-child-two-id',
+      childTwoChildOneSubOne: 'parent-child-two-child-one-sub-one',
+      index: 'parent-child-two',
+      profile: {
+        id: {
+          slug: { index: 'parent-child-two-profile-id-slug' },
+          index: 'parent-child-two-profile-id',
+        },
+        index: 'parent-child-two-profile',
+      },
+    },
+    rootPage: 'rootPage',
+  };
 
   return {
     router: $router,

package/dist/runtime/useTypedRouter.mjs

@@ -1,17 +1,32 @@
 import { getCurrentInstance } from 'vue';
-
-function useNuxtApp() {
-  const vm = getCurrentInstance();
-  if (!vm) {
-    throw new Error('nuxt instance unavailable');
-  }
-  return vm.appContext.app.$nuxt;
-}
+import { useNuxtApp } from '#app';
 
 export const useTypedRouter = () => {
   const { $router } = useNuxtApp();
 
-  const routesList = {};
+  const routesList = {
+    activate: 'activate',
+    index: 'index',
+    childOne: {
+      childOneChildOneSubOne: 'parent-child-one-child-one-sub-one',
+      user: { index: 'parent-child-one-child-one-sub-one-user' },
+      childOneChildOneSubTwo: 'parent-child-one-child-one-sub-two',
+      index: 'parent-child-one',
+    },
+    childTwo: {
+      childTwoId: 'parent-child-two-id',
+      childTwoChildOneSubOne: 'parent-child-two-child-one-sub-one',
+      index: 'parent-child-two',
+      profile: {
+        id: {
+          slug: { index: 'parent-child-two-profile-id-slug' },
+          index: 'parent-child-two-profile-id',
+        },
+        index: 'parent-child-two-profile',
+      },
+    },
+    rootPage: 'rootPage',
+  };
 
   return {
     router: $router,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-typed-router",
-  "version": "1.0.0",
+  "version": "1.0.4",
   "description": "Provide autocompletion for pages route names generated by Nuxt router",
   "type": "module",
   "scripts": {
@@ -8,7 +8,9 @@
     "play:build": "nuxi build playground",
     "prepack": "nuxt-module-build",
     "build:local": "nuxt-module-build --stub && cross-env NUXT_BUILD_TYPE=stub nuxi dev playground",
-    "test": "jest",
+    "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"
   },
   "exports": {

package/dist/runtime/index.d.ts

@@ -1 +0,0 @@
-export { useTypedRouter } from './useTypedRouter';

package/dist/runtime/index.mjs

@@ -1 +0,0 @@
-export { useTypedRouter } from "./useTypedRouter.mjs";