Reformat JavaScript files with Prettier (#2517)

* Reformat JavaScript files with Prettier

Ran `npm run fix` to apply consistent code formatting across JavaScript
files using the project's Prettier configuration (2 spaces, no tabs).

Files reformatted:
- datasette/static/datasette-manager.js
- datasette/static/json-format-highlight-1.0.1.js
- datasette/static/table.js

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* Upgrade Prettier from 2.2.1 to 3.6.2

Updated package.json and package-lock.json to use Prettier 3.6.2,
ensuring consistent formatting between local development and CI.

The existing JavaScript files are already formatted with Prettier 3.x
style from the previous commit.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>

datasette/static/datasette-manager.js

@@ -93,12 +93,12 @@ const datasetteManager = {
    */
   renderAboveTablePanel: () => {
     const aboveTablePanel = document.querySelector(
-      DOM_SELECTORS.aboveTablePanel
+      DOM_SELECTORS.aboveTablePanel,
     );
 
     if (!aboveTablePanel) {
       console.warn(
-        "This page does not have a table, the renderAboveTablePanel cannot be used."
+        "This page does not have a table, the renderAboveTablePanel cannot be used.",
       );
       return;
     }

datasette/static/json-format-highlight-1.0.1.js

@@ -7,8 +7,8 @@ MIT Licensed
   typeof exports === "object" && typeof module !== "undefined"
     ? (module.exports = factory())
     : typeof define === "function" && define.amd
-    ? define(factory)
+      ? define(factory)
-    : (global.jsonFormatHighlight = factory());
+      : (global.jsonFormatHighlight = factory());
 })(this, function () {
   "use strict";
 
@@ -42,13 +42,13 @@ MIT Licensed
           color = /true/.test(match)
             ? colors.trueColor
             : /false/.test(match)
-            ? colors.falseColor
+              ? colors.falseColor
-            : /null/.test(match)
+              : /null/.test(match)
-            ? colors.nullColor
+                ? colors.nullColor
-            : color;
+                : color;
         }
         return '<span style="color: ' + color + '">' + match + "</span>";
-      }
+      },
     );
   }
 

datasette/static/table.js

