diff --git a/src/stringjsx.js b/src/stringjsx.js
index 7ae48ed..b309671 100644
--- a/src/stringjsx.js
+++ b/src/stringjsx.js
@@ -87,8 +87,9 @@ function render(tagName, attributes) {
const children = extractChildren(arguments);
let result = '';
+ const isFragment = tagName !== null && tagName !== undefined;
- if (tagName) { // null is passed when rendering a fragment
+ if (isFragment) {
result += '<';
result += tagName;
@@ -104,7 +105,10 @@ function render(tagName, attributes) {
} else while(children.length) {
const child = children.shift();
- if (!child) continue;
+ if (child === undefined || child === null) {
+ result += child;
+ continue;
+ }
if (isCollection(child)) {
for (let i = child.length - 1; i >= 0; i--) {
@@ -116,7 +120,7 @@ function render(tagName, attributes) {
}
}
- if (tagName) result += `${tagName}>`;
+ if (isFragment) result += `${tagName}>`;
}
// Read about the fun world of javascript strings
diff --git a/test/stringjsx.js b/test/stringjsx.js
index 33c5f44..d5e83d8 100644
--- a/test/stringjsx.js
+++ b/test/stringjsx.js
@@ -269,6 +269,14 @@ describe('stringjsx', () => {
);
});
+ it('also supports fragments w/ undefined', () => {
+ expect(
+ h(h.Fragment, null,
foo
, bar, baz
).toString()
+ ).to.equal(
+ 'foo
barbaz
'
+ );
+ });
+
// regression test for https://github.com/developit/vhtml/issues/34
it('does not allow cache-based html injection anymore', () => {
const injectable = 'test
';
@@ -302,4 +310,97 @@ describe('stringjsx', () => {
''
)
});
+
+ describe('literal rendering', () => {
+ it('renders the empty string', () => {
+ expect(
+ {''}
.toString()
+ ).to.equal('')
+ });
+
+ it('renders blank strings', () => {
+ expect(
+ {' '} and also {'\n\n\n \t\t\t'}
.toString()
+ ).to.equal(' and also \n\n\n \t\t\t
')
+ });
+
+ it('renders a goofy string', () => {
+ expect(
+ {'haha'}
.toString()
+ ).to.equal('haha
')
+ });
+
+ it('renders numbers', () => {
+ expect(
+
+ {63452}
+
num: {12385}
+
{-882}, {942}
+
.toString()
+ ).to.equal('')
+ });
+
+ it('renders infinities', () => {
+ // impressive
+ expect(
+
+ {Infinity}+{-Infinity}
+
.toString()
+ ).to.equal('Infinity+-Infinity
')
+ });
+
+ it('renders a "very big" number', () => {
+ expect(
+ {5463454363452342352665745632523423423}
.toString()
+ ).to.equal('5.463454363452342e+36
')
+ });
+
+ // TODO: hmm maybe isn't supported by any node tooling yet?
+ // it('renders a bigint', () => {
+ // expect(
+ // {5463454363452342352665745632523423423n}
.toString()
+ // ).to.equal('5463454363452342352665745632523423423
')
+ // });
+
+ // regression test for https://github.com/developit/vhtml/issues/40
+ it('renders zero', () => {
+ expect(
+ {0} elephants carrying {0} trees
.toString()
+ ).to.equal('0 elephants carrying 0 trees
')
+ });
+
+ it('renders booleans', () => {
+ expect(
+
+
{true} love
+
{false} promises |
+
.toString()
+ ).to.equal('')
+ });
+
+ it('renders undefined', () => {
+ expect({undefined} behaviour
.toString())
+ .to.equal('undefined behaviour
')
+ });
+
+ it('renders null', () => {
+ expect({null} and void
.toString())
+ .to.equal('null and void
')
+ });
+
+ it('"renders" an object', () => {
+ expect(object? {{}} object
.toString())
+ .to.equal('object? [object Object] object
')
+ });
+
+ it('renders an array', () => {
+ expect(little bit of {['a', 'b']}
.toString())
+ .to.equal('little bit of ab
')
+ });
+
+ it('renders a date', () => {
+ expect(@ {new Date(8.64e15)}
.toString())
+ .to.equal('@ Sat Sep 13 275760 02:00:00 GMT+0200 (Central European Summer Time)
')
+ });
+ });
});