Skip to content

Commit 43072cc

Browse files
deleoniodeleonio
authored
Refactor translations to use cached values (#8084)
2 parents 7616bed + 23158c2 commit 43072cc

File tree

19 files changed

+87
-41
lines changed

19 files changed

+87
-41
lines changed

‎AGENTS.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -232,6 +232,7 @@ The samples are located in `packages/samples/react` and demonstrate how to use t
232232
- See also the [Contributing Guide](CONTRIBUTING.md) for more details on coding conventions and best practices.
233233
- Spell "KoliBri" with this casing in all documentation and code. The only exception is the component named KolKolibri.
234234
- Use ESM import syntax in browser code and scripts whenever supported, instead of `require` imports.
235+
- Do not place constant declarations before import statements; imports must always be at the very top of the file.
235236

236237
## Linting and Formatting
237238

‎packages/components/src/components/card/component.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { dispatchDomEvent, KolEvent } from '../../utils/events';
1919
})
2020
export class KolCard implements CardAPI {
2121
@Element() private readonly host?: HTMLKolCardElement;
22+
private readonly translateClose = translate('kol-close');
2223

2324
private readonly close = () => {
2425
if (this._on?.onClose !== undefined) {
@@ -54,7 +55,7 @@ export class KolCard implements CardAPI {
5455
icon: 'codicon codicon-close',
5556
},
5657
}}
57-
_label={translate('kol-close')}
58+
_label={this.translateClose}
5859
_on={this.on}
5960
_tooltipAlign="left"
6061
></KolButtonWcTag>

‎packages/components/src/components/form/shadow.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@ export class KolForm implements FormAPI {
2323
@Element() private readonly host?: HTMLKolTextareaElement;
2424
errorListBlock?: HTMLElement;
2525
errorListFirstLink?: HTMLElement;
26+
private readonly translateErrorListMessage = translate('kol-error-list-message');
27+
private readonly translateErrorList = translate('kol-error-list');
28+
private readonly translateFormDescription = translate('kol-form-description');
2629

2730
/* Hint: This method may not be used at all while events are handled in form/controller#propagateSubmitEventToForm */
2831
private readonly onSubmit = (event: Event) => {
@@ -60,8 +63,8 @@ export class KolForm implements FormAPI {
6063

6164
private renderErrorList(errorList?: ErrorListPropType[]): JSX.Element {
6265
return (
63-
<KolAlertFc class="kol-form__alert" ref={this.setBlockElement} type="error" variant="card" label={translate('kol-error-list-message')}>
64-
<nav aria-label={translate('kol-error-list')}>
66+
<KolAlertFc class="kol-form__alert" ref={this.setBlockElement} type="error" variant="card" label={this.translateErrorListMessage}>
67+
<nav aria-label={this.translateErrorList}>
6568
<ul>
6669
{errorList?.map((error, index) => (
6770
<li key={index}>
@@ -85,7 +88,7 @@ export class KolForm implements FormAPI {
8588
<form class="kol-form" method="post" onSubmit={this.onSubmit} onReset={this.onReset} autoComplete="off" noValidate>
8689
{this.state._requiredText === true ? (
8790
<p>
88-
<div class="kol-form__mandatory-fields-hint">{translate('kol-form-description')}</div>
91+
<div class="kol-form__mandatory-fields-hint">{this.translateFormDescription}</div>
8992
</p>
9093
) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (
9194
<p>

‎packages/components/src/components/input-file/shadow.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,9 @@ export class KolInputFile implements InputFileAPI, FocusableElement {
4444
@Element() private readonly host?: HTMLKolInputFileElement;
4545
private inputRef?: HTMLInputElement;
4646

47+
private readonly translateDataBrowseText = translate('kol-data-browse-text');
48+
private readonly translateFilenameText = translate('kol-filename-text');
49+
4750
private readonly catchRef = (ref?: HTMLInputElement) => {
4851
this.inputRef = ref;
4952
};
@@ -97,7 +100,7 @@ export class KolInputFile implements InputFileAPI, FocusableElement {
97100
<KolInputContainerFc state={this.state}>
98101
<span class={clsx('kol-input-container__filename', { 'kol-input-container__filename--has-file': this.hasFileSelected })}>{this.filename}</span>
99102
<KolInputStateWrapperFc {...this.getInputProps()} />
100-
<KolButtonWcTag class="kol-input-container__button" _label={translate('kol-data-browse-text')} _buttonVariant="primary" _disabled={this._disabled} />
103+
<KolButtonWcTag class="kol-input-container__button" _label={this.translateDataBrowseText} _buttonVariant="primary" _disabled={this._disabled} />
101104
</KolInputContainerFc>
102105
</KolFormFieldStateWrapperFc>
103106
);
@@ -208,7 +211,7 @@ export class KolInputFile implements InputFileAPI, FocusableElement {
208211
*/
209212
@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;
210213

211-
@State() private filename: string = translate('kol-filename-text');
214+
@State() private filename: string = this.translateFilenameText;
212215
@State() private hasFileSelected: boolean = false;
213216

214217
@State() public state: InputFileStates = {
@@ -357,7 +360,7 @@ export class KolInputFile implements InputFileAPI, FocusableElement {
357360
? Array.from(value)
358361
.map((file) => file.name)
359362
.join(', ')
360-
: translate('kol-filename-text');
363+
: this.translateFilenameText;
361364

362365
this.controller.onFacade.onChange(event, value);
363366
this.controller.setFormAssociatedValue(value);

‎packages/components/src/components/input-password/shadow.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,9 @@ export class KolInputPassword implements InputPasswordAPI, FocusableElement {
4848
@Element() private readonly host?: HTMLKolInputPasswordElement;
4949
private inputRef?: HTMLInputElement;
5050

51+
private readonly translateHidePassword = translate('kol-hide-password');
52+
private readonly translateShowPassword = translate('kol-show-password');
53+
5154
private readonly catchRef = (ref?: HTMLInputElement) => {
5255
this.inputRef = ref;
5356
};
@@ -121,7 +124,7 @@ export class KolInputPassword implements InputPasswordAPI, FocusableElement {
121124
componentName="button"
122125
class="kol-input-password__password-toggle-button"
123126
data-testid="kol-input-password-toggle-button"
124-
label={this._passwordVisible ? translate('kol-hide-password') : translate('kol-show-password')}
127+
label={this._passwordVisible ? this.translateHidePassword : this.translateShowPassword}
125128
buttonVariant="ghost"
126129
onClick={(): void => {
127130
this._passwordVisible = !this._passwordVisible;

‎packages/components/src/components/kolibri/shadow.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,11 @@ import type { KolibriAPI, KolibriStates, PropColor, Stringified } from '../../sc
1717
shadow: true,
1818
})
1919
export class KolKolibri implements KolibriAPI {
20+
private readonly translateKolibriLogo = translate('kol-kolibri-logo');
2021
public render(): JSX.Element {
2122
const fillColor = `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;
2223
return (
23-
<svg class="kol-kolibri" role="img" aria-label={translate('kol-kolibri-logo')} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" fill={fillColor}>
24+
<svg class="kol-kolibri" role="img" aria-label={this.translateKolibriLogo} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" fill={fillColor}>
2425
<path d="M353 322L213 304V434L353 322Z" />
2526
<path d="M209 564V304L149 434L209 564Z" />
2627
<path d="M357 316L417 250L361 210L275 244L357 316Z" />

‎packages/components/src/components/link/component.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ export class KolLinkWc implements InternalLinkAPI, FocusableElement {
7474
private unsubscribeOnLocationChange?: UnsubscribeFunction;
7575

7676
private readonly internalDescriptionById = nonce();
77+
private readonly translateOpenLinkInTab = translate('kol-open-link-in-tab');
7778

7879
private readonly catchRef = (ref?: HTMLAnchorElement) => {
7980
this.anchorRef = ref;
@@ -153,7 +154,7 @@ export class KolLinkWc implements InternalLinkAPI, FocusableElement {
153154
aria-owns={this.state._ariaOwns}
154155
aria-label={
155156
this.state._hideLabel && typeof this.state._label === 'string'
156-
? `${this.state._label}${isExternal ? ` (${translate('kol-open-link-in-tab')})` : ''}`
157+
? `${this.state._label}${isExternal ? ` (${this.translateOpenLinkInTab})` : ''}`
157158
: undefined
158159
}
159160
class={clsx('kol-link', {
@@ -184,7 +185,7 @@ export class KolLinkWc implements InternalLinkAPI, FocusableElement {
184185
{isExternal && (
185186
<KolIconTag
186187
class="kol-link__icon"
187-
_label={this.state._hideLabel ? '' : translate('kol-open-link-in-tab')}
188+
_label={this.state._hideLabel ? '' : this.translateOpenLinkInTab}
188189
_icons={'codicon codicon-link-external'}
189190
aria-hidden={this.state._hideLabel}
190191
/>

‎packages/components/src/components/modal/shadow.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import clsx from 'clsx';
2424
export class KolModal implements ModalAPI {
2525
@Element() private readonly host?: HTMLKolModalElement;
2626
private refDialog?: HTMLDialogElement;
27+
private readonly translateClose = translate('kol-close');
2728

2829
public disconnectedCallback(): void {
2930
void this.closeModal();
@@ -82,7 +83,7 @@ export class KolModal implements ModalAPI {
8283
icon: 'codicon codicon-close',
8384
},
8485
}}
85-
_label={translate('kol-close')}
86+
_label={this.translateClose}
8687
_on={this.on}
8788
_tooltipAlign="left"
8889
></KolButtonWcTag>

‎packages/components/src/components/pagination/component.tsx‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,13 @@ export class KolPaginationWc implements PaginationAPI {
6363
@Element() private readonly host?: HTMLKolTextareaElement;
6464

6565
private readonly nonce = nonce();
66+
private readonly translatePageFirst = translate('kol-page-first');
67+
private readonly translatePageBack = translate('kol-page-back');
68+
private readonly translatePageNext = translate('kol-page-next');
69+
private readonly translatePageLast = translate('kol-page-last');
70+
private readonly translateEntriesPerSite = translate('kol-entries-per-site');
71+
private readonly translatePage = translate('kol-page');
72+
private readonly translatePagination = translate('kol-pagination');
6673

6774
private readonly calcCount = (total: number, pageSize = 1): number => Math.ceil(total / pageSize);
6875

@@ -110,7 +117,7 @@ export class KolPaginationWc implements PaginationAPI {
110117
_disabled={this.state._page <= 1}
111118
_icons={leftDoubleArrowIcon}
112119
_hideLabel
113-
_label={translate('kol-page-first')}
120+
_label={this.translatePageFirst}
114121
_on={this.onGoToFirst}
115122
_tooltipAlign={this.state._tooltipAlign}
116123
></KolButtonWcTag>
@@ -125,7 +132,7 @@ export class KolPaginationWc implements PaginationAPI {
125132
_disabled={this.state._page <= 1}
126133
_icons={leftSingleArrow}
127134
_hideLabel
128-
_label={translate('kol-page-back')}
135+
_label={this.translatePageBack}
129136
_on={this.onGoBackward}
130137
_tooltipAlign={this.state._tooltipAlign}
131138
></KolButtonWcTag>
@@ -141,7 +148,7 @@ export class KolPaginationWc implements PaginationAPI {
141148
_disabled={count <= this.state._page}
142149
_icons={rightSingleArrowIcon}
143150
_hideLabel
144-
_label={translate('kol-page-next')}
151+
_label={this.translatePageNext}
145152
_on={this.onGoForward}
146153
_tooltipAlign={this.state._tooltipAlign}
147154
></KolButtonWcTag>
@@ -156,7 +163,7 @@ export class KolPaginationWc implements PaginationAPI {
156163
_disabled={count <= this.state._page}
157164
_icons={rightDoubleArrowIcon}
158165
_hideLabel
159-
_label={translate('kol-page-last')}
166+
_label={this.translatePageLast}
160167
_on={this.onGoToEnd}
161168
_tooltipAlign={this.state._tooltipAlign}
162169
></KolButtonWcTag>
@@ -169,7 +176,7 @@ export class KolPaginationWc implements PaginationAPI {
169176
class="kol-pagination__page-size-select"
170177
_hideLabel
171178
_id={`pagination-size-${this.nonce}`}
172-
_label={translate('kol-entries-per-site')}
179+
_label={this.translateEntriesPerSite}
173180
_options={this.state._pageSizeOptions}
174181
_on={{
175182
onChange: this.onChangePageSize,
@@ -238,7 +245,7 @@ export class KolPaginationWc implements PaginationAPI {
238245

239246
@State() public state: PaginationStates = {
240247
_boundaryCount: 1,
241-
_label: translate('kol-pagination'),
248+
_label: this.translatePagination,
242249
_hasButtons: {
243250
first: true,
244251
last: true,
@@ -328,7 +335,7 @@ export class KolPaginationWc implements PaginationAPI {
328335
}}
329336
>
330337
<span slot="expert">
331-
<span class="visually-hidden">{translate('kol-page')}</span> {NUMBER_FORMATTER.format(page)}
338+
<span class="visually-hidden">{this.translatePage}</span> {NUMBER_FORMATTER.format(page)}
332339
</span>
333340
</KolButtonWcTag>
334341
</li>
@@ -340,7 +347,7 @@ export class KolPaginationWc implements PaginationAPI {
340347
<li key={nonce()}>
341348
<KolButtonWcTag class="kol-pagination__button kol-pagination__button--selected" _customClass={this.state._customClass} _disabled={true} _label="">
342349
<span slot="expert">
343-
<span class="visually-hidden">{translate('kol-page')}</span> {NUMBER_FORMATTER.format(page)}
350+
<span class="visually-hidden">{this.translatePage}</span> {NUMBER_FORMATTER.format(page)}
344351
</span>
345352
</KolButtonWcTag>
346353
</li>

‎packages/components/src/components/single-select/shadow.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,8 @@ export class KolSingleSelect implements SingleSelectAPI {
5151
@Element() private readonly host?: HTMLKolSingleSelectElement;
5252
private refInput?: HTMLInputElement;
5353
private refOptions: HTMLLIElement[] = [];
54+
private readonly translateDeleteSelection = translate('kol-delete-selection');
55+
private readonly translateNoResultsMessage = translate('kol-no-results-message');
5456
private oldValue?: StencilUnknown;
5557

5658
@Method()
@@ -265,7 +267,7 @@ export class KolSingleSelect implements SingleSelectAPI {
265267
<KolIconTag
266268
_icons="codicon codicon-close"
267269
data-testid="single-select-delete"
268-
_label={translate('kol-delete-selection')}
270+
_label={this.translateDeleteSelection}
269271
onClick={() => {
270272
this.clearSelection();
271273
this.refInput?.focus();
@@ -322,7 +324,7 @@ export class KolSingleSelect implements SingleSelectAPI {
322324
/>
323325
))
324326
) : (
325-
<li class="kol-single-select__no-results-message">{translate('kol-no-results-message')} </li>
327+
<li class="kol-single-select__no-results-message">{this.translateNoResultsMessage} </li>
326328
)}
327329
</CustomSuggestionsOptionsGroupFc>
328330
)}

0 commit comments

Comments
 (0)
⚡