Update dependencies and development environment.

- Switch from Yarn to pnpm. - Update NodeJS version used for builds, Hugo, and Sass binaries. - Update all NPM dependencies. - Adjust for some compatibility issues in new major releases of datatables and a11y-dialog.
18F · Jul 18, 2024 · d975633 · d975633
1 parent 10fef8d
commit d975633
Show file tree

Hide file tree

Showing 16 changed files with 2,778 additions and 2,179 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -37,12 +37,12 @@ jobs:
           TEST_IMAGE_TAG: ${{ steps.image-metadata.outputs.version }}
 
       - name: ESLint
-        run: docker compose run --rm web yarn run lint --max-warnings 0
+        run: docker compose run --rm web pnpm run lint --max-warnings 0
         env:
           TEST_IMAGE_TAG: ${{ steps.image-metadata.outputs.version }}
 
       - name: Prettier Check
-        run: docker compose run --rm web yarn run prettier:check
+        run: docker compose run --rm web pnpm run prettier:check
         env:
           TEST_IMAGE_TAG: ${{ steps.image-metadata.outputs.version }}
 

diff --git a/.prettierignore b/.prettierignore
@@ -2,3 +2,4 @@
 /vendor
 /public
 /resources
+/pnpm-lock.yaml
diff --git a/Dockerfile b/Dockerfile
@@ -1,33 +1,51 @@
-FROM public.ecr.aws/docker/library/node:18-bullseye-slim
+FROM public.ecr.aws/docker/library/node:20-bookworm-slim
 
 ARG TARGETARCH
 
 ENV \
   DOCKER=true \
   NODE_OPTIONS=--use-openssl-ca \
