react-json-formatter - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

dist/index.js

@@ -23,6 +23,8 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var JsonFormatter = function JsonFormatter(_ref) {
+function JsonFormatter(_ref) {
   var json = _ref.json,
-      tabWith = _ref.tabWith,
-      JsonStyle = _ref.JsonStyle;
+      _ref$tabWith = _ref.tabWith,
+      tabWith = _ref$tabWith === void 0 ? 2 : _ref$tabWith,
+      _ref$jsonStyle = _ref.jsonStyle,
+      jsonStyle = _ref$jsonStyle === void 0 ? {} : _ref$jsonStyle;
   var jsonObject = JSON.parse(json);
@@ -34,5 +36,5 @@
     for (var i = 0; i < times; i++) {
-      repeatedTabSpace.push( /*#__PURE__*/React.createElement("span", {
-        style: JsonStyle.tabSpaceStyle,
-        key: i
+      repeatedTabSpace.push(React.createElement("span", {
+        key: i,
+        style: jsonStyle.tabSpaceStyle
       }, '\xa0'.repeat(tabWith || 4)));
@@ -50,4 +52,4 @@ }
         {
-          var dataJSX = /*#__PURE__*/React.createElement("span", {
-            style: JsonStyle.numberStyle
+          var dataJSX = React.createElement("span", {
+            style: jsonStyle.numberStyle
           }, data);
@@ -59,5 +61,5 @@ return dataJSX;
         {
-          var _dataJSX = /*#__PURE__*/React.createElement("span", {
-            style: JsonStyle.stringStyle
-          }, "\"", data, "\"");
+          var _dataJSX = React.createElement("span", {
+            style: jsonStyle.stringStyle
+          }, "\"" + data + "\"");
 
@@ -69,6 +71,6 @@ return _dataJSX;
         {
-          var _dataJSX2 = data ? /*#__PURE__*/React.createElement("span", {
-            style: _extends({}, JsonStyle.booleanStyle, JsonStyle.trueStyle)
-          }, "true") : /*#__PURE__*/React.createElement("span", {
-            style: _extends({}, JsonStyle.booleanStyle, JsonStyle.trueStyle)
+          var _dataJSX2 = data ? React.createElement("span", {
+            style: _extends({}, jsonStyle.booleanStyle, jsonStyle.trueStyle)
+          }, "true") : React.createElement("span", {
+            style: _extends({}, jsonStyle.booleanStyle, jsonStyle.trueStyle)
           }, "false");
@@ -83,29 +85,23 @@
 
-          _dataJSX3.push( /*#__PURE__*/React.createElement(React.Fragment, {
-            key: "{"
-          }, /*#__PURE__*/React.createElement("span", {
-            style: JsonStyle.braceStyle
-          }, '{'), /*#__PURE__*/React.createElement("br", null)));
+          _dataJSX3.push(React.createElement(React.Fragment, {
+            key: '{'
+          }, React.createElement("span", {
+            style: jsonStyle.braceStyle
+          }, '{'), React.createElement("br", null)));
 
           var keys = Object.keys(data);
-          TabSpaceRepeatTimes++;
+          TabSpaceRepeatTimes += 1;
+          Object.keys(data).forEach(function (key, index) {
+            _dataJSX3.push(React.createElement(React.Fragment, {
+              key: index
+            }, repeatTabSpace(TabSpaceRepeatTimes), React.createElement("span", {
+              style: jsonStyle.propertyStyle
+            }, "\"" + key + "\": "), categorize(data[key]), index !== keys.length - 1 && React.createElement("span", null, ","), React.createElement("br", null)));
+          });
+          TabSpaceRepeatTimes -= 1;
 
-          for (var i in data) {
-            _dataJSX3.push( /*#__PURE__*/React.createElement(React.Fragment, {
-              key: i
-            }, repeatTabSpace(TabSpaceRepeatTimes), /*#__PURE__*/React.createElement("span", {
-              style: JsonStyle.propertyStyle
-            }, "\"" + i + "\""), /*#__PURE__*/React.createElement("span", {
-              style: JsonStyle.colonStyle
-            }, ": "), categorize(data[i]), i === keys[keys.length - 1] ? null : /*#__PURE__*/React.createElement("span", {
-              style: JsonStyle.commaStyle
-            }, ","), /*#__PURE__*/React.createElement("br", null)));
-          }
-
-          TabSpaceRepeatTimes--;
-
-          _dataJSX3.push( /*#__PURE__*/React.createElement(React.Fragment, {
-            key: "}"
-          }, repeatTabSpace(TabSpaceRepeatTimes), /*#__PURE__*/React.createElement("span", {
-            style: JsonStyle.braceStyle
+          _dataJSX3.push(React.createElement(React.Fragment, {
+            key: '}'
+          }, repeatTabSpace(TabSpaceRepeatTimes), React.createElement("span", {
+            style: jsonStyle.braceStyle
           }, '}')));
@@ -120,24 +116,24 @@
 
-          _dataJSX4.push( /*#__PURE__*/React.createElement(React.Fragment, {
-            key: "["
-          }, /*#__PURE__*/React.createElement("span", {
-            style: JsonStyle.bracketStyle
-          }, "["), /*#__PURE__*/React.createElement("br", null)));
+          _dataJSX4.push(React.createElement(React.Fragment, {
+            key: '['
+          }, React.createElement("span", {
+            style: jsonStyle.bracketStyle
+          }, "["), React.createElement("br", null)));
 
-          TabSpaceRepeatTimes++;
+          TabSpaceRepeatTimes += 1;
 
-          for (var _i = 0; _i < data.length; _i++) {
-            _dataJSX4.push( /*#__PURE__*/React.createElement(React.Fragment, {
-              key: _i
-            }, repeatTabSpace(TabSpaceRepeatTimes), categorize(data[_i]), _i === data.length - 1 ? null : /*#__PURE__*/React.createElement("span", {
-              style: JsonStyle.commaStyle
-            }, ","), /*#__PURE__*/React.createElement("br", null)));
+          for (var i = 0; i < data.length; i++) {
+            _dataJSX4.push(React.createElement(React.Fragment, {
+              key: i
+            }, repeatTabSpace(TabSpaceRepeatTimes), categorize(data[i]), i === data.length - 1 ? null : React.createElement("span", {
+              style: jsonStyle.commaStyle
+            }, ","), React.createElement("br", null)));
           }
 
-          TabSpaceRepeatTimes--;
+          TabSpaceRepeatTimes -= 1;
 
-          _dataJSX4.push( /*#__PURE__*/React.createElement(React.Fragment, {
-            key: "]"
-          }, repeatTabSpace(TabSpaceRepeatTimes), /*#__PURE__*/React.createElement("span", {
-            style: JsonStyle.bracketStyle
+          _dataJSX4.push(React.createElement(React.Fragment, {
+            key: ']'
+          }, repeatTabSpace(TabSpaceRepeatTimes), React.createElement("span", {
+            style: jsonStyle.bracketStyle
           }, "]")));
@@ -150,4 +146,4 @@
         {
-          var _dataJSX5 = /*#__PURE__*/React.createElement("span", {
-            style: JsonStyle.nullStyle
+          var _dataJSX5 = React.createElement("span", {
+            style: jsonStyle.nullStyle
           }, "null");
@@ -157,11 +153,14 @@
         }
+
+      default:
+        return React.createElement("span", null, "type error");
     }
   }
 
-  return /*#__PURE__*/React.createElement("div", {
-    style: JsonStyle.style
-  }, /*#__PURE__*/React.createElement("div", null, categorize(jsonObject)));
-};
+  return React.createElement("div", {
+    style: jsonStyle.style
+  }, React.createElement("div", null, categorize(jsonObject)));
+}
 
 exports.JsonFormatter = JsonFormatter;
 //# sourceMappingURL=index.js.map

dist/index.modern.js

@@ -21,6 +21,8 @@ import React from 'react';
 
-var JsonFormatter = function JsonFormatter(_ref) {
+function JsonFormatter(_ref) {
   var json = _ref.json,
-      tabWith = _ref.tabWith,
-      JsonStyle = _ref.JsonStyle;
+      _ref$tabWith = _ref.tabWith,
+      tabWith = _ref$tabWith === void 0 ? 2 : _ref$tabWith,
+      _ref$jsonStyle = _ref.jsonStyle,
+      jsonStyle = _ref$jsonStyle === void 0 ? {} : _ref$jsonStyle;
   var jsonObject = JSON.parse(json);
@@ -32,5 +34,5 @@
     for (var i = 0; i < times; i++) {
-      repeatedTabSpace.push( /*#__PURE__*/React.createElement("span", {
-        style: JsonStyle.tabSpaceStyle,
-        key: i
+      repeatedTabSpace.push(React.createElement("span", {
+        key: i,
+        style: jsonStyle.tabSpaceStyle
       }, '\xa0'.repeat(tabWith || 4)));
@@ -48,4 +50,4 @@ }
         {
-          var dataJSX = /*#__PURE__*/React.createElement("span", {
-            style: JsonStyle.numberStyle
+          var dataJSX = React.createElement("span", {
+            style: jsonStyle.numberStyle
           }, data);
@@ -57,5 +59,5 @@ return dataJSX;
         {
-          var _dataJSX = /*#__PURE__*/React.createElement("span", {
-            style: JsonStyle.stringStyle
-          }, "\"", data, "\"");
+          var _dataJSX = React.createElement("span", {
+            style: jsonStyle.stringStyle
+          }, "\"" + data + "\"");
 
@@ -67,6 +69,6 @@ return _dataJSX;
         {
-          var _dataJSX2 = data ? /*#__PURE__*/React.createElement("span", {
-            style: _extends({}, JsonStyle.booleanStyle, JsonStyle.trueStyle)
-          }, "true") : /*#__PURE__*/React.createElement("span", {
-            style: _extends({}, JsonStyle.booleanStyle, JsonStyle.trueStyle)
+          var _dataJSX2 = data ? React.createElement("span", {
+            style: _extends({}, jsonStyle.booleanStyle, jsonStyle.trueStyle)
+          }, "true") : React.createElement("span", {
+            style: _extends({}, jsonStyle.booleanStyle, jsonStyle.trueStyle)
           }, "false");
@@ -81,29 +83,23 @@
 
-          _dataJSX3.push( /*#__PURE__*/React.createElement(React.Fragment, {
-            key: "{"
-          }, /*#__PURE__*/React.createElement("span", {
-            style: JsonStyle.braceStyle
-          }, '{'), /*#__PURE__*/React.createElement("br", null)));
+          _dataJSX3.push(React.createElement(React.Fragment, {
+            key: '{'
+          }, React.createElement("span", {
+            style: jsonStyle.braceStyle
+          }, '{'), React.createElement("br", null)));
 
           var keys = Object.keys(data);
-          TabSpaceRepeatTimes++;
+          TabSpaceRepeatTimes += 1;
+          Object.keys(data).forEach(function (key, index) {
+            _dataJSX3.push(React.createElement(React.Fragment, {
+              key: index
+            }, repeatTabSpace(TabSpaceRepeatTimes), React.createElement("span", {
+              style: jsonStyle.propertyStyle
+            }, "\"" + key + "\": "), categorize(data[key]), index !== keys.length - 1 && React.createElement("span", null, ","), React.createElement("br", null)));
+          });
+          TabSpaceRepeatTimes -= 1;
 
-          for (var i in data) {
-            _dataJSX3.push( /*#__PURE__*/React.createElement(React.Fragment, {
-              key: i
-            }, repeatTabSpace(TabSpaceRepeatTimes), /*#__PURE__*/React.createElement("span", {
-              style: JsonStyle.propertyStyle
-            }, "\"" + i + "\""), /*#__PURE__*/React.createElement("span", {
-              style: JsonStyle.colonStyle
-            }, ": "), categorize(data[i]), i === keys[keys.length - 1] ? null : /*#__PURE__*/React.createElement("span", {
-              style: JsonStyle.commaStyle
-            }, ","), /*#__PURE__*/React.createElement("br", null)));
-          }
-
-          TabSpaceRepeatTimes--;
-
-          _dataJSX3.push( /*#__PURE__*/React.createElement(React.Fragment, {
-            key: "}"
-          }, repeatTabSpace(TabSpaceRepeatTimes), /*#__PURE__*/React.createElement("span", {
-            style: JsonStyle.braceStyle
+          _dataJSX3.push(React.createElement(React.Fragment, {
+            key: '}'
+          }, repeatTabSpace(TabSpaceRepeatTimes), React.createElement("span", {
+            style: jsonStyle.braceStyle
           }, '}')));
@@ -118,24 +114,24 @@
 
-          _dataJSX4.push( /*#__PURE__*/React.createElement(React.Fragment, {
-            key: "["
-          }, /*#__PURE__*/React.createElement("span", {
-            style: JsonStyle.bracketStyle
-          }, "["), /*#__PURE__*/React.createElement("br", null)));
+          _dataJSX4.push(React.createElement(React.Fragment, {
+            key: '['
+          }, React.createElement("span", {
+            style: jsonStyle.bracketStyle
+          }, "["), React.createElement("br", null)));
 
-          TabSpaceRepeatTimes++;
+          TabSpaceRepeatTimes += 1;
 
-          for (var _i = 0; _i < data.length; _i++) {
-            _dataJSX4.push( /*#__PURE__*/React.createElement(React.Fragment, {
-              key: _i
-            }, repeatTabSpace(TabSpaceRepeatTimes), categorize(data[_i]), _i === data.length - 1 ? null : /*#__PURE__*/React.createElement("span", {
-              style: JsonStyle.commaStyle
-            }, ","), /*#__PURE__*/React.createElement("br", null)));
+          for (var i = 0; i < data.length; i++) {
+            _dataJSX4.push(React.createElement(React.Fragment, {
+              key: i
+            }, repeatTabSpace(TabSpaceRepeatTimes), categorize(data[i]), i === data.length - 1 ? null : React.createElement("span", {
+              style: jsonStyle.commaStyle
+            }, ","), React.createElement("br", null)));
           }
 
-          TabSpaceRepeatTimes--;
+          TabSpaceRepeatTimes -= 1;
 
-          _dataJSX4.push( /*#__PURE__*/React.createElement(React.Fragment, {
-            key: "]"
-          }, repeatTabSpace(TabSpaceRepeatTimes), /*#__PURE__*/React.createElement("span", {
-            style: JsonStyle.bracketStyle
+          _dataJSX4.push(React.createElement(React.Fragment, {
+            key: ']'
+          }, repeatTabSpace(TabSpaceRepeatTimes), React.createElement("span", {
+            style: jsonStyle.bracketStyle
           }, "]")));
@@ -148,4 +144,4 @@
         {
-          var _dataJSX5 = /*#__PURE__*/React.createElement("span", {
-            style: JsonStyle.nullStyle
+          var _dataJSX5 = React.createElement("span", {
+            style: jsonStyle.nullStyle
           }, "null");
@@ -155,11 +151,14 @@
         }
+
+      default:
+        return React.createElement("span", null, "type error");
     }
   }
 
-  return /*#__PURE__*/React.createElement("div", {
-    style: JsonStyle.style
-  }, /*#__PURE__*/React.createElement("div", null, categorize(jsonObject)));
-};
+  return React.createElement("div", {
+    style: jsonStyle.style
+  }, React.createElement("div", null, categorize(jsonObject)));
+}
 
 export { JsonFormatter };
 //# sourceMappingURL=index.modern.js.map

package.json

 {
   "name": "react-json-formatter",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Formatting json data to JSX of React",
-  "author": "ronny1020",
-  "license": "MIT",
+  "keywords": [
+    "json",
+    "react",
+    "formatter",
+    "json-formatter"
+  ],
+  "homepage": "https://github.com/ronny1020/react-json-formatter#readme",
+  "bugs": {
+    "url": "https://github.com/ronny1020/react-json-formatter/issues"
+  },
   "repository": {
@@ -11,12 +19,20 @@ "type": "git",
   },
+  "license": "MIT",
+  "author": "ronny1020",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
-  "source": "src/index.js",
-  "engines": {
-    "node": ">=10"
+  "source": "src/index.tsx",
+  "types": "dist/index.d.ts",
+  "directories": {
+    "example": "example"
   },
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "microbundle-crl --no-compress --format modern,cjs",
+    "predeploy": "cd example && yarn install && yarn run build",
+    "deploy": "gh-pages -d example/build",
+    "prepare": "run-s build",
     "start": "microbundle-crl watch --no-compress --format modern,cjs",
-    "prepare": "run-s build",
     "test": "run-s test:unit test:lint test:build",
@@ -26,47 +42,49 @@ "test:build": "run-s build",
     "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
-    "test:watch": "react-scripts test --env=jsdom",
-    "predeploy": "cd example && npm run build",
-    "deploy": "gh-pages -d example/build"
+    "test:watch": "react-scripts test --env=jsdom"
   },
-  "peerDependencies": {
-    "react": ">16.0.0"
-  },
   "devDependencies": {
-    "babel-eslint": "^10.1.0",
-    "cross-env": "^7.0.2",
-    "eslint": "^8.6.0",
-    "eslint-config-prettier": "^6.11.0",
+    "@babel/eslint-parser": "^7.17.0",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.4",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.4.1",
+    "@types/node": "^17.0.21",
+    "@types/react": "^17.0.40",
+    "@types/react-dom": "^17.0.13",
+    "@typescript-eslint/eslint-plugin": "^5.14.0",
+    "@typescript-eslint/parser": "^5.14.0",
+    "babel-eslint": "^10.0.3",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.11.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^16.1.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^7.0.0",
-    "eslint-config-standard": "^14.1.1",
-    "eslint-config-standard-react": "^9.2.0",
-    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jest": "^25.3.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.20.6",
-    "eslint-plugin-standard": "^4.0.1",
-    "gh-pages": "^3.1.0",
-    "microbundle-crl": "^0.13.10",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-sort-destructure-keys": "^1.4.0",
+    "eslint-plugin-sort-keys-fix": "^1.1.2",
+    "eslint-plugin-standard": "^4.1.0",
+    "eslint-plugin-typescript-sort-keys": "^2.1.0",
+    "gh-pages": "^3.2.3",
+    "microbundle-crl": "^0.13.11",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.0.5",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "^5.0.0"
+    "prettier": "^2.5.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "^5.0.0",
+    "typescript": "^4.6.2"
   },
-  "files": [
-    "dist"
-  ],
-  "bugs": {
-    "url": "https://github.com/ronny1020/react-json-formatter/issues"
+  "peerDependencies": {
+    "react": ">16.2.0"
   },
-  "homepage": "https://github.com/ronny1020/react-json-formatter#readme",
-  "directories": {
-    "example": "example"
-  },
-  "keywords": [
-    "json",
-    "react",
-    "formatter",
-    "json-formatter"
-  ]
+  "engines": {
+    "node": ">=10"
+  }
 }

README.md

@@ -61,3 +61,3 @@ # react-json-formatter
 
-  const JsonStyle = {
+  const jsonStyle = {
     propertyStyle: { color: 'red' },
@@ -68,3 +68,3 @@ stringStyle: { color: 'green' },
 
-  return <JsonFormatter json={sample} tabWith='4' JsonStyle={JsonStyle} />
+  return <JsonFormatter json={sample} tabWith='4' jsonStyle={jsonStyle} />
 }
@@ -81,7 +81,7 @@
 
-### json : string(Json)
+### json: string(Json)
 
 The string of Json to formate.
 
-### tabWith : number
+### tabWith: number
 
@@ -93,3 +93,3 @@ The number of spaces it should use per tab.
 
-Use the Object JsonStyle to control the style of formatted JSON.
+Use the Object jsonStyle to control the style of formatted JSON.
 
@@ -96,0 +96,0 @@ - from the 0.2.0 version, NOT support for className.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

33730

increased by11.99%

Number of package files

8

increased by14.29%

Lines of code

274

increased by10.04%

Worsened metrics

Dev dependency count

37

increased by85%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes