To help you get started, we've collected the most common ways that @ovh-ux/component-rollup-config is being used within popular public projects.

ovh / manager / packages / manager / modules / server-sidebar / rollup.config.js View on Github

import path from 'path';
import rollupConfig from '@ovh-ux/component-rollup-config';

const config = rollupConfig(
  {
    input: 'src/index.js',
  },
  {
    lessTildeImporter: {
      paths: [
        path.resolve(__dirname, 'node_modules'),
        path.resolve(__dirname, '../../../../node_modules'),
      ],
    },
  },
);

const outputs = [config.es()];

// if (process.env.BUILD === 'production') {

View more ways to use @ovh-ux/component-rollup-config

Component Rollup Configuration

Extensible Rollup configuration to build OVHcloud components.

Install

$ yarn add -D @ovh-ux/component-rollup-config

Usage

import configGenerator from '@ovh-ux/component-rollup-config';

// generate your configuration with global options
const config = configGenerator({
  input: './src/my-library.js',
});

// export desired list of target(s)
export default [
  // ES6 module
  config.es(),

  // CommonJS
  config.cjs(),

  // UMD (Universal Module Definition)
  config.umd({
    output: {
      globals: {
        angular: 'angular',
        jquery: '$',
      },
    },
  }),

  // IIFE (Immediately Invoked Function Expression)
  config.iife({
    output: {
      globals: {
        angular: 'angular',
        jquery: '$',
      },
    },
  }),
];

Plugins

This configuration provides some plugins to facilitate loading and importing of ovh translations ; as well as a plugin to facilitate less imports.

translation-ui-router

Handle translations property in ui-router state declaration to dynamically load ovh translations when state is resolved.

// will import `./translations` and `../common/translations` during ui-router state resolve
$stateProvider.state('my-state', {
  url: 'some-template.html',
  translations: ['.', '../common'],
});

translation-inject

Handle @ngTranslationsInject comment in order to facilitate dynamic import of ovh translations.

The format is as follows: @ngTranslationsInject{:format} [translations]

translations is multiple strings separated by a space

// Load .translations and ../common/translations in json
angular
  .module('myModule', [])
  .run(/* @ngTranslationsInject ./translations ../common/translations */);

// Load .translations and ../common/translations in json
angular
  .module('myModule', [])
  .run(/* @ngTranslationsInject:json ./translations ../common/translations */);

import angular from 'angular';

class MyController {
  /* @ngInject */
  constructor($injector) {
    this.$injector = $injector;
  }

  $onInit() {
    this.isLoading = true;
    return this.$injector
      .invoke(/* @ngTranslationsInject ./translations ./some/other/path */)
      .finally(() => {
        this.isLoading = false;
      });
  }
}

angular.module('myModule', []).controller('myController', MyController);

Performance

Regarding the translations related plugins, it's possible to only process translations files for a single language. Please refer to the example below. This can be useful if you want faster builds in your development environment for example.

import configGenerator from '@ovh-ux/component-rollup-config';

const config = configGenerator(
  {
    input: './src/my-library.js',
  },
  {
    translations: {
      languages: ['fr_FR', 'en_EN'], // only FR and EN translations will be provided
    },
  },
);

export default [config.cjs()];

You can also specify languages without modifying your rollup config by using the cli and passing the LANGUAGES environment variable. See the example below.

$ rollup -c --environment LANGUAGES:fr_FR
$ rollup -c --environment LANGUAGES:fr_FR-en_GB-en_US

Test

$ yarn test

Contributing

Always feel free to help out! Whether it's filing bugs and feature requests or working on some of the open issues, our contributing guide will help get you started.

License

BSD-3-Clause © OVH SAS