PubSweet

Developing components

Components are normal Node.js modules that follow some conventions to make them work well with PubSweet apps and tooling.

Components can contain either:

By convention, when PubSweet components are published to npm they use a name starting with pubsweet-component- to make them easy to find. However, this is not a requirement. In fact, components don't have to be published at all - they can live in a directory or a git repository.

Components use a specific format for the object exported from their main file, allowing PubSweet to load them at the appropriate time and place. The exported object can have the keys client or server to specify where the component lives.

Client components

For a client component, the value for the client key is an object which can have the following keys:

So the structure of a client extension's main file will look something like this:

module.exports = {
  client: {
    components: [
      () => someReactComponent,
      () => anotherReactComponent
    ],
    actions: () => arrayOfReduxActions,
    reducers: () => arrayOfReduxReducers
  }
}

Here's a real example from the Login component that affects the client:

module.exports = {
  client: {
    components: [
      () => require('./Login')
    ],
    actions: () => require('./actions'),
    reducers: () => require('./reducers')
  }
}

Server components

For a server component, the value for the server key is a function that returns another function that accepts an express app as its first argument.

The function can do whatever it likes with the app - for example:

A server extension's main file looks like this:

module.exports = {
  server: () => app => {
    app.get('someroute', someRouteFunction)
    app.use(someMiddleware)
  }
}

Here's a real example from the Password Reset Backend component:

module.exports = {
  server: () => app => require('./PasswordResetBackend')(app)
}

Next let's talk about being part of the community