v3.0.0 (#74)

* quel bordel

* fixed implementation

* route pathElements done

* Base proto working for router.push

* NuxtLink type props POC working

* WIP tests, paths working, sort paths, query params and stuff

* added hash support, begun fixing tests

* finished i18n complex module

* fix types

* Added router types

* test fix flacky test

* updated version and complex tests

* added tests, fixed behaviours

* Fixed types and definePageMeta

* Fixed definePageMeta and tests

* updated deps

* fix tests

* Updated tests and fix flacky tests

* updated package json

* Fixed definePageMeta types

* Added support for i18n "prefix_and_default"

* Support for only autocompling default routes on localePath

* Updated tests and gif

* Updated docs

.eslintrc

@@ -18,6 +18,7 @@
     "no-use-before-define": "off",
     "vue/multi-word-component-names": "off",
     "@typescript-eslint/no-inferrable-types": "off",
-    "@typescript-eslint/no-unused-vars": ["off"]
+    "@typescript-eslint/no-unused-vars": ["off"],
+    "import/named": "off"
   }
 }

CHANGELOG.md

@@ -3,6 +3,43 @@ All notable changes to this project will be documented in this file.
 
 The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.
 
+[3.0.0] - 2022-02-22
+
+# 🎉 New features
+
+## Path autocomplete and validity type-check (⚠️ Experimental)
+
+Can be disabled with the `experimentalPathCheck` option.
+
+- Autocomplete for path programmatic navigation
+- Support `NuxtLink`, `useRouter`, `navigateTo` and `useLocalePath`
+- Support query params and hashs
+- Throw an error if the path doesn't match any defined routes pattern
+
+This feature is still experimental and has to be well tested on more apps.
+
+## Nuxt devtools support ⚙️
+
+- Display nuxt-typed-router docs from devtools
+
+## `definePageMeta` support
+
+Get autocompletion et type check for `redirect`, `validate` and `key`
+
+## Bug fixs 🐞
+
+- Fixed tsconfig augmentation when used with other modules
+
+## `@nuxtjs/i18n`
+
+- Removed routes generated by `@nuxtjs/i18n` from autocomplete
+- Support `prefix_and_default` strategy
+- `localePath` will only validate and autocomplete default routes
+
+# Breaking changes ⚠️
+
+- Reworked `routeNames` object params to better match `pages` folder structure
+
 [2.3.1] - 2022-02-03
 
 - fix: support all i18n module declarations (#48)

README.md

@@ -16,22 +16,20 @@
 [![npm downloads][npm-total-downloads-src]][npm-downloads-href]
 <img src='https://img.shields.io/npm/l/nuxt-typed-router.svg'>
 
-## Provide a type safe router to Nuxt 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 path, name and params
 
-- `NuxtLink` route autocomplete and params type-check 
-- `useRouter`, `useRoute` and `navigateTo` route autocomplete and params type-check
+- Supports all programmatic navigation utils (`NuxtLink`, `useRouter`, `navigateTo`, `useRoute`, `useLocalePath`, etc...)
 - Supports optional params and catchAll routes
+- Autocompletes routes paths, names and params
+- Throw error if route path is invalid
 - Out of the box `i18n` support
 - Supports routes extended by config and modules
 
-> A beta version with `path` autocomplete is available in version `v3.0.0-beta.0`
-> https://github.com/victorgarciaesgi/nuxt-typed-router/releases/tag/v3.0.0-beta.0
-
 <br/>
 
 <br/>
 <p align="center">
-  <img src="https://github.com/victorgarciaesgi/nuxt-typed-router/blob/master/.github/images/nuxt-router.gif?raw=true"/>
+  <img src="https://github.com/victorgarciaesgi/nuxt-typed-router/blob/master/.github/images/nuxt-typed-router.gif?raw=true"/>
 </p>
 <br/>
 

docs/content/0.index.md

@@ -1,6 +1,6 @@
 ---
 title: Nuxt typed router
-description: Provide a type safe router to Nuxt with auto-generated typed definitions for route names and autocompletion for route params
+description: Provide a type safe router to Nuxt with auto-generated typed definitions for route paths, names and params
 navigation: false
 layout: page
 ---
@@ -20,16 +20,18 @@ snippet: npm install nuxt-typed-router
 Nuxt typed router
 
 #description
-Provide a type safe router to Nuxt 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 paths, names and params
 
 
 #extra
   ::list
-  - `NuxtLink` route autocomplete and params type-check 
-  - `useRouter` ,`useRoute` and `navigateTo` route autocomplete and params type-check
+  - Autocompletes and typecheck routes paths, names and params
+  - Supports all programmatic navigation utils (`NuxtLink`, `useRouter`, `navigateTo`, `useRoute`, `useLocalePath`, etc...)
   - Supports optional params and catchAll routes
+  - Throw error if route path is invalid
   - Out of the box `i18n` support
   - Supports routes extended by config and modules
+
   ::
   :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/edit/github-7e4xvw?file=store/testRouter.ts" blank color="secondary"}
 ::
@@ -38,7 +40,7 @@ Provide a type safe router to Nuxt with auto-generated typed definitions for rou
 
 
 <p align='center'>
- <img style='max-width: 100%;' src="https://github.com/victorgarciaesgi/nuxt-typed-router/blob/master/.github/images/nuxt-router.gif?raw=true"/>
+ <img style='max-width: 100%;' src="https://github.com/victorgarciaesgi/nuxt-typed-router/blob/master/.github/images/nuxt-typed-router.gif?raw=true"/>
 </p>
 
 <br/>
@@ -54,7 +56,7 @@ Features
   #title
   Type safety
   #description
-  Throws errors when params don't match route name
+  Throws errors when route path/name/params doesn't match any page
   ::
 
   ::card{icon="noto:fire"}

docs/content/1.guide/0.index.md

@@ -1,10 +1,6 @@
 
 # Installation
 
-::alert{type="warning"}
-⚠️ Since `v2.1.x`, `useTypedRouter` and `useTypedRoute` are no longer exported.   
-The package can now override types from `useRouter`, `useRoute`
-::
 
 ::code-group
 ```bash [yarn]

docs/content/1.guide/1.configuration.md

@@ -15,11 +15,29 @@ Available options:
 
 ```ts
 export interface ModuleOptions {
+  /**
+   * ⛔️ Experimental, disable it if you encounter problems
+   *
+   * Enables path autocomplete and path validity for programmatic validation
+   *
+   *  @default true
+   */
+  experimentalPathCheck?: boolean;
   /**
    * Set to false if you don't want a plugin generated
    * @default false
    */
   plugin?: boolean;
+  /**
+   * Customise Route location arguments strictness for `NuxtLink` or `router`
+   * All strict options are disabled by default.
+   * You can tweak options to add strict router navigation options.
+   *
+   * By passing `true` you can enable all of them
+   *
+   * @default false
+   */
+  strict?: boolean | StrictOptions;
 }
 
 ```

docs/content/2.usage/0.how-to-use.md

@@ -4,7 +4,7 @@ title: How to use
 
 # How to use
 
-The module will automaticaly provide autocomplete and type-check for route `name` and `params`.
+The module will automaticaly provide autocomplete and type-check for route `path`, `name` and `params`.
 
 Params autocomplete takes into account the way vue-router works (As navigating between children routes without re-providing the param).
 
@@ -15,13 +15,25 @@ The types from `vue-router` and Nuxt navigation utils will be owerwritten, allow
 All those examples will be about files present in the `pages` folder.
 
 
+## Basic path navigation
+
+Path navigation will propose you the list of routes declaration to choose from, and will dynamically validate the route.
+It supports 
+
+- Query params
+- Hash params
+- Errors for invalid paths like `/foo /bar` or `/foo////bar`
+
+
 ## `pages/login.vue`
 
 When a route has no params defined, the `params` property will not even be available as an option in the router.
 
 ```ts
+router.push('/login/bar'); // Error! ❌
 router.push({name: 'login', params: {foo: 'bar'}}) // Error! ❌
 
+router.push('/login'); // Good! ✅
 router.push({name: 'login'}) // Good! ✅
 ```
 
@@ -34,16 +46,21 @@ if (route.name === 'login') {
 }
 ```
 
-## `pages/[foo].vue`
+## `pages/user/[id].vue`
 
 When a route has a required param defined, navigating exactly to this route will throw an error if you don't provide a `params` property or if you put a wrong param.
 
 ```ts
-router.push({name: 'foo'}) // Error! ❌
+router.push({name: 'user-id'}) // Error! ❌
+router.push({name: 'user-id', params: {bar: 'baz'}}) // Error! ❌
+router.push('/user') // Error! ❌
 
-router.push({name: 'foo', params: {bar: 'baz'}}) // Error! ❌
+const id = "ey7878"
+router.push(`/user/${id}`) // Good! ✅
+router.push({name: 'user-id', params: {id}}) // Good! ✅
+
+router.push(`/user/${id}/baguette`) // Error! ❌
 
-router.push({name: 'foo', params: {foo: 'bar'}}) // Good! ✅
 ```
 
 For resolved routes, the `params` property will be available and correctly typed.
@@ -69,15 +86,16 @@ console.log(route.params.foo); // Good! ✅
 ```
 
 
-## `pages/[[bar]].vue`
+## `pages/user/foo/[[bar]].vue`
 
 When a route has only an optional param defined, navigating exactly to this route will not require to provide a `params` property, and will mark the `bar` param as optional too.
 ```ts
-router.push({name: 'bar'}) // Good! ✅
-
-router.push({name: 'bar', params: {foo: 'baz'}}) // Error! ❌
+router.push({name: 'user-foo-bar'}) // Good! ✅
+router.push('/user/foo') // Good! ✅
 
-router.push({name: 'bar', params: {bar: 'baz'}}) // Good! ✅
+router.push({name: 'user-foo-bar', params: {foo: 'baz'}}) // Error! ❌
+router.push({name: 'user-foo-bar', params: {bar: 'baz'}}) // Good! ✅
+router.push('/user/foo/baz') // Good! ✅
 ```
 
 For resolved routes, the `params` property will be available and correctly typed.
@@ -102,6 +120,10 @@ router.push({name: 'title-slug', params: {slug: 'baz'}}) // Error! ❌
 router.push({name: 'title-slug', params: {title: 'Bonjour'}}) // Good! ✅
 
 router.push({name: 'title-slug', params: {title: 'Bonjour', slug: 'baz'}}) // Good! ✅
+
+router.push('/blabla-') // Good! ✅
+router.push('/blabla-foo/bar') // Error! ❌
+
 ```
 
 Fo resolved routes, the `params` property will be available and correctly typed.
@@ -120,11 +142,10 @@ if (route.name === 'title-slug') {
 When you define a "catch-all" route, navigating exactly to this route will require to provide a `params` property, and will need the param the be an `Array`.
 ```ts
 router.push({name: 'options'}) // Error! ❌
-
 router.push({name: 'options', params: {options: 'baz'}}) // Error! ❌
 
+router.push('/foo/bar/baz') // Good! ✅
 router.push({name: 'options', params: {options: ['foo', 'bar']}}) // Good! ✅
-
 router.push({name: 'options', params: {options: [1, 2, 3, 'foo']}}) // Good! ✅
 ```
 
@@ -148,13 +169,14 @@ Ex: navigating from route
 _As we cannot know where you are navigating from, the `title` and `id` params will be optional._
 
 ```ts
+router.push('/nested/foo/user') // Error! ❌
 router.push({name: 'nested-title-user-id'}) // Error! ❌
-
 router.push({name: 'nested-title-user-id', params: {foo: 'baz'}}) // Error! ❌
 
+router.push('/nested/foo/user/YUEUY77') // Good! ✅
 router.push({name: 'nested-title-user-id', params: {id: 1}}) // Good! ✅
-
 router.push({name: 'nested-title-user-id', params: {id: 1, title: 'foo'}}) // Good! ✅
+
 ```
 
 As for resolved routes, the parameters will not be marqued as optional

docs/content/2.usage/5.i18n.md

@@ -32,7 +32,7 @@ export default defineNuxtConfig({
 ```
 
 You will have autocomplete for
-- The additional routes when using `prefix` strategy.
+- Only the default routes when using `prefix(*)` strategies.
 - The registered locales
 
 

docs/content/2.usage/6.definePageMeta().md

@@ -0,0 +1,41 @@
+---
+title: definePageMeta()
+---
+
+
+# definePageMeta
+
+You will have autocompletion and typecheck for multiple properties in `definePageMeta`, both as a global import or from the `@typed-router` alias.
+
+Like `useRoute`, it has a strict mode when you can assert the current page.
+
+Properties enabled: 
+
+- `validate`
+- `redirect`
+- `key`
+
+::alert{type="warning"}
+Do yo Typescript limitations, return type for `redirect` may be buggy or not display anything.
+You can use the `helpers` util as a workaround [Helpers doc](./7.helpers.md)
+::
+
+
+Exemple: 
+
+```ts
+definePageMeta({
+  validate(route) { // <- Typed
+    return true
+  }
+})
+// Or with strict option
+
+definePageMeta('admin', {
+  validate(route) {
+    route.name // "admin"
+    return true;
+  }
+})
+
+```

docs/content/2.usage/7.helpers.md

@@ -0,0 +1,32 @@
+---
+title: helpers
+---
+
+# Helpers
+
+
+Alias `@typed-router` exports a `helpers` util that can be useful in places where there is no autocomplete yet.
+It simply returns the route you give as argument.
+
+
+## `helpers.route`
+
+It will give you autocomplete and type check for route object
+
+```ts
+import {helpers} from '@typed-router';
+
+const route = helpers.route({name: 'admin-id'}) // Error ❌
+const route = helpers.route({name: 'admin-id', params: {id: 1}}) // Good ✅
+```
+
+## `helpers.path`
+
+It will give you autocomplete and type check for string path
+
+```ts
+import {helpers} from '@typed-router';
+
+const route = helpers.path('/admin') // Error ❌
+const route = helpers.path('/admin/1') // Good ✅
+```

docs/content/3.options/2.experimentalPathCheck.md

@@ -0,0 +1,11 @@
+---
+title: experimentalPathCheck
+---
+
+# experimentalPathCheck
+
+It allows you to disable path autocomplete and typecheck
+## Type
+ `type: boolean`  
+ `default: true`
+