Add dev mode specific versions of polyfill-support (#2145)

Fixes #2142. Allows users to a dev and prod versions of Lit that both support `polyfill-support` via loading dev and prod versions of `polyfill-support`. Previously only 1 `polyfill-support` was allowed. Note, this also changes the globals used from the older `PlatformSupport` to `PolyfillSupport`.
lit · Sep 9, 2021 · 13d137e · 13d137e
1 parent 9644937
commit 13d137e
Show file tree

Hide file tree

Showing 18 changed files with 106 additions and 31 deletions.
diff --git a/.changeset/pretty-hotels-taste.md b/.changeset/pretty-hotels-taste.md
@@ -0,0 +1,7 @@
+---
+'lit-element': patch
+'lit-html': patch
+'@lit/reactive-element': patch
+---
+
+Adds dev mode specific versions of `polyfill-support`. This allows users to load prod and dev versions of Lit with polyfill support. To enable this, both the prod and dev versions of `polyfill-support` should be loaded.
diff --git a/packages/benchmarks/package-lock.json b/packages/benchmarks/package-lock.json
diff --git a/packages/benchmarks/package.json b/packages/benchmarks/package.json
@@ -45,7 +45,7 @@
     "tachometer": "^0.5.9"
   },
   "devDependencies": {
-    "chromedriver": "^91.0.0",
+    "chromedriver": "^92.0.0",
     "typescript": "^4.3.5"
   }
 }
diff --git a/packages/lit-element/src/env.d.ts b/packages/lit-element/src/env.d.ts
@@ -9,11 +9,20 @@ declare var litElementHydrateSupport:
   | undefined
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   | ((options: {LitElement: any}) => void);
+
+// Note, define both DEV_MODE and prod versions of this since this file is not
+// built.
+// eslint-disable-next-line no-var
+declare var litElementPolyfillSupport:
+  | undefined
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  | ((options: {LitElement: any}) => void);
 // eslint-disable-next-line no-var
-declare var litElementPlatformSupport:
+declare var litElementPolyfillSupportDevMode:
   | undefined
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   | ((options: {LitElement: any}) => void);
+
 // eslint-disable-next-line no-var
 declare var litElementVersions: undefined | Array<string>;
 // eslint-disable-next-line no-var

diff --git a/packages/lit-element/src/lit-element.ts b/packages/lit-element/src/lit-element.ts
@@ -168,7 +168,9 @@ export class LitElement extends ReactiveElement {
 globalThis.litElementHydrateSupport?.({LitElement});
 
 // Apply polyfills if available
-globalThis.litElementPlatformSupport?.({LitElement});
+globalThis[`litElementPolyfillSupport${DEV_MODE ? `DevMode` : ``}`]?.({
+  LitElement,
+});
 
 // DEV mode warnings
 if (DEV_MODE) {

diff --git a/packages/lit-element/src/polyfill-support.ts b/packages/lit-element/src/polyfill-support.ts
@@ -42,7 +42,12 @@ interface PatchableLitElement extends HTMLElement {
   renderOptions: RenderOptions;
 }
 
-globalThis.litElementPlatformSupport ??= ({
+// Note, explicitly use `var` here so that this can be re-defined when
+// bundled.
+// eslint-disable-next-line no-var
+var DEV_MODE = true;
+
+globalThis[`litElementPolyfillSupport${DEV_MODE ? `DevMode` : ``}`] ??= ({
   LitElement,
 }: {
   LitElement: PatchableLitElement;

diff --git a/packages/lit-element/src/test/polyfill-support/lit-element-ce-sd-noPatch_test.html b/packages/lit-element/src/test/polyfill-support/lit-element-ce-sd-noPatch_test.html
@@ -40,10 +40,15 @@
           // setup mocha
           mocha.setup({ui: 'tdd'});
 
-          // Note, only test noPatch if it's explicitly enabled. This is set
-          // on the `litHtmlPlatformSupport` object for this purpose.
+          // Note, only test `noPatch` if it's explicitly enabled. This is set
+          // on the `litHtmlPolyfillSupport` object for this purpose.
           await import('../../polyfill-support.js');
-          if (window['litHtmlPlatformSupport']?.noPatchSupported) {
+          if (
+            // Note, since this file is not built, it doesn't support DEV_MODE
+            // so manually check both globals
+            window['litHtmlPolyfillSupport']?.noPatchSupported ||
+            window['litHtmlPolyfillSupportDevMode']?.noPatchSupported
+          ) {
             console.log('Testing `ShadyDOM.noPatch`');
             await import('./lit-element_html-test.js');
           }

diff --git a/packages/lit-element/src/test/test-helpers.ts b/packages/lit-element/src/test/test-helpers.ts
@@ -20,11 +20,13 @@ export const getComputedStyleValue = (element: Element, property: string) =>
 export const stripExpressionComments = (html: string) =>
   html.replace(/<!--\?lit\$[0-9]+\$-->|<!--\??-->/g, '');
 
+const DEV_MODE = true;
+
 // 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 && !window.ShadyDOM?.inUse) ||
-  window.litElementPlatformSupport;
+  window[`litElementPolyfillSupport${DEV_MODE ? `DevMode` : ``}`];
 
 export interface ShadyRenderOptions extends RenderOptions {
   scope?: string;

diff --git a/packages/lit-html/src/env.d.ts b/packages/lit-html/src/env.d.ts
@@ -4,12 +4,20 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
+// Note, define both DEV_MODE and prod versions of this since this file is not
+// built.
 // eslint-disable-next-line no-var
-declare var litHtmlPlatformSupport:
+declare var litHtmlPolyfillSupport:
   | undefined
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   | (((template: any, childPart: any) => void) & {noPatchSupported?: boolean});
 // eslint-disable-next-line no-var
+declare var litHtmlPolyfillSupportDevMode:
+  | undefined
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  | (((template: any, childPart: any) => void) & {noPatchSupported?: boolean});
+
+// eslint-disable-next-line no-var
 declare var litHtmlVersions: undefined | Array<string>;
 // eslint-disable-next-line no-var
 declare var litIssuedWarnings: undefined | Set<string | undefined>;
diff --git a/packages/lit-html/src/lit-html.ts b/packages/lit-html/src/lit-html.ts
@@ -794,7 +794,7 @@ class Template {
     }
   }
 
-  // Overridden via `litHtmlPlatformSupport` to provide platform support.
+  // Overridden via `litHtmlPolyfillSupport` to provide platform support.
   /** @nocollapse */
   static createElement(html: TrustedHTML, _options?: RenderOptions) {
     const el = d.createElement('template');
@@ -1249,7 +1249,7 @@ class ChildPart implements Disconnectable {
     }
   }
 
-  // Overridden via `litHtmlPlatformSupport` to provide platform support.
+  // Overridden via `litHtmlPolyfillSupport` to provide platform support.
   /** @internal */
   _$getTemplate(result: TemplateResult) {
     let template = templateCache.get(result.strings);
@@ -1740,7 +1740,10 @@ export const _$LH = {
 };
 
 // Apply polyfills if available
-globalThis.litHtmlPlatformSupport?.(Template, ChildPart);
+globalThis[`litHtmlPolyfillSupport${DEV_MODE ? `DevMode` : ``}`]?.(
+  Template,
+  ChildPart
+);
 
 // IMPORTANT: do not change the property name or the assignment expression.
 // This line will be used in regexes to search for lit-html usage.

diff --git a/packages/lit-html/src/polyfill-support.ts b/packages/lit-html/src/polyfill-support.ts
@@ -85,12 +85,17 @@ const scopeCssStore: Map<string, string[]> = new Map();
 
 const ENABLE_SHADYDOM_NOPATCH = true;
 
+// Note, explicitly use `var` here so that this can be re-defined when
+// bundled.
+// eslint-disable-next-line no-var
+var DEV_MODE = true;
+
 /**
  * lit-html patches. These properties cannot be renamed.
  * * ChildPart.prototype._$getTemplate
  * * ChildPart.prototype._$setValue
  */
-globalThis.litHtmlPlatformSupport ??= (
+globalThis[`litHtmlPolyfillSupport${DEV_MODE ? `DevMode` : ``}`] ??= (
   Template: PatchableTemplateConstructor,
   ChildPart: PatchableChildPartConstructor
 ) => {
@@ -284,5 +289,7 @@ globalThis.litHtmlPlatformSupport ??= (
 };
 
 if (ENABLE_SHADYDOM_NOPATCH) {
-  globalThis.litHtmlPlatformSupport!.noPatchSupported = ENABLE_SHADYDOM_NOPATCH;
+  globalThis[
+    `litHtmlPolyfillSupport${DEV_MODE ? `DevMode` : ``}`
+  ]!.noPatchSupported = ENABLE_SHADYDOM_NOPATCH;
 }
diff --git a/packages/lit-html/src/test/polyfill-support/lit-html-noPatch_test.html b/packages/lit-html/src/test/polyfill-support/lit-html-noPatch_test.html
@@ -40,10 +40,14 @@
           // setup mocha
           mocha.setup({ui: 'tdd'});
 
-          // Note, only test noPatch if it's explicitly enabled. This is set
-          // on the `litHtmlPlatformSupport` object for this purpose.
+          // Note, only test `noPatch` if it's explicitly enabled. This is set
+          // on the `litHtmlPolyfillSupport` object for this purpose.
           await import('../../polyfill-support.js');
-          if (window['litHtmlPlatformSupport']?.noPatchSupported) {
+          if (
+            // Note, since this file is not built, it doesn't support DEV_MODE
+            // so manually check both globals
+            window['litHtmlPolyfillSupport']?.noPatchSupported ||
+            window['litHtmlPolyfillSupportDevMode']?.noPatchSupported) {
             console.log('Testing `ShadyDOM.noPatch`');
             await import('./lit-html_html-test.js');
           }

diff --git a/packages/reactive-element/src/env.d.ts b/packages/reactive-element/src/env.d.ts
@@ -4,12 +4,20 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
+// Note, define both DEV_MODE and prod versions of this since this file is not
+// built.
 // eslint-disable-next-line no-var
-declare var reactiveElementPlatformSupport:
+declare var reactiveElementPolyfillSupport:
   | undefined
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   | ((options: {ReactiveElement: any}) => void);
 // eslint-disable-next-line no-var
+declare var reactiveElementPolyfillSupportDevMode:
+  | undefined
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  | ((options: {ReactiveElement: any}) => void);
+
+// eslint-disable-next-line no-var
 declare var reactiveElementVersions: undefined | Array<string>;
 // eslint-disable-next-line no-var
 declare var litIssuedWarnings: undefined | Set<string | undefined>;

diff --git a/packages/reactive-element/src/polyfill-support.ts b/packages/reactive-element/src/polyfill-support.ts
@@ -43,7 +43,12 @@ interface PatchableReactiveElement extends HTMLElement {
   renderOptions: RenderOptions;
 }
 
-globalThis.reactiveElementPlatformSupport ??= ({
+// Note, explicitly use `var` here so that this can be re-defined when
+// bundled.
+// eslint-disable-next-line no-var
+var DEV_MODE = true;
+
+globalThis[`reactiveElementPolyfillSupport${DEV_MODE ? `DevMode` : ``}`] ??= ({
   ReactiveElement,
 }: {
   ReactiveElement: PatchableReactiveElement;

diff --git a/packages/reactive-element/src/reactive-element.ts b/packages/reactive-element/src/reactive-element.ts
@@ -58,10 +58,11 @@ if (DEV_MODE) {
     `Lit is in dev mode. Not recommended for production!`
   );
 
-  // Issue platform support warning.
+  // Issue polyfill support warning.
   if (
     window.ShadyDOM?.inUse &&
-    globalThis.reactiveElementPlatformSupport === undefined
+    globalThis[`reactiveElementPolyfillSupport${DEV_MODE ? `DevMode` : ``}`] ===
+      undefined
   ) {
     issueWarning(
       'polyfill-support-missing',
@@ -1333,7 +1334,9 @@ export abstract class ReactiveElement
 }
 
 // Apply polyfills if available
-globalThis.reactiveElementPlatformSupport?.({ReactiveElement});
+globalThis[`reactiveElementPolyfillSupport${DEV_MODE ? `DevMode` : ``}`]?.({
+  ReactiveElement,
+});
 
 // Dev mode warnings...
 if (DEV_MODE) {

diff --git a/packages/reactive-element/src/test/reactive-element_dev_mode_test.ts b/packages/reactive-element/src/test/reactive-element_dev_mode_test.ts
@@ -18,7 +18,8 @@ if (DEV_MODE) {
     let warnings: string[] = [];
 
     const missingPlatformSupport =
-      window.ShadyDOM?.inUse && !globalThis.reactiveElementPlatformSupport;
+      window.ShadyDOM?.inUse &&
+      !globalThis[`reactiveElementPolyfillSupport${DEV_MODE ? `DevMode` : ``}`];
 
     const consoleWarn = console.warn;
 

diff --git a/packages/reactive-element/src/test/test-helpers.ts b/packages/reactive-element/src/test/test-helpers.ts
@@ -20,11 +20,13 @@ export const getComputedStyleValue = (element: Element, property: string) =>
 export const stripExpressionComments = (html: string) =>
   html.replace(/<!--\?lit\$[0-9]+\$-->|<!---->/g, '');
 
+const DEV_MODE = true;
+
 // Only test if ShadowRoot is available and either ShadyDOM is not
 // in use or it is and platform support is available.
 export const canTestReactiveElement =
   (window.ShadowRoot && !window.ShadyDOM?.inUse) ||
-  window.reactiveElementPlatformSupport;
+  window[`reactiveElementPolyfillSupport${DEV_MODE ? `DevMode` : ``}`];
 
 export class RenderingElement extends ReactiveElement {
   render(): string | undefined {

diff --git a/rollup-common.js b/rollup-common.js
@@ -442,6 +442,10 @@ const litMonoBundleConfig = ({
         'const ENABLE_SHADYDOM_NOPATCH = false',
       'export const INTERNAL = true': 'const INTERNAL = false',
       // For downleveled ES5 build of polyfill-support
+      'var DEV_MODE = true': 'var DEV_MODE = false',
+      'var ENABLE_EXTRA_SECURITY_HOOKS = true':
+        'var ENABLE_EXTRA_SECURITY_HOOKS = false',
+      'var INTERNAL = true': 'var INTERNAL = false',
       'var ENABLE_SHADYDOM_NOPATCH = true':
         'var ENABLE_SHADYDOM_NOPATCH = false',
     }),