Fixes and Release

* fixed for string data * watchable data attribute * logger right in the box * ready for bower
pankajpatel · Aug 5, 2017 · 663edf5 · 663edf5
1 parent 80e11a4
commit 663edf5
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 7 deletions.
diff --git a/.gitignore b/.gitignore
@@ -45,5 +45,4 @@ typings/
 # dotenv environment variables file
 .env
 
-dist/
 .DS_Store
diff --git a/README.md b/README.md
@@ -2,3 +2,36 @@
 
 Inspecter webcomponent based on react-inspector
 
+## Installation
+
+_*npm*_: `npm install inspector-component --save-dev`
+_*bower*_: `bower install inspector-component --save-dev`
+
+## Usage
+
+```html
+<script src="bower_components/inspector-components/dist/inspector-component.js"></script>
+
+<inspector-component data='["56dcf573b09c217d39fd7621", "Hello World"]'></inspector-component>
+<inspector-component data='{"_id":"56dcf573b09c217d39fd7621", "name":"Hello World"}'></inspector-component>
+```
+
+## Contributing
+
+1. Fork it!
+2. Create your feature branch: `git checkout -b my-new-feature`
+3. Commit your changes: `git commit -am 'Add some feature'`
+4. Push to the branch: `git push origin my-new-feature`
+5. Submit a pull request :D
+
+## History
+
+0.1.0: Initial Version
+
+## Credits
+
+[react-inspector](https://github.com/xyc/react-inspector)
+
+## License
+
+[MIT](./LICENSE)
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "inspecter-component",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "description": "Inspecter webcomponent based on react-inspector",
   "license": "MIT",
   "main": "dist/inspecter-component.js",
@@ -9,9 +9,16 @@
   ],
   "ignore": [
     "**/.*",
-    "bower_components"
+    "bower_components",
+    "node_modules",
+    "test",
+    "tests"
   ],
   "dependencies": {
     "custom-elements": "^1.0.3"
-  }
+  },
+  "homepage": "https://github.com/pankajpatel/inspector-component",
+  "authors": [
+    "Pankaj Patel <[email protected]> (http://pankaj.pro)"
+  ]
 }
diff --git a/dist/inspector-component.js b/dist/inspector-component.js
diff --git a/index.html b/index.html
@@ -6,6 +6,7 @@
   <script src="./dist/inspector-component.js"></script>
 </head>
 <body>
+  <inspector-component data="Hello World"></inspector-component>
   <inspector-component data='["56dcf573b09c217d39fd7621", "Hello World"]'></inspector-component>
   <inspector-component data='{"_id":"56dcf573b09c217d39fd7621", "name":"Hello World"}'></inspector-component>
   <inspector-component data='{"_id":"56dcf573b09c217d39fd7621","name":"Howard Christensen","email":"[email protected]","phone":"+1 (830) 529-3176","address":"511 Royce Street, Hilltop, Tennessee, 9712","friends":[{"_id":"56dcf573b09c217d39fd7621","name":"Howard Christensen","email":"[email protected]","phone":"+1 (830) 529-3176","address":"511 Royce Street, Hilltop, Tennessee, 9712"}]}'></inspector-component>

diff --git a/package.json b/package.json
@@ -9,7 +9,8 @@
     "generate": "babel src -d lib",
     "watch": "webpack --progress --watch",
     "build": "webpack --progress --production",
-    "story": "ascesis-storybook"
+    "story": "ascesis-storybook",
+    "postinstall": "npm run generate"
   },
   "dependencies": {
     "document-register-element": "^1.5.0",

diff --git a/src/object-inspector/ObjectPreview.js b/src/object-inspector/ObjectPreview.js
@@ -28,7 +28,7 @@ class ObjectPreview extends HTMLElement {
   }
 
   connectedCallback() {
-    this.maxProperties = this.getAttribute('max-properties') || 5;
+    this.maxProperties = this.getAttribute('max-properties') || 3;
     this._data = (this.getAttribute('data') || 'null');
     const data = parse(this._data);
     this.data = data;
@@ -59,6 +59,8 @@ class ObjectPreview extends HTMLElement {
           }]
         </span>
       `);
+    } else if (typeof object === 'string') {
+      return `<object-value data='${object}' ></object-value>`;
     } else {
       let propertyNodes = [];
       for (let propertyName in object) {

diff --git a/src/tree-view/TreeNode.js b/src/tree-view/TreeNode.js
@@ -72,7 +72,7 @@ class TreeNode extends HTMLElement {
         <div style='${toCss(styles.treeNodePreviewContainer)}' path='${this.path}' class="clickableNode">
           ${this.expandable
             ? `<tree-arrow expanded='${this.expanded}' styles='${JSON.stringify(styles.treeNodeArrow)}'></tree-arrow>`
-            : (this.shouldShowPlaceholder) && `<span style='${toCss(styles.treeNodePlaceholder)}'>&nbsp;</span>`}
+            : this.shouldShowPlaceholder ? `<span style='${toCss(styles.treeNodePlaceholder)}'>&nbsp;</span>` : ''}
           ${renderedNode}
         </div>
         <div class='child-nodes'>
-Original file line number
+Diff line change
@@ Expand Up / @@ -45,5 +45,4 @@ typings/ @@
     # dotenv environment variables file
     .env
-    dist/
     .DS_Store