Compass Shell Plugin

Usage no npm install needed!

<script type="module">
  import mongodbJsCompassShell from 'https://cdn.skypack.dev/@mongodb-js/compass-shell';



Compass Shell Plugin



link-plugin: Links the Compass plugin and Compass for development along with React to ensure the plugin and Compass are using the same React instance.

COMPASS_HOME=/path/to/my/compass npm run link-plugin

unlink-plugin: Restores Compass and the plugin to their original unlinked state.

COMPASS_HOME=/path/to/my/compass npm run unlink-plugin

start-compass: Runs the plugin in compass master.



Validate and test your component in an Electron window, styles included. The source automatically compiles and the window content reloads when any file under ./src changes.

To start Electron and render your component, type npm start.


The test environment is configured to test components with Enzyme (including full mount mode through jsdom) and enzyme-chai. See the test folder for examples. Run npm test to execute the test suite.


Almost all of your development will happen in the ./src directory. Add new components to ./src/components, actions to ./src/actions/index.js and if you need additional stores, add them to ./src/stores.

To be able to debug the plugin inside compass make sure webpack prod config has devtool is set to source-map. If you want faster compiler time when you commit/push, switch it to false.

const config = {
  target: 'electron-renderer',
  devtool: 'source-map'

Directory Structure

For completeness, below is a list of directories present in this module:

  • electron code to start electron, open a browser window and load the source. You don't usually need to touch this, unless you want to render something other than the main component in Electron.
  • lib compiled version of your components (plain javascript instead of jsx) and styles (css instead of less). Never change anything here as this entire folder gets automatically created and overwritten.
  • src components, actions and stores source code, as well as style files. This is the place to implement your own components. npm run compile will use ./src as input and create ./lib.
  • test implement your tests here, and name the files *.test.js.