lit · kevinpschaaf · Aug 17, 2021 · Aug 4, 2021 · Aug 10, 2021 · Aug 10, 2021
@@ -0,0 +1,7 @@
+---
+'@lit-labs/ssr': patch
+'lit-html': patch
+'@lit/reactive-element': patch
+---
+
+Reverts the change in Lit 2 to pause ReactiveElement's update cycle while the element is disconnected. The update cycle for elements will now run while disconnected as in Lit 1, however AsyncDirectives must now check the `this.isConnected` flag during `update` to ensure that e.g. subscriptions that could lead to memory leaks are not made when AsyncDirectives update while disconnected.
@@ -47,7 +47,7 @@
       "name": "TS: ssr",
       "icon": "checklist",
       "cwd": "[workspaceFolder]/packages/labs/ssr",
-      "command": "npm run build:watch",
+      "command": "npm run build:ts:watch",
       "focus": true
     },
     {

@@ -59,27 +59,6 @@
               }
             }
           }
-        },
-        {
-          "name": "previous-release",
-          "packageVersions": {
-            "label": "previous-release",
-            "dependencies": {
-              "lit-html": "^1.0.0",
-              "lit-element": "^2.0.0",
-              "@lit/reactive-element": {
-                "kind": "git",
-                "repo": "https://github.com/lit/lit-html.git",
-                "ref": "main",
-                "subdir": "packages/reactive-element",
-                "setupCommands": [
-                  "npm ci",
-                  "npm run bootstrap -- --concurrency=1",
-                  "npm run build"
-                ]
-              }
-            }
-          }
         }
       ]
     }

