nuxt-typed-router 0.2.22 → 1.0.0-alpha-0

package/lib/hook.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTypedRouter = void 0;
+const vue_router_1 = require("vue-router");
+const useTypedRouter = () => {
+    const router = (0, vue_router_1.useRouter)();
+    return router;
+};
+exports.useTypedRouter = useTypedRouter;

package/lib/module.js

@@ -7,50 +7,204 @@ const lodash_1 = require("lodash");
 const chalk_1 = __importDefault(require("chalk"));
 const save_1 = require("./save");
 const utils_1 = require("./utils");
+const path_1 = require("path");
+const paramRegxp = /:(\w+)/;
 const typedRouterModule = function (moduleOptions) {
-    const { filePath = `${this.options.srcDir}/__routes.js`, routesObjectName = 'routerPagesNames', stripAtFromName = false, } = { ...this.options.typedRouter, ...moduleOptions };
-    this.nuxt.hook('build:extendRoutes', async (existingRoutes) => {
-        try {
-            this.extendRoutes(async (routes) => {
-                (0, utils_1.transformRouteNames)(routes, stripAtFromName);
-                let routesObjectString = '{';
-                let routeObjectJs = {};
-                const recursiveTypedRoutes = (route, level, routeObject, siblings, parentName, hadMatching) => {
-                    const routeName = route.name;
-                    const matchingSiblings = (0, utils_1.extractMatchingSiblings)(route, siblings);
-                    const haveMatchingSiblings = !!(matchingSiblings === null || matchingSiblings === void 0 ? void 0 : matchingSiblings.length);
-                    if ((route.children && !haveMatchingSiblings) ||
-                        (!route.children && haveMatchingSiblings)) {
-                        let childrenChunks = haveMatchingSiblings ? matchingSiblings : route.children;
-                        const splittedPaths = route.path.split('/');
-                        const parentPath = splittedPaths[splittedPaths.length - 1];
-                        const nameKey = (0, lodash_1.camelCase)(parentPath || 'index');
-                        routesObjectString += `${nameKey}:{`;
-                        routeObject[nameKey] = {};
-                        childrenChunks === null || childrenChunks === void 0 ? void 0 : childrenChunks.map((r) => recursiveTypedRoutes(r, level + 1, routeObject[nameKey], (0, utils_1.extractUnMatchingSiblings)(route, siblings), nameKey, haveMatchingSiblings));
-                        routesObjectString += '},';
+    const { filePath = `${this.options.srcDir}/__routes.ts`, routesObjectName = 'routerPagesNames', stripAtFromName = false, } = { ...this.options.typedRouter, ...moduleOptions };
+    const folderPathes = filePath.split('/');
+    folderPathes.splice(folderPathes.length - 1, 1);
+    const definitionFilePath = folderPathes.join('/') + `/typed-router.d.ts`;
+    this.addPlugin({
+        src: (0, path_1.resolve)(__dirname, './templates/typed-router.js'),
+        fileName: 'typed-router.js',
+    });
+    this.nuxt.hook('build:before', () => routeHook.call(this, filePath, routesObjectName, stripAtFromName, definitionFilePath));
+    this.nuxt.hook('build:extendRoutes', () => routeHook.call(this, filePath, routesObjectName, stripAtFromName, definitionFilePath));
+};
+function routeHook(filePath, routesObjectName, stripAtFromName, definitionFilePath) {
+    try {
+        this.extendRoutes(async (routes) => {
+            (0, utils_1.transformRouteNames)(routes, stripAtFromName);
+            let routesObjectString = '{';
+            let routesObjectDecl = '{';
+            let routesList = [];
+            let routesParams = [];
+            let routeObjectJs = {};
+            const recursiveTypedRoutes = (route, level, routeObject, siblings, parentName, previousParams) => {
+                var _a, _b, _c, _d, _e, _f;
+                const matchingSiblings = (0, utils_1.extractMatchingSiblings)(route, siblings);
+                const haveMatchingSiblings = !!(matchingSiblings === null || matchingSiblings === void 0 ? void 0 : matchingSiblings.length) && route.path !== '/';
+                const chunkArray = (_b = (_a = route.file) === null || _a === void 0 ? void 0 : _a.split('/')) !== null && _b !== void 0 ? _b : [];
+                const lastChunkArray = chunkArray[(chunkArray === null || chunkArray === void 0 ? void 0 : chunkArray.length) - 1].split('.vue')[0];
+                const isRootSibling = lastChunkArray === 'index';
+                if ((((_c = route.children) === null || _c === void 0 ? void 0 : _c.length) && !haveMatchingSiblings) ||
+                    (!((_d = route.children) === null || _d === void 0 ? void 0 : _d.length) && haveMatchingSiblings && isRootSibling)) {
+                    let childrenChunks = haveMatchingSiblings ? matchingSiblings : route.children;
+                    const splittedPaths = route.path.split('/');
+                    const parentPath = splittedPaths[splittedPaths.length - 1];
+                    const nameKey = (0, lodash_1.camelCase)(parentPath || 'index');
+                    routesObjectString += `${nameKey}:{`;
+                    routesObjectDecl += `${nameKey}:{`;
+                    routeObject[nameKey] = {};
+                    const params = (_e = route.path.match(paramRegxp)) !== null && _e !== void 0 ? _e : [];
+                    params === null || params === void 0 ? void 0 : params.shift();
+                    let allMergedParams = params.map((m) => ({ key: m, type: 'string | number' }));
+                    if (previousParams === null || previousParams === void 0 ? void 0 : previousParams.length) {
+                        allMergedParams = allMergedParams.concat(previousParams);
                     }
-                    else if (routeName) {
-                        let splitted = routeName.split('-');
+                    childrenChunks === null || childrenChunks === void 0 ? void 0 : childrenChunks.map((r) => recursiveTypedRoutes(r, level + 1, routeObject[nameKey], (0, utils_1.extractUnMatchingSiblings)(route, siblings), nameKey, allMergedParams));
+                    routesObjectString += '},';
+                    routesObjectDecl += '},';
+                }
+                else {
+                    if (route.name) {
+                        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' : (0, lodash_1.camelCase)(splitted.join('-')) || 'index';
-                        routesObjectString += `'${keyName}': '${routeName}',`;
-                        routeObject[keyName] = routeName;
+                        routesObjectString += `'${keyName}': '${route.name}' as const,`;
+                        routesObjectDecl += `'${keyName}': '${route.name}',`;
+                        routesList.push(route.name);
+                        const params = (_f = route.path.match(paramRegxp)) !== null && _f !== void 0 ? _f : [];
+                        params === null || params === void 0 ? void 0 : params.shift();
+                        let allMergedParams = params === null || params === void 0 ? void 0 : params.map((m) => ({ key: m, type: 'string | number' }));
+                        if (previousParams === null || previousParams === void 0 ? void 0 : previousParams.length) {
+                            allMergedParams = allMergedParams.concat(previousParams);
+                        }
+                        routesParams.push({
+                            name: route.name,
+                            params: allMergedParams,
+                        });
+                        routeObject[keyName] = route.name;
                     }
-                };
-                routes.map((r) => recursiveTypedRoutes(r, 0, routeObjectJs, routes === null || routes === void 0 ? void 0 : routes.filter((f) => f.path !== r.path)));
-                routesObjectString += '}';
-                const templateRoutes = `export const ${routesObjectName} = ${routesObjectString};`;
-                await (0, save_1.saveRoutesFiles)(filePath, templateRoutes);
-            });
+                }
+            };
+            routes.map((r) => recursiveTypedRoutes(r, 0, routeObjectJs, routes === null || routes === void 0 ? void 0 : routes.filter((f) => f.path !== r.path)));
+            routesObjectString += '}';
+            routesObjectDecl += '}';
+            const signature = `/** 
+      * Generated by nuxt-typed-router. Do not modify 
+      * */`;
+            const typedRouteListExport = `export type TypedRouteList = ${routesList
+                .map((m) => `'${m}'`)
+                .join('|\n')}`;
+            const typedRouteParamsExport = `export type TypedRouteParams = {
+        ${routesParams
+                .map(({ name, params }) => `"${name}": ${params.length
+                ? `{
+              ${params.map((p) => `"${p.key}"?: ${p.type}`).join(',\n')}
+            }`
+                : 'never'}`)
+                .join(',\n')}
+      }`;
+            const templateRoutesRuntime = `
+      ${signature}
+
+      export const ${routesObjectName} = ${routesObjectString};
+      
+      ${typedRouteListExport}
+
+      ${typedRouteParamsExport}
+      `;
+            const templateRoutesDeclaration = `
+      ${signature}
+      import type {
+        NavigationFailure,
+        RouteLocation,
+        RouteLocationNormalized,
+        RouteLocationNormalizedLoaded,
+        RouteLocationOptions,
+        RouteQueryAndHash,
+        Router,
+      } from 'vue-router';
+
+      ${typedRouteListExport}
+
+      ${typedRouteParamsExport}
+
+       type TypedRouteParamsStructure = {
+        [K in TypedRouteList]: Record<string, string | number> | never;
+      };
+      
+      type TypedLocationAsRelativeRaw<T extends TypedRouteList> = {
+        name?: T;
+        params?: TypedRouteParams[T];
+      };
+      
+      type TypedRouteLocationRaw<T extends TypedRouteList> = RouteQueryAndHash &
+        TypedLocationAsRelativeRaw<T> &
+        RouteLocationOptions;
+      
+      interface TypedRouter {
+        /**
+         * Remove an existing route by its name.
+         *
+         * @param name - Name of the route to remove
+         */
+        removeRoute(name: TypedRouteList): void;
+        /**
+         * Checks if a route with a given name exists
+         *
+         * @param name - Name of the route to check
+         */
+        hasRoute(name: TypedRouteList): boolean;
+        /**
+         * Returns the {@link RouteLocation | normalized version} of a
+         * {@link RouteLocationRaw | route location}. Also includes an \`href\` property
+         * that includes any existing \`base\`. By default the \`currentLocation\` used is
+         * \`route.currentRoute\` and should only be overriden in advanced use cases.
+         *
+         * @param to - Raw route location to resolve
+         * @param currentLocation - Optional current location to resolve against
+         */
+        resolve<T extends TypedRouteList>(
+          to: TypedRouteLocationRaw<T>,
+          currentLocation?: RouteLocationNormalizedLoaded
+        ): RouteLocation & {
+          href: string;
+        };
+        /**
+         * Programmatically navigate to a new URL by pushing an entry in the history
+         * stack.
+         *
+         * @param to - Route location to navigate to
+         */
+        push<T extends TypedRouteList>(
+          to: TypedRouteLocationRaw<T>
+        ): Promise<NavigationFailure | void | undefined>;
+        /**
+         * Programmatically navigate to a new URL by replacing the current entry in
+         * the history stack.
+         *
+         * @param to - Route location to navigate to
+         */
+        replace<T extends TypedRouteList>(
+          to: TypedRouteLocationRaw<T>
+        ): Promise<NavigationFailure | void | undefined>;
+      }
+      
+      declare module '#app' {
+        interface NuxtApp {
+          $typedRouter: TypedRouter
         }
-        catch (e) {
-            console.error(chalk_1.default.red('Error while generating routes definitions model'), '\n' + e);
+      }
+
+      declare module '@vue/runtime-core' {
+        interface ComponentCustomProperties {
+          $typedRouter: TypedRouter
         }
-    });
-};
+      }
+      `;
+            await (0, save_1.saveRoutesFiles)(filePath, templateRoutesRuntime);
+            await (0, save_1.saveRoutesFiles)(definitionFilePath, templateRoutesDeclaration, 'declaration');
+        });
+    }
+    catch (e) {
+        console.error(chalk_1.default.red('Error while generating routes definitions model'), '\n' + e);
+    }
+}
 module.exports = typedRouterModule;
 module.exports.meta = require('../package.json');

package/lib/save.js

@@ -37,7 +37,7 @@ const defaultPrettierOptions = {
     bracketSpacing: true,
     htmlWhitespaceSensitivity: 'strict',
 };
-async function saveRoutesFiles(filePath, templateRoutes) {
+async function saveRoutesFiles(filePath, templateRoutes, title = 'object') {
     try {
         let prettierFoundOptions = await prettier.resolveConfig(process.cwd());
         if (!prettierFoundOptions) {
@@ -49,7 +49,7 @@ async function saveRoutesFiles(filePath, templateRoutes) {
         });
         const savePath = path_1.default.resolve(process.cwd(), filePath);
         fs_1.default.writeFileSync(savePath, formatedModelsFile);
-        console.log(log_symbols_1.default.success, `Route definition file generated at ${chalk_1.default.blue(savePath)}`);
+        console.log(log_symbols_1.default.success, `Route ${title} file generated at ${chalk_1.default.blue(savePath)}`);
     }
     catch (e) {
         console.error(chalk_1.default.red('Error while saving route definitions file'), '\n' + e);

package/lib/templates/typed-router.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ({ app }, inject) => {
+    return {
+        provide: {
+            typedRouter: app.router,
+        },
+    };
+};

package/lib/utils.js

@@ -44,20 +44,21 @@ function transformRouteNames(existingRoutes, stripAtFromName) {
 }
 exports.transformRouteNames = transformRouteNames;
 function extractChunkMain(chunkName) {
+    var _a;
     let chunkArray = chunkName === null || chunkName === void 0 ? void 0 : chunkName.split('/');
-    chunkArray === null || chunkArray === void 0 ? void 0 : chunkArray.pop();
+    (_a = chunkArray === null || chunkArray === void 0 ? void 0 : chunkArray.pop()) === null || _a === void 0 ? void 0 : _a.split('.vue')[0];
     return chunkArray === null || chunkArray === void 0 ? void 0 : chunkArray.join('/');
 }
 exports.extractChunkMain = extractChunkMain;
 function extractChunkRouteName(chunkName) {
-    return chunkName === null || chunkName === void 0 ? void 0 : chunkName.split('/')[chunkName.length - 1];
+    return chunkName === null || chunkName === void 0 ? void 0 : chunkName.split('/')[chunkName.length - 1].split('.vue')[0];
 }
 exports.extractChunkRouteName = extractChunkRouteName;
 function extractMatchingSiblings(mainRoute, siblingRoutes) {
     return siblingRoutes === null || siblingRoutes === void 0 ? void 0 : siblingRoutes.filter((s) => {
-        const chunkName = extractChunkMain(mainRoute.chunkName);
-        if (chunkName) {
-            const siblingChunkName = extractChunkMain(s.chunkName);
+        const chunkName = extractChunkMain(mainRoute.file);
+        if (chunkName && s.name) {
+            const siblingChunkName = extractChunkMain(s.file);
             if (!siblingChunkName)
                 return false;
             return chunkName === siblingChunkName;
@@ -68,9 +69,9 @@ function extractMatchingSiblings(mainRoute, siblingRoutes) {
 exports.extractMatchingSiblings = extractMatchingSiblings;
 function extractUnMatchingSiblings(mainRoute, siblingRoutes) {
     return siblingRoutes === null || siblingRoutes === void 0 ? void 0 : siblingRoutes.filter((s) => {
-        const chunkName = extractChunkMain(mainRoute.chunkName);
+        const chunkName = extractChunkMain(mainRoute.file);
         if (chunkName) {
-            const siblingChunkName = extractChunkMain(s.chunkName);
+            const siblingChunkName = extractChunkMain(s.file);
             if (!siblingChunkName)
                 return false;
             return chunkName !== siblingChunkName;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-typed-router",
-  "version": "0.2.22",
+  "version": "1.0.0-alpha-0",
   "description": "Provide autocompletion for pages route names generated by Nuxt router",
   "main": "lib/module.js",
   "keywords": [
@@ -15,7 +15,9 @@
     "dev": "tsc -p ./tsconfig.json --pretty --watch",
     "build": "rimraf lib && rimraf types && tsc -p ./tsconfig.json --pretty",
     "copy-files": "copyfiles -u 1 ./src/**/*.js ./lib",
-    "prepublish": "yarn build"
+    "prepublish": "yarn build",
+    "test": "jest",
+    "test:reset": "yarn test --updateSnapshot"
   },
   "publishConfig": {
     "access": "public"
@@ -41,18 +43,29 @@
   "typings": "types/index.d.ts",
   "dependencies": {
     "chalk": "^4.1.2",
+    "jest": "^27.4.3",
     "lodash": "^4.17.21",
-    "log-symbols": "^5.0.0",
-    "prettier": "^2.4.1"
+    "log-symbols": "^5.1.0",
+    "prettier": "^2.5.1"
   },
   "devDependencies": {
+    "@babel/plugin-transform-runtime": "^7.16.4",
+    "@babel/preset-env": "^7.16.4",
+    "@nuxt/kit": "^0.8.1-edge",
+    "@nuxt/test-utils": "^0.2.2",
     "@nuxt/types": "^2.15.8",
-    "@types/lodash": "^4.14.173",
-    "@types/node": "^15.12.4",
-    "@types/prettier": "^2.3.2",
+    "@types/jest": "^27.0.3",
+    "@types/lodash": "^4.14.178",
+    "@types/node": "^16.11.12",
+    "@types/prettier": "^2.4.2",
+    "babel-jest": "^27.4.2",
     "copyfiles": "^2.4.0",
+    "core-js": "^3.19.3",
+    "nuxt": "^2.15.8",
+    "playwright": "^1.17.1",
     "rimraf": "^3.0.2",
-    "typescript": "^4.4.3",
-    "vue-router": "^3.5.2"
+    "ts-jest": "^27.1.1",
+    "typescript": "^4.5.2",
+    "vue-router": "^4.0.12"
   }
 }

package/types/types.d.ts

@@ -3,3 +3,11 @@ export interface NuxtTypedRouterOptions {
     routesObjectName?: string;
     stripAtFromName?: boolean;
 }
+export declare type ParamDecl = {
+    key: string;
+    type: string;
+};
+export declare type RouteParamsDecl = {
+    name: string;
+    params: ParamDecl[];
+};

package/types/vue.d.ts

@@ -1,5 +1,5 @@
 import { NuxtTypedRouterOptions } from './types';
-declare module '@nuxt/types' {
+declare module '@nuxt/schema' {
     interface NuxtConfig {
         typedRouter?: NuxtTypedRouterOptions;
     }