/
JSXGenerator.js
59 lines (49 loc) · 1.65 KB
/
JSXGenerator.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import React from 'react';
import ReactDOMServer from 'react-dom/server';
function propToString(prop, inJS = false) {
let result = '';
let wrapInBraces = !inJS;
if (React.isValidElement(prop)) {
result = generateJSX(prop);
} else if (Array.isArray(prop)) {
result = '[' + prop
.map(item => propToString(item, true))
.join(', ') + ']';
} else if (typeof prop === 'string') {
result = JSON.stringify(prop);
wrapInBraces = false;
} else {
result = JSON.stringify(prop);
}
return wrapInBraces ? '{' + result + '}' : result;
}
function generateJSX(component) {
if (!React.isValidElement(component)) {
return component;
}
const type = component.type.name || component.type;
let jsxProps = Object.keys(component.props)
.filter(key => key !== 'children')
.filter(key => component.props[key] !== undefined)
.filter(key => {
const componentWithoutProp = React.cloneElement(component, {[`${key}`]: undefined});
const codeWithProp = ReactDOMServer.renderToStaticMarkup(component);
const codeWithoutProp = ReactDOMServer.renderToStaticMarkup(componentWithoutProp);
return codeWithProp !== codeWithoutProp;
})
.map(key => {
if (component.props[key] === true) {
return key;
}
return `${key}=${propToString(component.props[key])}`;
})
.join(' ');
if (jsxProps) {
jsxProps = ' ' + jsxProps;
}
return React.Children.count(component.props.children) ?
`<${type}${jsxProps}>${React.Children.map(component.props.children,
childrenComp => generateJSX(childrenComp)).join('')}</${type}>` :
`<${type}${jsxProps} />`;
}
export default generateJSX;