immutable-devtools
Version:
Chrome Dev Tools formatter for the Immutable JS library
321 lines (260 loc) • 10.9 kB
JavaScript
(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__) {
/* WEBPACK VAR INJECTION */(function(global) {"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) {
var gw = typeof window === "undefined" ? global : window;
// Don't install more than once.
if (installed === true) {
return;
}
gw.devtoolsFormatters = gw.devtoolsFormatters || [];
var _createFormatters = (0, _createFormatters3.default)(Immutable),
RecordFormatter = _createFormatters.RecordFormatter,
OrderedMapFormatter = _createFormatters.OrderedMapFormatter,
OrderedSetFormatter = _createFormatters.OrderedSetFormatter,
ListFormatter = _createFormatters.ListFormatter,
MapFormatter = _createFormatters.MapFormatter,
SetFormatter = _createFormatters.SetFormatter,
StackFormatter = _createFormatters.StackFormatter;
gw.devtoolsFormatters.push(RecordFormatter, OrderedMapFormatter, OrderedSetFormatter, ListFormatter, MapFormatter, SetFormatter, StackFormatter);
installed = true;
}
module.exports = install;
exports.default = install;
/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
/***/ }),
/* 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; position: relative' };
var immutableNameStyle = { style: 'color: rgb(232,98,0); position: relative' };
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; position: relative' };
var nullStyle = { style: 'color: #777' };
function createFormatter(Immutable) {
var isRecord = function isRecord(maybeRecord) {
if (maybeRecord && maybeRecord._values === undefined // in v3 record
&& maybeRecord._map === undefined // in v4 record
) {
// don't detect Immutable.Record.prototype as a Record instance
return;
}
// Immutable v4
if (maybeRecord['@@__IMMUTABLE_RECORD__@@']) {
// There's also a Immutable.Record.isRecord we could use, but then the
// Immutable instance passed into createFormatter has to be the same
// version as the one used to create the Immutable object.
// That's especially a problem for the Chrome extension.
return true;
}
// Immutable v3
return !!(maybeRecord['@@__IMMUTABLE_KEYED__@@'] && maybeRecord['@@__IMMUTABLE_ITERABLE__@@'] && maybeRecord._defaultValues !== undefined);
};
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 ? arguments[1] : 'Iterable';
return ['span', ['span', immutableNameStyle, name], ['span', '[' + iterable.size + ']']];
};
var getKeySeq = function getKeySeq(collection) {
return collection.toSeq().map(function (v, k) {
return k;
}).toIndexedSeq();
};
var hasBody = function hasBody(collection, config) {
return getKeySeq(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();
var jsList = [];
// Can't just call toJS because that will also call toJS on children inside the list
children.forEach(function (child) {
return jsList.push(child);
});
return ['ol', listStyle].concat(_toConsumableArray(children));
};
var RecordFormatter = {
header: function header(record, config) {
if (!isRecord(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 = void 0;
if (!changed) {
inlinePreview = ['span', inlineValuesStyle, '{}'];
} else {
var preview = getKeySeq(record).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 = getKeySeq(record).toJS().map(function (key) {
var style = Immutable.is(defaults.get(key), record.get(key)) ? defaultValueKeyStyle : alteredValueKeyStyle;
return ['li', {}, ['span', style, key + ': '], reference(record.get(key))];
});
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
};
}
/***/ })
/******/ ])
});
;