You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- Reports the target language via the document `<html lang="...">` attribute (plus heuristics for services that don’t set it reliably)
12
+
7
13
## Supported translators
8
14
9
15
`detect-translation` can currently detect the following services:
@@ -36,9 +42,9 @@ This package detects when a page is translated on the client (using, for example
36
42
pnpm add detect-translation
37
43
```
38
44
39
-
_You can use npm or yarn if you prefer_
45
+
_You can use npm or yarn if you prefer: `npm i detect-translation`, `yarn add detect-translation`_
40
46
41
-
The package was written in Typescript, so no need to install types separately.
47
+
The package is written in TypeScript and ships its own types.
42
48
43
49
---
44
50
@@ -49,18 +55,36 @@ import { observe } from "detect-translation";
49
55
50
56
observe({
51
57
onTranslation: (lang, { service, type }) => {
52
-
// type will be 'proxy', 'client' or 'unknown'
53
-
// service will be for example, 'google', 'bing', 'yandex', 'baidu' etc
54
-
// lang will be the BCP 47 code, for example zh, fr, ru, de, hi, es, pt etc
58
+
// type: "proxy" | "client" | "unknown"
59
+
// service: e.g. "google", "bing", "yandex", "baidu" (see Services enum)
60
+
// lang: a BCP 47-ish language tag (e.g. "zh", "fr", "ru", "de", "hi", "es", "pt")
55
61
console.log(`${type} translation using ${service}, language ${lang}`);
56
62
},
57
63
sourceLang: "en",
58
64
});
59
65
```
60
66
61
-
Ensure that the script that calls `observe` is executed _after_ your HTML content.
67
+
Ensure the script that calls `observe` runs after your HTML content is in the DOM.
68
+
69
+
`lang` is based on the `<html>`[`lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) (set by the translation service when possible), or identified heuristically if you provide a “Skip to main content” link (see below).
70
+
71
+
## Browser usage (no bundler)
72
+
73
+
This package also ships a browser bundle that exposes a global `DetectTranslation` (useful for CDN usage).
`lang` is the value of the `<html>`[`lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) - this gets set by the translation service (or identified heuristically if you provide a “Skip to main content” link; see below).
87
+
If you use a bundler, prefer the module import shown in “Getting started”.
64
88
65
89
## Advanced usage
66
90
@@ -147,4 +171,30 @@ It’s quite possible to use another phrase to identify translated content langu
147
171
148
172
---
149
173
174
+
## Development
175
+
176
+
This repository uses `pnpm`.
177
+
178
+
Common commands:
179
+
180
+
```bash
181
+
pnpm install
182
+
pnpm test
183
+
pnpm run lint # biome
184
+
pnpm run knip # dead-code / unused deps
185
+
pnpm run build
186
+
pnpm run prepublish # the main verification gate (tests + lint + typecheck + knip + build + checks)
187
+
```
188
+
189
+
### Releases
190
+
191
+
Releases are tag-driven:
192
+
193
+
1. Bump `package.json` version.
194
+
2. Create and push a tag like `v0.2.1`.
195
+
196
+
GitHub Actions will run sanity checks and then publish to npm (requires the `NPM_TOKEN` repo secret), and create a GitHub Release with autogenerated notes.
197
+
198
+
---
199
+
150
200
MIT @ [Claudiu Ceia](https://github.com/ClaudiuCeia)
0 commit comments