-  NODE_MODULES_DIR=/usr/local/node_modules
+  NODE_MODULES_DIR=/usr/local/node_modules \
+  PNPM_HOME=/usr/local/pnpm
 
 RUN apt-get update && \
   apt-get -y --no-install-recommends install curl ca-certificates && \
   rm -rf /var/lib/apt/lists/* /var/lib/dpkg/*-old /var/cache/* /var/log/*
 
+ARG HUGO_VERSION=0.129.0
 RUN set -x && \
-  curl -fsSL "https://github.com/gohugoio/hugo/releases/download/v0.111.3/hugo_extended_0.111.3_linux-${TARGETARCH}.tar.gz" | tar -xvz -C /usr/local/bin/ --wildcards "hugo"
+  curl -fsSL "https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-${TARGETARCH}.tar.gz" | tar -xvz -C /usr/local/bin/ --wildcards "hugo"
 
+ARG DART_SASS_VERSION=1.77.8
 RUN set -x && \
   arch="$TARGETARCH" && \
   if [ "$TARGETARCH" = "amd64" ]; then \
     arch="x64"; \
   fi && \
-  curl -fsSL "https://github.com/sass/dart-sass-embedded/releases/download/1.62.1/sass_embedded-1.62.1-linux-${arch}.tar.gz" | tar -xvz --strip-components 1 -C /usr/local/bin/ --wildcards "*/dart-sass-embedded" --wildcards "*/src/*"
+  curl -fsSL "https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-${arch}.tar.gz" | tar -xvz --strip-components 1 -C /usr/local/bin/ --wildcards "*/sass" --wildcards "*/src/*"
+
+# Install pnpm
+#
+# Set store-dir for pnpm config due to PNPM_HOME not affecting things with some
+# of our development volume mounts: https://github.com/pnpm/pnpm/issues/7050
+ARG PNPM_VERSION=9.5.0
+RUN set -x && \
+  npm install -g "@pnpm/exe@${PNPM_VERSION}" && \
+  mkdir -p ~/.config/pnpm && \
+  printf "update-notifier=false\nstore-dir=${PNPM_HOME}/store\n" > ~/.config/pnpm/rc
 
 RUN mkdir -p /app
 WORKDIR /app
 
-COPY package.json yarn.lock /app/
-RUN mkdir -p "$NODE_MODULES_DIR" && \
+# Symlink the local node_modules to the system-wide node directory.
+#
+# Note, we create a `.pnpm` directory inside, since it seems to sidestep this issue of
+# install failing if node_modules is a symlink:
+# https://github.com/pnpm/pnpm/issues/7690
+COPY package.json pnpm-lock.yaml /app/
+RUN mkdir -p "${NODE_MODULES_DIR}/.pnpm" && \
   ln -s "$NODE_MODULES_DIR" /app/node_modules && \
-  yarn
+  pnpm install
 
 COPY .eslintrc.js .prettierignore .prettierrc.yml config.yaml postcss.config.js /app/
 COPY assets /app/assets

diff --git a/assets/javascripts/metrics/components/OrganizationsTable.js b/assets/javascripts/metrics/components/OrganizationsTable.js
@@ -1,4 +1,4 @@
-import datatables from "datatables.net-dt";
+import DataTable from "datatables.net-dt";
 import jQuery from "jquery";
 import {
   computed,
@@ -11,7 +11,7 @@ import {
 
 import useMetricsStore from "../stores/metrics";
 
-const DataTable = datatables(window, jQuery);
+DataTable.defaults.column.orderSequence = ['asc', 'desc'];
 
 export default defineComponent({
   template: `

diff --git a/assets/javascripts/signup_embed.js b/assets/javascripts/signup_embed.js
@@ -283,6 +283,12 @@ const modalEl = bodyContainerShadowRootEl.getElementById("alert_modal");
 const modalMessageEl = modalEl.querySelector("#alert_modal_message");
 const modal = new A11yDialog(modalEl);
 
+// Setup close handlers for a11y-dialog when inside the shadow DOM (since their
+// default document listeners won't work).
+modalEl.querySelectorAll('[data-a11y-dialog-hide]').forEach((closer) => {
+  closer.addEventListener('click', modal.hide);
+});
+
 const formEl = containerShadowRootEl.querySelector("form");
 const submitButtonEl = formEl.querySelector("button[type=submit]");
 

diff --git a/assets/stylesheets/_metrics.scss b/assets/stylesheets/_metrics.scss
@@ -26,40 +26,53 @@ body.api-metrics {
     @extend .text-right;
   }
 
-  table.dataTable thead > tr > th.sorting,
-  table.dataTable thead > tr > th.sorting_asc,
-  table.dataTable thead > tr > th.sorting_desc,
-  table.dataTable thead > tr > th.sorting_asc_disabled,
-  table.dataTable thead > tr > th.sorting_desc_disabled,
-  table.dataTable thead > tr > td.sorting,
-  table.dataTable thead > tr > td.sorting_asc,
-  table.dataTable thead > tr > td.sorting_desc,
-  table.dataTable thead > tr > td.sorting_asc_disabled,
-  table.dataTable thead > tr > td.sorting_desc_disabled {
-    cursor: pointer;
-    position: relative;
-    padding-right: 2rem;
-  }
-
-  table.dataTable thead > tr > th.sorting:after,
-  table.dataTable thead > tr > td.sorting:after {
-    content: url('data:image/svg+xml; utf8, <svg class="usa-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g class="unsorted"><polygon points="15.17 15 13 17.17 13 6.83 15.17 9 16.58 7.59 12 3 7.41 7.59 8.83 9 11 6.83 11 17.17 8.83 15 7.42 16.41 12 21 16.59 16.41 15.17 15"></polygon></g></svg>');
-    display: block;
-    width: 1.5rem;
-    height: 1.5rem;
-    position: absolute;
-    right: 0.25rem;
-    top: 50%;
-  }
-
-  table.dataTable thead > tr > th.sorting_desc:after,
-  table.dataTable thead > tr > td.sorting_desc:after {
-    content: url('data:image/svg+xml; utf8, <svg class="usa-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g class="descending"><path d="M17 17L15.59 15.59L12.9999 18.17V2H10.9999V18.17L8.41 15.58L7 17L11.9999 22L17 17Z"></path></g></svg>');
-  }
-
-  table.dataTable thead > tr > th.sorting_asc:after,
-  table.dataTable thead > tr > td.sorting_asc:after {
-    content: url('data:image/svg+xml; utf8, <svg class="usa-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g class="ascending"><path transform="rotate(180, 12, 12)" d="M17 17L15.59 15.59L12.9999 18.17V2H10.9999V18.17L8.41 15.58L7 17L11.9999 22L17 17Z"></path></g></svg>');
+  table.dataTable {
+    > thead > tr {
+      > th.dt-orderable-asc,
+      > th.dt-orderable-desc,
+      > td.dt-orderable-asc,
+      > td.dt-orderable-desc {
+        cursor: pointer;
+        position: relative;
+        padding-right: 2rem;
+      }
+
+      > th.dt-orderable-asc span.dt-column-order,
+      > th.dt-orderable-desc span.dt-column-order,
+      > th.dt-ordering-asc span.dt-column-order,
+      > th.dt-ordering-desc span.dt-column-order,
+      > td.dt-orderable-asc span.dt-column-order,
+      > td.dt-orderable-desc span.dt-column-order,
+      > td.dt-ordering-asc span.dt-column-order,
+      > td.dt-ordering-desc span.dt-column-order {
+        display: block;
+        width: 1.5rem;
+        height: 1.5rem;
+        position: absolute;
+        right: 0.25rem;
+        top: 50%;
+
+        &:after {
+          content: url('data:image/svg+xml; utf8, <svg class="usa-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g class="unsorted"><polygon points="15.17 15 13 17.17 13 6.83 15.17 9 16.58 7.59 12 3 7.41 7.59 8.83 9 11 6.83 11 17.17 8.83 15 7.42 16.41 12 21 16.59 16.41 15.17 15"></polygon></g></svg>');
+        }
+      }
+
+      > th.dt-ordering-desc span.dt-column-order:after,
+      > td.dt-ordering-desc span.dt-column-order:after {
+        content: url('data:image/svg+xml; utf8, <svg class="usa-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g class="descending"><path d="M17 17L15.59 15.59L12.9999 18.17V2H10.9999V18.17L8.41 15.58L7 17L11.9999 22L17 17Z"></path></g></svg>');
+      }
+
+      > th.dt-ordering-asc span.dt-column-order:after,
+      > td.dt-ordering-asc span.dt-column-order:after {
+        content: url('data:image/svg+xml; utf8, <svg class="usa-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g class="ascending"><path transform="rotate(180, 12, 12)" d="M17 17L15.59 15.59L12.9999 18.17V2H10.9999V18.17L8.41 15.58L7 17L11.9999 22L17 17Z"></path></g></svg>');
+      }
+    }
+
+    // Fix bottom border getting clipped by usa-table-container--scrollable
+    // caused by these empty elements datatables adds.
+    colgroup, tfoot {
+      display: none;
+    }
   }
 
   .usa-table td.sorting_1,

diff --git a/bin/docker-compose/docker-app-env b/bin/docker-compose/docker-app-env
@@ -1,2 +1,2 @@
 #!/usr/bin/env bash
-exec docker-compose run --rm web env "$@"
+exec docker compose run --rm web env "$@"
diff --git a/bin/docker-compose/hugo b/bin/docker-compose/hugo
@@ -1,2 +1,2 @@
 #!/usr/bin/env bash
-exec docker-compose run --rm web "$(basename "$0")" "$@"
+exec docker compose run --rm web "$(basename "$0")" "$@"
diff --git a/bin/docker-compose/pnpm b/bin/docker-compose/pnpm
@@ -0,0 +1,2 @@
+#!/usr/bin/env bash
+exec docker compose run --rm web "$(basename "$0")" "$@"
diff --git a/bin/docker-compose/yarn b/bin/docker-compose/yarn
diff --git a/bin/docker-entrypoint b/bin/docker-entrypoint
@@ -7,7 +7,10 @@ app_root_dir="/app"
 # Symlink the node_modules to the expected location for better Docker caching
 # when /app is mounted for development/test purposes.
 if [ ! -L "${app_root_dir}/node_modules" ] || [ "$(readlink "${app_root_dir}/node_modules")" != "$NODE_MODULES_DIR" ]; then
-  mkdir -p "$NODE_MODULES_DIR"
+  # Note, we create a `.pnpm` directory inside, since it seems to sidestep this
+  # issue of install failing if node_modules is a symlink:
+  # https://github.com/pnpm/pnpm/issues/7690
+  mkdir -p "${NODE_MODULES_DIR}/.pnpm"
   set -x
   rm -rf "${app_root_dir}/node_modules"
   ln -s "$NODE_MODULES_DIR" "${app_root_dir}/node_modules"

diff --git a/bin/docker-start b/bin/docker-start
@@ -3,6 +3,6 @@
 set -Eeuxo pipefail
 
 # Install NPM dependencies.
-yarn install
+pnpm install
 
 hugo server --bind "0.0.0.0" --port 4490 --liveReloadPort 4491
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -1,13 +1,14 @@
-version: "3"
 services:
   web:
     build:
       context: .
     volumes:
       - .:/app
-      - yarn_cache:/usr/local/node_modules
+      - pnpm_cache:/usr/local/pnpm
+      - npm_cache:/usr/local/node_modules
     ports:
       - "4490:4490"
       - "4491:4491"
 volumes:
-  yarn_cache:
+  pnpm_cache:
+  npm_cache:
diff --git a/package.json b/package.json
@@ -1,36 +1,36 @@
 {
   "scripts": {
     "lint:js": "eslint --ignore-path .gitignore .",
-    "lint": "yarn lint:js",
+    "lint": "pnpm run lint:js",
     "prettier:check": "prettier --check ."
   },
   "dependencies": {
-    "@uswds/uswds": "^3.4.1",
-    "a11y-dialog": "^7.3.0",
-    "bootstrap": "^5.1.0",
-    "datatables.net-dt": "^1.11.5",
-    "echarts": "^5.3.1",
+    "@uswds/uswds": "^3.8.1",
+    "a11y-dialog": "^8.0.4",
+    "bootstrap": "^5.3.3",
+    "datatables.net-dt": "^2.0.8",
+    "echarts": "^5.5.1",
     "escape-html": "^1.0.3",
     "form-serialize": "^0.7.2",
-    "jquery": "^3.6.0",
-    "ky": "^1.1.3",
+    "jquery": "^3.7.1",
+    "ky": "^1.4.0",
     "lodash-es": "^4.17.21",
-    "pinia": "^2.0.12",
-    "vue": "^3.2.31",
-    "vue-router": "^4.0.14"
+    "pinia": "^2.1.7",
+    "vue": "^3.4.32",
+    "vue-router": "^4.4.0"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.2",
-    "eslint": "^8.12.0",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-simple-import-sort": "^10.0.0",
-    "postcss": "^8.4.31",
-    "postcss-cli": "^10.0.0",
-    "postcss-prefixwrap": "^1.29.0",
-    "postcss-relative-rem": "^0.1.0",
-    "prettier": "^3.0.3",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "postcss": "^8.4.39",
+    "postcss-cli": "^11.0.0",
+    "postcss-prefixwrap": "^1.49.0",
+    "postcss-relative-rem": "^1.0.0",
+    "prettier": "^3.3.3",
     "prettier-plugin-go-template": "^0.0.15"
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,3 +2,4 @@ @@
     /vendor
     /public
     /resources
+    /pnpm-lock.yaml
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		#!/usr/bin/env bash
		exec docker compose run --rm web "$(basename "$0")" "$@"