Installation

npm install web-modules-utils

Webpack

All parameters are optional.

// webpack.config.js

module.exports = require('web-modules-utils/utils/webpack').createConfig({
    version: Date.now(),
    publicPath: '', // default is for hashHistory, set to '/' if you want to use browserHistory
    srcPath: './src',
    langPath: './src/lang', // default: srcPath + /lang
    skinPath: './src/skin', // default: srcPath + /skin
    appPath: './src/app', // default: srcPath + /app
    entry: { // default is calculated
        'js/index': [
            './src/app/index.js',
            './src/favicon.ico',
            './src/index.html'
        ]
    },
    test: false, // use when doing tests
    port: 3000,
    skipGenerateLoaders: false, // don't generate i18n and skin loaders
    simpleStyles: false, // by default styles are usable, set to true to make simple requires
    babel: {
        include: [],
        exclude: [],
        useRuntime: false // extract babel runtime code (interopRequire, classes) into reusable modules
    },
    appCachePlugin: false,
    htmlPlugin: false,
    extractCss: false, // extract CSS from all chunks if project does not have skins, it's experimental
    commonChunk: [] // extract modules in a common chunk
});

Recommended minimal setup:

module.exports = require('web-modules-utils/utils/webpack').createConfig({
    version: require('./package.json').version
});

Karma

// karma.conf.js
module.exports = function(config) {

    var webpackConfig = require('web-modules-utils/utils/webpack').createConfig({
        test: true,
        skipGenerateLoaders: true,
        simpleStyles: true
    });

    config.set(require('web-modules-utils/utils/karma').createConfig(webpackConfig));

};

Initial configuration

import {setConfig} from "web-modules-utils";

setConfig({
    brandId: 1210,
    userLanguage: getLocale(),
    brandDisplayName: 'RingCentral',
    shortBrandName: 'RC'
});

After that application may access configuration at any time:

import {getConfig} from "web-modules-utils";
console.log(getConfig().brandId);

Skins

import {setSkinLoader, loadSkin, setConfig} from "web-modules-utils";
import skinLoader from "src/skin/loader"; // this file is generated by Webpack utility

// Step 1. Set the brand and all other configuration (langage, etc.)
setConfig({
    //...
    brandId: 1210
});

// Step 2. Set the loader
setSkinLoader(skinLoader);

// Step 3. Load skin, promise is returned, but it's optional to handle it
loadSkin();

Localization

Where should I store localized strings?

The root namespace for all localization files is src/app/lang. All strings are grouped by relevance into packages.

How to include localization?

Boilerplate v2.0

You need to include localization only once before you bootstrap the entire application:

import {setStringsLoader, loadStrings, getStrings, translate, setConfig} from "web-modules-utils";
import stringsLoader from "src/lang/loader"; // this file is generated by Webpack utility

// Step 1. Set the language and all other configuration (brand, etc.)
setConfig({
    //...
    userLanguage: 'en_US'
});

// Step 2. Set the loader
setStringsLoader(stringsLoader);

// Step 3. Load strings
loadStrings().then(() => {
    // Now it is safe to use localization
    alert(translate(getStrings().SOME_KEY));
});

Boilerplate v1.0 (Service Web)

Always include en_US version of file. Url of the file will be dynamically rewritten during runtime.

var lang = require('../../lang/common/index-en_US');

How to use localized strings?

Use the translate function after strings were loaded:

import {getStrings, translate} from "web-modules-utils";
alert(translate(getStrings().TOKEN, {foo: 'foo'}));

What is the structure of strings file?

The structure is a simple object exported as usual:

/** @namespace SOME_NAME_SPACE */
export default {
    ALERT: "Alert",
    CONFIRMATION: "Confirmation",
    // ICU Message Format is used to tokenize the string
    MF_TEST: "You have received {NUM, plural, one{# call} other{# calls}} today \
              Much wow, such new line",
    TOKENIZED: "A string with {TOKEN}",
    // If the same token can have different value in different brands
    COMPANY_NAME: {
        0: 'WhiteLabel',
        1210: 'RingCentral',
        2222: 'SomethingNew'
    }
};

Please note that SOME_NAME_SPACE is used in conjunction with getStrings():

import {getStrings} from "web-modules-utils";
console.log(getStrings().SOME_NAME_SPACE.ALERT); // will output Confirmation