Dev/oppdateringer 12/23

.github/workflows/deploy.yml

@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - main
-      - dev/*
+      - dev/**
 
 jobs:
   build-cdn-docker:
@@ -22,7 +22,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: '18.18.2'
+          node-version: '20.10.0'
           cache: 'npm'
 
       - name: 'Install dependencies'

.nvmrc

@@ -1 +1 @@
-v18.18.2
+v20.10.0

Dockerfile

@@ -1,14 +1,15 @@
 # gjør det mulig å bytte base-image slik at vi får bygd både innenfor og utenfor NAV
 # ARG BASE_IMAGE_PREFIX=""
 # FROM ${BASE_IMAGE_PREFIX}node as node-builder
-FROM node:18 as node-builder
+FROM node:20 as node-builder
 
 ADD / /source
 ENV CI=true
 WORKDIR /source
 
 # npm run build har blitt kjørt på github før docker build
 RUN cp -r /source/dist /build
+RUN cp /source/dist/.vite/* /build
 
 RUN npm ci
 

package.json

@@ -10,8 +10,8 @@
         "build:cdn": "vite build --mode cdn",
         "lint": "eslint --ext=jsx,js,ts,tsx ./src",
         "lint:fix": "eslint --ext=jsx,js,ts,tsx ./src --fix",
-        "test": "npm run lint && cross-env NODE_OPTIONS=--no-experimental-fetch vitest dev",
-        "test-ci": "npm run lint && cross-env NODE_OPTIONS=--no-experimental-fetch CI=true vitest run",
+        "test": "npm run lint && vitest dev",
+        "test-ci": "npm run lint && cross-env CI=true vitest run",
         "test:coverage": "vitest run --coverage",
         "deploy": "npm run build && gh-pages -d build",
         "prettier": "prettier --write 'src/**/*.ts' 'src/**/*.tsx' 'src/**/*.css'",
@@ -21,15 +21,15 @@
     "dependencies": {
         "@alheimsins/uker-fra-dato": "1.0.4",
         "@alheimsins/virkedager": "2.2.0",
-        "@grafana/faro-web-sdk": "1.2.1",
-        "@grafana/faro-web-tracing": "1.2.1",
-        "@navikt/aksel-icons": "5.7.3",
-        "@navikt/ds-react": "5.7.3",
+        "@grafana/faro-web-sdk": "1.3.5",
+        "@grafana/faro-web-tracing": "1.3.5",
+        "@navikt/aksel-icons": "5.12.2",
+        "@navikt/ds-react": "5.12.2",
         "amplitude-js": "8.21.9",
-        "classnames": "2.3.2",
-        "core-js": "3.33.0",
+        "classnames": "2.5.1",
+        "core-js": "3.35.0",
         "intersection-observer": "0.12.2",
-        "nanoid": "5.0.2",
+        "nanoid": "5.0.4",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-in-viewport": "1.0.0-alpha.30",
@@ -38,33 +38,33 @@
     "devDependencies": {
         "@rollup/plugin-terser": "0.4.4",
         "@testing-library/dom": "9.3.3",
-        "@testing-library/jest-dom": "6.1.4",
-        "@testing-library/react": "14.0.0",
-        "@testing-library/user-event": "14.5.1",
-        "@types/amplitude-js": "8.16.4",
-        "@types/merge-deep": "3.0.1",
-        "@types/react": "18.2.28",
-        "@types/react-dom": "18.2.13",
-        "@vitejs/plugin-react": "4.1.0",
+        "@testing-library/jest-dom": "6.1.6",
+        "@testing-library/react": "14.1.2",
+        "@testing-library/user-event": "14.5.2",
+        "@types/amplitude-js": "8.16.5",
+        "@types/merge-deep": "3.0.3",
+        "@types/react": "18.2.46",
+        "@types/react-dom": "18.2.18",
+        "@vitejs/plugin-react": "4.2.1",
         "c8": "8.0.1",
         "cross-env": "7.0.3",
-        "eslint": "8.51.0",
+        "eslint": "8.56.0",
         "eslint-config-react-app": "7.0.1",
         "husky": "8.0.3",
-        "jsdom": "22.1.0",
-        "lint-staged": "15.0.1",
+        "jsdom": "23.0.1",
+        "lint-staged": "15.2.0",
         "merge-deep": "3.0.3",
-        "msw": "1.3.2",
-        "prettier": "3.0.3",
+        "msw": "2.0.11",
+        "prettier": "3.1.1",
         "rollup-plugin-import-map": "3.0.0",
         "typescript": "5.2.2",
-        "vite": "4.5.1",
-        "vite-plugin-css-injected-by-js": "3.3.0",
+        "vite": "5.0.10",
+        "vite-plugin-css-injected-by-js": "3.3.1",
         "vite-plugin-environment": "1.1.3",
-        "vite-plugin-html": "3.2.0",
-        "vite-plugin-svgr": "3.2.0",
-        "vitest": "0.34.6",
-        "whatwg-fetch": "3.6.19"
+        "vite-plugin-html": "3.2.1",
+        "vite-plugin-svgr": "4.2.0",
+        "vitest": "1.1.1",
+        "whatwg-fetch": "3.6.20"
     },
     "browserslist": [
         ">0.2%",
@@ -85,6 +85,6 @@
         "workerDirectory": "public"
     },
     "engines": {
-        "node": ">=18.18.2"
+        "node": ">=20.10.0"
     }
 }

