Skip to content

Commit

Permalink
chore: upgrade mobx to version 6
Browse files Browse the repository at this point in the history
BREAKING:
 - minimum version of mobx 6 is now required
 - minimum version of mobx-react-lite 3 is now required
  • Loading branch information
thdk committed Oct 3, 2021
1 parent 40b355b commit 4fafdb4
Show file tree
Hide file tree
Showing 24 changed files with 2,407 additions and 4,424 deletions.
37 changes: 8 additions & 29 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,36 +13,15 @@ module.exports = {
ecmaFeatures: {
experimentalObjectRestSpread: true
},
sourceType: 'module'
sourceType: 'module',
},
extends: ['eslint:recommended'],
extends: [
'eslint:recommended',
"plugin:@typescript-eslint/recommended",
'prettier'
],
rules: {
'arrow-spacing': 'error',
'block-spacing': 'error',
'comma-dangle': 'off',
'comma-spacing': 'error',
'comma-style': 'error',
curly: 'error',
'dot-notation': 'error',
eqeqeq: 'error',
'eol-last': 'error',
'key-spacing': 'error',
'keyword-spacing': 'error',
'linebreak-style': ['error', 'unix'],
'no-console': 'off',
'no-param-reassign': 'error',
'no-tabs': 'error',
'no-trailing-spaces': 'error',
'no-underscore-dangle': 'error',
'no-var': 'error',
'no-whitespace-before-property': 'error',
'prefer-const': 'error',
semi: ['error', 'always'],
'semi-spacing': 'error',
'space-before-blocks': 'error',
'space-before-function-paren': ['error', 'never'],
'space-in-parens': 'error',
'no-unused-vars': 'off',
'@typescript-eslint/no-unused-vars': ['error']
'@typescript-eslint/no-explicit-any': "off",
'@typescript-eslint/explicit-module-boundary-types': "off"
}
};
1 change: 0 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

# Compiled output
/dist
/types

# Dependencies
/node_modules
Expand Down
3 changes: 1 addition & 2 deletions jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,5 @@ module.exports = {
},
testRegex: '((\\.|/)spec)\\.tsx?$',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
setupFilesAfterEnv: ['./jest.setup.ts'],
moduleDirectories: ['node_modules', 'src']
moduleDirectories: ['node_modules', 'src'],
};
1 change: 0 additions & 1 deletion jest.setup.ts

This file was deleted.

6,192 changes: 2,090 additions & 4,102 deletions package-lock.json

Large diffs are not rendered by default.

