immutable-devtools - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

dist/index.js

@@ -1,1 +0,291 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.immutableDevTools=t():e.immutableDevTools=t()}(this,function(){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e){if("undefined"==typeof window)throw new Error("Can only install immutable-devtools in a browser environment.");if(i!==!0){window.devtoolsFormatters=window.devtoolsFormatters||[];var t=(0,u["default"])(e),r=t.RecordFormatter,n=t.OrderedMapFormatter,o=t.OrderedSetFormatter,a=t.ListFormatter,s=t.MapFormatter,l=t.SetFormatter,d=t.StackFormatter;window.devtoolsFormatters.push(r,n,o,a,s,l,d),i=!0}}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=o;var a=r(1),u=n(a);"undefined"!=typeof Immutable&&(Immutable.installDevTools=o.bind(null,Immutable));var i=!1},function(e,t){"use strict";function r(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)}function n(e){var t=function(e,t){return"undefined"==typeof e?["span",d,"undefined"]:"null"===e?["span",d,"null"]:["object",{object:e,config:t}]},n=function(e){var t=arguments.length<=1||void 0===arguments[1]?"Iterable":arguments[1];return["span",["span",a,t],["span","["+e.size+"]"]]},c=function(e,t){return e.size>0&&!(t&&t.noPreview)},f=function(e,t){var n=e.map(t).toList().toJS();return["ol",o].concat(r(n))},p={header:function(n,o){if(!(n instanceof e.Record))return null;var i=n.clear(),s=!e.is(i,n);if(o&&o.noPreview)return["span",s?a:d,n._name||n.constructor.name||"Record"];var c=void 0;if(s){var f=n.keySeq().reduce(function(r,o){return e.is(i.get(o),n.get(o))?r:(r.length&&r.push(", "),r.push(["span",{},["span",u,o+": "],t(n.get(o),{noPreview:!0})]),r)},[]);c=["span",l,"{"].concat(r(f),["}"])}else c=["span",l,"{}"];return["span",{},["span",a,n._name||n.constructor.name||"Record"]," ",c]},hasBody:c,body:function(n){var a=n.clear(),u=n.keySeq().map(function(r){var o=e.is(a.get(r),n.get(r))?i:s;return["li",{},["span",o,r+": "],t(n.get(r))]}).toJS();return["ol",o].concat(r(u))}},m={header:function(t){return e.List.isList(t)?n(t,"List"):null},hasBody:c,body:function(e){return f(e,function(e,r){return["li",["span",u,r+": "],t(e)]})}},y={header:function(t){return e.Stack.isStack(t)?n(t,"Stack"):null},hasBody:c,body:function(e){return f(e,function(e,r){return["li",["span",u,r+": "],t(e)]})}},v={header:function(t){return e.Map.isMap(t)?n(t,"Map"):null},hasBody:c,body:function(e){return f(e,function(e,r){return["li",{},"{",t(r)," => ",t(e),"}"]})}},b={header:function(t){return e.OrderedMap.isOrderedMap(t)?n(t,"OrderedMap"):null},hasBody:c,body:function(e){return f(e,function(e,r){return["li",{},"{",t(r)," => ",t(e),"}"]})}},h={header:function(t){return e.Set.isSet(t)?n(t,"Set"):null},hasBody:c,body:function(e){return f(e,function(e){return["li",t(e)]})}},S={header:function(t){return e.OrderedSet.isOrderedSet(t)?n(t,"OrderedSet"):null},hasBody:c,body:function(e){return f(e,function(e){return["li",t(e)]})}};return{RecordFormatter:p,OrderedMapFormatter:b,OrderedSetFormatter:S,ListFormatter:m,MapFormatter:v,SetFormatter:h,StackFormatter:y}}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=n;var o={style:"list-style-type: none; padding: 0; margin: 0 0 0 12px; font-style: normal"},a={style:"color: rgb(232,98,0)"},u={style:"color: #881391"},i={style:"color: #777"},s={style:"color: #881391; font-weight: bolder"},l={style:"color: #777; font-style: italic"},d={style:"color: #777"}}])});
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define([], factory);
+	else if(typeof exports === 'object')
+		exports["immutableDevTools"] = factory();
+	else
+		root["immutableDevTools"] = factory();
+})(this, function() {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports, __webpack_require__) {
+
+	"use strict";
+
+	Object.defineProperty(exports, "__esModule", {
+	  value: true
+	});
+
+	var _createFormatters2 = __webpack_require__(1);
+
+	var _createFormatters3 = _interopRequireDefault(_createFormatters2);
+
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+	// Check for globally defined Immutable and add an install method to it.
+	if (typeof Immutable !== "undefined") {
+	  Immutable.installDevTools = install.bind(null, Immutable);
+	}
+
+	// I imagine most people are using Immutable as a CommonJS module though...
+
+	var installed = false;
+	function install(Immutable) {
+	  if (typeof window === "undefined") {
+	    throw new Error("Can only install immutable-devtools in a browser environment.");
+	  }
+
+	  // Don't install more than once.
+	  if (installed === true) {
+	    return;
+	  }
+
+	  window.devtoolsFormatters = window.devtoolsFormatters || [];
+
+	  var _createFormatters = (0, _createFormatters3.default)(Immutable);
+
+	  var RecordFormatter = _createFormatters.RecordFormatter;
+	  var OrderedMapFormatter = _createFormatters.OrderedMapFormatter;
+	  var OrderedSetFormatter = _createFormatters.OrderedSetFormatter;
+	  var ListFormatter = _createFormatters.ListFormatter;
+	  var MapFormatter = _createFormatters.MapFormatter;
+	  var SetFormatter = _createFormatters.SetFormatter;
+	  var StackFormatter = _createFormatters.StackFormatter;
+
+	  window.devtoolsFormatters.push(RecordFormatter, OrderedMapFormatter, OrderedSetFormatter, ListFormatter, MapFormatter, SetFormatter, StackFormatter);
+
+	  installed = true;
+	}
+
+	module.exports = install;
+	exports.default = install;
+
+/***/ },
+/* 1 */
+/***/ function(module, exports) {
+
+	'use strict';
+
+	Object.defineProperty(exports, "__esModule", {
+	  value: true
+	});
+	exports.default = createFormatter;
+
+	function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+	var listStyle = { style: 'list-style-type: none; padding: 0; margin: 0 0 0 12px; font-style: normal' };
+	var immutableNameStyle = { style: 'color: rgb(232,98,0)' };
+	var keyStyle = { style: 'color: #881391' };
+	var defaultValueKeyStyle = { style: 'color: #777' };
+	var alteredValueKeyStyle = { style: 'color: #881391; font-weight: bolder' };
+	var inlineValuesStyle = { style: 'color: #777; font-style: italic' };
+	var nullStyle = { style: 'color: #777' };
+
+	function createFormatter(Immutable) {
+
+	  var reference = function reference(object, config) {
+	    if (typeof object === 'undefined') return ['span', nullStyle, 'undefined'];else if (object === 'null') return ['span', nullStyle, 'null'];
+
+	    return ['object', { object: object, config: config }];
+	  };
+
+	  var renderIterableHeader = function renderIterableHeader(iterable) {
+	    var name = arguments.length <= 1 || arguments[1] === undefined ? 'Iterable' : arguments[1];
+	    return ['span', ['span', immutableNameStyle, name], ['span', '[' + iterable.size + ']']];
+	  };
+
+	  var hasBody = function hasBody(collection, config) {
+	    return collection.size > 0 && !(config && config.noPreview);
+	  };
+
+	  var renderIterableBody = function renderIterableBody(collection, mapper) {
+	    var options = arguments.length <= 2 || arguments[2] === undefined ? {} : arguments[2];
+
+	    if (options.sorted) {
+	      collection = collection.sortBy(function (value, key) {
+	        return key;
+	      });
+	    }
+	    var children = collection.map(mapper).toList().toJS();
+	    return ['ol', listStyle].concat(_toConsumableArray(children));
+	  };
+
+	  var RecordFormatter = {
+	    header: function header(record, config) {
+	      if (!(record instanceof Immutable.Record)) return null;
+
+	      var defaults = record.clear();
+	      var changed = !Immutable.is(defaults, record);
+
+	      if (config && config.noPreview) return ['span', changed ? immutableNameStyle : nullStyle, record._name || record.constructor.name || 'Record'];
+
+	      var inlinePreview = undefined;
+	      if (!changed) {
+	        inlinePreview = ['span', inlineValuesStyle, '{}'];
+	      } else {
+	        var preview = record.keySeq().reduce(function (preview, key) {
+	          if (Immutable.is(defaults.get(key), record.get(key))) return preview;
+	          if (preview.length) preview.push(', ');
+
+	          preview.push(['span', {}, ['span', keyStyle, key + ': '], reference(record.get(key), { noPreview: true })]);
+	          return preview;
+	        }, []);
+	        inlinePreview = ['span', inlineValuesStyle, '{'].concat(_toConsumableArray(preview), ['}']);
+	      }
+	      return ['span', {}, ['span', immutableNameStyle, record._name || record.constructor.name || 'Record'], ' ', inlinePreview];
+	    },
+
+	    hasBody: hasBody,
+	    body: function body(record) {
+	      var defaults = record.clear();
+	      var children = record.keySeq().map(function (key) {
+	        var style = Immutable.is(defaults.get(key), record.get(key)) ? defaultValueKeyStyle : alteredValueKeyStyle;
+	        return ['li', {}, ['span', style, key + ': '], reference(record.get(key))];
+	      }).toJS();
+	      return ['ol', listStyle].concat(_toConsumableArray(children));
+	    }
+	  };
+
+	  var ListFormatter = {
+	    header: function header(o) {
+	      if (!Immutable.List.isList(o)) return null;
+	      return renderIterableHeader(o, 'List');
+	    },
+
+	    hasBody: hasBody,
+	    body: function body(o) {
+	      return renderIterableBody(o, function (value, key) {
+	        return ['li', ['span', keyStyle, key + ': '], reference(value)];
+	      });
+	    }
+	  };
+
+	  var StackFormatter = {
+	    header: function header(o) {
+	      if (!Immutable.Stack.isStack(o)) return null;
+	      return renderIterableHeader(o, 'Stack');
+	    },
+
+	    hasBody: hasBody,
+	    body: function body(o) {
+	      return renderIterableBody(o, function (value, key) {
+	        return ['li', ['span', keyStyle, key + ': '], reference(value)];
+	      });
+	    }
+	  };
+
+	  var MapFormatter = {
+	    header: function header(o) {
+	      if (!Immutable.Map.isMap(o)) return null;
+	      return renderIterableHeader(o, 'Map');
+	    },
+
+	    hasBody: hasBody,
+	    body: function body(o) {
+	      return renderIterableBody(o, function (value, key) {
+	        return ['li', {}, '{', reference(key), ' => ', reference(value), '}'];
+	      }, { sorted: true });
+	    }
+	  };
+
+	  var OrderedMapFormatter = {
+	    header: function header(o) {
+	      if (!Immutable.OrderedMap.isOrderedMap(o)) return null;
+	      return renderIterableHeader(o, 'OrderedMap');
+	    },
+
+	    hasBody: hasBody,
+	    body: function body(o) {
+	      return renderIterableBody(o, function (value, key) {
+	        return ['li', {}, '{', reference(key), ' => ', reference(value), '}'];
+	      });
+	    }
+	  };
+
+	  var SetFormatter = {
+	    header: function header(o) {
+	      if (!Immutable.Set.isSet(o)) return null;
+	      return renderIterableHeader(o, 'Set');
+	    },
+
+	    hasBody: hasBody,
+	    body: function body(o) {
+	      return renderIterableBody(o, function (value) {
+	        return ['li', reference(value)];
+	      }, { sorted: true });
+	    }
+	  };
+
+	  var OrderedSetFormatter = {
+	    header: function header(o) {
+	      if (!Immutable.OrderedSet.isOrderedSet(o)) return null;
+	      return renderIterableHeader(o, 'OrderedSet');
+	    },
+
+	    hasBody: hasBody,
+	    body: function body(o) {
+	      return renderIterableBody(o, function (value) {
+	        return ['li', reference(value)];
+	      });
+	    }
+	  };
+
+	  return {
+	    RecordFormatter: RecordFormatter,
+	    OrderedMapFormatter: OrderedMapFormatter,
+	    OrderedSetFormatter: OrderedSetFormatter,
+	    ListFormatter: ListFormatter,
+	    MapFormatter: MapFormatter,
+	    SetFormatter: SetFormatter,
+	    StackFormatter: StackFormatter
+	  };
+	}
+
+/***/ }
+/******/ ])
+});
+;

