refactor: upgrade to 2.0.0

.gitignore

@@ -1,7 +1,9 @@
-react-json-pretty.sublime-project
-react-json-pretty.sublime-workspace
 node_modules
 npm-debug.log
 .DS_Store
 tests/lcov-report
-tests/lcov.info
+tests/lcov.info
+dist
+themes
+types
+coverage

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2013-2015 Fractal <chenckang01@gmail.com>
+Copyright (c) 2013-2015 Fractal <chenckang@gmail.com>
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

README.md

@@ -7,7 +7,7 @@
 
 ## Introduction
 
-This is a react component that help you to prettify your json strings on the browser based on JavaScript. Presently, it provides a monikai theme style for you, and of course you are free to add your own theme if you like for this is pretty easy.
+This is a lightweight and tiny react component that helps you to prettify JSON data in the browser. 
 
 ## Install
 ```bash
@@ -37,16 +37,18 @@ Next, in your 'jsx' file use it like the following:
 
 Where `obj` is the JSON string or just a valid JavaScript object.
 
-And also you can import the style to the document, here is an example of using webpack loaders(`style!css!stylus`) to load style, You can visit [webpack](https://webpack.github.io/) to get more details:
+### Use themes with css-loader and webpack
+
+And also you can import the style to the document, here is an example of using webpack loaders(`style!css`) to load style, You can visit [webpack](https://webpack.github.io/) to get more details:
 
 ```javascript
-require('react-json-pretty/JSONPretty.monikai.styl');
+require('react-json-pretty/themes/JSONPretty.monikai.css');
 ```
 
-Or use the es2015
+Or use `import`
 
 ```javascript
-import 'react-json-pretty/JSONPretty.monikai.styl';
+import 'react-json-pretty/themes/JSONPretty.monikai.css';
 ```
 
 If you still don't get it, visit the [example](https://github.com/chenckang/react-json-pretty/tree/master/example).
@@ -55,16 +57,20 @@ Lastly, if you succeed so far the preview will look like the below:
 
 ![previews, you can also find it in the example folder](https://github.com/chenckang/react-json-pretty/blob/master/example/preview.png?raw=true)
 
-## Upgrade
+### Use themes with `theme` property
+
+theme={main: '', key: '', value: '', boolean: '', string: ''}
+
+## Others
 
 ### Formation
 
 Actually, react-json-pretty is based on `JSON.stringify(value[, replacer[, space]])`. However, `JSON.stringify(value[, replacer[, space]])` has some optional parameters additionally such as `replacer` and `space`. so since the version 1.7.0, we extend react-json-pretty to support these two parameters.
 
-Here is the example:
+Here is an example:
 
 ```javascript
