How to get data from lib/package.js to lib/package-view.js?

It’s a very basic question, but I just started creating my own packages, and I couldn’t find information anywhere.

Let’s say I have an event where sharedData is defined:


'use babel';

import ActiveEditorInfoView from './sourchfetch-view';
import {CompositeDisposable, Disposable} from 'atom';

export default {

  subscriptions: null,
  sharedData = ''

  (more code)

  fetch () {
    this.sharedData = 'test'   

How can I get sharedData into the view?


'use babel';

export default class SourchfetchView {

  constructor(serializedState) {
    this.element = document.createElement('div');

    // Create message element
    const message = document.createElement('div');

    this.subscriptions = atom.workspace.getCenter().observeActivePaneItem(item => {
      if (!atom.workspace.isTextEditor(item)) return;
      message.innerHTML = `

What are you trying to do?

Do you mean event as in EventEmitter? This is how you can register observers onto certain events, and notify them when something happens.

1 Like

For example, I want to fetch data in lib/package.js and then show that data in lib/package-view.js.

Could you give me an example of how to do that in Atom? Or show me a link?

The different files here are less relevant than the class structure. The problem is just how to send information from one class to another; the solution is for the sending class to have a reference to the receiver, or for the sender to have access to an event emitter the other is monitoring. This is generally easy because the thing sending the data will also likely be constructing these views, so can store a reference to them.


// main.js
const view = new MyView();
const data = doThings()

// view.js
class MyView {
  sendData(data) {
    // this method is called with the data

Some more context (e.g., a repo or what you are trying to do) would help. Especially on what is driving what (who is changing the sharedData, what it represents, what it’s sourced from, etc.). Right now I’m not quite sure why the package.js method is called fetch; in my mind, it would be pushing the new data to the views instead.

1 Like

Thanks for helping!

My repo is a copy of this one: It has the same structure.

In that case, you can keep a reference to the created view on this line before returning it. Then adding a method on the view (e.g., handleData(data)) means you can send in data from the package root whenever you like by calling this method.

1 Like

Sorry, what do you mean by “keeping a reference to the created view”? Could you give me an example?

This is one way, where there is only a single view

export default {

  subscriptions: null,

  view: null,

  activate(state) {
    this.subscriptions = new CompositeDisposable(
      // Add an opener for our view.
      atom.workspace.addOpener(uri => {
        if (uri === 'atom://active-editor-info') {
          if (!this.view) {
            this.view = new ActiveEditorInfoView();
          return this.view;

You can access the view by the this.view property on the package class. If you want to support multiple views, you could store them in a Set instead (change view that holds an ActiveEditorInfoView into views that holds a Set<ActiveEditorInfoView>()).

This means you need to be careful about tracking when the view is destroyed, and removing the reference in that case, but that’s doable (e.g., subscribe to the onDidDestroy event of the view and have the callback set this.view back to null).

1 Like

Thanks a lot for taking your time to explain all this!