Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[VER-421] fix: Correctly inject body classes when <body> has no attributes #1194

Merged
merged 1 commit into from
Mar 25, 2024

Conversation

Ldoppea
Copy link
Member

@Ldoppea Ldoppea commented Mar 22, 2024

Previous regex would inject body classes in the wrong place if the body has no attributes but its child div has class attribute

In that case, the function would inject the classes in the child div classes

With previous regex the following HTML

<html>
  <head></head>
  <body>
    <div class="application"></div>
  </body>
</html>

Would output

<html>
  <head></head>
  <body>
    <div class="application flagship-app flagship-os-ios flagship-route-home"></div>
  </body>
</html>

With new regex, it outputs

<html>
  <head></head>
  <body class="flagship-app flagship-os-ios flagship-route-home">
    <div class="application"></div>
  </body>
</html>

This also fixes a production bug where we found that a div with same value for role and class would see values injected in its role instead of its class (this only happens if role is declared first)

With previous regex the following HTML

<html>
  <head></head>
  <body>
    <div role="application" class="application"></div>
  </body>
</html>

Would output

<html>
  <head></head>
  <body>
    <div role="application flagship-app flagship-os-ios flagship-route-home" class="application"></div>
  </body>
</html>

This would break document.querySelector("[role=application]") call made by our libraries

This commit fixes this observed bug, but this is a side effect as we now ensure that only the <body> tag is impacted

But the bug would reappear if someday some of our apps has similar pattern inside of their body tags (this is not the case today)

### ✨ Features

*

### 🐛 Bug Fixes

* Fix a bug that prevented Ecolyo to work on Android

### 🔧 Tech

*

@Ldoppea Ldoppea changed the title fix: Correctly inject body classes when <body> has no attributes [VER-421] fix: Correctly inject body classes when <body> has no attributes Mar 22, 2024
Previous regex would inject body classes in the wrong place if the body
has no attributes but its child div has class attribute

In that case, the function would inject the classes in the child div
classes

With previous regex the following HTML
```html
<html>
  <head></head>
  <body>
    <div class="application"></div>
  </body>
</html>
```

Would output
```html
<html>
  <head></head>
  <body>
    <div class="application flagship-app flagship-os-ios flagship-route-home"></div>
  </body>
</html>
```

With new regex, it outputs
```html
<html>
  <head></head>
  <body class="flagship-app flagship-os-ios flagship-route-home">
    <div class="application"></div>
  </body>
</html>
```

This also fixes a production bug where we found that a `div` with same
value for `role` and `class` would see values injected in its `role`
instead of its `class` (this only happens if `role` is declared first)

With previous regex the following HTML
```html
<html>
  <head></head>
  <body>
    <div role="application" class="application"></div>
  </body>
</html>
```

Would output
```html
<html>
  <head></head>
  <body>
    <div role="application flagship-app flagship-os-ios flagship-route-home" class="application"></div>
  </body>
</html>
```

This would break `document.querySelector("[role=application]")` call
made by our libraries

This commit fixes this observed bug, but this is a side effect as we
now ensure that only the `<body>` tag is impacted

But the bug would reappear if someday some of our apps has similar
pattern inside of their `body` tags (this is not the case today)
@Ldoppea Ldoppea merged commit 12863be into master Mar 25, 2024
1 check passed
@Ldoppea Ldoppea deleted the fix/ecolyo_injection branch March 25, 2024 19:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants