i18n Pattern

app.jsx

// Devs can easily use English strings that will be translated if necessary
function DeleteButton() {
  function prompt() {
    alert(intl('Are you sure you want to delete gateway?'))
  }
  
  return(
    <button onclick={prompt}>
      {intl('Delete Gateway')}
    </button>
  )
}

function intl(s) {
  // get hash key from keys.js
  const keys = ...
  const key = keys[s]

  // determine which locale-*.js file to use
  const locale = ...
  return locale[key]
}

keys.js

// this is automatically built from scanning code. English is main language. Unique hash IDs could be created
{
  'Are you sure you want to delete gateway?': 'af2s2c',
  'Delete Gateway': '2c2a98'
}

lang-spanish.js

// translation teams would use software to know when new keys are needed/added and provide values
{
  'af2s2c': 'Está seguro que que borrar el gateway?'
  '2c2a98' : 'Borrar Gateway'
}