Skip to content

Craft 2055 react intl ya really gone!#976

Closed
valoriecarli wants to merge 17 commits intomainfrom
CRAFT-2055-react-intl-ya-really-gone!
Closed

Craft 2055 react intl ya really gone!#976
valoriecarli wants to merge 17 commits intomainfrom
CRAFT-2055-react-intl-ya-really-gone!

Conversation

@valoriecarli
Copy link
Collaborator

@valoriecarli valoriecarli commented Jan 27, 2026

  • This PR completes the react-intl@internationalized/string migration started in CRAFT-2029- Migrate from react-intl to compile-time message parsing #841.
  • The final react-intl dep is removed, all defineMessages imports are eliminated & @formatjs/cli is replaced with a custom extraction script.
  • Generated i18n files (144 total) are now gitignored to follow best practices for generated code.
  • All documentation has been updated to fix incorrect library references & clarify the new compile-time i18n architecture.

TL;DR: react-intl is completely gone, extraction is now custom & cleaner, generated files are gitignored & all docs have been updated.


Major Change:

Created custom extraction script (packages/i18n/scripts/extract-messages) to remove the react-intl devDep.
.i18n files are now plain TS objects with no external dependencies. They exist solely for extraction purposes & are never imported by components at runtime.

We now:

  • Dynamically import .i18n files & read the messages export
  • Output Tx JSON format (packages/i18n/data/core.json)
  • Keep it simple, maintainable
  • No external CLI dependencies

Before:

import { defineMessages } from "react-intl";                                                                                                                                       
                                                                                                                                                                                    
 export const messages = defineMessages({                                                                                                                                           
   dismiss: {                                                                                                                                                                       
     id: "Nimbus.Alert.dismiss",                                                                                                                                                    
     description: "aria-label for the dismiss button",                                                                                                                              
     defaultMessage: "Dismiss",                                                                                                                                                     
   },                                                                                                                                                                               
 });   

After:

  export const messages = {                                                                                                                                                          
    dismiss: {                                                                                                                                                                       
      id: "Nimbus.Alert.dismiss",                                                                                                                                                    
      description: "aria-label for the dismiss button",                                                                                                                              
      defaultMessage: "Dismiss",                                                                                                                                                     
    },                                                                                                                                                                               
  };                                                                         

Other goodies in the PR include (but not limited to):

  • Gitignore generated i18n Files (144 files)
  • Tracked down all references to i18n (documents, templates, etc) & made updates accordingly.
  • Updated i18n charts & converted to to Mermaid format.

@valoriecarli valoriecarli self-assigned this Jan 27, 2026
@valoriecarli valoriecarli added the WIP Work is ongoing, suggestions welcome label Jan 27, 2026
@changeset-bot
Copy link

changeset-bot bot commented Jan 27, 2026

🦋 Changeset detected

Latest commit: 88d39f6

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 Jan 27, 2026

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

Project Deployment Review Updated (UTC)
nimbus-documentation Ready Ready Preview, Comment Jan 29, 2026 5:39pm
nimbus-storybook Ready Ready Preview, Comment Jan 29, 2026 5:39pm

Request Review

Comment on lines +193 to +194
packages/nimbus/src/components/**/intl/
packages/nimbus/src/components/**/*.messages.ts
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@misama-ct, thanks for the suggestion.

valoriecarli and others added 11 commits January 29, 2026 11:34
Update spec documentation to clearly state that NimbusI18nProvider is for
date/number formatting (React Aria I18n), not UI text translation.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Fix syntax error in variable message example. The message key must be
properly quoted and variables passed as second parameter.

Before: msg.format("pageInfo, { current: 1, total: 10 }");
After:  msg.format("pageInfo", { current: 1, total: 10 });

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
@valoriecarli
Copy link
Collaborator Author

@claude Please do an initial review

@claude
Copy link

claude bot commented Jan 29, 2026

Claude encountered an error —— View job

Invalid branch name: "CRAFT-2055-react-intl-ya-really-gone!". Branch names must start with an alphanumeric character and contain only alphanumeric characters, forward slashes, hyphens, underscores, or periods.

I'll analyze this and get back to you.

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.

1 participant