define a function as an object parameter

Question

I'm working on a firefox addon, and instead of having the whole script in main.js, I'm trying to cut in differents files.

Right now, I have a utils.js which looks like this :

'use strict';

module.exports.utils = function() {
  return {
    _           : require('sdk/l10n').get,
    self        : require('sdk/self'),
    sStorage    : require('sdk/simple-storage'),
    tabs        : require('sdk/tabs'),
    pageMod     : require('sdk/page-mod'),
    toggleButton: require('sdk/ui/button/toggle'),
    panel       : require('sdk/panel'),
    hotkey      : require('sdk/hotkeys'),
    displayPanel: function(mainPanel, qwantButton) {
      if (mainPanel.isShowing) {
        mainPanel.hide();
        qwantButton.state('window', {
          checked: false
        });
      } else {
        mainPanel.show({
          position: qwantButton
        });
      }
    }
  };
}();

I import the utils.js into main.js that way : var utils = require(utils); both files being in the same location : [ROOT]/lib .

But I run into an error because of this line : _ : require('sdk/l10n').get, for _ not being a function. I tried writing it this way : _ : require('sdk/l10n').get(), or with get(str) , but they both fail, the first time because get needs an argument, the second time because str is not defined. Is there a way to define this item ?

[EDIT] : With a few more tries, I found out that writing utils.js that way made _ work :

'use strict';

var _           = require('sdk/l10n').get,
  self          = require('sdk/self'),
  sStorage      = require('sdk/simple-storage'),
  tabs          = require('sdk/tabs'),
  {PageMode}    = require('sdk/page-mod'),
  {ToggleButton}= require('sdk/ui/button/toggle'),
  {Panel}       = require('sdk/panel'),
  {Hotkey}      = require('sdk/hotkeys');

var qwantButton = new ToggleButton({
  id: 'toolbar_button_id',
  label: _('toolbar_button_label'),
  icon: {
    '16': './img/logo-16.png',
    '32': './img/logo-32.png',
    '64': './img/logo-64.png'
  },
  onClick: displayMainPanel
});

var mainPanel = new Panel({
  width: 525,
  height: 175,
  contentURL: self.data.url('./panel.html'),
  contentScriptFile: self.data.url('./js/panelScript.js')
});

var hotkey = new Hotkey({
  combo: 'alt-Q',
  onPress: displayMainPanel(qwantButton, mainPanel)
});

function displayMainPanel(mainPanel, qwantButton) {
  if (mainPanel.isShowing) {
    mainPanel.hide();
    qwantButton.state('window', {
        checked: false
    });
  } else {
    mainPanel.show({
      position: qwantButton
    });
  }
}

module.exports = function utils() {
  return {
    _           : _,
    self        : self,
    sStorage    : sStorage,
    tabs        : tabs,
    hotkey      : hotkey,
    qwantButton : qwantButton,
    mainPanel   : mainPanel,
    displayMainPanel: displayMainPanel
  };
}();

But now, the methods of required elements do not work (for example mainPanel.show() ) ...

Answer 1

I got it.

The main.js is -as per it's name- the main element, so anything done outside has to be required inside. For the SDK's functions, I did this :

main.js :

'use strict';

var Core = function() {
  var _         = require('sdk/l10n'),
    self        = require('sdk/self'),
    sPrefs      = require('sdk/simple-prefs'),
    sStorage    = require('sdk/simple-storage'),
    tabs        = require('sdk/tabs'),
    hotkey      = require('sdk/hotkeys'),
    pageMod     = require('sdk/page-mod'),
    panel       = require('sdk/panel'),
    toggleButton= require('sdk/ui/button/toggle');

  return {
    _               : _,
    self            : self,
    sPrefs          : sPrefs,
    sStorage        : sStorage,
    tabs            : tabs,
    hotkey          : hotkey,
    pageMod         : pageMod,
    panel           : panel,
    toggleButton    : toggleButton
  };
};

module.exports = Core;

var Interface = require('interface');

var qwantInterface = new Interface();

So the whole SDK is encapsulated in the Core function, which I export. Now, every other file will require the main.js and get the Core. For example, the interface.js :

'use strict';

var Core = require('main');

var core = new Core();

var Interface = function() {
  var   qButton = core.toggleButton.ToggleButton({
    id: 'toolbar_button_id',
    label: core._.get('toolbar_button_label'),
    icon: {
      '16': './img/logo-16.png',
      '32': './img/logo-32.png',
      '64': './img/logo-64.png'
    },
    onClick: displayPanel
  }),
  qPopup        = core.panel.Panel({
    width: 525,
    height: 175,
    contentURL: core.self.data.url('popup.html'),
    contentScriptFile: core.self.data.url('./js/popupScript.js')
  }),
  qHotkey       = core.hotkey.Hotkey({
    combo: 'alt-Q',
    onPress: displayPanel
  });

  function displayPanel() {
    if (qPopup.isShowing) {
      qPopup.hide();
      qButton.state('window', {
        checked: false
      });
    } else {
      qPopup.show({
        position: qButton
      });
    }
  }
};

module.exports = Interface;

And now, the Interface exported is required and executed at the bottom of the main.js as intended.