fix: use React.Fragment via props while React version is over 16.2.0

akxcv · Dec 30, 2020 · 704f758 · 704f758
1 parent 1b6c2c6
commit 704f758
Show file tree

Hide file tree

Showing 6 changed files with 157 additions and 15 deletions.
diff --git a/dist/vuera.cjs.js b/dist/vuera.cjs.js
@@ -8,6 +8,30 @@ var React = _interopDefault(require('react'));
 var ReactDOM = _interopDefault(require('react-dom'));
 var Vue = _interopDefault(require('vue'));
 
+function compare(a, b) {
+  var v1 = a.split('.').map(function (n) {
+    return Number(n);
+  });
+  var v2 = b.split('.').map(function (n) {
+    return Number(n);
+  });
+  var len = Math.min(v1.length, v2.length);
+  var result = 0;
+  for (var i = 0; i < len; i += 1) {
+    if (v1[i] === v2[i]) {
+      continue;
+    } else {
+      result = v1[i] > v2[i] ? 1 : -1;
+      break;
+    }
+  }
+  return result === 0 ? v1.length - v2.length : result;
+}
+
+function gte(a, b) {
+  return compare(a, b) >= 0;
+}
+
 var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
   return typeof obj;
 } : function (obj) {
@@ -171,11 +195,21 @@ var slicedToArray = function () {
 
 var VUE_COMPONENT_NAME = 'vuera-internal-component-name';
 
-var wrapReactChildren = function wrapReactChildren(createElement, children) {
-  return createElement('vuera-internal-react-wrapper', {
+var wrapReactChildren = function wrapReactChildren(createElement, children, _useFragment) {
+  /**
+   * allow users to remove useless by _useFragment property while your React
+   * version is greater then or equal to 16.2.0
+   */
+  var useFragment = React.Fragment !== undefined && gte(React.version, '16.2.0') && _useFragment;
+
+  createElement('vuera-internal-react-wrapper', {
     props: {
       component: function component() {
-        return React.createElement(
+        return useFragment ? React.createElement(
+          React.Fragment,
+          null,
+          children
+        ) : React.createElement(
           'div',
           null,
           children
@@ -263,7 +297,7 @@ var VueContainer = function (_React$Component) {
           return createElement(VUE_COMPONENT_NAME, {
             props: this.$data,
             on: on
-          }, [wrapReactChildren(createElement, this.children)]);
+          }, [wrapReactChildren(createElement, this.children, !!(props && props._useFragment))]);
         },
 
         components: (_components = {}, defineProperty(_components, VUE_COMPONENT_NAME, component), defineProperty(_components, 'vuera-internal-react-wrapper', ReactWrapper), _components)

diff --git a/dist/vuera.es.js b/dist/vuera.es.js
@@ -2,6 +2,30 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Vue from 'vue';
 
+function compare(a, b) {
+  var v1 = a.split('.').map(function (n) {
+    return Number(n);
+  });
+  var v2 = b.split('.').map(function (n) {
+    return Number(n);
+  });
+  var len = Math.min(v1.length, v2.length);
+  var result = 0;
+  for (var i = 0; i < len; i += 1) {
+    if (v1[i] === v2[i]) {
+      continue;
+    } else {
+      result = v1[i] > v2[i] ? 1 : -1;
+      break;
+    }
+  }
+  return result === 0 ? v1.length - v2.length : result;
+}
+
+function gte(a, b) {
+  return compare(a, b) >= 0;
+}
+
 var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
   return typeof obj;
 } : function (obj) {
@@ -165,11 +189,21 @@ var slicedToArray = function () {
 
 var VUE_COMPONENT_NAME = 'vuera-internal-component-name';
 
-var wrapReactChildren = function wrapReactChildren(createElement, children) {
-  return createElement('vuera-internal-react-wrapper', {
+var wrapReactChildren = function wrapReactChildren(createElement, children, _useFragment) {
+  /**
+   * allow users to remove useless by _useFragment property while your React
+   * version is greater then or equal to 16.2.0
+   */
+  var useFragment = React.Fragment !== undefined && gte(React.version, '16.2.0') && _useFragment;
+
+  createElement('vuera-internal-react-wrapper', {
     props: {
       component: function component() {
-        return React.createElement(
+        return useFragment ? React.createElement(
+          React.Fragment,
+          null,
+          children
+        ) : React.createElement(
           'div',
           null,
           children
@@ -257,7 +291,7 @@ var VueContainer = function (_React$Component) {
           return createElement(VUE_COMPONENT_NAME, {
             props: this.$data,
             on: on
-          }, [wrapReactChildren(createElement, this.children)]);
+          }, [wrapReactChildren(createElement, this.children, !!(props && props._useFragment))]);
         },
 
         components: (_components = {}, defineProperty(_components, VUE_COMPONENT_NAME, component), defineProperty(_components, 'vuera-internal-react-wrapper', ReactWrapper), _components)

diff --git a/dist/vuera.iife.js b/dist/vuera.iife.js
@@ -5,6 +5,30 @@ React = React && React.hasOwnProperty('default') ? React['default'] : React;
 ReactDOM = ReactDOM && ReactDOM.hasOwnProperty('default') ? ReactDOM['default'] : ReactDOM;
 Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue;
 
+function compare(a, b) {
+  var v1 = a.split('.').map(function (n) {
+    return Number(n);
+  });
+  var v2 = b.split('.').map(function (n) {
+    return Number(n);
+  });
+  var len = Math.min(v1.length, v2.length);
+  var result = 0;
+  for (var i = 0; i < len; i += 1) {
+    if (v1[i] === v2[i]) {
+      continue;
+    } else {
+      result = v1[i] > v2[i] ? 1 : -1;
+      break;
+    }
+  }
+  return result === 0 ? v1.length - v2.length : result;
+}
+
+function gte(a, b) {
+  return compare(a, b) >= 0;
+}
+
 var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
   return typeof obj;
 } : function (obj) {
@@ -168,11 +192,21 @@ var slicedToArray = function () {
 
 var VUE_COMPONENT_NAME = 'vuera-internal-component-name';
 
-var wrapReactChildren = function wrapReactChildren(createElement, children) {
-  return createElement('vuera-internal-react-wrapper', {
+var wrapReactChildren = function wrapReactChildren(createElement, children, _useFragment) {
+  /**
+   * allow users to remove useless by _useFragment property while your React
+   * version is greater then or equal to 16.2.0
+   */
+  var useFragment = React.Fragment !== undefined && gte(React.version, '16.2.0') && _useFragment;
+
+  createElement('vuera-internal-react-wrapper', {
     props: {
       component: function component() {
-        return React.createElement(
+        return useFragment ? React.createElement(
+          React.Fragment,
+          null,
+          children
+        ) : React.createElement(
           'div',
           null,
           children
@@ -260,7 +294,7 @@ var VueContainer = function (_React$Component) {
           return createElement(VUE_COMPONENT_NAME, {
             props: this.$data,
             on: on
-          }, [wrapReactChildren(createElement, this.children)]);
+          }, [wrapReactChildren(createElement, this.children, !!(props && props._useFragment))]);
         },
 
         components: (_components = {}, defineProperty(_components, VUE_COMPONENT_NAME, component), defineProperty(_components, 'vuera-internal-react-wrapper', ReactWrapper), _components)

diff --git a/src/utils/compare.js b/src/utils/compare.js
@@ -0,0 +1,19 @@
+function compare (a, b) {
+  const v1 = a.split('.').map(n => Number(n))
+  const v2 = b.split('.').map(n => Number(n))
+  const len = Math.min(v1.length, v2.length)
+  let result = 0
+  for (let i = 0; i < len; i += 1) {
+    if (v1[i] === v2[i]) {
+      continue
+    } else {
+      result = v1[i] > v2[i] ? 1 : -1
+      break
+    }
+  }
+  return result === 0 ? v1.length - v2.length : result
+}
+
+export function gte (a, b) {
+  return compare(a, b) >= 0
+}
diff --git a/src/wrappers/Vue.js b/src/wrappers/Vue.js
@@ -2,15 +2,25 @@ import React from 'react'
 import Vue from 'vue'
 import ReactWrapper from './React'
 import { config } from '../../src'
+import { gte } from '../utils/compare'
 
 const VUE_COMPONENT_NAME = 'vuera-internal-component-name'
 
-const wrapReactChildren = (createElement, children) =>
+const wrapReactChildren = (createElement, children, _useFragment) => {
+  /**
+   * allow users to remove useless by _useFragment property while your React
+   * version is greater then or equal to 16.2.0
+   */
+  const useFragment = React.Fragment !== undefined && gte(React.version, '16.2.0') && _useFragment
+
   createElement('vuera-internal-react-wrapper', {
     props: {
-      component: () => <div>{children}</div>,
+      component: () => {
+        return useFragment ? <React.Fragment>{children}</React.Fragment> : <div>{children}</div>
+      },
     },
   })
+}
 
 export default class VueContainer extends React.Component {
   constructor (props) {
@@ -74,7 +84,7 @@ export default class VueContainer extends React.Component {
             props: this.$data,
             on,
           },
-          [wrapReactChildren(createElement, this.children)]
+          [wrapReactChildren(createElement, this.children, !!(props && props._useFragment))]
         )
       },
       components: {

diff --git a/tests/utils/compare-test.js b/tests/utils/compare-test.js
@@ -0,0 +1,11 @@
+import { gte } from '../../src/utils/compare'
+
+describe('compare', () => {
+  it('returns true for React version is 16.3.0', () => {
+    expect(gte('16.3.0', '16.2.0')).toBe(true)
+  })
+
+  it('returns true for React version is 15.2.0', () => {
+    expect(gte('15.2.0', '16.2.0')).toBe(false)
+  })
+})