@@ -15,7 +15,7 @@ import type {
 
 import {nothing, noChange} from 'lit';
 import {PartType} from 'lit/directive.js';
-import {isTemplateResult} from 'lit/directive-helpers.js';
+import {isTemplateResult, getDirectiveClass} from 'lit/directive-helpers.js';
 import {_$LH} from 'lit-html/private-ssr-support.js';
 
 const {
@@ -24,12 +24,14 @@ const {
   markerMatch,
   boundAttributeSuffix,
   overrideDirectiveResolve,
+  setDirectiveClass,
   getAttributePartCommittedValue,
   resolveDirective,
   AttributePart,
   PropertyPart,
   BooleanAttributePart,
   EventPart,
+  connectedDisconnectable,
 } = _$LH;
 
 import {digestForTemplateResult} from 'lit/experimental-hydrate.js';
@@ -75,7 +77,7 @@ const patchedDirectiveCache: WeakMap<DirectiveClass, DirectiveClass> =
  */
 const patchIfDirective = (value: unknown) => {
   // This property needs to remain unminified.
-  const directiveCtor = (value as DirectiveResult)?.['_$litDirective$'];
+  const directiveCtor = getDirectiveClass(value);
   if (directiveCtor !== undefined) {
     let patchedCtor = patchedDirectiveCache.get(directiveCtor);
     if (patchedCtor === undefined) {
@@ -90,7 +92,7 @@ const patchIfDirective = (value: unknown) => {
       patchedDirectiveCache.set(directiveCtor, patchedCtor);
     }
     // This property needs to remain unminified.
-    (value as DirectiveResult)['_$litDirective$'] = patchedCtor;
+    setDirectiveClass(value as DirectiveResult, patchedCtor);
   }
   return value;
 };
@@ -556,7 +558,10 @@ function* renderValue(
     }
     value = null;
   } else {
-    value = resolveDirective({type: PartType.CHILD} as ChildPart, value);
+    value = resolveDirective(
+      connectedDisconnectable({type: PartType.CHILD}) as ChildPart,
+      value
+    );
   }
   if (value != null && isTemplateResult(value)) {
     yield `<!--lit-part ${digestForTemplateResult(value as TemplateResult)}-->`;
@@ -624,7 +629,7 @@ function* renderTemplateResult(
           {tagName: op.tagName} as HTMLElement,
           op.name,
           statics,
-          undefined,
+          connectedDisconnectable(),
           {}
         );
         const value =

@@ -47,7 +47,7 @@
  * @packageDocumentation
  */
 import {PropertyValues, ReactiveElement} from '@lit/reactive-element';
-import {render, RenderOptions, noChange, ChildPart} from 'lit-html';
+import {render, RenderOptions, noChange, RootChildPart} from 'lit-html';
 export * from '@lit/reactive-element';
 export * from 'lit-html';
 
@@ -95,7 +95,7 @@ export class LitElement extends ReactiveElement {
    */
   readonly renderOptions: RenderOptions = {host: this};
 
-  private __childPart: ChildPart | undefined = undefined;
+  private __childPart: RootChildPart | undefined = undefined;
 
   /**
    * @category rendering

@@ -347,7 +347,7 @@ const extraGlobals = window as LitExtraGlobals;
         class extends AsyncDirective {
           id!: unknown;
           render(id: unknown) {
-            log.push(`render-${id}`);
+            log.push(`render-${id}-${this.isConnected}`);
             return (this.id = id);
           }
           disconnected() {
@@ -373,7 +373,7 @@ const extraGlobals = window as LitExtraGlobals;
         }
         get child() {
           // Cast to child so we can access .prop off of the div
-          return this.shadowRoot!.firstElementChild as Child;
+          return this.shadowRoot?.firstElementChild;
         }
       }
       customElements.define('disc-child', Child);
@@ -392,14 +392,16 @@ const extraGlobals = window as LitExtraGlobals;
       customElements.define('disc-host', Host);
 
       const assertRendering = (host: Host) => {
-        let child = host.child;
+        const child = host.child;
         assert.equal(child.getAttribute('attr'), 'host-attr');
         assert.equal(child.prop, 'host-prop');
         assert.equal(child.textContent?.trim(), 'host-node');
-        child = child.child;
-        assert.equal(child.getAttribute('attr'), 'child-attr');
-        assert.equal(child.prop, 'child-prop');
-        assert.equal(child.textContent?.trim(), 'child-node');
+        const grandChild = child.child as Child;
+        if (grandChild) {
+          assert.equal(grandChild.getAttribute('attr'), 'child-attr');
+          assert.equal(grandChild.prop, 'child-prop');
+          assert.equal(grandChild.textContent?.trim(), 'child-node');
+        }
       };
 
       setup(() => {
@@ -418,12 +420,12 @@ const extraGlobals = window as LitExtraGlobals;
         await nextFrame();
         assertRendering(host);
         assert.deepEqual(log, [
-          'render-host-attr',
-          'render-host-prop',
-          'render-host-node',
-          'render-child-attr',
-          'render-child-prop',
-          'render-child-node',
+          'render-host-attr-true',
+          'render-host-prop-true',
+          'render-host-node-true',
+          'render-child-attr-true',
+          'render-child-prop-true',
+          'render-child-node-true',
         ]);
       });
 
@@ -506,12 +508,26 @@ const extraGlobals = window as LitExtraGlobals;
         await nextFrame();
         assertRendering(host);
         assert.deepEqual(log, [
-          'render-host-attr',
-          'render-host-prop',
-          'render-host-node',
-          'render-child-attr',
-          'render-child-prop',
-          'render-child-node',
+          'render-host-attr-true',
+          'render-host-prop-true',
+          'render-host-node-true',
+          'render-child-attr-true',
+          'render-child-prop-true',
+          'render-child-node-true',
+        ]);
+      });
+
+      // TODO(kschaaf): render does not currently support rendering to an
+      // initially disconnected ChildPart (https://github.com/lit/lit/issues/2051)
+      test.skip('directives render with isConnected: false if first render is while element is disconnected', async () => {
+        container.appendChild(host);
+        container.remove();
+        await nextFrame();
+        assertRendering(host);
+        assert.deepEqual(log, [
+          'render-host-attr-false',
+          'render-host-prop-false',
+          'render-host-node-false',
         ]);
       });
     });