fix(docs-infra): several angular.io fixes for IE11 by gkalpak · Pull Request #41183 · angular/angular

gkalpak · 2021-03-11T17:46:43Z

This PR includes several fixes for the angular.io app when run in IE11.
See the individual commits for details.

mary-poppins · 2021-03-11T18:02:37Z

You can preview 9dfa40d at https://pr41183-9dfa40d.ngbuilds.io/.

…nts but not ES2015 Before angular#41162, angular.io was broken on IE 11 due to missing a polyfill for an API (`Reflect.construct()`) needed by the Custom Elements ES5 shim. angular#41162 tried to fix this by loading the necessary polyfill (`es.reflect.construct.js`) on browsers that do not support ES2015 modules (including IE 11). It turns out that the fix in angular#41162 was itself broken, because the `es.reflect.consruct.js` script (included directly in the page via a `<script>` tag) was in CommonJS format (which cannot run in the browser as is). By chance, this still allowed browsers that supported neither Custom Elements nor ES2015 modules (such as IE 11) to work correctly as a side-effect of loading the `@webcomponents/custom-elements` polyfill after the Custom Elements ES5 shim (`native-shim.js`). However, on the few browsers that natively support Custom Elements but not ES2015 modules, angular.io would still be broken. This commit correctly fixes angular.io on all browsers by properly bundling the polyfills and transpiling to ES5. Implementation-wise, we use [esbuild][1] for bundling the polyfills (and converting from CommonJS to a browser-compatible, IIFE-based format) and [swc][2] for downleveling the code to ES5 (since `esbuild` only supports ES2015+). [1]: https://esbuild.github.io/ [2]: https://swc.rs/

IE11 does not recognize the `<main>` element as a block element and therefore it does not apply margin/paddings/widths as expected. This resulted in the layout of docs pages being broken in IE11 (see the image below). This commit fixes the layout by explicitly setting `.sidenav-content` (which is a `<main>` element) to `display: block`. Before: ![docs pages layout in IE11 before][1] After: ![docs pages layout in IE11 after][2] [1]: https://user-images.githubusercontent.com/8604205/110808902-1b014600-828d-11eb-9eef-c1234dc2d436.png [2]: https://user-images.githubusercontent.com/8604205/110808907-1ccb0980-828d-11eb-91d9-06e5cfafc894.png

IE11 does not support `justify-content: space-evenly` and therefore falls back to the default (`flex-start`), breaking the layout of the items in the "Features" page (see the image below). This commit fixes the layout by specifying `space-around` as a fallback for `justify-content`, which keeps the layout closer to the intended. Before: ![features page layout in IE11 before][1] After: ![features page layout in IE11 after][2] [1]: https://user-images.githubusercontent.com/8604205/110811038-045bee80-828f-11eb-8027-d5851762a5eb.png [2]: https://user-images.githubusercontent.com/8604205/110811076-0a51cf80-828f-11eb-98a0-2f2928128dd0.png

…e in IE11 Previously, the AngularJS SVG logo shown on the "Press kit" page was not displayed correctly in IE11 (see the image below). This commit fixes it by explicitly specifying the SVG `viewBox` on the logo. Before: ![presskit AngularJS logo in IE11 before][1] After: ![presskit AngularJS logo in IE11 after][2] [1]: https://user-images.githubusercontent.com/8604205/110812629-7123b880-8290-11eb-9f71-0ae910536fa5.png [2]: https://user-images.githubusercontent.com/8604205/110812633-7254e580-8290-11eb-896c-84f595d273b8.png

mary-poppins · 2021-03-11T18:39:19Z

You can preview 396b40b at https://pr41183-396b40b.ngbuilds.io/.

petebacondarwin

Typo in fix(docs-infra): fix <code-tabs> in IE11

This commit fixes it by ensuring we capture the <code-pane> contents before clearing unneded HTML.

petebacondarwin · 2021-03-12T12:53:41Z

    "dgeni": "^0.4.13",
    "dgeni-packages": "^0.28.4",
    "entities": "^1.1.1",
