"
28 | ],
29 | "version": "0.0.2"
30 | }
--------------------------------------------------------------------------------
/extension/app/utils/apiMiddleware.js:
--------------------------------------------------------------------------------
1 | import * as types from '../../app/constants/ActionTypes';
2 | import {
3 | checkSelectorSuccess,
4 | checkSelectorFailed,
5 | getSelectorGraphSuccess,
6 | getSelectorGraphFailed,
7 | } from '../../app/actions/graph';
8 |
9 | export default api => store => next => async (action) => {
10 | const result = next(action);
11 | if (action.type === types.CHECK_SELECTOR) {
12 | const { selector } = action.payload;
13 | const { id } = selector;
14 | try {
15 | const checked = await api.checkSelector(id);
16 | store.dispatch(checkSelectorSuccess({ ...checked, id }));
17 | } catch (e) {
18 | store.dispatch(checkSelectorFailed(selector));
19 | }
20 | return result;
21 | }
22 |
23 | if (action.type === types.GET_SELECTOR_GRAPH) {
24 | try {
25 | const graph = await api.selectorGraph();
26 | store.dispatch(getSelectorGraphSuccess(graph));
27 | } catch (e) {
28 | store.dispatch(getSelectorGraphFailed());
29 | }
30 | }
31 |
32 | return result;
33 | };
34 |
--------------------------------------------------------------------------------
/extension/app/store/configureStore.dev.js:
--------------------------------------------------------------------------------
1 | import { applyMiddleware, createStore, compose } from 'redux';
2 | import thunk from 'redux-thunk';
3 | import rootReducer from '../reducers';
4 | // import storage from '../utils/storage';
5 |
6 | // If Redux DevTools Extension is installed use it, otherwise use Redux compose
7 | /* eslint-disable no-underscore-dangle */
8 | const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
9 | window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
10 | // Options: http://zalmoxisus.github.io/redux-devtools-extension/API/Arguments.html
11 | }) :
12 | compose;
13 | /* eslint-enable no-underscore-dangle */
14 |
15 |
16 | export default function (initialState, ...middlewares) {
17 | const enhancer = composeEnhancers(
18 | applyMiddleware(thunk, ...middlewares),
19 | // storage(),
20 | );
21 |
22 | const store = createStore(rootReducer, initialState, enhancer);
23 |
24 | if (module.hot) {
25 | module.hot.accept('../reducers', () => {
26 | const nextRootReducer = require('../reducers');
27 |
28 | store.replaceReducer(nextRootReducer);
29 | });
30 | }
31 | return store;
32 | }
33 |
--------------------------------------------------------------------------------
/extension/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Jhen-Jie Hong
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015-2016 Reselect Contributors
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/extension/TODO.md:
--------------------------------------------------------------------------------
1 | Features:
2 | - [X] refresh button?
3 | - [X] make the graph pretty
4 | - [X] highlight dependencies through graph
5 | - [X] display number of recomputations (might need a refresh button)
6 | - [X] deal with long labels
7 | - [X] deal w/weird flexbox layout issues
8 | - [X] change N/A/ everywhere
9 | - [X] should we be able to get the value of selectors in the extension that we haven't added. - no
10 | - [X] pageApi can run into problems because we attempt to pass in an unregistered func with quotes in it.
11 | - [X] inject id field into graph nodes
12 | - [X] search selectors
13 | - [X] lock drawer open or closed
14 | - [X] find nodes depend on a given node
15 | - [X] highlight most recomputed nodes
16 | - [X] improve checkSelector rendering - zip inputs and dependencies
17 | - [ ] highlight unregistered nodes
18 | - [ ] show page action only when we are on a page w/devtools on it
19 | - [ ] Enable / disable depending on whether or not reselect tools have been installed
20 |
21 |
22 | Platforms:
23 | - [ ] Allow remote debugging with an RPC interface a la redux devtools
24 |
25 | Productionize
26 | - [X] Create icon
27 | - [X] Remove todoapp references
28 | - [X] Remove console logs
29 | - [X] Remove unnecessary pug templates
30 | - [X] Handle bad loads better
31 | - [X] Decide if we need redux
32 | - [ ] Remove all references to boilerplate
33 | - [ ] Set up linting, at least
34 | - [ ] At least look at the tests
35 |
--------------------------------------------------------------------------------
/examples/demo-app.js:
--------------------------------------------------------------------------------
1 | var { selectorGraph } = ReselectTools;
2 | var { createSelector } = Reselect;
3 | ReselectTools.getStateWith(() => STORE);
4 |
5 | var STORE = {
6 | data: {
7 | users: {
8 | '1': {
9 | id: '1',
10 | name: 'bob',
11 | pets: ['a', 'b'],
12 | },
13 | '2': {
14 | id: '2',
15 | name: 'alice',
16 | pets: ['a'],
17 | }
18 | },
19 | pets: {
20 | 'a': {
21 | name: 'fluffy',
22 | },
23 | 'b': {
24 | name: 'paws',
25 | }
26 | }
27 | },
28 | ui: {
29 | currentUser: '1',
30 | }
31 | };
32 |
33 | const data$ = (state) => state.data;
34 | const ui$ = (state) => state.ui;
35 | var users$ = createSelector(data$, (data) => data.users);
36 | var pets$ = createSelector(data$, ({ pets }) => pets);
37 | var currentUser$ = createSelector(ui$, users$, (ui, users) => users[ui.currentUser]);
38 |
39 | var currentUserPets$ = createSelector(currentUser$, pets$, (currentUser, pets) => currentUser.pets.map((petId) => pets[petId]));
40 |
41 | const random$ = (state) => 1;
42 | const thingy$ = createSelector(random$, (number) => number + 1);
43 |
44 | const selectors = {
45 | data$,
46 | ui$,
47 | users$,
48 | pets$,
49 | currentUser$,
50 | currentUserPets$,
51 | random$,
52 | thingy$,
53 | };
54 |
55 | ReselectTools.registerSelectors(selectors);
56 |
57 |
58 | drawCytoscapeGraph(selectorGraph());
--------------------------------------------------------------------------------
/extension/test/app/actions/todos.spec.js:
--------------------------------------------------------------------------------
1 | import { expect } from 'chai';
2 | import * as types from '../../../app/constants/ActionTypes';
3 | import * as actions from '../../../app/actions/todos';
4 |
5 | describe('todoapp todo actions', () => {
6 | it('addTodo should create ADD_TODO action', () => {
7 | expect(actions.addTodo('Use Redux')).to.eql({
8 | type: types.ADD_TODO,
9 | text: 'Use Redux'
10 | });
11 | });
12 |
13 | it('deleteTodo should create DELETE_TODO action', () => {
14 | expect(actions.deleteTodo(1)).to.eql({
15 | type: types.DELETE_TODO,
16 | id: 1
17 | });
18 | });
19 |
20 | it('editTodo should create EDIT_TODO action', () => {
21 | expect(actions.editTodo(1, 'Use Redux everywhere')).to.eql({
22 | type: types.EDIT_TODO,
23 | id: 1,
24 | text: 'Use Redux everywhere'
25 | });
26 | });
27 |
28 | it('completeTodo should create COMPLETE_TODO action', () => {
29 | expect(actions.completeTodo(1)).to.eql({
30 | type: types.COMPLETE_TODO,
31 | id: 1
32 | });
33 | });
34 |
35 | it('completeAll should create COMPLETE_ALL action', () => {
36 | expect(actions.completeAll()).to.eql({
37 | type: types.COMPLETE_ALL
38 | });
39 | });
40 |
41 | it('clearCompleted should create CLEAR_COMPLETED action', () => {
42 | expect(actions.clearCompleted('Use Redux')).to.eql({
43 | type: types.CLEAR_COMPLETED
44 | });
45 | });
46 | });
47 |
--------------------------------------------------------------------------------
/extension/test/app/components/Header.spec.js:
--------------------------------------------------------------------------------
1 | import { expect } from 'chai';
2 | import sinon from 'sinon';
3 | import React from 'react';
4 | import TestUtils from 'react-addons-test-utils';
5 | import Header from '../../../app/components/Header';
6 | import TodoTextInput from '../../../app/components/TodoTextInput';
7 |
8 | function setup() {
9 | const props = {
10 | addTodo: sinon.spy()
11 | };
12 |
13 | const renderer = TestUtils.createRenderer();
14 | renderer.render();
15 | const output = renderer.getRenderOutput();
16 |
17 | return { props, output, renderer };
18 | }
19 |
20 | describe('todoapp Header component', () => {
21 | it('should render correctly', () => {
22 | const { output } = setup();
23 |
24 | expect(output.type).to.equal('header');
25 |
26 | const [h1, input] = output.props.children;
27 |
28 | expect(h1.type).to.equal('h1');
29 | expect(h1.props.children).to.equal('todos');
30 |
31 | expect(input.type).to.equal(TodoTextInput);
32 | expect(input.props.newTodo).to.equal(true);
33 | expect(input.props.placeholder).to.equal('What needs to be done?');
34 | });
35 |
36 | it('should call addTodo if length of text is greater than 0', () => {
37 | const { output, props } = setup();
38 | const input = output.props.children[1];
39 | input.props.onSave('');
40 | expect(props.addTodo.callCount).to.equal(0);
41 | input.props.onSave('Use Redux');
42 | expect(props.addTodo.callCount).to.equal(1);
43 | });
44 | });
45 |
--------------------------------------------------------------------------------
/extension/app/components/TodoTextInput.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import classnames from 'classnames';
3 | import style from './TodoTextInput.css';
4 |
5 | export default class TodoTextInput extends Component {
6 |
7 | static propTypes = {
8 | onSave: PropTypes.func.isRequired,
9 | text: PropTypes.string,
10 | placeholder: PropTypes.string,
11 | editing: PropTypes.bool,
12 | newTodo: PropTypes.bool
13 | };
14 |
15 | constructor(props, context) {
16 | super(props, context);
17 | this.state = {
18 | text: this.props.text || ''
19 | };
20 | }
21 |
22 | handleSubmit = (evt) => {
23 | const text = evt.target.value.trim();
24 | if (evt.which === 13) {
25 | this.props.onSave(text);
26 | if (this.props.newTodo) {
27 | this.setState({ text: '' });
28 | }
29 | }
30 | };
31 |
32 | handleChange = (evt) => {
33 | this.setState({ text: evt.target.value });
34 | };
35 |
36 | handleBlur = (evt) => {
37 | if (!this.props.newTodo) {
38 | this.props.onSave(evt.target.value);
39 | }
40 | };
41 |
42 | render() {
43 | return (
44 |
57 | );
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/examples/your-app.js:
--------------------------------------------------------------------------------
1 | // Comes from JSON.stringify(selectorGraph());
2 | const graph = {
3 | "edges": [
4 | {
5 | "from": "users$",
6 | "to": "data$"
7 | },
8 | {
9 | "from": "pets$",
10 | "to": "data$"
11 | },
12 | {
13 | "from": "currentUser$",
14 | "to": "ui$"
15 | },
16 | {
17 | "from": "currentUser$",
18 | "to": "users$"
19 | },
20 | {
21 | "from": "currentUserPets$",
22 | "to": "currentUser$"
23 | },
24 | {
25 | "from": "currentUserPets$",
26 | "to": "pets$"
27 | },
28 | {
29 | "from": "thingy$",
30 | "to": "random$"
31 | }
32 | ],
33 | "nodes": {
34 | "currentUser$": {
35 | "name": "currentUser$",
36 | "recomputations": 0
37 | },
38 | "currentUserPets$": {
39 | "name": "currentUserPets$",
40 | "recomputations": 0
41 | },
42 | "data$": {
43 | "name": "data$",
44 | "recomputations": null,
45 | },
46 | "pets$": {
47 | "name": "pets$",
48 | "recomputations": 0
49 | },
50 | "random$": {
51 | "name": "random$",
52 | "recomputations": null,
53 | },
54 | "thingy$": {
55 | "name": "thingy$",
56 | "recomputations": 0
57 | },
58 | "ui$": {
59 | "name": "ui$",
60 | "recomputations": null,
61 | },
62 | "users$": {
63 | "name": "users$",
64 | "recomputations": 0
65 | }
66 | }
67 | }
68 |
69 | // This overrides the graph the devtools get - don't try this at home!
70 | window.__RESELECT_TOOLS__.selectorGraph = () => graph;
71 |
72 |
73 | drawCytoscapeGraph(graph);
--------------------------------------------------------------------------------
/examples/simple-graph.js:
--------------------------------------------------------------------------------
1 | var { checkSelector } = ReselectTools;
2 |
3 |
4 | const cytoDefaults = {
5 | style: [ // the stylesheet for the graph
6 | {
7 | selector: 'node',
8 | style: {
9 | 'background-color': '#666',
10 | 'label': 'data(id)'
11 | }
12 | },
13 |
14 | {
15 | selector: 'edge',
16 | style: {
17 | 'width': 3,
18 | 'line-color': '#ccc',
19 | 'target-arrow-color': '#ccc',
20 | 'target-arrow-shape': 'triangle'
21 | }
22 | }
23 | ],
24 |
25 | layout: {
26 | name: 'dagre',
27 | rankDir: 'BT',
28 | ranker: 'longest-path',
29 | }
30 | };
31 |
32 |
33 | function drawCytoscapeGraph(graph) {
34 | const { nodes, edges } = graph;
35 |
36 | const cytoNodes = Object.keys(nodes).map((name) => ({
37 | data: Object.assign({}, nodes[name], {
38 | id: name
39 | })
40 | }));
41 |
42 | const findSelectorId = (selector) => {
43 | const node = cytoNodes.find(({ data }) => data.name === selector);
44 | return node.data.id;
45 | };
46 |
47 | const cytoEdges = edges.map((edge, i) => ({data: {
48 | source: findSelectorId(edge.from),
49 | target: findSelectorId(edge.to),
50 | id: i,
51 | }}));
52 |
53 | const elements = cytoNodes.concat(cytoEdges);
54 |
55 | const cy = cytoscape(Object.assign({}, cytoDefaults, {
56 | container: document.getElementById('root'), // container to render in
57 | elements,
58 | }));
59 |
60 | cy.nodes().on("click", function(x, ...args) {
61 | const data = this.data();
62 | console.log(data.name, checkSelector(data.name));
63 | });
64 |
65 | }
66 |
--------------------------------------------------------------------------------
/extension/app/components/Footer.css:
--------------------------------------------------------------------------------
1 | .footer {
2 | color: #777;
3 | padding: 10px 15px;
4 | height: 20px;
5 | text-align: center;
6 | border-top: 1px solid #e6e6e6;
7 | }
8 |
9 | .footer:before {
10 | content: '';
11 | position: absolute;
12 | right: 0;
13 | bottom: 0;
14 | left: 0;
15 | height: 50px;
16 | overflow: hidden;
17 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
18 | 0 8px 0 -3px #f6f6f6,
19 | 0 9px 1px -3px rgba(0, 0, 0, 0.2),
20 | 0 16px 0 -6px #f6f6f6,
21 | 0 17px 2px -6px rgba(0, 0, 0, 0.2);
22 | }
23 |
24 | .filters {
25 | margin: 0;
26 | padding: 0;
27 | list-style: none;
28 | position: absolute;
29 | right: 0;
30 | left: 0;
31 | }
32 |
33 | .filters li {
34 | display: inline;
35 | }
36 |
37 | .filters li a {
38 | color: inherit;
39 | margin: 3px;
40 | padding: 3px 7px;
41 | text-decoration: none;
42 | border: 1px solid transparent;
43 | border-radius: 3px;
44 | }
45 |
46 | .filters li a.selected,
47 | .filters li a:hover {
48 | border-color: rgba(175, 47, 47, 0.1);
49 | }
50 |
51 | .filters li a.selected {
52 | border-color: rgba(175, 47, 47, 0.2);
53 | }
54 |
55 | .todoCount {
56 | float: left;
57 | text-align: left;
58 | }
59 |
60 | .todoCount strong {
61 | font-weight: 300;
62 | }
63 |
64 | .clearCompleted,
65 | html .clearCompleted:active {
66 | float: right;
67 | position: relative;
68 | line-height: 20px;
69 | text-decoration: none;
70 | cursor: pointer;
71 | }
72 |
73 | .clearCompleted:hover {
74 | text-decoration: underline;
75 | }
76 |
77 | @media (max-width: 430px) {
78 | .footer {
79 | height: 50px;
80 | }
81 |
82 | .filters {
83 | bottom: 10px;
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/extension/app/components/SelectorState.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import StateTree from './StateTree';
3 | import style from './SelectorState.css';
4 |
5 | const InputsSection = ({ zipped = [], onClickSelector }) => (
6 |
7 | {zipped.length ? 'Inputs' : 'No Inputs'}
8 |
20 |
21 | );
22 | InputsSection.propTypes = {
23 | zipped: PropTypes.array,
24 | onClickSelector: PropTypes.func
25 | };
26 |
27 | const OutputSection = ({ output }) => (
28 |
32 | );
33 | OutputSection.propTypes = { output: PropTypes.any };
34 |
35 | export default class SelectorState extends Component {
36 | static propTypes = {
37 | checkedSelector: PropTypes.object,
38 | onClickSelector: PropTypes.func
39 | }
40 | render() {
41 | const { checkedSelector, onClickSelector } = this.props;
42 | const { zipped, output } = checkedSelector;
43 | return (
44 |
45 |
46 | { zipped && }
47 |
48 | );
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/extension/chrome/extension/reselect-tools-app.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import Root from '../../app/containers/Root';
4 | import './reselect-tools-app.css';
5 |
6 | import * as api from './page-api';
7 |
8 | import createStore from '../../app/store/configureStore';
9 | import createApiMiddleware from '../../app/utils/apiMiddleware';
10 |
11 | const checkSelector = (id) => {
12 | if (id === 'c') {
13 | return Promise.resolve({ inputs: [1], output: {hey: 'hey'}, id, name: id });
14 | }
15 | if (id === 'b') {
16 | return Promise.resolve({ inputs: [1], output: 5, id, name: id });
17 | }
18 | if (id === 'a') {
19 | return Promise.resolve({ inputs: [5], output: 5, id, name: id });
20 | }
21 | return Promise.resolve({ inputs: [], output: 2, id, name: id });
22 | };
23 |
24 | const mockApi = {
25 | checkSelector,
26 | selectorGraph: () => {
27 | const a = { id: 'a', recomputations: 10, isNamed: true };
28 | const b = { id: 'b', recomputations: 10, isNamed: true };
29 | const c = { id: 'c', recomputations: 10, isNamed: true };
30 | const d = { id: 'd', recomputations: 2, isNamed: true };
31 | const e = { id: 'e', recomputations: 4, isNamed: true };
32 | const f = { id: 'f', recomputations: 6, isNamed: true };
33 | return Promise.resolve({ nodes: { a, b, c, d, e, f }, edges: [{ from: 'a', to: 'b' }, { from: 'b', to: 'c' }] });
34 | },
35 | };
36 |
37 |
38 | const apiMiddleware = createApiMiddleware(api);
39 | // const apiMiddleware = createApiMiddleware(window.location.origin === 'http://localhost:8000' ? mockApi : api);
40 |
41 |
42 | const initialState = {};
43 |
44 | ReactDOM.render(
45 | ,
46 | document.querySelector('#root')
47 | );
48 |
--------------------------------------------------------------------------------
/extension/test/e2e/injectpage.js:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 | import webdriver from 'selenium-webdriver';
3 | import { expect } from 'chai';
4 | import { delay, startChromeDriver, buildWebDriver } from '../func';
5 |
6 | describe('inject page (in github.com)', function test() {
7 | let driver;
8 | this.timeout(15000);
9 |
10 | before(async () => {
11 | await startChromeDriver();
12 | const extPath = path.resolve('build');
13 | driver = buildWebDriver(extPath);
14 | await driver.get('https://github.com');
15 | });
16 |
17 | after(async () => driver.quit());
18 |
19 | it('should open Github', async () => {
20 | const title = await driver.getTitle();
21 | expect(title).to.equal('The world\'s leading software development platform · GitHub');
22 | });
23 |
24 | it('should render inject app', async () => {
25 | await driver.wait(
26 | () => driver.findElements(webdriver.By.className('inject-react-example'))
27 | .then(elems => elems.length > 0),
28 | 10000,
29 | 'Inject app not found'
30 | );
31 | });
32 |
33 | it('should find `Open TodoApp` button', async () => {
34 | await driver.wait(
35 | () => driver.findElements(webdriver.By.css('.inject-react-example button'))
36 | .then(elems => elems.length > 0),
37 | 10000,
38 | 'Inject app `Open TodoApp` button not found'
39 | );
40 | });
41 |
42 | it('should find iframe', async () => {
43 | driver.findElement(webdriver.By.css('.inject-react-example button')).click();
44 | await delay(1000);
45 | await driver.wait(
46 | () => driver.findElements(webdriver.By.css('.inject-react-example iframe'))
47 | .then(elems => elems.length > 0),
48 | 10000,
49 | 'Inject app iframe not found'
50 | );
51 | });
52 | });
53 |
--------------------------------------------------------------------------------
/extension/webpack/prod.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const webpack = require('webpack');
3 | const postCSSConfig = require('./postcss.config');
4 |
5 | const customPath = path.join(__dirname, './customPublicPath');
6 |
7 | module.exports = {
8 | entry: {
9 | 'reselect-tools-app': [customPath, path.join(__dirname, '../chrome/extension/reselect-tools-app')],
10 | background: [customPath, path.join(__dirname, '../chrome/extension/background')],
11 | panel: [customPath, path.join(__dirname, '../chrome/extension/panel')],
12 | devtools: [customPath, path.join(__dirname, '../chrome/extension/devtools')],
13 | },
14 | output: {
15 | path: path.join(__dirname, '../build/js'),
16 | filename: '[name].bundle.js',
17 | chunkFilename: '[id].chunk.js'
18 | },
19 | postcss() {
20 | return postCSSConfig;
21 | },
22 | plugins: [
23 | new webpack.optimize.OccurenceOrderPlugin(),
24 | new webpack.IgnorePlugin(/[^/]+\/[\S]+.dev$/),
25 | new webpack.optimize.DedupePlugin(),
26 | new webpack.optimize.UglifyJsPlugin({
27 | comments: false,
28 | compressor: {
29 | warnings: false
30 | }
31 | }),
32 | new webpack.DefinePlugin({
33 | 'process.env': {
34 | NODE_ENV: JSON.stringify('production')
35 | }
36 | })
37 | ],
38 | resolve: {
39 | extensions: ['', '.js']
40 | },
41 | module: {
42 | loaders: [{
43 | test: /\.js$/,
44 | loader: 'babel',
45 | exclude: /node_modules/,
46 | query: {
47 | presets: ['react-optimize']
48 | }
49 | }, {
50 | test: /\.css$/,
51 | loaders: [
52 | 'style',
53 | 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
54 | 'postcss'
55 | ]
56 | }]
57 | }
58 | };
59 |
--------------------------------------------------------------------------------
/extension/app/reducers/graph.js:
--------------------------------------------------------------------------------
1 | import * as ActionTypes from '../constants/ActionTypes';
2 |
3 | const initialState = {
4 | fetching: false,
5 | fetchedSuccessfully: false,
6 | fetchedOnce: false,
7 | nodes: {},
8 | edges: [],
9 | checkedSelectorId: null,
10 | };
11 |
12 | const actionsMap = {
13 | [ActionTypes.GET_SELECTOR_GRAPH_FAILED](state) {
14 | return { ...state, fetching: false, fetchedSuccessfully: false };
15 | },
16 | [ActionTypes.GET_SELECTOR_GRAPH_SUCCESS](state, action) {
17 | const { nodes, edges } = action.payload.graph;
18 | const oldNodes = state.nodes;
19 | const mergedNodes = {};
20 | Object.keys(nodes).forEach((id) => {
21 | const node = { id, ...oldNodes[id], ...nodes[id] };
22 | if (node.isNamed === undefined) {
23 | node.isNamed = node.isRegistered;
24 | }
25 | mergedNodes[id] = node;
26 | });
27 |
28 | return {
29 | ...state,
30 | fetching: false,
31 | nodes: mergedNodes,
32 | edges,
33 | fetchedSuccessfully: true
34 | };
35 | },
36 | [ActionTypes.GET_SELECTOR_GRAPH](state) {
37 | return {
38 | ...state,
39 | fetchedOnce: true,
40 | fetching: true,
41 | };
42 | },
43 | [ActionTypes.UNCHECK_SELECTOR](state) {
44 | return { ...state, checkedSelectorId: null };
45 | },
46 | [ActionTypes.CHECK_SELECTOR_SUCCESS](state, action) {
47 | const { selector } = action.payload;
48 | const { nodes } = state;
49 | const { id } = selector;
50 | return {
51 | ...state,
52 | checkedSelectorId: id,
53 | nodes: {
54 | ...nodes,
55 | [id]: { ...nodes[id], ...selector }
56 | }
57 | };
58 | },
59 | [ActionTypes.CHECK_SELECTOR_FAILED](state, action) {
60 | // set it anyway
61 | return { ...state, checkedSelectorId: action.payload.selector.id };
62 | },
63 | };
64 |
65 | export default function graph(state = initialState, action) {
66 | const reduceFn = actionsMap[action.type];
67 | if (!reduceFn) return state;
68 | return reduceFn(state, action);
69 | }
70 |
--------------------------------------------------------------------------------
/extension/app/components/Dock.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 | import MdKeyboardArrowLeft from 'react-icons/lib/md/keyboard-arrow-left';
3 | import MdKeyboardArrowRight from 'react-icons/lib/md/keyboard-arrow-right';
4 | import Button from 'remotedev-app/lib/components/Button';
5 |
6 | const Subheader = ({ style, children, ...props }) => (
7 | {children}
8 | );
9 |
10 | const messageContainerStyle = {
11 | display: 'flex',
12 | justifyContent: 'space-between',
13 | alignItems: 'center',
14 | flexShrink: 0,
15 | };
16 |
17 | const Dock = ({ isOpen, toggleDock, message, children }) => {
18 | const dockStyle = {
19 | position: 'absolute',
20 | background: 'rgb(0, 43, 54)',
21 | top: 0,
22 | borderRight: '1px solid rgb(79, 90, 101)',
23 | borderTop: '1px solid rgb(79, 90, 101)',
24 | transform: `translateX(${isOpen ? 0 : '-100%'})`,
25 | left: 0,
26 | height: '100%',
27 | padding: '10px',
28 | minWidth: '220px',
29 | zIndex: 1,
30 | transition: 'transform 200ms ease-out',
31 | boxSizing: 'border-box',
32 | display: 'flex',
33 | flexDirection: 'column',
34 | };
35 | const showButtonStyle = {
36 | position: 'relative',
37 | right: 0,
38 | top: 0,
39 | transition: 'transform 200ms ease-out',
40 | transform: `translateX(${isOpen ? 0 : '100%'})`,
41 | };
42 | return (
43 |
44 |
45 | {message}
46 |
47 |
51 |
52 |
53 | {children}
54 |
61 |
67 |
70 |
74 |
75 | );
76 | }
77 |
78 | return (
79 |
86 | {element}
87 |
88 | );
89 | }
90 | }
91 |
--------------------------------------------------------------------------------
/extension/app/components/SelectorInspector.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 |
3 | import Search from './SelectorSearch';
4 |
5 | const hStyle = {
6 | overflow: 'hidden',
7 | textOverflow: 'ellipsis',
8 | margin: 0,
9 | marginRight: '10px',
10 | flexWrap: 'nowrap',
11 | whiteSpace: 'nowrap',
12 | };
13 |
14 | const containerStyle = {
15 | flexShrink: 0,
16 | overflowX: 'hidden',
17 | overflowY: 'auto',
18 | borderBottomWidth: '3px',
19 | borderBottomStyle: 'double',
20 | display: 'flex',
21 | flexDirection: 'row',
22 | alignItems: 'center',
23 | border: '1px solid rgb(79, 90, 101)',
24 | padding: '10px',
25 | };
26 |
27 | function SelectorInfo({ selector }) {
28 | const { recomputations, isNamed, name } = selector;
29 |
30 | const subheadStyle = { ...hStyle, color: 'rgb(111, 179, 210)' };
31 | let message = `(${recomputations} recomputations)`;
32 | if (recomputations === null) {
33 | message = '(not memoized)';
34 | }
35 |
36 | return (
37 |
38 |
{name}
39 |
40 |
{message}
41 | { !isNamed && (unregistered)
}
42 |
43 |
72 | { selector ?
73 | :
Choose a selector
74 | }
75 |
81 |
82 | );
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/extension/app/components/TodoItem.css:
--------------------------------------------------------------------------------
1 | .normal .toggle {
2 | text-align: center;
3 | width: 40px;
4 | /* auto, since non-WebKit browsers doesn't support input styling */
5 | height: auto;
6 | position: absolute;
7 | top: 0;
8 | bottom: 0;
9 | margin: auto 0;
10 | border: none; /* Mobile Safari */
11 | -webkit-appearance: none;
12 | -moz-appearance: none;
13 | }
14 |
15 | .normal .toggle:after {
16 | content: url('data:image/svg+xml;utf8,');
17 | }
18 |
19 | .normal .toggle:checked:after {
20 | content: url('data:image/svg+xml;utf8,');
21 | }
22 |
23 | .normal label {
24 | white-space: pre-line;
25 | word-break: break-all;
26 | padding: 15px 60px 15px 15px;
27 | margin-left: 45px;
28 | display: block;
29 | line-height: 1.2;
30 | transition: color 0.4s;
31 | }
32 |
33 | .normal .destroy {
34 | display: none;
35 | position: absolute;
36 | top: 0;
37 | right: 10px;
38 | bottom: 0;
39 | width: 40px;
40 | height: 40px;
41 | margin: auto 0;
42 | font-size: 30px;
43 | color: #cc9a9a;
44 | margin-bottom: 11px;
45 | transition: color 0.2s ease-out;
46 | }
47 |
48 | .normal .destroy:hover {
49 | color: #af5b5e;
50 | }
51 |
52 | .normal .destroy:after {
53 | content: '×';
54 | }
55 |
56 | .normal:hover .destroy {
57 | display: block;
58 | }
59 |
60 | .normal .edit {
61 | display: none;
62 | }
63 |
64 | .editing {
65 | border-bottom: none;
66 | padding: 0;
67 | composes: normal;
68 | }
69 |
70 | .editing:last-child {
71 | margin-bottom: -1px;
72 | }
73 |
74 | .editing .edit {
75 | display: block;
76 | width: 506px;
77 | padding: 13px 17px 12px 17px;
78 | margin: 0 0 0 43px;
79 | }
80 |
81 | .editing .view {
82 | display: none;
83 | }
84 |
85 | .completed label {
86 | color: #d9d9d9;
87 | text-decoration: line-through;
88 | }
89 |
90 | /*
91 | Hack to remove background from Mobile Safari.
92 | Can't use it globally since it destroys checkboxes in Firefox
93 | */
94 | @media screen and (-webkit-min-device-pixel-ratio:0) {
95 | .normal .toggle {
96 | background: none;
97 | }
98 |
99 | .normal .toggle {
100 | height: 40px;
101 | }
102 | }
103 |
--------------------------------------------------------------------------------
/extension/app/components/MainSection.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import TodoItem from './TodoItem';
3 | import Footer from './Footer';
4 | import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../constants/TodoFilters';
5 | import style from './MainSection.css';
6 |
7 | const TODO_FILTERS = {
8 | [SHOW_ALL]: () => true,
9 | [SHOW_ACTIVE]: todo => !todo.completed,
10 | [SHOW_COMPLETED]: todo => todo.completed
11 | };
12 |
13 | export default class MainSection extends Component {
14 |
15 | static propTypes = {
16 | todos: PropTypes.array.isRequired,
17 | actions: PropTypes.object.isRequired
18 | };
19 |
20 | constructor(props, context) {
21 | super(props, context);
22 | this.state = { filter: SHOW_ALL };
23 | }
24 |
25 | handleClearCompleted = () => {
26 | const atLeastOneCompleted = this.props.todos.some(todo => todo.completed);
27 | if (atLeastOneCompleted) {
28 | this.props.actions.clearCompleted();
29 | }
30 | };
31 |
32 | handleShow = (filter) => {
33 | this.setState({ filter });
34 | };
35 |
36 | renderToggleAll(completedCount) {
37 | const { todos, actions } = this.props;
38 | if (todos.length > 0) {
39 | return (
40 |
46 | );
47 | }
48 | }
49 |
50 | renderFooter(completedCount) {
51 | const { todos } = this.props;
52 | const { filter } = this.state;
53 | const activeCount = todos.length - completedCount;
54 |
55 | if (todos.length) {
56 | return (
57 |
64 | );
65 | }
66 | }
67 |
68 | render() {
69 | const { todos, actions } = this.props;
70 | const { filter } = this.state;
71 |
72 | const filteredTodos = todos.filter(TODO_FILTERS[filter]);
73 | const completedCount = todos.reduce(
74 | (count, todo) => (todo.completed ? count + 1 : count),
75 | 0
76 | );
77 |
78 | return (
79 |
80 | {this.renderToggleAll(completedCount)}
81 |
82 | {filteredTodos.map(todo =>
83 |
84 | )}
85 |
86 | {this.renderFooter(completedCount)}
87 |
88 | );
89 | }
90 | }
91 |
--------------------------------------------------------------------------------
/extension/app/components/Footer.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes, Component } from 'react';
2 | import classnames from 'classnames';
3 | import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../constants/TodoFilters';
4 | import style from './Footer.css';
5 |
6 | const FILTERS = [SHOW_ALL, SHOW_ACTIVE, SHOW_COMPLETED];
7 | const FILTER_TITLES = {
8 | [SHOW_ALL]: 'All',
9 | [SHOW_ACTIVE]: 'Active',
10 | [SHOW_COMPLETED]: 'Completed'
11 | };
12 |
13 | export default class Footer extends Component {
14 |
15 | static propTypes = {
16 | completedCount: PropTypes.number.isRequired,
17 | activeCount: PropTypes.number.isRequired,
18 | filter: PropTypes.string.isRequired,
19 | onClearCompleted: PropTypes.func.isRequired,
20 | onShow: PropTypes.func.isRequired
21 | };
22 |
23 | constructor(props, context) {
24 | super(props, context);
25 | if (props.onShow) {
26 | this.filterHandlers = FILTERS.map(filter => () => props.onShow(filter));
27 | }
28 | }
29 |
30 | componentWillReceiveProps(nextProps) {
31 | if (nextProps.onShow) {
32 | this.filterHandlers = FILTERS.map(filter => () => nextProps.onShow(filter));
33 | }
34 | }
35 |
36 | renderTodoCount() {
37 | const { activeCount } = this.props;
38 | const itemWord = activeCount === 1 ? 'item' : 'items';
39 |
40 | return (
41 |
42 | {activeCount || 'No'} {itemWord} left
43 |
44 | );
45 | }
46 |
47 | renderFilterLink(filter, handler) {
48 | const title = FILTER_TITLES[filter];
49 | const { filter: selectedFilter } = this.props;
50 |
51 | return (
52 |
57 | {title}
58 |
59 | );
60 | }
61 |
62 | renderClearButton() {
63 | const { completedCount, onClearCompleted } = this.props;
64 | if (completedCount > 0) {
65 | return (
66 |
72 | );
73 | }
74 | }
75 |
76 | render() {
77 | return (
78 |
89 | );
90 | }
91 | }
92 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "reselect-tools",
3 | "version": "0.0.7",
4 | "description": "Selector Debugging Tools for Reselect.",
5 | "main": "lib/index.js",
6 | "jsnext:main": "es/index.js",
7 | "files": [
8 | "lib",
9 | "src",
10 | "dist",
11 | "es"
12 | ],
13 | "bugs": {
14 | "url": "https://github.com/skortchmark9/reselect-tools"
15 | },
16 | "scripts": {
17 | "compile:commonjs": "better-npm-run compile:commonjs",
18 | "compile:umdmin": "uglifyjs dist/reselect-tools.js -mt -o dist/reselect-tools.min.js",
19 | "compile:umd": "better-npm-run compile:umd",
20 | "compile:es": "babel -d es/ src/",
21 | "compile": "npm run compile:commonjs && npm run compile:umd && npm run compile:umdmin && npm run compile:es",
22 | "lint": "eslint src test",
23 | "lint-fix": "eslint --fix src test",
24 | "prepublish": "npm run compile",
25 | "test": "better-npm-run test",
26 | "test:cov": "better-npm-run test:cov",
27 | "example": "opn http://localhost:9080/examples/demo.html && static-server"
28 | },
29 | "betterScripts": {
30 | "test": {
31 | "command": "mocha --compilers js:babel-register --ui tdd --recursive",
32 | "env": {
33 | "NODE_ENV": "test"
34 | }
35 | },
36 | "test:cov": {
37 | "command": "nyc --reporter=lcov --reporter=text mocha --compilers js:babel-register --ui tdd",
38 | "env": {
39 | "NODE_ENV": "test",
40 | "COVERAGE": "true"
41 | }
42 | },
43 | "compile:commonjs": {
44 | "command": "babel -d lib/ src/",
45 | "env": {
46 | "NODE_ENV": "commonjs"
47 | }
48 | },
49 | "compile:umd": {
50 | "command": "mkdirp dist/ && babel -o dist/reselect-tools.js src/",
51 | "env": {
52 | "NODE_ENV": "umd"
53 | }
54 | }
55 | },
56 | "keywords": [
57 | "redux",
58 | "reselect"
59 | ],
60 | "authors": [
61 | "Sam Kortchmar"
62 | ],
63 | "repository": {
64 | "type": "git",
65 | "url": "https://github.com/skortchmark9/reselect-tools"
66 | },
67 | "license": "MIT",
68 | "devDependencies": {
69 | "babel-cli": "^6.7.5",
70 | "babel-plugin-transform-es2015-modules-commonjs": "^6.7.4",
71 | "babel-plugin-transform-es2015-modules-umd": "^6.6.5",
72 | "babel-preset-env": "^1.6.1",
73 | "babel-register": "^6.7.2",
74 | "better-npm-run": "0.0.8",
75 | "chai": "^3.0.0",
76 | "codecov.io": "^0.1.6",
77 | "coveralls": "^2.11.4",
78 | "eslint": "^2.11",
79 | "mkdirp": "^0.5.1",
80 | "mocha": "^2.2.5",
81 | "ncp": "^2.0.0",
82 | "nyc": "^6.4.0",
83 | "opn-cli": "^3.1.0",
84 | "uglify-js": "^3.0.20"
85 | },
86 | "dependencies": {
87 | "reselect": "4.0.0"
88 | }
89 | }
90 |
--------------------------------------------------------------------------------
/extension/app/components/SelectorSearch.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import Autocomplete from 'react-autocomplete';
3 | import Button from 'remotedev-app/lib/components/Button';
4 | import MdSearch from 'react-icons/lib/md/search';
5 |
6 | import style from './SelectorSearch.css';
7 |
8 | const itemStyle = isHighlighted => ({
9 | padding: '1em',
10 | background: isHighlighted ? 'rgb(79, 90, 101)' : 'rgb(0, 43, 55)',
11 | borderBottom: '1px solid rgb(79, 90, 101)'
12 | });
13 |
14 | const renderItem = (item, isHighlighted) => (
15 |
16 | {item.id}
17 |
18 | );
19 |
20 | const getItemValue = item => item.id;
21 |
22 | export default class Search extends Component {
23 | static propTypes = {
24 | searching: PropTypes.bool,
25 | onToggleSearch: PropTypes.func.isRequired,
26 | selectors: PropTypes.object.isRequired,
27 | onSelectorChosen: PropTypes.func.isRequired,
28 | }
29 | constructor(props) {
30 | super(props);
31 | this.state = { value: '' };
32 | this.onInput = this.onInput.bind(this);
33 | this.onSelect = this.onSelect.bind(this);
34 | }
35 | componentWillReceiveProps(nextProps) {
36 | if (this.props.searching && !nextProps.searching) {
37 | this.setState({ value: '' });
38 | }
39 | }
40 | onInput(e) {
41 | this.setState({ value: e.target.value });
42 | }
43 | onSelect(id) {
44 | this.setState({ value: id });
45 | const { selectors, onSelectorChosen } = this.props;
46 | onSelectorChosen(selectors[id]);
47 | }
48 | render() {
49 | const { searching, onToggleSearch, selectors } = this.props;
50 | const { value } = this.state;
51 | const items = Object.keys(selectors).map(key => selectors[key]);
52 | const autocompleteProps = {
53 | className: style.autocomplete,
54 | style: {} // disable default inline styles
55 | };
56 |
57 | const suggestionContainerStyles = {
58 | boxShadow: '0 2px 12px rgba(0, 0, 0, 0.1)',
59 | fontSize: '90%',
60 | position: 'fixed',
61 | overflow: 'auto',
62 | maxHeight: '50%',
63 | };
64 |
65 | return (
66 |
67 | {searching &&
item.id.toLowerCase().indexOf(val.toLowerCase()) > -1}
74 | getItemValue={getItemValue}
75 | renderItem={renderItem}
76 | onChange={this.onInput}
77 | onSelect={this.onSelect}
78 | value={value}
79 | />
80 | }
81 |
84 |
44 |
{message}
45 |
46 | );
47 | }
48 |
49 |
50 | function openGitRepo() {
51 | const url = 'https://github.com/skortchmark9/reselect-devtools-extension';
52 | window.open(url, '_blank');
53 | }
54 |
55 | const checkedSelector$ = (state) => {
56 | const { checkedSelectorId, nodes, edges } = state.graph;
57 | const selector = nodes[checkedSelectorId];
58 | if (!selector) return;
59 |
60 | // this is a bit ugly because it relies on edges being in order.
61 | const dependencies = edges.filter(edge => edge.from === checkedSelectorId);
62 | const dependencyIds = dependencies.map(edge => edge.to);
63 |
64 | if (!selector.inputs) {
65 | return selector;
66 | }
67 |
68 | const { inputs } = selector;
69 | if (dependencyIds.length !== inputs.length) {
70 | console.error(`Uh oh, inputs and edges out of sync on ${checkedSelectorId}`);
71 | }
72 |
73 | const zipped = [];
74 | for (let i = 0; i < dependencyIds.length; i++) {
75 | zipped.push([dependencyIds[i], inputs[i]]);
76 | }
77 | return { ...selector, zipped };
78 | };
79 |
80 |
81 | const RecomputationsTotal = ({ nodes }) => {
82 | const nodeArr = Object.keys(nodes).map(k => nodes[k]);
83 | const total = nodeArr.reduce((acc, node) => acc + node.recomputations, 0);
84 | return {total} Recomputations
;
85 | };
86 |
87 | @connect(
88 | state => ({
89 | graph: state.graph,
90 | checkedSelector: checkedSelector$(state),
91 | }),
92 | dispatch => ({
93 | actions: bindActionCreators(SelectorActions, dispatch)
94 | })
95 | )
96 | @enhance
97 | export default class App extends Component {
98 | static propTypes = {
99 | actions: PropTypes.object.isRequired,
100 | graph: PropTypes.object,
101 | checkedSelector: PropTypes.object,
102 | };
103 |
104 | constructor(props) {
105 | super(props);
106 | this.state = {
107 | dockIsOpen: true,
108 | };
109 | this.handleCheckSelector = this.handleCheckSelector.bind(this);
110 | this.refreshGraph = this.refreshGraph.bind(this);
111 | this.toggleDock = this.toggleDock.bind(this);
112 | this.paintNWorst = this.paintNWorst.bind(this);
113 | }
114 |
115 | componentDidMount() {
116 | this.refreshGraph();
117 | }
118 |
119 | refreshGraph() {
120 | this.sg && this.sg.reset();
121 | this.resetSelectorData();
122 | this.props.actions.getSelectorGraph();
123 | }
124 |
125 | paintNWorst(n) {
126 | this.resetSelectorData();
127 | this.sg.highlightNMostRecomputed(n);
128 | }
129 |
130 | resetSelectorData() {
131 | this.props.actions.uncheckSelector();
132 | }
133 |
134 | toggleDock() {
135 | this.setState({
136 | dockIsOpen: !this.state.dockIsOpen,
137 | });
138 | }
139 |
140 | handleCheckSelector(selectorToCheck) {
141 | this.props.actions.checkSelector(selectorToCheck);
142 | }
143 |
144 | renderGraph(graph) {
145 | const { checkedSelector } = this.props;
146 | const { dockIsOpen } = this.state;
147 |
148 | const dockMessage = (!checkedSelector || checkedSelector.isNamed) ?
149 | 'checkSelector output' : 'name selector to get data';
150 |
151 | return (
152 |
153 |
158 |
159 |
164 | { checkedSelector ?
165 | :
168 | No Data
169 | }
170 |
171 |
172 | this.sg = sg}
176 | {...graph}
177 | />
178 |
179 |
193 |
198 | { this.renderContent() }
199 |
200 | );
201 | }
202 | }
203 |
204 |
--------------------------------------------------------------------------------
/extension/test/e2e/todoapp.js:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 | import webdriver from 'selenium-webdriver';
3 | import { expect } from 'chai';
4 | import { delay, startChromeDriver, buildWebDriver } from '../func';
5 | import footerStyle from '../../app/components/Footer.css';
6 | import mainSectionStyle from '../../app/components/MainSection.css';
7 | import todoItemStyle from '../../app/components/TodoItem.css';
8 | import todoTextInputStyle from '../../app/components/TodoTextInput.css';
9 | import manifest from '../../chrome/manifest.prod.json';
10 |
11 | const extensionName = manifest.name;
12 |
13 | const findList = driver =>
14 | driver.findElements(webdriver.By.css(`.${mainSectionStyle.todoList} > li`));
15 |
16 | const addTodo = async (driver, key) => {
17 | // add todo
18 | driver.findElement(webdriver.By.className(todoTextInputStyle.new))
19 | .sendKeys(key + webdriver.Key.RETURN);
20 | await delay(1000);
21 | const todos = await findList(driver);
22 | return { todo: todos[0], count: todos.length };
23 | };
24 |
25 | const editTodo = async (driver, index, key) => {
26 | let todos = await findList(driver);
27 | const label = todos[index].findElement(webdriver.By.tagName('label'));
28 | // dbl click to enable textarea
29 | await driver.actions().doubleClick(label).perform();
30 | await delay(500);
31 | // typing & enter
32 | driver.actions().sendKeys(key + webdriver.Key.RETURN).perform();
33 | await delay(1000);
34 |
35 | todos = await findList(driver);
36 | return { todo: todos[index], count: todos.length };
37 | };
38 |
39 | const completeTodo = async (driver, index) => {
40 | let todos = await findList(driver);
41 | todos[index].findElement(webdriver.By.className(todoItemStyle.toggle)).click();
42 | await delay(1000);
43 | todos = await findList(driver);
44 | return { todo: todos[index], count: todos.length };
45 | };
46 |
47 | const deleteTodo = async (driver, index) => {
48 | let todos = await findList(driver);
49 | driver.executeScript(
50 | `document.querySelectorAll('.${mainSectionStyle.todoList} > li')[${index}]
51 | .getElementsByClassName('${todoItemStyle.destroy}')[0].style.display = 'block'`
52 | );
53 | todos[index].findElement(webdriver.By.className(todoItemStyle.destroy)).click();
54 | await delay(1000);
55 | todos = await findList(driver);
56 | return { count: todos.length };
57 | };
58 |
59 | describe('window (popup) page', function test() {
60 | let driver;
61 | this.timeout(15000);
62 |
63 | before(async () => {
64 | await startChromeDriver();
65 | const extPath = path.resolve('build');
66 | driver = buildWebDriver(extPath);
67 | await driver.get('chrome://extensions-frame');
68 | const elems = await driver.findElements(webdriver.By.xpath(
69 | '//div[contains(@class, "extension-list-item-wrapper") and ' +
70 | `.//h2[contains(text(), "${extensionName}")]]`
71 | ));
72 | const extensionId = await elems[0].getAttribute('id');
73 | await driver.get(`chrome-extension://${extensionId}/window.html`);
74 | });
75 |
76 | after(async () => driver.quit());
77 |
78 | it('should open Redux TodoMVC Example', async () => {
79 | const title = await driver.getTitle();
80 | expect(title).to.equal('Redux TodoMVC Example (Window)');
81 | });
82 |
83 | it('should can add todo', async () => {
84 | const { todo, count } = await addTodo(driver, 'Add tests');
85 | expect(count).to.equal(2);
86 | const text = await todo.findElement(webdriver.By.tagName('label')).getText();
87 | expect(text).to.equal('Add tests');
88 | });
89 |
90 | it('should can edit todo', async () => {
91 | const { todo, count } = await editTodo(driver, 0, 'Ya ');
92 | expect(count).to.equal(2);
93 | const text = await todo.findElement(webdriver.By.tagName('label')).getText();
94 | expect(text).to.equal('Add testsYa');
95 | });
96 |
97 | it('should can complete todo', async () => {
98 | const { todo, count } = await completeTodo(driver, 0);
99 | expect(count).to.equal(2);
100 | const className = await todo.getAttribute('class');
101 | const { completed, normal } = todoItemStyle;
102 | expect(className).to.equal(`${completed} ${normal}`);
103 | });
104 |
105 | it('should can complete all todos', async () => {
106 | driver.findElement(webdriver.By.className(mainSectionStyle.toggleAll)).click();
107 | const todos = await findList(driver);
108 | const classNames = await Promise.all(todos.map(todo => todo.getAttribute('class')));
109 | const { completed, normal } = todoItemStyle;
110 | expect(classNames.every(name => name === `${completed} ${normal}`)).to.equal(true);
111 | });
112 |
113 | it('should can delete todo', async () => {
114 | const { count } = await deleteTodo(driver, 0);
115 | expect(count).to.equal(1);
116 | });
117 |
118 | it('should can clear completed todos if completed todos count > 0', async () => {
119 | // current todo count: 1
120 | await addTodo(driver, 'Add 1');
121 | const { count } = await addTodo(driver, 'Add 2');
122 | expect(count).to.equal(3);
123 |
124 | await completeTodo(driver, 0);
125 | driver.findElement(webdriver.By.className(footerStyle.clearCompleted)).click();
126 |
127 | const todos = await findList(driver);
128 | const classNames = await Promise.all(todos.map(todo => todo.getAttribute('class')));
129 | expect(classNames.every(name => name !== 'completed')).to.equal(true);
130 | });
131 |
132 | it('should cannot clear completed todos if completed todos count = 0', async () => {
133 | const todos = await driver.findElements(webdriver.By.className(footerStyle.clearCompleted));
134 | expect(todos.length).to.equal(0);
135 | });
136 |
137 | it('should can filter active todos', async () => {
138 | // current todo count: 2
139 | await addTodo(driver, 'Add 1');
140 | const { count } = await addTodo(driver, 'Add 2');
141 | expect(count).to.equal(3);
142 |
143 | await completeTodo(driver, 0);
144 | let todos = await driver.findElements(webdriver.By.css(`.${footerStyle.filters} > li`));
145 | todos[1].click();
146 | await delay(1000);
147 | todos = await findList(driver);
148 | expect(todos.length).to.equal(2);
149 | });
150 |
151 | it('should can filter completed todos', async () => {
152 | // current todo count: 2
153 | let todos = await driver.findElements(webdriver.By.css(`.${footerStyle.filters} > li`));
154 | todos[2].click();
155 | await delay(1000);
156 | todos = await findList(driver);
157 | expect(todos.length).to.equal(1);
158 | });
159 | });
160 |
--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | exports.__esModule = true;
4 | exports.createSelectorWithDependencies = createSelectorWithDependencies;
5 | exports.registerSelectors = registerSelectors;
6 | exports.reset = reset;
7 | exports.checkSelector = checkSelector;
8 | exports.getStateWith = getStateWith;
9 | exports.selectorGraph = selectorGraph;
10 |
11 | var _reselect = require('reselect');
12 |
13 | var _getState = null;
14 | var _allSelectors = new Set();
15 |
16 | var _isFunction = function _isFunction(func) {
17 | return typeof func === 'function';
18 | };
19 |
20 | /*
21 | * This function is only exported for legacy purposes.
22 | * It will be removed in future versions.
23 | *
24 | */
25 | function createSelectorWithDependencies() {
26 | return _reselect.createSelector.apply(undefined, arguments);
27 | }
28 |
29 | var _isSelector = function _isSelector(selector) {
30 | return selector && selector.resultFunc || _isFunction(selector);
31 | };
32 |
33 | var _addSelector = function _addSelector(selector) {
34 | _allSelectors.add(selector);
35 |
36 | var dependencies = selector.dependencies || [];
37 | dependencies.forEach(_addSelector);
38 | };
39 |
40 | function registerSelectors(selectors) {
41 | Object.keys(selectors).forEach(function (name) {
42 | var selector = selectors[name];
43 | if (_isSelector(selector)) {
44 | selector.selectorName = name;
45 | _addSelector(selector);
46 | }
47 | });
48 | }
49 |
50 | function reset() {
51 | _getState = null;
52 | _allSelectors = new Set();
53 | }
54 |
55 | function checkSelector(selector) {
56 | if (typeof selector === 'string') {
57 | var _iteratorNormalCompletion = true;
58 | var _didIteratorError = false;
59 | var _iteratorError = undefined;
60 |
61 | try {
62 | for (var _iterator = _allSelectors[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
63 | var possibleSelector = _step.value;
64 |
65 | if (possibleSelector.selectorName === selector) {
66 | selector = possibleSelector;
67 | break;
68 | }
69 | }
70 | } catch (err) {
71 | _didIteratorError = true;
72 | _iteratorError = err;
73 | } finally {
74 | try {
75 | if (!_iteratorNormalCompletion && _iterator.return) {
76 | _iterator.return();
77 | }
78 | } finally {
79 | if (_didIteratorError) {
80 | throw _iteratorError;
81 | }
82 | }
83 | }
84 | }
85 |
86 | if (!_isFunction(selector)) {
87 | throw new Error('Selector ' + selector + ' is not a function...has it been registered?');
88 | }
89 |
90 | var _selector = selector,
91 | _selector$dependencie = _selector.dependencies,
92 | dependencies = _selector$dependencie === undefined ? [] : _selector$dependencie,
93 | _selector$selectorNam = _selector.selectorName,
94 | selectorName = _selector$selectorNam === undefined ? null : _selector$selectorNam;
95 |
96 | var isNamed = typeof selectorName === 'string';
97 | var recomputations = selector.recomputations ? selector.recomputations() : null;
98 |
99 | var ret = { dependencies: dependencies, recomputations: recomputations, isNamed: isNamed, selectorName: selectorName };
100 | if (_getState) {
101 | var extra = {};
102 | var state = _getState();
103 |
104 | try {
105 | extra.inputs = dependencies.map(function (parentSelector) {
106 | return parentSelector(state);
107 | });
108 | } catch (e) {
109 | extra.error = 'checkSelector: error getting inputs of selector ' + selectorName + '. The error was:\n' + e;
110 | }
111 |
112 | try {
113 | extra.output = selector(state);
114 | } catch (e) {
115 | extra.error = 'checkSelector: error getting output of selector ' + selectorName + '. The error was:\n' + e;
116 | }
117 |
118 | Object.assign(ret, extra);
119 | }
120 |
121 | return ret;
122 | }
123 |
124 | function getStateWith(stateGetter) {
125 | _getState = stateGetter;
126 | }
127 |
128 | function _sumString(str) {
129 | return Array.from(str.toString()).reduce(function (sum, char) {
130 | return char.charCodeAt(0) + sum;
131 | }, 0);
132 | }
133 |
134 | var defaultSelectorKey = function defaultSelectorKey(selector) {
135 | if (selector.selectorName) {
136 | return selector.selectorName;
137 | }
138 |
139 | if (selector.name) {
140 | // if it's a vanilla function, it will have a name.
141 | return selector.name;
142 | }
143 |
144 | return (selector.dependencies || []).reduce(function (base, dep) {
145 | return base + _sumString(dep);
146 | }, (selector.resultFunc ? selector.resultFunc : selector).toString());
147 | };
148 |
149 | function selectorGraph() {
150 | var selectorKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultSelectorKey;
151 |
152 | var graph = { nodes: {}, edges: [] };
153 | var addToGraph = function addToGraph(selector) {
154 | var name = selectorKey(selector);
155 | if (graph.nodes[name]) return;
156 |
157 | var _checkSelector = checkSelector(selector),
158 | recomputations = _checkSelector.recomputations,
159 | isNamed = _checkSelector.isNamed;
160 |
161 | graph.nodes[name] = {
162 | recomputations: recomputations,
163 | isNamed: isNamed,
164 | name: name
165 | };
166 |
167 | var dependencies = selector.dependencies || [];
168 | dependencies.forEach(function (dependency) {
169 | addToGraph(dependency);
170 | graph.edges.push({ from: name, to: selectorKey(dependency) });
171 | });
172 | };
173 |
174 | var _iteratorNormalCompletion2 = true;
175 | var _didIteratorError2 = false;
176 | var _iteratorError2 = undefined;
177 |
178 | try {
179 | for (var _iterator2 = _allSelectors[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
180 | var selector = _step2.value;
181 |
182 | addToGraph(selector);
183 | }
184 | } catch (err) {
185 | _didIteratorError2 = true;
186 | _iteratorError2 = err;
187 | } finally {
188 | try {
189 | if (!_iteratorNormalCompletion2 && _iterator2.return) {
190 | _iterator2.return();
191 | }
192 | } finally {
193 | if (_didIteratorError2) {
194 | throw _iteratorError2;
195 | }
196 | }
197 | }
198 |
199 | return graph;
200 | }
201 |
202 | // hack for devtools
203 | /* istanbul ignore if */
204 | if (typeof window !== 'undefined') {
205 | window.__RESELECT_TOOLS__ = {
206 | selectorGraph: selectorGraph,
207 | checkSelector: checkSelector
208 | };
209 | }
--------------------------------------------------------------------------------
/extension/app/components/SelectorGraph.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import cytoscape from 'cytoscape';
3 | import dagre from 'cytoscape-dagre';
4 |
5 | cytoscape.use(dagre);
6 |
7 | const truncateText = (str, maxChars = 20) => (str.length > maxChars ? str.slice(0, maxChars) : str);
8 | const labelText = (id, recomputations) => truncateText(id) + (recomputations === null ? '' : ` (${recomputations})`);
9 |
10 |
11 | const colors = {
12 | defaultEdge: 'rgb(79, 90, 101)',
13 | defaultNodeLabel: 'rgb(111, 179, 210)',
14 | defaultNode: 'rgb(232, 234, 246)',
15 | selectedNode: 'orange',
16 | dependency: '#ffeb3b',
17 | dependent: '#f868d0',
18 | recomputed: 'red',
19 | };
20 |
21 | const defaultEdgeStyle = {
22 | 'curve-style': 'bezier',
23 | width: 4,
24 | 'target-arrow-shape': 'triangle',
25 | 'line-color': colors.defaultEdge,
26 | 'target-arrow-color': colors.defaultEdge,
27 | 'z-index': 1,
28 | };
29 |
30 | const selectedNodeStyle = {
31 | 'background-color': colors.selectedNode
32 | };
33 |
34 | const defaultNodeStyle = {
35 | label: 'data(label)',
36 | color: colors.defaultNodeLabel,
37 | 'background-color': colors.defaultNode,
38 | };
39 |
40 | const Y_SPACING = 0.1;
41 |
42 | const cytoDefaults = {
43 | style: [
44 | {
45 | selector: 'edge',
46 | style: defaultEdgeStyle
47 | },
48 | {
49 | selector: 'node',
50 | style: defaultNodeStyle
51 | }
52 | ],
53 | layout: {
54 | name: 'dagre',
55 | rankDir: 'BT',
56 | // fit: false,
57 | ranker: 'longest-path',
58 | // padding: 0,
59 | nodeDimensionsIncludeLabels: false, // this doesn't really work alas
60 | transform: (node, { x, y }) => {
61 | // increase distance between y ranks, and offset some nodes
62 | // a bit up and down so labels don't collide.
63 | const offsetDirection = Math.random() > 0.5 ? 1 : -1;
64 | const offset = y * Y_SPACING;
65 | return { x, y: y + offset + (offset * offsetDirection) };
66 | }
67 | }
68 | };
69 |
70 | function createCytoElements(nodes, edges) {
71 | const cytoNodes = Object.keys(nodes).map(name => ({
72 | data: Object.assign({}, nodes[name], {
73 | id: name,
74 | label: labelText(name, nodes[name].recomputations)
75 | }),
76 | }));
77 |
78 |
79 | const cytoEdges = edges.map((edge, i) => ({ data: {
80 | source: edge.from,
81 | target: edge.to,
82 | id: i,
83 | } }));
84 |
85 | return cytoNodes.concat(cytoEdges);
86 | }
87 |
88 |
89 | export function drawCytoscapeGraph(container, nodes, edges) {
90 | const elements = createCytoElements(nodes, edges);
91 | return cytoscape({ ...cytoDefaults, container, elements });
92 | }
93 |
94 | function paintDependencies(elts) {
95 | elts.forEach((elt) => {
96 | if (elt.isNode()) {
97 | elt.style({
98 | 'background-color': colors.dependency,
99 | });
100 | } else if (elt.isEdge()) {
101 | elt.style({
102 | 'line-color': colors.dependency,
103 | 'z-index': 99,
104 | 'target-arrow-color': colors.dependency,
105 | });
106 | }
107 | });
108 | }
109 |
110 | function paintDependents(elts) {
111 | elts.forEach((elt) => {
112 | if (elt.isNode()) {
113 | elt.style({
114 | 'background-color': colors.dependent,
115 | });
116 | } else if (elt.isEdge()) {
117 | elt.style({
118 | 'line-color': colors.dependent,
119 | 'z-index': 99,
120 | 'target-arrow-color': colors.dependent,
121 | });
122 | }
123 | });
124 | }
125 |
126 |
127 | const circleStyle = {
128 | borderRadius: '50%',
129 | width: '1em',
130 | height: '1em',
131 | display: 'inline-block',
132 | margin: '0 0.5em',
133 | marginTop: '0.2em'
134 | };
135 | const Circle = ({ color }) => ;
136 | const LegendItem = ({ name, color }) => (
137 |
138 | {name}
139 |
140 | );
141 |
142 |
143 | export default class SelectorGraph extends Component {
144 | static propTypes = {
145 | nodes: PropTypes.object.isRequired,
146 | edges: PropTypes.array.isRequired,
147 | checkSelector: PropTypes.func,
148 | selector: PropTypes.object,
149 | };
150 |
151 | componentDidMount() {
152 | this.cy = drawCytoscapeGraph(this.cyElement, this.props.nodes, this.props.edges);
153 | const pan = this.cy.pan();
154 | const height = this.cy.height();
155 | this.cy.pan({ ...pan, y: height / 3 });
156 | this.bindEvents();
157 | }
158 |
159 | componentWillReceiveProps(nextProps) {
160 | if (nextProps.nodes !== this.props.nodes || nextProps.edges !== this.props.edges) {
161 | const { nodes, edges } = nextProps;
162 | const elements = createCytoElements(nodes, edges);
163 | this.cy.json({ elements });
164 | }
165 |
166 | if (nextProps.selector && nextProps.selector !== this.props.selector) {
167 | this.paintNodeSelection(nextProps.selector);
168 | }
169 | }
170 |
171 | shouldComponentUpdate() {
172 | return false;
173 | }
174 |
175 | componentWillUnmount() {
176 | if (this.cy) this.cy.destroy();
177 | }
178 |
179 | reset() {
180 | const { label, ...nodeStyle } = defaultNodeStyle; // eslint-disable-line no-unused-vars
181 | this.cy.nodes().style(nodeStyle);
182 | this.cy.edges().style(defaultEdgeStyle);
183 | }
184 |
185 | paintNodeSelection(selector) {
186 | this.reset();
187 | if (!selector || !selector.id) return;
188 |
189 | // can't search with selectors because special chars, i.e. $ interfere
190 | const selectedNode = this.cy.nodes(node => node.data().id === selector.id);
191 | selectedNode.style(selectedNodeStyle);
192 | paintDependencies(selectedNode.successors());
193 | paintDependents(selectedNode.predecessors());
194 | }
195 |
196 | highlightNMostRecomputed(n = 1) {
197 | this.reset();
198 | const nodes = this.cy.nodes();
199 | const recomputationBuckets = new Map(); // bucketzzz
200 | nodes.forEach((node) => {
201 | const recomputations = node.data().recomputations;
202 | if (!recomputationBuckets.get(recomputations)) {
203 | recomputationBuckets.set(recomputations, []);
204 | }
205 | recomputationBuckets.get(recomputations).push(node);
206 | });
207 | const mostRecomputed = [...recomputationBuckets.keys()].sort((x, y) => x - y);
208 | const nMost = mostRecomputed.slice(-n);
209 | const highlighted = nMost.reduce((acc, key) => acc.concat(recomputationBuckets.get(key)), []);
210 | highlighted.forEach(node => node.style({
211 | 'background-color': colors.recomputed,
212 | }));
213 | }
214 |
215 | bindEvents() {
216 | const { checkSelector } = this.props;
217 | function clickHandler() {
218 | const data = this.data();
219 | checkSelector(data);
220 | }
221 | if (checkSelector) {
222 | this.cy.on('tap', 'node', clickHandler);
223 | }
224 | }
225 |
226 | render() {
227 | const legendStyle = {
228 | position: 'absolute',
229 | top: 0,
230 | right: 0,
231 | zIndex: 100,
232 | };
233 | return (
234 | { this.cyElement = e; }}>
235 |
236 |
237 |
238 |
239 |
240 |
241 |