chore(web-components-v3): migrate to node 18

.codesandbox/ci.json

@@ -2,5 +2,5 @@
   "buildCommand": "build:codesandbox",
   "packages": ["packages/react", "packages/react-components/react-components"],
   "sandboxes": ["x5u3t", "spnyu"],
-  "node": "16"
+  "node": "18"
 }

.devcontainer/Dockerfile

@@ -1,19 +1,6 @@
-# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.222.0/containers/javascript-node/.devcontainer/base.Dockerfile
-
-# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 16, 14, 12, 16-bullseye, 14-bullseye, 12-bullseye, 16-buster, 14-buster, 12-buster
-ARG VARIANT="14-bullseye"
-FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
-
-# [Optional] Uncomment this section to install additional OS packages.
-# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
-#     && apt-get -y install --no-install-recommends <your-package-list-here>
-
-# [Optional] Uncomment if you want to install an additional version of node using nvm
-# ARG EXTRA_NODE_VERSION=10
-# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
-
-# [Optional] Uncomment if you want to install more global node modules
-# RUN su node -c "npm install -g <your-package-list-here>"
+ARG VARIANT=18-bookworm
+# https://github.com/devcontainers/images/tree/main/src/typescript-node
+FROM mcr.microsoft.com/devcontainers/typescript-node:1-${VARIANT}
 
 # Cypress linux pre-requisites https://docs.cypress.io/guides/getting-started/installing-cypress#Linux-Prerequisites
 RUN apt-get update && apt-get -y install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb

.devcontainer/README.md

@@ -4,7 +4,7 @@ This configuration is based on the base Node container provided by VSCode, it sh
 
 > For more information on how to use/create `development containers` follow the [VSCode Documentation](https://code.visualstudio.com/docs/remote/create-dev-container)
 
-> See here for more information on the base container https://github.com/microsoft/vscode-dev-containers/tree/v0.222.0/containers/javascript-node/.devcontainer/base.Dockerfile
+> See here for more information on the base container https://github.com/microsoft/vscode-dev-containers/blob/main/containers/javascript-node/.devcontainer/base.Dockerfile
 
 ## Cypress tests
 

.devcontainer/devcontainer.json

@@ -4,10 +4,9 @@
   "name": "Node.js",
   "build": {
     "dockerfile": "Dockerfile",
-    // Update 'VARIANT' to pick a Node version: 16, 14, 12.
-    // Append -bullseye or -buster to pin to an OS version.
-    // Use -bullseye variants on local arm64/Apple Silicon.
-    "args": { "VARIANT": "14" }
+    "args": {
+      "VARIANT": "18-bookworm"
+    }
   },
   // Set *default* container specific settings.json values on container create.
   "settings": {},

.devops/templates/tools.yml

@@ -1,8 +1,12 @@
 # Install versions of Node and Yarn required by build pipelines.
 steps:
-  - task: NodeTool@0
+  - task: UseNode@1
     inputs:
-      versionSpec: '16.18.1'
+      # 👉 NOTE:
+      # - we can use only versions that ship with container, otherwise we will run into nodejs installation issues.
+      # - as 1es bumps those versions within container automatically we need to use `<major>.x` to not run into issues once they bump the versions.
+      # https://github.com/actions/runner-images/blob/ubuntu20/20230924.1/images/linux/Ubuntu2004-Readme.md#nodejs
+      version: '18.x'
       checkLatest: false
     displayName: 'Install Node.js'
 

.github/workflows/check-packages.yml

@@ -12,7 +12,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.18.1
+          node-version: 18.x
           cache: 'yarn'
 
       - uses: tj-actions/changed-files@v34
@@ -44,7 +44,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.18.1
+          node-version: 18.x
 
       - uses: actions/github-script@v6
         with:
@@ -70,7 +70,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.18.1
+          node-version: 18.x
 
       - uses: actions/github-script@v6
         with:

.github/workflows/docsite-publish-chromatic.yml

@@ -37,7 +37,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.18.1
+          node-version: 18.x
           cache: 'yarn'
 
       - name: Install packages

.github/workflows/docsite-publish-ghpages.yml

@@ -37,7 +37,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.18.1
+          node-version: 18.x
           cache: 'yarn'
 
       - name: Install packages

change/@fluentui-eslint-plugin-222b39b1-1e9b-458f-8ddf-0dfef3a6717e.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: bump eslint-plugin-jsdoc to version which support node 18",
+  "packageName": "@fluentui/eslint-plugin",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-utilities-9901c7ce-5a05-4473-ab4f-ff74df9878eb.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: use Timers types based on environment to avoid TS failures introduced with node 18 types",
+  "packageName": "@fluentui/utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

lage.config.js

@@ -22,13 +22,16 @@ module.exports = {
     'change/**',
     'rfcs/**',
     'README.md',
+    '*.md',
     '.vscode/**',
     '.github/*.yml',
     '.github/*.json',
     '.github/*.md',
     '.github/CODEOWNERS',
     '.github/MAINTAINERS',
     '.github/ISSUE_TEMPLATE/**',
+    '.github/policies/**',
+    '.devcontainer/**',
   ],
 
   // All of these options are sent to `backfill`: https://github.com/microsoft/backfill/blob/master/README.md

package.json

@@ -8,7 +8,7 @@
     "url": "https://github.com/microsoft/fluentui"
   },
   "engines": {
-    "node": "^16.18.1"
+    "node": "^18.0.0 || ^20.0.0"
   },
   "scripts": {
     "build": "lage build --verbose",
@@ -166,9 +166,8 @@
     "@types/lodash": "4.14.182",
     "@types/markdown-table": "2.0.0",
     "@types/micromatch": "4.0.2",
-    "@types/node": "16.18.1",
-    "@types/node-fetch": "2.5.7",
-    "@types/prettier": "2.2.3",
+    "@types/node": "18.18.6",
+    "@types/prettier": "2.7.2",
     "@types/progress": "2.0.5",
     "@types/prompts": "2.4.1",
     "@types/react": "17.0.44",
@@ -193,7 +192,7 @@
     "ajv": "8.4.0",
     "autoprefixer": "10.2.1",
     "babel-jest": "26.6.3",
-    "babel-loader": "8.2.2",
+    "babel-loader": "8.3.0",
     "babel-plugin-annotate-pure-calls": "0.4.0",
     "babel-plugin-annotate-pure-imports": "1.0.0-1",
     "babel-plugin-iife-wrap-react-components": "1.0.0-5",
@@ -233,7 +232,7 @@
     "eslint-plugin-es": "4.1.0",
     "eslint-plugin-import": "2.25.4",
     "eslint-plugin-jest": "23.20.0",
-    "eslint-plugin-jsdoc": "^36.0.7",
+    "eslint-plugin-jsdoc": "39.9.1",
     "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-playwright": "0.15.3",
     "eslint-plugin-react": "7.26.0",

packages/eslint-plugin/package.json

@@ -23,7 +23,7 @@
     "eslint-plugin-deprecation": "^1.2.1",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jest": "^23.13.2",
-    "eslint-plugin-jsdoc": "^36.0.7",
+    "eslint-plugin-jsdoc": "^39.9.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",

packages/fluentui/local-sandbox/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "license": "MIT",
   "scripts": {
-    "build:withdependencies": "yarn --cwd ../../.. build --scope=@fluentui/local-sandbox --include-filtered-dependencies",
+    "build:withdependencies": "yarn lage build --verbose --scope=@fluentui/local-sandbox --include-filtered-dependencies",
     "build": "webpack",
     "build:production": "webpack -p",
     "serve": "node ./server.js"

packages/react-components/theme-designer/package.json

@@ -37,7 +37,6 @@
     "tslib": "^2.1.0",
     "@fluentui/react-components": "^9.15.0",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluent-blocks/colors": "9.2.0",
     "codesandbox-import-utils": "2.2.3",
     "@types/dedent": "0.7.0",
     "@fluentui/react-alert": "9.0.0-beta.31",

packages/react-components/theme-designer/src/ThemeDesigner.tsx

@@ -31,7 +31,7 @@ export const ThemeDesigner: React.FC<ThemeDesignerProps> = props => {
   useStaticStyles();
 
   const [appState, dispatchAppState] = useThemeDesignerReducer();
-  const [name, setName] = React.useState<string>('myTheme');
+  const [name, setName] = React.useState<string>('Untitled');
 
   const { darkOverrides, isDark, lightOverrides, theme } = appState;
   const overrides = isDark ? darkOverrides : lightOverrides;