-<JSONPretty json={yourJSON} replacer={
+<JSONPretty json={yourJSONObject} replacer={
     function (key, value) {
         if (key === 'cccc') {
             value += '~~~abc';
@@ -79,11 +85,11 @@ Here is the example:
 </JSONPretty>
 ```
 
-The default value for property `replacer` is `null`，and `space` is `2`.
+** Note: The default value for property `replacer` is `null`，and `space` is `2`. **
 
 You can visit the [example](https://github.com/chenckang/react-json-pretty/tree/master/example) to see the details.
 
-### Class
+### Custom `className`
 
 Since the version 1.7.0, we add `themeClassName` property for adding custom theme `className`，the default `className` for theme is `json-pretty`. but in case you want to have your own name, you use `themeClassName` property to modify it;
 

example/.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["react"]
+  "presets": ["@babel/preset-react"]
 }

example/app/Example.jsx

@@ -21,24 +21,74 @@ var obj2 = {
 };
 
 var JSONPretty = require('react-json-pretty');
-require('react-json-pretty/JSONPretty.adventure_time.styl');
+require('react-json-pretty/themes/JSONPretty.adventure_time.css');
 require('../assets/custom.styl');
 obj.text = true;
 obj.abc = false;
 obj.number = 1234567890;
 
-ReactDOM.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa = 'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb';
-var obj3 = CircularJSON.stringify(ReactDOM);
+document.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa = 'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb';
+var obj3 = CircularJSON.stringify(document);
+
+class Tick extends React.Component {
+  constructor() {
+    super();
+    this.themes = [
+      {
+        main: 'background-color: #999',
+        key: 'color:rgba(255,94,94,1);',
+        value: 'color:rgba(253,176,130,1);',
+        string: 'color:rgba(233,253,172,1);',
+        boolean: 'rgba(102,153,204,1);',
+      },
+      {
+        main: 'background-color:rgba(116,128,150,1)',
+        key: 'color:rgba(181,83,191,1);',
+        value: 'color:rgba(147,163,191,1);',
+        string: 'color:rgba(251,168,86,1);',
+        boolean: 'color:rgba(68,138,169,1);',
+      },
+      {
+        main: 'background-color#1e1e1e;color:rgba(245,187,18,1)',
+        key: 'color:rgba(211,66,46,1);',
+        value: 'color:rgba(191,215,219,1);',
+        string: 'color:rgba(127,214,250,1);',
+        boolean: 'color:rgba(75,174,22,1);',
+      }
+    ];
+    this.state = {
+      acc: 0,
+    };
+  }
+
+  render() {
+    return (
+      <JSONPretty data={obj2} 
+        theme={
+          this.themes[this.state.acc % this.themes.length]
+        }
+      ></JSONPretty>
+    );
+  }
+
+  componentDidMount() {
+    setInterval(() => {
+      this.setState({
+        acc: this.state.acc + 1,
+      });
+    }, 3000);
+  }
+}
 
 ReactDOM.render(
   <div>
     <div>
-      <JSONPretty id="json-pretty" style={{fontSize: "1.1em"}} json={obj}></JSONPretty>
+      <JSONPretty id="json-pretty" style={{fontSize: "1.1em"}} data={obj}></JSONPretty>
     </div>
     <div>
-      <JSONPretty json={obj2}></JSONPretty>
-      <JSONPretty json={obj2} space="4"></JSONPretty>
-      <JSONPretty json={obj2} replacer={
+      <Tick></Tick>
+      <JSONPretty data={obj2} space="4" style={{backgroundColor: '#eee'}} themeClassName="abc"></JSONPretty>
+      <JSONPretty data={obj2} replacer={
         function (key, value) {
           if (key === 'cccc') {
             value += '~~~abc';
@@ -48,12 +98,12 @@ ReactDOM.render(
           }
           return value;
         }
-      } space="4"></JSONPretty>
+      } space="2"></JSONPretty>
     </div>
     <div>
-      <JSONPretty json={obj3}></JSONPretty>
-      <JSONPretty className="test-3" json={obj3}></JSONPretty>
-      <JSONPretty className="test-3" themeClassName="custom-json-pretty" json={obj3}></JSONPretty>
+      <JSONPretty data={obj3}></JSONPretty>
+      <JSONPretty className="test-3" data={obj3}></JSONPretty>
+      <JSONPretty className="test-3" themeClassName="custom-json-pretty" data={obj3}></JSONPretty>
     </div>
   </div>,
   document.getElementById('example')

example/assets/custom.styl

@@ -8,14 +8,17 @@
   white-space -o-pre-wrap;
   word-wrap break-word
 
-  .json-key
+  .__json-key__
     color #F92672
 
-  .json-value
+  .__json-value__
     color #A6E22E
 
-  .json-string
+  .__json-string__
     color #FD971F
 
-  .json-boolean
-    color #AC81Fe
+  .__json-boolean__
+    color #AC81Fe
+
+.test-3
+  font-size 1.5em

example/package.json

@@ -6,25 +6,25 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "watch": "webpack --watch",
-    "dev": "webpack-dev-server --content-base build/"
+    "dev": "webpack-dev-server --content-base public/"
   },
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "babel-core": "^6.24.1",
-    "babel-loader": "^6.2.0",
-    "babel-preset-react": "^6.3.13",
-    "css-loader": "^0.23.1",
-    "html-webpack-plugin": "^1.7.0",
-    "json-loader": "^0.5.4",
-    "style-loader": "^0.13.0",
-    "stylus": "^0.54.5",
-    "stylus-loader": "^3.0.1",
-    "webpack": "^1.12.9"
+    "@babel/core": "^7.2.2",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.4",
+    "css-loader": "^2.1.0",
+    "html-webpack-plugin": "^3.2.0",
+    "json-loader": "^0.5.7",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.28.3",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.14"
   },
   "dependencies": {
-    "circular-json": "^0.3.1",
-    "react": "^15.4.2",
-    "react-dom": "^15.4.2"
+    "circular-json": "^0.5.9",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0"
   }
 }