cutsin / template-string-i18n

Template String I18n

I18n using template strings with auto save/load translate documents. Inspired by jaysoo.ca.

Installation

yarn add template-string-i18n --dev
# or
npm i template-string-i18n --save-dev

Example

myproject/languages/en-US.json

{ "Hi {0}": "Hello {0}" }

myproject/app.js

let foo = 'bar'
__`Hi ${foo}`
// >> Hello bar

myproject/tmpl.pug

h1= __`Hi ${foo}`
//- >> <h1>Hello bar</h1>

Usage

Edit package.json

{
  "languages": [
    "en-US",
    "de-AT",
    "zh-Hans-CN"
  ]
}

for Babel & Eslint

.babelrc

{
  // Babel 6
  "plugins": ["transform-runtime", "template-string-i18n"]
  // Babel 7
  "plugins": ["@babel/transform-runtime", "module:template-string-i18n"]
}

.eslintrc.js

module.exports = {
  ...
  globals: { __: false }
}

for Pug

const pug = require('pug')
console.log(pug.renderFile('tmpl.pug', { __: i18n.__ }))

for vue-loader

var i18n = require('template-string-i18n/lib/i18n')
...
module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: ...,
          // for pugjs
          template: {
            __: i18n.__
          }
        }
      }
    ]
  }
}

How to build

1. Modify your webpack config

   	var lang = (process.env.LANG || process.env.LOCALE || '')
   	if (lang) lang = '/' + lang
   	module.exports = {
   		/* ... */
   		build: {
   			index: path.resolve(__dirname, '../dist' + lang + '/index.html'),
   			assetsRoot: path.resolve(__dirname, '../dist' + lang)
   		}
   	}
   	```

2. Put [build.sample.sh] to your repo's root path

3. Run sh build.sample.sh