Unstable formatting of indexes and methods invocations in javascript

[mambelli]

Prettier 3.2.5 Playground link

# Options (if any):

Input:

This happens when the snippet below is indented because of previous code like in https://raw.githubusercontent.com/glideinWMS/glideinwms/3dcd68c8730c0d1b17bb6b2d7c38e094d9ef9f28/creation/web_base/factoryEntryStatusNow.html

              document
                .getElementsByTagName("div")
                [
                  index
                ].removeChild(document.getElementsByTagName("div")[index].firstChild);

Output:

              document
                .getElementsByTagName("div")
                [index].removeChild(
                  document.getElementsByTagName("div")[index].firstChild,
                );

Expected output:

Something idempotent/stable. Prettier keeps looping between one and the other. Either the first or the second one (my preference but would be OK w/ either one)

Why?

The problem is not with one specific format but with the fact that prettier keeps changing from one to the other each time I run it on this code. It is never happy with it and keeps changing the code.

Any of the 2 snippets above w/o indentation gives:

document
  .getElementsByTagName("div")
  [index].removeChild(document.getElementsByTagName("div")[index].firstChild);

The problem is when they are indented because of the rest of the code in the file.

For reference, this is the full file: https://raw.githubusercontent.com/glideinWMS/glideinwms/3dcd68c8730c0d1b17bb6b2d7c38e094d9ef9f28/creation/web_base/factoryEntryStatusNow.html

Prettier keeps looping doing and un-doing the changes in this commit. This was applied to a file formatted by prettier and not touched:

@@ -884,9 +884,9 @@ SPDX-License-Identifier: Apache-2.0
             ) {
               document
                 .getElementsByTagName("div")
-                [
-                  index
-                ].removeChild(document.getElementsByTagName("div")[index].firstChild);
+                [index].removeChild(
+                  document.getElementsByTagName("div")[index].firstChild,
+                );
             }
             /* REMOVE ALL CHILDNODES (PARAM TABLE) */
             while (
@@ -894,9 +894,9 @@ SPDX-License-Identifier: Apache-2.0
             ) {
               document
                 .getElementsByTagName("div")
-                [
-                  index + 1
-                ].removeChild(document.getElementsByTagName("div")[index + 1].firstChild);
+                [index + 1].removeChild(
+                  document.getElementsByTagName("div")[index + 1].firstChild,
+                );
             }
             index++;
           }
@@ -927,9 +927,9 @@ SPDX-License-Identifier: Apache-2.0
             ) {
               document
                 .getElementsByTagName("div")
-                [
-                  index
-                ].removeChild(document.getElementsByTagName("div")[index].firstChild);
+                [index].removeChild(
+                  document.getElementsByTagName("div")[index].firstChild,
+                );
             }
             /* REMOVE ALL CHILDNODES (PARAM TABLE) */
             while (
@@ -937,9 +937,9 @@ SPDX-License-Identifier: Apache-2.0
             ) {
               document
                 .getElementsByTagName("div")
-                [
-                  index + 1
-                ].removeChild(document.getElementsByTagName("div")[index + 1].firstChild);
+                [index + 1].removeChild(
+                  document.getElementsByTagName("div")[index + 1].firstChild,
+                );
             }
             index++;
           }

[dcyriller]

@mambelli I have not been able to reproduce the issue. I tried:

curl -o temp.html https://raw.githubusercontent.com/glideinWMS/glideinwms/3dcd68c8730c0d1b17bb6b2d7c38e094d9ef9f28/creation/web_base/factoryEntryStatusNow.html # download your source file
npx prettier --write temp.html # the file gets formatted
npx prettier --write temp.html # the file is unchanged

Also I put your two examples in this playground link. As you can see they have the same output.

Are you sure about the Prettier version?