@inlang/paraglide-js 1.3.6 → 1.4.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 +111 -97
- package/dist/cli/commands/compile/command.d.ts +2 -1
- package/dist/cli/commands/init/cli-utils.d.ts +24 -0
- package/dist/cli/commands/init/command.d.ts +57 -22
- package/dist/cli/commands/init/defaults.d.ts +1 -0
- package/dist/cli/main.d.ts +2 -1
- package/dist/compiler/compile.d.ts +2 -1
- package/dist/compiler/compileMessage.d.ts +2 -1
- package/dist/index-10a745f0.js +397 -0
- package/dist/index.d.ts +4 -4
- package/dist/index.js +34363 -44630
- package/dist/services/environment/package.d.ts +2 -1
- package/dist/services/file-handling/exists.d.ts +2 -1
- package/dist/services/file-handling/write-output.d.ts +2 -1
- package/dist/services/telemetry/implementation.d.ts +3 -2
- package/dist/services/telemetry/index.d.ts +1 -1
- package/dist/utils/git.d.ts +2 -1
- package/package.json +11 -10
- package/dist/cli/state.d.ts +0 -4
package/README.md
CHANGED
|
@@ -1,33 +1,44 @@
|
|
|
1
|
-
[<img src="https://cdn.
|
|
1
|
+
[<img src="https://cdn.jsdelivr.net/gh/opral/monorepo@latest/inlang/source-code/paraglide/paraglide-js/assets/header.png" alt="Dead Simple i18n. Typesafe, Small Footprint, Treeshsakeable Messages, IDE Integration, Framework Agnostic" width="10000000px" />](https://www.youtube.com/watch?v=-YES3CCAG90)
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
# Why Paraglide?
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
<doc-features>
|
|
6
|
+
<doc-feature title="Tiny Runtime" image="https://cdn.jsdelivr.net/gh/opral/monorepo@latest/inlang/source-code/paraglide/paraglide-js/assets/bundlesize-feature.png"></doc-feature>
|
|
7
|
+
<doc-feature title="Fully Typesafe" image="https://cdn.jsdelivr.net/gh/opral/monorepo@latest/inlang/source-code/paraglide/paraglide-js/assets/typesafety-feature.png"></doc-feature>
|
|
8
|
+
<doc-feature title="Only Ship Used Messages" image="https://cdn.jsdelivr.net/gh/opral/monorepo@latest/inlang/source-code/paraglide/paraglide-js/assets/unused-translations.png"></doc-feature>
|
|
9
|
+
<doc-feature title="Sherlock VS Code Extension" image="https://cdn.jsdelivr.net/gh/opral/monorepo@latest/inlang/source-code/paraglide/paraglide-js/assets/sherlock-preview.png"></doc-feature>
|
|
10
|
+
</doc-features>
|
|
6
11
|
|
|
7
|
-
```bash
|
|
8
|
-
npx @inlang/paraglide-js@latest init
|
|
9
|
-
```
|
|
10
12
|
|
|
11
|
-
|
|
13
|
+
With Paraglide's treeshakeable messages, each page only loads the messages it actually uses. Incremental loading like this would usually take forever to get right, with Paraglide you get it for free.
|
|
12
14
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
# Use it with your Favorite Framework
|
|
16
|
+
|
|
17
|
+
Paraglide is framework agnostic, but there are framework-specific libraries available. If there is one for your framework you will want to follow its documentation instead. If there isn't, read on.
|
|
18
|
+
|
|
19
|
+
<doc-links>
|
|
20
|
+
<doc-link title="Adapter for NextJS" icon="tabler:brand-nextjs" href="/m/osslbuzt/paraglide-next-i18n" description="Go to Library"></doc-link>
|
|
21
|
+
<doc-link title="Adapter for SvelteKit" icon="simple-icons:svelte" href="/m/dxnzrydw/paraglide-sveltekit-i18n" description="Go to Library"></doc-link>
|
|
22
|
+
<doc-link title="Adapter for Astro" icon="devicon-plain:astro" href="/m/iljlwzfs/paraglide-astro-i18n" description="Go to Library"></doc-link>
|
|
23
|
+
<doc-link title="Adapter for SolidJS" icon="tabler:brand-solidjs" href="/m/n860p17j/paraglide-solidstart-i18n" description="Go to Library"></doc-link>
|
|
24
|
+
<doc-link title="Adapter for Remix" icon="simple-icons:remix" href="/m/fnhuwzrx/paraglide-remix-i18n" description="Go to Library"></doc-link>
|
|
25
|
+
<doc-link title="Or write your own" icon="ph:sparkle-fill" href="#writing-an-adapter" description="Learn How"></doc-link>
|
|
26
|
+
</doc-links>
|
|
18
27
|
|
|
19
|
-
|
|
28
|
+
# People Love It
|
|
20
29
|
|
|
21
|
-
|
|
22
|
-
</doc-figure>
|
|
30
|
+
A few recent comments.
|
|
23
31
|
|
|
24
|
-
|
|
32
|
+
<doc-comments>
|
|
33
|
+
<doc-comment text="Just tried Paraglide JS from @inlangHQ. This is how i18n should be done! Totally new level of DX for both implementation and managing translations! Superb support for SvelteKit as well ⭐" author="Patrik Engborg" icon="mdi:twitter" data-source="https://twitter.com/patrikengborg/status/1747260930873053674"></doc-comment>
|
|
34
|
+
<doc-comment text="I was messing with various i18n frameworks and tools in combination with Astro, and must say that Paraglide was the smoothest experience. I have migrated my website from i18next and it was a breeze. SSG and SSR worked out of the box (which was the first one for me), and overall DX is great. Thanks for your work!" author="Dalibor Hon" icon="mdi:discord" data-source="https://discord.com/channels/897438559458430986/1096039983116202034/1220796380772307004"></doc-comment>
|
|
35
|
+
<doc-comment text="Awesome library 🙂 Thanks so much! 1) The docs were simple and straight forward 2) Everything just worked.. no headaches" author="Dimitry" icon="mdi:discord" data-source="https://discord.com/channels/897438559458430986/1083724234142011392/1225658097016766574"></doc-comment>
|
|
36
|
+
<doc-comment text="Thank you for that huge work you have done and still doing!" author="ZerdoX-x" icon="mdi:github"></doc-comment>
|
|
37
|
+
</doc-comments>
|
|
25
38
|
|
|
26
39
|
# Getting started
|
|
27
40
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
Initialize ParaglideJS whith:
|
|
41
|
+
To use Paraglide standalone without a framework, run the following command:
|
|
31
42
|
|
|
32
43
|
```bash
|
|
33
44
|
npx @inlang/paraglide-js@latest init
|
|
@@ -35,41 +46,36 @@ npx @inlang/paraglide-js@latest init
|
|
|
35
46
|
|
|
36
47
|
This will:
|
|
37
48
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
49
|
+
- Install necessary dependencies
|
|
50
|
+
- Generate a `messages/` folder where your translation files live
|
|
51
|
+
- Add the Paraglide compiler to your `build` script in `package.json`
|
|
52
|
+
- Create necessary configuration files
|
|
41
53
|
|
|
42
|
-
|
|
54
|
+
Running the Paraglide compiler will generate a `src/paraglide` folder. This folder contains all the code that you will use in your app.
|
|
43
55
|
|
|
44
|
-
|
|
56
|
+
## Adding and Editing Messages
|
|
45
57
|
|
|
46
|
-
|
|
47
|
-
<doc-link title="Adapter for NextJS" icon="tabler:brand-nextjs" href="/m/osslbuzt/paraglide-next-i18n" description="Go to Library"></doc-link>
|
|
48
|
-
<doc-link title="Adapter for SvelteKit" icon="simple-icons:svelte" href="/m/dxnzrydw/paraglide-sveltekit-i18n" description="Go to Library"></doc-link>
|
|
49
|
-
<doc-link title="Adapter for Astro" icon="devicon-plain:astro" href="/m/iljlwzfs/paraglide-astro-i18n" description="Go to Library"></doc-link>
|
|
50
|
-
<doc-link title="Adapter for SolidJS" icon="tabler:brand-solidjs" href="/m/n860p17j/paraglide-solidstart-i18n" description="Go to Library"></doc-link>
|
|
51
|
-
</doc-links>
|
|
52
|
-
|
|
53
|
-
#### Alternatively, [you can write your own adapter](#writing-an-adapter)
|
|
54
|
-
|
|
55
|
-
# Usage
|
|
56
|
-
|
|
57
|
-
Running your `build` script will generate a `src/paraglide` folder. This folder contains all the code that you need to use paraglide-js.
|
|
58
|
-
|
|
59
|
-
## Adding Messages
|
|
58
|
+
Messages are stored in `messages/{lang}.json`. To add a message simply add a key-value pair. You can add parameters with curly braces.
|
|
60
59
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
```json
|
|
60
|
+
```diff
|
|
61
|
+
// messages/en.json
|
|
64
62
|
{
|
|
65
|
-
"
|
|
66
|
-
|
|
63
|
+
"$schema": "https://inlang.com/schema/inlang-message-format",
|
|
64
|
+
+ "greeting": "Hello {name}!"
|
|
67
65
|
}
|
|
68
66
|
```
|
|
69
67
|
|
|
70
|
-
|
|
68
|
+
Make sure to re-run the paraglide compiler after editing your messages.
|
|
71
69
|
|
|
72
|
-
|
|
70
|
+
```bash
|
|
71
|
+
npx @inlang/paraglide-js compile --project ./project.inlang --outdir ./src/paraglide
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
If you are using Bundler, you can use one of the [Bundler Plugins](#usage-with-a-bundler) to recompile automatically.
|
|
75
|
+
|
|
76
|
+
## Using Messages in Code
|
|
77
|
+
|
|
78
|
+
After running the compiler, you can import messages with `import * as m from "./paraglide/messages"`.
|
|
73
79
|
|
|
74
80
|
```js
|
|
75
81
|
import * as m from "./paraglide/messages.js"
|
|
@@ -79,7 +85,7 @@ m.hello() // Hello world!
|
|
|
79
85
|
m.loginHeader({ name: "Samuel" }) // Hello Samuel, please login to continue.
|
|
80
86
|
```
|
|
81
87
|
|
|
82
|
-
|
|
88
|
+
To choose between messages at runtime create a map of messages and index into it.
|
|
83
89
|
|
|
84
90
|
```ts
|
|
85
91
|
import * as m from "./paraglide/messages.js"
|
|
@@ -94,24 +100,6 @@ const season = {
|
|
|
94
100
|
const msg = season["spring"]() // Hello spring!
|
|
95
101
|
```
|
|
96
102
|
|
|
97
|
-
### Using the [Sherlock IDE Extension](https://inlang.com/m/r7kp499g/app-inlang-ideExtension) (optional)
|
|
98
|
-
|
|
99
|
-
[Sherlock](https://inlang.com/m/r7kp499g/app-inlang-ideExtension) integrates with paraglide to give you the optimal dev-experience.
|
|
100
|
-
|
|
101
|
-

|
|
102
|
-
|
|
103
|
-
## Adding Languages
|
|
104
|
-
|
|
105
|
-
You can declare which languages you support in `./project.inlang/settings.json`.
|
|
106
|
-
```json
|
|
107
|
-
// project.inlang/settings.json
|
|
108
|
-
{
|
|
109
|
-
"languageTags": ["en", "de"]
|
|
110
|
-
}
|
|
111
|
-
```
|
|
112
|
-
|
|
113
|
-
Then create another `messages/{lang}.json` file and get translating!
|
|
114
|
-
|
|
115
103
|
## Setting the language
|
|
116
104
|
|
|
117
105
|
You can set the [language tag](https://www.inlang.com/m/8y8sxj09/library-inlang-languageTag) by calling `setLanguageTag()`. Any subsequent calls to either `languageTag()` or a message function will use the new language tag.
|
|
@@ -129,13 +117,13 @@ m.hello() // Hello world!
|
|
|
129
117
|
|
|
130
118
|
The [language tag](https://www.inlang.com/m/8y8sxj09/library-inlang-languageTag) is global, so you need to be careful with it on the server to make sure multiple requests don't interfere with each other.
|
|
131
119
|
|
|
132
|
-
You will need to call `setLanguageTag` on both the server and the client
|
|
120
|
+
You will need to call `setLanguageTag` on both the server and the client since they run in separate processes.
|
|
133
121
|
|
|
134
122
|
## Reacting to language changes
|
|
135
123
|
|
|
136
124
|
Messages aren't reactive, so you will need to trigger a re-render when the language changes. You can register a callback using `onSetLanguageTag()`. It is called whenever the [language tag](https://www.inlang.com/m/8y8sxj09/library-inlang-languageTag) changes.
|
|
137
125
|
|
|
138
|
-
If you are using
|
|
126
|
+
If you are using a [framework-specific library](#use-it-with-your-favorite-framework) this is done for you.
|
|
139
127
|
|
|
140
128
|
```js
|
|
141
129
|
import { setLanguageTag, onSetLanguageTag } from "./paraglide/runtime.js"
|
|
@@ -149,10 +137,10 @@ setLanguageTag("de") // The language changed to de
|
|
|
149
137
|
setLanguageTag("en") // The language changed to en
|
|
150
138
|
```
|
|
151
139
|
|
|
152
|
-
|
|
140
|
+
A few things to know about `onSetLanguageTag()`:
|
|
153
141
|
|
|
154
142
|
- You can only register one listener. If you register a second listener it will throw an error.
|
|
155
|
-
- `
|
|
143
|
+
- `onSetLanguageTag` shouldn't be used on the server.
|
|
156
144
|
|
|
157
145
|
## Getting a message in a specific language
|
|
158
146
|
|
|
@@ -173,9 +161,9 @@ const msg = m.hello({ name: "Samuel" }, { languageTag: "de" }) // Hallo Samuel!
|
|
|
173
161
|
## Lazy-Loading
|
|
174
162
|
|
|
175
163
|
Paraglide consciously discourages lazy-loading translations since it seriously hurts
|
|
176
|
-
your
|
|
164
|
+
your Web Vitals. Learn more about why lazy-loading is bad & what to do instead in [our blog post on lazy-loading](https://inlang.com/g/mqlyfa7l/guide-lorissigrist-dontlazyload).
|
|
177
165
|
|
|
178
|
-
If you
|
|
166
|
+
If you want to do it anyway, lazily import the language-specific message files. Be careful with this.
|
|
179
167
|
|
|
180
168
|
```ts
|
|
181
169
|
const lazyGerman = await import("./paraglide/messages/de.js")
|
|
@@ -184,7 +172,7 @@ lazyGerman.hello() // Hallo Welt
|
|
|
184
172
|
|
|
185
173
|
## Usage with a Bundler
|
|
186
174
|
|
|
187
|
-
If you are using a bundler you should use the corresponding plugin. The plugin will keep your
|
|
175
|
+
If you are using a bundler you should use the corresponding plugin. The plugin will keep your Message Functions up-to-date by compiling whenever your messages change and before building your app.
|
|
188
176
|
|
|
189
177
|
<doc-links>
|
|
190
178
|
<doc-link title="Vite Plugin" icon="tabler:brand-vite" href="https://github.com/opral/monorepo/tree/main/inlang/source-code/paraglide/paraglide-js-adapter-vite" description="Go to Github"></doc-link>
|
|
@@ -192,9 +180,44 @@ If you are using a bundler you should use the corresponding plugin. The plugin w
|
|
|
192
180
|
<doc-link title="Webpack Plugin" icon="mdi:webpack" href="https://github.com/opral/monorepo/tree/main/inlang/source-code/paraglide/paraglide-js-adapter-webpack" description="Go to Github"></doc-link>
|
|
193
181
|
</doc-links>
|
|
194
182
|
|
|
183
|
+
## Configuration
|
|
184
|
+
|
|
185
|
+
Most of the configuration is done in `./project.inlang/settings.json`, except for paraglide's output directory, which needs to be passed in when calling the compiler.
|
|
186
|
+
|
|
187
|
+
### Languages
|
|
188
|
+
|
|
189
|
+
You can declare which languages you support in the `languageTags` array.
|
|
190
|
+
|
|
191
|
+
```json
|
|
192
|
+
// project.inlang/settings.json
|
|
193
|
+
{
|
|
194
|
+
"languageTags": ["en", "de"]
|
|
195
|
+
}
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
Create the corresponding `messages/{lang}.json` files and get translating!
|
|
199
|
+
|
|
200
|
+
### Moving the Translation Files
|
|
201
|
+
|
|
202
|
+
If you want your language files to be in a different location you can change the `pathPattern` of the [Inlang-Message-Format plugin](https://inlang.com/m/reootnfj/plugin-inlang-messageFormat).
|
|
203
|
+
|
|
204
|
+
```diff
|
|
205
|
+
// project.inlang/settings.json
|
|
206
|
+
"plugin.inlang.messageFormat": {
|
|
207
|
+
- "pathPattern": "./messages/{languageTag}.json"
|
|
208
|
+
+ "pathPattern": "./i18n/{languageTag}.json"
|
|
209
|
+
},
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
### Lint Rules
|
|
213
|
+
|
|
214
|
+
If you're using the [Sherlock VS Code extension](https://inlang.com/m/r7kp499g/app-inlang-ideExtension) you might see warnings about certain messages. Perhaps they're duplicates, perhaps they're missing in one language.
|
|
215
|
+
|
|
216
|
+
You can configure which lint-rules are active in `./project.inlang/settings.json`. Simply add or remove them from the `modules` array.
|
|
217
|
+
|
|
195
218
|
# Playground
|
|
196
219
|
|
|
197
|
-
Find examples
|
|
220
|
+
Find examples of how to use Paraglide on CodeSandbox or in [our GitHub repository](https://github.com/opral/monorepo/tree/main/inlang/source-code/paraglide).
|
|
198
221
|
|
|
199
222
|
<doc-links>
|
|
200
223
|
<doc-link title="NextJS + Paraglide JS" icon="lucide:codesandbox" href="https://stackblitz.com/~/LorisSigrist/paraglide-next-app-router-example" description="Play around with NextJS and Paraglide JS"></doc-link>
|
|
@@ -208,11 +231,11 @@ ParaglideJS leverages a compiler to generate vanilla JavaScript functions from y
|
|
|
208
231
|
|
|
209
232
|
Message Functions are fully typed using JSDoc. They are exported individually from the `messages.js` file making them tree-shakable. They aren't reactive, they just return a string.
|
|
210
233
|
|
|
211
|
-
This avoids many edge cases associated with reactivity, lazy-loading and namespacing that other i18n libraries have to work around.
|
|
234
|
+
This avoids many edge cases associated with reactivity, lazy-loading, and namespacing that other i18n libraries have to work around.
|
|
212
235
|
|
|
213
236
|
In addition to the message functions, ParaglideJS also emits a runtime. The runtime is used to set the language tag. It contains less than 50 LOC (lines of code) and is less than 300 bytes minified & gzipped.
|
|
214
237
|
|
|
215
|
-

|
|
216
239
|
|
|
217
240
|
Paraglide consists of four main parts:
|
|
218
241
|
|
|
@@ -250,7 +273,7 @@ export const hello = (params) => `Hello ${params.name}!`
|
|
|
250
273
|
|
|
251
274
|
## Messages
|
|
252
275
|
|
|
253
|
-
By convention we import the compiled
|
|
276
|
+
By convention, we import the compiled functions with a wildcard import.
|
|
254
277
|
|
|
255
278
|
```js
|
|
256
279
|
import * as m from "../paraglide/messages.js"
|
|
@@ -260,29 +283,33 @@ Bundlers like Rollup, Webpack, or Turbopack tree-shake the messages that are not
|
|
|
260
283
|
|
|
261
284
|
# Writing an Adapter
|
|
262
285
|
|
|
263
|
-
An "Adapter" is a library that integrates with a framework's
|
|
286
|
+
An "Adapter" is a library that integrates with a framework's lifecycle and does two things:
|
|
264
287
|
|
|
265
288
|
1. Calls `setLanguageTag()` at appropriate times to set the language
|
|
266
289
|
2. Reacts to `onSetLanguageTag()`, usually by navigating or relading the page.
|
|
267
290
|
|
|
268
|
-
This example adapts Paraglide to a fictitious
|
|
291
|
+
This example adapts Paraglide to a fictitious full-stack framework.
|
|
269
292
|
|
|
270
293
|
```tsx
|
|
271
|
-
import {
|
|
294
|
+
import {
|
|
295
|
+
setLanguageTag,
|
|
296
|
+
onSetLanguageTag,
|
|
297
|
+
type AvailableLanguageTag,
|
|
298
|
+
} from "../paraglide/runtime.js"
|
|
272
299
|
import { isServer, isClient, request, render } from "@example/framework"
|
|
273
300
|
import { detectLanguage } from "./utils.js"
|
|
274
301
|
|
|
275
302
|
if (isServer) {
|
|
276
|
-
// On the server the language tag needs to be resolved on a per-request basis.
|
|
303
|
+
// On the server the language tag needs to be resolved on a per-request basis.
|
|
277
304
|
// Pass a getter function that resolves the language from the correct request
|
|
278
305
|
|
|
279
|
-
const detectLanguage = (request: Request)
|
|
306
|
+
const detectLanguage = (request: Request): AvailableLanguageTag => {
|
|
280
307
|
//your logic ...
|
|
281
308
|
}
|
|
282
309
|
setLanguageTag(() => detectLanguage(request))
|
|
283
310
|
}
|
|
284
311
|
|
|
285
|
-
if(isClient) {
|
|
312
|
+
if (isClient) {
|
|
286
313
|
// On the client, the language tag can be resolved from
|
|
287
314
|
// the document's html lang tag.
|
|
288
315
|
setLanguageTag(() => document.documentElement.lang)
|
|
@@ -304,20 +331,6 @@ render((page) => (
|
|
|
304
331
|
))
|
|
305
332
|
```
|
|
306
333
|
|
|
307
|
-
# Community
|
|
308
|
-
|
|
309
|
-
We are grateful for all the support we get from the community. Here are a few comments we've received recently.
|
|
310
|
-
|
|
311
|
-
If you have any feedback / problems, please let us know on [GitHub](https://github.com/opral/inlang-paraglide-js/issues/new)
|
|
312
|
-
|
|
313
|
-
<doc-comments>
|
|
314
|
-
<doc-comment text="Just tried Paraglide JS from @inlangHQ. This is how i18n should be done! Totally new level of DX for both implementation and managing translations! Superb support for SvelteKit as well ⭐" author="Patrik Engborg" icon="mdi:twitter" data-source="https://twitter.com/patrikengborg/status/1747260930873053674"></doc-comment>
|
|
315
|
-
<doc-comment text="I was messing with various i18n frameworks and tools in combination with Astro, and i must say that Paraglide was the smoothest experience. I have migrated my website from i18next and it was a breeze. SSG and SSR worked out of the box (which was the first one for me), and overall DX is great. Thanks for your work!" author="Dally H" icon="mdi:discord" data-source="https://discord.com/channels/897438559458430986/1096039983116202034/1220796380772307004"></doc-comment>
|
|
316
|
-
<doc-comment text="The lib is great guys!" author="ktarmyshov" icon="mdi:github"></doc-comment>
|
|
317
|
-
<doc-comment text="Thank you for that huge work you have done and still doing!" author="ZerdoX-x" icon="mdi:github"></doc-comment>
|
|
318
|
-
<doc-comment text="Thanks for all the great work @Samuel Stroschein" author="Willem" icon="mdi:discord"></doc-comment>
|
|
319
|
-
</doc-comments>
|
|
320
|
-
|
|
321
334
|
# Roadmap
|
|
322
335
|
|
|
323
336
|
Of course, we're not done yet! We plan on adding the following features to Paraglide JS soon:
|
|
@@ -325,6 +338,7 @@ Of course, we're not done yet! We plan on adding the following features to Parag
|
|
|
325
338
|
- [ ] Pluralization ([Join the Discussion](https://github.com/opral/monorepo/discussions/2025))
|
|
326
339
|
- [ ] Formatting of numbers and dates ([Join the Discussion](https://github.com/opral/monorepo/discussions/992))
|
|
327
340
|
- [ ] Markup Placeholders ([Join the Discussion](https://github.com/opral/monorepo/discussions/913))
|
|
341
|
+
- [ ] Even Smaller Output
|
|
328
342
|
|
|
329
343
|
# Talks
|
|
330
344
|
|
|
@@ -335,9 +349,9 @@ Of course, we're not done yet! We plan on adding the following features to Parag
|
|
|
335
349
|
|
|
336
350
|
# Tooling
|
|
337
351
|
|
|
338
|
-
Paraglide JS is part of the Inlang ecosystem and integrates nicely with all the other Inlang
|
|
352
|
+
Paraglide JS is part of the Inlang ecosystem and integrates nicely with all the other Inlang-compatible tools.
|
|
339
353
|
|
|
340
|
-
As a developer, you will love the [Sherlock
|
|
354
|
+
As a developer, you will love the [Sherlock VS Code extension](https://inlang.com/m/r7kp499g/app-inlang-ideExtension).
|
|
341
355
|
|
|
342
356
|
If you are working with translators or designers you will find these tools useful:
|
|
343
357
|
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* One step in a CLI chain.
|
|
3
|
+
* Defines which types the context needs to extend and how it extends the context
|
|
4
|
+
*
|
|
5
|
+
* Cli Steps can be chained to slowly build up the context over time
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```ts
|
|
9
|
+
* const step1: CliStep<unknown, { foo: string }> = async (ctx) => {
|
|
10
|
+
* return {...ctx, foo: "hello" }
|
|
11
|
+
* }
|
|
12
|
+
*
|
|
13
|
+
* const step2: CliStep<{ foo: string }, { bar: number }> = async (ctx) => {
|
|
14
|
+
* return { ...ctx, bar: 42 }
|
|
15
|
+
* }
|
|
16
|
+
*
|
|
17
|
+
* const initial = { baz: "baz" } as const;
|
|
18
|
+
* const ctx1 = await step1(initial);
|
|
19
|
+
* const ctx2 = await step2(ctx1);
|
|
20
|
+
*
|
|
21
|
+
* ctx2 // Has type { foo: string, bar: number, baz: "baz" }
|
|
22
|
+
* ```
|
|
23
|
+
*/
|
|
24
|
+
export type CliStep<In extends object, Out> = <Ctx extends In>(ctx: Ctx) => Promise<Ctx & Out>;
|
|
@@ -1,35 +1,70 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
};
|
|
1
|
+
import { CliStep } from './cli-utils.js';
|
|
2
|
+
import { Repository } from '@lix-js/client';
|
|
3
|
+
import { Logger } from '~/services/logger/index.js';
|
|
4
|
+
import { InlangProject } from '@inlang/sdk';
|
|
5
|
+
import { Command } from 'commander';
|
|
6
|
+
|
|
8
7
|
export declare const initCommand: Command;
|
|
9
|
-
export declare const initializeInlangProject:
|
|
10
|
-
|
|
8
|
+
export declare const initializeInlangProject: CliStep<{
|
|
9
|
+
repo: Repository;
|
|
10
|
+
logger: Logger;
|
|
11
|
+
}, {
|
|
12
|
+
project: InlangProject;
|
|
13
|
+
/** Relative path to the project */
|
|
11
14
|
projectPath: string;
|
|
12
|
-
}
|
|
13
|
-
export declare const
|
|
14
|
-
|
|
15
|
-
|
|
15
|
+
}>;
|
|
16
|
+
export declare const maybeAddVsCodeExtension: CliStep<{
|
|
17
|
+
repo: Repository;
|
|
18
|
+
logger: Logger;
|
|
19
|
+
project: InlangProject;
|
|
20
|
+
}, unknown>;
|
|
21
|
+
export declare const addParaglideJsToDevDependencies: CliStep<{
|
|
22
|
+
repo: Repository;
|
|
23
|
+
logger: Logger;
|
|
24
|
+
}, unknown>;
|
|
25
|
+
export declare const findExistingInlangProjectPath: (repo: Repository) => Promise<string | undefined>;
|
|
26
|
+
export declare const determineOutdir: CliStep<{
|
|
27
|
+
logger: Logger;
|
|
28
|
+
}, {
|
|
29
|
+
/** Relative path to the output directory */
|
|
30
|
+
outdir: string;
|
|
31
|
+
}>;
|
|
32
|
+
export declare const existingProjectFlow: (ctx: {
|
|
16
33
|
existingProjectPath: string;
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
export declare const
|
|
21
|
-
|
|
34
|
+
repo: Repository;
|
|
35
|
+
logger: Logger;
|
|
36
|
+
}) => Promise<InlangProject>;
|
|
37
|
+
export declare const createNewProjectFlow: (ctx: {
|
|
38
|
+
repo: Repository;
|
|
39
|
+
logger: Logger;
|
|
40
|
+
}) => Promise<InlangProject>;
|
|
41
|
+
export declare const checkIfPackageJsonExists: CliStep<{
|
|
42
|
+
logger: Logger;
|
|
43
|
+
repo: Repository;
|
|
44
|
+
}, unknown>;
|
|
45
|
+
export declare const checkIfUncommittedChanges: CliStep<{
|
|
46
|
+
logger: Logger;
|
|
47
|
+
}, unknown>;
|
|
48
|
+
export declare const addCompileStepToPackageJSON: CliStep<{
|
|
49
|
+
repo: Repository;
|
|
50
|
+
logger: Logger;
|
|
22
51
|
projectPath: string;
|
|
23
|
-
|
|
52
|
+
outdir: string;
|
|
53
|
+
}, unknown>;
|
|
24
54
|
/**
|
|
25
55
|
* Ensures that the moduleResolution compiler option is set to "bundler" or similar in the tsconfig.json.
|
|
26
56
|
*
|
|
27
57
|
* Otherwise, types defined in `package.exports` are not resolved by TypeScript. Leading to type
|
|
28
58
|
* errors with Paraglide-JS.
|
|
29
59
|
*/
|
|
30
|
-
export declare const maybeChangeTsConfigModuleResolution:
|
|
60
|
+
export declare const maybeChangeTsConfigModuleResolution: CliStep<{
|
|
61
|
+
repo: Repository;
|
|
62
|
+
logger: Logger;
|
|
63
|
+
}, unknown>;
|
|
31
64
|
/**
|
|
32
65
|
* Paraligde JS compiles to JS with JSDoc comments. TypeScript doesn't allow JS files by default.
|
|
33
66
|
*/
|
|
34
|
-
export declare const maybeChangeTsConfigAllowJs:
|
|
35
|
-
|
|
67
|
+
export declare const maybeChangeTsConfigAllowJs: CliStep<{
|
|
68
|
+
repo: Repository;
|
|
69
|
+
logger: Logger;
|
|
70
|
+
}, unknown>;
|
package/dist/cli/main.d.ts
CHANGED