20 changes: 10 additions & 10 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,8 @@
"version": "0.3.0",
"description": "A simple router for MobX",
"main": "dist/index.js",
"types": "types/index.d.ts",
"types": "dist/types/index.d.ts",
"files": [
"types/",
"dist/",
"src/",
"test/",
Expand Down Expand Up @@ -40,24 +39,25 @@
"query-string": "^6.13.1"
},
"peerDependencies": {
"mobx": "^5.x",
"mobx-react-lite": "^2.x",
"react": ">= 16.8 < 17"
"mobx": "^6.x",
"mobx-react-lite": "^3.x",
"react": ">= 16.8"
},
"devDependencies": {
"@testing-library/react": "^10.0.3",
"@types/enzyme": "^3.10.5",
"@types/jest": "^25.2.1",
"@typescript-eslint/eslint-plugin": "^2.28.0",
"@typescript-eslint/parser": "^2.28.0",
"@typescript-eslint/eslint-plugin": "^4.32.0",
"@typescript-eslint/parser": "^4.32.0",
"del-cli": "^1.1.0",
"eslint": "^6.8.0",
"eslint-config-prettier": "^8.3.0",
"husky": "^0.14.3",
"jest": "^25.4.0",
"lint-staged": "^6.0.0",
"mobx": "^5.15.4",
"mobx-react-lite": "^2.0.6",
"prettier": "^1.7.4",
"mobx": "^6.3.3",
"mobx-react-lite": "^3.2.1",
"prettier": "^2.4.1",
"raf": "^3.4.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
Expand Down
120 changes: 60 additions & 60 deletions src/components/Link.tsx
Original file line number Diff line number Diff line change
@@ -1,60 +1,60 @@
// eslint-disable-next-line
import React from 'react';
import { observer } from 'mobx-react-lite';
import { Route, RouteParams, QueryParams } from '../route';
import { Store, RouterStore } from '../router-store';

const LinkBase = <
S extends Store,
P extends RouteParams,
Q extends QueryParams
>({
route,
className,
params,
queryParams,
refresh = false,
style = {},
children,
title,
router
}: React.PropsWithChildren<{
route: Route<S, P, Q>;
className?: string;
params?: P;
queryParams?: Q;
refresh?: boolean;
style?: React.StyleHTMLAttributes<HTMLAnchorElement>;
title?: string;
router: RouterStore<S>;
}>) => {
if (!router) {
console.error(
'The router prop must be defined for a Link component to work!'
);
return null;
}
return (
<a
style={style}
className={className}
onClick={e => {
const middleClick = e.button === 2;
const cmdOrCtrl = e.metaKey || e.ctrlKey;
const openinNewTab = middleClick || cmdOrCtrl;
const shouldNavigateManually =
refresh || openinNewTab || cmdOrCtrl;

if (!shouldNavigateManually) {
e.preventDefault();
router.goTo(route, params, queryParams);
}
}}
href={route.replaceUrlParams(params, queryParams)}
>
{title || children}
</a>
);
};

export const Link = observer(LinkBase);
// eslint-disable-next-line
import React from 'react';
import { observer } from 'mobx-react-lite';
import { Route, RouteParams, QueryParams } from '../route';
import { Store, RouterStore } from '../router-store';

const LinkBase = <
S extends Store,
P extends RouteParams,
Q extends QueryParams
>({
route,
className,
params,
queryParams,
refresh = false,
style = {},
children,
title,
router,
}: React.PropsWithChildren<{
route: Route<S, P, Q>;
className?: string;
params?: P;
queryParams?: Q;
refresh?: boolean;
style?: React.StyleHTMLAttributes<HTMLAnchorElement>;
title?: string;
router: RouterStore<S>;
}>) => {
if (!router) {
console.error(
'The router prop must be defined for a Link component to work!'
);
return null;
}
return (
<a
style={style}
className={className}
onClick={(e) => {
const middleClick = e.button === 2;
const cmdOrCtrl = e.metaKey || e.ctrlKey;
const openinNewTab = middleClick || cmdOrCtrl;
const shouldNavigateManually =
refresh || openinNewTab || cmdOrCtrl;

if (!shouldNavigateManually) {
e.preventDefault();
router.goTo(route, params, queryParams);
}
}}
href={route.replaceUrlParams(params, queryParams)}
>
{title || children}
</a>
);
};

export const Link = observer(LinkBase);
36 changes: 18 additions & 18 deletions src/components/MobxRouter.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
// eslint-disable-next-line
import React from 'react';
import { observer } from 'mobx-react-lite';
import { Store } from '../router-store';

type Props = { store: Store };

export const MobxRouter = observer(({ store: { router } }: Props) => {
return (
<>
{router.currentRoute && router.currentRoute.component ? (
router.currentRoute.component
) : (
<div />
)}
</>
);
});
// eslint-disable-next-line
import React from 'react';
import { observer } from 'mobx-react-lite';
import { Store } from '../router-store';

type Props = { store: Store };

export const MobxRouter = observer(({ store: { router } }: Props) => {
return (
<>
{router.currentRoute && router.currentRoute.component ? (
router.currentRoute.component
) : (
<div />
)}
</>
);
});
13 changes: 6 additions & 7 deletions src/route.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,29 +4,28 @@ import queryString from 'query-string';
import { paramRegex, optionalRegex } from './regex';
import { getRegexMatches } from './utils';
import { Store } from './router-store';
import { ReactNode } from 'react';

export type RoutesConfig<T extends Store> = {
[path: string]: Route<T, any, any>;
};

export type QueryParams =
| {
[key: string]: string | number | undefined | boolean;
}
| Record<string, string | number | undefined | boolean>
| undefined;

export type RouteParams = QueryParams;

export class Route<
S extends Store,
P extends RouteParams = {},
Q extends QueryParams = {}
P extends RouteParams = RouteParams,
Q extends QueryParams = QueryParams
> {
//props
path: string;
readonly originalPath: string;
readonly rootPath: string;
readonly component: React.ReactNode;
readonly component: ReactNode;
readonly title?: string;

//lifecycle methods
Expand Down Expand Up @@ -72,7 +71,7 @@ export class Route<
onParamsChange,
beforeEnter,
onExit,
title
title,
}: {
path: string;
component: JSX.Element;
Expand Down
42 changes: 30 additions & 12 deletions src/router-store.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
import { observable, computed, action, toJS, runInAction } from 'mobx';
import {
observable,
computed,
action,
toJS,
runInAction,
makeObservable,
} from 'mobx';
import { Route } from '.';
import { RouteParams, QueryParams } from './route';

Expand All @@ -7,25 +14,37 @@ export type Store = {
};

export class RouterStore<S extends Store> {
@observable params: RouteParams = {};
@observable queryParams: QueryParams = {};
@observable currentRoute?: Route<S, any, any>;
params: RouteParams = {};
queryParams: QueryParams = {};
currentRoute?: Route<S, any, any>;

readonly store: S;

constructor(store: S) {
makeObservable(this, {
params: observable,
queryParams: observable,
currentRoute: observable,
goTo: action,
currentPath: computed,
});

this.store = store;

//bind
this.goTo = this.goTo.bind(this);
}

@action
async goTo<P extends RouteParams = {}, Q extends QueryParams = {}>(
route: Route<S, P, Q>,
paramsObj?: P,
queryParamsObj?: Q
) {
async goTo<
P extends RouteParams = Record<
string,
string | number | undefined | boolean
>,
Q extends QueryParams = Record<
string,
string | number | undefined | boolean
>
>(route: Route<S, P, Q>, paramsObj?: P, queryParamsObj?: Q) {
const nextPath = route.replaceUrlParams(paramsObj, queryParamsObj);
const pathChanged = nextPath !== this.currentPath;

Expand Down Expand Up @@ -68,7 +87,7 @@ export class RouterStore<S extends Store> {
routeChanged &&
this.currentRoute &&
this.currentRoute.onExit &&
(this.currentRoute as Route<S, P, Q>).onExit!(
this.currentRoute.onExit(
this.currentRoute,
currentParams as P,
this.store,
Expand Down Expand Up @@ -100,7 +119,6 @@ export class RouterStore<S extends Store> {
);
}

@computed
get currentPath() {
return this.currentRoute
? this.currentRoute.replaceUrlParams(this.params, this.queryParams)
Expand Down
Loading

0 comments on commit 4fafdb4

Please sign in to comment.