Cookbook

Multilingual recipes and translation examples for LokaScript.
For general hyperscript recipes (toggle, show/hide, forms, fetch),
see the hyperfixi cookbook.

Translating Code Between Languages

Use @lokascript/semantic to translate hyperscript code programmatically.
It parses to a semantic node before rendering, so the output re-parses in
the target language and the round trip is lossless:

import { translate } from '@lokascript/semantic';

// English → Japanese (SOV word order)
translate('toggle .active', 'en', 'ja');
// → '.active を 切り替え'

// English → Spanish (SVO word order)
translate('toggle .active', 'en', 'es');
// → 'alternar .active'

// Japanese → English
translate('.active を 切り替え', 'ja', 'en');
// → 'toggle .active'

To translate one command into every supported language at once:

import { getAllTranslations } from '@lokascript/semantic';

getAllTranslations('toggle .active', 'en');
// { en: 'toggle .active', ja: '.active を 切り替え',
//   es: 'alternar .active', ar: 'بدّل .active', ... }

Multilingual Toggle

The same toggle pattern in multiple languages:

English (SVO)

on click toggle .active on me

Japanese (SOV)

クリック で 私 の .active を 切り替え

Spanish (SVO)

al hacer clic alternar .active en mi

Arabic (VSO)

عند النقر بدّل .active على نفسي

Adapter Plugin: Adding a Language

With the @lokascript/hyperscript-adapter, add multilingual
support to existing _hyperscript projects using data-lang:

<!-- Load _hyperscript + Spanish adapter -->
<script src="https://unpkg.com/hyperscript.org"></script>
<script src="https://unpkg.com/@lokascript/hyperscript-adapter@2.10.0/dist/hyperscript-i18n-es.global.js"></script>

<!-- Write hyperscript in Spanish -->
<button _="on click alternar .active" data-lang="es">
  Alternar activo
</button>

<!-- English still works unchanged -->
<button _="on click toggle .active on me">
  Toggle Active
</button>

Language Detection

There is no built-in detector, but canParse() gives you one in a line —
score the code against the languages your app actually supports:

import { canParse, getSupportedLanguages } from '@lokascript/semantic';

function detect(code, candidates = getSupportedLanguages()) {
  return candidates.find((lang) => canParse(code, lang)) ?? null;
}

detect('クリック で 私 の .active を 切り替え'); // → 'ja'
detect('on click toggle .active on me');        // → 'en'

Narrow candidates to the languages you ship. Scoring all 24 on every call
is wasteful, and unrelated languages can occasionally accept the same input.

Recipes

  • Toggle Classes — every way to add, remove, and
    toggle a class, and the same handler in four languages

More Resources

Suggest a change to this page