Don't send HTMLElements through the bridge when inspecting componetns
Brian Vaughn committed
Jun 13, 2019 at 09:09 UTC
5e8678a0a9378dd3583b78e52b8d1117625c66b8
2 files changed
+22
-6
src/devtools/views/utils.js
+11
-6
@@ -70,23 +70,28 @@ export function createRegExp(string: string): RegExp {
70
}
71
72
export function getMetaValueLabel(data: Object): string | null {
73
- switch (data[meta.type]) {
73
+ const name = data[meta.name];
74
+ const type = data[meta.type];
75
+
76
+ switch (type) {
77
+ case 'html_element':
78
+ return name ? `<${name.toLowerCase()} />` : '';
79
case 'react_element':
75
- return `<${data[meta.name]} />`;
80
+ return `<${name} />`;
81
case 'function':
77
- return `${data[meta.name] || 'fn'}()`;
82
+ return `${name || 'fn'}()`;
83
case 'object':
84
return 'Object';
85
case 'date':
86
case 'symbol':
82
- return data[meta.name];
87
+ return name;
88
case 'iterator':
84
- return `${data[meta.name]}(…)`;
89
+ return `${name}(…)`;
90
case 'array_buffer':
91
case 'data_view':
92
case 'array':
93
case 'typed_array':
89
- return `${data[meta.name]}[${data[meta.meta].length}]`;
94
+ return `${name}[${data[meta.meta].length}]`;
95
default:
96
return null;
97
}
src/hydration.js
+11
@@ -50,6 +50,10 @@ function getPropType(data: Object): string | null {
50
return 'react_element';
51
}
52
53
+ if (data instanceof HTMLElement) {
54
+ return 'html_element';
55
+ }
56
+
57
const type = typeof data;
58
if (type === 'object') {
59
if (Array.isArray(data)) {
@@ -132,6 +136,13 @@ export function dehydrate(
136
const type = getPropType(data);
137
138
switch (type) {
139
+ case 'html_element':
140
+ cleaned.push(path);
141
+ return {
142
+ name: data.tagName,
143
+ type: 'html_element',
144
+ };
145
+
146
case 'function':
147
cleaned.push(path);
148
return {