Extend Atom editor the React-Redux way

As an Atom user at some point you probably tried to extend the editor and started reading the Atom flight manual. After-all you chose the editor because it is hackable. But if you are a developer who is used to building things the React-Redux way, you might find yourself struggling to do things the Atom way with event emitters, disposables and view registries.

As someone who went down this path more than once, I created a bootstrap code to jump start an extension the React-Redux way. My name is Victor Doss, Founder of CodeSideStory . If you use #Slack at work do checkout https://CodeSideStory.com/ — An useful tool to add context to your code. btw, I created this bootstrap as part this extension rewrite.

Here is the bootstrap code:

vidoss/atom-react-redux

Here is what you get from this code. Many of the concepts are inspired by facebook’s nuclide project.

1. No more “use babel” — Atom extensions can use ES6 syntax by adding “use babel” at the top of each file. But the downside is that it slows down your extension loading time when you have large number of files. This repo has a webpack config file that precompiles all files so Atom doesn’t have to do it runtime.
2. Atom expects every DOM extension point to be an HTMLElement or something that is derived from HTMLElement. There are helper classes to simplify this. See files under src/containers . Just use a unique uri for each root element and you can pass that to any Atom api that expects uri.
3. Special actions to show/hide modal windows. As modal window is a bit different from others and needs some special handling.
4. The whole redux store is serialized and saved by Atom so your extension store is restored to last state when reinitialized. Only one store is shared across different extension views.
5. The redux store is passed down to the react components at the root of every extension point. You can use the regular “connect” from react-redux to get stuff from store for your component.

Final Tip: Open Atom command palette and select “Styleguide: show”. It has a lots of UI components that you can use right away in your react components. Also look at nuclide’s common-ui module

Here is quick video of what you get out of the box.