peter
aac79ffa53
Every locale formatter takes the language as an argument. Under the React
Compiler a formatter that read the i18n singleton was memoized on its other
arguments, so a card kept "2 hr 4 min" after a switch to Hungarian; plexLang()
had the same flaw and left Plex queries in the old language. Components now
take the language from useTranslation, and the signature makes forgetting it
a type error.
- ratings, file sizes, stream stats: the language's decimal mark ("8,3")
- view and subscriber counts compact in the language ("1,2 E")
- seconds as the language's unit ("6 mp") in the sliders and the stats
- a person's birth and death dates as dates, not ISO strings
- A-Z lists by the shown name in the language's alphabet (compareText),
the tag catalog re-sorted by its translated names
- lint local/locale-format (was date-format) also refuses Intl.NumberFormat
outside lib/format.ts, localeCompare, and a component reading the language
off the i18n singleton
70 lines
3.3 KiB
TypeScript
70 lines
3.3 KiB
TypeScript
import { describe, expect, it } from "vitest";
|
|
|
|
import { eslint } from "./lintProbe.testkit";
|
|
|
|
// `local/locale-format` (eslint.config.js): docs/DESIGN.md "Copy" — a date, a number and an
|
|
// alphabetical order are in the UI language, built in lib/format.ts (text compared in lib/collate.ts),
|
|
// and a component takes the language off useTranslation, never the i18n singleton. This pins that the
|
|
// rule fires on the ways each used to be done by hand, and where it stands down.
|
|
const RULE = "local/locale-format";
|
|
|
|
async function hits(source: string, filePath = "src/components/__probe.tsx"): Promise<number> {
|
|
const [result] = await eslint.lintText(source, { filePath });
|
|
return (result?.messages ?? []).filter((m) => m.ruleId === RULE).length;
|
|
}
|
|
|
|
describe("a hand-formatted date or number", () => {
|
|
it("is refused as toLocale*String or an Intl date or number formatter", async () => {
|
|
expect(await hits("export const a = (d: Date) => d.toLocaleString('en');\n")).toBe(1);
|
|
expect(await hits("export const b = (d: Date) => d.toLocaleDateString();\n")).toBe(1);
|
|
expect(await hits("export const c = (d: Date) => d.toLocaleTimeString();\n")).toBe(1);
|
|
expect(
|
|
await hits("export const e = new Intl.DateTimeFormat('en', { month: 'short' });\n"),
|
|
).toBe(1);
|
|
expect(await hits("export const f = new Intl.RelativeTimeFormat('en');\n")).toBe(1);
|
|
expect(await hits("export const h = new Intl.NumberFormat('en');\n")).toBe(1);
|
|
});
|
|
|
|
it("is left alone in lib/format.ts and in a test", async () => {
|
|
const src = "export const g = (d: Date) => d.toLocaleString('en');\n";
|
|
expect(await hits(src, "src/lib/format.ts")).toBe(0);
|
|
expect(await hits(src, "src/lib/format.test.ts")).toBe(0);
|
|
expect(await hits("export const h = new Intl.NumberFormat('en');\n", "src/lib/format.ts")).toBe(
|
|
0,
|
|
);
|
|
});
|
|
});
|
|
|
|
describe("a hand-rolled alphabetical order", () => {
|
|
it("is refused as localeCompare, or an Intl.Collator outside lib/collate.ts", async () => {
|
|
expect(await hits("export const s = (a: string, b: string) => a.localeCompare(b);\n")).toBe(1);
|
|
expect(
|
|
await hits(
|
|
"export const s = (a: string, b: string) => a.localeCompare(b);\n",
|
|
"src/lib/x.ts",
|
|
),
|
|
).toBe(1);
|
|
expect(await hits("export const c = new Intl.Collator('hu');\n")).toBe(1);
|
|
expect(await hits("export const c = new Intl.Collator('hu');\n", "src/lib/collate.ts")).toBe(0);
|
|
});
|
|
});
|
|
|
|
describe("the language in a component", () => {
|
|
it("is refused off the i18n singleton", async () => {
|
|
const src = 'import i18n from "../i18n";\nexport const L = () => <b>{i18n.language}</b>;\n';
|
|
expect(await hits(src)).toBe(1);
|
|
const next =
|
|
'import i18next from "i18next";\nexport const L = () => <b>{i18next.language}</b>;\n';
|
|
expect(await hits(next)).toBe(1);
|
|
});
|
|
|
|
it("is taken from useTranslation, and the singleton stays usable outside components", async () => {
|
|
const hook =
|
|
'import { useTranslation } from "react-i18next";\n' +
|
|
"export const L = () => {\n const { i18n } = useTranslation();\n return <b>{i18n.language}</b>;\n};\n";
|
|
expect(await hits(hook)).toBe(0);
|
|
const lib = 'import i18n from "../i18n";\nexport const lang = () => i18n.language;\n';
|
|
expect(await hits(lib, "src/lib/__probe.ts")).toBe(0);
|
|
});
|
|
});
|