@nkzw/vite-plugin-fbtee 3.1.0 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +30 -50
- package/index.d.ts +1 -4
- package/package.json +12 -12
package/README.md
CHANGED
|
@@ -10,14 +10,14 @@ const Greeting = ({ name }) => (
|
|
|
10
10
|
);
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
_fbtee_ is a modern continuation of Facebook's `fbt`, rebuilt for TypeScript, ESM, React 19, Vite,
|
|
13
|
+
_fbtee_ is a modern continuation of Facebook's `fbt`, rebuilt for TypeScript, ESM, React 19, Vite, Next.js, and Oxc.
|
|
14
14
|
|
|
15
15
|
## Features
|
|
16
16
|
|
|
17
17
|
- **Inline translations for Better Developer Experience:** Embed translations directly into your code. No need to manage translation keys or wrap your code with `t()` functions. **fbtee** uses a compiler to extract strings from your code and prepare them for translation providers.
|
|
18
18
|
- **Proven in Production:** Built on Facebook's `fbt`, with over a decade of production usage serving billions of users, plus years in production at [Athena Crisis](https://athenacrisis.com).
|
|
19
19
|
- **Optimized Performance with IR:** Compiles translations into an Intermediate Representation (IR) for extracting strings, then optimizes the runtime output for performance.
|
|
20
|
-
- **Easy Setup:** Quick integration with Vite,
|
|
20
|
+
- **Easy Setup:** Quick integration with Vite, Next.js, Oxc, and Expo.
|
|
21
21
|
|
|
22
22
|
## Getting Started
|
|
23
23
|
|
|
@@ -62,52 +62,31 @@ export default defineConfig({
|
|
|
62
62
|
});
|
|
63
63
|
```
|
|
64
64
|
|
|
65
|
-
###
|
|
65
|
+
### Next.js
|
|
66
66
|
|
|
67
|
-
|
|
67
|
+
Next.js projects should use the native Oxc plugin and the CLI:
|
|
68
68
|
|
|
69
69
|
```bash
|
|
70
|
-
npm install -D @nkzw/
|
|
70
|
+
npm install -D @nkzw/next-plugin-fbtee @nkzw/fbtee-cli
|
|
71
71
|
```
|
|
72
72
|
|
|
73
|
-
|
|
73
|
+
Wrap your Next configuration:
|
|
74
74
|
|
|
75
75
|
```js
|
|
76
|
-
|
|
77
|
-
presets: ['@nkzw/babel-preset-fbtee'],
|
|
78
|
-
};
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
### SWC
|
|
82
|
-
|
|
83
|
-
Install the SWC runtime compiler and the CLI:
|
|
84
|
-
|
|
85
|
-
```bash
|
|
86
|
-
npm install -D @nkzw/swc-plugin-fbtee @nkzw/fbtee-cli
|
|
87
|
-
```
|
|
88
|
-
|
|
89
|
-
For Next.js SWC plugins:
|
|
76
|
+
import withFbtee from '@nkzw/next-plugin-fbtee';
|
|
90
77
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
export default {
|
|
95
|
-
experimental: {
|
|
96
|
-
swcPlugins: [
|
|
97
|
-
[
|
|
98
|
-
'@nkzw/swc-plugin-fbtee',
|
|
99
|
-
createFbteePluginOptions({
|
|
100
|
-
fbtCommon: {
|
|
101
|
-
Accept: 'Button label for accepting terms',
|
|
102
|
-
},
|
|
103
|
-
fbtEnumManifest: {},
|
|
104
|
-
}),
|
|
105
|
-
],
|
|
106
|
-
],
|
|
78
|
+
export default withFbtee({
|
|
79
|
+
fbtCommon: {
|
|
80
|
+
Accept: 'Button label for accepting terms',
|
|
107
81
|
},
|
|
108
|
-
}
|
|
82
|
+
fbtEnumManifest: {},
|
|
83
|
+
})({
|
|
84
|
+
// Your Next.js configuration.
|
|
85
|
+
});
|
|
109
86
|
```
|
|
110
87
|
|
|
88
|
+
The plugin runs the native Oxc transform before Next.js compilation. It works with the default Turbopack compiler and with `next build --webpack`, so it does not require Babel or custom compiler configuration.
|
|
89
|
+
|
|
111
90
|
### Low-level Oxc Transform
|
|
112
91
|
|
|
113
92
|
For custom build-system integrations, install the native Oxc transform:
|
|
@@ -159,10 +138,7 @@ Use `fbt()` outside JSX:
|
|
|
159
138
|
```tsx
|
|
160
139
|
import { fbt } from 'fbtee';
|
|
161
140
|
|
|
162
|
-
const title = fbt(
|
|
163
|
-
'No tasks yet',
|
|
164
|
-
'Empty state title when a project has no tasks',
|
|
165
|
-
);
|
|
141
|
+
const title = fbt('No tasks yet', 'Empty state title when a project has no tasks');
|
|
166
142
|
```
|
|
167
143
|
|
|
168
144
|
Use `fbs()` when you need a plain string:
|
|
@@ -170,9 +146,7 @@ Use `fbs()` when you need a plain string:
|
|
|
170
146
|
```tsx
|
|
171
147
|
import { fbs } from 'fbtee';
|
|
172
148
|
|
|
173
|
-
<input
|
|
174
|
-
placeholder={fbs('Search projects', 'Project search input placeholder')}
|
|
175
|
-
/>;
|
|
149
|
+
<input placeholder={fbs('Search projects', 'Project search input placeholder')} />;
|
|
176
150
|
```
|
|
177
151
|
|
|
178
152
|
## Dynamic Content
|
|
@@ -202,12 +176,7 @@ Use `<fbt:plural>` when a count controls grammar. _fbtee_ handles locale-specifi
|
|
|
202
176
|
```tsx
|
|
203
177
|
<fbt desc="Inbox unread count">
|
|
204
178
|
You have{' '}
|
|
205
|
-
<fbt:plural
|
|
206
|
-
count={count}
|
|
207
|
-
many="unread messages"
|
|
208
|
-
name="unreadCount"
|
|
209
|
-
showCount="yes"
|
|
210
|
-
>
|
|
179
|
+
<fbt:plural count={count} many="unread messages" name="unreadCount" showCount="yes">
|
|
211
180
|
an unread message
|
|
212
181
|
</fbt:plural>
|
|
213
182
|
.
|
|
@@ -340,6 +309,17 @@ See the [Next.js fbtee example](https://github.com/cpojer/nextjs-fbtee-example)
|
|
|
340
309
|
|
|
341
310
|
## Translation Workflow
|
|
342
311
|
|
|
312
|
+
The CLI is a native Rust executable and uses the Oxc compiler pipeline by default:
|
|
313
|
+
|
|
314
|
+
```bash
|
|
315
|
+
pnpm fbtee collect
|
|
316
|
+
pnpm fbtee prepare-translations --source-strings source_strings.json --output-dir translations
|
|
317
|
+
pnpm fbtee translate --source-strings source_strings.json --translations 'translations/*.json' --output-dir src/translations
|
|
318
|
+
pnpm fbtee migrate-locales --to bcp47 --dir translations --dir src/translations
|
|
319
|
+
```
|
|
320
|
+
|
|
321
|
+
fbtee 4 removes the legacy Babel compiler and JavaScript CLI. Babel-specific extensions (`--custom-collector`, `--transform`, `--generate-fbt-nodes`, and `--hash-module`) are no longer supported. The collector also cannot execute Babel configuration or apply `.babelignore`; it stops with a clear diagnostic if either is detected. Remove that legacy configuration, or pass `--disable-babel-config` to explicitly collect the unmodified source.
|
|
322
|
+
|
|
343
323
|
Extract source strings:
|
|
344
324
|
|
|
345
325
|
```bash
|
package/index.d.ts
CHANGED
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
import type { TransformOptions } from '@nkzw/oxc-transform-fbtee';
|
|
2
2
|
import type { Plugin } from 'vite';
|
|
3
3
|
|
|
4
|
-
export type FbteeVitePluginOptions = Omit<
|
|
5
|
-
TransformOptions,
|
|
6
|
-
'lang' | 'sourcemap' | 'sourceType'
|
|
7
|
-
>;
|
|
4
|
+
export type FbteeVitePluginOptions = Omit<TransformOptions, 'lang' | 'sourcemap' | 'sourceType'>;
|
|
8
5
|
|
|
9
6
|
export declare const fbtee: (options?: FbteeVitePluginOptions) => Plugin;
|
|
10
7
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nkzw/vite-plugin-fbtee",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0",
|
|
4
4
|
"description": "Vite plugin for fbtee powered by the native Oxc transform.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"fbt",
|
|
@@ -9,14 +9,22 @@
|
|
|
9
9
|
"oxc",
|
|
10
10
|
"vite"
|
|
11
11
|
],
|
|
12
|
+
"license": "MIT",
|
|
12
13
|
"repository": {
|
|
13
14
|
"type": "git",
|
|
14
15
|
"url": "git+https://github.com/nkzw-tech/fbtee.git",
|
|
15
16
|
"directory": "packages/vite-plugin-fbtee"
|
|
16
17
|
},
|
|
17
|
-
"
|
|
18
|
-
|
|
18
|
+
"files": [
|
|
19
|
+
"LICENSE",
|
|
20
|
+
"README.md",
|
|
21
|
+
"index.d.ts",
|
|
22
|
+
"index.js"
|
|
23
|
+
],
|
|
19
24
|
"type": "module",
|
|
25
|
+
"sideEffects": false,
|
|
26
|
+
"main": "index.js",
|
|
27
|
+
"types": "index.d.ts",
|
|
20
28
|
"exports": {
|
|
21
29
|
".": {
|
|
22
30
|
"types": "./index.d.ts",
|
|
@@ -24,16 +32,8 @@
|
|
|
24
32
|
"default": "./index.js"
|
|
25
33
|
}
|
|
26
34
|
},
|
|
27
|
-
"main": "index.js",
|
|
28
|
-
"types": "index.d.ts",
|
|
29
|
-
"files": [
|
|
30
|
-
"LICENSE",
|
|
31
|
-
"README.md",
|
|
32
|
-
"index.d.ts",
|
|
33
|
-
"index.js"
|
|
34
|
-
],
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@nkzw/oxc-transform-fbtee": "
|
|
36
|
+
"@nkzw/oxc-transform-fbtee": "4.0.0"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"vite": "^8.1.5"
|