@furystack/shades 5.0.0 → 5.0.3
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/components/router.js +11 -8
- package/dist/components/router.js.map +1 -1
- package/dist/shade.js +22 -12
- package/dist/shade.js.map +1 -1
- package/package.json +6 -6
- package/src/components/router.tsx +8 -7
- package/src/shade.ts +34 -14
- package/types/components/router.d.ts.map +1 -1
- package/types/shade.d.ts +8 -1
- package/types/shade.d.ts.map +1 -1
|
@@ -7,6 +7,7 @@ const shade_component_1 = require("../shade-component");
|
|
|
7
7
|
const services_1 = require("../services");
|
|
8
8
|
const path_to_regexp_1 = require("path-to-regexp");
|
|
9
9
|
const semaphore_async_await_1 = tslib_1.__importDefault(require("semaphore-async-await"));
|
|
10
|
+
const utils_1 = require("@furystack/utils");
|
|
10
11
|
exports.Router = (0, shade_1.Shade)({
|
|
11
12
|
shadowDomName: 'shade-router',
|
|
12
13
|
getInitialState: () => ({
|
|
@@ -14,7 +15,7 @@ exports.Router = (0, shade_1.Shade)({
|
|
|
14
15
|
}),
|
|
15
16
|
resources: ({ children, props, injector, updateState, getState, element }) => [
|
|
16
17
|
injector.getInstance(services_1.LocationService).onLocationChanged.subscribe(async (currentUrl) => {
|
|
17
|
-
var _a;
|
|
18
|
+
var _a, _b, _c;
|
|
18
19
|
const { activeRoute: lastRoute, activeRouteParams: lastParams, lock } = getState();
|
|
19
20
|
try {
|
|
20
21
|
await lock.acquire();
|
|
@@ -23,17 +24,13 @@ exports.Router = (0, shade_1.Shade)({
|
|
|
23
24
|
const matchResult = matchFn(currentUrl);
|
|
24
25
|
if (matchResult) {
|
|
25
26
|
if (route !== lastRoute || JSON.stringify(lastParams) !== JSON.stringify(matchResult.params)) {
|
|
26
|
-
|
|
27
|
-
await lastRoute.onLeave({ children, props, injector, updateState, getState, element });
|
|
28
|
-
}
|
|
27
|
+
await ((_a = lastRoute === null || lastRoute === void 0 ? void 0 : lastRoute.onLeave) === null || _a === void 0 ? void 0 : _a.call(lastRoute, { children, props, injector, updateState, getState, element }));
|
|
29
28
|
updateState({
|
|
30
29
|
jsx: route.component({ currentUrl, match: matchResult }),
|
|
31
30
|
activeRoute: route,
|
|
32
31
|
activeRouteParams: matchResult.params,
|
|
33
32
|
});
|
|
34
|
-
|
|
35
|
-
await route.onVisit({ children, props, injector, updateState, getState, element });
|
|
36
|
-
}
|
|
33
|
+
await ((_b = route.onVisit) === null || _b === void 0 ? void 0 : _b.call(route, { children, props, injector, updateState, getState, element }));
|
|
37
34
|
}
|
|
38
35
|
return;
|
|
39
36
|
}
|
|
@@ -41,7 +38,13 @@ exports.Router = (0, shade_1.Shade)({
|
|
|
41
38
|
if (lastRoute === null || lastRoute === void 0 ? void 0 : lastRoute.onLeave) {
|
|
42
39
|
await lastRoute.onLeave({ children, props, injector, updateState, getState, element });
|
|
43
40
|
}
|
|
44
|
-
updateState({ jsx: (
|
|
41
|
+
updateState({ jsx: (_c = props.notFound) === null || _c === void 0 ? void 0 : _c.call(props, currentUrl), activeRoute: undefined });
|
|
42
|
+
}
|
|
43
|
+
catch (e) {
|
|
44
|
+
// path updates can be async, this can be ignored
|
|
45
|
+
if (!(e instanceof utils_1.ObservableAlreadyDisposedError)) {
|
|
46
|
+
throw e;
|
|
47
|
+
}
|
|
45
48
|
}
|
|
46
49
|
finally {
|
|
47
50
|
lock.release();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"router.js","sourceRoot":"","sources":["../../src/components/router.tsx"],"names":[],"mappings":";;;;AAAA,oCAAgC;AAChC,wDAAoD;AACpD,0CAA6C;AAC7C,mDAA0E;AAE1E,0FAA6C;
|
|
1
|
+
{"version":3,"file":"router.js","sourceRoot":"","sources":["../../src/components/router.tsx"],"names":[],"mappings":";;;;AAAA,oCAAgC;AAChC,wDAAoD;AACpD,0CAA6C;AAC7C,mDAA0E;AAE1E,0FAA6C;AAC7C,4CAAiE;AAsBpD,QAAA,MAAM,GAAG,IAAA,aAAK,EAA2B;IACpD,aAAa,EAAE,cAAc;IAC7B,eAAe,EAAE,GAAG,EAAE,CAAC,CAAC;QACtB,IAAI,EAAE,IAAI,+BAAS,CAAC,CAAC,CAAC;KACvB,CAAC;IACF,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;QAC5E,QAAQ,CAAC,WAAW,CAAC,0BAAe,CAAC,CAAC,iBAAiB,CAAC,SAAS,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE;;YACrF,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,iBAAiB,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,QAAQ,EAAE,CAAA;YAClF,IAAI;gBACF,MAAM,IAAI,CAAC,OAAO,EAAE,CAAA;gBACpB,KAAK,MAAM,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE;oBAChC,MAAM,OAAO,GAAG,IAAA,sBAAK,EAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,cAAc,CAAC,CAAA;oBACtD,MAAM,WAAW,GAAG,OAAO,CAAC,UAAU,CAAC,CAAA;oBACvC,IAAI,WAAW,EAAE;wBACf,IAAI,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE;4BAC5F,MAAM,CAAA,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,0DAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAA,CAAA;4BACzF,WAAW,CAAC;gCACV,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC;gCACxD,WAAW,EAAE,KAAK;gCAClB,iBAAiB,EAAE,WAAW,CAAC,MAAM;6BACtC,CAAC,CAAA;4BACF,MAAM,CAAA,MAAA,KAAK,CAAC,OAAO,sDAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAA,CAAA;yBACrF;wBACD,OAAM;qBACP;iBACF;gBACD,IAAI,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,EAAE;oBACtB,MAAM,SAAS,CAAC,OAAO,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAA;iBACvF;gBACD,WAAW,CAAC,EAAE,GAAG,EAAE,MAAA,KAAK,CAAC,QAAQ,sDAAG,UAAU,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,CAAA;aAC3E;YAAC,OAAO,CAAC,EAAE;gBACV,iDAAiD;gBACjD,IAAI,CAAC,CAAC,CAAC,YAAY,sCAA8B,CAAC,EAAE;oBAClD,MAAM,CAAC,CAAA;iBACR;aACF;oBAAS;gBACR,IAAI,CAAC,OAAO,EAAE,CAAA;aACf;QACH,CAAC,EAAE,IAAI,CAAC;KACT;IACD,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;QACvB,MAAM,EAAE,GAAG,EAAE,GAAG,QAAQ,EAAE,CAAA;QAC1B,IAAI,GAAG,EAAE;YACP,OAAO,GAAG,CAAA;SACX;QACD,OAAO,mDAAW,CAAA;IACpB,CAAC;CACF,CAAC,CAAA"}
|
package/dist/shade.js
CHANGED
|
@@ -17,6 +17,9 @@ const Shade = (o) => {
|
|
|
17
17
|
customElements.define(customElementName, class extends HTMLElement {
|
|
18
18
|
constructor(_props) {
|
|
19
19
|
super();
|
|
20
|
+
this.compareState = o.compareState ||
|
|
21
|
+
((oldState, newState) => Object.entries(oldState).some(([key, value]) => value !== newState[key]) ||
|
|
22
|
+
Object.entries(newState).some(([key, value]) => value !== oldState[key]));
|
|
20
23
|
/**
|
|
21
24
|
* Will be updated when on children change
|
|
22
25
|
*/
|
|
@@ -35,7 +38,7 @@ const Shade = (o) => {
|
|
|
35
38
|
const updateState = (stateChanges, skipRender) => {
|
|
36
39
|
const currentState = this.state.getValue();
|
|
37
40
|
const newState = { ...currentState, ...stateChanges };
|
|
38
|
-
if (
|
|
41
|
+
if (this.compareState(currentState, newState)) {
|
|
39
42
|
this.state.setValue(newState);
|
|
40
43
|
!skipRender && this.updateComponent();
|
|
41
44
|
}
|
|
@@ -61,11 +64,11 @@ const Shade = (o) => {
|
|
|
61
64
|
}
|
|
62
65
|
disconnectedCallback() {
|
|
63
66
|
o.onDetach && o.onDetach(this.getRenderOptions());
|
|
67
|
+
Object.values(this.resources).forEach((s) => s.dispose());
|
|
68
|
+
this.cleanup && this.cleanup();
|
|
69
|
+
this.shadeChildren.dispose();
|
|
64
70
|
this.props.dispose();
|
|
65
71
|
this.state.dispose();
|
|
66
|
-
this.shadeChildren.dispose();
|
|
67
|
-
this.cleanup && this.cleanup();
|
|
68
|
-
Object.values(this.resources).forEach((s) => s.dispose());
|
|
69
72
|
}
|
|
70
73
|
createResources() {
|
|
71
74
|
var _a;
|
|
@@ -76,19 +79,25 @@ const Shade = (o) => {
|
|
|
76
79
|
*/
|
|
77
80
|
updateComponent() {
|
|
78
81
|
const newJsx = this.render(this.getRenderOptions());
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
82
|
+
if (newJsx) {
|
|
83
|
+
if (typeof newJsx === 'string') {
|
|
84
|
+
this.innerHTML = newJsx;
|
|
85
|
+
}
|
|
86
|
+
else if (this.hasChildNodes()) {
|
|
87
|
+
this.replaceChild(newJsx, this.firstChild);
|
|
88
|
+
}
|
|
89
|
+
else {
|
|
90
|
+
this.append(newJsx);
|
|
91
|
+
}
|
|
86
92
|
}
|
|
87
93
|
}
|
|
88
94
|
/**
|
|
89
95
|
* Finialize the component initialization after it gets the Props. Called by the framework internally
|
|
90
96
|
*/
|
|
91
97
|
callConstructed() {
|
|
98
|
+
if (this.props.isDisposed) {
|
|
99
|
+
return;
|
|
100
|
+
}
|
|
92
101
|
;
|
|
93
102
|
o.getInitialState &&
|
|
94
103
|
this.state.setValue(o.getInitialState({ props: this.props.getValue(), injector: this.injector }));
|
|
@@ -130,7 +139,8 @@ const Shade = (o) => {
|
|
|
130
139
|
this._injector = fromParent;
|
|
131
140
|
return fromParent;
|
|
132
141
|
}
|
|
133
|
-
|
|
142
|
+
// Injector not set explicitly and not found on parents!
|
|
143
|
+
return new inject_1.Injector();
|
|
134
144
|
}
|
|
135
145
|
set injector(i) {
|
|
136
146
|
this._injector = i;
|
package/dist/shade.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shade.js","sourceRoot":"","sources":["../src/shade.ts"],"names":[],"mappings":";;;AAAA,4CAA8D;AAC9D,8CAA4C;
|
|
1
|
+
{"version":3,"file":"shade.js","sourceRoot":"","sources":["../src/shade.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@furystack/shades",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.3",
|
|
4
4
|
"description": "Google Authentication Provider for FuryStack",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"files": [
|
|
@@ -29,15 +29,15 @@
|
|
|
29
29
|
},
|
|
30
30
|
"homepage": "https://github.com/furystack/furystack",
|
|
31
31
|
"devDependencies": {
|
|
32
|
-
"@types/jest": "^27.
|
|
32
|
+
"@types/jest": "^27.5.0",
|
|
33
33
|
"@types/jsdom": "^16.2.14",
|
|
34
|
-
"@types/node": "^17.0.
|
|
34
|
+
"@types/node": "^17.0.31",
|
|
35
35
|
"jsdom": "^19.0.0"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@furystack/core": "^11.0.
|
|
39
|
-
"@furystack/inject": "^6.0.
|
|
40
|
-
"@furystack/utils": "^3.0.
|
|
38
|
+
"@furystack/core": "^11.0.3",
|
|
39
|
+
"@furystack/inject": "^6.0.3",
|
|
40
|
+
"@furystack/utils": "^3.0.3",
|
|
41
41
|
"path-to-regexp": "^6.2.0",
|
|
42
42
|
"semaphore-async-await": "^1.5.1",
|
|
43
43
|
"tslib": "^2.4.0"
|
|
@@ -4,6 +4,7 @@ import { LocationService } from '../services'
|
|
|
4
4
|
import { match, MatchResult, TokensToRegexpOptions } from 'path-to-regexp'
|
|
5
5
|
import { RenderOptions } from '../models'
|
|
6
6
|
import Semaphore from 'semaphore-async-await'
|
|
7
|
+
import { ObservableAlreadyDisposedError } from '@furystack/utils'
|
|
7
8
|
|
|
8
9
|
export interface Route<TMatchResult extends object> {
|
|
9
10
|
url: string
|
|
@@ -35,23 +36,18 @@ export const Router = Shade<RouterProps, RouterState>({
|
|
|
35
36
|
const { activeRoute: lastRoute, activeRouteParams: lastParams, lock } = getState()
|
|
36
37
|
try {
|
|
37
38
|
await lock.acquire()
|
|
38
|
-
|
|
39
39
|
for (const route of props.routes) {
|
|
40
40
|
const matchFn = match(route.url, route.routingOptions)
|
|
41
41
|
const matchResult = matchFn(currentUrl)
|
|
42
42
|
if (matchResult) {
|
|
43
43
|
if (route !== lastRoute || JSON.stringify(lastParams) !== JSON.stringify(matchResult.params)) {
|
|
44
|
-
|
|
45
|
-
await lastRoute.onLeave({ children, props, injector, updateState, getState, element })
|
|
46
|
-
}
|
|
44
|
+
await lastRoute?.onLeave?.({ children, props, injector, updateState, getState, element })
|
|
47
45
|
updateState({
|
|
48
46
|
jsx: route.component({ currentUrl, match: matchResult }),
|
|
49
47
|
activeRoute: route,
|
|
50
48
|
activeRouteParams: matchResult.params,
|
|
51
49
|
})
|
|
52
|
-
|
|
53
|
-
await route.onVisit({ children, props, injector, updateState, getState, element })
|
|
54
|
-
}
|
|
50
|
+
await route.onVisit?.({ children, props, injector, updateState, getState, element })
|
|
55
51
|
}
|
|
56
52
|
return
|
|
57
53
|
}
|
|
@@ -60,6 +56,11 @@ export const Router = Shade<RouterProps, RouterState>({
|
|
|
60
56
|
await lastRoute.onLeave({ children, props, injector, updateState, getState, element })
|
|
61
57
|
}
|
|
62
58
|
updateState({ jsx: props.notFound?.(currentUrl), activeRoute: undefined })
|
|
59
|
+
} catch (e) {
|
|
60
|
+
// path updates can be async, this can be ignored
|
|
61
|
+
if (!(e instanceof ObservableAlreadyDisposedError)) {
|
|
62
|
+
throw e
|
|
63
|
+
}
|
|
63
64
|
} finally {
|
|
64
65
|
lock.release()
|
|
65
66
|
}
|
package/src/shade.ts
CHANGED
|
@@ -7,10 +7,11 @@ export type ShadeOptions<TProps, TState> = {
|
|
|
7
7
|
* Explicit shadow dom name. Will fall back to 'shade-{guid}' if not provided
|
|
8
8
|
*/
|
|
9
9
|
shadowDomName: string
|
|
10
|
+
|
|
10
11
|
/**
|
|
11
12
|
* Render hook, this method will be executed on each and every render.
|
|
12
13
|
*/
|
|
13
|
-
render: (options: RenderOptions<TProps, TState>) => JSX.Element
|
|
14
|
+
render: (options: RenderOptions<TProps, TState>) => JSX.Element | string | null
|
|
14
15
|
|
|
15
16
|
/**
|
|
16
17
|
* Construct hook. Will be executed once when the element has been constructed and initialized
|
|
@@ -29,7 +30,15 @@ export type ShadeOptions<TProps, TState> = {
|
|
|
29
30
|
*/
|
|
30
31
|
onDetach?: (options: RenderOptions<TProps, TState>) => void
|
|
31
32
|
|
|
33
|
+
/**
|
|
34
|
+
* A factory method that creates a list of disposable resources that will be disposed when the element is detached.
|
|
35
|
+
*/
|
|
32
36
|
resources?: (options: RenderOptions<TProps, TState>) => Disposable[]
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* An optional method that checks the state for changes and returns true if the element should be rerendered.
|
|
40
|
+
*/
|
|
41
|
+
compareState?: (oldState: TState, newState: TState) => boolean
|
|
33
42
|
} & (unknown extends TState
|
|
34
43
|
? {}
|
|
35
44
|
: {
|
|
@@ -54,6 +63,12 @@ export const Shade = <TProps, TState = unknown>(o: ShadeOptions<TProps, TState>)
|
|
|
54
63
|
customElements.define(
|
|
55
64
|
customElementName,
|
|
56
65
|
class extends HTMLElement implements JSX.Element {
|
|
66
|
+
private compareState =
|
|
67
|
+
o.compareState ||
|
|
68
|
+
((oldState: TState, newState: TState) =>
|
|
69
|
+
Object.entries(oldState).some(([key, value]) => value !== newState[key as keyof TState]) ||
|
|
70
|
+
Object.entries(newState).some(([key, value]) => value !== oldState[key as keyof TState]))
|
|
71
|
+
|
|
57
72
|
public connectedCallback() {
|
|
58
73
|
o.onAttach && o.onAttach(this.getRenderOptions())
|
|
59
74
|
this.callConstructed()
|
|
@@ -61,11 +76,11 @@ export const Shade = <TProps, TState = unknown>(o: ShadeOptions<TProps, TState>)
|
|
|
61
76
|
|
|
62
77
|
public disconnectedCallback() {
|
|
63
78
|
o.onDetach && o.onDetach(this.getRenderOptions())
|
|
79
|
+
Object.values(this.resources).forEach((s) => s.dispose())
|
|
80
|
+
this.cleanup && this.cleanup()
|
|
81
|
+
this.shadeChildren.dispose()
|
|
64
82
|
this.props.dispose()
|
|
65
83
|
this.state.dispose()
|
|
66
|
-
this.shadeChildren.dispose()
|
|
67
|
-
this.cleanup && this.cleanup()
|
|
68
|
-
Object.values(this.resources).forEach((s) => s.dispose())
|
|
69
84
|
}
|
|
70
85
|
|
|
71
86
|
/**
|
|
@@ -98,7 +113,7 @@ export const Shade = <TProps, TState = unknown>(o: ShadeOptions<TProps, TState>)
|
|
|
98
113
|
const updateState = (stateChanges: PartialElement<TState>, skipRender?: boolean) => {
|
|
99
114
|
const currentState = this.state.getValue()
|
|
100
115
|
const newState = { ...currentState, ...stateChanges }
|
|
101
|
-
if (
|
|
116
|
+
if (this.compareState(currentState, newState)) {
|
|
102
117
|
this.state.setValue(newState)
|
|
103
118
|
!skipRender && this.updateComponent()
|
|
104
119
|
}
|
|
@@ -125,14 +140,14 @@ export const Shade = <TProps, TState = unknown>(o: ShadeOptions<TProps, TState>)
|
|
|
125
140
|
*/
|
|
126
141
|
public updateComponent() {
|
|
127
142
|
const newJsx = this.render(this.getRenderOptions())
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
143
|
+
if (newJsx) {
|
|
144
|
+
if (typeof newJsx === 'string') {
|
|
145
|
+
this.innerHTML = newJsx
|
|
146
|
+
} else if (this.hasChildNodes()) {
|
|
147
|
+
this.replaceChild(newJsx, this.firstChild as Node)
|
|
148
|
+
} else {
|
|
149
|
+
this.append(newJsx)
|
|
150
|
+
}
|
|
136
151
|
}
|
|
137
152
|
}
|
|
138
153
|
|
|
@@ -140,6 +155,10 @@ export const Shade = <TProps, TState = unknown>(o: ShadeOptions<TProps, TState>)
|
|
|
140
155
|
* Finialize the component initialization after it gets the Props. Called by the framework internally
|
|
141
156
|
*/
|
|
142
157
|
public callConstructed() {
|
|
158
|
+
if (this.props.isDisposed) {
|
|
159
|
+
return
|
|
160
|
+
}
|
|
161
|
+
|
|
143
162
|
;(o as any).getInitialState &&
|
|
144
163
|
this.state.setValue((o as any).getInitialState({ props: this.props.getValue(), injector: this.injector }))
|
|
145
164
|
|
|
@@ -188,7 +207,8 @@ export const Shade = <TProps, TState = unknown>(o: ShadeOptions<TProps, TState>)
|
|
|
188
207
|
this._injector = fromParent
|
|
189
208
|
return fromParent
|
|
190
209
|
}
|
|
191
|
-
|
|
210
|
+
// Injector not set explicitly and not found on parents!
|
|
211
|
+
return new Injector()
|
|
192
212
|
}
|
|
193
213
|
|
|
194
214
|
public set injector(i: Injector) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../src/components/router.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAS,WAAW,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAA;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AACzC,OAAO,SAAS,MAAM,uBAAuB,CAAA;
|
|
1
|
+
{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../src/components/router.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAS,WAAW,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAA;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AACzC,OAAO,SAAS,MAAM,uBAAuB,CAAA;AAG7C,MAAM,WAAW,KAAK,CAAC,YAAY,SAAS,MAAM;IAChD,GAAG,EAAE,MAAM,CAAA;IACX,SAAS,EAAE,CAAC,OAAO,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,WAAW,CAAC,YAAY,CAAC,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAA;IAC7F,cAAc,CAAC,EAAE,qBAAqB,CAAA;IACtC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,WAAW,EAAE,WAAW,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAC7E,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,WAAW,EAAE,WAAW,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;CAC9E;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,mBAAmB,CAAA;IAC3B,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAA;IACzB,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,GAAG,CAAC,OAAO,CAAA;CAC/C;AAED,MAAM,WAAW,WAAW;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAA;IACxB,iBAAiB,CAAC,EAAE,GAAG,CAAA;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACjB,IAAI,EAAE,SAAS,CAAA;CAChB;AACD,eAAO,MAAM,MAAM,2FA+CjB,CAAA"}
|
package/types/shade.d.ts
CHANGED
|
@@ -9,7 +9,7 @@ export declare type ShadeOptions<TProps, TState> = {
|
|
|
9
9
|
/**
|
|
10
10
|
* Render hook, this method will be executed on each and every render.
|
|
11
11
|
*/
|
|
12
|
-
render: (options: RenderOptions<TProps, TState>) => JSX.Element;
|
|
12
|
+
render: (options: RenderOptions<TProps, TState>) => JSX.Element | string | null;
|
|
13
13
|
/**
|
|
14
14
|
* Construct hook. Will be executed once when the element has been constructed and initialized
|
|
15
15
|
*/
|
|
@@ -22,7 +22,14 @@ export declare type ShadeOptions<TProps, TState> = {
|
|
|
22
22
|
* Will be executed when the element is detached from the DOM.
|
|
23
23
|
*/
|
|
24
24
|
onDetach?: (options: RenderOptions<TProps, TState>) => void;
|
|
25
|
+
/**
|
|
26
|
+
* A factory method that creates a list of disposable resources that will be disposed when the element is detached.
|
|
27
|
+
*/
|
|
25
28
|
resources?: (options: RenderOptions<TProps, TState>) => Disposable[];
|
|
29
|
+
/**
|
|
30
|
+
* An optional method that checks the state for changes and returns true if the element should be rerendered.
|
|
31
|
+
*/
|
|
32
|
+
compareState?: (oldState: TState, newState: TState) => boolean;
|
|
26
33
|
} & (unknown extends TState ? {} : {
|
|
27
34
|
/**
|
|
28
35
|
* The initial state of the component
|
package/types/shade.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shade.d.ts","sourceRoot":"","sources":["../src/shade.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,kBAAkB,CAAA;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,YAAY,EAAkB,aAAa,EAAE,MAAM,UAAU,CAAA;AAEtE,oBAAY,YAAY,CAAC,MAAM,EAAE,MAAM,IAAI;IACzC;;OAEG;IACH,aAAa,EAAE,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"shade.d.ts","sourceRoot":"","sources":["../src/shade.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,kBAAkB,CAAA;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,YAAY,EAAkB,aAAa,EAAE,MAAM,UAAU,CAAA;AAEtE,oBAAY,YAAY,CAAC,MAAM,EAAE,MAAM,IAAI;IACzC;;OAEG;IACH,aAAa,EAAE,MAAM,CAAA;IAErB;;OAEG;IACH,MAAM,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,GAAG,CAAC,OAAO,GAAG,MAAM,GAAG,IAAI,CAAA;IAE/E;;OAEG;IACH,WAAW,CAAC,EAAE,CACZ,OAAO,EAAE,aAAa,CAAC,MAAM,EAAE,MAAM,CAAC,KACnC,IAAI,GAAG,SAAS,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,GAAG,SAAS,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC,CAAA;IAE/E;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAA;IAE3D;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAA;IAE3D;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,UAAU,EAAE,CAAA;IAEpE;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAA;CAC/D,GAAG,CAAC,OAAO,SAAS,MAAM,GACvB,EAAE,GACF;IACE;;OAEG;IACH,eAAe,EAAE,CAAC,OAAO,EAAE;QAAE,QAAQ,EAAE,QAAQ,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAA;CAC5E,CAAC,CAAA;AAEN;;;;;GAKG;AACH,eAAO,MAAM,KAAK,iIAuLjB,CAAA"}
|