Initialize library

.github/workflows/main.yml

@@ -0,0 +1,47 @@
+name: CI
+on: [push]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Begin CI...
+        uses: actions/checkout@v2
+
+      - name: Use Node 12
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+
+      - name: Use cached node_modules
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: nodeModules-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            nodeModules-
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+        env:
+          CI: true
+
+      - name: Typecheck
+        run: yarn typecheck
+        env:
+          CI: true
+
+      - name: Lint
+        run: yarn lint
+        env:
+          CI: true
+
+      - name: Test
+        run: yarn test --ci --coverage --maxWorkers=2
+        env:
+          CI: true
+
+      - name: Build
+        run: yarn build
+        env:
+          CI: true

.gitignore

@@ -0,0 +1,6 @@
+*.log
+.DS_Store
+node_modules
+.cache
+dist
+coverage

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Yaroslav Kukytsyak
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/index.ts'],
+};

package.json

@@ -0,0 +1,91 @@
+{
+  "name": "pre-router",
+  "version": "0.0.0",
+  "license": "MIT",
+  "description": "A router for React with code and data preloading at its core",
+  "keywords": [
+    "pre-router",
+    "router",
+    "react",
+    "render-as-you-fetch",
+    "code-data-preloading"
+  ],
+  "homepage": "https://github.com/kyarik/pre-router#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kyarik/pre-router.git"
+  },
+  "bugs": {
+    "url": "https://github.com/kyarik/pre-router/issues"
+  },
+  "author": "Yaroslav Kukytsyak",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "module": "dist/pre-router.esm.js",
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "start": "tsdx watch",
+    "build": "tsdx build",
+    "test": "tsdx test",
+    "coverage": "yarn test --coverage",
+    "lint": "tsdx lint",
+    "prettify": "prettier --write ./src/**/*.{ts,tsx}",
+    "prepare": "tsdx build",
+    "typecheck": "yarn tsc --noEmit",
+    "size": "size-limit",
+    "analyze": "size-limit --why"
+  },
+  "dependencies": {
+    "circumspect": "^0.1.1",
+    "history": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "suspendable": "^0.2.0"
+  },
+  "devDependencies": {
+    "@size-limit/preset-small-lib": "^4.9.0",
+    "@types/react": "^17.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.9.1",
+    "@typescript-eslint/parser": "^4.9.1",
+    "eslint-config-react-app": "^6.0.0",
+    "husky": "^4.3.0",
+    "react": "^17.0.1",
+    "size-limit": "^4.9.0",
+    "suspendable": "^0.2.0",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.0.3",
+    "typescript": "^4.1.3"
+  },
+  "resolutions": {
+    "**/typescript": "^4.1.3",
+    "**/@typescript-eslint/eslint-plugin": "^4.9.1",
+    "**/@typescript-eslint/parser": "^4.9.1"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "tsdx lint"
+    }
+  },
+  "prettier": {
+    "printWidth": 100,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "all"
+  },
+  "size-limit": [
+    {
+      "path": "dist/pre-router.cjs.production.min.js",
+      "limit": "4.5 KB"
+    },
+    {
+      "path": "dist/pre-router.esm.js",
+      "limit": "4.5 KB"
+    }
+  ]
+}

src/components/Link/index.tsx

