Make shared component build work in isolation (#31066)
* Make shared component build work in isolation * Add deps that were missing because they were getting picked up from element-web main but shared-components needs itself * Exclude test files from dts generation * Bump version * Change all the shared-component import to be the built artifact * Don't randomly inhale eslint configs in parent dirs please * maybe we don't need this anymore? * maybe fix build * Maybe fix docker build * More build faff * build:res on the parent as part of shared component prepare * link shared component repo inn docker build * 💅 * 💅x2 * Try converting the translation keys to a .d.ts file manually so it gets bundled rather than left as a relative import to the json file * add the script * Add this back for 2nd time now I think * Shouldn't need this anymore * patch-package on prepare because we're patching a dev dependency so it won't be there if we're installed as a dependency * Unused import * Prettier compliance * Only use counterpart from shared components as per comment * Import shared components CSS * Prettier * Call the one from shared components rather than recurse infinitely * Hopefully make tests work * wake up, comment goes before import * Fix lint errors * Fix dupe TranslationKey export * Update compound-web to fix type error An update to @types.react adds the 'hint' value to the enum of the 'popover' attribute and this version of compound-web uses the maching verson of @types/react so they don't conflict. * Maybe, hopefully, get the types working? Please? * Add copyright header to i18nkeys as eslint complains otherwise since it's now in src * prettier * stop running shared-component tests in EW * update snapshots because flex is now from an external stylesheet I guess * More snapshots * Manual class update * Avoid bundling compound bits Because a) it's silly and b) it means we end up bundling a copy of floating-ui too which causes absolute madness with its useDelayGroup contexts. * ignore test util files for coverage * Add !important because the styles are being applied in a different order now * Another !important because css order has changed * Try adding it here to make the test files ignored * More !important * commit yarn lock change * Add shared components coverage file * Update snapshots Because the line height was being overridden to 22.5px somehow by something I can't find, and now isn't: surely the normal 1.5rem is more sensible. * Update snapshots, attempt 2 * Another !important * More snapshot updates * Add test for i18n wrappers & add test script * lint * Prettier * Hopefully run shared component tests * don't need this bit for non-matrix * install ew deps * rigfht coverage location * Rename job here too * Try different coverage filename * Fix copyrights & comment * Typo Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> --------- Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
David Baker
GitHub
46
packages/shared-components/src/utils/i18n.test.ts
Normal file
46
packages/shared-components/src/utils/i18n.test.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
/*
|
||||
* Copyright 2025 Element Creations Ltd.
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
* Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import counterpart from "counterpart";
|
||||
|
||||
import { registerTranslations, setMissingEntryGenerator, getLocale, setLocale } from "./i18n";
|
||||
|
||||
describe("i18n utils", () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
it("should wrap registerTranslations", () => {
|
||||
jest.spyOn(counterpart, "registerTranslations");
|
||||
|
||||
registerTranslations("en", { test: "This is a test" });
|
||||
expect(counterpart.registerTranslations).toHaveBeenCalledWith("en", { test: "This is a test" });
|
||||
});
|
||||
|
||||
it("should wrap setMissingEntryGenerator", () => {
|
||||
jest.spyOn(counterpart, "setMissingEntryGenerator");
|
||||
|
||||
const dummyFn = jest.fn();
|
||||
|
||||
setMissingEntryGenerator(dummyFn);
|
||||
expect(counterpart.setMissingEntryGenerator).toHaveBeenCalledWith(dummyFn);
|
||||
});
|
||||
|
||||
it("should wrap getLocale", () => {
|
||||
jest.spyOn(counterpart, "getLocale");
|
||||
|
||||
getLocale();
|
||||
expect(counterpart.getLocale).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("should wrap setLocale", () => {
|
||||
jest.spyOn(counterpart, "setLocale");
|
||||
|
||||
setLocale("en");
|
||||
expect(counterpart.setLocale).toHaveBeenCalledWith("en");
|
||||
});
|
||||
});
|
||||
@@ -22,10 +22,10 @@
|
||||
* @return a React <span> component if any non-strings were used in substitutions, otherwise a string
|
||||
*/
|
||||
import React from "react";
|
||||
import { type TranslationKey as _TranslationKey, KEY_SEPARATOR } from "matrix-web-i18n";
|
||||
import { KEY_SEPARATOR } from "matrix-web-i18n";
|
||||
import counterpart from "counterpart";
|
||||
|
||||
import type Translations from "../../../../src/i18n/strings/en_EN.json";
|
||||
import type { TranslationKey } from "../index";
|
||||
|
||||
// @ts-ignore - $webapp is a webpack resolve alias pointing to the output directory, see webpack config
|
||||
import webpackLangJsonUrl from "$webapp/i18n/languages.json";
|
||||
@@ -45,16 +45,23 @@ counterpart.setSeparator(KEY_SEPARATOR);
|
||||
const FALLBACK_LOCALE = "en";
|
||||
counterpart.setFallbackLocale(FALLBACK_LOCALE);
|
||||
|
||||
/**
|
||||
* A type representing the union of possible keys into the translation file using `|` delimiter to access nested fields.
|
||||
* @example `common|error` to access `error` within the `common` sub-object.
|
||||
* {
|
||||
* "common": {
|
||||
* "error": "Error"
|
||||
* }
|
||||
* }
|
||||
*/
|
||||
export type TranslationKey = _TranslationKey<typeof Translations>;
|
||||
// export wrappers around these functions because if we used counterpart directly from
|
||||
// element-web, it operates on a different instance of counterpart
|
||||
export function registerTranslations(locale: string, data: object): void {
|
||||
counterpart.registerTranslations(locale, data);
|
||||
}
|
||||
|
||||
export function setMissingEntryGenerator(callback: (value: string) => void): void {
|
||||
counterpart.setMissingEntryGenerator(callback);
|
||||
}
|
||||
|
||||
export function getLocale(): string {
|
||||
return counterpart.getLocale();
|
||||
}
|
||||
|
||||
export function setLocale(value: string): string {
|
||||
return counterpart.setLocale(value);
|
||||
}
|
||||
|
||||
// Function which only purpose is to mark that a string is translatable
|
||||
// Does not actually do anything. It's helpful for automatic extraction of translatable strings
|
||||
|
||||
Reference in New Issue
Block a user