package.json

 {
   "name": "immutable-devtools",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Chrome Dev Tools formatter for the Immutable JS library",
@@ -8,2 +8,4 @@ "main": "dist/index.js",
   "scripts": {
+    "build": "webpack --config ./webpack.config.js",
+    "prepublish": "npm build",
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -10,0 +12,0 @@ },

README.md

 # Chrome Dev Tools for Immutable-js
 
+[![Npm Version](https://badge.fury.io/js/immutable-devtools.svg)](https://badge.fury.io/js/immutable-devtools)
+[![NPM downloads](http://img.shields.io/npm/dm/immutable-devtools.svg)](https://www.npmjs.com/package/immutable-devtools)
+[![devDependency Status](https://david-dm.org/andrewdavey/immutable-devtools/dev-status.svg)](https://david-dm.org/andrewdavey/immutable-devtools#info=devDependencies)
+
 The [Immutable](http://facebook.github.io/immutable-js/) library is fantastic, but inspecting immutable collections in Chrome's Dev Tools is awkward. You only see the internal data structure, not the logical contents. For example, when inspecting the contents of an Immutable List, you'd really like to see the items in the list.
@@ -17,2 +21,18 @@
 
+
+## Features
+
+The library currently has formatters for:
+
+ - [x] `List`
+ - [x] `Map` & `OrderedMap`
+ - [x] `Set` & `OrderedSet`
+ - [x] `Stack`
+ - [ ] `Range` (let me know if you use this :-), add :+1: to [#21](https://github.com/andrewdavey/immutable-devtools/issues/21))
+ - [ ] `Repeat` (if you wish this, add :+1: to [#22](https://github.com/andrewdavey/immutable-devtools/issues/22))
+ - [x] `Record`
+ - [ ] `Seq` — I do not have an idea how to display it. If you know, [write it down into #23](https://github.com/andrewdavey/immutable-devtools/issues/23)
+
+Want something more? [Write down your wishes!](https://github.com/andrewdavey/immutable-devtools/issues/new)
+
 ## Installation
@@ -41,5 +61,37 @@
 
-## Features
 
-The library currently has formatters for: List, Map, Set, Record, OrderedMap & OrderedSet.
+## Using with webpack
 
+You could use `webpack.DefinePlugin` to create a condition that will be allowed to install `immutable-devtools` in the debug build but unreachable in the production build:
+
+```javascript
+// webpack.config.js
+var webpack = require('webpack');
+module.exports = {
+  // ...
+  plugins: [
+    new webpack.DefinePlugin({
+      __DEV__: JSON.stringify(process.env.NODE_ENV !== 'production')
+    })
+  ],
+};
+```
+
+In your source you'd have something like this...
+
+```javascript
+// index.js
+var immutable = require('immutable');
+if (__DEV__) {
+  var installDevTools = require('immutable-devtools');
+  installDevTools(immutable);
+}
+```
+
+And then by adding the `-p` shortcut to webpack for production mode which enables dead code elimination, the condition that requires immutable-devtools will be removed.
+
+```
+NODE_ENV=production webpack -p index.js
+```
+
+See [#16](https://github.com/andrewdavey/immutable-devtools/issues/16) for more info.

New 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

Fixed alerts

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

131364

increased by7.61%

Number of package files

6

increased by20%

Lines of code

232

increased byInfinity%

Number of lines in readme file

96

increased by118.18%

Worsened metrics

Number of medium supply chain risk alerts

2

increased by100%

No dependency changes