├── .gitignore ├── .npmignore ├── .publishrc ├── .travis.yml ├── .vscode └── settings.json ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md ├── LICENSE ├── PULL_REQUEST_TEMPLATE.md ├── README.md ├── gulpfile.js ├── index.html ├── media ├── 1.png ├── 2.png └── 3.png ├── package.json ├── server.js ├── src ├── actions │ ├── app_actions.ts │ ├── bindings_actions.ts │ ├── logger_actions.ts │ └── settings_actions.ts ├── components │ ├── binding_explorer.tsx │ ├── binding_props_explorer.tsx │ ├── kernel_explorer.tsx │ ├── log_details.tsx │ ├── menu.tsx │ ├── panel.tsx │ ├── playground.tsx │ ├── request_log.tsx │ ├── request_tree.tsx │ ├── settings.tsx │ └── tip.tsx ├── config │ └── routes.tsx ├── constants │ ├── action_types.ts │ └── json_tree_theme.ts ├── containers │ ├── layout │ │ └── layout.tsx │ └── pages │ │ ├── bindings_page.tsx │ │ ├── logger_page.tsx │ │ ├── playground_page.tsx │ │ └── settings_page.tsx ├── core │ ├── default_settings.ts │ ├── logger.ts │ ├── selectable_kernel.ts │ └── selectable_log_entry.ts ├── interfaces │ ├── globals.d.ts │ └── interfaces.ts ├── main.tsx ├── reducers │ ├── app_reducer.ts │ ├── log_reducer.ts │ └── setting_reducer.ts └── utils │ └── utils.ts ├── style ├── scrollbar.css ├── site.css └── tree.css ├── test └── stubs.ts ├── tsconfig.json ├── tslint.json └── typings.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 18 | .grunt 19 | 20 | # node-waf configuration 21 | .lock-wscript 22 | 23 | # Compiled binary addons (http://nodejs.org/api/addons.html) 24 | build/Release 25 | 26 | # Dependency directory 27 | node_modules 28 | typings 29 | 30 | # build 31 | temp 32 | bundle 33 | lib 34 | node_modulestypings 35 | 36 | # Optional npm cache directory 37 | .npm 38 | 39 | # Optional REPL history 40 | .node_repl_history 41 | 42 | .typingsrc -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | test 3 | typings 4 | bundle 5 | build 6 | coverage 7 | docs 8 | wiki 9 | gulpfile.js 10 | bower.json 11 | karma.conf.js 12 | tsconfig.json 13 | typings.json 14 | CONTRIBUTING.md 15 | ISSUE_TEMPLATE.md 16 | PULL_REQUEST_TEMPLATE.md 17 | tslint.json 18 | wallaby.js 19 | .travis.yml 20 | .gitignore 21 | .vscode 22 | .publishrc 23 | type_definitions 24 | -------------------------------------------------------------------------------- /.publishrc: -------------------------------------------------------------------------------- 1 | { 2 | "validations": { 3 | "vulnerableDependencies": true, 4 | "uncommittedChanges": true, 5 | "untrackedFiles": true, 6 | "sensitiveData": true, 7 | "branch": "master", 8 | "gitTag": true 9 | }, 10 | "confirm": true, 11 | "publishTag": "latest", 12 | "prePublishScript": "npm test" 13 | } -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 'stable' 4 | - '5.4.1' 5 | - '5.4.0' 6 | - '5.3.0' 7 | - '5.2.0' 8 | - '5.1.1' 9 | before_install: 10 | - npm install -g typings 11 | - typings install 12 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | "files.exclude": { 4 | "**/.git": true, 5 | "**/.svn": true, 6 | "**/.DS_Store": true, 7 | "temp": true 8 | } 9 | } -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Inversify 2 | 3 | ## Setup 4 | 5 | 1 - Clone your fork of the repository: 6 | ``` 7 | $ git clone https://github.com/YOUR_USERNAME/inversify-devtools.git 8 | ``` 9 | 10 | 2 - Install typings: 11 | ``` 12 | $ npm install -g typings 13 | ``` 14 | 15 | 3 - Install type definitions: 16 | ``` 17 | $ typings install 18 | ``` 19 | 20 | 4 - Install npm dependencies: 21 | ``` 22 | $ npm install 23 | ``` 24 | 25 | 5 - Run build process 26 | ``` 27 | $ gulp 28 | ``` 29 | 30 | ## Guidelines 31 | 32 | - Please try to [combine multiple commits before pushing](http://stackoverflow.com/questions/6934752/combining-multiple-commits-before-pushing-in-git) 33 | 34 | - Please use `TDD` when fixing bugs. This means that you should write a unit test that fails because it reproduces the issue, 35 | then fix the issue finally run the test to ensure that the issue has been resolved. This helps us to prevent fixed bugs from 36 | happening again in the future. 37 | 38 | - Please keep the test coverage at 100%. Write additional unit test if necessary 39 | 40 | - Please create an issue before sending a PR ff your it is going to change the public interface of InversifyJS or it 41 | includes significant architecture changes. 42 | 43 | - Feel free to ask for help from other members of the InversifyJS team via the chat / mailing list or github issues. -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | PLEASE DO NOT REPORT THE ISSUE HERE! 2 | 3 | PLEASE USE THE INVERSIFYJS REPO INSTEAD YOU CAN FIND THE REPO AT: 4 | 5 | https://github.com/inversify/InversifyJS/issues 6 | 7 | YOU CAN ALSO FIND US ON GITTER AT: 8 | 9 | https://gitter.im/inversify/InversifyJS 10 | 11 | THANKS! 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Remo H. Jansen 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 | -------------------------------------------------------------------------------- /PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## Description 4 | 5 | 6 | ## Related Issue 7 | 8 | 9 | 10 | 11 | 12 | ## Motivation and Context 13 | 14 | 15 | ## How Has This Been Tested? 16 | 17 | 18 | 19 | 20 | ## Types of changes 21 | 22 | - [ ] Bug fix (non-breaking change which fixes an issue) 23 | - [ ] New feature (non-breaking change which adds functionality) 24 | - [ ] Breaking change (fix or feature that would cause existing functionality to change) 25 | 26 | ## Checklist: 27 | 28 | 29 | - [ ] My code follows the code style of this project. 30 | - [ ] My change requires a change to the documentation. 31 | - [ ] I have updated the documentation accordingly. 32 | - [ ] My change requires a change to the type definitions. 33 | - [ ] I have updated the type definitions accordingly. 34 | - [ ] I have read the **CONTRIBUTING** document. 35 | - [ ] I have added tests to cover my changes. 36 | - [ ] All new and existing tests passed. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # inversify-devtools 2 | 3 | [![Join the chat at https://gitter.im/inversify/InversifyJS](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/inversify/InversifyJS?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 4 | [![Build Status](https://secure.travis-ci.org/inversify/devtools.svg?branch=master)](https://travis-ci.org/inversify/devtools) 5 | [![npm version](https://badge.fury.io/js/inversify-devtools.svg)](http://badge.fury.io/js/inversify-devtools) 6 | [![Dependencies](https://david-dm.org/inversify/devtools.svg)](https://david-dm.org/inversify/devtools#info=dependencies) 7 | [![Dependencies](https://david-dm.org/inversify/devtools/dev-status.svg)](https://david-dm.org/inversify/devtools/#info=devDependencies) 8 | [![Dependencies](https://david-dm.org/inversify/devtools/peer-status.svg)](https://david-dm.org/inversify/devtools/#info=peerDependenciess) 9 | [![Known Vulnerabilities](https://snyk.io/test/github/inversify/devtools/badge.svg)](https://snyk.io/test/github/inversify/devtools) 10 | 11 | [![NPM](https://nodei.co/npm/inversify-devtools.png?downloads=true&downloadRank=true)](https://nodei.co/npm/inversify-devtools/) 12 | [![NPM](https://nodei.co/npm-dl/inversify-devtools.png?months=9&height=3)](https://nodei.co/npm/inversify-devtools/) 13 | 14 | A React/Redux application that powers the InversifyJS browser development tools. 15 | 16 | ![](https://raw.githubusercontent.com/inversify/inversify-devtools/master/media/1.png) 17 | ![](https://raw.githubusercontent.com/inversify/inversify-devtools/master/media/2.png) 18 | ![](https://raw.githubusercontent.com/inversify/inversify-devtools/master/media/3.png) 19 | 20 | You can use this project to add features to the suported browsers extensions. 21 | 22 | ### How to use this project? 23 | 24 | > NOTE: this project contains a web applicaiton used to power the browser extensions. If you are an InverisfyJS user looking for a browser extension you should visit the extension projects: 25 | > - [inversify-chrome-devtools](https://github.com/inversify/inversify-chrome-devtools) 26 | 27 | To use this project you must install it using npm: 28 | 29 | ``` 30 | $ npm install --save inversify-devtools 31 | $ npm install --save-dev inversify-dts 32 | ``` 33 | You can use the `connectKernel` function to connect an instance of the `Kernel` class to the devtools: 34 | 35 | ```ts 36 | /// 37 | 38 | import render from "inversify-devtools"; 39 | import { Kernel } from "inversify"; 40 | 41 | let containerId = "root"; 42 | let connectKernel = render(containerId); 43 | let kernel = new Kernel(); 44 | connectKernel(kernel); 45 | ``` 46 | 47 | ### License 48 | License under the MIT License (MIT) 49 | 50 | Copyright © 2015 [Remo H. Jansen](http://www.remojansen.com) 51 | 52 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software 53 | and associated documentation files (the "Software"), to deal in the Software without restriction, 54 | including without limitation the rights to use, copy, modify, merge, publish, distribute, 55 | sublicense, and/or sell copies of the Software, and to permit persons to whom the Software 56 | is furnished to do so, subject to the following conditions: 57 | 58 | The above copyright notice and this permission notice shall be included in all copies or 59 | substantial portions of the Software. 60 | 61 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 62 | INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR 63 | PURPOSE AND NONINFRINGEMENT. 64 | 65 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR 66 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 67 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 68 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | //****************************************************************************** 4 | //* DEPENDENCIES 5 | //****************************************************************************** 6 | 7 | var gulp = require("gulp"), 8 | tslint = require("gulp-tslint"), 9 | tsc = require("gulp-typescript"), 10 | runSequence = require("run-sequence"), 11 | browserify = require("browserify"), 12 | source = require("vinyl-source-stream"), 13 | buffer = require("vinyl-buffer"); 14 | 15 | //****************************************************************************** 16 | //* LINT ALL 17 | //****************************************************************************** 18 | gulp.task("lint", function() { 19 | 20 | var config = { emitError: (process.env.CI) ? true : false }; 21 | 22 | return gulp.src([ 23 | "src/**/**.ts", 24 | "test/**/**.test.ts" 25 | ]) 26 | .pipe(tslint()) 27 | .pipe(tslint.report("verbose", config)); 28 | }); 29 | 30 | //****************************************************************************** 31 | //* BUILD SOURCE 32 | //****************************************************************************** 33 | var tsLibProject = tsc.createProject("tsconfig.json"); 34 | 35 | gulp.task("build", function() { 36 | return gulp.src([ 37 | "typings/index.d.ts", 38 | "node_modules/immutable/dist/immutable.d.ts", 39 | "node_modules/redux-bootstrap/type_definitions/redux-bootstrap/redux-bootstrap.d.ts", 40 | "node_modules/inversify/type_definitions/inversify/inversify.d.ts", 41 | "node_modules/inversify-dts/inversify-logger-middleware/inversify-logger-middleware.d.ts", 42 | "src/interfaces/interfaces.d.ts", 43 | "src/**/**.ts", 44 | "src/**/**.tsx" 45 | ]) 46 | .pipe(tsc(tsLibProject)) 47 | .on("error", function (err) { 48 | process.exit(1); 49 | }) 50 | .js.pipe(gulp.dest("lib/")); 51 | }); 52 | 53 | //****************************************************************************** 54 | //* BUNDLE SOURCE 55 | //****************************************************************************** 56 | gulp.task("bundle", function() { 57 | 58 | var mainFilePath = "lib/main.js"; 59 | var outputFolder = "bundle"; 60 | var outputFileName = "app.js"; 61 | 62 | var bundler = browserify({ 63 | debug: true 64 | }); 65 | 66 | // TS compiler options are in tsconfig.json file 67 | return bundler.add(mainFilePath) 68 | .bundle() 69 | .pipe(source(outputFileName)) 70 | .pipe(buffer()) 71 | .pipe(gulp.dest(outputFolder)); 72 | }); 73 | 74 | //****************************************************************************** 75 | //* TASK GROUPS 76 | //****************************************************************************** 77 | gulp.task("default", function (cb) { 78 | runSequence( 79 | "lint", 80 | "build", 81 | "bundle", 82 | cb); 83 | }); 84 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | InversifyJS DevTools 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /media/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inversify/inversify-devtools/6eb09c726bcf6f1f86f97df7dfc532d23418e44c/media/1.png -------------------------------------------------------------------------------- /media/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inversify/inversify-devtools/6eb09c726bcf6f1f86f97df7dfc532d23418e44c/media/2.png -------------------------------------------------------------------------------- /media/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/inversify/inversify-devtools/6eb09c726bcf6f1f86f97df7dfc532d23418e44c/media/3.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "inversify-devtools", 3 | "version": "1.0.0", 4 | "description": "inversify-devtools", 5 | "main": "lib/main.js", 6 | "scripts": { 7 | "test": "gulp", 8 | "publish-please": "publish-please", 9 | "prepublish": "publish-please guard" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/inversify/inversify-devtools.git" 14 | }, 15 | "keywords": [ 16 | "redux", 17 | "react", 18 | "example" 19 | ], 20 | "author": "Remo H. Jansen ", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/inversify/inversify-devtools/issues" 24 | }, 25 | "homepage": "https://github.com/inversify/inversify-devtools#readme", 26 | "dependencies": { 27 | "bootstrap": "^3.3.6", 28 | "font-awesome": "^4.6.1", 29 | "inversify-logger-middleware": "^1.0.0-rc.3", 30 | "react": "^15.0.1", 31 | "react-dom": "^15.0.1", 32 | "react-json-tree": "^0.7.4", 33 | "react-redux": "^4.4.5", 34 | "react-router": "^2.3.0", 35 | "react-router-redux": "^4.0.4", 36 | "redux": "^3.5.2", 37 | "redux-bootstrap": "^1.0.0-rc.1", 38 | "redux-immutable": "^3.0.6", 39 | "redux-thunk": "^2.0.1", 40 | "redux-devtools": "^3.2.0", 41 | "redux-devtools-dock-monitor": "^1.1.1", 42 | "redux-devtools-log-monitor": "^1.0.11", 43 | "redux-logger": "^2.6.1" 44 | }, 45 | "devDependencies": { 46 | "browserify": "^13.0.0", 47 | "envify": "^3.4.1", 48 | "gulp": "^3.9.1", 49 | "gulp-tslint": "^5.0.0", 50 | "gulp-typescript": "^2.13.0", 51 | "inversify": "^2.0.0-rc.5", 52 | "inversify-dts": "^1.6.0", 53 | "publish-please": "^2.1.4", 54 | "reflect-metadata": "^0.1.3", 55 | "run-sequence": "^1.1.5", 56 | "tslint": "^3.8.1", 57 | "vinyl-buffer": "^1.0.0", 58 | "vinyl-source-stream": "^1.1.0" 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | var bootstrap = require("redux-bootstrap"); 2 | var routes = require("./config/routes"); 3 | 4 | var result = bootstrap({ 5 | container: "root", 6 | createHistory: createMemoryHistory, 7 | initialState: {}, 8 | middlewares: [thunk], 9 | reducers: getReducers(), 10 | render: () => {}, // skip first render, we navigate first 11 | routes: getRoutes() 12 | }); 13 | 14 | result.history.push("/users"); 15 | result.output = renderToStaticMarkup(result.root); -------------------------------------------------------------------------------- /src/actions/app_actions.ts: -------------------------------------------------------------------------------- 1 | import { getLogger } from "../core/logger"; 2 | import { makeActionCreator } from "../utils/utils"; 3 | import ACTION_TYPES from "../constants/action_types"; 4 | import loggerActions from "./logger_actions"; 5 | import SelectableKernel from "../core/selectable_kernel"; 6 | 7 | let resize = makeActionCreator(ACTION_TYPES.RESIZE, "width", "height"); 8 | let appInitSuccess = makeActionCreator(ACTION_TYPES.APP_INIT_SUCCESS, "__inversifyDevtools__"); 9 | let kernelConnectSucess = makeActionCreator(ACTION_TYPES.KERNEL_CONNECT_SUCCESS, "kernel"); 10 | let initSettings = makeActionCreator(ACTION_TYPES.APP_SETTINGS_SUCCESS, "settings"); 11 | 12 | function appInitAsync() { 13 | return function(dispatch: Redux.Dispatch) { 14 | 15 | let __inversifyDevtools__ = function(kernel: inversify.interfaces.Kernel) { 16 | let logger = getLogger(loggerActions.addLogEntry, initSettings, dispatch); 17 | kernel.applyMiddleware(logger); 18 | let selectableKernel = new SelectableKernel(kernel); 19 | dispatch(kernelConnectSucess(selectableKernel)); 20 | }; 21 | 22 | dispatch(appInitSuccess(__inversifyDevtools__)); 23 | 24 | }; 25 | } 26 | 27 | export { appInitAsync, appInitSuccess, resize}; 28 | -------------------------------------------------------------------------------- /src/actions/bindings_actions.ts: -------------------------------------------------------------------------------- 1 | import { makeActionCreator } from "../utils/utils"; 2 | import ACTION_TYPES from "../constants/action_types"; 3 | 4 | let selectKernel = makeActionCreator(ACTION_TYPES.SELECT_KERNEL, "kernel"); 5 | let selectBinding = makeActionCreator(ACTION_TYPES.SELECT_BINDING, "keyVal", "kernelGuid"); 6 | 7 | let bindingsActions = { 8 | selectKernel, 9 | selectBinding 10 | }; 11 | 12 | export default bindingsActions; 13 | -------------------------------------------------------------------------------- /src/actions/logger_actions.ts: -------------------------------------------------------------------------------- 1 | import { makeActionCreator } from "../utils/utils"; 2 | import ACTION_TYPES from "../constants/action_types"; 3 | 4 | let addLogEntry = makeActionCreator(ACTION_TYPES.ADD_LOG_ENTRY, "entry", "logSize"); 5 | let selectRequest = makeActionCreator(ACTION_TYPES.SELECT_LOG_ENTRY, "entry"); 6 | let filterRequests = makeActionCreator(ACTION_TYPES.FILTER_LOG_ENTRIES, "filterBy"); 7 | let clearRequests = makeActionCreator(ACTION_TYPES.CLEAR_LOG); 8 | 9 | let loggerActions = { 10 | addLogEntry, 11 | selectRequest, 12 | filterRequests, 13 | clearRequests 14 | }; 15 | 16 | export default loggerActions; 17 | -------------------------------------------------------------------------------- /src/actions/settings_actions.ts: -------------------------------------------------------------------------------- 1 | import { makeActionCreator } from "../utils/utils"; 2 | import ACTION_TYPES from "../constants/action_types"; 3 | import interfaces from "../interfaces/interfaces"; 4 | 5 | let saveSettingsSuccess = makeActionCreator(ACTION_TYPES.SAVE_SETTINGS_SUCCESS, "settings"); 6 | let saveSettingsError = makeActionCreator(ACTION_TYPES.SAVE_SETTINGS_ERROR, "exception"); 7 | 8 | let saveSettingsAsync = function (settings: interfaces.UserSettings) { 9 | try { 10 | window.localStorage.setItem("inversify_settings", JSON.stringify(settings)); 11 | return saveSettingsSuccess(settings); 12 | } catch (e) { 13 | return saveSettingsError(e); 14 | } 15 | }; 16 | 17 | let settingsActions = { 18 | saveSettingsAsync 19 | }; 20 | 21 | export default settingsActions; 22 | -------------------------------------------------------------------------------- /src/components/binding_explorer.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Link } from "react-router"; 3 | import Panel from "./panel"; 4 | import Tip from "./tip"; 5 | 6 | class BindingExplorer extends React.Component { 7 | 8 | public constructor(props: any) { 9 | super(props); 10 | } 11 | 12 | public render() { 13 | return ( 14 | 15 | {this._renderTip()} 16 | {this._renderBindings(this.props.dictionary)} 17 | 18 | ); 19 | } 20 | 21 | private _renderTip() { 22 | if (this.props.dictionary.length === 0) { 23 | return ( 24 | 25 | Click on one of the kernels on the kernel panel (left) to see its binding! 26 | 27 | ); 28 | } else { 29 | return ( 30 | 31 | Services with more than one implementation are displayed in yellow. 32 | Remember to add some metadata and constraints to avoid ambiguous match exceptions! 33 | 34 | ); 35 | } 36 | } 37 | 38 | private _handleClick(keyVal: any) { 39 | this.props.selectBinding(keyVal, this.props.kernelGuid); 40 | } 41 | 42 | private _renderClass(length: number) { 43 | return (length > 1) ? "request requestBox warningBox" : "request requestBox defaultBox"; 44 | } 45 | 46 | private _renderBindings(dictionary: any[]): JSX.Element[] { 47 | return dictionary.map((keyVal: any, id: number) => { 48 | return ( 49 |
{ this._handleClick(keyVal); }}> 51 | 52 |
53 |
IMPLEMENTATIONS: {keyVal.value.length}
54 |

{keyVal.serviceIdentifier.toString()}

55 |
56 | 57 |
58 | ); 59 | }); 60 | } 61 | 62 | } 63 | 64 | export default BindingExplorer; 65 | -------------------------------------------------------------------------------- /src/components/binding_props_explorer.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Link } from "react-router"; 3 | import Panel from "./panel"; 4 | import JSONTree from "react-json-tree"; 5 | import theme from "../constants/json_tree_theme"; 6 | import Tip from "./tip"; 7 | import { formatBindings } from "../utils/utils"; 8 | 9 | class BindingPropsExplorer extends React.Component { 10 | 11 | public constructor(props: any) { 12 | super(props); 13 | } 14 | 15 | public render() { 16 | return ( 17 | 18 | {this._render()} 19 | 20 | ); 21 | } 22 | 23 | private _render() { 24 | if (this.props.bindings.length > 0) { 25 | let bindings = formatBindings(this.props.bindings); 26 | return ( 27 |
28 |
29 | 30 |
31 |
32 | ); 33 | } else { 34 | return ( 35 | 36 | Click on one of the services on the services panel (left) to see its binding! 37 | 38 | ); 39 | } 40 | } 41 | 42 | } 43 | 44 | export default BindingPropsExplorer; 45 | -------------------------------------------------------------------------------- /src/components/kernel_explorer.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Link } from "react-router"; 3 | import Panel from "./panel"; 4 | import interfaces from "../interfaces/interfaces"; 5 | import Tip from "./tip"; 6 | 7 | const dir = { 8 | close: "▹", 9 | open: "▿" 10 | }; 11 | 12 | class KernelExplorer extends React.Component { 13 | 14 | public constructor(props: any) { 15 | super(props); 16 | } 17 | 18 | public render() { 19 | return ( 20 | 21 | {this._render()} 22 | 23 | ); 24 | } 25 | 26 | private _render() { 27 | if (this.props.kernels.length > 0) { 28 | let kernels = this._renderKernels(this.props.kernels); 29 | return
{kernels}
; 30 | } else { 31 | return 32 | No Kernels found! Use global 33 | __inversifyDevtools__ 34 | to connect a kernel. 35 | ; 36 | } 37 | } 38 | 39 | private _handleClick(kernel: interfaces.SelectableKernel) { 40 | this.props.selectKernel(kernel); 41 | } 42 | 43 | private _renderKernels(kernels: interfaces.SelectableKernel[]) { 44 | return kernels.map((kernel: interfaces.SelectableKernel, id: number) => { 45 | return ( 46 |
{ this._handleClick(kernel); }}> 47 |
48 |
GUID: {kernel.details.guid}
49 |

Kernel

50 |
51 |
52 | ); 53 | }); 54 | } 55 | 56 | } 57 | 58 | export default KernelExplorer; 59 | -------------------------------------------------------------------------------- /src/components/log_details.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Panel from "./panel"; 3 | import JSONTree from "react-json-tree"; 4 | import theme from "../constants/json_tree_theme"; 5 | import interfaces from "../interfaces/interfaces"; 6 | import Tip from "./tip"; 7 | import { formatBindings } from "../utils/utils"; 8 | 9 | class LogDetails extends React.Component { 10 | 11 | public constructor(props: any) { 12 | super(props); 13 | } 14 | 15 | public render() { 16 | return ( 17 | 18 | {this.props.entry ? this._renderEntry(this.props.entry) : this._renderTip() } 19 | 20 | ); 21 | } 22 | 23 | private _renderTip() { 24 | return ( 25 | Click on one of the requests on the request log to see its details! 26 | ); 27 | } 28 | 29 | private _formatRequest(request: inversify.interfaces.Request) { 30 | request.bindings = formatBindings(request.bindings); 31 | request.childRequests = request.childRequests.map((childRequest: inversify.interfaces.Request) => { 32 | return this._formatRequest(childRequest); 33 | }); 34 | return request; 35 | } 36 | 37 | private _renderEntry(entry: interfaces.SelectableLogEntry) { 38 | 39 | if (entry.details.error) { 40 | 41 | let stack = entry.details.exception.stack.split(" at ") 42 | .map((s: string, index: number) => { 43 | if (index === 0) { 44 | return ( 45 |

46 | 47 | {`${s}`} 48 |

49 | ); 50 | } else { 51 | return ( 52 |

53 | {`at ${s}`} 54 |

55 | ); 56 | } 57 | }); 58 | 59 | return ( 60 |
61 |
62 | {stack} 63 |
64 |
65 |
66 | 67 |
68 |
69 |
70 | ); 71 | 72 | } else { 73 | entry.details.rootRequest = this._formatRequest(entry.details.rootRequest); 74 | return ( 75 |
76 |
77 | 78 |
79 |
80 | ); 81 | } 82 | } 83 | 84 | } 85 | 86 | export default LogDetails; 87 | -------------------------------------------------------------------------------- /src/components/menu.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Link } from "react-router"; 3 | 4 | class Menu extends React.Component { 5 | 6 | public constructor(props: any) { 7 | super(props); 8 | } 9 | 10 | public render() { 11 | return ( 12 |
13 |
    14 |
  • 15 | 16 |