CDNIntlProvider

Install

yarn add @allthings/cdn-intl-provider

[!IMPORTANT] This package is pure ESM. It must be loaded via import and cannot be require()-ed from CommonJS. Consumers need to be on an ESM-capable toolchain (Node ≥ 22.13, Vite, Vitest, modern webpack/rollup, etc.).

This project uses following peer dependencies, which need to be installed in your project:

• react >= 19
• react-intl >= 10

[!NOTE] As of v8, this package is React-19-only — it tracks react-intl@10, which itself requires React 19. For React 17/18 (and react-intl 6/7), stay on the 7.x line.

Description

This is a thin wrapper around react-intls IntlProvider for Allthings purposes.

Example usage

import CDNIntlProvider from '@allthings/cdn-intl-provider'

// …

const App = () => (
  <CDNIntlProvider
    resourcePath="https://static.allthings.me"
    locale="de"
    project="app"
    stage="production"
    variation="default"
  >
    <Main />
  </CDNIntlProvider>
)

selectRelativeTimeUnit

Picks the most appropriate relative-time unit (second … year) for the difference between two dates, mirroring the deprecated selectUnit helper from @formatjs/intl-utils. The result can be passed straight into intl.formatRelativeTime:

import { selectRelativeTimeUnit } from '@allthings/cdn-intl-provider'
import { useIntl } from 'react-intl'

const LastSeen = ({ timestamp }) => {
  const intl = useIntl()
  const { value, unit } = selectRelativeTimeUnit(timestamp)

  return <span>{intl.formatRelativeTime(value, unit)}</span>
}

An optional third argument overrides the unit-rollover thresholds, e.g. selectRelativeTimeUnit(from, to, { hour: 12 }) switches from hours to days after 12 hours (defaults: 45 s → minute, 45 min → hour, 22 h → day, 5 days → week).

withIntl (legacy class components only)

[!WARNING] withIntl exists only as a bridge for class components that cannot call hooks, while they await their rewrite. Do not use it in new code — function components should call useIntl() from react-intl directly. Once the last class-component consumer is migrated (see APP-18299), withIntl will be removed.

import { IWithIntl, withIntl } from '@allthings/cdn-intl-provider'

class LegacyComponent extends React.Component<IProps & IWithIntl> {
  render() {
    return <span>{this.props.intl.formatMessage(messages.title)}</span>
  }
}

export default withIntl(LegacyComponent)

Releasing

Production release

!! DO NOT npm version !!

The project uses semantic-release which automates the whole package release workflow including:

• determining the next version number
• generating the release notes and publishing the package

This repository is also configured to squash-merge (see here).
When you squash merge, GitHub takes the title of the PR for the squash-merge's commit subject.

By choosing a proper PR title e.g. feat: my new feature your merged PR will trigger a new release.
See semantic-releases docs for available prefixes.

Development release

1. Create or check out the target branch from the commit you want to release.

2. Push the branch to trigger the CI pipeline:

   git push --force origin HEAD:beta   # or alpha / next

   The pipeline will automatically run semantic-release, which detects the branch name, bumps the version with the appropriate pre-release tag, and publishes it to npm under the matching dist-tag. Check Actions page for the release logs.

3. Install the pre-release in another project:

   yarn add -E @allthings/cdn-intl-provider@beta   # or @alpha / @next

   or use exact release (check versions on npm):

   yarn add -E @allthings/[email protected]

4. Promote to stable – once the pre-release is validated, create a PR from your target branch and proceed with Production release section.