Install

@beforesemicolon/intl is designed to work in plain HTML, any framework, and tests.

You have two options:

• package manager + module usage
• CDN + browser globals

Both approaches expose the same runtime behavior.

Via package manager

1npm install @beforesemicolon/intl

Then initialize the runtime from your app entrypoint:

1import {2    initIntl,3    intlMsg,4    intlNumber,5} from '@beforesemicolon/intl'

Use any exported helpers directly from your bundler or ESM loader.

Via CDN (browser build)

1<script src="https://unpkg.com/@beforesemicolon/web-component/dist/client.js"></script>2<script src="https://unpkg.com/@beforesemicolon/intl/dist/client.js"></script>

When loaded this way, helper functions are available on window.BFS.INTL:

1<script>2  const { initIntl, intlMsg, intlNumber } = window.BFS.INTL3</script>

Minimal runtime setup

1<intl-locale locale="en-US" fallback-locale="en" src-dir="/locales">2    <intl-msg key="hello">Hello</intl-msg>3    <intl-number type="currency" currency="USD">1200</intl-number>4</intl-locale>

src-dir loads /locales/{locale}.json by default (/locales/en-US.json).

How to choose a setup

Common installation notes

• Use src for exact scoped files such as /locales/en.checkout.json.
• Use src-dir for directory-based locale files such as /locales/{locale}.json.
• locale omits => runtime falls back to document.documentElement.lang.
• fallback-locale defaults to en.
• Add update-document only on the app root locale scope.

Troubleshooting

If formatting is not updating:

• verify both scripts are loaded for browser/global mode
• verify your src/src-dir URLs return valid JSON
• ensure intl-locale exists in the DOM before components mount