Nourishing Pear Medley

    @shiftcode/translation-markup-loader
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.8 • Public • Published

    Translation-Markup-Loader

    Translating your project to multiple languages just became a lot easier! Meet Translation Markup Loader, a webpack loader that helps you organize your translations in a much cleaner way.

    Using Translation Markup, Translation Markup Loader let's you write your translations in yaml files, and use them as a JS objects in your code!

    Getting started

    Translation Markup Loader lets you organize your translation files in wichever way you want using yaml instead of JS, simplifying the organization of your files and eliminating all the JSON boilerplate, lets see some code:

    paymentTranslations.lang.yaml

    LANGUAGES:
      1: enUS
      2: ptBR
    
    CREDIT_CARD:
      NAME:
        1: Credit Card
        2: Cartão de Crédito
    

    Now, just import and use your translation as a plain JS object and integrate with any i18n library you want to.

    app.js

    import paymentTranslations from './paymentTranslations.lang.yaml';
    
    console.log(paymentTranslations);
    
    /*
    *{
    *  enUS: {
    *    CREDIT_CARD: {
    *      NAME: "Credit Card"
    *    }
    *  },
    *  ptBR: {
    *    CREDIT_CARD: {
    *      NAME: "Cartão de Crédito"
    *    }
    *  }
    *}
    */
    

    Languages Key

    At the top of each translation file there should be defined the LANGUAGES key, with all languages mapping. In the example above 1: enUs maps number 1 as language enUS and 2: ptBR maps number 2 as ptBR.

    Install

    NPM:

    npm install @shiftcode/translation-markup-loader

    Yarn:

    yarn add @shiftcode/translation-markup-loader

    Config

    Translation Markup Loader is a webpack loader, to learn about them go to loaders.

    To configure Translation Markup Loader you need to register a new loader and tell webpack wich type of files to look for.

    In this documentation we use the .lang.yaml extensions as a best practice to separate your regular .yaml from the translations files, but you could use just the .yaml extension in the regex.

    Webpack

    webpack.config.js

    module: {
      rules: [
        {
          test: /\.lang.yaml$/,
          use: "@shiftcode/translation-markup-loader"
         }
       ]
     }
    

    Vuejs

    When configuring with Vue.js you need to use the Vue config file to chain the webpack configuration and declare a new loader. (learn more)

    vue.config.js

    module.exports = {
      chainWebpack: config => {
        // Adding Translation Markup Loader
        config.module
          .rule("translations")
          .test(/\.lang.yaml$/)
          .use("@shiftcode/translation-markup-loader")
          .loader("@shiftcode/translation-markup-loader")
          .end();
      }
    };
    

    Nuxtjs

    In Nuxt.js you need modify you Nuxt config file to push a new rule to the webpack config in the build part of the configuration. (learn more)

    nuxt.config.js

    {
      // ... rest of config
    
       build: {
        /*
         ** You can extend webpack config here
         */
        extend(config, ctx) {
          config.module.rules.push({
            test: /\.lang.yaml$/,
            use: { loader: '@shiftcode/translation-markup-loader' },
          });
        },
       }
    
       // ... rest of config
    };
    

    Examples

    Multiple translations for some languages

    If you have the same translation for more than one language, you can separate their indexes by _ in the translation key so you don't have to repeat it.

    paymentTranslations.lang.yaml

    LANGUAGES:
      1: enUS
      2: ptBR
      3: esES
    
    CREDIT_CARD:
      NAME:
        1: Credit Card
        2: Cartão de Crédito
        3: Tarjeta de Crédito
      FLAG:
        VISA:
          1_2_3: Visa
        MASTERCARD:
          1_2_3: Mastercard
        AMEX:
          1_2_3: American Express
        DINERS:
          1_2_3: Diners
    

    app.js

    import paymentTranslations from './paymentTranslations.lang.yaml';
    
    console.log(paymentTranslations);
    /*
    * {
    *  enUS: {
    *    CREDIT_CARD: {
    *      NAME: "Credit Card",
    *      FLAG: {
    *        VISA: "Visa",
    *        AMEX: "American Express",
    *        DINERS: "Diners",
    *        MASTERCARD: "Mastercard"
    *      }
    *    }
    *  },
    *  ptBR: {
    *    CREDIT_CARD: {
    *      NAME: "Cartão de Crédito",
    *      FLAG: {
    *        VISA: "Visa",
    *        AMEX: "American Express",
    *        DINERS: "Diners",
    *        MASTERCARD: "Mastercard"
    *      }
    *    }
    *  },
    *  esES: {
    *    CREDIT_CARD: {
    *      NAME: "Tarjeta de Crédito",
    *      FLAG: {
    *        VISA: "Visa",
    *        AMEX: "American Express",
    *        DINERS: "Diners",
    *        MASTERCARD: "Mastercard"
    *      }
    *    }
    *  }
    * }
    */
    

    Keywords

    none

    Install

    npm i @shiftcode/translation-markup-loader

    DownloadsWeekly Downloads

    35

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    7.32 kB

    Total Files

    6

    Last publish

    Collaborators

    • cainaf
    • gutoverz
    • marioch