Use consistent prettier config for lit-html package (lit#4749)

.changeset/fluffy-apples-drive.md

@@ -0,0 +1,2 @@
+---
+---

packages/lit-html/src/.prettierrc.json

@@ -1,5 +1,6 @@
 {
   "singleQuote": true,
   "bracketSpacing": false,
+  "trailingComma": "es5",
   "embeddedLanguageFormatting": "off"
 }

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

@@ -134,7 +134,7 @@ const DEV_MODE = true;
  */
 const notifyChildrenConnectedChanged = (
   parent: Disconnectable,
-  isConnected: boolean,
+  isConnected: boolean
 ): boolean => {
   const children = parent._$disconnectableChildren;
   if (children === undefined) {
@@ -151,7 +151,7 @@ const notifyChildrenConnectedChanged = (
     // This property needs to remain unminified.
     (obj as AsyncDirective)['_$notifyDirectiveConnectionChanged']?.(
       isConnected,
-      false,
+      false
     );
     // Disconnect Part/TemplateInstance
     notifyChildrenConnectedChanged(obj, isConnected);
@@ -236,7 +236,7 @@ function notifyChildPartConnectedChanged(
   this: ChildPart,
   isConnected: boolean,
   isClearingValue = false,
-  fromPartIndex = 0,
+  fromPartIndex = 0
 ) {
   const value = this._$committedValue;
   const children = this._$disconnectableChildren;
@@ -314,7 +314,7 @@ export abstract class AsyncDirective extends Directive {
   override _$initialize(
     part: Part,
     parent: Disconnectable,
-    attributeIndex: number | undefined,
+    attributeIndex: number | undefined
   ) {
     super._$initialize(part, parent, attributeIndex);
     addDisconnectableToParent(this);
@@ -335,7 +335,7 @@ export abstract class AsyncDirective extends Directive {
    */
   override ['_$notifyDirectiveConnectionChanged'](
     isConnected: boolean,
-    isClearingDirective = true,
+    isClearingDirective = true
   ) {
     if (isConnected !== this.isConnected) {
       this.isConnected = isConnected;

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

@@ -54,7 +54,7 @@ type IsTemplateResult = {
   (val: unknown): val is MaybeCompiledTemplateResult;
   <T extends TemplateResultType>(
     val: unknown,
-    type: T,
+    type: T
   ): val is UncompiledTemplateResult<T>;
 };
 
@@ -63,7 +63,7 @@ type IsTemplateResult = {
  */
 export const isTemplateResult: IsTemplateResult = (
   value: unknown,
-  type?: TemplateResultType,
+  type?: TemplateResultType
 ): value is UncompiledTemplateResult =>
   type === undefined
     ? // This property needs to remain unminified.
@@ -74,7 +74,7 @@ export const isTemplateResult: IsTemplateResult = (
  * Tests if a value is a CompiledTemplateResult.
  */
 export const isCompiledTemplateResult = (
-  value: unknown,
+  value: unknown
 ): value is CompiledTemplateResult => {
   return (value as CompiledTemplateResult)?.['_$litType$']?.h != null;
 };
@@ -121,7 +121,7 @@ const createMarker = () => document.createComment('');
 export const insertPart = (
   containerPart: ChildPart,
   refPart?: ChildPart,
-  part?: ChildPart,
+  part?: ChildPart
 ): ChildPart => {
   const container = wrap(containerPart._$startNode).parentNode!;
 
@@ -135,7 +135,7 @@ export const insertPart = (
       startNode,
       endNode,
       containerPart,
-      containerPart.options,
+      containerPart.options
     );
   } else {
     const endNode = wrap(part._$endNode!).nextSibling;
@@ -192,7 +192,7 @@ export const insertPart = (
 export const setChildPartValue = <T extends ChildPart>(
   part: T,
   value: unknown,
-  directiveParent: DirectiveParent = part,
+  directiveParent: DirectiveParent = part
 ): T => {
   part._$setValue(value, directiveParent);
   return part;

packages/lit-html/src/directive.ts

@@ -124,7 +124,7 @@ export abstract class Directive implements Disconnectable {
   _$initialize(
     part: Part,
     parent: Disconnectable,
-    attributeIndex: number | undefined,
+    attributeIndex: number | undefined
   ) {
     this.__part = part;
     this._$parent = parent;

packages/lit-html/src/directives/async-replace.ts

@@ -27,7 +27,7 @@ export class AsyncReplaceDirective extends AsyncDirective {
 
   override update(
     _part: ChildPart,
-    [value, mapper]: DirectiveParameters<this>,
+    [value, mapper]: DirectiveParameters<this>
   ) {
     // If our initial render occurs while disconnected, ensure that the pauser
     // and weakThis are in the disconnected state

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

@@ -33,7 +33,7 @@ import {
  * only use the returned template strings array as a cache key.
  */
 const getStringsFromTemplateResult = (
-  result: TemplateResult | CompiledTemplateResult,
+  result: TemplateResult | CompiledTemplateResult
 ): TemplateStringsArray =>
   isCompiledTemplateResult(result) ? result['_$litType$'].h : result.strings;
 
@@ -84,7 +84,7 @@ class CacheDirective extends Directive {
         if (cachedContainerPart !== undefined) {
           // Move the cached part back into the container part value
           const partValue = getCommittedValue(
-            cachedContainerPart,
+            cachedContainerPart
           ) as Array<ChildPart>;
           const cachedPart = partValue.pop()!;
           // Move cached part back into DOM

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

@@ -32,7 +32,7 @@
 export const choose = <T, V, K extends T = T>(
   value: T,
   cases: Array<[K, () => V]>,
-  defaultCase?: () => V,
+  defaultCase?: () => V
 ) => {
   for (const c of cases) {
     const caseValue = c[0];

packages/lit-html/src/directives/class-map.ts

@@ -37,7 +37,7 @@ class ClassMapDirective extends Directive {
     ) {
       throw new Error(
         '`classMap()` can only be used in the `class` attribute ' +
-          'and must be the only part in the attribute.',
+          'and must be the only part in the attribute.'
       );
     }
   }
@@ -62,7 +62,7 @@ class ClassMapDirective extends Directive {
           part.strings
             .join(' ')
             .split(/\s/)
-            .filter((s) => s !== ''),
+            .filter((s) => s !== '')
         );
       }
       for (const name in classInfo) {

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

@@ -19,11 +19,11 @@
  */
 export function join<I, J>(
   items: Iterable<I> | undefined,
-  joiner: (index: number) => J,
+  joiner: (index: number) => J
 ): Iterable<I | J>;
 export function join<I, J>(
   items: Iterable<I> | undefined,
-  joiner: J,
+  joiner: J
 ): Iterable<I | J>;
 export function* join<I, J>(items: Iterable<I> | undefined, joiner: J) {
   const isFunction = typeof joiner === 'function';

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

@@ -25,7 +25,7 @@ class LiveDirective extends Directive {
       )
     ) {
       throw new Error(
-        'The `live` directive is not allowed on child or event bindings',
+        'The `live` directive is not allowed on child or event bindings'
       );
     }
     if (!isSingleExpression(partInfo)) {

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

@@ -22,7 +22,7 @@
  */
 export function* map<T>(
   items: Iterable<T> | undefined,
-  f: (value: T, index: number) => unknown,
+  f: (value: T, index: number) => unknown
 ) {
   if (items !== undefined) {
     let i = 0;

packages/lit-html/src/directives/private-async-helpers.ts

@@ -16,7 +16,7 @@
  */
 export const forAwaitOf = async <T>(
   iterable: AsyncIterable<T>,
-  callback: (value: T) => Promise<boolean>,
+  callback: (value: T) => Promise<boolean>
 ) => {
   for await (const v of iterable) {
     if ((await callback(v)) === false) {

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

@@ -24,7 +24,7 @@ export function range(end: number): Iterable<number>;
 export function range(
   start: number,
   end: number,
-  step?: number,
+  step?: number
 ): Iterable<number>;
 export function* range(startOrEnd: number, end?: number, step = 1) {
   const start = end === undefined ? 0 : startOrEnd;

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

@@ -41,7 +41,7 @@ class RepeatDirective extends Directive {
   private _getValuesAndKeys<T>(
     items: Iterable<T>,
     keyFnOrTemplate: KeyFn<T> | ItemTemplate<T>,
-    template?: ItemTemplate<T>,
+    template?: ItemTemplate<T>
   ) {
     let keyFn: KeyFn<T> | undefined;
     if (template === undefined) {
@@ -67,12 +67,12 @@ class RepeatDirective extends Directive {
   render<T>(
     items: Iterable<T>,
     keyFn: KeyFn<T> | ItemTemplate<T>,
-    template: ItemTemplate<T>,
+    template: ItemTemplate<T>
   ): Array<unknown>;
   render<T>(
     items: Iterable<T>,
     keyFnOrTemplate: KeyFn<T> | ItemTemplate<T>,
-    template?: ItemTemplate<T>,
+    template?: ItemTemplate<T>
   ) {
     return this._getValuesAndKeys(items, keyFnOrTemplate, template).values;
   }
@@ -83,17 +83,17 @@ class RepeatDirective extends Directive {
       Iterable<T>,
       KeyFn<T> | ItemTemplate<T>,
       ItemTemplate<T>,
-    ],
+    ]
   ) {
     // Old part & key lists are retrieved from the last update (which may
     // be primed by hydration)
     const oldParts = getCommittedValue(
-      containerPart,
+      containerPart
     ) as Array<ChildPart | null>;
     const {values: newValues, keys: newKeys} = this._getValuesAndKeys(
       items,
       keyFnOrTemplate,
-      template,
+      template
     );
 
     // We check that oldParts, the committed value, is an Array as an
@@ -340,23 +340,23 @@ class RepeatDirective extends Directive {
         // Old head matches new head; update in place
         newParts[newHead] = setChildPartValue(
           oldParts[oldHead]!,
-          newValues[newHead],
+          newValues[newHead]
         );
         oldHead++;
         newHead++;
       } else if (oldKeys[oldTail] === newKeys[newTail]) {
         // Old tail matches new tail; update in place
         newParts[newTail] = setChildPartValue(
           oldParts[oldTail]!,
-          newValues[newTail],
+          newValues[newTail]
         );
         oldTail--;
         newTail--;
       } else if (oldKeys[oldHead] === newKeys[newTail]) {
         // Old head matches new tail; update and move to new tail
         newParts[newTail] = setChildPartValue(
           oldParts[oldHead]!,
-          newValues[newTail],
+          newValues[newTail]
         );
         insertPart(containerPart, newParts[newTail + 1], oldParts[oldHead]!);
         oldHead++;
@@ -365,7 +365,7 @@ class RepeatDirective extends Directive {
         // Old tail matches new head; update and move to new head
         newParts[newHead] = setChildPartValue(
           oldParts[oldTail]!,
-          newValues[newHead],
+          newValues[newHead]
         );
         insertPart(containerPart, oldParts[oldHead]!, oldParts[oldTail]!);
         oldTail--;
@@ -437,13 +437,13 @@ export interface RepeatDirectiveFn {
   <T>(
     items: Iterable<T>,
     keyFnOrTemplate: KeyFn<T> | ItemTemplate<T>,
-    template?: ItemTemplate<T>,
+    template?: ItemTemplate<T>
   ): unknown;
   <T>(items: Iterable<T>, template: ItemTemplate<T>): unknown;
   <T>(
     items: Iterable<T>,
     keyFn: KeyFn<T> | ItemTemplate<T>,
-    template: ItemTemplate<T>,
+    template: ItemTemplate<T>
   ): unknown;
 }
 

packages/lit-html/src/directives/style-map.ts

@@ -42,7 +42,7 @@ class StyleMapDirective extends Directive {
     ) {
       throw new Error(
         'The `styleMap` directive must be used in the `style` attribute ' +
-          'and must be the only part in the attribute.',
+          'and must be the only part in the attribute.'
       );
     }
   }
@@ -104,7 +104,7 @@ class StyleMapDirective extends Directive {
             isImportant
               ? (value as string).slice(0, flagTrim)
               : (value as string),
-            isImportant ? important : '',
+            isImportant ? important : ''
           );
         } else {
           // eslint-disable-next-line @typescript-eslint/no-explicit-any

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

@@ -22,7 +22,7 @@ export class UnsafeHTMLDirective extends Directive {
       throw new Error(
         `${
           (this.constructor as typeof UnsafeHTMLDirective).directiveName
-        }() can only be used in child bindings`,
+        }() can only be used in child bindings`
       );
     }
   }
@@ -39,7 +39,7 @@ export class UnsafeHTMLDirective extends Directive {
       throw new Error(
         `${
           (this.constructor as typeof UnsafeHTMLDirective).directiveName
-        }() called with a non-string value`,
+        }() called with a non-string value`
       );
     }
     if (value === this._value) {

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

@@ -26,22 +26,22 @@ type Falsy = null | undefined | false | 0 | -0 | 0n | '';
 export function when<C extends Falsy, T, F = undefined>(
   condition: C,
   trueCase: (c: C) => T,
-  falseCase?: (c: C) => F,
+  falseCase?: (c: C) => F
 ): F;
 export function when<C, T, F>(
   condition: C extends Falsy ? never : C,
   trueCase: (c: C) => T,
-  falseCase?: (c: C) => F,
+  falseCase?: (c: C) => F
 ): T;
 export function when<C, T, F = undefined>(
   condition: C,
   trueCase: (c: Exclude<C, Falsy>) => T,
-  falseCase?: (c: Extract<C, Falsy>) => F,
+  falseCase?: (c: Extract<C, Falsy>) => F
 ): C extends Falsy ? F : T;
 export function when(
   condition: unknown,
   trueCase: (c: unknown) => unknown,
-  falseCase?: (c: unknown) => unknown,
+  falseCase?: (c: unknown) => unknown
 ): unknown {
   return condition ? trueCase(condition) : falseCase?.(condition);
 }