fix components with dom dependencies (#3367)

- set chunks: all in webpack prod config
microsoft · Jun 24, 2020 · 9a173de · 9a173de
1 parent c19b06a
commit 9a173de
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 49 deletions.
diff --git a/sites/fast-website/src/app/components/background-design/background-design.styles.ts b/sites/fast-website/src/app/components/background-design/background-design.styles.ts
@@ -8,7 +8,6 @@ export const BackgroundDesignStyles = css`
         height: 99vh; /* https://developers.google.com/web/updates/2016/12/url-bar-resizing */
         isolation: isolate;
         position: fixed;
-        z-index: 0;
         left: 0;
         top: 0;
         width: 100%;

diff --git a/sites/fast-website/src/app/components/background-design/background-design.ts b/sites/fast-website/src/app/components/background-design/background-design.ts
@@ -86,7 +86,7 @@ export class BackgroundDesign extends FASTElement {
         };
         performAnimation(window.performance.now());
 
-        this.setupFadeObserver();
+        window.addEventListener("DOMContentLoaded", () => this.setupFadeObserver());
     }
 
     setupFadeObserver() {
@@ -99,9 +99,10 @@ export class BackgroundDesign extends FASTElement {
             { threshold: 0.5, root: null }
         );
 
-        const heroSection: HTMLElement = document.getElementById("hero") as HTMLElement;
-
-        observer.observe(heroSection);
+        const heroSection = document.getElementById("hero");
+        if (heroSection) {
+            observer.observe(heroSection);
+        }
     }
 
     setup() {

diff --git a/sites/fast-website/src/app/components/side-navigation/side-navigation.ts b/sites/fast-website/src/app/components/side-navigation/side-navigation.ts
@@ -12,33 +12,37 @@ export class SideNavigation extends FASTElement {
     public currentSection: string = "hero";
 
     @observable
-    public sectionArray: HTMLElement[] = Array.from(
-        document.querySelectorAll("section[id]")
-    );
+    public sectionArray: HTMLElement[] = [];
 
     public socialData: CommunityContentPlacementData[] = communityContentPlacementData.filter(
         x => x.header !== "Github"
     );
 
-    constructor() {
-        super();
+    loadScrollers() {
+        this.sectionArray = Array.from(document.querySelectorAll("section[id]"));
+
+        let observer = new IntersectionObserver(
+            entries => {
+                entries.forEach(entry => {
+                    const areaOnScreen =
+                        entry.intersectionRatio * entry.boundingClientRect.height;
+                    if (areaOnScreen > 0.5 * window.innerHeight) {
+                        this.currentSection = entry.target.id;
+                    }
+                });
+            },
+            { threshold: [0, 0.2, 0.4, 0.6, 0.8] }
+        );
+        this.sectionArray.forEach(section => {
+            observer.observe(section);
+        });
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
 
         if (this.getAttribute("category") === "scroll") {
-            let observer = new IntersectionObserver(
-                entries => {
-                    entries.forEach(entry => {
-                        const areaOnScreen =
-                            entry.intersectionRatio * entry.boundingClientRect.height;
-                        if (areaOnScreen > 0.5 * window.innerHeight) {
-                            this.currentSection = entry.target.id;
-                        }
-                    });
-                },
-                { threshold: [0, 0.2, 0.4, 0.6, 0.8] }
-            );
-            this.sectionArray.forEach(section => {
-                observer.observe(section);
-            });
+            window.addEventListener("DOMContentLoaded", () => this.loadScrollers());
         }
     }
 }
diff --git a/sites/fast-website/src/app/css/style.css b/sites/fast-website/src/app/css/style.css
@@ -22,13 +22,18 @@ body {
 
 .body-provider {
   background-color: var(--background-color);
+  isolation: isolate;
 }
 
 .wrapper {
   display: grid;
   grid-template-columns: minmax(5vw, 1fr) minmax(0px, 1200px) minmax(5vw, 1fr);
-  position: relative;
-  z-index: 1;
+  isolation: isolate;
+}
+
+background-design,
+.side-nav-container {
+  z-index: -1;
 }
 
 .side-nav-container {
@@ -39,7 +44,6 @@ body {
   transform: translateY(-50%);
   display: flex;
   justify-content: space-between;
-  z-index: -1;
 }
 
 @media screen and (max-height: 390px), screen and (max-width: 1000px) {

diff --git a/sites/fast-website/src/public/index.html b/sites/fast-website/src/public/index.html
@@ -11,7 +11,6 @@
       use-defaults
       type-ramp-base-font-size="16px"
     >
-      <background-design></background-design>
       <div class="wrapper">
         <header class="header">
           <fast-anchor class="logo" slot="start" appearance="lightweight" href="/" aria-label="Home" alt="FAST">
@@ -36,11 +35,6 @@
           </site-navigation>
         </header>
 
-        <div class="side-nav-container">
-          <site-side-navigation category="links" class="social-links"></site-side-navigation>
-          <site-side-navigation category="scroll" class="section-scroll"></site-side-navigation>
-        </div>
-
         <section class="section hero-section" id="hero">
           <div class="section-content">
             <site-section-header class="section-header">
@@ -103,22 +97,27 @@ <h2 class="section-heading">Join the community</h2>
           </div>
         </section>
 
-        <fast-divider class="footer-divider" role="seperator"></fast-divider>
+        <aside class="side-nav-container">
+          <site-side-navigation category="links" class="social-links"></site-side-navigation>
+          <site-side-navigation category="scroll" class="section-scroll"></site-side-navigation>
+        </aside>
 
-          <footer class="footer">
-            <site-navigation>
-              <ul>
-                <li><fast-anchor appearance="lightweight" href="https://github.com/microsoft/fast-dna/blob/master/LICENSE">License</fast-anchor></li>
-                <li><fast-anchor appearance="lightweight" href="https://privacy.microsoft.com/en-US/privacystatement">Privacy & Cookies</fast-anchor></li>
-                <li><fast-anchor appearance="lightweight" href="https://www.microsoft.com/en-us/legal/intellectualproperty/copyright/default.aspx">Terms of Use</fast-anchor></li>
-                <li><p>&copy; 2020 Microsoft</p></li>
-              </ul>
-            </site-navigation>
-            <fast-anchor class="logo" appearance="lightweight" href="/" aria-label="Home">
-              <%= require("svg/icon-brand.svg") %>
-            </fast-anchor>
-          </footer>
+        <fast-divider class="footer-divider" role="seperator"></fast-divider>
+        <footer class="footer">
+          <site-navigation>
+            <ul>
+              <li><fast-anchor appearance="lightweight" href="https://github.com/microsoft/fast-dna/blob/master/LICENSE">License</fast-anchor></li>
+              <li><fast-anchor appearance="lightweight" href="https://privacy.microsoft.com/en-US/privacystatement">Privacy & Cookies</fast-anchor></li>
+              <li><fast-anchor appearance="lightweight" href="https://www.microsoft.com/en-us/legal/intellectualproperty/copyright/default.aspx">Terms of Use</fast-anchor></li>
+              <li><p>&copy; 2020 Microsoft</p></li>
+            </ul>
+          </site-navigation>
+          <fast-anchor class="logo" appearance="lightweight" href="/" aria-label="Home">
+            <%= require("svg/icon-brand.svg") %>
+          </fast-anchor>
+        </footer>
       </div>
+      <background-design></background-design>
     </fast-design-system-provider>
   </body>
 </html>
diff --git a/sites/fast-website/webpack.prod.js b/sites/fast-website/webpack.prod.js
@@ -10,9 +10,12 @@ module.exports = merge(baseConfig, {
     mode: "production",
     optimization: {
         minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
+        splitChunks: {
+            chunks: "all",
+        },
     },
     output: {
-        filename: "bundle/[name].[hash].js",
+        filename: "bundle/[name].[contenthash].js",
     },
     plugins: [
         new MiniCssExtractPlugin({