Skip to content

CRAFT-2029- Migrate from react-intl to compile-time message parsing#841

Merged
valoriecarli merged 36 commits intomainfrom
CRAFT-2029-react-intl-ya-gone
Jan 16, 2026
Merged

CRAFT-2029- Migrate from react-intl to compile-time message parsing#841
valoriecarli merged 36 commits intomainfrom
CRAFT-2029-react-intl-ya-gone

Conversation

@valoriecarli
Copy link
Collaborator

@valoriecarli valoriecarli commented Dec 22, 2025

This PR migrates Nimbus from runtime react-intl to compile-time message parsing using @internationalized/string.

Before: Components used react-intl's useIntl() hook at runtime to format messages:

import { useIntl } from "react-intl";
import { messages } from "./alert.i18n";

const intl = useIntl();
const label = intl.formatMessage(messages.dismiss);

After: Components use useLocalizedStringFormatter() hook with pre-compiled message dictionaries

import { useLocalizedStringFormatter } from "@/hooks";
import { alertMessagesStrings } from "./alert.messages";

const msg = useLocalizedStringFormatter(alertMessagesStrings);
const label = msg.format("dismiss");

Key Changes:

1.) New build pipeline, 3-step compilation process (packages/i18n/scripts/)

  • split-by-component: Transforms Tx format → ICU format, groups by component
  • compile-component-messages: Compiles ICU messages → TS fns using @internationalized/string-compiler
  • generate-dictionaries: Generates *.messages.ts dictionary files for components
  1. New Hook (packages/nimbus/src/hooks/use-localized-string-formatter)
    Replaces useIntl() from react-intl
  • Uses LocalizedStringDictionary from @internationalized/string
  • Automatically handles locale normalization (e.g., de-DE → de)

3.) All components migrated over
4.) Storybook updated
5.) Documentation updated

@valoriecarli valoriecarli self-assigned this Dec 22, 2025
@changeset-bot
Copy link

changeset-bot bot commented Dec 22, 2025

🦋 Changeset detected

Latest commit: 289b7d5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
@commercetools/nimbus Major
@commercetools/nimbus-tokens Major
@commercetools/nimbus-icons Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel
Copy link

vercel bot commented Dec 22, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
nimbus-documentation Ready Ready Preview, Comment Jan 16, 2026 3:51pm
nimbus-storybook Ready Ready Preview, Comment Jan 16, 2026 3:51pm

Request Review

@valoriecarli valoriecarli added the WIP Work is ongoing, suggestions welcome label Dec 22, 2025
@valoriecarli valoriecarli force-pushed the CRAFT-2029-react-intl-ya-gone branch from 4f225a3 to b813b56 Compare January 16, 2026 15:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants