## Building ### Single build ```sh npm run build ``` ### Continuous build ```sh npm run watch ``` This watches the files and rebuilds, but we still have to restart the tui. ## Logging console.log and console.error calls go to a log file In src/index.js when we instantiate the screen, ```js const screen = blessed.screen({ autoPadding: true, smartCSR: true, title: 'Terminal Devtools', sendFocus: true, dockBorders: true, autoPadding: true, log: './log', //'/dev/ttys004', ignoreLocked: ['C-c'] }) console.log = screen.log.bind(screen) console.error = screen.log.bind(screen, 'ERROR: ') ``` Notice the comment on the log property, running `tty` in a terminal will give you it's tty device. You can open a new terminal and set `log` to its tty file to output logs directly to a secondary terminal. ### State logging Logger middleware in `store/create.js` is commented out, this will output every action and corresponding state change to the log. It's commented out because it's a firehose. ### Protocol Logging Use `--trace-debug-json` to see debugger API request/response JSON. ```sh $ node --debug-brk --trace-debug-json somefile.js ``` ### Reverse engineering Node Inspector We can use protocol logging whilst interacting with node inspector to see how node inspector performs certain functions - this can be useful to supplement the protocol docs and bring clarity to implementation details. First run node-inspector as a service (important to do this *first*) ```sh $ node-inspector ``` In another terminal, run node on a file along with debug-brk and trace-debug-json ```sh $ node --debug-brk --trace-debug-json somefile.js ``` Now open the node inspector url http://127.0.0.1:8080/?ws=127.0.0.1:8080&port=5858 and start using features. Easy way to format the debugger request/response JSON output, copy it then: ```sh $ npm i -g JSONStream $ pbpaste | JSONStream | pbcopy ``` ## Design principles * **Every** component is pure - no components handle state, ever (e.g. no `setState`) * Each component is a function not a class, life cycle methods can added using [`react-functional`](http://npmjs.com/react-functional) if needed * Redux is responsible for a central store * container components hook up redux state to child dumb components * container components currently map to tab screens (e.g. the `Sources` container) is composed of all the panels in the sources tab, and likewise passes down relevant state and action methods to the components * dumb components (e.g. non-containers) should not know anything about the app, they take props output JSX for rendering. * If it can't be done declaratively, don't fall back to using `refs` - instead patch and PR against react-blessed so that it is declarative (e.g. , , , ,