JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="https://angularlight.org/bin/alight_basis_0.14.last.min.js"></script>
<div al-app="app">
  <label>
    <input type="radio" name="lang" @click.noprevent="setLang('en')" /> en
  </label> <br/> <label>
    <input type="radio" name="lang" @click.noprevent="setLang('ru')" /> ru
  </label> <br/> <label>
    <input type="radio" name="lang" @click.noprevent="setLang('fr')" /> fr
  </label> <br/>
  Count watchers: {{#watchCounter}}
  <hr/>
  
  <b>{{^ Some header}}</b> <br/>
  {{^ Test of translation}}

</div>

JavaScript

alight.ctrl.app = (scope) => {
	scope.setLang = setLanguage;
}

let translation = {
	'ru': {
  	'Some header': 'Какой-то заголовок',
  	'Test of translation': 'Тест перевода'
  },
	'fr': {
  	'Some header': 'Certains en-tête',
  	'Test of translation': 'Essai de traduction'
  }
}

let lang = 'en';
let callbacks = [];

function setLanguage(code) {
	lang = code;
	for(let fn of callbacks) fn();
};

alight.text['^'] = function(_, text, scope, env) {
	text = text.trim();
	let setter = () => {
  	let result = (translation[lang] || {})[text] || text;
  	env.setterRaw(result);
  }
	callbacks.push(setter);
  setter();
};

alight.text.watchCounter = function(_, __, scope, env) {
	setInterval( () => {
		env.setterRaw('' + this.scan().total)
  }, 500);
};