feat: add ph() and explicit labels for placeholders

[timofei-iatsenko]

Description

Adds a way to give an explicit name for placeholders in the messages. There are two syntaxes supported:

import {t} from "@lingui/core/macro";
t`Hello ${{name: getUsername()}}`

And with explicit ph helper:

import {ph, t} from "@lingui/core/macro";
t`Hello ${ph({name: getUsername()})}`

Shortcut syntax is also supported:

import {t} from "@lingui/core/macro";
const name = "World"
t`Hello ${{name}}`

In the JSX

import {Trans} from "@lingui/react/macro";

<Trans>Hello {{name: getUsername()}}</Trans>;

Note, that Children type for the Trans component was amended to allow passing an object. However, inner elements in the Trans will not allow that, and the only one way to use is a ph() helper macro, which basically a type helper to mitigate this issue.

import {ph} from "@lingui/core/macro";
import {Trans} from "@lingui/react/macro";

// ❌ this will not work, children of `strong` element does not accept an arbitrary object
<Trans>Hello <strong>{{name: getUsername()}}</strong></Trans>; 

// ✅ with a help of `ph()` macro it will work
<Trans>Hello <strong>{ph({name: getUsername()})}</strong></Trans>; 

PS

Actuallyeverythingg could be covered with ph() helper, but i've found syntax without it much easier to write in day to day routine. So i decided to left both of them. For most of cases just {name: getName()} and for cases where it doesn't work the ph.

The implementation is almost the same, to support both of the methods it's additional 10 lines of code.

Let me know what you think about it.

Types of changes

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Examples update

Fixes # (issue)

Checklist

• I have read the CONTRIBUTING and CODE_OF_CONDUCT docs
• I have added tests that prove my fix is effective or that my feature works
• I have added the necessary documentation (if appropriate)

[vercel]

@timofei-iatsenko is attempting to deploy a commit to the Crowdin Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

size-limit report 📦

Path	Size
./packages/core/dist/index.mjs	3.09 KB (0%)
./packages/detect-locale/dist/index.mjs	723 B (0%)
./packages/react/dist/index.mjs	1.65 KB (0%)
./packages/remote-loader/dist/index.mjs	7.26 KB (0%)

[codecov]

Codecov Report

Attention: Patch coverage is 65.00000% with 7 lines in your changes missing coverage. Please review.

Project coverage is 75.80%. Comparing base (dd43fb0) to head (593e1e7).
Report is 150 commits behind head on next.

Files with missing lines	Patch %	Lines
...ckages/babel-plugin-lingui-macro/src/macroJsAst.ts	53.33%	3 Missing and 4 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             next    #2092      +/-   ##
==========================================
- Coverage   76.66%   75.80%   -0.87%     
==========================================
  Files          81       87       +6     
  Lines        2083     2389     +306     
  Branches      532      626      +94     
==========================================
+ Hits         1597     1811     +214     
- Misses        375      459      +84     
- Partials      111      119       +8     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

---

🚨 Try these New Features:

• Flaky Tests Detection - Detect and resolve failed and flaky tests
• JS Bundle Analysis - Avoid shipping oversized bundles

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
js-lingui	✅ Ready (Inspect)	Visit Preview	Nov 25, 2024 7:52am