+    "esbuild": "^0.9.0",


Yet more dependencies! Was this not possible with some of the tools that we already depend upon, like Babel and webpack?

We don't directly depend on Babel or Webpack in AIO 🤷‍♂️
So, if we are going to add new direct dependencies, it is so much cooler (and probably faster) to use state of the art tools, such as esbuild and swc 💪 😛

petebacondarwin · 2021-03-12T12:55:33Z

+  display: block;  // This is required for browsers that do not recognize `<main>` as a block
+                   // element (such as IE11).


Could you not fix this generically by adding a rule like?

main { display: block; }

Yes, I could (but since we don't have (nor is it very likely to have) another <main> element in AIO, either way should be fine).

Of course, a rule targeting main would be more robust against potential future additions of <main> elements, but equally the current rule is more robust against changing .sidenav-content to a <section> or <article> element 🤔

Both are unlikely to happen (esp. before we drop support for IE11), so I went with the least amount of loc 😁
Happy to go the other way, if you like it better.

petebacondarwin · 2021-03-12T13:07:09Z

When we drop support for IE11 we should also remove the polyfills and the associated tooling that was installed in this PR.

Previously, `<code-tabs>` did not work correctly in IE11. More specifically, due to how IE11 handles updates to `innerHTML`, the contents of `<code-pane>` elements were cleared before we could capture them and pass them to the `<aio-code>` components. This commit fixes it by ensuring we capture the `<code-pane>` contents before clearing unneeded HTML. Before: ![code tabs in IE11 before][1] After: ![code tabs in IE11 after][2] [1]: https://user-images.githubusercontent.com/8604205/110815248-f4460e00-8292-11eb-868e-eca7ba5e9cd3.png [2]: https://user-images.githubusercontent.com/8604205/110815253-f5773b00-8292-11eb-80a6-1a0b1ea44d8f.png

mary-poppins · 2021-03-12T15:43:53Z

You can preview 9bb0cde at https://pr41183-9bb0cde.ngbuilds.io/.

IE11 does not recognize the `<main>` element as a block element and therefore it does not apply margin/paddings/widths as expected. This resulted in the layout of docs pages being broken in IE11 (see the image below). This commit fixes the layout by explicitly setting `.sidenav-content` (which is a `<main>` element) to `display: block`. Before: ![docs pages layout in IE11 before][1] After: ![docs pages layout in IE11 after][2] [1]: https://user-images.githubusercontent.com/8604205/110808902-1b014600-828d-11eb-9eef-c1234dc2d436.png [2]: https://user-images.githubusercontent.com/8604205/110808907-1ccb0980-828d-11eb-91d9-06e5cfafc894.png PR Close #41183

IE11 does not support `justify-content: space-evenly` and therefore falls back to the default (`flex-start`), breaking the layout of the items in the "Features" page (see the image below). This commit fixes the layout by specifying `space-around` as a fallback for `justify-content`, which keeps the layout closer to the intended. Before: ![features page layout in IE11 before][1] After: ![features page layout in IE11 after][2] [1]: https://user-images.githubusercontent.com/8604205/110811038-045bee80-828f-11eb-8027-d5851762a5eb.png [2]: https://user-images.githubusercontent.com/8604205/110811076-0a51cf80-828f-11eb-98a0-2f2928128dd0.png PR Close #41183

…e in IE11 (#41183) Previously, the AngularJS SVG logo shown on the "Press kit" page was not displayed correctly in IE11 (see the image below). This commit fixes it by explicitly specifying the SVG `viewBox` on the logo. Before: ![presskit AngularJS logo in IE11 before][1] After: ![presskit AngularJS logo in IE11 after][2] [1]: https://user-images.githubusercontent.com/8604205/110812629-7123b880-8290-11eb-9f71-0ae910536fa5.png [2]: https://user-images.githubusercontent.com/8604205/110812633-7254e580-8290-11eb-896c-84f595d273b8.png PR Close #41183

Previously, `<code-tabs>` did not work correctly in IE11. More specifically, due to how IE11 handles updates to `innerHTML`, the contents of `<code-pane>` elements were cleared before we could capture them and pass them to the `<aio-code>` components. This commit fixes it by ensuring we capture the `<code-pane>` contents before clearing unneeded HTML. Before: ![code tabs in IE11 before][1] After: ![code tabs in IE11 after][2] [1]: https://user-images.githubusercontent.com/8604205/110815248-f4460e00-8292-11eb-868e-eca7ba5e9cd3.png [2]: https://user-images.githubusercontent.com/8604205/110815253-f5773b00-8292-11eb-80a6-1a0b1ea44d8f.png PR Close #41183

…nts but not ES2015 (#41183) Before #41162, angular.io was broken on IE 11 due to missing a polyfill for an API (`Reflect.construct()`) needed by the Custom Elements ES5 shim. #41162 tried to fix this by loading the necessary polyfill (`es.reflect.construct.js`) on browsers that do not support ES2015 modules (including IE 11). It turns out that the fix in #41162 was itself broken, because the `es.reflect.consruct.js` script (included directly in the page via a `<script>` tag) was in CommonJS format (which cannot run in the browser as is). By chance, this still allowed browsers that supported neither Custom Elements nor ES2015 modules (such as IE 11) to work correctly as a side-effect of loading the `@webcomponents/custom-elements` polyfill after the Custom Elements ES5 shim (`native-shim.js`). However, on the few browsers that natively support Custom Elements but not ES2015 modules, angular.io would still be broken. This commit correctly fixes angular.io on all browsers by properly bundling the polyfills and transpiling to ES5. Implementation-wise, we use [esbuild][1] for bundling the polyfills (and converting from CommonJS to a browser-compatible, IIFE-based format) and [swc][2] for downleveling the code to ES5 (since `esbuild` only supports ES2015+). [1]: https://esbuild.github.io/ [2]: https://swc.rs/ PR Close #41183

IE11 does not recognize the `<main>` element as a block element and therefore it does not apply margin/paddings/widths as expected. This resulted in the layout of docs pages being broken in IE11 (see the image below). This commit fixes the layout by explicitly setting `.sidenav-content` (which is a `<main>` element) to `display: block`. Before: ![docs pages layout in IE11 before][1] After: ![docs pages layout in IE11 after][2] [1]: https://user-images.githubusercontent.com/8604205/110808902-1b014600-828d-11eb-9eef-c1234dc2d436.png [2]: https://user-images.githubusercontent.com/8604205/110808907-1ccb0980-828d-11eb-91d9-06e5cfafc894.png PR Close #41183

IE11 does not support `justify-content: space-evenly` and therefore falls back to the default (`flex-start`), breaking the layout of the items in the "Features" page (see the image below). This commit fixes the layout by specifying `space-around` as a fallback for `justify-content`, which keeps the layout closer to the intended. Before: ![features page layout in IE11 before][1] After: ![features page layout in IE11 after][2] [1]: https://user-images.githubusercontent.com/8604205/110811038-045bee80-828f-11eb-8027-d5851762a5eb.png [2]: https://user-images.githubusercontent.com/8604205/110811076-0a51cf80-828f-11eb-98a0-2f2928128dd0.png PR Close #41183

…e in IE11 (#41183) Previously, the AngularJS SVG logo shown on the "Press kit" page was not displayed correctly in IE11 (see the image below). This commit fixes it by explicitly specifying the SVG `viewBox` on the logo. Before: ![presskit AngularJS logo in IE11 before][1] After: ![presskit AngularJS logo in IE11 after][2] [1]: https://user-images.githubusercontent.com/8604205/110812629-7123b880-8290-11eb-9f71-0ae910536fa5.png [2]: https://user-images.githubusercontent.com/8604205/110812633-7254e580-8290-11eb-896c-84f595d273b8.png PR Close #41183

Previously, `<code-tabs>` did not work correctly in IE11. More specifically, due to how IE11 handles updates to `innerHTML`, the contents of `<code-pane>` elements were cleared before we could capture them and pass them to the `<aio-code>` components. This commit fixes it by ensuring we capture the `<code-pane>` contents before clearing unneeded HTML. Before: ![code tabs in IE11 before][1] After: ![code tabs in IE11 after][2] [1]: https://user-images.githubusercontent.com/8604205/110815248-f4460e00-8292-11eb-868e-eca7ba5e9cd3.png [2]: https://user-images.githubusercontent.com/8604205/110815253-f5773b00-8292-11eb-80a6-1a0b1ea44d8f.png PR Close #41183

angular-automatic-lock-bot · 2021-04-12T16:11:30Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

gkalpak added type: bug/fix comp: docs-infra target: patch This PR is targeted for the next patch release labels Mar 11, 2021

gkalpak added this to the docs-infra-aio-app milestone Mar 11, 2021

google-cla Bot added the cla: yes label Mar 11, 2021

gkalpak added 4 commits March 11, 2021 20:23

gkalpak force-pushed the fix-aio-ie-2 branch from 9dfa40d to 396b40b Compare March 11, 2021 18:29

gkalpak marked this pull request as ready for review March 11, 2021 18:54

gkalpak added the action: merge The PR is ready for merge by the caretaker label Mar 12, 2021

gkalpak requested a review from petebacondarwin March 12, 2021 12:45

petebacondarwin approved these changes Mar 12, 2021

View reviewed changes

gkalpak force-pushed the fix-aio-ie-2 branch from 396b40b to 9bb0cde Compare March 12, 2021 15:34

gkalpak mentioned this pull request Mar 12, 2021

docs-infra: theming and dark mode #41129

Closed

5 tasks

jessicajaniuk closed this in 8c939dc Mar 12, 2021

gkalpak deleted the fix-aio-ie-2 branch March 12, 2021 21:31

angular-automatic-lock-bot Bot locked and limited conversation to collaborators Apr 12, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(docs-infra): several angular.io fixes for IE11 #41183

fix(docs-infra): several angular.io fixes for IE11 #41183
gkalpak wants to merge 5 commits into
angular:masterfrom
gkalpak:fix-aio-ie-2

gkalpak commented Mar 11, 2021

Uh oh!

mary-poppins commented Mar 11, 2021

Uh oh!

mary-poppins commented Mar 11, 2021

Uh oh!

petebacondarwin left a comment

Uh oh!

petebacondarwin Mar 12, 2021

Uh oh!

gkalpak Mar 12, 2021

Uh oh!

petebacondarwin Mar 12, 2021

Uh oh!

gkalpak Mar 12, 2021

Uh oh!

petebacondarwin commented Mar 12, 2021

Uh oh!

mary-poppins commented Mar 12, 2021

Uh oh!

angular-automatic-lock-bot Bot commented Apr 12, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		display: block; // This is required for browsers that do not recognize `<main>` as a block
		// element (such as IE11).

Conversation

gkalpak commented Mar 11, 2021

Uh oh!

mary-poppins commented Mar 11, 2021

Uh oh!

mary-poppins commented Mar 11, 2021

Uh oh!

petebacondarwin left a comment

Choose a reason for hiding this comment

Uh oh!

petebacondarwin Mar 12, 2021

Choose a reason for hiding this comment

Uh oh!

gkalpak Mar 12, 2021

Choose a reason for hiding this comment

Uh oh!

petebacondarwin Mar 12, 2021

Choose a reason for hiding this comment

Uh oh!

gkalpak Mar 12, 2021

Choose a reason for hiding this comment

Uh oh!

petebacondarwin commented Mar 12, 2021

Uh oh!

mary-poppins commented Mar 12, 2021

Uh oh!

angular-automatic-lock-bot Bot commented Apr 12, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants