Remove unused type declarations and remove LitExtendedWindow and `L…

…itExtraGlobals`. (#2041)

* Remove unused type declarations.

* Revert "Cast `window` to a new type (instead of extending it) to prevent collisions. (#1904)"

This reverts commit ec5ab1b, with resolved conflicts.

* Remove unused, duplicate declarations for types added by other packages in the repo.

* Add a changeset.

.changeset/four-pianos-marry.md

@@ -0,0 +1,7 @@
+---
+'lit-element': patch
+'lit-html': patch
+'@lit/reactive-element': patch
+---
+
+Remove some unnecessary internal type declarations.

packages/lit-element/src/env.d.ts

@@ -4,26 +4,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-interface LitExtendedWindow extends Window {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  reactiveElementPlatformSupport: (options: {[index: string]: any}) => void;
+interface Window {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   litElementPlatformSupport: (options: {[index: string]: any}) => void;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  litHtmlPlatformSupport: (template: unknown, childPart: unknown) => void;
-}
-
-type LitExtraGlobals = typeof globalThis & LitExtendedWindow;
-
-// Augment existing types with styling API
-interface ShadowRoot {
-  adoptedStyleSheets: CSSStyleSheet[];
-}
-
-// eslint-disable-next-line no-var
-declare var ShadowRoot: {prototype: ShadowRoot; new (): ShadowRoot};
-
-interface CSSStyleSheet {
-  replaceSync(cssText: string): void;
-  replace(cssText: string): Promise<unknown>;
 }

packages/lit-element/src/polyfill-support.ts

@@ -48,14 +48,12 @@ interface PatchableLitElement extends HTMLElement {
 }: {
   LitElement: PatchableLitElement;
 }) => {
-  const extraGlobals = window as LitExtraGlobals;
-
   // polyfill-support is only needed if ShadyCSS or the ApplyShim is in use
   // We test at the point of patching, which makes it safe to load
   // webcomponentsjs and polyfill-support in either order
   if (
-    extraGlobals.ShadyCSS === undefined ||
-    (extraGlobals.ShadyCSS.nativeShadow && !extraGlobals.ShadyCSS.ApplyShim)
+    window.ShadyCSS === undefined ||
+    (window.ShadyCSS.nativeShadow && !window.ShadyCSS.ApplyShim)
   ) {
     return;
   }

packages/lit-element/src/test/lit-element_styling_test.ts

@@ -13,8 +13,6 @@ import {
 } from './test-helpers.js';
 import {assert} from '@esm-bundle/chai';
 
-const extraGlobals = window as LitExtraGlobals;
-
 (canTestLitElement ? suite : suite.skip)('Styling', () => {
   suite('Basic styling', () => {
     let container: HTMLElement;
@@ -309,7 +307,7 @@ const extraGlobals = window as LitExtraGlobals;
         '3px'
       );
       // Verify there is one scoping style under ShadyDOM
-      if (extraGlobals.ShadyDOM?.inUse) {
+      if (window.ShadyDOM?.inUse) {
         assert.equal(
           document.querySelectorAll(`style[scope=${name}`).length,
           1
@@ -322,7 +320,7 @@ const extraGlobals = window as LitExtraGlobals;
     let container: HTMLElement;
 
     setup(function () {
-      if (!extraGlobals.ShadyDOM) {
+      if (!window.ShadyDOM) {
         this.skip();
       } else {
         container = document.createElement('div');

packages/lit-element/src/test/lit-element_test.ts

@@ -23,8 +23,6 @@ import {assert} from '@esm-bundle/chai';
 
 import {createRef, ref} from 'lit-html/directives/ref.js';
 
-const extraGlobals = window as LitExtraGlobals;
-
 (canTestLitElement ? suite : suite.skip)('LitElement', () => {
   let container: HTMLElement;
 
@@ -324,7 +322,7 @@ const extraGlobals = window as LitExtraGlobals;
     assert.ok(a.hasUpdated);
   });
 
-  (extraGlobals.ShadyDOM && extraGlobals.ShadyDOM.inUse ? test.skip : test)(
+  (window.ShadyDOM && window.ShadyDOM.inUse ? test.skip : test)(
     'can customize shadowRootOptions',
     async () => {
       class A extends LitElement {

packages/lit-element/src/test/test-helpers.ts

@@ -12,11 +12,9 @@ export const generateElementName = () => `x-${count++}`;
 export const nextFrame = () =>
   new Promise((resolve) => requestAnimationFrame(resolve));
 
-const extraGlobals = window as LitExtraGlobals;
-
 export const getComputedStyleValue = (element: Element, property: string) =>
-  extraGlobals.ShadyCSS
-    ? extraGlobals.ShadyCSS.getComputedStyleValue(element, property)
+  window.ShadyCSS
+    ? window.ShadyCSS.getComputedStyleValue(element, property)
     : getComputedStyle(element).getPropertyValue(property);
 
 export const stripExpressionComments = (html: string) =>
@@ -25,8 +23,8 @@ export const stripExpressionComments = (html: string) =>
 // Only test LitElement if ShadowRoot is available and either ShadyDOM is not
 // in use or it is and LitElement platform support is available.
 export const canTestLitElement =
-  (window.ShadowRoot && !extraGlobals.ShadyDOM?.inUse) ||
-  extraGlobals.litElementPlatformSupport;
+  (window.ShadowRoot && !window.ShadyDOM?.inUse) ||
+  window.litElementPlatformSupport;
 
 export interface ShadyRenderOptions extends RenderOptions {
   scope?: string;

packages/lit-html/src/directive-helpers.ts

@@ -19,13 +19,11 @@ type ChildPart = InstanceType<typeof ChildPart>;
 
 const ENABLE_SHADYDOM_NOPATCH = true;
 
-const extraGlobals = window as LitExtraGlobals;
-
 const wrap =
   ENABLE_SHADYDOM_NOPATCH &&
-  extraGlobals.ShadyDOM?.inUse &&
-  extraGlobals.ShadyDOM?.noPatch === true
-    ? extraGlobals.ShadyDOM!.wrap
+  window.ShadyDOM?.inUse &&
+  window.ShadyDOM?.noPatch === true
+    ? window.ShadyDOM!.wrap
     : (node: Node) => node;
 
 /**

packages/lit-html/src/env.d.ts

@@ -4,26 +4,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-interface LitExtendedWindow extends Window {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  reactiveElementPlatformSupport: (options: {[index: string]: any}) => void;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  litElementPlatformSupport: (options: {[index: string]: any}) => void;
+interface Window {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   litHtmlPlatformSupport: (template: unknown, childPart: unknown) => void;
 }
-
-type LitExtraGlobals = typeof globalThis & LitExtendedWindow;
-
-// Augment existing types with styling API
-interface ShadowRoot {
-  adoptedStyleSheets: CSSStyleSheet[];
-}
-
-// eslint-disable-next-line no-var
-declare var ShadowRoot: {prototype: ShadowRoot; new (): ShadowRoot};
-
-interface CSSStyleSheet {
-  replaceSync(cssText: string): void;
-  replace(cssText: string): Promise<unknown>;
-}

packages/lit-html/src/lit-html.ts

@@ -22,13 +22,11 @@ if (DEV_MODE) {
   console.warn('lit-html is in dev mode. Not recommended for production!');
 }
 
-const extraGlobals = window as LitExtraGlobals;
-
 const wrap =
   ENABLE_SHADYDOM_NOPATCH &&
-  extraGlobals.ShadyDOM?.inUse &&
-  extraGlobals.ShadyDOM?.noPatch === true
-    ? extraGlobals.ShadyDOM!.wrap
+  window.ShadyDOM?.inUse &&
+  window.ShadyDOM?.noPatch === true
+    ? window.ShadyDOM!.wrap
     : (node: Node) => node;
 
 const trustedTypes = (globalThis as unknown as Partial<Window>).trustedTypes;

packages/lit-html/src/polyfill-support.ts

@@ -95,14 +95,12 @@ const ENABLE_SHADYDOM_NOPATCH = true;
   Template: PatchableTemplateConstructor,
   ChildPart: PatchableChildPartConstructor
 ) => {
-  const extraGlobals = window as LitExtraGlobals;
-
   // polyfill-support is only needed if ShadyCSS or the ApplyShim is in use
   // We test at the point of patching, which makes it safe to load
   // webcomponentsjs and polyfill-support in either order
   if (
-    extraGlobals.ShadyCSS === undefined ||
-    (extraGlobals.ShadyCSS.nativeShadow && !extraGlobals.ShadyCSS.ApplyShim)
+    window.ShadyCSS === undefined ||
+    (window.ShadyCSS.nativeShadow && !window.ShadyCSS.ApplyShim)
   ) {
     return;
   }
@@ -114,9 +112,9 @@ const ENABLE_SHADYDOM_NOPATCH = true;
 
   const wrap =
     ENABLE_SHADYDOM_NOPATCH &&
-    extraGlobals.ShadyDOM?.inUse &&
-    extraGlobals.ShadyDOM?.noPatch === true
-      ? extraGlobals.ShadyDOM!.wrap
+    window.ShadyDOM?.inUse &&
+    window.ShadyDOM?.noPatch === true
+      ? window.ShadyDOM!.wrap
       : (node: Node) => node;
 
   const needsPrepareStyles = (name: string | undefined) =>
@@ -147,11 +145,11 @@ const ENABLE_SHADYDOM_NOPATCH = true;
     scopeCssStore.delete(name);
     // ShadyCSS removes scopes and removes the style under ShadyDOM and leaves
     // it under native Shadow DOM
-    extraGlobals.ShadyCSS!.prepareTemplateStyles(template, name);
+    window.ShadyCSS!.prepareTemplateStyles(template, name);
     // Note, under native Shadow DOM, the style is added to the beginning of the
     // template. It must be moved to the *end* of the template so it doesn't
     // mess up part indices.
-    if (hasScopeCss && extraGlobals.ShadyCSS!.nativeShadow) {
+    if (hasScopeCss && window.ShadyCSS!.nativeShadow) {
       // If there were styles but the CSS text was empty, ShadyCSS will
       // eliminate the style altogether, so the style here could be null
       const style = template.content.querySelector('style');
@@ -176,8 +174,8 @@ const ENABLE_SHADYDOM_NOPATCH = true;
     const element = originalCreateElement.call(Template, html, options);
     const scope = options?.scope;
     if (scope !== undefined) {
-      if (!extraGlobals.ShadyCSS!.nativeShadow) {
-        extraGlobals.ShadyCSS!.prepareTemplateDom(element, scope);
+      if (!window.ShadyCSS!.nativeShadow) {
+        window.ShadyCSS!.prepareTemplateDom(element, scope);
       }
       // Process styles only if this scope is being prepared. Otherwise,
       // leave styles as is for back compat with Lit1.
@@ -247,7 +245,7 @@ const ENABLE_SHADYDOM_NOPATCH = true;
       // Note, this is the temporary startNode.
       renderContainer.removeChild(renderContainerMarker);
       // When using native Shadow DOM, include prepared style in shadowRoot.
-      if (extraGlobals.ShadyCSS?.nativeShadow) {
+      if (window.ShadyCSS?.nativeShadow) {
         const style = template.content.querySelector('style');
         if (style !== null) {
           renderContainer.appendChild(style.cloneNode(true));

packages/lit-html/src/test/polyfill-support/lit-html-apply_html-test.ts

@@ -10,8 +10,6 @@ import {html as htmlWithApply} from '../../lit-html.js';
 import {renderShadowRoot} from '../test-utils/shadow-root.js';
 import {assert} from '@esm-bundle/chai';
 
-const extraGlobals = window as LitExtraGlobals;
-
 suite('@apply', () => {
   test('styles with css custom properties using @apply render', function () {
     const container = document.createElement('scope-5');
@@ -31,7 +29,7 @@ suite('@apply', () => {
       <div>Testing...</div>
     `;
     renderShadowRoot(result, container);
-    extraGlobals.ShadyCSS?.styleElement(container);
+    window.ShadyCSS?.styleElement(container);
     const div = container.shadowRoot!.querySelector('div');
     const computedStyle = getComputedStyle(div!);
     assert.equal(
@@ -61,7 +59,7 @@ suite('@apply', () => {
       const applyUser = document.createElement('apply-user');
       document.body.appendChild(applyUser);
       renderShadowRoot(applyUserContent, applyUser);
-      extraGlobals.ShadyCSS?.styleElement(applyUser);
+      window.ShadyCSS?.styleElement(applyUser);
       const applyUserDiv = applyUser.shadowRoot!.querySelector('div');
       const applyUserStyle = getComputedStyle(applyUserDiv!);
       assert.equal(
@@ -101,13 +99,13 @@ suite('@apply', () => {
       const div = applyProducer.shadowRoot!.querySelector('#test');
       assert.ok(div?.hasAttribute('some-attr'));
       assert.ok(div?.textContent, 'test');
-      extraGlobals.ShadyCSS?.styleElement(applyProducer);
+      window.ShadyCSS?.styleElement(applyProducer);
       const usersInProducer =
         applyProducer.shadowRoot!.querySelectorAll('apply-user');
       renderShadowRoot(applyUserContent, usersInProducer[0]);
-      extraGlobals.ShadyCSS?.styleElement(usersInProducer[0] as HTMLElement);
+      window.ShadyCSS?.styleElement(usersInProducer[0] as HTMLElement);
       renderShadowRoot(applyUserContent, usersInProducer[1]);
-      extraGlobals.ShadyCSS?.styleElement(usersInProducer[1] as HTMLElement);
+      window.ShadyCSS?.styleElement(usersInProducer[1] as HTMLElement);
       const userInProducerStyle1 = getComputedStyle(
         usersInProducer[0].shadowRoot!.querySelector('div')!
       );
@@ -151,7 +149,7 @@ suite('@apply', () => {
             </style>
             <div>Testing...</div>`;
         renderShadowRoot(result, this);
-        extraGlobals.ShadyCSS?.styleElement(this);
+        window.ShadyCSS?.styleElement(this);
       }
     }
     customElements.define('apply-user-ce1', E);
@@ -214,7 +212,7 @@ suite('@apply', () => {
       <div>Testing...</div>
     `;
     renderShadowRoot(result, container);
-    extraGlobals.ShadyCSS?.styleElement(container);
+    window.ShadyCSS?.styleElement(container);
     document.body.removeChild(container);
   });
 });

packages/lit-html/src/test/polyfill-support/lit-html-scoping-shim_html-test.ts

@@ -8,16 +8,14 @@ import {renderShadowRoot} from '../test-utils/shadow-root.js';
 import {html} from '../../lit-html.js';
 import {assert} from '@esm-bundle/chai';
 
-const extraGlobals = window as LitExtraGlobals;
-
 suite('ShadyCSS scoping shim', () => {
   setup(function () {
     if (
-      typeof extraGlobals.ShadyDOM === 'undefined' ||
-      !extraGlobals.ShadyDOM.inUse ||
-      typeof extraGlobals.ShadyCSS === 'undefined' ||
-      extraGlobals.ShadyCSS.nativeShadow ||
-      extraGlobals.ShadyCSS.ScopingShim === undefined
+      typeof window.ShadyDOM === 'undefined' ||
+      !window.ShadyDOM.inUse ||
+      typeof window.ShadyCSS === 'undefined' ||
+      window.ShadyCSS.nativeShadow ||
+      window.ShadyCSS.ScopingShim === undefined
     ) {
       this.skip();
       return;
@@ -26,7 +24,7 @@ suite('ShadyCSS scoping shim', () => {
 
   test('scoped styles are applied for non-TemplateResult values', function () {
     const container = document.createElement('scope-1');
-    extraGlobals.ShadyCSS!.ScopingShim!.prepareAdoptedCssText(
+    window.ShadyCSS!.ScopingShim!.prepareAdoptedCssText(
       [':host { border-top: 2px solid black; }'],
       'scope-1'
     );
@@ -41,7 +39,7 @@ suite('ShadyCSS scoping shim', () => {
 
   test('adopted CSS remains when rendering a TemplateResult after an initial non-TemplateResult', function () {
     const container = document.createElement('scope-2');
-    extraGlobals.ShadyCSS!.ScopingShim!.prepareAdoptedCssText(
+    window.ShadyCSS!.ScopingShim!.prepareAdoptedCssText(
       [':host { border-top: 2px solid black; } button { font-size: 7px; } '],
       'scope-2'
     );