Updated the hydration test harness to cover a bit more
Brian Vaughn committed
Jun 17, 2019 at 14:37 UTC
717af9f5c339523f4855c555b8c039f83f0fca8b
3 files changed
+38
-19
shells/dev/app/Hydration/index.js
renamed
+36
-17
@@ -1,6 +1,6 @@
1
// @flow
2
3
-import React, { useDebugValue, useState } from 'react';
3
+import React, { Fragment, useDebugValue, useState } from 'react';
4
5
const div = document.createElement('div');
6
const exmapleFunction = () => {};
@@ -92,23 +92,42 @@ function useInnerBaz() {
92
93
export default function Hydration() {
94
return (
95
- <ChildComponent
96
- html_element={div}
97
- fn={exmapleFunction}
98
- symbol={Symbol('symbol')}
99
- react_element={<span />}
100
- array_buffer={typedArray.buffer}
101
- typed_array={typedArray}
102
- date={new Date()}
103
- array={arrayOfArrays}
104
- object={objectOfObjects}
105
- />
95
+ <Fragment>
96
+ <h1>Hydration</h1>
97
+ <DehydratableProps
98
+ html_element={div}
99
+ fn={exmapleFunction}
100
+ symbol={Symbol('symbol')}
101
+ react_element={<span />}
102
+ array_buffer={typedArray.buffer}
103
+ typed_array={typedArray}
104
+ date={new Date()}
105
+ array={arrayOfArrays}
106
+ object={objectOfObjects}
107
+ />
108
+ <DeepHooks />
109
+ </Fragment>
110
);
111
}
112
109
-function ChildComponent(props: any) {
110
- useOuterFoo();
111
- useOuterBar();
112
- useOuterBaz();
113
- return null;
113
+function DehydratableProps({ array, object }: any) {
114
+ return (
115
+ <ul>
116
+ <li>array: {JSON.stringify(array, null, 2)}</li>
117
+ <li>object: {JSON.stringify(object, null, 2)}</li>
118
+ </ul>
119
+ );
120
+}
121
+
122
+function DeepHooks(props: any) {
123
+ const foo = useOuterFoo();
124
+ const bar = useOuterBar();
125
+ const baz = useOuterBaz();
126
+ return (
127
+ <ul>
128
+ <li>foo: {foo}</li>
129
+ <li>bar: {bar}</li>
130
+ <li>baz: {baz}</li>
131
+ </ul>
132
+ );
133
}
shells/dev/app/InspectableElements/InspectableElements.js
-2
@@ -4,7 +4,6 @@ import React, { Fragment } from 'react';
4
import Contexts from './Contexts';
5
import CustomHooks from './CustomHooks';
6
import CustomObject from './CustomObject';
7
-import Hydration from './Hydration';
7
import NestedProps from './NestedProps';
8
9
// TODO Add Immutable JS example
@@ -17,7 +16,6 @@ export default function InspectableElements() {
16
<Contexts />
17
<CustomHooks />
18
<CustomObject />
20
- <Hydration />
19
</Fragment>
20
);
21
}
shells/dev/app/index.js
+2
@@ -10,6 +10,7 @@ import {
10
import DeeplyNestedComponents from './DeeplyNestedComponents';
11
import EditableProps from './EditableProps';
12
import ElementTypes from './ElementTypes';
13
+import Hydration from './Hydration';
14
import InspectableElements from './InspectableElements';
15
import InteractionTracing from './InteractionTracing';
16
import PriorityLevels from './PriorityLevels';
@@ -36,6 +37,7 @@ function mountTestApp() {
37
mountHelper(ToDoList);
38
mountHelper(InteractionTracing);
39
mountHelper(InspectableElements);
40
+ mountHelper(Hydration);
41
mountHelper(ElementTypes);
42
mountHelper(EditableProps);
43
mountHelper(PriorityLevels);