@furystack/shades 6.0.3 → 6.0.6
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/component-factory.spec.js +8 -8
- package/dist/component-factory.spec.js.map +1 -1
- package/dist/components/index.js +17 -4
- package/dist/components/index.js.map +1 -1
- package/dist/components/lazy-load.spec.js +2 -4
- package/dist/components/lazy-load.spec.js.map +1 -1
- package/dist/components/route-link.spec.js +1 -2
- package/dist/components/route-link.spec.js.map +1 -1
- package/dist/components/router.js +8 -7
- package/dist/components/router.js.map +1 -1
- package/dist/components/router.spec.js +2 -2
- package/dist/components/router.spec.js.map +1 -1
- package/dist/index.js +20 -7
- package/dist/index.js.map +1 -1
- package/dist/jsx.js.map +1 -1
- package/dist/models/index.js +19 -6
- package/dist/models/index.js.map +1 -1
- package/dist/services/index.js +16 -3
- package/dist/services/index.js.map +1 -1
- package/dist/services/location-service.js +11 -3
- package/dist/services/location-service.js.map +1 -1
- package/dist/services/screen-service.js +12 -4
- package/dist/services/screen-service.js.map +1 -1
- package/dist/shade-component.js +1 -1
- package/dist/shade-component.js.map +1 -1
- package/dist/shade.js +15 -26
- package/dist/shade.js.map +1 -1
- package/dist/shades.integration.spec.js +112 -6
- package/dist/shades.integration.spec.js.map +1 -1
- package/package.json +7 -8
- package/src/component-factory.spec.tsx +8 -8
- package/src/jsx.ts +3 -4
- package/src/models/partial-element.ts +5 -3
- package/src/models/render-options.ts +1 -1
- package/src/shade-component.ts +1 -1
- package/src/shade.ts +25 -29
- package/src/shades.integration.spec.tsx +162 -5
- package/types/components/route-link.d.ts +3 -1
- package/types/components/route-link.d.ts.map +1 -1
- package/types/jsx.d.ts +3 -4
- package/types/jsx.d.ts.map +1 -1
- package/types/models/partial-element.d.ts +3 -3
- package/types/models/partial-element.d.ts.map +1 -1
- package/types/models/render-options.d.ts +1 -1
- package/types/models/render-options.d.ts.map +1 -1
- package/types/shade.d.ts.map +1 -1
package/dist/shade.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shade.js","sourceRoot":"","sources":["../src/shade.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"shade.js","sourceRoot":"","sources":["../src/shade.ts"],"names":[],"mappings":"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"}
|
|
@@ -21,6 +21,64 @@ describe('Shades integration tests', () => {
|
|
|
21
21
|
});
|
|
22
22
|
expect(document.body.innerHTML).toBe('<div id="root"><shades-example><div>Hello</div></shades-example></div>');
|
|
23
23
|
});
|
|
24
|
+
it('Should mount a custom component with a string render result', () => {
|
|
25
|
+
const injector = new inject_1.Injector();
|
|
26
|
+
const rootElement = document.getElementById('root');
|
|
27
|
+
const ExampleComponent = (0, shade_1.Shade)({ render: () => 'Hello', shadowDomName: 'shades-string-render-result' });
|
|
28
|
+
(0, initialize_1.initializeShadeRoot)({
|
|
29
|
+
injector,
|
|
30
|
+
rootElement,
|
|
31
|
+
jsxElement: (0, shade_component_1.createComponent)(ExampleComponent, null),
|
|
32
|
+
});
|
|
33
|
+
expect(document.body.innerHTML).toBe('<div id="root"><shades-string-render-result>Hello</shades-string-render-result></div>');
|
|
34
|
+
});
|
|
35
|
+
it('Should mount a custom component with null render result', () => {
|
|
36
|
+
const injector = new inject_1.Injector();
|
|
37
|
+
const rootElement = document.getElementById('root');
|
|
38
|
+
const ExampleComponent = (0, shade_1.Shade)({ render: () => null, shadowDomName: 'shades-null-render-result' });
|
|
39
|
+
(0, initialize_1.initializeShadeRoot)({
|
|
40
|
+
injector,
|
|
41
|
+
rootElement,
|
|
42
|
+
jsxElement: (0, shade_component_1.createComponent)(ExampleComponent, null),
|
|
43
|
+
});
|
|
44
|
+
expect(document.body.innerHTML).toBe('<div id="root"><shades-null-render-result></shades-null-render-result></div>');
|
|
45
|
+
});
|
|
46
|
+
it('Should mount a custom component with a document fragment render result', () => {
|
|
47
|
+
const injector = new inject_1.Injector();
|
|
48
|
+
const rootElement = document.getElementById('root');
|
|
49
|
+
const ExampleComponent = (0, shade_1.Shade)({
|
|
50
|
+
render: () => ((0, shade_component_1.createComponent)(shade_component_1.createFragment, null,
|
|
51
|
+
(0, shade_component_1.createComponent)("p", null, "1"),
|
|
52
|
+
(0, shade_component_1.createComponent)("p", null, "2"))),
|
|
53
|
+
shadowDomName: 'shades-fragment-render-result',
|
|
54
|
+
});
|
|
55
|
+
(0, initialize_1.initializeShadeRoot)({
|
|
56
|
+
injector,
|
|
57
|
+
rootElement,
|
|
58
|
+
jsxElement: (0, shade_component_1.createComponent)(ExampleComponent, null),
|
|
59
|
+
});
|
|
60
|
+
expect(document.body.innerHTML).toBe('<div id="root"><shades-fragment-render-result><p>1</p><p>2</p></shades-fragment-render-result></div>');
|
|
61
|
+
});
|
|
62
|
+
it('Should mount a custom component with a document fragment that contains custom components', () => {
|
|
63
|
+
const injector = new inject_1.Injector();
|
|
64
|
+
const rootElement = document.getElementById('root');
|
|
65
|
+
const CustomComponent = (0, shade_1.Shade)({
|
|
66
|
+
shadowDomName: 'shades-fragment-test-custom-component',
|
|
67
|
+
render: () => (0, shade_component_1.createComponent)("p", null, "Hello"),
|
|
68
|
+
});
|
|
69
|
+
const ExampleComponent = (0, shade_1.Shade)({
|
|
70
|
+
render: () => ((0, shade_component_1.createComponent)(shade_component_1.createFragment, null,
|
|
71
|
+
(0, shade_component_1.createComponent)(CustomComponent, null),
|
|
72
|
+
(0, shade_component_1.createComponent)(CustomComponent, null))),
|
|
73
|
+
shadowDomName: 'shades-fragment-render-result-2',
|
|
74
|
+
});
|
|
75
|
+
(0, initialize_1.initializeShadeRoot)({
|
|
76
|
+
injector,
|
|
77
|
+
rootElement,
|
|
78
|
+
jsxElement: (0, shade_component_1.createComponent)(ExampleComponent, null),
|
|
79
|
+
});
|
|
80
|
+
expect(document.body.innerHTML).toBe('<div id="root"><shades-fragment-render-result-2><shades-fragment-test-custom-component><p>Hello</p></shades-fragment-test-custom-component><shades-fragment-test-custom-component><p>Hello</p></shades-fragment-test-custom-component></shades-fragment-render-result-2></div>');
|
|
81
|
+
});
|
|
24
82
|
it('Should mount nested Shades components', () => {
|
|
25
83
|
const injector = new inject_1.Injector();
|
|
26
84
|
const rootElement = document.getElementById('root');
|
|
@@ -103,16 +161,64 @@ describe('Shades integration tests', () => {
|
|
|
103
161
|
rootElement,
|
|
104
162
|
jsxElement: (0, shade_component_1.createComponent)(ExampleComponent, null),
|
|
105
163
|
});
|
|
106
|
-
const plus = () =>
|
|
107
|
-
const minus = () =>
|
|
108
|
-
expect(document.body.innerHTML).toContain(
|
|
164
|
+
const plus = () => document.getElementById('plus')?.click();
|
|
165
|
+
const minus = () => document.getElementById('minus')?.click();
|
|
166
|
+
const expectCount = (count) => expect(document.body.innerHTML).toContain(`Count is ${count}`);
|
|
167
|
+
expectCount(0);
|
|
109
168
|
plus();
|
|
110
|
-
|
|
169
|
+
expectCount(1);
|
|
111
170
|
plus();
|
|
112
|
-
|
|
171
|
+
expectCount(2);
|
|
113
172
|
minus();
|
|
114
173
|
minus();
|
|
115
|
-
|
|
174
|
+
expectCount(0);
|
|
175
|
+
});
|
|
176
|
+
it('Should allow children update after unmount and remount', () => {
|
|
177
|
+
const injector = new inject_1.Injector();
|
|
178
|
+
const rootElement = document.getElementById('root');
|
|
179
|
+
const Parent = (0, shade_1.Shade)({
|
|
180
|
+
shadowDomName: 'shade-remount-parent',
|
|
181
|
+
getInitialState: () => ({ areChildrenVisible: true }),
|
|
182
|
+
render: ({ children, getState, updateState }) => ((0, shade_component_1.createComponent)("div", null,
|
|
183
|
+
(0, shade_component_1.createComponent)("button", { id: "showHideChildren", onclick: () => {
|
|
184
|
+
updateState({ areChildrenVisible: !getState().areChildrenVisible });
|
|
185
|
+
} }, "Toggle"),
|
|
186
|
+
getState().areChildrenVisible ? children : (0, shade_component_1.createComponent)("div", null))),
|
|
187
|
+
});
|
|
188
|
+
const Child = (0, shade_1.Shade)({
|
|
189
|
+
shadowDomName: 'example-remount-child',
|
|
190
|
+
getInitialState: () => ({ count: 0 }),
|
|
191
|
+
render: ({ getState, updateState }) => {
|
|
192
|
+
const { count } = getState();
|
|
193
|
+
return ((0, shade_component_1.createComponent)("div", null,
|
|
194
|
+
"Count is ",
|
|
195
|
+
getState().count.toString(),
|
|
196
|
+
(0, shade_component_1.createComponent)("button", { id: "plus", onclick: () => updateState({ count: count + 1 }) }, "+"),
|
|
197
|
+
(0, shade_component_1.createComponent)("button", { id: "minus", onclick: () => updateState({ count: count - 1 }) }, "-")));
|
|
198
|
+
},
|
|
199
|
+
});
|
|
200
|
+
(0, initialize_1.initializeShadeRoot)({
|
|
201
|
+
injector,
|
|
202
|
+
rootElement,
|
|
203
|
+
jsxElement: ((0, shade_component_1.createComponent)(Parent, null,
|
|
204
|
+
(0, shade_component_1.createComponent)(Child, null))),
|
|
205
|
+
});
|
|
206
|
+
const plus = () => document.getElementById('plus')?.click();
|
|
207
|
+
const minus = () => document.getElementById('minus')?.click();
|
|
208
|
+
const expectCount = (count) => expect(document.body.innerHTML).toContain(`Count is ${count}`);
|
|
209
|
+
const toggleChildren = () => document.getElementById('showHideChildren')?.click();
|
|
210
|
+
expectCount(0);
|
|
211
|
+
plus();
|
|
212
|
+
expectCount(1);
|
|
213
|
+
toggleChildren();
|
|
214
|
+
expect(document.getElementById('plus')).toBeNull();
|
|
215
|
+
toggleChildren();
|
|
216
|
+
expect(document.getElementById('plus')).toBeDefined();
|
|
217
|
+
// expectCount(0)
|
|
218
|
+
plus();
|
|
219
|
+
expectCount(1);
|
|
220
|
+
minus();
|
|
221
|
+
expectCount(0);
|
|
116
222
|
});
|
|
117
223
|
});
|
|
118
224
|
//# sourceMappingURL=shades.integration.spec.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shades.integration.spec.js","sourceRoot":"","sources":["../src/shades.integration.spec.tsx"],"names":[],"mappings":";;AAAA,8CAA4C;AAE5C,+BAA+C;AAE/C,MAAM,CAAC,WAAW,GAAG,kBAAW,CAAA;AAChC,MAAM,CAAC,WAAW,GAAG,kBAAkB,CAAA;AAEvC,6CAAkD;AAClD,mCAA+B;AAC/B,
|
|
1
|
+
{"version":3,"file":"shades.integration.spec.js","sourceRoot":"","sources":["../src/shades.integration.spec.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@furystack/shades",
|
|
3
|
-
"version": "6.0.
|
|
3
|
+
"version": "6.0.6",
|
|
4
4
|
"description": "Google Authentication Provider for FuryStack",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"files": [
|
|
@@ -29,18 +29,17 @@
|
|
|
29
29
|
},
|
|
30
30
|
"homepage": "https://github.com/furystack/furystack",
|
|
31
31
|
"devDependencies": {
|
|
32
|
-
"@types/jest": "^
|
|
32
|
+
"@types/jest": "^29.0.0",
|
|
33
33
|
"@types/jsdom": "^20.0.0",
|
|
34
|
-
"@types/node": "^18.
|
|
34
|
+
"@types/node": "^18.7.14",
|
|
35
35
|
"jsdom": "^20.0.0"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@furystack/core": "^11.0.
|
|
39
|
-
"@furystack/inject": "^7.0.
|
|
40
|
-
"@furystack/utils": "^3.0.
|
|
38
|
+
"@furystack/core": "^11.0.10",
|
|
39
|
+
"@furystack/inject": "^7.0.4",
|
|
40
|
+
"@furystack/utils": "^3.0.8",
|
|
41
41
|
"path-to-regexp": "^6.2.1",
|
|
42
|
-
"semaphore-async-await": "^1.5.1"
|
|
43
|
-
"tslib": "^2.4.0"
|
|
42
|
+
"semaphore-async-await": "^1.5.1"
|
|
44
43
|
},
|
|
45
44
|
"typings": "./types/index.d.ts",
|
|
46
45
|
"gitHead": "76e1d17a71b981984935c9a7a5791cf61ebf5213"
|
|
@@ -59,9 +59,9 @@ describe('Shades Component Factory', () => {
|
|
|
59
59
|
)
|
|
60
60
|
|
|
61
61
|
const shade = component.firstElementChild as JSX.Element
|
|
62
|
-
expect(shade.props
|
|
63
|
-
expect(shade.state
|
|
64
|
-
expect(shade.shadeChildren
|
|
62
|
+
expect(shade.props).toBe(null)
|
|
63
|
+
expect(shade.state).toBe(undefined)
|
|
64
|
+
expect(shade.shadeChildren).toStrictEqual([])
|
|
65
65
|
})
|
|
66
66
|
|
|
67
67
|
it('Should render a component with props', () => {
|
|
@@ -80,9 +80,9 @@ describe('Shades Component Factory', () => {
|
|
|
80
80
|
|
|
81
81
|
shade.callConstructed()
|
|
82
82
|
|
|
83
|
-
expect(shade.props.
|
|
84
|
-
expect(shade.state
|
|
85
|
-
expect(shade.shadeChildren
|
|
83
|
+
expect(shade.props.foo).toStrictEqual('example')
|
|
84
|
+
expect(shade.state).toBe(undefined)
|
|
85
|
+
expect(shade.shadeChildren).toStrictEqual([])
|
|
86
86
|
|
|
87
87
|
expect(shade.innerHTML).toBe('<div>example</div>')
|
|
88
88
|
})
|
|
@@ -102,8 +102,8 @@ describe('Shades Component Factory', () => {
|
|
|
102
102
|
|
|
103
103
|
const shade = component.firstElementChild as JSX.Element
|
|
104
104
|
shade.callConstructed()
|
|
105
|
-
expect(shade.state
|
|
106
|
-
expect(shade.shadeChildren
|
|
105
|
+
expect(shade.state).toStrictEqual({ foo: 'example' })
|
|
106
|
+
expect(shade.shadeChildren).toStrictEqual([])
|
|
107
107
|
})
|
|
108
108
|
})
|
|
109
109
|
})
|
package/src/jsx.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { ObservableValue } from '@furystack/utils'
|
|
2
1
|
import { Injector } from '@furystack/inject'
|
|
3
2
|
import { ChildrenList, PartialElement } from './models'
|
|
4
3
|
|
|
@@ -7,10 +6,10 @@ declare global {
|
|
|
7
6
|
export namespace JSX {
|
|
8
7
|
interface Element<TProps = any, TState = any> extends HTMLElement {
|
|
9
8
|
injector: Injector
|
|
10
|
-
state:
|
|
11
|
-
props:
|
|
9
|
+
state: TState
|
|
10
|
+
props: TProps
|
|
12
11
|
updateComponent: () => void
|
|
13
|
-
shadeChildren
|
|
12
|
+
shadeChildren?: ChildrenList
|
|
14
13
|
callConstructed: () => void
|
|
15
14
|
}
|
|
16
15
|
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
-
export type PartialElement<T extends { style?: CSSStyleDeclaration }
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
export type PartialElement<T> = T extends { style?: CSSStyleDeclaration }
|
|
2
|
+
? Omit<Partial<T>, 'style'> & {
|
|
3
|
+
style?: Partial<CSSStyleDeclaration>
|
|
4
|
+
}
|
|
5
|
+
: Partial<T>
|
package/src/shade-component.ts
CHANGED
|
@@ -70,7 +70,7 @@ export const createComponent = <TProps>(
|
|
|
70
70
|
}
|
|
71
71
|
return el
|
|
72
72
|
} else if (isShadeComponent(elementType)) {
|
|
73
|
-
const el =
|
|
73
|
+
const el = elementType(props, children)
|
|
74
74
|
attachStyles(el, props)
|
|
75
75
|
return el
|
|
76
76
|
}
|
package/src/shade.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Disposable
|
|
1
|
+
import { Disposable } from '@furystack/utils'
|
|
2
2
|
import { Injector } from '@furystack/inject'
|
|
3
3
|
import { ChildrenList, PartialElement, RenderOptions } from './models'
|
|
4
4
|
|
|
@@ -66,8 +66,8 @@ export const Shade = <TProps, TState = unknown>(o: ShadeOptions<TProps, TState>)
|
|
|
66
66
|
private compareState =
|
|
67
67
|
o.compareState ||
|
|
68
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]))
|
|
69
|
+
Object.entries(oldState as object).some(([key, value]) => value !== newState[key as keyof TState]) ||
|
|
70
|
+
Object.entries(newState as object).some(([key, value]) => value !== oldState[key as keyof TState]))
|
|
71
71
|
|
|
72
72
|
public connectedCallback() {
|
|
73
73
|
o.onAttach && o.onAttach(this.getRenderOptions())
|
|
@@ -78,25 +78,22 @@ export const Shade = <TProps, TState = unknown>(o: ShadeOptions<TProps, TState>)
|
|
|
78
78
|
o.onDetach && o.onDetach(this.getRenderOptions())
|
|
79
79
|
Object.values(this.resources).forEach((s) => s.dispose())
|
|
80
80
|
this.cleanup && this.cleanup()
|
|
81
|
-
this.shadeChildren.dispose()
|
|
82
|
-
this.props.dispose()
|
|
83
|
-
this.state.dispose()
|
|
84
81
|
}
|
|
85
82
|
|
|
86
83
|
/**
|
|
87
84
|
* Will be triggered when updating the external props object
|
|
88
85
|
*/
|
|
89
|
-
public props:
|
|
86
|
+
public props: TProps & { children?: JSX.Element[] }
|
|
90
87
|
|
|
91
88
|
/**
|
|
92
89
|
* Will be triggered on state update
|
|
93
90
|
*/
|
|
94
|
-
public state
|
|
91
|
+
public state!: TState
|
|
95
92
|
|
|
96
93
|
/**
|
|
97
94
|
* Will be updated when on children change
|
|
98
95
|
*/
|
|
99
|
-
public shadeChildren
|
|
96
|
+
public shadeChildren?: ChildrenList
|
|
100
97
|
|
|
101
98
|
/**
|
|
102
99
|
* @param options Options for rendering the component
|
|
@@ -107,24 +104,24 @@ export const Shade = <TProps, TState = unknown>(o: ShadeOptions<TProps, TState>)
|
|
|
107
104
|
/**
|
|
108
105
|
* @returns values for the current render options
|
|
109
106
|
*/
|
|
110
|
-
private getRenderOptions = () => {
|
|
111
|
-
const props = this.props
|
|
112
|
-
const getState = () => this.state
|
|
107
|
+
private getRenderOptions = (): RenderOptions<TProps, TState> => {
|
|
108
|
+
const props: TProps = { ...this.props }
|
|
109
|
+
const getState = () => ({ ...this.state })
|
|
113
110
|
const updateState = (stateChanges: PartialElement<TState>, skipRender?: boolean) => {
|
|
114
|
-
const currentState = this.state
|
|
111
|
+
const currentState = { ...this.state }
|
|
115
112
|
const newState = { ...currentState, ...stateChanges }
|
|
116
113
|
if (this.compareState(currentState, newState)) {
|
|
117
|
-
this.state
|
|
114
|
+
this.state = newState
|
|
118
115
|
!skipRender && this.updateComponent()
|
|
119
116
|
}
|
|
120
117
|
}
|
|
121
118
|
|
|
122
|
-
const returnValue
|
|
119
|
+
const returnValue = {
|
|
123
120
|
props,
|
|
124
121
|
getState,
|
|
125
122
|
injector: this.injector,
|
|
126
123
|
updateState,
|
|
127
|
-
children: this.shadeChildren
|
|
124
|
+
children: this.shadeChildren,
|
|
128
125
|
element: this,
|
|
129
126
|
}
|
|
130
127
|
|
|
@@ -141,6 +138,10 @@ export const Shade = <TProps, TState = unknown>(o: ShadeOptions<TProps, TState>)
|
|
|
141
138
|
public updateComponent() {
|
|
142
139
|
const renderResult = this.render(this.getRenderOptions())
|
|
143
140
|
|
|
141
|
+
if (renderResult === null) {
|
|
142
|
+
this.innerHTML = ''
|
|
143
|
+
}
|
|
144
|
+
|
|
144
145
|
if (typeof renderResult === 'string') {
|
|
145
146
|
this.innerHTML = renderResult
|
|
146
147
|
}
|
|
@@ -162,12 +163,8 @@ export const Shade = <TProps, TState = unknown>(o: ShadeOptions<TProps, TState>)
|
|
|
162
163
|
* Finialize the component initialization after it gets the Props. Called by the framework internally
|
|
163
164
|
*/
|
|
164
165
|
public callConstructed() {
|
|
165
|
-
if (this.props.isDisposed) {
|
|
166
|
-
return
|
|
167
|
-
}
|
|
168
|
-
|
|
169
166
|
;(o as any).getInitialState &&
|
|
170
|
-
this.state
|
|
167
|
+
(this.state = (o as any).getInitialState({ props: { ...this.props }, injector: this.injector }))
|
|
171
168
|
|
|
172
169
|
this.updateComponent()
|
|
173
170
|
this.createResources()
|
|
@@ -199,12 +196,12 @@ export const Shade = <TProps, TState = unknown>(o: ShadeOptions<TProps, TState>)
|
|
|
199
196
|
return this._injector
|
|
200
197
|
}
|
|
201
198
|
|
|
202
|
-
const fromState = (this.state
|
|
199
|
+
const fromState = (this.state as any)?.injector
|
|
203
200
|
if (fromState && fromState instanceof Injector) {
|
|
204
201
|
return fromState
|
|
205
202
|
}
|
|
206
203
|
|
|
207
|
-
const fromProps = (this.props
|
|
204
|
+
const fromProps = (this.props as any)?.injector
|
|
208
205
|
if (fromProps && fromProps instanceof Injector) {
|
|
209
206
|
return fromProps
|
|
210
207
|
}
|
|
@@ -224,10 +221,9 @@ export const Shade = <TProps, TState = unknown>(o: ShadeOptions<TProps, TState>)
|
|
|
224
221
|
|
|
225
222
|
private resources: Disposable[] = []
|
|
226
223
|
|
|
227
|
-
constructor(_props: TProps) {
|
|
224
|
+
constructor(_props: TProps & { children?: JSX.Element[] }) {
|
|
228
225
|
super()
|
|
229
|
-
this.props =
|
|
230
|
-
this.state = new ObservableValue()
|
|
226
|
+
this.props = _props
|
|
231
227
|
}
|
|
232
228
|
} as any as CustomElementConstructor,
|
|
233
229
|
)
|
|
@@ -237,11 +233,11 @@ export const Shade = <TProps, TState = unknown>(o: ShadeOptions<TProps, TState>)
|
|
|
237
233
|
|
|
238
234
|
return (props: TProps, children: ChildrenList) => {
|
|
239
235
|
const el = document.createElement(customElementName, {
|
|
240
|
-
...props,
|
|
236
|
+
...(props as TProps & ElementCreationOptions),
|
|
241
237
|
}) as JSX.Element<TProps, TState>
|
|
242
|
-
el.props
|
|
238
|
+
el.props = props
|
|
243
239
|
|
|
244
|
-
el.shadeChildren
|
|
240
|
+
el.shadeChildren = children
|
|
245
241
|
return el as JSX.Element
|
|
246
242
|
}
|
|
247
243
|
}
|
|
@@ -7,7 +7,7 @@ global.TextDecoder = TextDecoder as any
|
|
|
7
7
|
|
|
8
8
|
import { initializeShadeRoot } from './initialize'
|
|
9
9
|
import { Shade } from './shade'
|
|
10
|
-
import { createComponent } from './shade-component'
|
|
10
|
+
import { createComponent, createFragment } from './shade-component'
|
|
11
11
|
|
|
12
12
|
describe('Shades integration tests', () => {
|
|
13
13
|
beforeEach(() => (document.body.innerHTML = '<div id="root"></div>'))
|
|
@@ -27,6 +27,89 @@ describe('Shades integration tests', () => {
|
|
|
27
27
|
expect(document.body.innerHTML).toBe('<div id="root"><shades-example><div>Hello</div></shades-example></div>')
|
|
28
28
|
})
|
|
29
29
|
|
|
30
|
+
it('Should mount a custom component with a string render result', () => {
|
|
31
|
+
const injector = new Injector()
|
|
32
|
+
const rootElement = document.getElementById('root') as HTMLDivElement
|
|
33
|
+
|
|
34
|
+
const ExampleComponent = Shade({ render: () => 'Hello', shadowDomName: 'shades-string-render-result' })
|
|
35
|
+
|
|
36
|
+
initializeShadeRoot({
|
|
37
|
+
injector,
|
|
38
|
+
rootElement,
|
|
39
|
+
jsxElement: <ExampleComponent />,
|
|
40
|
+
})
|
|
41
|
+
expect(document.body.innerHTML).toBe(
|
|
42
|
+
'<div id="root"><shades-string-render-result>Hello</shades-string-render-result></div>',
|
|
43
|
+
)
|
|
44
|
+
})
|
|
45
|
+
|
|
46
|
+
it('Should mount a custom component with null render result', () => {
|
|
47
|
+
const injector = new Injector()
|
|
48
|
+
const rootElement = document.getElementById('root') as HTMLDivElement
|
|
49
|
+
|
|
50
|
+
const ExampleComponent = Shade({ render: () => null, shadowDomName: 'shades-null-render-result' })
|
|
51
|
+
|
|
52
|
+
initializeShadeRoot({
|
|
53
|
+
injector,
|
|
54
|
+
rootElement,
|
|
55
|
+
jsxElement: <ExampleComponent />,
|
|
56
|
+
})
|
|
57
|
+
expect(document.body.innerHTML).toBe('<div id="root"><shades-null-render-result></shades-null-render-result></div>')
|
|
58
|
+
})
|
|
59
|
+
|
|
60
|
+
it('Should mount a custom component with a document fragment render result', () => {
|
|
61
|
+
const injector = new Injector()
|
|
62
|
+
const rootElement = document.getElementById('root') as HTMLDivElement
|
|
63
|
+
|
|
64
|
+
const ExampleComponent = Shade({
|
|
65
|
+
render: () => (
|
|
66
|
+
<>
|
|
67
|
+
<p>1</p>
|
|
68
|
+
<p>2</p>
|
|
69
|
+
</>
|
|
70
|
+
),
|
|
71
|
+
shadowDomName: 'shades-fragment-render-result',
|
|
72
|
+
})
|
|
73
|
+
|
|
74
|
+
initializeShadeRoot({
|
|
75
|
+
injector,
|
|
76
|
+
rootElement,
|
|
77
|
+
jsxElement: <ExampleComponent />,
|
|
78
|
+
})
|
|
79
|
+
expect(document.body.innerHTML).toBe(
|
|
80
|
+
'<div id="root"><shades-fragment-render-result><p>1</p><p>2</p></shades-fragment-render-result></div>',
|
|
81
|
+
)
|
|
82
|
+
})
|
|
83
|
+
|
|
84
|
+
it('Should mount a custom component with a document fragment that contains custom components', () => {
|
|
85
|
+
const injector = new Injector()
|
|
86
|
+
const rootElement = document.getElementById('root') as HTMLDivElement
|
|
87
|
+
|
|
88
|
+
const CustomComponent = Shade({
|
|
89
|
+
shadowDomName: 'shades-fragment-test-custom-component',
|
|
90
|
+
render: () => <p>Hello</p>,
|
|
91
|
+
})
|
|
92
|
+
|
|
93
|
+
const ExampleComponent = Shade({
|
|
94
|
+
render: () => (
|
|
95
|
+
<>
|
|
96
|
+
<CustomComponent />
|
|
97
|
+
<CustomComponent />
|
|
98
|
+
</>
|
|
99
|
+
),
|
|
100
|
+
shadowDomName: 'shades-fragment-render-result-2',
|
|
101
|
+
})
|
|
102
|
+
|
|
103
|
+
initializeShadeRoot({
|
|
104
|
+
injector,
|
|
105
|
+
rootElement,
|
|
106
|
+
jsxElement: <ExampleComponent />,
|
|
107
|
+
})
|
|
108
|
+
expect(document.body.innerHTML).toBe(
|
|
109
|
+
'<div id="root"><shades-fragment-render-result-2><shades-fragment-test-custom-component><p>Hello</p></shades-fragment-test-custom-component><shades-fragment-test-custom-component><p>Hello</p></shades-fragment-test-custom-component></shades-fragment-render-result-2></div>',
|
|
110
|
+
)
|
|
111
|
+
})
|
|
112
|
+
|
|
30
113
|
it('Should mount nested Shades components', () => {
|
|
31
114
|
const injector = new Injector()
|
|
32
115
|
const rootElement = document.getElementById('root') as HTMLDivElement
|
|
@@ -134,15 +217,89 @@ describe('Shades integration tests', () => {
|
|
|
134
217
|
|
|
135
218
|
const plus = () => document.getElementById('plus')?.click()
|
|
136
219
|
const minus = () => document.getElementById('minus')?.click()
|
|
220
|
+
const expectCount = (count: number) => expect(document.body.innerHTML).toContain(`Count is ${count}`)
|
|
137
221
|
|
|
138
|
-
|
|
222
|
+
expectCount(0)
|
|
139
223
|
plus()
|
|
140
|
-
|
|
224
|
+
expectCount(1)
|
|
141
225
|
plus()
|
|
142
|
-
|
|
226
|
+
expectCount(2)
|
|
143
227
|
|
|
144
228
|
minus()
|
|
145
229
|
minus()
|
|
146
|
-
|
|
230
|
+
expectCount(0)
|
|
231
|
+
})
|
|
232
|
+
|
|
233
|
+
it('Should allow children update after unmount and remount', () => {
|
|
234
|
+
const injector = new Injector()
|
|
235
|
+
const rootElement = document.getElementById('root') as HTMLDivElement
|
|
236
|
+
const Parent = Shade<unknown, { areChildrenVisible: boolean }>({
|
|
237
|
+
shadowDomName: 'shade-remount-parent',
|
|
238
|
+
getInitialState: () => ({ areChildrenVisible: true }),
|
|
239
|
+
render: ({ children, getState, updateState }) => (
|
|
240
|
+
<div>
|
|
241
|
+
<button
|
|
242
|
+
id="showHideChildren"
|
|
243
|
+
onclick={() => {
|
|
244
|
+
updateState({ areChildrenVisible: !getState().areChildrenVisible })
|
|
245
|
+
}}
|
|
246
|
+
>
|
|
247
|
+
Toggle
|
|
248
|
+
</button>
|
|
249
|
+
{getState().areChildrenVisible ? children : <div />}
|
|
250
|
+
</div>
|
|
251
|
+
),
|
|
252
|
+
})
|
|
253
|
+
|
|
254
|
+
const Child = Shade({
|
|
255
|
+
shadowDomName: 'example-remount-child',
|
|
256
|
+
getInitialState: () => ({ count: 0 }),
|
|
257
|
+
render: ({ getState, updateState }) => {
|
|
258
|
+
const { count } = getState()
|
|
259
|
+
return (
|
|
260
|
+
<div>
|
|
261
|
+
Count is {getState().count.toString()}
|
|
262
|
+
<button id="plus" onclick={() => updateState({ count: count + 1 })}>
|
|
263
|
+
+
|
|
264
|
+
</button>
|
|
265
|
+
<button id="minus" onclick={() => updateState({ count: count - 1 })}>
|
|
266
|
+
-
|
|
267
|
+
</button>
|
|
268
|
+
</div>
|
|
269
|
+
)
|
|
270
|
+
},
|
|
271
|
+
})
|
|
272
|
+
|
|
273
|
+
initializeShadeRoot({
|
|
274
|
+
injector,
|
|
275
|
+
rootElement,
|
|
276
|
+
jsxElement: (
|
|
277
|
+
<Parent>
|
|
278
|
+
<Child />
|
|
279
|
+
</Parent>
|
|
280
|
+
),
|
|
281
|
+
})
|
|
282
|
+
|
|
283
|
+
const plus = () => document.getElementById('plus')?.click()
|
|
284
|
+
const minus = () => document.getElementById('minus')?.click()
|
|
285
|
+
const expectCount = (count: number) => expect(document.body.innerHTML).toContain(`Count is ${count}`)
|
|
286
|
+
const toggleChildren = () => document.getElementById('showHideChildren')?.click()
|
|
287
|
+
|
|
288
|
+
expectCount(0)
|
|
289
|
+
plus()
|
|
290
|
+
expectCount(1)
|
|
291
|
+
|
|
292
|
+
toggleChildren()
|
|
293
|
+
|
|
294
|
+
expect(document.getElementById('plus')).toBeNull()
|
|
295
|
+
|
|
296
|
+
toggleChildren()
|
|
297
|
+
expect(document.getElementById('plus')).toBeDefined()
|
|
298
|
+
|
|
299
|
+
// expectCount(0)
|
|
300
|
+
plus()
|
|
301
|
+
expectCount(1)
|
|
302
|
+
minus()
|
|
303
|
+
expectCount(0)
|
|
147
304
|
})
|
|
148
305
|
})
|