react-element-to-jsx-string - npm Package Compare versions

Comparing version 11.0.0 to 11.0.1

CHANGELOG.md

@@ -0,1 +1,11 @@
+<a name="11.0.1"></a>
+## [11.0.1](https://github.com/algolia/react-element-to-jsx-string/compare/v11.0.0...v11.0.1) (2017-07-21)
+
+
+### Bug Fixes
+
+* **formatting:** fix an edge case where number and string childrens are not correctly merged ([47572e0](https://github.com/algolia/react-element-to-jsx-string/commit/47572e0))
+
+
+
 <a name="11.0.0"></a>
@@ -2,0 +12,0 @@ # [11.0.0](https://github.com/algolia/react-element-to-jsx-string/compare/v10.1.0...v11.0.0) (2017-07-20)

dist/formatter/formatComplexDataStructure.js

@@ -25,5 +25,5 @@ 'use strict';
 
-var _formatReactElementNode = require('./formatReactElementNode');
+var _formatTreeNode = require('./formatTreeNode');
 
-var _formatReactElementNode2 = _interopRequireDefault(_formatReactElementNode);
+var _formatTreeNode2 = _interopRequireDefault(_formatTreeNode);
 
@@ -46,3 +46,3 @@ var _spacer = require('./spacer');
       if (currentValue && (0, _react.isValidElement)(currentValue)) {
-        return (0, _formatReactElementNode2.default)((0, _parseReactElement2.default)(currentValue, options), true, lvl, options);
+        return (0, _formatTreeNode2.default)((0, _parseReactElement2.default)(currentValue, options), true, lvl, options);
       }
@@ -49,0 +49,0 @@

dist/formatter/formatPropValue.js

@@ -47,2 +47,5 @@ 'use strict';
 
+  // > "Symbols (new in ECMAScript 2015, not yet supported in Flow)"
+  // @see: https://flow.org/en/docs/types/primitives/
+  // $FlowFixMe: Flow does not support Symbol
   if ((typeof propValue === 'undefined' ? 'undefined' : _typeof(propValue)) === 'symbol') {
@@ -49,0 +52,0 @@ return '{' + String(propValue) + '}';

dist/formatter/formatReactElementNode.js

@@ -58,4 +58,3 @@ 'use strict';
       displayName = _node$displayName === undefined ? '' : _node$displayName,
-      _node$childrens = node.childrens,
-      childrens = _node$childrens === undefined ? [] : _node$childrens,
+      childrens = node.childrens,
       _node$props = node.props,
@@ -62,0 +61,0 @@ props = _node$props === undefined ? {} : _node$props,

dist/formatter/formatTree.js

@@ -7,5 +7,5 @@ 'use strict';
 
-var _formatReactElementNode = require('./formatReactElementNode');
+var _formatTreeNode = require('./formatTreeNode');
 
-var _formatReactElementNode2 = _interopRequireDefault(_formatReactElementNode);
+var _formatTreeNode2 = _interopRequireDefault(_formatTreeNode);
 
@@ -15,4 +15,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 exports.default = function (node, options) {
-  return (0, _formatReactElementNode2.default)(node, false, 0, options);
+  return (0, _formatTreeNode2.default)(node, false, 0, options);
 };
 //# sourceMappingURL=formatTree.js.map

dist/formatter/mergeSiblingPlainStringChildrenReducer.js

@@ -7,21 +7,20 @@ 'use strict';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+var _tree = require('./../tree');
 
 exports.default = function (previousNodes, currentNode) {
-  var lastNode = previousNodes[previousNodes.length - 1];
-  var newNode = _extends({}, currentNode);
+  var nodes = previousNodes.slice(0, previousNodes.length > 0 ? previousNodes.length - 1 : 0);
+  var previousNode = previousNodes[previousNodes.length - 1];
 
-  if (newNode.type === 'number') {
-    newNode.type = 'string';
-    newNode.value = String(newNode.value);
-  }
+  if (previousNode && (currentNode.type === 'string' || currentNode.type === 'number') && (previousNode.type === 'string' || previousNode.type === 'number')) {
+    nodes.push((0, _tree.createStringTreeNode)(String(previousNode.value) + String(currentNode.value)));
+  } else {
+    if (previousNode) {
+      nodes.push(previousNode);
+    }
 
-  if (lastNode && lastNode.type === 'string' && typeof lastNode.value === 'string' && newNode.type === 'string') {
-    lastNode.value += newNode.value || '';
-  } else {
-    previousNodes.push(newNode);
+    nodes.push(currentNode);
   }
 
-  return previousNodes;
+  return nodes;
 };
 //# sourceMappingURL=mergeSiblingPlainStringChildrenReducer.js.map

dist/parser/parseReactElement.js

@@ -11,2 +11,4 @@ 'use strict';
 
+var _tree = require('./../tree');
+
 var getReactElementDisplayName = function getReactElementDisplayName(element) {
@@ -42,9 +44,7 @@ return element.type.displayName || element.type.name || ( // function name
 
-  var type = typeof element === 'undefined' ? 'undefined' : _typeof(element);
 
-  if (type === 'string' || type === 'number') {
-    return {
-      type: type,
-      value: element
-    };
+  if (typeof element === 'string') {
+    return (0, _tree.createStringTreeNode)(element);
+  } else if (typeof element === 'number') {
+    return (0, _tree.createNumberTreeNode)(element);
   } else if (!(0, _react.isValidElement)(element)) {
@@ -72,9 +72,3 @@ throw new Error('react-element-to-jsx-string: Expected a React.Element, got `' + (typeof element === 'undefined' ? 'undefined' : _typeof(element)) + '`');
 
-  return {
-    type: 'ReactElement',
-    displayName: displayName,
-    props: props,
-    defaultProps: defaultProps,
-    childrens: childrens
-  };
+  return (0, _tree.createReactElementTreeNode)(displayName, props, defaultProps, childrens);
 };
@@ -81,0 +75,0 @@

dist/tree.js

 'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+/* eslint-disable no-use-before-define */
+
+var createStringTreeNode = exports.createStringTreeNode = function createStringTreeNode(value) {
+  return {
+    type: 'string',
+    value: value
+  };
+};
+
+var createNumberTreeNode = exports.createNumberTreeNode = function createNumberTreeNode(value) {
+  return {
+    type: 'number',
+    value: value
+  };
+};
+
+var createReactElementTreeNode = exports.createReactElementTreeNode = function createReactElementTreeNode(displayName, props, defaultProps, childrens) {
+  return {
+    type: 'ReactElement',
+    displayName: displayName,
+    props: props,
+    defaultProps: defaultProps,
+    childrens: childrens
+  };
+};
 //# sourceMappingURL=tree.js.map

package.json

 {
   "name": "react-element-to-jsx-string",
-  "version": "11.0.0",
+  "version": "11.0.1",
   "description": "Turn a ReactElement into the corresponding JSX string.",
@@ -15,3 +15,3 @@ "main": "dist/index.js",
     "prettier:fix": "prettier --write --single-quote --trailing-comma es5 \"{src/**/*.js,package.json}\"",
-    "test": "jest && npm run lint",
+    "test": "jest && npm run lint && yarn run flow",
     "test:watch": "jest --watch",
@@ -33,31 +33,31 @@ "release": "./release.sh"
   "devDependencies": {
-    "babel-cli": "^6.24.1",
-    "babel-eslint": "^7.2.3",
-    "babel-jest": "^20.0.3",
-    "babel-plugin-lodash": "^3.2.11",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-flow": "^6.23.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-2": "^6.24.1",
-    "babel-register": "^6.24.1",
-    "conventional-changelog-cli": "^1.3.2",
-    "doctoc": "^1.3.0",
-    "eslint": "^4.2.0",
-    "eslint-config-algolia": "^12.0.0",
-    "eslint-config-prettier": "^2.3.0",
-    "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-jest": "^20.0.3",
-    "eslint-plugin-prettier": "^2.1.2",
-    "eslint-plugin-react": "^7.1.0",
-    "expect": "^1.14.0",
-    "flow-bin": "^0.50.0",
-    "husky": "^0.14.3",
-    "jest": "^20.0.4",
-    "json": "^9.0.6",
-    "lint-staged": "^4.0.2",
-    "mversion": "^1.10.1",
-    "prettier": "^1.5.3",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
-    "react-test-renderer": "^15.6.1"
+    "babel-cli": "6.24.1",
+    "babel-eslint": "7.2.3",
+    "babel-jest": "20.0.3",
+    "babel-plugin-lodash": "3.2.11",
+    "babel-preset-es2015": "6.24.1",
+    "babel-preset-flow": "6.23.0",
+    "babel-preset-react": "6.24.1",
+    "babel-preset-stage-2": "6.24.1",
+    "babel-register": "6.24.1",
+    "conventional-changelog-cli": "1.3.2",
+    "doctoc": "1.3.0",
+    "eslint": "4.2.0",
+    "eslint-config-algolia": "12.0.0",
+    "eslint-config-prettier": "2.3.0",
+    "eslint-plugin-import": "2.7.0",
+    "eslint-plugin-jest": "20.0.3",
+    "eslint-plugin-prettier": "2.1.2",
+    "eslint-plugin-react": "7.1.0",
+    "expect": "1.20.2",
+    "flow-bin": "0.50.0",
+    "husky": "0.14.3",
+    "jest": "20.0.4",
+    "json": "9.0.6",
+    "lint-staged": "4.0.2",
+    "mversion": "1.10.1",
+    "prettier": "1.5.3",
+    "react": "15.6.1",
+    "react-dom": "15.6.1",
+    "react-test-renderer": "15.6.1"
   },
@@ -64,0 +64,0 @@ "peerDependencies": {

src/formatter/formatComplexDataStructure.js

@@ -8,3 +8,3 @@ /* @flow */
 import parseReactElement from './../parser/parseReactElement';
-import formatReactElementNode from './formatReactElementNode';
+import formatTreeNode from './formatTreeNode';
 import spacer from './spacer';
@@ -28,3 +28,3 @@ import type { Options } from './../options';
       if (currentValue && isValidElement(currentValue)) {
-        return formatReactElementNode(
+        return formatTreeNode(
           parseReactElement(currentValue, options),
@@ -31,0 +31,0 @@ true,

src/formatter/formatPropValue.js

@@ -29,2 +29,5 @@ /* @flow */
 
+  // > "Symbols (new in ECMAScript 2015, not yet supported in Flow)"
+  // @see: https://flow.org/en/docs/types/primitives/
+  // $FlowFixMe: Flow does not support Symbol
   if (typeof propValue === 'symbol') {
@@ -31,0 +34,0 @@ return `{${String(propValue)}}`;

src/formatter/formatReactElementNode.js

@@ -9,3 +9,3 @@ /* @flow */
 import type { Options } from './../options';
-import type { TreeNode } from './../tree';
+import type { ReactElementTreeNode } from './../tree';
 
@@ -60,3 +60,3 @@ const recurse = (lvl: number, inline: boolean, options: Options) => element =>
 export default (
-  node: TreeNode,
+  node: ReactElementTreeNode,
   inline: boolean,
@@ -69,3 +69,3 @@ lvl: number,
     displayName = '',
-    childrens = [],
+    childrens,
     props = {},
@@ -72,0 +72,0 @@ defaultProps = {},

src/formatter/formatTree.js

 /* @flow */
 
-import formatReactElementNode from './formatReactElementNode';
+import formatTreeNode from './formatTreeNode';
 import type { Options } from './../options';
@@ -8,2 +8,2 @@ import type { TreeNode } from './../tree';
 export default (node: TreeNode, options: Options): string =>
-  formatReactElementNode(node, false, 0, options);
+  formatTreeNode(node, false, 0, options);

src/formatter/formatTree.spec.js

 /* @flow */
 
 import formatTree from './formatTree';
-import formatReactElementNode from './formatReactElementNode';
+import formatTreeNode from './formatTreeNode';
 
-jest.mock('./formatReactElementNode', () =>
-  jest.fn(() => '<MockedComponent />')
-);
+jest.mock('./formatTreeNode', () => jest.fn(() => '<MockedComponent />'));
 
@@ -17,8 +15,3 @@ describe('formatTree', () => {
 
-    expect(formatReactElementNode).toHaveBeenCalledWith(
-      tree,
-      false,
-      0,
-      options
-    );
+    expect(formatTreeNode).toHaveBeenCalledWith(tree, false, 0, options);
 
@@ -25,0 +18,0 @@ expect(result).toBe('<MockedComponent />');

src/formatter/mergeSiblingPlainStringChildrenReducer.js

 /* @flow */
 
+import { createStringTreeNode } from './../tree';
 import type { TreeNode } from './../tree';
@@ -9,22 +10,27 @@
 ): TreeNode[] => {
-  const lastNode = previousNodes[previousNodes.length - 1];
-  const newNode = { ...currentNode };
+  const nodes = previousNodes.slice(
+    0,
+    previousNodes.length > 0 ? previousNodes.length - 1 : 0
+  );
+  const previousNode = previousNodes[previousNodes.length - 1];
 
-  if (newNode.type === 'number') {
-    newNode.type = 'string';
-    newNode.value = String(newNode.value);
-  }
-
   if (
-    lastNode &&
-    lastNode.type === 'string' &&
-    typeof lastNode.value === 'string' &&
-    newNode.type === 'string'
+    previousNode &&
+    (currentNode.type === 'string' || currentNode.type === 'number') &&
+    (previousNode.type === 'string' || previousNode.type === 'number')
   ) {
-    lastNode.value += newNode.value || '';
+    nodes.push(
+      createStringTreeNode(
+        String(previousNode.value) + String(currentNode.value)
+      )
+    );
   } else {
-    previousNodes.push(newNode);
+    if (previousNode) {
+      nodes.push(previousNode);
+    }
+
+    nodes.push(currentNode);
   }
 
-  return previousNodes;
+  return nodes;
 };

src/formatter/mergeSiblingPlainStringChildrenReducer.spec.js

 /* @flow */
 
 import mergeSiblingPlainStringChildrenReducer from './mergeSiblingPlainStringChildrenReducer';
+import {
+  createNumberTreeNode,
+  createStringTreeNode,
+  createReactElementTreeNode,
+} from './../tree';
 import type { TreeNode } from './../tree';
 
-const createScalarTreeNode = (type, value) => ({ type, value });
-const createReactElementTreeNode = childrens => ({
-  type: 'ReactElement',
-  childrens,
-});
-
 test('mergeSiblingPlainStringChildrenReducer should merge sibling string tree nodes', () => {
   const childrens: TreeNode[] = [
-    createScalarTreeNode('string', 'a'),
-    createScalarTreeNode('string', 'b'),
-    createScalarTreeNode('string', 'c'),
+    createStringTreeNode('a'),
+    createStringTreeNode('b'),
+    createStringTreeNode('c'),
   ];
@@ -27,10 +26,10 @@
 
-test('mergeSiblingPlainStringChildrenReducer should merge consider number as string', () => {
-  const childrens: TreeNode[] = [
-    createScalarTreeNode('string', 'a'),
-    createScalarTreeNode('number', 51),
-    createScalarTreeNode('string', 'c'),
-  ];
-
-  expect(childrens.reduce(mergeSiblingPlainStringChildrenReducer, [])).toEqual([
+test('mergeSiblingPlainStringChildrenReducer should consider number as string', () => {
+  expect(
+    [
+      createStringTreeNode('a'),
+      createNumberTreeNode(51),
+      createStringTreeNode('c'),
+    ].reduce(mergeSiblingPlainStringChildrenReducer, [])
+  ).toEqual([
     {
@@ -41,13 +40,26 @@ type: 'string',
   ]);
+
+  expect(
+    [
+      createStringTreeNode(5),
+      createNumberTreeNode(1),
+      createStringTreeNode('a'),
+    ].reduce(mergeSiblingPlainStringChildrenReducer, [])
+  ).toEqual([
+    {
+      type: 'string',
+      value: '51a',
+    },
+  ]);
 });
 
-test('mergeSiblingPlainStringChildrenReducer should merge detect non string node', () => {
+test('mergeSiblingPlainStringChildrenReducer should detect non string node', () => {
   const childrens: TreeNode[] = [
-    createReactElementTreeNode(['foo']),
-    createScalarTreeNode('string', 'a'),
-    createScalarTreeNode('number', 'b'),
-    createReactElementTreeNode(['bar']),
-    createScalarTreeNode('string', 'c'),
-    createScalarTreeNode('number', 42),
-    createReactElementTreeNode(['baz']),
+    createReactElementTreeNode('MyFoo', {}, {}, ['foo']),
+    createStringTreeNode('a'),
+    createNumberTreeNode('b'),
+    createReactElementTreeNode('MyBar', {}, {}, ['bar']),
+    createStringTreeNode('c'),
+    createNumberTreeNode(42),
+    createReactElementTreeNode('MyBaz', {}, {}, ['baz']),
   ];
@@ -58,2 +70,5 @@
       type: 'ReactElement',
+      displayName: 'MyFoo',
+      props: {},
+      defaultProps: {},
       childrens: ['foo'],
@@ -67,2 +82,5 @@ },
       type: 'ReactElement',
+      displayName: 'MyBar',
+      props: {},
+      defaultProps: {},
       childrens: ['bar'],
@@ -76,2 +94,5 @@ },
       type: 'ReactElement',
+      displayName: 'MyBaz',
+      props: {},
+      defaultProps: {},
       childrens: ['baz'],
@@ -78,0 +99,0 @@ },

src/parser/parseReactElement.js

@@ -5,2 +5,7 @@ /* @flow */
 import type { Options } from './../options';
+import {
+  createStringTreeNode,
+  createNumberTreeNode,
+  createReactElementTreeNode,
+} from './../tree';
 import type { TreeNode } from './../tree';
@@ -38,9 +43,7 @@
   const { displayName: displayNameFn = getReactElementDisplayName } = options;
-  const type = typeof element;
 
-  if (type === 'string' || type === 'number') {
-    return {
-      type,
-      value: element,
-    };
+  if (typeof element === 'string') {
+    return createStringTreeNode(element);
+  } else if (typeof element === 'number') {
+    return createNumberTreeNode(element);
   } else if (!isValidElement(element)) {
@@ -70,11 +73,10 @@ throw new Error(
 
-  return {
-    type: 'ReactElement',
+  return createReactElementTreeNode(
     displayName,
     props,
     defaultProps,
-    childrens,
-  };
+    childrens
+  );
 };
 
 export default parseReactElement;

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Lines of code

1686

2.74%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Total package byte prevSize

290761

-1.85%

No dependency changes