mobx-route 0.0.2 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/route/route.d.ts +15 -9
- package/route/route.d.ts.map +1 -1
- package/route/route.js +53 -21
- package/route/route.test.js +27 -0
- package/route/route.types.d.ts +4 -1
- package/route/route.types.d.ts.map +1 -1
package/package.json
CHANGED
package/route/route.d.ts
CHANGED
|
@@ -1,25 +1,31 @@
|
|
|
1
|
-
import { IMobxHistory, IMobxLocation } from 'mobx-location-history';
|
|
1
|
+
import { IMobxHistory, IMobxLocation, IQueryParams } from 'mobx-location-history';
|
|
2
2
|
import { ParamData, TokenData } from 'path-to-regexp';
|
|
3
3
|
import { AllPropertiesOptional } from 'yummies/utils/types';
|
|
4
|
-
import {
|
|
5
|
-
export declare class Route<TPath extends string, TParentRoute extends
|
|
4
|
+
import { ExtractPathParams, RouteConfiguration, RouteGlobalConfiguration, RouteMatchesData, RouteNavigateParams } from './route.types.js';
|
|
5
|
+
export declare class Route<TPath extends string, TParentRoute extends Route<any, any> | null = null> {
|
|
6
6
|
path: TPath;
|
|
7
|
-
protected
|
|
8
|
-
history: IMobxHistory;
|
|
9
|
-
location: IMobxLocation;
|
|
7
|
+
protected config: RouteConfiguration<TParentRoute>;
|
|
8
|
+
protected history: IMobxHistory;
|
|
9
|
+
protected location: IMobxLocation;
|
|
10
|
+
query: IQueryParams;
|
|
10
11
|
private _tokenData;
|
|
11
|
-
constructor(path: TPath,
|
|
12
|
+
constructor(path: TPath, config?: RouteConfiguration<TParentRoute>);
|
|
12
13
|
get matchData(): RouteMatchesData<TPath> | null;
|
|
13
14
|
get isMatches(): boolean;
|
|
14
|
-
extend<TExtendedPath extends string>(path: TExtendedPath): Route<`${TPath}${TExtendedPath}`, this>;
|
|
15
|
+
extend<TExtendedPath extends string>(path: TExtendedPath, config?: Omit<RouteConfiguration<any>, 'parent'>): Route<`${TPath}${TExtendedPath}`, this>;
|
|
15
16
|
protected processParams(params?: ExtractPathParams<TPath> | null | undefined): ParamData | undefined;
|
|
17
|
+
protected get baseUrl(): string;
|
|
18
|
+
createUrl(...args: AllPropertiesOptional<ExtractPathParams<TPath>> extends true ? [
|
|
19
|
+
params?: ExtractPathParams<TPath> | null | undefined,
|
|
20
|
+
query?: Record<string, any>
|
|
21
|
+
] : [params: ExtractPathParams<TPath>, query?: Record<string, any>]): string;
|
|
16
22
|
navigate(...args: AllPropertiesOptional<ExtractPathParams<TPath>> extends true ? [
|
|
17
23
|
params?: ExtractPathParams<TPath> | null | undefined,
|
|
18
24
|
navigateParams?: RouteNavigateParams
|
|
19
25
|
] : [params: ExtractPathParams<TPath>, navigateParams?: RouteNavigateParams]): void;
|
|
20
26
|
protected get tokenData(): TokenData;
|
|
21
27
|
private static _globalConfiguration;
|
|
22
|
-
static setGlobalConfiguration(globalConfiguration: RouteGlobalConfiguration): void;
|
|
28
|
+
static setGlobalConfiguration(globalConfiguration: Partial<RouteGlobalConfiguration>): void;
|
|
23
29
|
static get globalConfiguration(): RouteGlobalConfiguration;
|
|
24
30
|
}
|
|
25
31
|
//# sourceMappingURL=route.d.ts.map
|
package/route/route.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"route.d.ts","sourceRoot":"","sources":["../../src/route/route.ts"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"route.d.ts","sourceRoot":"","sources":["../../src/route/route.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,YAAY,EACZ,aAAa,EACb,YAAY,EAIb,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAkB,SAAS,EAAS,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC7E,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EACL,iBAAiB,EACjB,kBAAkB,EAClB,wBAAwB,EACxB,gBAAgB,EAChB,mBAAmB,EACpB,MAAM,kBAAkB,CAAC;AAE1B,qBAAa,KAAK,CAChB,KAAK,SAAS,MAAM,EACpB,YAAY,SAAS,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,IAAI,GAAG,IAAI;IAUzC,IAAI,EAAE,KAAK;IAClB,SAAS,CAAC,MAAM,EAAE,kBAAkB,CAAC,YAAY,CAAC;IATpD,SAAS,CAAC,OAAO,EAAE,YAAY,CAAC;IAChC,SAAS,CAAC,QAAQ,EAAE,aAAa,CAAC;IAElC,KAAK,EAAE,YAAY,CAAC;IAEpB,OAAO,CAAC,UAAU,CAAwB;gBAGjC,IAAI,EAAE,KAAK,EACR,MAAM,GAAE,kBAAkB,CAAC,YAAY,CAAM;IAYzD,IAAI,SAAS,IAAI,gBAAgB,CAAC,KAAK,CAAC,GAAG,IAAI,CAkB9C;IAED,IAAI,SAAS,YAEZ;IAED,MAAM,CAAC,aAAa,SAAS,MAAM,EACjC,IAAI,EAAE,aAAa,EACnB,MAAM,CAAC,EAAE,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,EAAE,QAAQ,CAAC;IAYlD,SAAS,CAAC,aAAa,CACrB,MAAM,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,SAAS,GACnD,SAAS,GAAG,SAAS;IAWxB,SAAS,KAAK,OAAO,WAIpB;IAED,SAAS,CACP,GAAG,IAAI,EAAE,qBAAqB,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,SAAS,IAAI,GACjE;QACE,MAAM,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,SAAS;QACpD,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;KAC5B,GACD,CAAC,MAAM,EAAE,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAerE,QAAQ,CACN,GAAG,IAAI,EAAE,qBAAqB,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,SAAS,IAAI,GACjE;QACE,MAAM,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,SAAS;QACpD,cAAc,CAAC,EAAE,mBAAmB;KACrC,GACD,CAAC,MAAM,EAAE,iBAAiB,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC,EAAE,mBAAmB,CAAC;IAW9E,SAAS,KAAK,SAAS,cAKtB;IAED,OAAO,CAAC,MAAM,CAAC,oBAAoB,CAAuC;IAE1E,MAAM,CAAC,sBAAsB,CAC3B,mBAAmB,EAAE,OAAO,CAAC,wBAAwB,CAAC;IAgBxD,MAAM,KAAK,mBAAmB,6BAM7B;CACF"}
|
package/route/route.js
CHANGED
|
@@ -1,24 +1,32 @@
|
|
|
1
1
|
import { computed, makeObservable } from 'mobx';
|
|
2
|
-
import { MobxHistory, MobxLocation, } from 'mobx-location-history';
|
|
2
|
+
import { buildSearchString, MobxHistory, MobxLocation, QueryParams, } from 'mobx-location-history';
|
|
3
3
|
import { compile, match, parse } from 'path-to-regexp';
|
|
4
4
|
export class Route {
|
|
5
5
|
path;
|
|
6
|
-
|
|
6
|
+
config;
|
|
7
7
|
history;
|
|
8
8
|
location;
|
|
9
|
+
query;
|
|
9
10
|
_tokenData;
|
|
10
|
-
constructor(path,
|
|
11
|
+
constructor(path, config = {}) {
|
|
11
12
|
this.path = path;
|
|
12
|
-
this.
|
|
13
|
-
this.history =
|
|
14
|
-
this.location =
|
|
15
|
-
|
|
13
|
+
this.config = config;
|
|
14
|
+
this.history = config.history ?? Route.globalConfiguration.history;
|
|
15
|
+
this.location = config.location ?? Route.globalConfiguration.location;
|
|
16
|
+
this.query = config.queryParams ?? Route.globalConfiguration.queryParams;
|
|
16
17
|
computed.struct(this, 'isMatches');
|
|
17
18
|
computed.struct(this, 'matchData');
|
|
18
19
|
makeObservable(this);
|
|
19
20
|
}
|
|
20
21
|
get matchData() {
|
|
21
|
-
|
|
22
|
+
let pathname = this.location.pathname;
|
|
23
|
+
if (this.baseUrl) {
|
|
24
|
+
if (!pathname.startsWith(this.baseUrl)) {
|
|
25
|
+
return null;
|
|
26
|
+
}
|
|
27
|
+
pathname = pathname.replace(this.baseUrl, '');
|
|
28
|
+
}
|
|
29
|
+
const parsed = match(this.tokenData)(pathname);
|
|
22
30
|
if (parsed === false) {
|
|
23
31
|
return null;
|
|
24
32
|
}
|
|
@@ -27,8 +35,12 @@ export class Route {
|
|
|
27
35
|
get isMatches() {
|
|
28
36
|
return this.matchData !== null;
|
|
29
37
|
}
|
|
30
|
-
extend(path) {
|
|
31
|
-
return new Route(`${this.path}${path}`,
|
|
38
|
+
extend(path, config) {
|
|
39
|
+
return new Route(`${this.path}${path}`, {
|
|
40
|
+
...this.config,
|
|
41
|
+
...config,
|
|
42
|
+
parent: this,
|
|
43
|
+
});
|
|
32
44
|
}
|
|
33
45
|
processParams(params) {
|
|
34
46
|
if (params == null)
|
|
@@ -40,33 +52,53 @@ export class Route {
|
|
|
40
52
|
return acc;
|
|
41
53
|
}, {});
|
|
42
54
|
}
|
|
55
|
+
get baseUrl() {
|
|
56
|
+
return !this.config.baseUrl || this.config.baseUrl === '/'
|
|
57
|
+
? ''
|
|
58
|
+
: this.config.baseUrl;
|
|
59
|
+
}
|
|
60
|
+
createUrl(...args) {
|
|
61
|
+
const pathParams = args[0];
|
|
62
|
+
const queryParams = args[1];
|
|
63
|
+
const path = compile(this.tokenData)(this.processParams(pathParams));
|
|
64
|
+
return [
|
|
65
|
+
this.baseUrl,
|
|
66
|
+
// type === 'hash' ? '#' : '',
|
|
67
|
+
path,
|
|
68
|
+
buildSearchString(queryParams || {}),
|
|
69
|
+
].join('');
|
|
70
|
+
}
|
|
43
71
|
navigate(...args) {
|
|
44
|
-
|
|
72
|
+
// @ts-expect-error no way to handle typigns here
|
|
73
|
+
const url = this.createUrl(args[0], args[1]?.query);
|
|
45
74
|
if (args[1]?.replace) {
|
|
46
|
-
this.history.replaceState(null, '',
|
|
75
|
+
this.history.replaceState(null, '', url);
|
|
47
76
|
}
|
|
48
77
|
else {
|
|
49
|
-
this.history.pushState(null, '',
|
|
78
|
+
this.history.pushState(null, '', url);
|
|
50
79
|
}
|
|
51
80
|
}
|
|
52
81
|
get tokenData() {
|
|
53
82
|
if (!this._tokenData) {
|
|
54
|
-
this._tokenData = parse(this.path, this.
|
|
83
|
+
this._tokenData = parse(this.path, this.config.parseOptions);
|
|
55
84
|
}
|
|
56
85
|
return this._tokenData;
|
|
57
86
|
}
|
|
58
87
|
static _globalConfiguration;
|
|
59
88
|
static setGlobalConfiguration(globalConfiguration) {
|
|
60
|
-
|
|
89
|
+
const history = globalConfiguration.history ?? new MobxHistory();
|
|
90
|
+
const location = globalConfiguration.location ?? new MobxLocation(history);
|
|
91
|
+
const queryParams = globalConfiguration.queryParams ?? new QueryParams(location, history);
|
|
92
|
+
const config = {
|
|
93
|
+
history,
|
|
94
|
+
location,
|
|
95
|
+
queryParams,
|
|
96
|
+
};
|
|
97
|
+
this._globalConfiguration = config;
|
|
61
98
|
}
|
|
62
99
|
static get globalConfiguration() {
|
|
63
100
|
if (!this._globalConfiguration) {
|
|
64
|
-
|
|
65
|
-
const location = new MobxLocation(history);
|
|
66
|
-
this.setGlobalConfiguration({
|
|
67
|
-
location,
|
|
68
|
-
history,
|
|
69
|
-
});
|
|
101
|
+
this.setGlobalConfiguration({});
|
|
70
102
|
}
|
|
71
103
|
return this._globalConfiguration;
|
|
72
104
|
}
|
package/route/route.test.js
CHANGED
|
@@ -27,6 +27,10 @@ describe('route', () => {
|
|
|
27
27
|
beforeEach(() => {
|
|
28
28
|
history.resetMocks();
|
|
29
29
|
});
|
|
30
|
+
it('empty string', () => {
|
|
31
|
+
const route = new Route('');
|
|
32
|
+
expect(route.isMatches).toBe(true);
|
|
33
|
+
});
|
|
30
34
|
it('/test', () => {
|
|
31
35
|
const route = new Route('/test');
|
|
32
36
|
route.navigate();
|
|
@@ -83,4 +87,27 @@ describe('route', () => {
|
|
|
83
87
|
},
|
|
84
88
|
});
|
|
85
89
|
});
|
|
90
|
+
it('/test/:id/:bar + baseUrl + query params', () => {
|
|
91
|
+
const route = new Route('/test/:id/:bar', { baseUrl: '/mobx-view-model' });
|
|
92
|
+
route.navigate({
|
|
93
|
+
id: 1,
|
|
94
|
+
bar: 'barg',
|
|
95
|
+
}, {
|
|
96
|
+
query: { a: 1 },
|
|
97
|
+
});
|
|
98
|
+
expect(history.pushStateSpy).toBeCalledWith(null, '', '/mobx-view-model/test/1/barg?a=1');
|
|
99
|
+
expect(route.isMatches).toBe(true);
|
|
100
|
+
});
|
|
101
|
+
it('/test/:id/:bar + baseUrl + query params + (query params tests)', () => {
|
|
102
|
+
const route = new Route('/test/:id/:bar', { baseUrl: '/mobx-view-model' });
|
|
103
|
+
route.navigate({
|
|
104
|
+
id: 1,
|
|
105
|
+
bar: 'barg',
|
|
106
|
+
}, {
|
|
107
|
+
query: { a: 1 },
|
|
108
|
+
});
|
|
109
|
+
route.query.update({ a: 3, b: [1, 2, 3] });
|
|
110
|
+
expect(location.search).toBe('?a=3&b=1%2C2%2C3');
|
|
111
|
+
expect(route.query.data).toEqual({ a: '3', b: '1,2,3' });
|
|
112
|
+
});
|
|
86
113
|
});
|
package/route/route.types.d.ts
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
import { IMobxHistory, IMobxLocation } from 'mobx-location-history';
|
|
1
|
+
import { IMobxHistory, IMobxLocation, IQueryParams } from 'mobx-location-history';
|
|
2
2
|
import { ParseOptions } from 'path-to-regexp';
|
|
3
3
|
import type { Route } from './route.js';
|
|
4
4
|
export interface RouteGlobalConfiguration {
|
|
5
5
|
history: IMobxHistory;
|
|
6
6
|
location: IMobxLocation;
|
|
7
|
+
queryParams: IQueryParams;
|
|
7
8
|
}
|
|
8
9
|
export interface RouteConfiguration<TParentRoute extends AnyRoute | null = null> extends Partial<RouteGlobalConfiguration> {
|
|
10
|
+
baseUrl?: string;
|
|
9
11
|
meta?: Record<string, any>;
|
|
10
12
|
parseOptions?: ParseOptions;
|
|
11
13
|
parent?: TParentRoute;
|
|
@@ -32,6 +34,7 @@ export type ExtractPathParams<Path extends string> = Simplify<Path extends `${in
|
|
|
32
34
|
} : {}>;
|
|
33
35
|
export interface RouteNavigateParams {
|
|
34
36
|
replace?: boolean;
|
|
37
|
+
query?: Record<string, any>;
|
|
35
38
|
}
|
|
36
39
|
export interface RouteMatchesData<TPath extends string> {
|
|
37
40
|
path: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"route.types.d.ts","sourceRoot":"","sources":["../../src/route/route.types.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"route.types.d.ts","sourceRoot":"","sources":["../../src/route/route.types.ts"],"names":[],"mappings":"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"}
|