reselect-tools
Advanced tools
Comparing version 0.0.6 to 0.0.7
@@ -24,14 +24,3 @@ (function (global, factory) { | ||
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 _getState = null; | ||
@@ -44,13 +33,9 @@ var _allSelectors = new Set(); | ||
/* | ||
* This function is only exported for legacy purposes. | ||
* It will be removed in future versions. | ||
* | ||
*/ | ||
function createSelectorWithDependencies() { | ||
for (var _len = arguments.length, funcs = Array(_len), _key = 0; _key < _len; _key++) { | ||
funcs[_key] = arguments[_key]; | ||
} | ||
var resultFunc = funcs.pop(); | ||
var dependencies = Array.isArray(funcs[0]) ? funcs[0] : funcs; | ||
var selector = _reselect.createSelector.apply(undefined, _toConsumableArray(dependencies).concat([resultFunc])); | ||
selector.dependencies = dependencies; | ||
_allSelectors.add(selector); | ||
return selector; | ||
return _reselect.createSelector.apply(undefined, arguments); | ||
} | ||
@@ -62,2 +47,9 @@ | ||
var _addSelector = function _addSelector(selector) { | ||
_allSelectors.add(selector); | ||
var dependencies = selector.dependencies || []; | ||
dependencies.forEach(_addSelector); | ||
}; | ||
function registerSelectors(selectors) { | ||
@@ -68,3 +60,3 @@ Object.keys(selectors).forEach(function (name) { | ||
selector.selectorName = name; | ||
_allSelectors.add(selector); | ||
_addSelector(selector); | ||
} | ||
@@ -129,4 +121,11 @@ }); | ||
}); | ||
var output = selector(state); | ||
Object.assign(ret, { inputs: inputs, output: output }); | ||
var extra = { inputs: inputs }; | ||
try { | ||
var output = selector(state); | ||
extra.output = output; | ||
} catch (e) { | ||
var error = 'checkSelector: error getting output of selector ' + selectorName + '. The error was:\n' + e; | ||
extra.error = error; | ||
} | ||
Object.assign(ret, extra); | ||
} | ||
@@ -133,0 +132,0 @@ |
@@ -1,1 +0,1 @@ | ||
(function(e,r){if(typeof define==="function"&&define.amd){define("ReselectTools",["exports","reselect"],r)}else if(typeof exports!=="undefined"){r(exports,require("reselect"))}else{var t={exports:{}};r(t.exports,e.Reselect);e.ReselectTools=t.exports}})(this,function(e,r){"use strict";e.__esModule=true;e.createSelectorWithDependencies=i;e.registerSelectors=c;e.reset=f;e.checkSelector=s;e.getStateWith=l;e.selectorGraph=p;function t(e){if(Array.isArray(e)){for(var r=0,t=Array(e.length);r<e.length;r++){t[r]=e[r]}return t}else{return Array.from(e)}}var n=null;var o=new Set;var a=function e(r){return typeof r==="function"};function i(){for(var e=arguments.length,n=Array(e),a=0;a<e;a++){n[a]=arguments[a]}var i=n.pop();var u=Array.isArray(n[0])?n[0]:n;var c=r.createSelector.apply(undefined,t(u).concat([i]));c.dependencies=u;o.add(c);return c}var u=function e(r){return r&&r.resultFunc||a(r)};function c(e){Object.keys(e).forEach(function(r){var t=e[r];if(u(t)){t.selectorName=r;o.add(t)}})}function f(){n=null;o=new Set}function s(e){if(typeof e==="string"){var r=true;var t=false;var i=undefined;try{for(var u=o[Symbol.iterator](),c;!(r=(c=u.next()).done);r=true){var f=c.value;if(f.selectorName===e){e=f;break}}}catch(e){t=true;i=e}finally{try{if(!r&&u.return){u.return()}}finally{if(t){throw i}}}}if(!a(e)){throw new Error("Selector "+e+" is not a function...has it been registered?")}var s=e,l=s.dependencies,d=l===undefined?[]:l,v=s.selectorName,p=v===undefined?null:v;var y=typeof p==="string";var m=e.recomputations?e.recomputations():null;var h={dependencies:d,recomputations:m,isNamed:y,selectorName:p};if(n){var S=n();var g=d.map(function(e){return e(S)});var w=e(S);Object.assign(h,{inputs:g,output:w})}return h}function l(e){n=e}function d(e){return Array.from(e.toString()).reduce(function(e,r){return r.charCodeAt(0)+e},0)}var v=function e(r){if(r.selectorName){return r.selectorName}if(r.name){return r.name}return(r.dependencies||[]).reduce(function(e,r){return e+d(r)},(r.resultFunc?r.resultFunc:r).toString())};function p(){var e=arguments.length>0&&arguments[0]!==undefined?arguments[0]:v;var r={nodes:{},edges:[]};var t=function t(n){var o=e(n);if(r.nodes[o])return;var a=s(n),i=a.recomputations,u=a.isNamed;r.nodes[o]={recomputations:i,isNamed:u,name:o};var c=n.dependencies||[];c.forEach(function(n){t(n);r.edges.push({from:o,to:e(n)})})};var n=true;var a=false;var i=undefined;try{for(var u=o[Symbol.iterator](),c;!(n=(c=u.next()).done);n=true){var f=c.value;t(f)}}catch(e){a=true;i=e}finally{try{if(!n&&u.return){u.return()}}finally{if(a){throw i}}}return r}if(typeof window!=="undefined"){window.__RESELECT_TOOLS__={selectorGraph:p,checkSelector:s}}}); | ||
(function(e,r){if(typeof define==="function"&&define.amd){define("ReselectTools",["exports","reselect"],r)}else if(typeof exports!=="undefined"){r(exports,require("reselect"))}else{var t={exports:{}};r(t.exports,e.Reselect);e.ReselectTools=t.exports}})(this,function(e,r){"use strict";e.__esModule=true;e.createSelectorWithDependencies=t;e.registerSelectors=i;e.reset=a;e.checkSelector=f;e.getStateWith=u;e.selectorGraph=l;var w=null;var N=new Set;var x=function e(r){return typeof r==="function"};function t(){return r.createSelector.apply(undefined,arguments)}var n=function e(r){return r&&r.resultFunc||x(r)};var o=function e(r){N.add(r);var t=r.dependencies||[];t.forEach(e)};function i(t){Object.keys(t).forEach(function(e){var r=t[e];if(n(r)){r.selectorName=e;o(r)}})}function a(){w=null;N=new Set}function f(e){if(typeof e==="string"){var r=true;var t=false;var n=undefined;try{for(var o=N[Symbol.iterator](),i;!(r=(i=o.next()).done);r=true){var a=i.value;if(a.selectorName===e){e=a;break}}}catch(e){t=true;n=e}finally{try{if(!r&&o.return){o.return()}}finally{if(t){throw n}}}}if(!x(e)){throw new Error("Selector "+e+" is not a function...has it been registered?")}var u=e,c=u.dependencies,f=c===undefined?[]:c,s=u.selectorName,l=s===undefined?null:s;var d=typeof l==="string";var v=e.recomputations?e.recomputations():null;var p={dependencies:f,recomputations:v,isNamed:d,selectorName:l};if(w){var m=w();var h=f.map(function(e){return e(m)});var y={inputs:h};try{var S=e(m);y.output=S}catch(e){var g="checkSelector: error getting output of selector "+l+". The error was:\n"+e;y.error=g}Object.assign(p,y)}return p}function u(e){w=e}function c(e){return Array.from(e.toString()).reduce(function(e,r){return r.charCodeAt(0)+e},0)}var s=function e(r){if(r.selectorName){return r.selectorName}if(r.name){return r.name}return(r.dependencies||[]).reduce(function(e,r){return e+c(r)},(r.resultFunc?r.resultFunc:r).toString())};function l(){var u=arguments.length>0&&arguments[0]!==undefined?arguments[0]:s;var c={nodes:{},edges:[]};var e=function r(e){var t=u(e);if(c.nodes[t])return;var n=f(e),o=n.recomputations,i=n.isNamed;c.nodes[t]={recomputations:o,isNamed:i,name:t};var a=e.dependencies||[];a.forEach(function(e){r(e);c.edges.push({from:t,to:u(e)})})};var r=true;var t=false;var n=undefined;try{for(var o=N[Symbol.iterator](),i;!(r=(i=o.next()).done);r=true){var a=i.value;e(a)}}catch(e){t=true;n=e}finally{try{if(!r&&o.return){o.return()}}finally{if(t){throw n}}}return c}if(typeof window!=="undefined"){window.__RESELECT_TOOLS__={selectorGraph:l,checkSelector:f}}}); |
@@ -15,4 +15,2 @@ 'use strict'; | ||
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 _getState = null; | ||
@@ -25,13 +23,9 @@ var _allSelectors = new Set(); | ||
/* | ||
* This function is only exported for legacy purposes. | ||
* It will be removed in future versions. | ||
* | ||
*/ | ||
function createSelectorWithDependencies() { | ||
for (var _len = arguments.length, funcs = Array(_len), _key = 0; _key < _len; _key++) { | ||
funcs[_key] = arguments[_key]; | ||
} | ||
var resultFunc = funcs.pop(); | ||
var dependencies = Array.isArray(funcs[0]) ? funcs[0] : funcs; | ||
var selector = _reselect.createSelector.apply(undefined, _toConsumableArray(dependencies).concat([resultFunc])); | ||
selector.dependencies = dependencies; | ||
_allSelectors.add(selector); | ||
return selector; | ||
return _reselect.createSelector.apply(undefined, arguments); | ||
} | ||
@@ -43,2 +37,9 @@ | ||
var _addSelector = function _addSelector(selector) { | ||
_allSelectors.add(selector); | ||
var dependencies = selector.dependencies || []; | ||
dependencies.forEach(_addSelector); | ||
}; | ||
function registerSelectors(selectors) { | ||
@@ -49,3 +50,3 @@ Object.keys(selectors).forEach(function (name) { | ||
selector.selectorName = name; | ||
_allSelectors.add(selector); | ||
_addSelector(selector); | ||
} | ||
@@ -110,4 +111,11 @@ }); | ||
}); | ||
var output = selector(state); | ||
Object.assign(ret, { inputs: inputs, output: output }); | ||
var extra = { inputs: inputs }; | ||
try { | ||
var output = selector(state); | ||
extra.output = output; | ||
} catch (e) { | ||
var error = 'checkSelector: error getting output of selector ' + selectorName + '. The error was:\n' + e; | ||
extra.error = error; | ||
} | ||
Object.assign(ret, extra); | ||
} | ||
@@ -114,0 +122,0 @@ |
@@ -13,4 +13,2 @@ 'use strict'; | ||
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 _getState = null; | ||
@@ -23,13 +21,9 @@ var _allSelectors = new Set(); | ||
/* | ||
* This function is only exported for legacy purposes. | ||
* It will be removed in future versions. | ||
* | ||
*/ | ||
function createSelectorWithDependencies() { | ||
for (var _len = arguments.length, funcs = Array(_len), _key = 0; _key < _len; _key++) { | ||
funcs[_key] = arguments[_key]; | ||
} | ||
var resultFunc = funcs.pop(); | ||
var dependencies = Array.isArray(funcs[0]) ? funcs[0] : funcs; | ||
var selector = _reselect.createSelector.apply(undefined, _toConsumableArray(dependencies).concat([resultFunc])); | ||
selector.dependencies = dependencies; | ||
_allSelectors.add(selector); | ||
return selector; | ||
return _reselect.createSelector.apply(undefined, arguments); | ||
} | ||
@@ -41,2 +35,9 @@ | ||
var _addSelector = function _addSelector(selector) { | ||
_allSelectors.add(selector); | ||
var dependencies = selector.dependencies || []; | ||
dependencies.forEach(_addSelector); | ||
}; | ||
function registerSelectors(selectors) { | ||
@@ -47,3 +48,3 @@ Object.keys(selectors).forEach(function (name) { | ||
selector.selectorName = name; | ||
_allSelectors.add(selector); | ||
_addSelector(selector); | ||
} | ||
@@ -108,4 +109,11 @@ }); | ||
}); | ||
var output = selector(state); | ||
Object.assign(ret, { inputs: inputs, output: output }); | ||
var extra = { inputs: inputs }; | ||
try { | ||
var output = selector(state); | ||
extra.output = output; | ||
} catch (e) { | ||
var error = 'checkSelector: error getting output of selector ' + selectorName + '. The error was:\n' + e; | ||
extra.error = error; | ||
} | ||
Object.assign(ret, extra); | ||
} | ||
@@ -112,0 +120,0 @@ |
{ | ||
"name": "reselect-tools", | ||
"version": "0.0.6", | ||
"version": "0.0.7", | ||
"description": "Selector Debugging Tools for Reselect.", | ||
@@ -87,4 +87,4 @@ "main": "lib/index.js", | ||
"dependencies": { | ||
"reselect": "^3.0.1" | ||
"reselect": "4.0.0" | ||
} | ||
} |
@@ -14,8 +14,2 @@ # Reselect Tools | ||
```js | ||
// in selectors.js | ||
import { | ||
createSelectorWithDependencies as createSelector | ||
} from 'reselect-tools' | ||
export const data$ = (state) => state.data; | ||
@@ -78,7 +72,6 @@ export const ui$ = (state) => state.ui; | ||
- [API](#api) | ||
- [`createSelectorWithDependencies`](#createselectorwithdependenciesinputselectors--inputselectors-resultfunc) | ||
- [`getStateWith`](#getstatewithfunc) | ||
- [`checkSelector`](#checkselectorselector) | ||
- [`selectorGraph`](#selectorgraphselectorkey--defaultselectorkey) | ||
- [`registerSelectors`](#registorselectorskeyselectorobj) | ||
- [`registerSelectors`](#registerselectorskeyselectorobj) | ||
- [License](#license) | ||
@@ -106,35 +99,25 @@ | ||
3. Tracking Dependencies: | ||
3. Building the Graph: | ||
Replace ```createSelector``` from reselect with ```createSelectorWithDependencies```! | ||
In order to start building out the selector graph, we need to tell the devtools about the selectors. | ||
``` | ||
import { | ||
createSelectorWithDependencies as createSelector | ||
} from 'reselect-tools' | ||
``` | ||
That's it! At this point you should be able to open the devtools and view the selector graph. While the graph will be correct, it might be hard to understand what's going on without... | ||
4. Naming Selectors: | ||
``` | ||
const foo$ = createSelectorWithDependencies(bar$, (foo) => foo + 1); | ||
foo$.selectorName = 'foo$' // selector while show up as 'foo' | ||
``` | ||
This can get tedious, so you might want to register your selectors all at once. | ||
``` | ||
import { registerSelectors } from 'reselect-tools' | ||
registerSelectors({ foo$, bar$ }); | ||
registerSelectors({ mySelector$ }) | ||
``` | ||
Or if you're keeping all your selectors in the same place: | ||
If you're keeping all your selectors in the same place, this is dead simple: | ||
``` | ||
import { registerSelectors } from 'reselect-tools' | ||
import * as selectors from './selectors.js' | ||
ReselectTools.registerSelectors(selectors) | ||
registerSelectors(selectors) | ||
``` | ||
Now the graph should have nice names for your selectors. | ||
That's it! At this point you should be able to open the devtools and view the selector graph. | ||
5. Checking Selector Inputs and Outputs | ||
The tools will automatically discover and name dependencies of the selectors. If you want to override the name of a selector, you can do so: | ||
``` | ||
const foo$ = createSelector(bar$, (foo) => foo + 1); | ||
foo$.selectorName = 'bar$' // selector while show up as 'bar' | ||
``` | ||
4. Checking Selector Inputs and Outputs | ||
Imagine that your tests are passing, but you think some selector in your app might be receiving bad input from a depended-upon selector. Where in the chain is the problem? In order to allow ```checkSelector``` and by extension, the extension, to get this information, we need to give Reselect Tools some way of feeding state to a selector. | ||
@@ -154,20 +137,2 @@ ``` | ||
### createSelectorWithDependencies(...inputSelectors | [inputSelectors], resultFunc) | ||
Calls down to Reselect's `createSelector`, but adds ```inputSelectors``` as an array of ```.dependencies``` on the returned selector. | ||
```js | ||
const vanillaSelector1 = state => state.values.value1 | ||
const vanillaSelector2 = state => state.values.value2 | ||
const mySelector = createSelectorWithDependencies( | ||
vanillaSelector1, | ||
vanillaSelector2, | ||
(value1, value2) => value1 + value2 | ||
) | ||
mySelector.dependencies[0] // vanillaSelector1 | ||
mySelector.dependencies[1] // vanillaSelector2 | ||
``` | ||
### getStateWith(func) | ||
@@ -182,3 +147,2 @@ | ||
By default, outputs only the recomputations of the selector. | ||
If you use ```createSelectorWithDependencies```, it will also output the selector's dependencies. | ||
If you use ```getStateWith```, it will output the selector's input and output values. | ||
@@ -191,3 +155,3 @@ If you use ```registerSelectors```, you can pass it the string name of a selector. | ||
const four$ = () => 4 | ||
const mySelector$ = createSelectorWithDependencies(two$, four$, (two, four) => two + four) | ||
const mySelector$ = createSelector(two$, four$, (two, four) => two + four) | ||
registerSelectors({ mySelector$ }) | ||
@@ -246,6 +210,7 @@ getStateWith(() => null) | ||
### registorSelectors(keySelectorObj) | ||
### registerSelectors(keySelectorObj) | ||
Simple helper to set names on an object containing selector names as keys and selectors as values. Has the side effect of guaranteeing a selector is added to the graph (even if it was not created with ```createSelectorWithDependencies``` and no selector in the graph depends on it). | ||
Add a named selector to the graph. Set selector names as keys and selectors as values. | ||
### Without The Extension | ||
@@ -252,0 +217,0 @@ |
import { createSelector } from 'reselect' | ||
let _getState = null | ||
@@ -8,9 +9,9 @@ let _allSelectors = new Set() | ||
export function createSelectorWithDependencies(...funcs) { | ||
let resultFunc = funcs.pop() | ||
const dependencies = Array.isArray(funcs[0]) ? funcs[0] : funcs | ||
const selector = createSelector(...dependencies, resultFunc) | ||
selector.dependencies = dependencies | ||
_allSelectors.add(selector) | ||
return selector | ||
/* | ||
* This function is only exported for legacy purposes. | ||
* It will be removed in future versions. | ||
* | ||
*/ | ||
export function createSelectorWithDependencies(...args) { | ||
return createSelector(...args) | ||
} | ||
@@ -20,2 +21,9 @@ | ||
const _addSelector = (selector) => { | ||
_allSelectors.add(selector) | ||
const dependencies = selector.dependencies || [] | ||
dependencies.forEach(_addSelector) | ||
} | ||
export function registerSelectors(selectors) { | ||
@@ -26,3 +34,3 @@ Object.keys(selectors).forEach((name) => { | ||
selector.selectorName = name | ||
_allSelectors.add(selector) | ||
_addSelector(selector) | ||
} | ||
@@ -62,4 +70,11 @@ }) | ||
const inputs = dependencies.map((parentSelector) => parentSelector(state)) | ||
const output = selector(state) | ||
Object.assign(ret, { inputs, output }) | ||
const extra = { inputs } | ||
try { | ||
const output = selector(state) | ||
extra.output = output | ||
} catch (e) { | ||
const error = `checkSelector: error getting output of selector ${selectorName}. The error was:\n${e}` | ||
extra.error = error | ||
} | ||
Object.assign(ret, extra) | ||
} | ||
@@ -66,0 +81,0 @@ |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
635
35132
235
+ Addedreselect@4.0.0(transitive)
- Removedreselect@3.0.1(transitive)
Updatedreselect@4.0.0