webcomponents demo

README.md

@@ -1,10 +1,11 @@
-# inspecter-component
+# inspecter-component [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/pankajpatel/inspector-component)
 
 Inspecter webcomponent based on react-inspector
 
 ## Installation
 
 _*npm*_: `npm install inspector-component --save-dev`
+
 _*bower*_: `bower install inspector-component --save-dev`
 
 ## Usage
@@ -16,6 +17,40 @@ _*bower*_: `bower install inspector-component --save-dev`
 <inspector-component data='{"_id":"56dcf573b09c217d39fd7621", "name":"Hello World"}'></inspector-component>
 ```
 
+## Demo
+
+<!--
+```
+<custom-element-demo>
+  <template>
+    <link rel="import" href="inspector-component.html">
+    <next-code-block></next-code-block>
+  </template>
+</custom-element-demo>
+```
+-->
+```html
+<div>
+  One: <inspector-component data='Hello World'></inspector-component><br/>
+</div>
+<div>
+  Two: <inspector-component data='["56dcf573b09c217d39fd7621", "Hello World"]'></inspector-component><br/>
+</div>
+<div>
+  Three: <inspector-component data='{"_id":"56dcf573b09c217d39fd7621", "name":"Hello World"}'></inspector-component><br/>
+</div>
+
+<script>
+var i = 0;
+var interval = setInterval(function() {
+  document.querySelector('inspector-component').log({log: i++});
+}, 2000);
+setTimeout(function() {
+  clearInterval(interval);
+}, 2000*60)
+</script>
+```
+
 ## Contributing
 
 1. Fork it!
@@ -26,7 +61,9 @@ _*bower*_: `bower install inspector-component --save-dev`
 
 ## History
 
-0.1.0: Initial Version
+* 0.1.2: Added Demo
+* 0.1.1: Fixed for Bower
+* 0.1.0: Initial Version
 
 ## Credits
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "inspecter-component",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Inspecter webcomponent based on react-inspector",
   "license": "MIT",
   "main": [

lib/object-inspector/ObjectPreview.js

@@ -49,7 +49,7 @@ var ObjectPreview = function (_HTMLElement) {
   _createClass(ObjectPreview, [{
     key: 'connectedCallback',
     value: function connectedCallback() {
-      this.maxProperties = this.getAttribute('max-properties') || 5;
+      this.maxProperties = this.getAttribute('max-properties') || 3;
       this._data = this.getAttribute('data') || 'null';
       var data = parse(this._data);
       this.data = data;
@@ -73,6 +73,8 @@ var ObjectPreview = function (_HTMLElement) {
         return '\n        <span style=\'' + toCss(styles.preview) + '\'>\n          [' + object.map(function (element) {
           return '<object-value data=\'' + element + '\' ></object-value>';
         }).join(', ') + ']\n        </span>\n      ';
+      } else if (typeof object === 'string') {
+        return '<object-value data=\'' + object + '\' ></object-value>';
       } else {
         var propertyNodes = [];
         for (var propertyName in object) {

lib/tree-view/TreeNode.js

@@ -100,7 +100,7 @@ var TreeNode = function (_HTMLElement2) {
       var childNodes = this.innerHTML;
       this.expandable = this.shouldShowArrow && childNodes.length > 0;
 
-      this.innerHTML = '\n      <li aria-expanded=\'' + this.expanded + '\' role="treeitem" style=\'' + toCss(styles.treeNodeBase) + '\' title=\'' + this.title + '\'>\n        <div style=\'' + toCss(styles.treeNodePreviewContainer) + '\' path=\'' + this.path + '\' class="clickableNode">\n          ' + (this.expandable ? '<tree-arrow expanded=\'' + this.expanded + '\' styles=\'' + JSON.stringify(styles.treeNodeArrow) + '\'></tree-arrow>' : this.shouldShowPlaceholder && '<span style=\'' + toCss(styles.treeNodePlaceholder) + '\'>&nbsp;</span>') + '\n          ' + renderedNode + '\n        </div>\n        <div class=\'child-nodes\'>\n          ' + (childNodes.trim().length > 0 ? '<ol role="group"\n                style=\'' + toCss(styles.treeNodeChildNodesContainer) + '\'>' + childNodes + '</ol>' : '') + '\n        </div>\n      </li>\n    ';
+      this.innerHTML = '\n      <li aria-expanded=\'' + this.expanded + '\' role="treeitem" style=\'' + toCss(styles.treeNodeBase) + '\' title=\'' + this.title + '\'>\n        <div style=\'' + toCss(styles.treeNodePreviewContainer) + '\' path=\'' + this.path + '\' class="clickableNode">\n          ' + (this.expandable ? '<tree-arrow expanded=\'' + this.expanded + '\' styles=\'' + JSON.stringify(styles.treeNodeArrow) + '\'></tree-arrow>' : this.shouldShowPlaceholder ? '<span style=\'' + toCss(styles.treeNodePlaceholder) + '\'>&nbsp;</span>' : '') + '\n          ' + renderedNode + '\n        </div>\n        <div class=\'child-nodes\'>\n          ' + (childNodes.trim().length > 0 ? '<ol role="group"\n                style=\'' + toCss(styles.treeNodeChildNodesContainer) + '\'>' + childNodes + '</ol>' : '') + '\n        </div>\n      </li>\n    ';
     }
   }]);
 

package.json

@@ -1,16 +1,17 @@
 {
   "name": "inspector-component",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "main": "lib/index.js",
   "repository": "[email protected]:pankajpatel/inspector-component.git",
   "author": "Pankaj Patel <[email protected]>",
   "license": "MIT",
   "scripts": {
     "generate": "babel src -d lib",
     "watch": "webpack --progress --watch",
-    "build": "webpack --progress --production",
+    "build": "webpack --progress -p",
     "story": "ascesis-storybook",
-    "postinstall": "npm run generate"
+    "postinstall": "npm run generate",
+    "postbuild": "npm run generate"
   },
   "dependencies": {
     "document-register-element": "^1.5.0",