Skip to content

Commit 0fac84b

Browse files
alansouzatialansouzati
committed
1.4.0: fixed bug with nested string children
1 parent 11b9fef commit 0fac84b

File tree

6 files changed

+500
-456
lines changed

6 files changed

+500
-456
lines changed

‎.npmignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,7 @@ build/Release
2525
# Dependency directory
2626
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
2727
node_modules
28+
29+
src
30+
31+
test

‎package.json‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
{
22
"name": "jsx-to-string",
3-
"version": "1.3.1",
3+
"version": "1.4.0",
44
"description": "Parse your React JSX component to string",
55
"main": "lib/index.js",
66
"scripts": {
7+
"prepublish": "npm run test",
78
"build": "babel src --out-dir lib --copy-files --loose-mode",
8-
"test": "babel-node ./test/index.js"
9+
"test": "jest"
910
},
1011
"repository": {
1112
"type": "git",
@@ -25,7 +26,7 @@
2526
},
2627
"homepage": "https://github.com/alansouzati/jsx-to-string#readme",
2728
"dependencies": {
28-
"immutable": "4.0.0-rc.2",
29+
"immutable": "^4.0.0-rc.9",
2930
"json-stringify-pretty-compact": "^1.0.1",
3031
"react": "^0.14.0"
3132
},
@@ -36,6 +37,7 @@
3637
"babel-plugin-transform-object-rest-spread": "^6.3.13",
3738
"babel-preset-es2015": "^6.1.18",
3839
"babel-preset-react": "^6.1.18",
40+
"jest": "^22.4.4",
3941
"tape": "^4.0.0"
4042
}
4143
}

‎src/index.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { isValidElement } from 'react';
22
import stringify from 'json-stringify-pretty-compact';
33
import { isImmutable } from 'immutable';
44

