Makes properties that should remain unminified compatible with tools … (lit#1972)

Makes properties that should remain unminified compatible with tools other than rollup/terser; fixes lit#1970.

Author: Steve Orvell

.changeset/warm-berries-drive.md

@@ -0,0 +1,8 @@
+---
+'@lit-labs/ssr': patch
+'lit-element': patch
+'lit-html': patch
+'@lit/reactive-element': patch
+---
+
+Properties that must remain unminified are now compatible with build tools other than rollup/terser.

packages/labs/ssr/src/lib/lit-element-renderer.ts

@@ -20,7 +20,8 @@ export class LitElementRenderer extends ElementRenderer {
   element: LitElement;
 
   static matchesClass(ctor: typeof HTMLElement) {
-    return (ctor as unknown as typeof LitElement)._$litElement$;
+    // This property needs to remain unminified.
+    return (ctor as unknown as typeof LitElement)['_$litElement$'];
   }
 
   constructor(tagName: string) {

packages/labs/ssr/src/lib/render-lit-html.ts

@@ -74,7 +74,8 @@ const patchedDirectiveCache: WeakMap<DirectiveClass, DirectiveClass> =
  * with a subclass that calls `render` rather than `update`
  */
 const patchIfDirective = (value: unknown) => {
-  const directiveCtor = (value as DirectiveResult)?._$litDirective$;
+  // This property needs to remain unminified.
+  const directiveCtor = (value as DirectiveResult)?.['_$litDirective$'];
   if (directiveCtor !== undefined) {
     let patchedCtor = patchedDirectiveCache.get(directiveCtor);
     if (patchedCtor === undefined) {
@@ -88,7 +89,8 @@ const patchIfDirective = (value: unknown) => {
       );
       patchedDirectiveCache.set(directiveCtor, patchedCtor);
     }
-    (value as DirectiveResult)._$litDirective$ = patchedCtor;
+    // This property needs to remain unminified.
+    (value as DirectiveResult)['_$litDirective$'] = patchedCtor;
   }
   return value;
 };
@@ -277,7 +279,11 @@ const getTemplateOpcodes = (result: TemplateResult) => {
   if (template !== undefined) {
     return template;
   }
-  const [html, attrNames] = getTemplateHtml(result.strings, result._$litType$);
+  // The property '_$litType$' needs to remain unminified.
+  const [html, attrNames] = getTemplateHtml(
+    result.strings,
+    result['_$litType$']
+  );
 
   /**
    * The html string is parsed into a parse5 AST with source code information

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

@@ -87,7 +87,8 @@ export class LitElement extends ReactiveElement {
    */
   protected static ['finalized'] = true;
 
-  static _$litElement$ = true;
+  // This property needs to remain unminified.
+  static ['_$litElement$'] = true;
 
   /**
    * @category rendering

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

@@ -153,7 +153,8 @@ const setChildrenConnected = (
     // `_$setChildPartConnected`, which exists `ChildParts` which are also in
     // this list
     // Disconnect Directive (and any nested directives contained within)
-    (obj as AsyncDirective)._$setDirectiveConnected?.(isConnected, false);
+    // This property needs to remain unminified.
+    (obj as AsyncDirective)['_$setDirectiveConnected']?.(isConnected, false);
     // Disconnect Part/TemplateInstance
     setChildrenConnected(obj, isConnected);
   }
@@ -305,6 +306,7 @@ export abstract class AsyncDirective extends Directive {
     super._$initialize(part, parent, attributeIndex);
     addDisconnectableToParent(this);
   }
+  // This property needs to remain unminified.
   /**
    * Called from the core code when a directive is going away from a part (in
    * which case `shouldRemoveFromParent` should be true), and from the
@@ -317,7 +319,10 @@ export abstract class AsyncDirective extends Directive {
    *     removed; false when the tree is being disconnected
    * @internal
    */
-  _$setDirectiveConnected(isConnected: boolean, isClearingDirective = true) {
+  ['_$setDirectiveConnected'](
+    isConnected: boolean,
+    isClearingDirective = true
+  ) {
     this._setConnected(isConnected);
     if (isClearingDirective) {
       setChildrenConnected(this, isConnected);

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

@@ -52,20 +52,23 @@ export const isTemplateResult = (
   type?: TemplateResultType
 ): value is TemplateResult =>
   type === undefined
-    ? (value as TemplateResult)?._$litType$ !== undefined
-    : (value as TemplateResult)?._$litType$ === type;
+    ? // This property needs to remain unminified.
+      (value as TemplateResult)?.['_$litType$'] !== undefined
+    : (value as TemplateResult)?.['_$litType$'] === type;
 
 /**
  * Tests if a value is a DirectiveResult.
  */
 export const isDirectiveResult = (value: unknown): value is DirectiveResult =>
-  (value as DirectiveResult)?._$litDirective$ !== undefined;
+  // This property needs to remain unminified.
+  (value as DirectiveResult)?.['_$litDirective$'] !== undefined;
 
 /**
  * Retrieves the Directive class for a DirectiveResult
  */
 export const getDirectiveClass = (value: unknown): DirectiveClass | undefined =>
-  (value as DirectiveResult)?._$litDirective$;
+  // This property needs to remain unminified.
+  (value as DirectiveResult)?.['_$litDirective$'];
 
 /**
  * Tests whether a part has only a single-expression with no strings to

packages/lit-html/src/directive.ts

@@ -31,8 +31,10 @@ export type DirectiveParameters<C extends Directive> = Parameters<C['render']>;
  * returns a DirectiveResult object that captures the arguments.
  */
 export interface DirectiveResult<C extends DirectiveClass = DirectiveClass> {
-  /** @internal */
-  _$litDirective$: C;
+  /**
+   * This property needs to remain unminified.
+   * @internal */
+  ['_$litDirective$']: C;
   /** @internal */
   values: DirectiveParameters<InstanceType<C>>;
 }
@@ -82,7 +84,8 @@ export type PartInfo = ChildPartInfo | AttributePartInfo | ElementPartInfo;
 export const directive =
   <C extends DirectiveClass>(c: C) =>
   (...values: DirectiveParameters<InstanceType<C>>): DirectiveResult<C> => ({
-    _$litDirective$: c,
+    // This property needs to remain unminified.
+    ['_$litDirective$']: c,
     values,
   });
 
@@ -105,8 +108,9 @@ export abstract class Directive {
   // These will only exist on the AsyncDirective subclass
   //@internal
   _$disconnectableChildren?: Set<Disconnectable>;
+  // This property needs to remain unminified.
   //@internal
-  _$setDirectiveConnected?(isConnected: boolean): void;
+  ['_$setDirectiveConnected']?(isConnected: boolean): void;
 
   constructor(_partInfo: PartInfo) {}
 

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

@@ -55,7 +55,8 @@ export class UnsafeHTMLDirective extends Directive {
     return (this._templateResult = {
       // Cast to a known set of integers that satisfy ResultType so that we
       // don't have to export ResultType and possibly encourage this pattern.
-      _$litType$: (this.constructor as typeof UnsafeHTMLDirective)
+      // This property needs to remain unminified.
+      ['_$litType$']: (this.constructor as typeof UnsafeHTMLDirective)
         .resultType as 1 | 2,
       strings,
       values: [],

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

@@ -115,8 +115,9 @@ export const hydrate = (
   options: Partial<RenderOptions> = {}
 ) => {
   // TODO(kschaaf): Do we need a helper for _$litPart$ ("part for node")?
+  // This property needs to remain unminified.
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  if ((container as any)._$litPart$ !== undefined) {
+  if ((container as any)['_$litPart$'] !== undefined) {
     throw new Error('container already contains a live render');
   }
 
@@ -173,8 +174,9 @@ export const hydrate = (
     rootPart !== undefined,
     'there should be exactly one root part in a render container'
   );
+  // This property needs to remain unminified.
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (container as any)._$litPart$ = rootPart;
+  (container as any)['_$litPart$'] = rootPart;
 };
 
 const openChildPart = (

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

@@ -241,7 +241,8 @@ const COMMENT_PART = 7;
  * The return type of the template tag functions.
  */
 export type TemplateResult<T extends ResultType = ResultType> = {
-  _$litType$: T;
+  // This property needs to remain unminified.
+  ['_$litType$']: T;
   // TODO (justinfagnani): consider shorter names, like `s` and `v`. This is a
   // semi-public API though. We can't just let Terser rename them for us,
   // because we need TemplateResults to work between compatible versions of
@@ -257,7 +258,8 @@ export type SVGTemplateResult = TemplateResult<typeof SVG_RESULT>;
 export interface CompiledTemplateResult {
   // This is a factory in order to make template initialization lazy
   // and allow ShadyRenderOptions scope to be passed in.
-  _$litType$: CompiledTemplate;
+  // This property needs to remain unminified.
+  ['_$litType$']: CompiledTemplate;
   values: unknown[];
 }
 
@@ -274,9 +276,10 @@ export interface CompiledTemplate extends Omit<Template, 'el'> {
  * the given result type.
  */
 const tag =
-  <T extends ResultType>(_$litType$: T) =>
+  <T extends ResultType>(type: T) =>
   (strings: TemplateStringsArray, ...values: unknown[]): TemplateResult<T> => ({
-    _$litType$,
+    // This property needs to remain unminified.
+    ['_$litType$']: type,
     strings,
     values,
   });
@@ -355,8 +358,9 @@ export const render = (
   options?: RenderOptions
 ): ChildPart => {
   const partOwnerNode = options?.renderBefore ?? container;
+  // This property needs to remain unminified.
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let part: ChildPart = (partOwnerNode as any)._$litPart$;
+  let part: ChildPart = (partOwnerNode as any)['_$litPart$'];
   if (part === undefined) {
     // Internal modification: don't clear container to match lit-html 2.0
     if (
@@ -367,8 +371,9 @@ export const render = (
       container.childNodes.forEach((c) => c.remove());
     }
     const endNode = options?.renderBefore ?? null;
+    // This property needs to remain unminified.
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (partOwnerNode as any)._$litPart$ = part = new ChildPart(
+    (partOwnerNode as any)['_$litPart$'] = part = new ChildPart(
       container.insertBefore(createMarker(), endNode),
       endNode,
       undefined,
@@ -589,7 +594,8 @@ class Template {
   parts: Array<TemplatePart> = [];
 
   constructor(
-    {strings, _$litType$: type}: TemplateResult,
+    // This property needs to remain unminified.
+    {strings, ['_$litType$']: type}: TemplateResult,
     options?: RenderOptions
   ) {
     let node: Node | null;
@@ -749,9 +755,11 @@ function resolveDirective(
       : (parent as ChildPart | ElementPart | Directive).__directive;
   const nextDirectiveConstructor = isPrimitive(value)
     ? undefined
-    : (value as DirectiveResult)._$litDirective$;
+    : // This property needs to remain unminified.
+      (value as DirectiveResult)['_$litDirective$'];
   if (currentDirective?.constructor !== nextDirectiveConstructor) {
-    currentDirective?._$setDirectiveConnected?.(false);
+    // This property needs to remain unminified.
+    currentDirective?.['_$setDirectiveConnected']?.(false);
     if (nextDirectiveConstructor === undefined) {
       currentDirective = undefined;
     } else {
@@ -1011,7 +1019,8 @@ class ChildPart {
       } else if (value !== this._$committedValue && value !== noChange) {
         this._commitText(value);
       }
-    } else if ((value as TemplateResult)._$litType$ !== undefined) {
+      // This property needs to remain unminified.
+    } else if ((value as TemplateResult)['_$litType$'] !== undefined) {
       this._commitTemplateResult(value as TemplateResult);
     } else if ((value as Node).nodeType !== undefined) {
       this._commitNode(value as Node);
@@ -1091,20 +1100,18 @@ class ChildPart {
   private _commitTemplateResult(
     result: TemplateResult | CompiledTemplateResult
   ): void {
-    const {values, _$litType$} = result;
+    // This property needs to remain unminified.
+    const {values, ['_$litType$']: type} = result;
     // If $litType$ is a number, result is a plain TemplateResult and we get
     // the template from the template cache. If not, result is a
     // CompiledTemplateResult and _$litType$ is a CompiledTemplate and we need
     // to create the <template> element the first time we see it.
     const template: Template | CompiledTemplate =
-      typeof _$litType$ === 'number'
+      typeof type === 'number'
         ? this._$getTemplate(result as TemplateResult)
-        : (_$litType$.el === undefined &&
-            (_$litType$.el = Template.createElement(
-              _$litType$.h,
-              this.options
-            )),
-          _$litType$);
+        : (type.el === undefined &&
+            (type.el = Template.createElement(type.h, this.options)),
+          type);
 
     if ((this._$committedValue as TemplateInstance)?._$template === template) {
       (this._$committedValue as TemplateInstance)._update(values);
@@ -1233,12 +1240,6 @@ class AttributePart {
   _$disconnectableChildren?: Set<Disconnectable> = undefined;
 
   protected _sanitizer: ValueSanitizer | undefined;
-  /** @internal */
-  _setDirectiveConnected?: (
-    directive: Directive | undefined,
-    isConnected: boolean,
-    removeFromParent?: boolean
-  ) => void = undefined;
 
   get tagName() {
     return this.element.tagName;
@@ -1489,13 +1490,6 @@ class ElementPart {
   /** @internal */
   _$disconnectableChildren?: Set<Disconnectable> = undefined;
 
-  /** @internal */
-  _setDirectiveConnected?: (
-    directive: Directive | undefined,
-    isConnected: boolean,
-    removeFromParent?: boolean
-  ) => void = undefined;
-
   options: RenderOptions | undefined;
 
   constructor(

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

@@ -32,7 +32,8 @@ interface RenderOptions {
 
 interface ShadyTemplateResult {
   strings: TemplateStringsArray;
-  _$litType$?: string;
+  // This property needs to remain unminified.
+  ['_$litType$']?: string;
 }
 
 // Note, this is a dummy type as the full type here is big.
@@ -233,7 +234,8 @@ const ENABLE_SHADYDOM_NOPATCH = true;
 
       // Get the template for this result or create a dummy one if a result
       // is not being rendered.
-      const template = (value as ShadyTemplateResult)?._$litType$
+      // This property needs to remain unminified.
+      const template = (value as ShadyTemplateResult)?.['_$litType$']
         ? (this._$committedValue as PatchableTemplateInstance)._$template.el
         : document.createElement('template');
       prepareStyles(scope!, template);

packages/lit-html/src/test/directives/style-map_test.ts

@@ -36,7 +36,8 @@ suite('styleMap', () => {
   test('render() only properties', () => {
     // Get the StyleMapDirective class indirectly, since it's not exported
     const result = styleMap({});
-    const StyleMapDirective = result._$litDirective$;
+    // This property needs to remain unminified.
+    const StyleMapDirective = result['_$litDirective$'];
 
     // Extend StyleMapDirective so we can test its render() method
     class TestStyleMapDirective extends StyleMapDirective {

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

@@ -1529,7 +1529,8 @@ suite('lit-html', () => {
       };
       assertRender(
         {
-          _$litType$: _$lit_template_1,
+          // This property needs to remain unminified.
+          ['_$litType$']: _$lit_template_1,
           values: ['A'],
         },
         'A'
@@ -1543,7 +1544,8 @@ suite('lit-html', () => {
         parts: [{type: 2, index: 1}],
       };
       const result = {
-        _$litType$: _$lit_template_1,
+        // This property needs to remain unminified.
+        ['_$litType$']: _$lit_template_1,
         values: ['A'],
       };
       assertRender(result, '<div>A</div>');
@@ -1564,7 +1566,8 @@ suite('lit-html', () => {
         ],
       };
       const result = {
-        _$litType$: _$lit_template_1,
+        // This property needs to remain unminified.
+        ['_$litType$']: _$lit_template_1,
         values: ['A'],
       };
       assertRender(result, '<div foo="A"></div>');
@@ -1578,7 +1581,8 @@ suite('lit-html', () => {
         parts: [{type: 6, index: 0}],
       };
       const result = {
-        _$litType$: _$lit_template_1,
+        // This property needs to remain unminified.
+        ['_$litType$']: _$lit_template_1,
         values: [ref(r)],
       };
       assertRender(result, '<div></div>');