├── .gitignore ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── demo.png ├── keymaps └── devtools.cson ├── lib ├── htmlTab.js ├── htmlTabView.js └── index.js ├── menus └── devtools.cson ├── package.json └── spec └── devtools-spec.coffee /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | npm-debug.log 3 | node_modules 4 | .idea 5 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change log 2 | 3 | This project adheres to [Semantic Versioning](http://semver.org/). 4 | See all notable changes on [Releases](https://github.com/zalmoxisus/atom-redux-devtools/releases) page. 5 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Mihail Diordiev 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Redux DevTools for Atom 2 | 3 | ![Demo](https://raw.githubusercontent.com/zalmoxisus/atom-redux-devtools/master/demo.png) 4 | 5 | An Atom package to include [remotedev-app](https://github.com/zalmoxisus/remotedev-app) into your editor. Can be used with [remote-redux-devtools](https://github.com/zalmoxisus/remote-redux-devtools) / [remotedev-app](https://github.com/zalmoxisus/remotedev-app). 6 | 7 | ### Installation 8 | 9 | To add the package to Atom: 10 | ``` 11 | apm install redux-devtools 12 | ``` 13 | 14 | To include in your project: 15 | ``` 16 | npm install --save-dev remote-redux-devtools 17 | ``` 18 | or 19 | ``` 20 | npm install --save-dev remotedev 21 | ``` 22 | 23 | ### Usage 24 | 25 | - [with `remote-redux-devtools`](https://github.com/zalmoxisus/remote-redux-devtools#usage); 26 | - [with `remotedev`](https://github.com/zalmoxisus/remotedev#usage). 27 | 28 | ### License 29 | 30 | MIT 31 | -------------------------------------------------------------------------------- /demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zalmoxisus/atom-redux-devtools/ee9c02535faac3ab7c2334f35fe60fc5a3253467/demo.png -------------------------------------------------------------------------------- /keymaps/devtools.cson: -------------------------------------------------------------------------------- 1 | # Keybindings require three things to be fully defined: A selector that is 2 | # matched against the focused element, the keystroke and the command to 3 | # execute. 4 | # 5 | # Below is a basic keybinding which registers on all platforms by applying to 6 | # the root workspace element. 7 | 8 | # For more detailed documentation see 9 | # https://atom.io/docs/latest/behind-atom-keymaps-in-depth 10 | 'atom-workspace': 11 | 'ctrl-shift-d': 'devtools:open' 12 | -------------------------------------------------------------------------------- /lib/htmlTab.js: -------------------------------------------------------------------------------- 1 | 'use babel'; 2 | 3 | import HtmlTabView from './htmlTabView'; 4 | 5 | export default class HtmlTab { 6 | constructor(tabTitle) { 7 | this.tabTitle = tabTitle; 8 | } 9 | getTitle() { 10 | return this.tabTitle; 11 | }; 12 | getViewClass() { 13 | return HtmlTabView; 14 | }; 15 | } 16 | -------------------------------------------------------------------------------- /lib/htmlTabView.js: -------------------------------------------------------------------------------- 1 | // Based on https://github.com/mark-hahn/html-tab 2 | 3 | var HtmlTabView, View, 4 | extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }, 5 | hasProp = {}.hasOwnProperty; 6 | 7 | View = require('atom-space-pen-views').View; 8 | 9 | module.exports = HtmlTabView = (function(superClass) { 10 | extend(HtmlTabView, superClass); 11 | 12 | function HtmlTabView() { 13 | return HtmlTabView.__super__.constructor.apply(this, arguments); 14 | } 15 | 16 | HtmlTabView.content = function() { 17 | return this.div({ id: 'remotedev' }); 18 | }; 19 | 20 | return HtmlTabView; 21 | 22 | })(View); 23 | -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | 'use babel'; 2 | 3 | import SubAtom from 'sub-atom'; 4 | import React from 'react'; 5 | import ReactDOM from 'react-dom'; 6 | import DevTools from 'remotedev-app'; 7 | import HtmlTab from './htmlTab'; 8 | 9 | export default { 10 | activate() { 11 | this.subs = new SubAtom; 12 | return this.subs.add(atom.commands.add('atom-workspace', { 13 | 'devtools:open': function() { 14 | var root = document.getElementById('remotedev'); 15 | if (!root) { 16 | this.tab = new HtmlTab("Redux DevTools"); 17 | atom.workspace.getActivePane().activateItem(this.tab); 18 | root = document.getElementById('remotedev'); 19 | ReactDOM.render(, root); 20 | } 21 | else atom.workspace.getActivePane().activateItem(this.tab); 22 | } 23 | })); 24 | }, 25 | activateTab() { 26 | atom.workspace.getActivePane().activateItem(this.tab); 27 | }, 28 | deactivate() { 29 | return this.subs.dispose(); 30 | } 31 | }; 32 | -------------------------------------------------------------------------------- /menus/devtools.cson: -------------------------------------------------------------------------------- 1 | # See https://atom.io/docs/latest/hacking-atom-package-word-count#menus for more details 2 | 'context-menu': 3 | 'atom-text-editor': [ 4 | { 5 | 'label': 'Show Redux DevTools' 6 | 'command': 'devtools:open' 7 | } 8 | ] 9 | 'menu': [ 10 | { 11 | 'label': 'Packages' 12 | 'submenu': [ 13 | 'label': 'Redux DevTools' 14 | 'submenu': [ 15 | { 16 | 'label': 'Open' 17 | 'command': 'devtools:open' 18 | } 19 | ] 20 | ] 21 | } 22 | ] 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "redux-devtools", 3 | "main": "./lib/index", 4 | "version": "0.5.1", 5 | "description": "Open Redux DevTools in the editor", 6 | "keywords": [], 7 | "activationCommands": { 8 | "atom-workspace": "devtools:open" 9 | }, 10 | "repository": "https://github.com/zalmoxisus/atom-redux-devtools", 11 | "license": "MIT", 12 | "engines": { 13 | "atom": ">=1.0.0" 14 | }, 15 | "dependencies": { 16 | "atom-space-pen-views": "^2.0.3", 17 | "react": "15.3.0", 18 | "react-dom": "15.3.0", 19 | "remotedev-app": "^0.8.2", 20 | "sub-atom": "1.0.x" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /spec/devtools-spec.coffee: -------------------------------------------------------------------------------- 1 | Devtools = require '../lib' 2 | 3 | # Use the command `window:run-package-specs` (cmd-alt-ctrl-p) to run specs. 4 | # 5 | # To run a specific `it` or `describe` block add an `f` to the front (e.g. `fit` 6 | # or `fdescribe`). Remove the `f` to unfocus the block. 7 | 8 | describe "Devtools", -> 9 | [workspaceElement, activationPromise] = [] 10 | 11 | beforeEach -> 12 | workspaceElement = atom.views.getView(atom.workspace) 13 | activationPromise = atom.packages.activatePackage('devtools') 14 | 15 | describe "when the devtools:toggle event is triggered", -> 16 | it "hides and shows the modal panel", -> 17 | # Before the activation event the view is not on the DOM, and no panel 18 | # has been created 19 | expect(workspaceElement.querySelector('.devtools')).not.toExist() 20 | 21 | # This is an activation event, triggering it will cause the package to be 22 | # activated. 23 | atom.commands.dispatch workspaceElement, 'devtools:toggle' 24 | 25 | waitsForPromise -> 26 | activationPromise 27 | 28 | runs -> 29 | expect(workspaceElement.querySelector('.devtools')).toExist() 30 | 31 | devtoolsElement = workspaceElement.querySelector('.devtools') 32 | expect(devtoolsElement).toExist() 33 | 34 | devtoolsPanel = atom.workspace.panelForItem(devtoolsElement) 35 | expect(devtoolsPanel.isVisible()).toBe true 36 | atom.commands.dispatch workspaceElement, 'devtools:toggle' 37 | expect(devtoolsPanel.isVisible()).toBe false 38 | 39 | it "hides and shows the view", -> 40 | # This test shows you an integration test testing at the view level. 41 | 42 | # Attaching the workspaceElement to the DOM is required to allow the 43 | # `toBeVisible()` matchers to work. Anything testing visibility or focus 44 | # requires that the workspaceElement is on the DOM. Tests that attach the 45 | # workspaceElement to the DOM are generally slower than those off DOM. 46 | jasmine.attachToDOM(workspaceElement) 47 | 48 | expect(workspaceElement.querySelector('.devtools')).not.toExist() 49 | 50 | # This is an activation event, triggering it causes the package to be 51 | # activated. 52 | atom.commands.dispatch workspaceElement, 'devtools:show' 53 | 54 | waitsForPromise -> 55 | activationPromise 56 | 57 | runs -> 58 | # Now we can test for view visibility 59 | devtoolsElement = workspaceElement.getElementById('remotedev') 60 | expect(devtoolsElement).toBeVisible() 61 | atom.commands.dispatch workspaceElement, 'devtools:show' 62 | expect(devtoolsElement).not.toBeVisible() 63 | --------------------------------------------------------------------------------