version 0.1.1 (#1)

version 0.1.1

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-env", "next/babel"],
+  "plugins": ["@babel/plugin-proposal-export-default-from"]
+}

.gitignore

@@ -0,0 +1,4 @@
+dist
+node_modules
+.idea
+.npmrc

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "arrowParens": "avoid",
+  "trailingComma": "es5",
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "tabWidth": 2
+}

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "next-links",
+  "version": "0.1.2",
+  "description": "",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "babel src -d dist --delete-dir-on-start",
+    "prepare": "npm run build"
+  },
+  "keywords": [
+    "next",
+    "router",
+    "routes"
+  ],
+  "author": "Golos",
+  "license": "MIT",
+  "dependencies": {
+    "path-to-regexp": "^3.0.0"
+  },
+  "peerDependencies": {
+    "next": "^7.0.0",
+    "react": "^16.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.3.4",
+    "@babel/plugin-proposal-export-default-from": "^7.2.0",
+    "@babel/preset-env": "^7.3.4",
+    "next": "^7.0.0",
+    "react": "^16.0.0"
+  }
+}

src/Route.js

@@ -0,0 +1,66 @@
+import pathToRegexp from 'path-to-regexp';
+
+import { toQuerystring } from './utils';
+
+export default class Route {
+  constructor({ name, pattern, page = name }) {
+    if (!name && !page) {
+      throw new Error(`Missing page to render for route "${pattern}"`);
+    }
+
+    this.name = name;
+    this.pattern = pattern || `/${name}`;
+    this.page = page.replace(/(^|\/)index$/, '').replace(/^\/?/, '/');
+    this.regex = pathToRegexp(this.pattern, (this.keys = []));
+    this.keyNames = this.keys.map(key => key.name);
+    this.toPath = pathToRegexp.compile(this.pattern);
+  }
+
+  match(path) {
+    const values = this.regex.exec(path);
+    if (values) {
+      return this.valuesToParams(values.slice(1));
+    }
+  }
+
+  valuesToParams(values) {
+    return values.reduce((params, val, i) => {
+      if (val === undefined) {
+        return params;
+      }
+
+      params[this.keys[i].name] = decodeURIComponent(val);
+
+      return params;
+    }, {});
+  }
+
+  getHref(params = {}) {
+    return `${this.page}?${toQuerystring(params)}`;
+  }
+
+  getAs(params = {}) {
+    const as = this.toPath(params) || '/';
+    const queryKeys = Object.keys(params).filter(
+      key => !this.keyNames.includes(key)
+    );
+
+    if (!queryKeys.length) {
+      return as;
+    }
+
+    const query = {};
+
+    queryKeys.forEach(key => {
+      query[key] = params[key];
+    });
+
+    return `${as}?${toQuerystring(query)}`;
+  }
+
+  getUrls(params) {
+    const as = this.getAs(params);
+    const href = this.getHref(params);
+    return { as, href };
+  }
+}

src/Routes.js

@@ -0,0 +1,137 @@
+import React from 'react';
+import { parse } from 'url';
+import NextLink from 'next/link';
+import NextRouter from 'next/router';
+
+import Route from './Route';
+
+export default class Routes {
+  constructor({ Link = NextLink, Router = NextRouter, logger } = {}) {
+    this.routes = [];
+    this.Link = this.getLink(Link);
+    this.Router = this.getRouter(Router);
+    this.logger = logger || console;
+  }
+
+  add(name, pattern, page) {
+    let options;
+    if (name instanceof Object) {
+      options = name;
+      name = options.name;
+    } else {
+      if (name.startsWith('/')) {
+        page = pattern;
+        pattern = name;
+        name = null;
+      }
+      options = { name, pattern, page };
+    }
+
+    if (this.findByName(name)) {
+      throw new Error(`Route "${name}" already exists`);
+    }
+
+    this.routes.push(new Route(options));
+    return this;
+  }
+
+  findByName(name) {
+    if (name) {
+      return this.routes.filter(route => route.name === name)[0];
+    }
+  }
+
+  match(url) {
+    const parsedUrl = parse(url, true);
+    const { pathname, query } = parsedUrl;
+
+    const base = { parsedUrl, query };
+
+    for (let i = 0; i < this.routes.length; i++) {
+      const route = this.routes[i];
+
+      const params = route.match(pathname);
+
+      if (params) {
+        return {
+          ...base,
+          route,
+          params,
+          query: { ...query, ...params },
+        };
+      }
+    }
+
+    return base;
+  }
+
+  findAndGetUrls(nameOrUrl, params) {
+    const route = this.findByName(nameOrUrl);
+
+    if (route) {
+      return {
+        route,
+        urls: route.getUrls(params),
+        byName: true,
+      };
+    } else {
+      const { route, query } = this.match(nameOrUrl);
+      const href = route ? route.getHref(query) : nameOrUrl;
+      const urls = { href, as: nameOrUrl };
+      return { route, urls };
+    }
+  }
+
+  getRequestHandler(app, customHandler) {
+    const nextHandler = app.getRequestHandler();
+
+    return (req, res) => {
+      const { route, query, parsedUrl } = this.match(req.url);
+
+      if (route) {
+        if (customHandler) {
+          customHandler({ req, res, route, query });
+        } else {
+          app.render(req, res, route.page, query);
+        }
+      } else {
+        nextHandler(req, res, parsedUrl);
+      }
+    };
+  }
+
+  getLink(Link) {
+    return props => {
+      const { route, params, to, hash, ...newProps } = props;
+      let href;
+      let as;
+
+      try {
+        const urls = this.findAndGetUrls(route || to, params).urls;
+
+        href = urls.href;
+        as = urls.as + (hash ? `#${hash}` : '');
+      } catch (err) {
+        this.logger.error(
+          `Link url composing failed. route="${route ||
+            to}", params: ${JSON.stringify(params)},`,
+          err
+        );
+      }
+
+      return <Link {...newProps} href={href} as={as} />;
+    };
+  }
+
+  getRouter(Router) {
+    const wrap = method => (route, params, options) => {
+      const { byName, urls } = this.findAndGetUrls(route, params);
+      return Router[method](urls.href, urls.as, byName ? options : params);
+    };
+
+    Router.pushRoute = wrap('push');
+    Router.replaceRoute = wrap('replace');
+    Router.prefetchRoute = wrap('prefetch');
+    return Router;
+  }
+}

src/index.js

@@ -0,0 +1,3 @@
+import Routes from './Routes';
+
+export default options => new Routes(options);

src/utils.js

@@ -0,0 +1,13 @@
+export function toQuerystring(obj) {
+  return Object.keys(obj)
+    .filter(key => obj[key] !== null && obj[key] !== undefined)
+    .map(key => {
+      let value = obj[key];
+
+      if (Array.isArray(value)) {
+        value = value.join('/');
+      }
+      return [encodeURIComponent(key), encodeURIComponent(value)].join('=');
+    })
+    .join('&');
+}