Skip to content

✨ [Story localization] Transform usages of localization service to async [part 1]#37947

Merged
mszylkowski merged 25 commits intoampproject:mainfrom
mszylkowski:localizeAll
Mar 28, 2022
Merged

✨ [Story localization] Transform usages of localization service to async [part 1]#37947
mszylkowski merged 25 commits intoampproject:mainfrom
mszylkowski:localizeAll

Conversation

@mszylkowski
Copy link
Copy Markdown
Contributor

Replaces all usages of localize() helper function: amp-story, interactives, 360, share-menu, consent, hint, info-dialog, unsupported-browser, pagination-buttons

Missing replacing usages of localizationServices.getLocalizedString(): story-ads, page-attachment (+draggable-drawer, open-page-attachment, forms), share-menu, shopping. Will work on these next.

const renderActivateButtonTemplate = () => (
<button class="i-amphtml-story-360-activate-button" role="button">
<span class="i-amphtml-story-360-activate-text"></span>
<span
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The class in this element was only used for localization, so we can remove it and use the attribute directly

*/
export function localizeTemplate(template, context) {
const localizationService = getLocalizationService(context);
const localizationService = Services.localizationForDoc(context);
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Need to use this function so it doesn't bundle the localization service with all the components

vsync.mutatePromise(() => {
el.textContent = str;
})
template.isConnected
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need to mutate if the template is not connected because the DOM is only updated when it's connected

<div class="i-amphtml-story-overlay-text">
{localize(
context,
<div
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The class in this element is unnecessary as well

<button
class="i-amphtml-story-button-move"
aria-label={initialState.label && localize(context, initialState.label)}
i-amphtml-i18n-aria-label={initialState.label}
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

initialState.label is always non-null, since all the buttons have labels. No need to check if it is non-null

@mszylkowski mszylkowski requested a review from gmajoulet March 25, 2022 14:14
@mszylkowski mszylkowski self-assigned this Mar 25, 2022
@mszylkowski mszylkowski marked this pull request as ready for review March 25, 2022 14:14
@amp-owners-bot
Copy link
Copy Markdown

Hey @gmajoulet! These files were changed:

extensions/amp-story-360/0.1/amp-story-360.js
extensions/amp-story-education/0.1/amp-story-education.js
extensions/amp-story-interactive/0.1/amp-story-interactive-img-quiz.js
extensions/amp-story-interactive/0.1/amp-story-interactive-quiz.js
extensions/amp-story-interactive/0.1/interactive-disclaimer.js
extensions/amp-story-interactive/0.1/test/test-amp-story-interactive-img-quiz.js
extensions/amp-story-interactive/0.1/test/test-amp-story-interactive-quiz.js
extensions/amp-story-share-menu/0.1/amp-story-share-menu.js
extensions/amp-story/1.0/amp-story-consent.js
extensions/amp-story/1.0/amp-story-hint.js
extensions/amp-story/1.0/amp-story-info-dialog.js
extensions/amp-story/1.0/amp-story-localization-service.js
+9 more

Hey @processprocess, @t0mg! These files were changed:

extensions/amp-story-360/0.1/amp-story-360.js

Hey @newmuis! These files were changed:

extensions/amp-story-share-menu/0.1/amp-story-share-menu.js
extensions/amp-story/1.0/amp-story-consent.js
extensions/amp-story/1.0/amp-story-hint.js
extensions/amp-story/1.0/amp-story-info-dialog.js
extensions/amp-story/1.0/amp-story-localization-service.js
extensions/amp-story/1.0/amp-story-page.js
extensions/amp-story/1.0/amp-story-unsupported-browser-layer.css
extensions/amp-story/1.0/amp-story-unsupported-browser-layer.js
extensions/amp-story/1.0/pagination-buttons.js
extensions/amp-story/1.0/test/test-amp-story-consent.js
extensions/amp-story/1.0/test/test-amp-story-hint.js
extensions/amp-story/1.0/test/test-amp-story-info-dialog.js
+2 more

@mszylkowski mszylkowski merged commit 1e2e804 into ampproject:main Mar 28, 2022
@ampprojectbot
Copy link
Copy Markdown
Member

Warning: disparity between this PR Percy build and its main build

The Percy build for this PR was approved (either manually by a member of the AMP team, or automatically if there were no visual diffs). However, during a continuous integration step we generated another Percy build using the commit on the main branch that this PR was merged into, and there appears to be a mismatch between the two.

This is possibly an indication of an issue with this pull request, but could also be the result of flakiness. Please inspect the two builds < This PR's Percy build / main commit's Percy build > and determine further action:

  • If the disparity appears to be caused by this PR, please create an bug report or send out a new PR to fix
  • If the disparity appears to be a flake, please @-mention ampproject/wg-approvers in a comment
  • If there is no disparity and this comment was created by mistake, please @-mention ampproject/wg-infra
  • If unsure, @-mention ampproject/wg-approvers

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants