Merge pull request #680 from namecheap/feature/updatenode22

ilc: update to node 22

Author: stas-nc

.github/workflows/ci.yml

@@ -3,7 +3,7 @@ name: CI
 on:
     push:
         branches:
-            - master
+            - '**'
         tags-ignore:
             - '**'
     pull_request:

docs/multi-domains.md

@@ -185,6 +185,6 @@ ILC automatically updates canonical tags during client-side navigation.
 
 ## Additional information
 
--   ILC detects a domain from the [**request.hostname** of Fastify](https://www.fastify.io/docs/latest/Reference/Request/) and checks whether this hostname is listed in the **Router domains**.
+-   ILC detects a domain from the [**request.host** of Fastify](https://www.fastify.io/docs/latest/Reference/Request/) and checks whether this hostname is listed in the **Router domains**.
 -   Each registered domain in the **Router domains** has its own set of routes that do not overlap.
 -   For routes, the domain is optional. If the request goes from the domain that is not listed in the **Router domains**, the routes for the request will stay unassigned.

ilc/.npmrc

@@ -1 +1,2 @@
 registry=https://registry.npmjs.org
+engine-strict=true

ilc/Dockerfile

@@ -1,15 +1,13 @@
-FROM node:20.8.0-alpine
+FROM node:22-alpine
 
 RUN apk update && apk add --no-cache bash git openssh python3 make g++ findutils
 
-# Legacy infrastructure support
-RUN npm install -g stdout-mq@^2.4.0
-
 WORKDIR /codebase
 
 COPY package-lock.json package.json /codebase/
-RUN npm ci --no-package-lock --ignore-scripts
-RUN npm rebuild @newrelic/native-metrics
+RUN npm ci --prefer-offline --no-fund
+# Integrity check. Package @newrelic/native-metrics is an optional dependency and may be not installed on alpine
+RUN npm ls @newrelic/native-metrics
 
 COPY ./ /codebase
 

ilc/babel.config.js

@@ -1,9 +1,26 @@
+/**
+ * NOTE: We override `modules` to "commonjs" for Karma tests only.
+ *
+ * Our production build outputs ES modules (ESM). In ESM, named exports are
+ * live, read-only bindings and the module namespace object is non-writable
+ * and non-configurable by specification.
+ *
+ * Sinon stubs work by redefining properties on imported modules. When code
+ * is compiled as ESM, attempting to stub a named export throws errors like:
+ *
+ *   "Descriptor for property <fn> is non-configurable and non-writable"
+ *
+ * Forcing CommonJS here makes exports mutable again (matching the old
+ * ts-loader behavior) so Sinon can safely stub exported functions in tests.
+ *
+ * This override is intentionally limited to Karma/test builds.
+ * Production bundles remain ESM.
+ */
+const modules = process.env.NODE_ENV === 'test' ? 'commonjs' : 'auto';
+
 module.exports = {
-    presets: ['@babel/preset-env'],
+    presets: [['@babel/preset-env', { modules }], '@babel/preset-typescript'],
     plugins: [
-        '@babel/plugin-syntax-dynamic-import',
-        '@babel/plugin-proposal-class-properties',
-        '@babel/plugin-proposal-private-methods',
         'babel-plugin-transform-async-to-promises',
         [
             '@babel/plugin-transform-for-of',
@@ -26,7 +43,7 @@ module.exports = {
                 [
                     'istanbul',
                     {
-                        exclude: ['**/*.spec.js', 'tests/**'],
+                        exclude: ['**/*.spec.js', '**/*.spec.ts', 'tests/**', 'common/**/test/**'],
                     },
                 ],
             ],

ilc/build/webpack.js

@@ -3,6 +3,8 @@ const fs = require('fs');
 const path = require('path');
 const { DefinePlugin, BannerPlugin, Compilation } = require('webpack');
 const { DuplicateIlcPluginsWebpackPlugin, ResolveIlcDefaultPluginsWebpackPlugin } = require('ilc-plugins-sdk/webpack');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 const { Environment } = require('../common/Environment');
 const ilcPluginsPath = path.resolve(__dirname, '../../node_modules/');
@@ -23,12 +25,11 @@ module.exports = {
         rules: [
             {
                 test: /\.(js|ts)$/,
-                use: {
-                    loader: 'ts-loader',
-                    options: {
-                        configFile: 'tsconfig.client.json',
+                use: [
+                    {
+                        loader: 'babel-loader',
                     },
-                },
+                ],
                 exclude: /node_modules/,
             },
             { parser: { System: false } },
@@ -58,6 +59,15 @@ module.exports = {
         new DefinePlugin({
             LEGACY_PLUGINS_DISCOVERY_ENABLED: JSON.stringify(environment.isLegacyPluginsDiscoveryEnabled()),
         }),
+        new ForkTsCheckerWebpackPlugin({
+            typescript: {
+                configFile: 'tsconfig.client.json',
+            },
+        }),
+        new BundleAnalyzerPlugin({
+            analyzerMode: 'static',
+            openAnalyzer: false,
+        }),
     ],
     devtool: 'source-map',
     externals: [],

ilc/build/webpack.test.js

@@ -22,17 +22,6 @@ const config = {
     },
 };
 
-config.module.rules.push({
-    test: /\.(js|ts)$/,
-    /**
-     * Control coveraage files
-     */
-    exclude: /(node_modules|\.spec\.(js|ts)$|tests\/)/,
-    loader: '@jsdevtools/coverage-istanbul-loader',
-    enforce: 'post',
-    options: { esModules: true },
-});
-
 config.resolve.alias['nock'] = false;
 config.resolve.alias['timers'] = false;
 

ilc/client/AsyncBootUp.js

@@ -10,6 +10,7 @@ export default class AsyncBootUp {
     #appsWaitingForSlot = {};
     #readySlots = [];
     #pageLoadingIsDone = false;
+    #routingEventHandler;
 
     constructor(logger = window.console, performance = window.performance) {
         this.#logger = logger;
@@ -21,7 +22,8 @@ export default class AsyncBootUp {
         }
 
         window.ilcApps = { push: (id) => this.#markSlotAsReady(id) };
-        window.addEventListener(singleSpaEvents.ROUTING_EVENT, () => (this.#afterRoutingEvent = true));
+        this.#routingEventHandler = () => (this.#afterRoutingEvent = true);
+        window.addEventListener(singleSpaEvents.ROUTING_EVENT, this.#routingEventHandler);
     }
 
     async waitForSlot(slotName) {
@@ -87,6 +89,12 @@ export default class AsyncBootUp {
         return res;
     }
 
+    destroy() {
+        if (this.#routingEventHandler) {
+            window.removeEventListener(singleSpaEvents.ROUTING_EVENT, this.#routingEventHandler);
+        }
+    }
+
     #markSlotAsReady = (id) => {
         setTimeout(() => {
             // All slots has been loaded

ilc/client/AsyncBootUp.spec.js

@@ -1,4 +1,4 @@
-import chai from 'chai';
+import * as chai from 'chai';
 import sinon from 'sinon';
 import html from 'nanohtml';
 

ilc/client/BundleLoader.spec.ts

@@ -27,6 +27,10 @@ interface MockRegistry {
             props?: Record<string, any>;
             wrappedWith?: string;
             kind?: string;
+            ssr?: {
+                src: string;
+            };
+            l10nManifest?: string;
         };
     };
 }