@@ -17,7 +17,7 @@ function stringifyObject (object, opts) {
1717
result = {};
1818
Object.keys(object).map(key => {
1919
let value = object[key];
20-
if (React.isValidElement(value)) {
20+
if (isValidElement(value)) {
2121
value = jsxToString(value, opts);
2222
} else if (Array.isArray(value)) {
2323
value = value.map(item => stringifyObject(item, opts));
@@ -52,7 +52,7 @@ function serializeItem (item, options, delimit=true) {
5252
const delimiter = delimit ? ', ' : `\n${indentation}`;
5353
const items = item.map(i => serializeItem(i, options)).join(delimiter);
5454
result = delimit ? `[${items}]` : `${items}` ;
55-
} else if (React.isValidElement(item)) {
55+
} else if (isValidElement(item)) {
5656
result = jsxToString(item, options);
5757
} else if (typeof item === 'object') {
5858
result = stringify(stringifyObject(item, options));
@@ -138,6 +138,9 @@ function jsxToString (component, options) {
138138
componentData.children = component.props.children
139139
.reduce((a, b) => a.concat(b), []) // handle Array of Arrays
140140
.filter(child => {
141+
if (child && !isValidElement(child)) {
142+
return true;
143+
}
141144
const childShouldBeRemoved = child &&
142145
child.type &&
143146
opts.ignoreTags.indexOf(child.type.displayName || child.type.name || child.type) === -1;

‎test/__snapshots__/index.test.js.snap‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`test a basic react component 1`] = `"<Basic />"`;
4+
5+
exports[`test a basic react component with default props 1`] = `"<DefaultProp test='abc' />"`;
6+
7+
exports[`test a basic react component with key props 1`] = `"<DefaultProp key='abc' />"`;
8+
9+
exports[`test a complex react component with boolean props and shortBooleanSyntax on 1`] = `
10+
"<Basic test='abc'
11+
test2={4}
12+
test4
13+
test5={{\\"abc\\": \\"abc\\"}}
14+
test6=''
15+
test7={false}
16+
test8>
17+
<BasicChild test1
18+
test2={false}
19+
test3={5}
20+
test4={6}>
21+
Title 1
22+
</BasicChild>
23+
</Basic>"
24+
`;
25+
26+
exports[`test a react component with a null children 1`] = `
27+
"<Basic>
28+
<BasicChild>
29+
<BasicChild>
30+
<BasicChild>
31+
Title 2
32+
</BasicChild>
33+
</BasicChild>
34+
</BasicChild>
35+
</Basic>"
36+
`;
37+
38+
exports[`test a react component with basic props 1`] = `
39+
"<Basic test='abc'
40+
test2={4}
41+
test4={true}
42+
test5={{\\"abc\\": \\"abc\\"}}
43+
test6='' />"
44+
`;
45+
46+
exports[`test a react component with custom displayName 1`] = `"<CustomDisplayName />"`;
47+
48+
exports[`test a react component with custom name function 1`] = `
49+
"<Basic test1={_testCallBack1}
50+
test2={_testCallBack2} />"
51+
`;
52+
53+
exports[`test a react component with dynamic keyValueOverride 1`] = `"<Basic test1={testCallback} />"`;
54+
55+
exports[`test a react component with dynamic keyValueOverride 2`] = `"<Basic test1={_thisIsNotAFunction} />"`;
56+
57+
exports[`test a react component with function code enabled 1`] = `
58+
"<Basic test1={function _testCallBack1() {
59+
//no-op
60+
}} />"
61+
`;
62+
63+
exports[`test a react component with function name enabled 1`] = `"<Basic test1={_testCallBack1} />"`;
64+
65+
exports[`test a react component with function props 1`] = `"<Basic test1={...} />"`;
66+
67+
exports[`test a react component with ignore props 1`] = `
68+
"<Basic>
69+
Test
70+
</Basic>"
71+
`;
72+
73+
exports[`test a react component with immutable prop 1`] = `"<Basic prop={{\\"test\\": \\"abc\\"}} />"`;
74+
75+
exports[`test a react component with multiple children 1`] = `
76+
"<Basic>
77+
<BasicChild>
78+
<BasicChild>
79+
<BasicChild>
80+
Title
81+
</BasicChild>
82+
<BasicChild>
83+
Title 2
84+
</BasicChild>
85+
</BasicChild>
86+
</BasicChild>
87+
</Basic>"
88+
`;
89+
90+
exports[`test a react component with multiple children and immutable props 1`] = `
91+
"<Basic>
92+
<BasicChild>
93+
<BasicChild props={{\\"test\\": \\"abc\\"}}>
94+
<BasicChild>
95+
Title
96+
</BasicChild>
97+
<BasicChild>
98+
Title 2
99+
</BasicChild>
100+
</BasicChild>
101+
</BasicChild>
102+
</Basic>"
103+
`;
104+
105+
exports[`test a react component with multiple ignore tags 1`] = `
106+
"<Basic>
107+
<p>
108+
Test
109+
</p>
110+
</Basic>"
111+
`;
112+
113+
exports[`test a react component with null prop 1`] = `
114+
<Basic
115+
prop={null}
116+
/>
117+
`;
118+
119+
exports[`test a react component with react children 1`] = `
120+
"<Basic>
121+
<BasicChild />
122+
</Basic>"
123+
`;
124+
125+
exports[`test a react component with react props 1`] = `"<Basic test1={<Basic />} />"`;
126+
127+
exports[`test a react component with spread operator 1`] = `
128+
"<Basic prop1={true}
129+
prop2='active' />"
130+
`;
131+
132+
exports[`test a react component with text children 1`] = `
133+
"<Basic>
134+
Test
135+
</Basic>"
136+
`;
137+
138+
exports[`test a react component with undefined prop 1`] = `
139+
<Basic
140+
prop={undefined}
141+
/>
142+
`;
143+
144+
exports[`test a react single component with ignore tags 1`] = `
145+
"<div>
146+
<span>
147+
test
148+
</span>
149+
</div>"
150+
`;
151+
152+
exports[`test a simple react component with boolean props and shortBooleanSyntax on 1`] = `
153+
"<Basic test
154+
test2={false}
155+
test3 />"
156+
`;
157+
158+
exports[`test nested components with text in between 1`] = `
159+
"<div>
160+
one
161+
<div>
162+
two
163+
<span>
164+
three
165+
</span>
166+
</div>
167+
</div>"
168+
`;

0 commit comments

Comments
 (0)