public/mockServiceWorker.js

@@ -2,13 +2,14 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (1.3.2).
+ * Mock Service Worker (2.0.11).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.
  */
 
-const INTEGRITY_CHECKSUM = '3d6b9f06410d179a7f7404d4bf4c3c70';
+const INTEGRITY_CHECKSUM = 'c5f7f8e188b673ea4e677df7ea3c5a39';
+const IS_MOCKED_RESPONSE = Symbol('isMockedResponse');
 const activeClientIds = new Set();
 
 self.addEventListener('install', function () {
@@ -86,12 +87,6 @@ self.addEventListener('message', async function (event) {
 
 self.addEventListener('fetch', function (event) {
     const { request } = event;
-    const accept = request.headers.get('accept') || '';
-
-    // Bypass server-sent events.
-    if (accept.includes('text/event-stream')) {
-        return;
-    }
 
     // Bypass navigation requests.
     if (request.mode === 'navigate') {
@@ -112,29 +107,8 @@ self.addEventListener('fetch', function (event) {
     }
 
     // Generate unique request ID.
-    const requestId = Math.random().toString(16).slice(2);
-
-    event.respondWith(
-        handleRequest(event, requestId).catch((error) => {
-            if (error.name === 'NetworkError') {
-                console.warn(
-                    '[MSW] Successfully emulated a network error for the "%s %s" request.',
-                    request.method,
-                    request.url,
-                );
-                return;
-            }
-
-            // At this point, any exception indicates an issue with the original request/response.
-            console.error(
-                `\
-[MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`,
-                request.method,
-                request.url,
-                `${error.name}: ${error.message}`,
-            );
-        }),
-    );
+    const requestId = crypto.randomUUID();
+    event.respondWith(handleRequest(event, requestId));
 });
 
 async function handleRequest(event, requestId) {
@@ -146,20 +120,24 @@ async function handleRequest(event, requestId) {
     // this message will pend indefinitely.
     if (client && activeClientIds.has(client.id)) {
         (async function () {
-            const clonedResponse = response.clone();
-            sendToClient(client, {
-                type: 'RESPONSE',
-                payload: {
-                    requestId,
-                    type: clonedResponse.type,
-                    ok: clonedResponse.ok,
-                    status: clonedResponse.status,
-                    statusText: clonedResponse.statusText,
-                    body: clonedResponse.body === null ? null : await clonedResponse.text(),
-                    headers: Object.fromEntries(clonedResponse.headers.entries()),
-                    redirected: clonedResponse.redirected,
+            const responseClone = response.clone();
+
+            sendToClient(
+                client,
+                {
+                    type: 'RESPONSE',
+                    payload: {
+                        requestId,
+                        isMockedResponse: IS_MOCKED_RESPONSE in response,
+                        type: responseClone.type,
+                        status: responseClone.status,
+                        statusText: responseClone.statusText,
+                        body: responseClone.body,
+                        headers: Object.fromEntries(responseClone.headers.entries()),
+                    },
                 },
-            });
+                [responseClone.body],
+            );
         })();
     }
 
@@ -195,20 +173,20 @@ async function resolveMainClient(event) {
 
 async function getResponse(event, client, requestId) {
     const { request } = event;
-    const clonedRequest = request.clone();
+
+    // Clone the request because it might've been already used
+    // (i.e. its body has been read and sent to the client).
+    const requestClone = request.clone();
 
     function passthrough() {
-        // Clone the request because it might've been already used
-        // (i.e. its body has been read and sent to the client).
-        const headers = Object.fromEntries(clonedRequest.headers.entries());
+        const headers = Object.fromEntries(requestClone.headers.entries());
 
-        // Remove MSW-specific request headers so the bypassed requests
-        // comply with the server's CORS preflight check.
-        // Operate with the headers as an object because request "Headers"
-        // are immutable.
-        delete headers['x-msw-bypass'];
+        // Remove internal MSW request header so the passthrough request
+        // complies with any potential CORS preflight checks on the server.
+        // Some servers forbid unknown request headers.
+        delete headers['x-msw-intention'];
 
-        return fetch(clonedRequest, { headers });
+        return fetch(requestClone, { headers });
     }
 
     // Bypass mocking when the client is not active.
@@ -226,31 +204,36 @@ async function getResponse(event, client, requestId) {
 
     // Bypass requests with the explicit bypass header.
     // Such requests can be issued by "ctx.fetch()".
-    if (request.headers.get('x-msw-bypass') === 'true') {
+    const mswIntention = request.headers.get('x-msw-intention');
+    if (['bypass', 'passthrough'].includes(mswIntention)) {
         return passthrough();
     }
 
     // Notify the client that a request has been intercepted.
-    const clientMessage = await sendToClient(client, {
-        type: 'REQUEST',
-        payload: {
-            id: requestId,
-            url: request.url,
-            method: request.method,
-            headers: Object.fromEntries(request.headers.entries()),
-            cache: request.cache,
-            mode: request.mode,
-            credentials: request.credentials,
-            destination: request.destination,
-            integrity: request.integrity,
-            redirect: request.redirect,
-            referrer: request.referrer,
-            referrerPolicy: request.referrerPolicy,
-            body: await request.text(),
-            bodyUsed: request.bodyUsed,
-            keepalive: request.keepalive,
+    const requestBuffer = await request.arrayBuffer();
+    const clientMessage = await sendToClient(
+        client,
+        {
+            type: 'REQUEST',
+            payload: {
+                id: requestId,
+                url: request.url,
+                mode: request.mode,
+                method: request.method,
+                headers: Object.fromEntries(request.headers.entries()),
+                cache: request.cache,
+                credentials: request.credentials,
+                destination: request.destination,
+                integrity: request.integrity,
+                redirect: request.redirect,
+                referrer: request.referrer,
+                referrerPolicy: request.referrerPolicy,
+                body: requestBuffer,
+                keepalive: request.keepalive,
+            },
         },
-    });
+        [requestBuffer],
+    );
 
     switch (clientMessage.type) {
         case 'MOCK_RESPONSE': {
@@ -260,21 +243,12 @@ async function getResponse(event, client, requestId) {
         case 'MOCK_NOT_FOUND': {
             return passthrough();
         }
-
-        case 'NETWORK_ERROR': {
-            const { name, message } = clientMessage.data;
-            const networkError = new Error(message);
-            networkError.name = name;
-
-            // Rejecting a "respondWith" promise emulates a network error.
-            throw networkError;
-        }
     }
 
     return passthrough();
 }
 
-function sendToClient(client, message) {
+function sendToClient(client, message, transferrables = []) {
     return new Promise((resolve, reject) => {
         const channel = new MessageChannel();
 
@@ -286,17 +260,25 @@ function sendToClient(client, message) {
             resolve(event.data);
         };
 
-        client.postMessage(message, [channel.port2]);
+        client.postMessage(message, [channel.port2].concat(transferrables.filter(Boolean)));
     });
 }
 
-function sleep(timeMs) {
-    return new Promise((resolve) => {
-        setTimeout(resolve, timeMs);
+async function respondWithMock(response) {
+    // Setting response status code to 0 is a no-op.
+    // However, when responding with a "Response.error()", the produced Response
+    // instance will have status code set to 0. Since it's not possible to create
+    // a Response instance with status code 0, handle that use-case separately.
+    if (response.status === 0) {
+        return Response.error();
+    }
+
+    const mockedResponse = new Response(response.body, response);
+
+    Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
+        value: true,
+        enumerable: true,
     });
-}
 
-async function respondWithMock(response) {
-    await sleep(response.delay);
-    return new Response(response.body, response);
+    return mockedResponse;
 }