@@ -0,0 +1,72 @@
+import React, { AnchorHTMLAttributes, FC, MouseEvent, useCallback } from 'react';
+import { useRouter } from '../../hooks/useRouter';
+
+export interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+  to: string;
+}
+
+export const Link: FC<LinkProps> = ({
+  to,
+  target,
+  onClick,
+  onMouseEnter,
+  onMouseDown,
+  children,
+  ...props
+}) => {
+  const { history, options, preloadBeforeNavigation } = useRouter();
+  const targetBlank = target === '_blank';
+
+  const handleClick = useCallback(
+    (event: MouseEvent<HTMLAnchorElement>) => {
+      if (!targetBlank) {
+        event.preventDefault();
+        history.push(to);
+      }
+
+      if (onClick) {
+        onClick(event);
+      }
+    },
+    [history, onClick, targetBlank, to],
+  );
+
+  const handleMouseEnter = useCallback(
+    (event: MouseEvent<HTMLAnchorElement>) => {
+      if (!targetBlank) {
+        preloadBeforeNavigation(to, options.preloadOnLinkHover);
+      }
+
+      if (onMouseEnter) {
+        onMouseEnter(event);
+      }
+    },
+    [onMouseEnter, options.preloadOnLinkHover, preloadBeforeNavigation, targetBlank, to],
+  );
+
+  const handleMouseDown = useCallback(
+    (event: MouseEvent<HTMLAnchorElement>) => {
+      if (!targetBlank) {
+        preloadBeforeNavigation(to, options.preloadOnLinkPressIn);
+      }
+
+      if (onMouseDown) {
+        onMouseDown(event);
+      }
+    },
+    [onMouseDown, options.preloadOnLinkPressIn, preloadBeforeNavigation, targetBlank, to],
+  );
+
+  return (
+    <a
+      {...props}
+      href={history.createHref(to)}
+      target={target}
+      onClick={handleClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseDown={handleMouseDown}
+    >
+      {children}
+    </a>
+  );
+};

src/components/NavLink/index.tsx

@@ -0,0 +1,18 @@
+import React, { FC, useMemo } from 'react';
+import { usePathname } from '../..//hooks/usePathname';
+import { combineClassNames } from '../..//utils/combineClassNames';
+import { Link, LinkProps } from '../Link';
+
+export type NavLinkProps = LinkProps;
+
+export const NavLink: FC<NavLinkProps> = ({ to, className, ...props }) => {
+  const pathname = usePathname();
+
+  const combinedClassNames = useMemo(() => {
+    const toUrl = new URL(to, window.location.href);
+
+    return combineClassNames(className, toUrl.pathname === pathname && 'active');
+  }, [className, pathname, to]);
+
+  return <Link {...props} to={to} className={combinedClassNames} />;
+};

src/components/PreRouter/index.tsx

@@ -0,0 +1,16 @@
+import React, { VFC } from 'react';
+import { RouterProvider } from '../../context/RouterContext';
+import { Router } from '../../types';
+import { Routes } from '../Routes';
+
+interface Props {
+  router: Router;
+}
+
+export const PreRouter: VFC<Props> = ({ router }) => {
+  return (
+    <RouterProvider value={router}>
+      <Routes />
+    </RouterProvider>
+  );
+};

src/components/Redirect/index.tsx

@@ -0,0 +1,19 @@
+import { useEffect, VFC } from 'react';
+import { useRouter } from '../../hooks/useRouter';
+
+export interface RedirectProps {
+  to: string;
+  push?: boolean;
+}
+
+export const Redirect: VFC<RedirectProps> = ({ to, push = false }) => {
+  const { history } = useRouter();
+
+  useEffect(() => {
+    const redirect = push ? history.push : history.replace;
+
+    redirect(to);
+  }, [history, push, to]);
+
+  return null;
+};

src/components/Routes/ErrorBoundary/index.tsx

@@ -0,0 +1,44 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { ErrorFallbackWrapper } from '../ErrorFallbackWrapper';
+
+interface Props {
+  children: ReactNode;
+  onError: (error: Error, errorInfo: ErrorInfo) => void;
+}
+
+interface State {
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      error: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    this.props.onError(error, errorInfo);
+  }
+
+  resetError = () => {
+    this.setState({ error: null });
+  };
+
+  render() {
+    const { children } = this.props;
+    const { error } = this.state;
+
+    if (error) {
+      return <ErrorFallbackWrapper error={error} resetError={this.resetError} />;
+    }
+
+    return children;
+  }
+}