feat: Update legal text for user consent and data processing across multiple locales, ensuring clarity and compliance with regulations
This commit is contained in:
sebseb7
282
docs/i18n.md
Normal file
282
docs/i18n.md
Normal file
@@ -0,0 +1,282 @@
|
|||||||
|
# Internationalization (i18n)
|
||||||
|
|
||||||
|
This project uses [i18next](https://www.i18next.com/) with [react-i18next](https://react.i18next.com/). The setup works with both function components and class components (HOCs).
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
- **Default language:** German (`de`), bundled at startup.
|
||||||
|
- **Other languages:** Loaded on demand when the user switches (see `loadLanguage` in `src/i18n/index.js`).
|
||||||
|
- **Persistence:** Language choice is stored in `sessionStorage` / `localStorage` (`i18nextLng`) via a custom detector in `src/i18n/index.js`.
|
||||||
|
- **HTML `lang`:** Updated when the language changes (see `LanguageProvider` in `src/i18n/withTranslation.js`).
|
||||||
|
- **Fallback:** `fallbackLng` is `de`.
|
||||||
|
|
||||||
|
### Product-facing behavior
|
||||||
|
|
||||||
|
- **Language switcher** — `src/components/LanguageSwitcher.js`: shows current language with flag, dropdown to change language, persists selection.
|
||||||
|
- **Translated areas** — Navigation, auth, cart, checkout, product UI, footer, profile, and more; legal pages use dedicated **`legal-*`** namespaces (long-form text).
|
||||||
|
|
||||||
|
## Layout
|
||||||
|
|
||||||
|
| Path | Role |
|
||||||
|
|------|------|
|
||||||
|
| `src/i18n/index.js` | Initializes i18n, registers namespaces, lazy-loads non-German locales |
|
||||||
|
| `src/i18n/withTranslation.js` | `LanguageProvider`, `withTranslation`, `withI18n`, `withLanguage` |
|
||||||
|
| `src/i18n/locales/<lang>/` | Per-language modules (`de`, `en`, …) |
|
||||||
|
|
||||||
|
Each language folder contains:
|
||||||
|
|
||||||
|
- **`index.js`** — Merges feature modules into the main **`translation`** namespace (shop UI: `navigation`, `cart`, `product`, …). Some legal content is also re-exported here under camelCase keys (e.g. `legalAgbDelivery`) for convenience; runtime legal pages use separate namespaces (see below).
|
||||||
|
- **One file per topic** — e.g. `cart.js`, `navigation.js`, `product.js` (not a single `translation.json`).
|
||||||
|
- **Legal bundles** — e.g. `legal-agb-delivery.js`, `legal-datenschutz-basic.js`, `legal-impressum.js`, registered as their **own i18next namespaces** in `src/i18n/index.js`.
|
||||||
|
|
||||||
|
## Namespaces
|
||||||
|
|
||||||
|
- **`translation`** (default) — Everything merged in `locales/<lang>/index.js`. Keys are dot paths such as `cart.addToCart` or `product.title`.
|
||||||
|
- **`legal-*`** — Long-form legal copy. Loaded the same way, but you select the namespace in `useTranslation('legal-impressum')` (or equivalent). Keys are relative to that namespace, e.g. `sections.operator.title`, not `legal-impressum.sections.operator.title`.
|
||||||
|
|
||||||
|
Default namespace is `translation`; omit the argument for shop UI:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const { t } = useTranslation();
|
||||||
|
// same as useTranslation('translation')
|
||||||
|
```
|
||||||
|
|
||||||
|
Legal page example:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const { t } = useTranslation('legal-impressum');
|
||||||
|
return t('title');
|
||||||
|
```
|
||||||
|
|
||||||
|
Multiple namespaces in one component:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const { t: tDelivery } = useTranslation('legal-agb-delivery');
|
||||||
|
const { t: tPayment } = useTranslation('legal-agb-payment');
|
||||||
|
```
|
||||||
|
|
||||||
|
## Usage in components
|
||||||
|
|
||||||
|
### Function components
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
const MyComponent = () => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
return <Typography>{t('navigation.home')}</Typography>;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### Class components — `withI18n` (translation + language context)
|
||||||
|
|
||||||
|
`withI18n` combines translation and language context. Use it when you need `t` and optionally `languageContext`:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { withI18n } from '../i18n/withTranslation.js';
|
||||||
|
|
||||||
|
class MyComponent extends Component {
|
||||||
|
render() {
|
||||||
|
const { t } = this.props;
|
||||||
|
|
||||||
|
return <Typography>{t('navigation.home')}</Typography>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default withI18n()(MyComponent);
|
||||||
|
```
|
||||||
|
|
||||||
|
### Class components — `withTranslation` + `withLanguage`
|
||||||
|
|
||||||
|
Some components only need `t` and `languageContext` from separate HOCs:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { withTranslation } from 'react-i18next';
|
||||||
|
import { withLanguage } from '../i18n/withTranslation.js';
|
||||||
|
|
||||||
|
export default withTranslation()(withLanguage(MyComponent));
|
||||||
|
```
|
||||||
|
|
||||||
|
Destructuring in `render`:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const { t, title } = this.props;
|
||||||
|
t('product.new');
|
||||||
|
```
|
||||||
|
|
||||||
|
`this.props.t('…')` resolves against the default `translation` namespace.
|
||||||
|
|
||||||
|
### Language context (`changeLanguage`)
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { withLanguage } from '../i18n/withTranslation.js';
|
||||||
|
|
||||||
|
class MyComponent extends Component {
|
||||||
|
render() {
|
||||||
|
const { languageContext } = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button onClick={() => languageContext.changeLanguage('en')}>
|
||||||
|
English
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default withLanguage(MyComponent);
|
||||||
|
```
|
||||||
|
|
||||||
|
Available language codes are defined on `LanguageProvider` (`allLanguages` in `withTranslation.js`); the switcher only offers languages that are loaded or loading.
|
||||||
|
|
||||||
|
## Key naming
|
||||||
|
|
||||||
|
- Use **dot notation** for nested objects in the JS exports: `product.inclVat`, `delivery.times.standard2to3Days`.
|
||||||
|
- File names in `locales/de/` map to **top-level segments** inside `index.js` (e.g. `cart.js` → `cart.*`). Keep new strings in the appropriate module and **export them from `index.js`** if you add a new file.
|
||||||
|
|
||||||
|
## Interpolation
|
||||||
|
|
||||||
|
i18next interpolation uses `{{name}}` in strings and an options object:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
t('product.weight', { weight: '1,2' });
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// locale string example: "Gewicht: {{weight}} kg"
|
||||||
|
```
|
||||||
|
|
||||||
|
## Language switching
|
||||||
|
|
||||||
|
`LanguageProvider` coordinates `i18n.changeLanguage` and lazy loading. Non-default languages are loaded via `loadLanguage` in `src/i18n/index.js`, which dynamic-imports the same file layout under `locales/<lang>/`.
|
||||||
|
|
||||||
|
## Adding or changing copy
|
||||||
|
|
||||||
|
1. Edit the right module under `src/i18n/locales/de/` (source of truth for structure).
|
||||||
|
2. Mirror changes in other languages under `src/i18n/locales/<lang>/` as needed, or use the project’s translation tooling (`npm run translate`, etc. — see `translate-i18n.js` and `package.json` scripts).
|
||||||
|
3. For a **new top-level section**, add the module import and export in `locales/<lang>/index.js` for every language you ship.
|
||||||
|
|
||||||
|
### Example (new keys in an existing file)
|
||||||
|
|
||||||
|
`src/i18n/locales/de/cart.js`:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
export default {
|
||||||
|
// ...
|
||||||
|
newFeature: {
|
||||||
|
title: 'Neuer Titel',
|
||||||
|
description: 'Neue Beschreibung',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
Use in code: `t('cart.newFeature.title')` (assuming the `cart` object is merged under `cart` in `index.js`).
|
||||||
|
|
||||||
|
## Adding a new language
|
||||||
|
|
||||||
|
1. Add a folder `src/i18n/locales/<code>/` with the same **file set** as German (at minimum `index.js` and every module `index.js` imports, plus all `legal-*.js` files registered in `src/i18n/index.js`).
|
||||||
|
2. Ensure `loadLanguage` in `src/i18n/index.js` can import that folder (pattern already uses `import(\`./locales/${language}/...\`)`).
|
||||||
|
3. Include the code in `allLanguages` (and any UI lists) in `withTranslation.js` / `LanguageSwitcher.js` as needed.
|
||||||
|
4. Clear the language cache logic if you add special cases (`languageCache` in `index.js`).
|
||||||
|
|
||||||
|
## Configuration notes
|
||||||
|
|
||||||
|
- **Detection:** Custom detector in `src/i18n/index.js` prefers session/localStorage, then defaults to `de` (browser language is not used for the initial default).
|
||||||
|
- **Debug:** i18next `debug` follows `NODE_ENV` (on in development).
|
||||||
|
- **Missing keys:** `saveMissing` can run in development (see `src/i18n/index.js`).
|
||||||
|
|
||||||
|
## SEO
|
||||||
|
|
||||||
|
- Document `lang` updates with language changes.
|
||||||
|
- You can extend the app with hreflang, localized routes, or metadata per language as needed.
|
||||||
|
|
||||||
|
## Best practices
|
||||||
|
|
||||||
|
1. **Keep structure parallel** across `locales/<lang>/` files.
|
||||||
|
2. **Prefer German (`de`) as the structural source**; keep `fallbackLng` aligned with your primary market.
|
||||||
|
3. **Use interpolation** for variable fragments: `t('key', { name: value })`.
|
||||||
|
4. **Test** critical flows after adding strings or languages.
|
||||||
|
|
||||||
|
## Translation coverage (high level)
|
||||||
|
|
||||||
|
Coverage varies by screen; shop flows, auth, cart, products, and legal pages have substantial strings. Remaining gaps are normal for a growing app—search for hard-coded German/English in components when polishing.
|
||||||
|
|
||||||
|
## Performance
|
||||||
|
|
||||||
|
- **German** is in the initial bundle.
|
||||||
|
- **Other languages** load on first switch (dynamic import), then stay cached in the i18n layer for the session.
|
||||||
|
|
||||||
|
## Browser support
|
||||||
|
|
||||||
|
Modern browsers with ES modules, `localStorage` / `sessionStorage`, and your supported React version.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Key usage check (`scripts/check-i18n-keys.mjs`)
|
||||||
|
|
||||||
|
The check answers: *which keys defined for German (`src/i18n/locales/de`) appear to be unused in `src/`?*
|
||||||
|
|
||||||
|
Run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run i18n:check-keys
|
||||||
|
# or
|
||||||
|
node scripts/check-i18n-keys.mjs
|
||||||
|
```
|
||||||
|
|
||||||
|
Machine-readable output:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
node scripts/check-i18n-keys.mjs --json
|
||||||
|
```
|
||||||
|
|
||||||
|
### What the script detects
|
||||||
|
|
||||||
|
The script only understands **static** key strings:
|
||||||
|
|
||||||
|
- `t('cart.addToCart')`, `t("…")`
|
||||||
|
- `this.props.t('…')`, `props.t('…')`
|
||||||
|
- Aliases from `useTranslation('namespace')`, e.g. `const { t: tDelivery } = useTranslation('legal-agb-delivery');` then `tDelivery('deliveryTerms.1')`
|
||||||
|
- Destructuring `const { t } = this.props` / `props` for HOC-wrapped components
|
||||||
|
- Fully static template literals without interpolation: `` t(`some.key`) ``
|
||||||
|
|
||||||
|
It flattens locale objects the same way i18next does (leaf keys only).
|
||||||
|
|
||||||
|
### Embedded legal copy vs separate namespaces
|
||||||
|
|
||||||
|
Legal strings exist in two shapes:
|
||||||
|
|
||||||
|
1. **Separate namespace** (what pages use): `legal-agb-delivery` + key `deliveryTerms.1`.
|
||||||
|
2. **Embedded in `translation`**: `legalAgbDelivery.deliveryTerms.1` inside `locales/de/index.js`.
|
||||||
|
|
||||||
|
The script treats a key as used in the **embedded** `translation` tree when the matching **separate-namespace** key is used, so you do not see false “unused” duplicates for the same text.
|
||||||
|
|
||||||
|
### Dynamic keys (`t(\`…${x}…\`)`)
|
||||||
|
|
||||||
|
If the key is built at runtime, the static scan will not see it. The script includes **hard-coded expansions** for known patterns on:
|
||||||
|
|
||||||
|
- `src/pages/AGB.js`
|
||||||
|
- `src/pages/Datenschutz.js` (basic Datenschutz sections)
|
||||||
|
- `src/pages/Impressum.js`
|
||||||
|
|
||||||
|
If you add **new** dynamic patterns elsewhere, either:
|
||||||
|
|
||||||
|
- Prefer **static** keys where reasonable (`t('feature.section.title')` per section), or
|
||||||
|
- Extend `addKnownDynamicLegalKeys` (or equivalent) in `scripts/check-i18n-keys.mjs` so the checker knows which key paths can occur.
|
||||||
|
|
||||||
|
Other files may still be listed under “template literals in `t(...)`” when the script cannot prove all keys.
|
||||||
|
|
||||||
|
### Making new keys “count” for the checker
|
||||||
|
|
||||||
|
1. Call `t` with a **string literal** (or a template literal **without** `${…}`) as the first argument.
|
||||||
|
2. Use **`useTranslation('namespace')`** with a **string literal** namespace so aliases like `tFoo` map correctly.
|
||||||
|
3. For class components, keep **`const { t } = this.props`** (or `props`) so the script ties `t` to `translation`.
|
||||||
|
|
||||||
|
Avoid only referencing a key from non-`src` code (build scripts, server-only files): the checker only scans `src/` and skips `src/i18n/locales/**`.
|
||||||
|
|
||||||
|
### Interpreting results
|
||||||
|
|
||||||
|
- **Unused** — No static (and no expanded dynamic) reference found; may still be dead copy, or only used via variables/dynamic templates.
|
||||||
|
- **Used but not in locale files** — A reference in code does not match any defined German key (typo or missing `de` entry).
|
||||||
|
|
||||||
|
The report is **best-effort**; use it to find obvious dead strings and drift, not as a formal guarantee.
|
||||||
368
scripts/check-i18n-keys.mjs
Normal file
368
scripts/check-i18n-keys.mjs
Normal file
@@ -0,0 +1,368 @@
|
|||||||
|
#!/usr/bin/env node
|
||||||
|
/**
|
||||||
|
* Reports which keys from src/i18n/locales/de are referenced in application code.
|
||||||
|
*
|
||||||
|
* - Loads the same namespaces as src/i18n/index.js (translation bundle + legal-* bundles).
|
||||||
|
* - Parses static t("...") / t('...') calls and maps useTranslation() aliases to namespaces.
|
||||||
|
* - Legal text is duplicated: separate namespaces (e.g. legal-agb-delivery) AND embedded under
|
||||||
|
* translation (legalAgbDelivery.*). When a separate-namespace key is used, the embedded
|
||||||
|
* translation::* copy is treated as used too.
|
||||||
|
* - Known dynamic patterns from AGB.js, Datenschutz.js, Impressum.js are expanded so those
|
||||||
|
* keys are not falsely listed as unused.
|
||||||
|
*
|
||||||
|
* Usage: node scripts/check-i18n-keys.mjs
|
||||||
|
* node scripts/check-i18n-keys.mjs --json
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { readFile, readdir } from 'node:fs/promises';
|
||||||
|
import path from 'node:path';
|
||||||
|
import { fileURLToPath } from 'node:url';
|
||||||
|
|
||||||
|
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||||
|
const ROOT = path.join(__dirname, '..');
|
||||||
|
const SRC = path.join(ROOT, 'src');
|
||||||
|
const LOCALE_DE = path.join(SRC, 'i18n', 'locales', 'de');
|
||||||
|
|
||||||
|
const SEPARATE_NAMESPACES = [
|
||||||
|
'legal-agb-delivery',
|
||||||
|
'legal-agb-payment',
|
||||||
|
'legal-agb-consumer',
|
||||||
|
'legal-datenschutz-basic',
|
||||||
|
'legal-datenschutz-customer',
|
||||||
|
'legal-datenschutz-google-orders',
|
||||||
|
'legal-datenschutz-newsletter',
|
||||||
|
'legal-datenschutz-chatbot',
|
||||||
|
'legal-datenschutz-push',
|
||||||
|
'legal-datenschutz-cookies-payment',
|
||||||
|
'legal-datenschutz-rights',
|
||||||
|
'legal-impressum',
|
||||||
|
'legal-widerruf',
|
||||||
|
'legal-batterie',
|
||||||
|
];
|
||||||
|
|
||||||
|
/** Separate i18n namespace -> key prefix inside translation bundle (locales/de/index.js). */
|
||||||
|
const NS_TO_EMBEDDED_PREFIX = {
|
||||||
|
'legal-agb-delivery': 'legalAgbDelivery',
|
||||||
|
'legal-agb-payment': 'legalAgbPayment',
|
||||||
|
'legal-agb-consumer': 'legalAgbConsumer',
|
||||||
|
'legal-datenschutz-basic': 'legalDatenschutzBasic',
|
||||||
|
'legal-datenschutz-customer': 'legalDatenschutzCustomer',
|
||||||
|
'legal-datenschutz-google-orders': 'legalDatenschutzGoogleOrders',
|
||||||
|
'legal-datenschutz-newsletter': 'legalDatenschutzNewsletter',
|
||||||
|
'legal-datenschutz-chatbot': 'legalDatenschutzChatbot',
|
||||||
|
'legal-datenschutz-cookies-payment': 'legalDatenschutzCookiesPayment',
|
||||||
|
'legal-datenschutz-rights': 'legalDatenschutzRights',
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Keys reached only via t(`…${var}…`) in a few pages — expand so they count as used.
|
||||||
|
*/
|
||||||
|
function addKnownDynamicLegalKeys(used) {
|
||||||
|
for (let n = 1; n <= 14; n++) {
|
||||||
|
used.add(keySet('legal-agb-delivery', `deliveryTerms.${n}`));
|
||||||
|
}
|
||||||
|
for (const n of [1, 2, 3, 5, 6, 7, 8]) {
|
||||||
|
used.add(keySet('legal-agb-consumer', `distanceSelling.sections.${n}.title`));
|
||||||
|
used.add(keySet('legal-agb-consumer', `distanceSelling.sections.${n}.content`));
|
||||||
|
}
|
||||||
|
for (const section of ['informationDeletion', 'serverLogfiles']) {
|
||||||
|
used.add(keySet('legal-datenschutz-basic', `sections.${section}.title`));
|
||||||
|
used.add(keySet('legal-datenschutz-basic', `sections.${section}.content`));
|
||||||
|
}
|
||||||
|
for (const section of ['operator', 'contact', 'vatId', 'disclaimer', 'copyright']) {
|
||||||
|
used.add(keySet('legal-impressum', `sections.${section}.title`));
|
||||||
|
used.add(keySet('legal-impressum', `sections.${section}.content`));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** If legal-agb-delivery::foo is used, translation::legalAgbDelivery.foo is the same strings. */
|
||||||
|
function propagateEmbeddedCopies(used) {
|
||||||
|
const additions = [];
|
||||||
|
for (const entry of used) {
|
||||||
|
const sep = entry.indexOf('::');
|
||||||
|
if (sep === -1) continue;
|
||||||
|
const ns = entry.slice(0, sep);
|
||||||
|
const keyPath = entry.slice(sep + 2);
|
||||||
|
const prefix = NS_TO_EMBEDDED_PREFIX[ns];
|
||||||
|
if (!prefix) continue;
|
||||||
|
additions.push(keySet('translation', `${prefix}.${keyPath}`));
|
||||||
|
}
|
||||||
|
for (const a of additions) used.add(a);
|
||||||
|
}
|
||||||
|
|
||||||
|
function flattenLeaves(obj, prefix = '') {
|
||||||
|
const keys = [];
|
||||||
|
if (obj === null || obj === undefined) return keys;
|
||||||
|
if (typeof obj !== 'object' || Array.isArray(obj)) {
|
||||||
|
if (prefix) keys.push(prefix);
|
||||||
|
return keys;
|
||||||
|
}
|
||||||
|
const entries = Object.entries(obj);
|
||||||
|
if (entries.length === 0 && prefix) keys.push(prefix);
|
||||||
|
for (const [k, v] of entries) {
|
||||||
|
const next = prefix ? `${prefix}.${k}` : k;
|
||||||
|
if (v !== null && typeof v === 'object' && !Array.isArray(v)) {
|
||||||
|
keys.push(...flattenLeaves(v, next));
|
||||||
|
} else {
|
||||||
|
keys.push(next);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return keys;
|
||||||
|
}
|
||||||
|
|
||||||
|
function keySet(ns, keyPath) {
|
||||||
|
return `${ns}::${keyPath}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadDefinedKeys() {
|
||||||
|
const translationMod = await import(
|
||||||
|
pathToFileUrl(path.join(LOCALE_DE, 'index.js'))
|
||||||
|
);
|
||||||
|
const translation = translationMod.default;
|
||||||
|
const defined = new Map();
|
||||||
|
defined.set('translation', new Set(flattenLeaves(translation)));
|
||||||
|
|
||||||
|
for (const ns of SEPARATE_NAMESPACES) {
|
||||||
|
const mod = await import(pathToFileUrl(path.join(LOCALE_DE, `${ns}.js`)));
|
||||||
|
defined.set(ns, new Set(flattenLeaves(mod.default)));
|
||||||
|
}
|
||||||
|
|
||||||
|
return defined;
|
||||||
|
}
|
||||||
|
|
||||||
|
function pathToFileUrl(p) {
|
||||||
|
const normalized = path.resolve(p);
|
||||||
|
return new URL(`file://${normalized}`).href;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function collectSourceFiles(dir, out = []) {
|
||||||
|
const entries = await readdir(dir, { withFileTypes: true });
|
||||||
|
for (const e of entries) {
|
||||||
|
const full = path.join(dir, e.name);
|
||||||
|
if (e.isDirectory()) {
|
||||||
|
if (full.includes(`${path.sep}i18n${path.sep}locales`)) continue;
|
||||||
|
await collectSourceFiles(full, out);
|
||||||
|
} else if (/\.(jsx?|tsx?)$/.test(e.name)) {
|
||||||
|
out.push(full);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Per file: map translation function alias -> i18next namespace.
|
||||||
|
*/
|
||||||
|
function buildAliasMap(source) {
|
||||||
|
const map = new Map();
|
||||||
|
|
||||||
|
const named = /const\s*\{\s*t:\s*(\w+)\s*\}\s*=\s*useTranslation\s*\(\s*['"]([^'"]+)['"]\s*\)/g;
|
||||||
|
let m;
|
||||||
|
while ((m = named.exec(source))) {
|
||||||
|
map.set(m[1], m[2]);
|
||||||
|
}
|
||||||
|
|
||||||
|
const tWithNs =
|
||||||
|
/const\s*\{\s*t\s*\}\s*=\s*useTranslation\s*\(\s*['"]([^'"]+)['"]\s*\)/g;
|
||||||
|
while ((m = tWithNs.exec(source))) {
|
||||||
|
map.set('t', m[1]);
|
||||||
|
}
|
||||||
|
|
||||||
|
const tDefault = /const\s*\{\s*t\s*\}\s*=\s*useTranslation\s*\(\s*\)/g;
|
||||||
|
while (tDefault.exec(source)) {
|
||||||
|
map.set('t', 'translation');
|
||||||
|
}
|
||||||
|
|
||||||
|
// withTranslation HOC: t comes from props (any position in destructuring)
|
||||||
|
const tFromThisProps =
|
||||||
|
/const\s*\{[^}]*\bt(?:\s*:\s*(\w+))?\b[^}]*\}\s*=\s*this\.props/;
|
||||||
|
const mProps = tFromThisProps.exec(source);
|
||||||
|
if (mProps) {
|
||||||
|
map.set(mProps[1] || 't', 'translation');
|
||||||
|
}
|
||||||
|
const tFromProps =
|
||||||
|
/const\s*\{[^}]*\bt(?:\s*:\s*(\w+))?\b[^}]*\}\s*=\s*props\b/;
|
||||||
|
const mP = tFromProps.exec(source);
|
||||||
|
if (mP) {
|
||||||
|
map.set(mP[1] || 't', 'translation');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!map.has('t')) {
|
||||||
|
map.set('t', 'translation');
|
||||||
|
}
|
||||||
|
|
||||||
|
return map;
|
||||||
|
}
|
||||||
|
|
||||||
|
function escapeRe(s) {
|
||||||
|
return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Extract static keys from t-like calls for known aliases.
|
||||||
|
*/
|
||||||
|
function extractUsedKeysFromSource(source, filePath) {
|
||||||
|
const aliasMap = buildAliasMap(source);
|
||||||
|
const used = new Set();
|
||||||
|
const dynamicHints = [];
|
||||||
|
let m;
|
||||||
|
|
||||||
|
const propsT =
|
||||||
|
/(?:this\.props\.t|props\.t)\(\s*['"]([^'"]+)['"]/g;
|
||||||
|
while ((m = propsT.exec(source))) {
|
||||||
|
used.add(keySet('translation', m[1]));
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const [alias, ns] of aliasMap) {
|
||||||
|
const re = new RegExp(
|
||||||
|
`\\b${escapeRe(alias)}\\(\\s*['"]([^'"]+)['"]`,
|
||||||
|
'g'
|
||||||
|
);
|
||||||
|
while ((m = re.exec(source))) {
|
||||||
|
used.add(keySet(ns, m[1]));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const tplStatic = /\b(\w+)\(\s*`([^`${}]*)`\s*\)/g;
|
||||||
|
while ((m = tplStatic.exec(source))) {
|
||||||
|
const alias = m[1];
|
||||||
|
const key = m[2].trim();
|
||||||
|
if (!key || !aliasMap.has(alias)) continue;
|
||||||
|
if (/^[a-zA-Z][a-zA-Z0-9_.]*$/.test(key)) {
|
||||||
|
used.add(keySet(aliasMap.get(alias), key));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
/(?:this\.props\.t|props\.t|\bt\w*)\(\s*`[^`]*\$\{/.test(source)
|
||||||
|
) {
|
||||||
|
dynamicHints.push(filePath);
|
||||||
|
}
|
||||||
|
|
||||||
|
return { used, dynamicHints };
|
||||||
|
}
|
||||||
|
|
||||||
|
function mergeSets(into, from) {
|
||||||
|
for (const x of from) into.add(x);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function main() {
|
||||||
|
const jsonOut = process.argv.includes('--json');
|
||||||
|
|
||||||
|
const defined = await loadDefinedKeys();
|
||||||
|
const files = await collectSourceFiles(SRC);
|
||||||
|
|
||||||
|
const allUsed = new Set();
|
||||||
|
const dynamicFiles = new Set();
|
||||||
|
|
||||||
|
for (const file of files) {
|
||||||
|
const source = await readFile(file, 'utf8');
|
||||||
|
const { used, dynamicHints } = extractUsedKeysFromSource(source, file);
|
||||||
|
mergeSets(allUsed, used);
|
||||||
|
if (dynamicHints.length) dynamicFiles.add(file);
|
||||||
|
}
|
||||||
|
|
||||||
|
addKnownDynamicLegalKeys(allUsed);
|
||||||
|
propagateEmbeddedCopies(allUsed);
|
||||||
|
|
||||||
|
const unusedByNs = new Map();
|
||||||
|
let totalDefined = 0;
|
||||||
|
let totalUnused = 0;
|
||||||
|
|
||||||
|
for (const [ns, keys] of defined) {
|
||||||
|
const unused = [];
|
||||||
|
for (const k of keys) {
|
||||||
|
totalDefined++;
|
||||||
|
const full = keySet(ns, k);
|
||||||
|
if (!allUsed.has(full)) {
|
||||||
|
unused.push(k);
|
||||||
|
totalUnused++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (unused.length) unusedByNs.set(ns, unused.sort());
|
||||||
|
}
|
||||||
|
|
||||||
|
const orphans = new Set();
|
||||||
|
for (const u of allUsed) {
|
||||||
|
const [ns, keyPath] = u.split('::');
|
||||||
|
const set = defined.get(ns);
|
||||||
|
if (!set || !set.has(keyPath)) {
|
||||||
|
orphans.add(u);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (jsonOut) {
|
||||||
|
console.log(
|
||||||
|
JSON.stringify(
|
||||||
|
{
|
||||||
|
totalDefined,
|
||||||
|
totalUsed: allUsed.size,
|
||||||
|
totalUnused,
|
||||||
|
unusedByNamespace: Object.fromEntries(unusedByNs),
|
||||||
|
usedButNotDefined: [...orphans].sort(),
|
||||||
|
filesWithLikelyDynamicT: [...dynamicFiles].map((f) =>
|
||||||
|
path.relative(ROOT, f)
|
||||||
|
),
|
||||||
|
},
|
||||||
|
null,
|
||||||
|
2
|
||||||
|
)
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('i18n key usage (locale: de)\n');
|
||||||
|
console.log(
|
||||||
|
'Legal strings exist twice: separate namespaces (AGB, Datenschutz, …) and embedded copies'
|
||||||
|
);
|
||||||
|
console.log(
|
||||||
|
'under translation (legalAgbDelivery.*, …). The latter are marked used when the former are.\n'
|
||||||
|
);
|
||||||
|
console.log(`Defined keys (all namespaces): ${totalDefined}`);
|
||||||
|
console.log(`References after static scan + known dynamic legal patterns: ${allUsed.size}`);
|
||||||
|
console.log(`Unused (best-effort): ${totalUnused}`);
|
||||||
|
console.log(`Used but not in locale files: ${orphans.size}\n`);
|
||||||
|
|
||||||
|
const stillDynamic = [...dynamicFiles].filter(
|
||||||
|
(f) =>
|
||||||
|
![
|
||||||
|
'pages/AGB.js',
|
||||||
|
'pages/Datenschutz.js',
|
||||||
|
'pages/Impressum.js',
|
||||||
|
].includes(path.relative(SRC, f).replace(/\\/g, '/'))
|
||||||
|
);
|
||||||
|
if (stillDynamic.length) {
|
||||||
|
console.log(
|
||||||
|
'Other files with t(`…${…}…`) (may still hide unused keys — not expanded):'
|
||||||
|
);
|
||||||
|
for (const f of stillDynamic.sort()) {
|
||||||
|
console.log(` ${path.relative(ROOT, f)}`);
|
||||||
|
}
|
||||||
|
console.log('');
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const [ns, keys] of [...unusedByNs.entries()].sort((a, b) =>
|
||||||
|
a[0].localeCompare(b[0])
|
||||||
|
)) {
|
||||||
|
console.log(`--- ${ns} (${keys.length} unused) ---`);
|
||||||
|
for (const k of keys) {
|
||||||
|
console.log(` ${k}`);
|
||||||
|
}
|
||||||
|
console.log('');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (orphans.size) {
|
||||||
|
console.log('--- Referenced in code but missing from de locale ---');
|
||||||
|
for (const o of [...orphans].sort()) {
|
||||||
|
console.log(` ${o.replace('::', ' / ')}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(
|
||||||
|
'\nNote: Keys built from arbitrary variables or unknown dynamic templates may still look unused.'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
main().catch((err) => {
|
||||||
|
console.error(err);
|
||||||
|
process.exit(1);
|
||||||
|
});
|
||||||
49
src/utils/jsErrorTelemetry.js
Normal file
49
src/utils/jsErrorTelemetry.js
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
/**
|
||||||
|
* POST client errors to /api/telemetry/js-errors (shop API).
|
||||||
|
* Uses same-origin relative URL so the dev-server proxy forwards to the backend.
|
||||||
|
*/
|
||||||
|
|
||||||
|
const TELEMETRY_PATH = '/api/telemetry/js-errors';
|
||||||
|
|
||||||
|
function send(payload) {
|
||||||
|
fetch(TELEMETRY_PATH, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(payload),
|
||||||
|
}).catch(() => {});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Register global listeners once. Safe to call in browser only.
|
||||||
|
*/
|
||||||
|
export function installJsErrorTelemetry() {
|
||||||
|
if (typeof window === 'undefined') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('error', (event) => {
|
||||||
|
send({
|
||||||
|
message: event.message || 'Error',
|
||||||
|
name: event.error?.name,
|
||||||
|
filename: event.filename,
|
||||||
|
lineno: event.lineno,
|
||||||
|
colno: event.colno,
|
||||||
|
url: window.location.href,
|
||||||
|
stack: event.error && event.error.stack,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('unhandledrejection', (event) => {
|
||||||
|
const reason = event.reason;
|
||||||
|
send({
|
||||||
|
message:
|
||||||
|
reason && typeof reason.message === 'string'
|
||||||
|
? reason.message
|
||||||
|
: String(reason),
|
||||||
|
name: reason && reason.name,
|
||||||
|
stack: reason && reason.stack,
|
||||||
|
url: window.location.href,
|
||||||
|
context: { type: 'unhandledrejection' },
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user