Nonchalantly Perusing Magazines

    web-modules-utils

    0.1.19 • Public • Published

    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

    Keywords

    none

    Install

    npm i web-modules-utils

    DownloadsWeekly Downloads

    3

    Version

    0.1.19

    License

    ISC

    Last publish

    Collaborators

    • ross.myers
    • kirill.konshin