Awesome

oc-client

Node.js client for OpenComponents

Node.js version: 6 required

Build status: Linux: | Windows:

Disclaimer: This project is still under heavy development and the API is likely to change at any time. In case you would find any issues, check the troubleshooting page.

API

• new Client()
• Client#init()
• Client#getComponentsInfo()
• Client#renderComponent()
• Client#renderComponents()

new Client(options)

It will create an instance of the client. Options:

Example:

var Client = require('oc-client');

var client = new Client({
  registries: { serverRendering: 'https://myregistry.com/'},
  components: {
    hello: '1.2.3',
    world: '~2.2.5',
    bla: ''
  }
});

Client#init(options, callback)

It will warmup the components that have been declared during the instantiation. Options:

Example:

var Client = require('oc-client');

var client = new Client({
  registries: { serverRendering: 'https://myregistry.com/'},
  components: {
    hello: '1.2.3'
  }
});

client.init({
  headers: { 'accept-language': 'en-US'}
}, function(error, responses){
  console.log(error);
  // => something like null or Error making request to registry

  console.log(responses);
  // => something like { hello: '<b>hello</b>'}
});

Client#getComponentsInfo(components, callback)

It will get the components' resolved versions for given requested versions. Useful for polling mechanism and caches management.

Example:

...
client.getComponentsInfo([{
  name: 'header',
  version: '1.X.X'
}], function(error, infos){
  console.log(infos);
  /* => [{
    componentName: 'header',
    requestedVersion: '1.X.X',
    apiResponse: {
      name: 'header',
      requestVersion: '1.X.X',
      type: 'oc-component',
      version: '1.2.4'
    }
  }] */
});

Client#renderComponent(componentName [, options], callback)

It will resolve a component href, will make a request to the registry, and will render the component. The callback will contain an error (if present), rendered html, and details (which includes headers).

Options:

Example:

...
client.renderComponent('header', {
  container: false,
  headers: {
    'accept-language': 'en-GB'
  },
  parameters: {
    loggedIn: true
  },
  timeout: 2
}, function(err, html, details){
  console.log(html, details.headers);
  // => "<div>This is the header. <a>Log-out</a></div>"
});

Client#renderComponents(components [, options], callback)

It will make a request to the registry, and will render the components. The callback will contain an array of errors (array of null in case there aren't any), an array of rendered html snippets, and an array of details. It will follow the same order of the request. This method will make 1 request to the registry + n requests for each component to get the views of components that aren't cached yet. After caching the views, this will make just 1 request to the registry.

Components parameter:

Options:

Example:

...
client.renderComponents([{
  name: 'header',
  parameters: { loggedIn: true }
}, {
  name: 'footer',
  version: '4.5.X'
}, {
  name: 'advert',
  parameters: { position: 'left' },
  render: 'client'
}], {
  container: false,
  headers: {
    'accept-language': 'en-US'
  },
  timeout: 3.0
}, function(errors, htmls, details){
  for ( let i; i < htmls.length; i++) {
    console.log(htmls[i], details[i].headers);
  }
  // => ["<div>Header</div>",
  //     "<p>Footer</p>",
  //     "<oc-component href=\"\/\/registry.com\/advert\/?position=left\"><\/oc-component>"]
});