Network Powering Makers


    0.1.0 • Public • Published

    Component Approach To Internationalization

    The approach to build locales from different application volumes or its components or from external libraries including the application execution acceleration with minimize download time and amount of traffic by loading only the required locale. This is independent from internationalization library or framework. It is only building process and possible to choose the favorite internationalization system.

    Internationalization data structure

    Generalized internationalization requiremens:

    • internationalization data organized in set files where each file has the same name as locale name
    • extension of files must meet the conditions:
      • must be unique within directory tree designated to search for locale files by pattern to exclude intersetion with another non locale files for example 'intl' or 'i18n'
      • may (but not necessary) be equal extension associated with file content type
    • locale data structure in each file recommends meeting the condition:
      • all the data lie under the top-level key with name equal locale name
      • application data lie under the app key (which lies under top level key)
      • data of library component (and data of application component which may be extracted to independent package) lie under key based on domain name or based on registered package name in package repository
    • presence of another keys at top level different from locale name is not allowed, recommended using app top level key for that; this mean using of legacy locale data with code require refactoring to ensure that there is no collision

    Example locale data

    Example of application data structture for en locale

    # application file: en.yaml (or en.intl or en.i18n) 
        title: The title
        content: Lorem ipsum dolor sit amet

    Or for library component package may be package name based

    # library file: en.yaml (or en.intl or en.i18n) 
          title: The component

    or domain based

    # library file: en.yaml (or en.intl or en.i18n) 
          title: The title
    • The additional helper function or component encapsulating root of tree may be useful. There is no refactoring required if component exctraction to external library is perfomed.
    • Also same additional helper function or component is useful for some additional text preprocessing such as markdown or some else.


    Build system may do flattenization of structure that lies under the top level local-named key to simplify using keys in code. So above structure after joining and flattenization may be like this (in yaml syntax):

    # application file: en.yaml 
      app.title: The title
      app.content: Lorem ipsum dolor sit amet
      package-name.component.title: The component
      org.domain.component.title: The title


    The build tool designed according to this approach is implemented in the form of a plugin intl-webpack-plugin for node js webpack module bundler.

    Demonstration application

    To demonstarate how to it works and how to build and configure application and libraries the demonstartion application and library with minimal amount of dependencies is created. An example of an application is

    The references to source code repository:




    npm i component-intl

    DownloadsWeekly Downloads






    Last publish


    • oklas