@@ -132,7 +132,7 @@ const initDatasetteTable = function (manager) {
     /* Only show "Facet by this" if it's not the first column, not selected,
        not a single PK and the Datasette allow_facet setting is True */
     var displayedFacets = Array.from(
-      document.querySelectorAll(".facet-info")
+      document.querySelectorAll(".facet-info"),
     ).map((el) => el.dataset.column);
     var isFirstColumn =
       th.parentElement.querySelector("th:first-of-type") == th;
@@ -152,7 +152,7 @@ const initDatasetteTable = function (manager) {
     }
     /* Show notBlank option if not selected AND at least one visible blank value */
     var tdsForThisColumn = Array.from(
-      th.closest("table").querySelectorAll("td." + th.className)
+      th.closest("table").querySelectorAll("td." + th.className),
     );
     if (
       params.get(`${column}__notblank`) != "1" &&
@@ -191,29 +191,31 @@ const initDatasetteTable = function (manager) {
     // Plugin hook: allow adding JS-based additional menu items
     const columnActionsPayload = {
       columnName: th.dataset.column,
-      columnNotNull: th.dataset.columnNotNull === '1',
+      columnNotNull: th.dataset.columnNotNull === "1",
       columnType: th.dataset.columnType,
-      isPk: th.dataset.isPk === '1'
+      isPk: th.dataset.isPk === "1",
     };
     const columnItemConfigs = manager.makeColumnActions(columnActionsPayload);
 
-    const menuList = menu.querySelector('ul');
+    const menuList = menu.querySelector("ul");
-    columnItemConfigs.forEach(itemConfig => {
+    columnItemConfigs.forEach((itemConfig) => {
       // Remove items from previous render. We assume entries have unique labels.
       const existingItems = menuList.querySelectorAll(`li`);
-      Array.from(existingItems).filter(item => item.innerText === itemConfig.label).forEach(node => {
+      Array.from(existingItems)
-        node.remove();
+        .filter((item) => item.innerText === itemConfig.label)
-      });
+        .forEach((node) => {
+          node.remove();
+        });
 
-      const newLink = document.createElement('a');
+      const newLink = document.createElement("a");
       newLink.textContent = itemConfig.label;
-      newLink.href = itemConfig.href ?? '#';
+      newLink.href = itemConfig.href ?? "#";
       if (itemConfig.onClick) {
         newLink.onclick = itemConfig.onClick;
       }
 
       // Attach new elements to DOM
-      const menuItem = document.createElement('li');
+      const menuItem = document.createElement("li");
       menuItem.appendChild(newLink);
       menuList.appendChild(menuItem);
     });
@@ -225,17 +227,17 @@ const initDatasetteTable = function (manager) {
       menu.style.left = windowWidth - menuWidth - 20 + "px";
     }
     // Align menu .hook arrow with the column cog icon
-    const hook = menu.querySelector('.hook');
+    const hook = menu.querySelector(".hook");
-    const icon = th.querySelector('.dropdown-menu-icon');
+    const icon = th.querySelector(".dropdown-menu-icon");
     const iconRect = icon.getBoundingClientRect();
-    const hookLeft = (iconRect.left - menuLeft + 1) + 'px';
+    const hookLeft = iconRect.left - menuLeft + 1 + "px";
     hook.style.left = hookLeft;
     // Move the whole menu right if the hook is too far right
     const menuRect = menu.getBoundingClientRect();
     if (iconRect.right > menuRect.right) {
-      menu.style.left = (iconRect.right - menuWidth) + 'px';
+      menu.style.left = iconRect.right - menuWidth + "px";
       // And move hook tip as well
-      hook.style.left = (menuWidth - 13) + 'px';
+      hook.style.left = menuWidth - 13 + "px";
     }
   }
 
@@ -250,7 +252,9 @@ const initDatasetteTable = function (manager) {
   menu.style.display = "none";
   document.body.appendChild(menu);
 
-  var ths = Array.from(document.querySelectorAll(manager.selectors.tableHeaders));
+  var ths = Array.from(
+    document.querySelectorAll(manager.selectors.tableHeaders),
+  );
   ths.forEach((th) => {
     if (!th.querySelector("a")) {
       return;
@@ -264,9 +268,9 @@ const initDatasetteTable = function (manager) {
 /* Add x buttons to the filter rows */
 function addButtonsToFilterRows(manager) {
   var x = "✖";
-  var rows = Array.from(document.querySelectorAll(manager.selectors.filterRow)).filter((el) =>
+  var rows = Array.from(
-    el.querySelector(".filter-op")
+    document.querySelectorAll(manager.selectors.filterRow),
-  );
+  ).filter((el) => el.querySelector(".filter-op"));
   rows.forEach((row) => {
     var a = document.createElement("a");
     a.setAttribute("href", "#");
@@ -287,18 +291,18 @@ function addButtonsToFilterRows(manager) {
       a.style.display = "none";
     }
   });
-};
+}
 
 /* Set up datalist autocomplete for filter values */
 function initAutocompleteForFilterValues(manager) {
   function createDataLists() {
     var facetResults = document.querySelectorAll(
-      manager.selectors.facetResults
+      manager.selectors.facetResults,
     );
     Array.from(facetResults).forEach(function (facetResult) {
       // Use link text from all links in the facet result
       var links = Array.from(
-        facetResult.querySelectorAll("li:not(.facet-truncated) a")
+        facetResult.querySelectorAll("li:not(.facet-truncated) a"),
       );
       // Create a datalist element
       var datalist = document.createElement("datalist");
@@ -324,7 +328,7 @@ function initAutocompleteForFilterValues(manager) {
         .setAttribute("list", "datalist-" + event.target.value);
     }
   });
-};
+}
 
 // Ensures Table UI is initialized only after the Manager is ready.
 document.addEventListener("datasette_init", function (evt) {

package-lock.json

@@ -13,7 +13,7 @@
         "rollup": "^3.29.5"
       },
       "devDependencies": {
-        "prettier": "^2.2.1"
+        "prettier": "^3.0.0"
       }
     },
     "node_modules/@codemirror/autocomplete": {
@@ -391,15 +391,19 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.2.1",
+      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
-      "integrity": "sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==",
+      "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
       "dev": true,
+      "license": "MIT",
       "bin": {
-        "prettier": "bin-prettier.js"
+        "prettier": "bin/prettier.cjs"
       },
       "engines": {
-        "node": ">=10.13.0"
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
     "node_modules/resolve": {
@@ -777,9 +781,9 @@
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
     },
     "prettier": {
-      "version": "2.2.1",
+      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
-      "integrity": "sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==",
+      "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
       "dev": true
     },
     "resolve": {

package.json

@@ -2,7 +2,7 @@
   "name": "datasette",
   "private": true,
   "devDependencies": {
-    "prettier": "^2.2.1"
+    "prettier": "^3.0.0"
   },
   "scripts": {
     "fix": "npm run prettier -- --write",