How to use pug-plugin with i18next

[microlabig]

Good afternoon, I have a question about using pug-plugin with i18next.

The bottom line is this: I have the following file structure:

- source
  - locales
    - en_US.json
    - de_DE.json
  - pug 
    - index.pug
    - about.pug

there is an assembly on webpack 5:

import fs from "fs";
import PugPlugin from "pug-plugin";
import i18next from "i18next";

// get translates
const enLangJSON = fs.readFileSync(`/source/locales/en_US.json`, {
  encoding: "utf-8",
});
const deLangJSON = fs.readFileSync(`/source/locales/de_DE.json`, {
  encoding: "utf-8",
});
// i18next setup
i18next.init({
  lng: "en",
  fallbackLng: "en",
  supportedLngs: ["de", "en"],
  resources: {
    en: { translation: JSON.parse(enLangJSON) },
    de: { translation: JSON.parse(deLangJSON) },
  },
});

// config
export default {
  entry: {
    index: '/source/pug/index.pug',
    about: '/source/pug/about.pug'
  },

  output: {
    path: '/dist',
    publicPath: "/",
  },

  module: {
    rules: [
      {
        test: /\.pug$/,
        use: [
          {
            loader: PugPlugin.loader,
            options: {
              data: {
                t: key => i18next.t(key), // translates
                setLanguage: lng => i18next.changeLanguage(lng), // set language
              },
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new PugPlugin({ pretty: true }),
  ],
};

How to get the following file structure using pug-plugin + i18next:

- dist
  - en_US          <-- htmls with en_US translates
    - index.html
    - about.html
  - de_DE          <-- htmls with de_DE translates
    - index.html
    - about.html

?

Thank you in advance!

[webdiscus]

Hi @microlabig,
thanks for interesting use case. I will create an example repo for your case.

[microlabig]

Thanks!

[webdiscus]

@microlabig

Please update pug-plugin to v4.3.3.

To create multi-language pages you can pass into Pug a variable, e.g. lang to set language in template.
To create file structure, define file path as key in entry:

webpack config

entry: {
  // en pages
  'en_US/index': 'src/views/pages/home/index.pug?lang=en',  // => dist/en_US/index.html
  'en_US/about': 'src/views/pages/about/index.pug?lang=en', // => dist/en_US/about.html

  // de pages
  'de_DE/index': 'src/views/pages/home/index.pug?lang=de',  // => dist/de_DE/index.html
  'de_DE/about': 'src/views/pages/about/index.pug?lang=de', // => dist/de_DE/about.html
},

In pug template are available passed data via PugPlugin.loader option data and via URL query in entry:

//- `lang` is variable from URL query
    `setLanguage()` and `t()` are functions from option `data`
- setLanguage(lang)

h1= t`Hello Pug!`

Тo make HMR work for translation files, the i18next module must be initialised directly in Pug template.
Create a Pug file for translation, e.g. locales.pug:
locales.pug

-
  //- variable from URL query
  lang = lang || 'en'

  const i18next = require('i18next')

  //- translate function
  const t = (key) => i18next.t(key)

  //- initialize i18next
  i18next.init({
    lng: 'en',
    fallbackLng: 'en',
    supportedLngs: ['de', 'en'],
    resources: {
      en: { translation: require('Locales/en_US.json') },
      de: { translation: require('Locales/de_DE.json') },
    },
  });

  //- set language
  i18next.changeLanguage(lang)

Then you can include this file in your base layout file, e.g.:

//- Load and Initialize translations
include ../partials/locales

html(lang='en' dir='ltr')
  head
  body
    h1= t`Hello Pug!`

See please the Multi-language pages example and their source.

[microlabig]

Perfect work!

[microlabig]

@webdiscus
I noticed one thing - it does not work with HMR of webpack when changing or adding translations. I tried to connect both inside webpack config and as shown in pug with i18next.reloadResources()

Is it possible how to reload translations or is it better to refer to i18next team?

[webdiscus]

@microlabig
First I need to research the problem, then I'll let you know.

[microlabig]

Ok, perhaps this is also due to the fact that if, for example, you create a new SCSS file, then the plugin does not apply it until you restart the webpack

[webdiscus]

@microlabig

Тo make HMR work for translation files, the i18next module must be initialised directly in Pug template.
See please my example (updated) with locales.pug above and source of Multi-language pages example (updated). In this example works HMR for translations files. Try it.

Note: HMR not works for files loaded in Webpack config, because translation files are loaded once and cached.

[microlabig]

Yes, I tried to use i18next-fs-backend - nothing happened. Success was when I registered inside the pug file. Thanks!