Skip to content

Commit

Permalink
Update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
robisim74 committed Jan 30, 2024
1 parent cf00c04 commit 776eef3
Show file tree
Hide file tree
Showing 9 changed files with 77 additions and 162 deletions.
24 changes: 21 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,23 @@ export default component$(() => {
);
});
```
You can also avoid handling the keys, and only pass the default values by enabling the automatic key generation option:
```tsx
import { inlineTranslate } from 'qwik-speak';

export default component$(() => {
const t = inlineTranslate();

return (
<>
<h1>{t('Qwik Speak')}</h1> {/* Qwik Speak */}
<p>{t('Hi! I am {{name}}', { name: 'Qwik Speak' })}</p> {/* Hi! I am Qwik Speak */}
</>
);
});
```
See [Translate](./docs/translate.md) and [Automatic key generation](./docs/translate.md#automatic-key-generation) for more details.

### Getting dates, relative time & numbers
```tsx
import { useFormatDate, useRelativeTime, useFormatNumber } from 'qwik-speak';
Expand All @@ -53,6 +70,7 @@ export default component$(() => {
);
});
```
See [Localize](./docs/translate.md#localize) for more details.

## Static translations
Translation are loaded and inlined in chunks sent to the browser during the build.
Expand All @@ -65,9 +83,9 @@ To extract translations directly from the components, a command is available tha
See [Qwik Speak Extract](./docs/extract.md) for more information on how to use it.

## Automatic translation
To automatically translate files, an external command is available that uses OpenAI GPT Chat Completions API.

See [GPT Translate JSON](./docs/gpt-translate-json.md) for more information on how to use it.
To automatically translate files, the following external packages are available:
- [GPT Translate JSON](https://github.com/robisim74/gpt-translate-json)
- [Qwik Speak DeepL](https://www.npmjs.com/package/@tegonal/qwik-speak-deepl)

## Speak context
```mermaid
Expand Down
3 changes: 0 additions & 3 deletions SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,3 @@

* [Qwik Speak Extract](docs/extract.md)
* [Qwik Speak Inline Vite plugin](docs/inline.md)

## External Tools​
* [GPT Translate JSON](docs/gpt-translate-json.md)
1 change: 1 addition & 0 deletions docs/extract.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ Available options:
- `format` The format of the translation files. Default to `'json'`
- `filename` Filename for not scoped translations. Default is `'app'`
- `fallback` Optional function to implement a fallback strategy
- `autoKeys` Automatically handle keys for each string. Default is false
- `keySeparator` Separator of nested keys. Default is `'.'`
- `keyValueSeparator` Key-value separator. Default is `'@@'`

Expand Down
151 changes: 0 additions & 151 deletions docs/gpt-translate-json.md

This file was deleted.

1 change: 1 addition & 0 deletions docs/inline.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ Available options:
- `assetsPath` Path to translation files: `[basePath]/[assetsPath]/[lang]/*.json`. Default to `'i18n'`
- `outDir` The build output directory. Default to `'dist'`
- `loadAssets` Optional function to load asset by lang
- `autoKeys` Automatically handle keys for each string. Default is false
- `keySeparator` Separator of nested keys. Default is `'.'`
- `keyValueSeparator` Key-value separator. Default is `'@@'`

Expand Down
51 changes: 50 additions & 1 deletion docs/translate.md
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,11 @@ When you run the extraction tool, it creates the Intl API plural rules for each
}
}
```
There is no default value for `inlinePlural` function, so you must add the translation in each language, keeping in mind that the counter is optionally interpolated with the `value` parameter:
It is possible to set the default value passing a _valid stringified_ json, keeping in mind that the counter is optionally interpolated with the `value` parameter:
```tsx
p(1, 'devs@@{"one": "{{ value }} software developer","other": "{{ value }} software developers"}')
```
Will result in:
```json
{
"devs": {
Expand Down Expand Up @@ -165,6 +169,51 @@ export default component$(() => {
```
You can also extract the language directly into the function, through the request (cookies, params), instead of passing it as a parameter.

## Automatic key generation
If you don't want to handle the keys inside the translation functions, but only the default values, you can enable automatic key generation:
- Extraction tool: add `--autoKeys=true` to the script
- Inline Vite plugin: add `autoKeys: true` to the options

> Note. You can enable this option, even if you use the syntax `key@@[default value]`.
If you enable this option, you can only pass the default value to the translation functions:
```tsx
export default component$(() => {
const t = inlineTranslate();
const p = inlinePlural();

return (
<>
<h1>{t('app.title@@{{name}} demo', { name: 'Qwik Speak' })}</h1>

<h3>{t('New strings without existing keys')}</h3>
<p class="counter">{p(
1,
'{"one": "{{ value }} {{ color }} zebra","other": "{{ value }} {{ color }} zebras"}',
{
color: t('black and white')
}
)}</p>
</>
);
});
```
If you run the extractor, you will get json files like this:
```json
{
"app": {
"title": "Qwik Speak demo"
},
"autoKey_3c909eb27a10640be9495cff142f601c": {
"one": "{{ value }} {{ color }} zebra",
"other": "{{ value }} {{ color }} zebras"
},
"autoKey_8e4c0598319b3b04541df2fc36cb6fc5": "New strings without existing keys",
"autoKey_cbe370e60f10f92d4dd8b3e9c267b1fa": "black and white"
}
```
Then the Inline plugin will manage the self-assigned keys.

# Localize
## useFormatDate
`useFormatDate` returns a functions that uses [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) API to format dates:
Expand Down
2 changes: 1 addition & 1 deletion packages/qwik-speak/src/inline-plural.ts
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export const inlinePlural = (): InlinePluralFn => {
if (key) {
[key, defaultValues] = separateKeyValue(key, config.keyValueSeparator);

if (!defaultValues && /^[[{].*[\]}]$/.test(key)) {
if (!defaultValues && /^{.*}$/.test(key)) {
defaultValues = key;
key = undefined;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/qwik-speak/tools/extract/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,7 @@ export async function qwikSpeakExtract(options: QwikSpeakExtractOptions) {
if (key) {
[key, defaultValue] = separateKeyValue(key, resolvedOptions.keyValueSeparator);

if (!defaultValue && /^[[{].*[\]}]$/.test(key)) {
if (!defaultValue && /^{.*}$/.test(key)) {
defaultValue = key;
key = undefined;
}
Expand Down
4 changes: 2 additions & 2 deletions packages/qwik-speak/tools/inline/plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -383,7 +383,7 @@ export function addKeyToPlural(
if (keyOrDefaultValue) {
[key, defaultValue] = separateKeyValue(keyOrDefaultValue, opts.keyValueSeparator);

if (!defaultValue && /^[[{].*[\]}]$/.test(key)) {
if (!defaultValue && /^{.*}$/.test(key)) {
defaultValue = key;
key = undefined;
}
Expand Down Expand Up @@ -637,7 +637,7 @@ export function transpilePluralFn(
if (key) {
[key, defaultValues] = separateKeyValue(key, opts.keyValueSeparator);

if (!defaultValues && /^[[{].*[\]}]$/.test(key)) {
if (!defaultValues && /^{.*}$/.test(key)) {
defaultValues = key;
key = undefined;
}
Expand Down

0 comments on commit 776eef3

Please sign in to comment.