Skip to content
This repository has been archived by the owner on Apr 1, 2020. It is now read-only.

Development

Jump to bottom
Bryan Phelps edited this page Oct 6, 2017 · 28 revisions

Setup

Install Dependencies

All Platforms

  • Install the latest Node if you don't have it already

Windows

  • Run npm install --global --production windows-build-tools from an elevated PowerShell or CMD.exe (run as Administrator)

Linux

  • python (v2.7 is required)
  • make
  • sudo apt install libxkbfile-dev (this is required for building the keyboard-layout module)

OS X

  • python (v2.7 is required)
  • XCode
    • You also need to install the Command Line Tools via Xcode. You can find this under the menu Xcode -> Preferences -> Downloads
    • This step will install gcc and the related toolchain containing make
  • sudo apt install libxkbfile-dev (this is required for building the keyboard-layout module)

First build

  • Clone the repository: git clone https://github.com/bryphe/oni.git
  • cd oni to navigate to the root folder
  • npm install to install NPM dependencies
  • npm run build to build the project
  • npm link to register the oni command in the shell, against the local build.

Test it out by running oni at the command line.

Debug build

In order to build a source-map enabled build, you can do the following:

  • npm run build-debug
  • npm link (only needed the first time)
  • oni

Debugging in VSCode? Default launch configurations are provided for debugging both the Electron main process and Oni application from VSCode.

Production build

A production build removes sourcemaps and applies minification, so it's worth testing in this config:

  • npm run build
  • npm link (only needed the first time)
  • oni

Hot-reload build

The optimal way to debug Oni is to use:

npm run start

This enables hot-reload of CSS styles, React components, and will automatically reload Oni when other javascript has changed. Also, the hot-reload webpack config has source maps enabled.

If you use the hot-reload build of Oni to make changes - you'll end up reloading your editor every time you make a javascript change. For that reason, I recommend keeping two instances open - one for development and one to see the changes.

Coding instance

  • npm run build - build latest source
  • npm link - (only needed the first time, but this enables the ONI command)
  • oni - open the "coding" instance (optional: set a unique colorscheme to differentiate)

Test instance

  • npm run start - start ONI against the webpack live-reload service - our "running" instance

Then, the flow is to make the code changes in the "coding" instance, and see them reflected immediately in the "running instance".

Here's an example of using hot-reloading to edit the cursor (albeit in not very useful ways) in real time: cursor-hot-reload

Open DevTools

You can open up Chrome's developer tools at any time using the following steps:

  • Control+Shift+P - open command palette
  • Select Open DevTools

debug tools

Chrome's developer tools are great for profiling and debugging - you can read more here

Clone this wiki locally