Compile React.Fragment to inferno createFragment call #56

Author: Sampo Kivistö

README.md

@@ -74,6 +74,8 @@ All of the following syntaxes are **reserved** for createFragment call
 
 ```
 
+React.Fragment is also compiled to inferno createFragment call to ease project migration to Inferno https://github.com/infernojs/babel-plugin-inferno/issues/56.
+
 ## Special flags
 
 This plugin provides few special compile time flags that can be used to optimize an inferno application.

dist/index.umd.js

@@ -18,7 +18,7 @@ function isNullOrUndefined(obj) {
 }
 
 function isFragment(name) {
-  return name === 'Fragment' || name === 'Inferno.Fragment';
+  return name === 'Fragment' || name === 'Inferno.Fragment' || name === 'React.Fragment';
 }
 
 var NULL = t.identifier('null');
@@ -115,7 +115,7 @@ function getVNodeType(astNode) {
       flags = VNodeTypes[astName] || VNodeFlags.HtmlElement;
     }
   } else if (astType === 'JSXMemberExpression') {
-    if (astNode.property.name === 'Fragment' && astNode.object.name === 'Inferno') {
+    if (astNode.property.name === 'Fragment') {
       vNodeType = TYPE_FRAGMENT;
     } else {
       vNodeType = TYPE_COMPONENT;

lib/index.js

@@ -1,21 +1,21 @@
 {
   "name": "babel-plugin-inferno",
-  "version": "6.2.0",
+  "version": "6.3.0",
   "description": "Turn JSX into Inferno virtual DOM",
   "repository": "https://github.com/trueadm/babel-plugin-inferno",
   "license": "MIT",
   "main": "lib/index.js",
   "devDependencies": {
     "@babel/core": "7.3.3",
-    "@babel/helper-replace-supers": "7.13.12",
-    "@babel/plugin-proposal-object-rest-spread": "7.13.8",
-    "@babel/preset-env": "^7.13.15",
+    "@babel/helper-replace-supers": "7.14.4",
+    "@babel/plugin-proposal-object-rest-spread": "7.14.4",
+    "@babel/preset-env": "^7.14.4",
     "babel-eslint": "^10.1.0",
     "chai": "^4.3.4",
-    "eslint": "^7.24.0",
-    "mocha": "^8.3.2",
+    "eslint": "^7.27.0",
+    "mocha": "^8.4.0",
     "nyc": "^15.1.0",
-    "rollup": "^2.45.2",
+    "rollup": "^2.50.5",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",

package.json

@@ -478,7 +478,7 @@ describe('Transforms', function () {
               it('Should createFragment non keyed children', function () {
                 expect(transform('<Inferno.Fragment key="foo"><div>1</div><span>foo</span></Inferno.Fragment>')).to.eql('createFragment([createVNode(1, "div", null, "1", 16), createVNode(1, "span", null, "foo", 16)], 4, "foo");');
               });
-              
+
               it('Should ignore all other props', function () {
                 expect(transform('<Inferno.Fragment abc="foobar" id="test" key="foo"><div>1</div><span>foo</span></Inferno.Fragment>')).to.eql('createFragment([createVNode(1, "div", null, "1", 16), createVNode(1, "span", null, "foo", 16)], 4, "foo");');
               });
@@ -492,6 +492,42 @@ describe('Transforms', function () {
                 expect(transform('<Inferno.Fragment key="foo" $HasNonKeyedChildren>{magic}</Inferno.Fragment>')).to.eql('createFragment(magic, 4, "foo");');
               });
             });
+
+            describe('React.Fragment', function () {
+                it('Should createFragment', function () {
+                    expect(transform('<React.Fragment>Test</React.Fragment>')).to.eql('createFragment([createTextVNode("Test")], 4);');
+                });
+
+                it('Should createFragment dynamic children', function () {
+                    expect(transform('<React.Fragment>{dynamic}</React.Fragment>')).to.eql('createFragment(dynamic, 0);');
+                });
+
+                it('Should createFragment keyed children', function () {
+                    expect(transform('<React.Fragment><span key="ok">kk</span><div key="ok2">ok</div></React.Fragment>')).to.eql('createFragment([createVNode(1, "span", null, "kk", 16, null, "ok"), createVNode(1, "div", null, "ok", 16, null, "ok2")], 8);');
+                });
+
+                it('Should createFragment non keyed children', function () {
+                    expect(transform('<React.Fragment><div>1</div><span>foo</span></React.Fragment>')).to.eql('createFragment([createVNode(1, "div", null, "1", 16), createVNode(1, "span", null, "foo", 16)], 4);');
+                });
+
+                // Long syntax specials
+                it('Should createFragment non keyed children', function () {
+                    expect(transform('<React.Fragment key="foo"><div>1</div><span>foo</span></React.Fragment>')).to.eql('createFragment([createVNode(1, "div", null, "1", 16), createVNode(1, "span", null, "foo", 16)], 4, "foo");');
+                });
+
+                it('Should ignore all other props', function () {
+                    expect(transform('<React.Fragment abc="foobar" id="test" key="foo"><div>1</div><span>foo</span></React.Fragment>')).to.eql('createFragment([createVNode(1, "div", null, "1", 16), createVNode(1, "span", null, "foo", 16)], 4, "foo");');
+                });
+
+                // Optimization flags
+                it('Should createFragment non keyed children', function () {
+                    expect(transform('<React.Fragment key="foo" $HasKeyedChildren>{magic}</React.Fragment>')).to.eql('createFragment(magic, 8, "foo");');
+                });
+
+                it('Should createFragment non keyed children', function () {
+                    expect(transform('<React.Fragment key="foo" $HasNonKeyedChildren>{magic}</React.Fragment>')).to.eql('createFragment(magic, 4, "foo");');
+                });
+            });
         });
     });