test: add hydration test, fix unrendering styles

Author: nolanlawson

packages/@lwc/engine-dom/src/renderer.ts

@@ -44,7 +44,10 @@ const supportsMutableAdoptedStyleSheets =
 const styleElements: { [content: string]: HTMLStyleElement } = create(null);
 const styleSheets: { [content: string]: CSSStyleSheet } = create(null);
 const shadowRootsToStyleSheets = new WeakMap<ShadowRoot, { [content: string]: HTMLStyleElement }>();
-const stylesToUsageCount = new WeakMap<HTMLStyleElement | CSSStyleSheet, number>();
+const stylesToUsageCount = new WeakMap<
+    HTMLStyleElement | CSSStyleSheet,
+    WeakMap<ShadowRoot | Document, number>
+>();
 
 export let getCustomElement: any;
 export let defineCustomElement: any;
@@ -73,16 +76,32 @@ function isCustomElementRegistryAvailable() {
     }
 }
 
-function incrementOrDecrementUsageCount(elm: HTMLStyleElement | CSSStyleSheet, delta: number) {
-    let count = stylesToUsageCount.get(elm);
+function incrementOrDecrementUsageCount(
+    style: HTMLStyleElement | CSSStyleSheet,
+    root: ShadowRoot | Document,
+    delta: number
+) {
+    let rootsToCounts = stylesToUsageCount.get(style);
+    if (isUndefined(rootsToCounts)) {
+        rootsToCounts = new WeakMap();
+        stylesToUsageCount.set(style, rootsToCounts);
+    }
+    let count = rootsToCounts.get(root);
     if (isUndefined(count)) {
         count = 0;
     }
     count += delta;
-    stylesToUsageCount.set(elm, count);
+    rootsToCounts.set(root, count);
     return count;
 }
 
+function incrementOrDecrementGlobalUsageCount(
+    elm: HTMLStyleElement | CSSStyleSheet,
+    delta: number
+) {
+    return incrementOrDecrementUsageCount(elm, document, delta);
+}
+
 function insertConstructableStyleSheet(content: string, target: ShadowRoot) {
     // It's important for CSSStyleSheets to be unique based on their content, so that
     // `shadowRoot.adoptedStyleSheets.includes(sheet)` works.
@@ -92,7 +111,7 @@ function insertConstructableStyleSheet(content: string, target: ShadowRoot) {
         styleSheet.replaceSync(content);
         styleSheets[content] = styleSheet;
     }
-    incrementOrDecrementUsageCount(styleSheet, 1);
+    incrementOrDecrementUsageCount(styleSheet, target, 1);
     const { adoptedStyleSheets } = target;
     if (!adoptedStyleSheets.includes(styleSheet)) {
         if (supportsMutableAdoptedStyleSheets) {
@@ -111,7 +130,7 @@ function removeConstructableStyleSheet(content: string, target: ShadowRoot) {
     if (isUndefined(styleSheet)) {
         return;
     }
-    const count = incrementOrDecrementUsageCount(styleSheet, -1);
+    const count = incrementOrDecrementUsageCount(styleSheet, target, -1);
     if (count === 0) {
         const { adoptedStyleSheets } = target;
         if (adoptedStyleSheets.includes(styleSheet)) {
@@ -133,7 +152,7 @@ function insertStyleElement(content: string, target: ShadowRoot) {
     }
     const existingElement = sheets![content];
     if (!isUndefined(existingElement)) {
-        incrementOrDecrementUsageCount(existingElement, 1);
+        incrementOrDecrementUsageCount(existingElement, target, 1);
         return;
     }
 
@@ -150,7 +169,7 @@ function insertStyleElement(content: string, target: ShadowRoot) {
     }
     sheets![content] = elm;
     target.appendChild(elm);
-    incrementOrDecrementUsageCount(elm, 1);
+    incrementOrDecrementUsageCount(elm, target, 1);
 }
 
 function removeStyleElement(content: string, target: ShadowRoot) {
@@ -162,7 +181,7 @@ function removeStyleElement(content: string, target: ShadowRoot) {
     if (isUndefined(elm)) {
         return;
     }
-    const count = incrementOrDecrementUsageCount(elm, -1);
+    const count = incrementOrDecrementUsageCount(elm, target, -1);
     if (count === 0) {
         if (elm.parentNode === target) {
             target.removeChild(elm);
@@ -404,7 +423,7 @@ export function isConnected(node: Node): boolean {
 export function insertGlobalStylesheet(content: string): void {
     const existingElement = globalStylesheets[content];
     if (!isUndefined(existingElement)) {
-        incrementOrDecrementUsageCount(existingElement, 1);
+        incrementOrDecrementGlobalUsageCount(existingElement, 1);
         return;
     }
 
@@ -414,15 +433,15 @@ export function insertGlobalStylesheet(content: string): void {
 
     globalStylesheets[content] = elm;
     globalStylesheetsParentElement.appendChild(elm);
-    incrementOrDecrementUsageCount(elm, 1);
+    incrementOrDecrementGlobalUsageCount(elm, 1);
 }
 
 export function removeGlobalStylesheet(content: string): void {
     const elm = globalStylesheets[content];
     if (isUndefined(elm)) {
         return;
     }
-    const count = incrementOrDecrementUsageCount(elm, -1);
+    const count = incrementOrDecrementGlobalUsageCount(elm, -1);
     if (count === 0) {
         if (elm.parentNode === globalStylesheetsParentElement) {
             globalStylesheetsParentElement.removeChild(elm);

packages/integration-karma/test-hydration/stylesheet/unrendering-styles/index.spec.js

@@ -0,0 +1,41 @@
+const parentTags = [
+    'x-light-parent-light-child',
+    'x-light-parent-shadow-child',
+    'x-shadow-parent-light-child',
+];
+
+export default {
+    test(rootElement) {
+        let promise = Promise.resolve();
+        for (const parentTag of parentTags) {
+            promise = promise.then(() => {
+                const parent = rootElement.querySelector(parentTag);
+                const child = (parent.shadowRoot || parent).querySelector('x-light,x-shadow');
+
+                function getDivColor() {
+                    return getComputedStyle((child.shadowRoot || child).querySelector('div')).color;
+                }
+
+                expect(getDivColor()).toEqual('rgb(255, 0, 0)');
+                child.next();
+                return Promise.resolve()
+                    .then(() => {
+                        expect(getDivColor()).toEqual('rgb(0, 0, 255)');
+                        child.next();
+                    })
+                    .then(() => {
+                        expect(getDivColor()).toEqual('rgb(255, 0, 0)');
+                        child.next();
+                    })
+                    .then(() => {
+                        expect(getDivColor()).toEqual('rgb(0, 0, 255)');
+                        child.next();
+                    })
+                    .then(() => {
+                        expect(getDivColor()).toEqual('rgb(255, 0, 0)');
+                    });
+            });
+        }
+        return promise;
+    },
+};

packages/integration-karma/test-hydration/stylesheet/unrendering-styles/x/light/a.css

@@ -0,0 +1,3 @@
+div {
+    color: red;
+}

packages/integration-karma/test-hydration/stylesheet/unrendering-styles/x/light/a.html

@@ -0,0 +1,3 @@
+<template lwc:render-mode="light">
+  <div>a</div>
+</template>

packages/integration-karma/test-hydration/stylesheet/unrendering-styles/x/light/b.css

@@ -0,0 +1,3 @@
+div {
+    color: blue;
+}

packages/integration-karma/test-hydration/stylesheet/unrendering-styles/x/light/b.html

@@ -0,0 +1,3 @@
+<template lwc:render-mode="light">
+  <div>b</div>
+</template>

packages/integration-karma/test-hydration/stylesheet/unrendering-styles/x/light/light.js

@@ -0,0 +1,17 @@
+import { LightningElement, api } from 'lwc';
+import A from './a.html';
+import B from './b.html';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+    current = A;
+
+    @api
+    next() {
+        this.current = this.current === A ? B : A;
+    }
+
+    render() {
+        return this.current;
+    }
+}

packages/integration-karma/test-hydration/stylesheet/unrendering-styles/x/lightParentLightChild/lightParentLightChild.html

@@ -0,0 +1,5 @@
+<template lwc:render-mode="light">
+  <template for:each={items} for:item="item">
+    <x-light key={item}></x-light>
+  </template>
+</template>

packages/integration-karma/test-hydration/stylesheet/unrendering-styles/x/lightParentLightChild/lightParentLightChild.js

@@ -0,0 +1,14 @@
+import { LightningElement, api, track } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+    @track items = [0];
+
+    @api add() {
+        this.items.push(this.items.length);
+    }
+
+    @api remove() {
+        this.items.pop();
+    }
+}

packages/integration-karma/test-hydration/stylesheet/unrendering-styles/x/lightParentShadowChild/lightParentShadowChild.html

@@ -0,0 +1,5 @@
+<template lwc:render-mode="light">
+  <template for:each={items} for:item="item">
+    <x-shadow key={item}></x-shadow>
+  </template>
+</template>