lioness.js

/**
 * Lioness (ideas)
 *
 * A gettext suite for javascript, containing:
 *
 * - A gettext api
 * - React components and providers
 * - Babel plugin for extracting translations
 * - Gulp plugin for the same reason
 *
 * Sugar:
 *
 * - Redux reducer, action creators and state/dispatch prop mappers
 * - Webpack loader
 * - A bundled (or integrated) Transifex API
 */

import lioness from 'lioness';
import { en, sv } from './l10n/translations/messages';

lioness.config({
  defaultLocale: 'en',
  delimiter: {
    begin: '${',
    end: '}',
  },
});

lioness.addResources({ en, sv });

lioness.setLocale('sv');

// simple string
lioness.t("This is a message with ${something}", { something: "anything" });

// context
lioness.tc("Menu items", "Home");

// plural
lioness.tn("One new message", "${count} new messages", { count: numMessages });

// context + plural
lioness.tnc("Menu items", "All ${itemType} read", "${count} unread ${itemType}", { count: numUnread });


/**
 * 
 * lioness/react
 * 
 */

// translations in source
import {
  LocalizedMessage,
  LocalizedPlural,
} from 'lioness/react';

<LocalizedMessage
  message="This is a message with ${something}"
  something={someValue}
/>

<LocalizedPlural
  one="One comment on ${articleName}"
  other="${count} comments on ${articleName}"
  count={numComments}
  articleName={<Link to={article.uri}>{article.title}</Link>}
/>

// or with component template syntax
<LocalizedMessage
  message="Read more in [link:our wiki]"
  link={<a href="/wiki" />}
/>

// provider
import { LionessProvider } from 'lioness/react';

<LionessProvider locale={locale}>
  {/* ... */}
</LionessProvider>

// or without going the context route
import { tc } from './my-lioness-singleton.js';

const HomeLink = () =>
  <a href="/">{ tc('Menu items', 'Home') }</a>;


/**
 * 
 * lioness/redux
 * 
 */

// adding the reducer
import { lionessReducer } from 'lioness/redux';

const reducers = combineReducers({
  ...otherReducers,
  lioness: lionessReducer,
});

// setting locale
import { setLocale } from 'lioness/redux';
import store from './my-store.js';

store.dispatch(setLocale(locale)); // -> LIONESS/SET_LOCALE

// connecting state to component
import { connect } from 'react-redux';
import { localeSetter } from 'lioness/redux';

@mixin(localeSetter)
const ToSwedishButton = ({ onSelectLocale }) =>
  <button onClick={() => onSelectLocale('sv')}>Change to Swedish</button>;

// or
import { setLocale } from 'lioness/redux';

connect(
  null,
  (dispatch) => ({
    onSelectLocale: (locale) => dispatch(setLocale(locale)),
  })
)(ToSwedishButton);


/**
 * 
 * lioness/parser
 * 
 * Use a standalone js(x) ast parser
 * 
 */

import parser from 'lioness/parser';

const parseOpts = {
  outputFile: './l10n/source/messages.pot',
  functionNames: {
    t: ['msgid'],
    tn: ['msgid', 'msgid_plural'],
    tc: ['msgctx', 'msgid'],
    tnc: ['msgctx', 'msgid', 'msgid_plural'],
  },
  components: {
    LocalizedMessage: {
      context: 'msgctx',
      message: 'msgid',
      comment: 'comment',
    },
    LocalizedPlural: {
      context: 'msgctx',
      one: 'msgid',
      other: 'msgid_plural',
      comment: 'comment',
    },
  },
};

const compileOpts = {
  outputFile: './l10n/translations/messages.json',
};

parser.parse(code, parseOpts);   // source annotations -> gettext formatted json
parser.compile(code, compileOpts); // .po -> gettext formatted json (po2json?)

// cli for use in terminal or npm scripts
`lioness-parser --pot -o ./l10n/source/messages.pot './src/**/*.js'`


/**
 * 
 * lioness/gulp
 * 
 * Use lioness/parser
 * 
 */
import lioness from 'lioness/gulp';

gulp.src(['./src/**/*.js'])
  .pipe(lioness(/* parser options */))
  .pipe(gulp.dest('./l10n/source'));


/**
 * 
 * babel-plugin-lioness (lioness/babel)
 * 
 * Use lioness/parser
 * 
 */

{
  "plugins": [
    ["lioness", {
      // parser options
    }]
  ]
}


/**
 * lioness/transifex
 * 
 * Use standalone transifex lib
 */

import transfiex from 'lioness/transifex';

transifex.updateResource(...);
transifex.downloadTranslations(...);