reactive-route 0.0.1-alpha.1 → 0.0.1-alpha.11
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/dist/cjs/adapters/kr-observable/index.js +40 -0
- package/dist/cjs/adapters/kr-observable/package.json +1 -0
- package/dist/cjs/adapters/mobx/index.js +44 -0
- package/dist/cjs/adapters/mobx/package.json +1 -0
- package/dist/cjs/adapters/solid/index.js +46 -0
- package/dist/cjs/adapters/solid/package.json +1 -0
- package/dist/cjs/index.js +68 -54
- package/dist/cjs/react/index.js +56 -98
- package/dist/cjs/solid/index.js +38 -97
- package/dist/esm/adapters/kr-observable/index.js +19 -0
- package/dist/esm/adapters/kr-observable/package.json +1 -0
- package/dist/esm/adapters/mobx/index.js +23 -0
- package/dist/esm/adapters/mobx/package.json +1 -0
- package/dist/esm/adapters/solid/index.js +25 -0
- package/dist/esm/adapters/solid/package.json +1 -0
- package/dist/esm/index.js +68 -54
- package/dist/esm/react/index.js +56 -98
- package/dist/esm/solid/index.js +37 -96
- package/dist/types/adapters/kr-observable.d.ts +3 -0
- package/dist/types/adapters/kr-observable.d.ts.map +1 -0
- package/dist/types/adapters/mobx.d.ts +3 -0
- package/dist/types/adapters/mobx.d.ts.map +1 -0
- package/dist/types/adapters/solid.d.ts +3 -0
- package/dist/types/adapters/solid.d.ts.map +1 -0
- package/dist/types/core/createRouterConfig.d.ts +2 -6
- package/dist/types/core/createRouterConfig.d.ts.map +1 -1
- package/dist/types/core/createRouterStore.d.ts +2 -11
- package/dist/types/core/createRouterStore.d.ts.map +1 -1
- package/dist/types/core/index.d.ts +2 -1
- package/dist/types/core/index.d.ts.map +1 -1
- package/dist/types/core/types/InterfaceRouterStore.d.ts +22 -1
- package/dist/types/core/types/InterfaceRouterStore.d.ts.map +1 -1
- package/dist/types/core/types/TypeLifecycleConfig.d.ts +13 -0
- package/dist/types/core/types/TypeLifecycleConfig.d.ts.map +1 -0
- package/dist/types/core/types/TypePropsRouter.d.ts +10 -0
- package/dist/types/core/types/TypePropsRouter.d.ts.map +1 -0
- package/dist/types/core/types/TypeRouteRaw.d.ts +3 -24
- package/dist/types/core/types/TypeRouteRaw.d.ts.map +1 -1
- package/dist/types/react/Router.d.ts +3 -11
- package/dist/types/react/Router.d.ts.map +1 -1
- package/dist/types/solid/Router.d.ts +2 -10
- package/dist/types/solid/Router.d.ts.map +1 -1
- package/dist/types/tsconfig.types.react.tsbuildinfo +1 -0
- package/dist/types/tsconfig.types.solid.tsbuildinfo +1 -0
- package/package.json +48 -21
- package/tsconfig.solid.json +9 -0
- package/tsconfig.types.react.json +11 -0
- package/tsconfig.types.solid.json +14 -0
- package/dist/types/react/useStore.d.ts +0 -8
- package/dist/types/react/useStore.d.ts.map +0 -1
- package/dist/types/solid/replaceObject.d.ts +0 -2
- package/dist/types/solid/replaceObject.d.ts.map +0 -1
- package/dist/types/solid/useStore.d.ts +0 -7
- package/dist/types/solid/useStore.d.ts.map +0 -1
- package/dist/types/tsconfig.types.tsbuildinfo +0 -1
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
// packages/adapters/kr-observable.ts
|
|
2
|
+
import { autorun, makeObservable } from "kr-observable";
|
|
3
|
+
import { observer } from "kr-observable/react";
|
|
4
|
+
var adapters = {
|
|
5
|
+
batch: (cb) => cb(),
|
|
6
|
+
autorun,
|
|
7
|
+
replaceObject: (obj, newObj) => {
|
|
8
|
+
for (const variableKey in obj) {
|
|
9
|
+
delete obj[variableKey];
|
|
10
|
+
}
|
|
11
|
+
Object.assign(obj, newObj);
|
|
12
|
+
},
|
|
13
|
+
makeObservable,
|
|
14
|
+
makeAutoObservable: makeObservable,
|
|
15
|
+
observer
|
|
16
|
+
};
|
|
17
|
+
export {
|
|
18
|
+
adapters
|
|
19
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"type": "module"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
// packages/adapters/mobx.ts
|
|
2
|
+
import { autorun, makeAutoObservable, observable, runInAction } from "mobx";
|
|
3
|
+
import { observer } from "mobx-react-lite";
|
|
4
|
+
var adapters = {
|
|
5
|
+
batch: runInAction,
|
|
6
|
+
autorun,
|
|
7
|
+
observer,
|
|
8
|
+
replaceObject: (obj, newObj) => {
|
|
9
|
+
runInAction(() => {
|
|
10
|
+
for (const variableKey in obj) {
|
|
11
|
+
if (obj.hasOwnProperty(variableKey)) {
|
|
12
|
+
delete obj[variableKey];
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
Object.assign(obj, newObj);
|
|
16
|
+
});
|
|
17
|
+
},
|
|
18
|
+
makeObservable: observable,
|
|
19
|
+
makeAutoObservable
|
|
20
|
+
};
|
|
21
|
+
export {
|
|
22
|
+
adapters
|
|
23
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"type": "module"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
// packages/adapters/solid.ts
|
|
2
|
+
import { batch, createRenderEffect } from "solid-js";
|
|
3
|
+
import { createMutable, modifyMutable, produce } from "solid-js/store";
|
|
4
|
+
var adapters = {
|
|
5
|
+
batch,
|
|
6
|
+
autorun: createRenderEffect,
|
|
7
|
+
replaceObject: (obj, newObj) => {
|
|
8
|
+
modifyMutable(
|
|
9
|
+
obj,
|
|
10
|
+
produce((state) => {
|
|
11
|
+
if (typeof state === "object" && state != null) {
|
|
12
|
+
for (const variableKey in state) {
|
|
13
|
+
delete state[variableKey];
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
Object.assign(state || {}, newObj);
|
|
17
|
+
})
|
|
18
|
+
);
|
|
19
|
+
},
|
|
20
|
+
makeObservable: createMutable,
|
|
21
|
+
makeAutoObservable: createMutable
|
|
22
|
+
};
|
|
23
|
+
export {
|
|
24
|
+
adapters
|
|
25
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"type": "module"}
|
package/dist/esm/index.js
CHANGED
|
@@ -47,6 +47,37 @@ function getDynamicValues(params) {
|
|
|
47
47
|
return dynamicParams;
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
+
// packages/core/utils/findRouteByPathname.ts
|
|
51
|
+
function completeStaticMatch(pathname, path) {
|
|
52
|
+
return !path.includes(constants.dynamicSeparator) && (pathname === path || pathname === `${path}${constants.pathPartSeparator}`);
|
|
53
|
+
}
|
|
54
|
+
function findRouteByPathname({
|
|
55
|
+
pathname,
|
|
56
|
+
routes
|
|
57
|
+
}) {
|
|
58
|
+
let dynamicRouteMatch;
|
|
59
|
+
const pathnameArray = pathname.replace(/\?.+$/, "").split(constants.pathPartSeparator).filter(Boolean);
|
|
60
|
+
for (const routeName in routes) {
|
|
61
|
+
if (!Object.hasOwn(routes, routeName)) continue;
|
|
62
|
+
const route = routes[routeName];
|
|
63
|
+
if (completeStaticMatch(pathname, route.path)) return route;
|
|
64
|
+
if (dynamicRouteMatch) continue;
|
|
65
|
+
const routePathnameArray = route.path.split(constants.pathPartSeparator).filter(Boolean);
|
|
66
|
+
if (routePathnameArray.length !== pathnameArray.length) continue;
|
|
67
|
+
const someParamInvalid = routePathnameArray.some((paramName, i) => {
|
|
68
|
+
const paramFromUrl = pathnameArray[i];
|
|
69
|
+
if (!isDynamic(paramName)) return paramName !== paramFromUrl;
|
|
70
|
+
const validator = route.params?.[clearDynamic(paramName)];
|
|
71
|
+
if (typeof validator !== "function") {
|
|
72
|
+
throw new Error(`findRoute: missing validator for param "${paramName}"`);
|
|
73
|
+
}
|
|
74
|
+
return !validator(paramFromUrl);
|
|
75
|
+
});
|
|
76
|
+
if (!someParamInvalid) dynamicRouteMatch = route;
|
|
77
|
+
}
|
|
78
|
+
return dynamicRouteMatch;
|
|
79
|
+
}
|
|
80
|
+
|
|
50
81
|
// packages/core/utils/getQueryValues.ts
|
|
51
82
|
import queryString from "query-string";
|
|
52
83
|
|
|
@@ -68,6 +99,16 @@ function getQueryValues(params) {
|
|
|
68
99
|
return query;
|
|
69
100
|
}
|
|
70
101
|
|
|
102
|
+
// packages/core/utils/getInitialRoute.ts
|
|
103
|
+
function getInitialRoute(params) {
|
|
104
|
+
const route = findRouteByPathname({ pathname: params.pathname, routes: params.routes }) || params.routes[params.fallback];
|
|
105
|
+
return {
|
|
106
|
+
route: route.name,
|
|
107
|
+
query: getQueryValues({ route, pathname: params.pathname }),
|
|
108
|
+
params: getDynamicValues({ route, pathname: params.pathname })
|
|
109
|
+
};
|
|
110
|
+
}
|
|
111
|
+
|
|
71
112
|
// packages/core/utils/history.ts
|
|
72
113
|
import { createBrowserHistory } from "history";
|
|
73
114
|
var history = constants.isClient ? createBrowserHistory() : null;
|
|
@@ -107,19 +148,33 @@ function replaceDynamicValues({
|
|
|
107
148
|
|
|
108
149
|
// packages/core/createRouterStore.ts
|
|
109
150
|
function createRouterStore({
|
|
110
|
-
|
|
151
|
+
adapters,
|
|
111
152
|
routes,
|
|
112
153
|
routeError500,
|
|
113
|
-
|
|
114
|
-
lifecycleParams,
|
|
115
|
-
replaceObject
|
|
154
|
+
lifecycleParams
|
|
116
155
|
}) {
|
|
117
|
-
const routerStore = makeObservable({
|
|
156
|
+
const routerStore = adapters.makeObservable({
|
|
118
157
|
routesHistory: [],
|
|
119
158
|
currentRoute: {},
|
|
120
159
|
isRedirecting: false,
|
|
121
|
-
redirectTo: void 0
|
|
160
|
+
redirectTo: void 0,
|
|
161
|
+
restoreFromURL: void 0,
|
|
162
|
+
restoreFromServer: void 0,
|
|
163
|
+
adapters
|
|
122
164
|
});
|
|
165
|
+
routerStore.restoreFromServer = function restoreFromServer(obj) {
|
|
166
|
+
adapters.batch(() => {
|
|
167
|
+
routerStore.routesHistory.push(...obj.routesHistory || []);
|
|
168
|
+
Object.assign(routerStore.currentRoute, obj.currentRoute);
|
|
169
|
+
});
|
|
170
|
+
const preloadedRouteName = Object.keys(routes).find(
|
|
171
|
+
(routeName) => routerStore.currentRoute.name === routeName
|
|
172
|
+
);
|
|
173
|
+
return loadComponentToConfig({ route: routes[preloadedRouteName] });
|
|
174
|
+
};
|
|
175
|
+
routerStore.restoreFromURL = function restoreFromURL(params) {
|
|
176
|
+
return routerStore.redirectTo(getInitialRoute({ routes, ...params }));
|
|
177
|
+
};
|
|
123
178
|
routerStore.redirectTo = async function redirectTo(config) {
|
|
124
179
|
const { route: routeName, noHistoryPush, asClient } = config;
|
|
125
180
|
const isClient = typeof asClient === "boolean" ? asClient : constants.isClient;
|
|
@@ -163,8 +218,8 @@ function createRouterStore({
|
|
|
163
218
|
if (currentUrl === nextUrl) return Promise.resolve();
|
|
164
219
|
if (currentPathname === nextPathname) {
|
|
165
220
|
if (currentSearch !== nextSearch) {
|
|
166
|
-
batch(() => {
|
|
167
|
-
replaceObject(routerStore.currentRoute.query, nextQuery || {});
|
|
221
|
+
adapters.batch(() => {
|
|
222
|
+
adapters.replaceObject(routerStore.currentRoute.query, nextQuery || {});
|
|
168
223
|
routerStore.routesHistory.push(nextUrl);
|
|
169
224
|
});
|
|
170
225
|
if (history && !noHistoryPush) {
|
|
@@ -177,7 +232,7 @@ function createRouterStore({
|
|
|
177
232
|
}
|
|
178
233
|
return Promise.resolve();
|
|
179
234
|
}
|
|
180
|
-
batch(() => {
|
|
235
|
+
adapters.batch(() => {
|
|
181
236
|
routerStore.isRedirecting = true;
|
|
182
237
|
});
|
|
183
238
|
try {
|
|
@@ -238,8 +293,8 @@ function createRouterStore({
|
|
|
238
293
|
}
|
|
239
294
|
console.error(error);
|
|
240
295
|
await loadComponentToConfig({ route: routeError500 });
|
|
241
|
-
batch(() => {
|
|
242
|
-
replaceObject(routerStore.currentRoute, {
|
|
296
|
+
adapters.batch(() => {
|
|
297
|
+
adapters.replaceObject(routerStore.currentRoute, {
|
|
243
298
|
name: routeError500.name,
|
|
244
299
|
path: routeError500.path,
|
|
245
300
|
props: routes[routeError500.name].props,
|
|
@@ -251,8 +306,8 @@ function createRouterStore({
|
|
|
251
306
|
});
|
|
252
307
|
return Promise.resolve();
|
|
253
308
|
}
|
|
254
|
-
batch(() => {
|
|
255
|
-
replaceObject(routerStore.currentRoute, {
|
|
309
|
+
adapters.batch(() => {
|
|
310
|
+
adapters.replaceObject(routerStore.currentRoute, {
|
|
256
311
|
name: nextRoute.name,
|
|
257
312
|
path: nextRoute.path,
|
|
258
313
|
props: routes[nextRoute.name].props,
|
|
@@ -277,47 +332,6 @@ function createRouterStore({
|
|
|
277
332
|
};
|
|
278
333
|
return routerStore;
|
|
279
334
|
}
|
|
280
|
-
|
|
281
|
-
// packages/core/utils/findRouteByPathname.ts
|
|
282
|
-
function completeStaticMatch(pathname, path) {
|
|
283
|
-
return !path.includes(constants.dynamicSeparator) && (pathname === path || pathname === `${path}${constants.pathPartSeparator}`);
|
|
284
|
-
}
|
|
285
|
-
function findRouteByPathname({
|
|
286
|
-
pathname,
|
|
287
|
-
routes
|
|
288
|
-
}) {
|
|
289
|
-
let dynamicRouteMatch;
|
|
290
|
-
const pathnameArray = pathname.replace(/\?.+$/, "").split(constants.pathPartSeparator).filter(Boolean);
|
|
291
|
-
for (const routeName in routes) {
|
|
292
|
-
if (!Object.hasOwn(routes, routeName)) continue;
|
|
293
|
-
const route = routes[routeName];
|
|
294
|
-
if (completeStaticMatch(pathname, route.path)) return route;
|
|
295
|
-
if (dynamicRouteMatch) continue;
|
|
296
|
-
const routePathnameArray = route.path.split(constants.pathPartSeparator).filter(Boolean);
|
|
297
|
-
if (routePathnameArray.length !== pathnameArray.length) continue;
|
|
298
|
-
const someParamInvalid = routePathnameArray.some((paramName, i) => {
|
|
299
|
-
const paramFromUrl = pathnameArray[i];
|
|
300
|
-
if (!isDynamic(paramName)) return paramName !== paramFromUrl;
|
|
301
|
-
const validator = route.params?.[clearDynamic(paramName)];
|
|
302
|
-
if (typeof validator !== "function") {
|
|
303
|
-
throw new Error(`findRoute: missing validator for param "${paramName}"`);
|
|
304
|
-
}
|
|
305
|
-
return !validator(paramFromUrl);
|
|
306
|
-
});
|
|
307
|
-
if (!someParamInvalid) dynamicRouteMatch = route;
|
|
308
|
-
}
|
|
309
|
-
return dynamicRouteMatch;
|
|
310
|
-
}
|
|
311
|
-
|
|
312
|
-
// packages/core/utils/getInitialRoute.ts
|
|
313
|
-
function getInitialRoute(params) {
|
|
314
|
-
const route = findRouteByPathname({ pathname: params.pathname, routes: params.routes }) || params.routes[params.fallback];
|
|
315
|
-
return {
|
|
316
|
-
route: route.name,
|
|
317
|
-
query: getQueryValues({ route, pathname: params.pathname }),
|
|
318
|
-
params: getDynamicValues({ route, pathname: params.pathname })
|
|
319
|
-
};
|
|
320
|
-
}
|
|
321
335
|
export {
|
|
322
336
|
createRouterConfig,
|
|
323
337
|
createRouterStore,
|
package/dist/esm/react/index.js
CHANGED
|
@@ -1,125 +1,83 @@
|
|
|
1
1
|
// packages/react/Router.tsx
|
|
2
|
-
import {
|
|
3
|
-
import { observer } from "mobx-react-lite";
|
|
2
|
+
import { memo, useCallback, useEffect, useRef, useState } from "react";
|
|
4
3
|
import { getInitialRoute, history } from "reactive-route";
|
|
5
|
-
|
|
6
|
-
// packages/react/useStore.ts
|
|
7
|
-
import { runInAction } from "mobx";
|
|
8
|
-
import { useEffect, useRef, useState } from "react";
|
|
9
|
-
function useStore(ViewModel, props) {
|
|
10
|
-
const isFirstRenderRef = useRef(true);
|
|
11
|
-
const [vm] = useState(() => {
|
|
12
|
-
const instance = new ViewModel(props || {});
|
|
13
|
-
runInAction(() => {
|
|
14
|
-
instance.beforeMount?.();
|
|
15
|
-
});
|
|
16
|
-
return instance;
|
|
17
|
-
});
|
|
18
|
-
useEffect(() => {
|
|
19
|
-
if (isFirstRenderRef.current) {
|
|
20
|
-
isFirstRenderRef.current = false;
|
|
21
|
-
} else if (props) {
|
|
22
|
-
runInAction(() => {
|
|
23
|
-
vm.props = props || {};
|
|
24
|
-
});
|
|
25
|
-
}
|
|
26
|
-
}, [props]);
|
|
27
|
-
useEffect(() => {
|
|
28
|
-
vm.afterMount?.();
|
|
29
|
-
return () => {
|
|
30
|
-
vm.autorunDisposers?.forEach((disposer) => disposer());
|
|
31
|
-
};
|
|
32
|
-
}, []);
|
|
33
|
-
return vm;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
// packages/react/Router.tsx
|
|
37
4
|
import { jsx } from "react/jsx-runtime";
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
makeAutoObservable(
|
|
42
|
-
this,
|
|
43
|
-
{ loadedComponent: false, setLoadedComponent: false, props: false },
|
|
44
|
-
{ autoBind: true }
|
|
45
|
-
);
|
|
46
|
-
}
|
|
47
|
-
autorunDisposers = [];
|
|
48
|
-
loadedComponentName = void 0;
|
|
49
|
-
loadedComponentPage = void 0;
|
|
50
|
-
loadedComponent;
|
|
51
|
-
currentProps = {};
|
|
52
|
-
beforeMount() {
|
|
53
|
-
this.props.beforeMount?.();
|
|
54
|
-
this.redirectOnHistoryPop();
|
|
55
|
-
this.setLoadedComponent();
|
|
56
|
-
this.autorunDisposers.push(autorun(this.setLoadedComponent));
|
|
57
|
-
}
|
|
58
|
-
redirectOnHistoryPop() {
|
|
5
|
+
function RouterInner(props) {
|
|
6
|
+
const disposerRef = useRef(null);
|
|
7
|
+
const redirectOnHistoryPop = useCallback(() => {
|
|
59
8
|
if (!history) return;
|
|
60
9
|
history.listen((params) => {
|
|
61
10
|
if (params.action !== "POP") return;
|
|
62
|
-
const previousRoutePathname =
|
|
11
|
+
const previousRoutePathname = props.routerStore.routesHistory[props.routerStore.routesHistory.length - 2];
|
|
63
12
|
if (previousRoutePathname === params.location.pathname) {
|
|
64
|
-
|
|
13
|
+
props.routerStore.adapters.batch(() => props.routerStore.routesHistory.pop());
|
|
65
14
|
}
|
|
66
|
-
void
|
|
15
|
+
void props.routerStore.redirectTo({
|
|
67
16
|
noHistoryPush: true,
|
|
68
17
|
...getInitialRoute({
|
|
69
|
-
routes:
|
|
18
|
+
routes: props.routes,
|
|
70
19
|
pathname: history.location.pathname,
|
|
71
20
|
fallback: "error404"
|
|
72
21
|
})
|
|
73
22
|
});
|
|
74
23
|
});
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
24
|
+
}, []);
|
|
25
|
+
const [config] = useState(
|
|
26
|
+
() => props.routerStore.adapters.makeObservable({
|
|
27
|
+
loadedComponentName: void 0,
|
|
28
|
+
loadedComponentPage: void 0,
|
|
29
|
+
currentProps: {}
|
|
30
|
+
})
|
|
31
|
+
);
|
|
32
|
+
const setLoadedComponent = useCallback(() => {
|
|
33
|
+
const { loadedComponentName, loadedComponentPage } = config;
|
|
34
|
+
const { currentRoute, isRedirecting } = props.routerStore;
|
|
35
|
+
const componentConfig = props.routes[currentRoute.name];
|
|
81
36
|
let preventRedirect = false;
|
|
82
37
|
if (isRedirecting) preventRedirect = true;
|
|
83
|
-
else if (loadedComponentName ===
|
|
84
|
-
else if (loadedComponentPage != null &&
|
|
85
|
-
if (loadedComponentPage ===
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
38
|
+
else if (loadedComponentName === currentRoute.name) preventRedirect = true;
|
|
39
|
+
else if (loadedComponentPage != null && currentRoute.name != null) {
|
|
40
|
+
if (loadedComponentPage === currentRoute.pageName) {
|
|
41
|
+
props.routerStore.adapters.batch(() => {
|
|
42
|
+
config.currentProps = "props" in componentConfig ? componentConfig.props || {} : {};
|
|
43
|
+
config[Symbol.for("$adm")]?.batch();
|
|
89
44
|
});
|
|
90
45
|
preventRedirect = true;
|
|
91
46
|
}
|
|
92
47
|
}
|
|
93
48
|
if (preventRedirect) return;
|
|
94
|
-
|
|
95
|
-
if (
|
|
96
|
-
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
49
|
+
props.routerStore.adapters.batch(() => {
|
|
50
|
+
if (loadedComponentName) props.beforeUpdatePageComponent?.();
|
|
51
|
+
props.beforeSetPageComponent?.(componentConfig);
|
|
52
|
+
config.currentProps = "props" in componentConfig ? componentConfig.props || {} : {};
|
|
53
|
+
config.loadedComponentName = currentRoute.name;
|
|
54
|
+
config.loadedComponentPage = componentConfig.pageName;
|
|
55
|
+
config[Symbol.for("$adm")]?.batch();
|
|
101
56
|
});
|
|
102
|
-
};
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
this.loadedComponentName = currentRouteName;
|
|
110
|
-
this.loadedComponentPage = componentConfig.pageName;
|
|
111
|
-
this.loadedComponent = RouteComponent;
|
|
57
|
+
}, []);
|
|
58
|
+
useState(() => {
|
|
59
|
+
props.routerStore.adapters.batch(() => {
|
|
60
|
+
props.beforeMount?.();
|
|
61
|
+
redirectOnHistoryPop();
|
|
62
|
+
setLoadedComponent();
|
|
63
|
+
disposerRef.current = props.routerStore.adapters.autorun(setLoadedComponent);
|
|
112
64
|
});
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
}
|
|
122
|
-
|
|
65
|
+
});
|
|
66
|
+
useEffect(() => {
|
|
67
|
+
return () => {
|
|
68
|
+
disposerRef.current?.();
|
|
69
|
+
};
|
|
70
|
+
}, []);
|
|
71
|
+
if (!config.loadedComponentName) return null;
|
|
72
|
+
const LoadedComponent = props.routes[config.loadedComponentName]?.component || null;
|
|
73
|
+
if (LoadedComponent) return /* @__PURE__ */ jsx(LoadedComponent, { ...config.currentProps });
|
|
74
|
+
return null;
|
|
75
|
+
}
|
|
76
|
+
function RouterWrapper(props) {
|
|
77
|
+
const Component = props.routerStore.adapters.observer ? props.routerStore.adapters.observer(RouterInner) : RouterInner;
|
|
78
|
+
return /* @__PURE__ */ jsx(Component, { ...props });
|
|
79
|
+
}
|
|
80
|
+
var Router = memo(RouterWrapper);
|
|
123
81
|
export {
|
|
124
82
|
Router
|
|
125
83
|
};
|
package/dist/esm/solid/index.js
CHANGED
|
@@ -2,133 +2,74 @@
|
|
|
2
2
|
import { createComponent as _$createComponent } from "solid-js/web";
|
|
3
3
|
import { mergeProps as _$mergeProps } from "solid-js/web";
|
|
4
4
|
import { getInitialRoute, history } from "reactive-route";
|
|
5
|
-
import {
|
|
6
|
-
import { createMutable } from "solid-js/store";
|
|
5
|
+
import { Show } from "solid-js";
|
|
7
6
|
import { Dynamic } from "solid-js/web";
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
if (typeof state === "object" && state != null) {
|
|
14
|
-
for (const variableKey in state) {
|
|
15
|
-
delete state[variableKey];
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
Object.assign(state || {}, newObj);
|
|
19
|
-
}));
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
// packages/solid/useStore.ts
|
|
23
|
-
import { onMount } from "solid-js";
|
|
24
|
-
var getAllProperties = (object) => {
|
|
25
|
-
const properties = /* @__PURE__ */ new Set();
|
|
26
|
-
do {
|
|
27
|
-
for (const key of Reflect.ownKeys(object)) {
|
|
28
|
-
properties.add([object, key]);
|
|
29
|
-
}
|
|
30
|
-
} while ((object = Reflect.getPrototypeOf(object)) && object !== Object.prototype);
|
|
31
|
-
return properties;
|
|
32
|
-
};
|
|
33
|
-
function autoBind(self) {
|
|
34
|
-
for (const [object, key] of getAllProperties(self.constructor.prototype)) {
|
|
35
|
-
if (key === "constructor") continue;
|
|
36
|
-
const descriptor = Reflect.getOwnPropertyDescriptor(object, key);
|
|
37
|
-
if (descriptor && typeof descriptor.value === "function") {
|
|
38
|
-
self[key] = self[key].bind(self);
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
return self;
|
|
42
|
-
}
|
|
43
|
-
function useStore(ViewModel, props) {
|
|
44
|
-
const vm = new ViewModel(props);
|
|
45
|
-
autoBind(vm);
|
|
46
|
-
vm.beforeMount?.();
|
|
47
|
-
onMount(() => {
|
|
48
|
-
vm.afterMount?.();
|
|
7
|
+
function Router(props) {
|
|
8
|
+
const config = props.routerStore.adapters.makeObservable({
|
|
9
|
+
loadedComponentName: void 0,
|
|
10
|
+
loadedComponentPage: void 0,
|
|
11
|
+
currentProps: {}
|
|
49
12
|
});
|
|
50
|
-
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
// packages/solid/Router.tsx
|
|
54
|
-
var VM = class {
|
|
55
|
-
constructor(props) {
|
|
56
|
-
this.props = props;
|
|
57
|
-
return createMutable(this);
|
|
58
|
-
}
|
|
59
|
-
loadedComponentName = void 0;
|
|
60
|
-
loadedComponentPage = void 0;
|
|
61
|
-
currentProps = {};
|
|
62
|
-
beforeMount() {
|
|
63
|
-
this.props.beforeMount?.();
|
|
64
|
-
this.redirectOnHistoryPop();
|
|
65
|
-
createRenderEffect(() => this.setLoadedComponent());
|
|
66
|
-
}
|
|
67
|
-
redirectOnHistoryPop() {
|
|
13
|
+
function redirectOnHistoryPop() {
|
|
68
14
|
if (!history) return;
|
|
69
15
|
history.listen((params) => {
|
|
70
16
|
if (params.action !== "POP") return;
|
|
71
|
-
const previousRoutePathname =
|
|
17
|
+
const previousRoutePathname = props.routerStore.routesHistory[props.routerStore.routesHistory.length - 2];
|
|
72
18
|
if (previousRoutePathname === params.location.pathname) {
|
|
73
|
-
|
|
19
|
+
props.routerStore.routesHistory.pop();
|
|
74
20
|
}
|
|
75
|
-
void
|
|
21
|
+
void props.routerStore.redirectTo({
|
|
76
22
|
noHistoryPush: true,
|
|
77
23
|
...getInitialRoute({
|
|
78
|
-
routes:
|
|
24
|
+
routes: props.routes,
|
|
79
25
|
pathname: history.location.pathname,
|
|
80
26
|
fallback: "error404"
|
|
81
27
|
})
|
|
82
28
|
});
|
|
83
29
|
});
|
|
84
30
|
}
|
|
85
|
-
setLoadedComponent() {
|
|
86
|
-
const currentRouteName =
|
|
87
|
-
const currentRoutePage =
|
|
31
|
+
function setLoadedComponent() {
|
|
32
|
+
const currentRouteName = props.routerStore.currentRoute.name;
|
|
33
|
+
const currentRoutePage = props.routerStore.currentRoute.pageName;
|
|
34
|
+
const componentConfig = props.routes[currentRouteName];
|
|
88
35
|
let preventRedirect = false;
|
|
89
|
-
if (
|
|
90
|
-
else if (
|
|
36
|
+
if (props.routerStore.isRedirecting) preventRedirect = true;
|
|
37
|
+
else if (config.loadedComponentName === currentRouteName) {
|
|
91
38
|
preventRedirect = true;
|
|
92
|
-
} else if (
|
|
93
|
-
if (
|
|
94
|
-
|
|
95
|
-
replaceObject(this.currentProps, "props" in componentConfig ? componentConfig.props : {});
|
|
39
|
+
} else if (config.loadedComponentPage != null && currentRouteName != null) {
|
|
40
|
+
if (config.loadedComponentPage === currentRoutePage) {
|
|
41
|
+
props.routerStore.adapters.replaceObject(config.currentProps, "props" in componentConfig ? componentConfig.props : {});
|
|
96
42
|
preventRedirect = true;
|
|
97
43
|
}
|
|
98
44
|
}
|
|
99
45
|
if (preventRedirect) return;
|
|
100
|
-
batch(() => {
|
|
101
|
-
if (
|
|
102
|
-
|
|
103
|
-
} else {
|
|
104
|
-
this.props.beforeUpdatePageComponent?.();
|
|
105
|
-
this.setComponent();
|
|
46
|
+
props.routerStore.adapters.batch(() => {
|
|
47
|
+
if (config.loadedComponentName) {
|
|
48
|
+
props.beforeUpdatePageComponent?.();
|
|
106
49
|
}
|
|
50
|
+
props.beforeSetPageComponent?.(componentConfig);
|
|
51
|
+
props.routerStore.adapters.batch(() => {
|
|
52
|
+
props.routerStore.adapters.replaceObject(config.currentProps, "props" in componentConfig ? componentConfig.props : {});
|
|
53
|
+
config.loadedComponentName = currentRouteName;
|
|
54
|
+
config.loadedComponentPage = componentConfig.pageName;
|
|
55
|
+
config[Symbol.for("$adm")]?.batch();
|
|
56
|
+
});
|
|
107
57
|
});
|
|
108
58
|
}
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
batch(() => {
|
|
114
|
-
replaceObject(this.currentProps, "props" in componentConfig ? componentConfig.props : {});
|
|
115
|
-
this.loadedComponentName = currentRouteName;
|
|
116
|
-
this.loadedComponentPage = componentConfig.pageName;
|
|
117
|
-
});
|
|
118
|
-
}
|
|
119
|
-
};
|
|
120
|
-
function Router(props) {
|
|
121
|
-
const vm = useStore(VM, props);
|
|
59
|
+
props.beforeMount?.();
|
|
60
|
+
redirectOnHistoryPop();
|
|
61
|
+
setLoadedComponent();
|
|
62
|
+
props.routerStore.adapters.autorun(() => setLoadedComponent());
|
|
122
63
|
return _$createComponent(Show, {
|
|
123
64
|
get when() {
|
|
124
|
-
return
|
|
65
|
+
return config.loadedComponentName;
|
|
125
66
|
},
|
|
126
67
|
get children() {
|
|
127
68
|
return _$createComponent(Dynamic, _$mergeProps({
|
|
128
69
|
get component() {
|
|
129
|
-
return props.routes[
|
|
70
|
+
return props.routes[config.loadedComponentName]?.component || void 0;
|
|
130
71
|
}
|
|
131
|
-
}, () =>
|
|
72
|
+
}, () => config.currentProps));
|
|
132
73
|
}
|
|
133
74
|
});
|
|
134
75
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"kr-observable.d.ts","sourceRoot":"","sources":["../../../packages/adapters/kr-observable.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,eAAO,MAAM,QAAQ,EAAE,YAatB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mobx.d.ts","sourceRoot":"","sources":["../../../packages/adapters/mobx.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,eAAO,MAAM,QAAQ,EAAE,YAgBtB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"solid.d.ts","sourceRoot":"","sources":["../../../packages/adapters/solid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAI9C,eAAO,MAAM,QAAQ,EAAE,YAoBtB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { TypeRouteRaw } from './types/TypeRouteRaw';
|
|
2
|
-
|
|
2
|
+
export declare function createRouterConfig<TConfig extends {
|
|
3
3
|
[Key in keyof TConfig]: TypeRouteRaw;
|
|
4
|
-
}>
|
|
4
|
+
}>(config: TConfig): {
|
|
5
5
|
[Key in keyof TConfig]: TConfig[Key] & {
|
|
6
6
|
name: Key;
|
|
7
7
|
pageName?: string;
|
|
@@ -9,8 +9,4 @@ type TypeRouteItemFinalGeneric<TConfig extends {
|
|
|
9
9
|
otherExports?: Record<string, any>;
|
|
10
10
|
};
|
|
11
11
|
};
|
|
12
|
-
export declare function createRouterConfig<TConfig extends {
|
|
13
|
-
[Key in keyof TConfig]: TypeRouteRaw;
|
|
14
|
-
}>(config: TConfig): TypeRouteItemFinalGeneric<TConfig>;
|
|
15
|
-
export {};
|
|
16
12
|
//# sourceMappingURL=createRouterConfig.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createRouterConfig.d.ts","sourceRoot":"","sources":["../../../packages/core/createRouterConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGpD,
|
|
1
|
+
{"version":3,"file":"createRouterConfig.d.ts","sourceRoot":"","sources":["../../../packages/core/createRouterConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGpD,wBAAgB,kBAAkB,CAAC,OAAO,SAAS;KAAG,GAAG,IAAI,MAAM,OAAO,GAAG,YAAY;CAAE,EACzF,MAAM,EAAE,OAAO,GACd;KACA,GAAG,IAAI,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,CAAC,GAAG;QACrC,IAAI,EAAE,GAAG,CAAC;QACV,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,SAAS,CAAC,EAAE,GAAG,CAAC;QAChB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;KACpC;CACF,CAEA"}
|