chore: migrate to litv3 (#2759)

updated dependencies for lit to v3
added babel-loaders and transforms for mgt-spfx

---------

Co-authored-by: Nickii Miaro <miaronkirote@gmail.com>
Co-authored-by: Musale Martin <martinmusale@microsoft.com>

package.json

@@ -114,7 +114,7 @@
     "gulp-util": "^3.0.8",
     "husky": "^4.3.0",
     "lerna": "^7.1.1",
-    "lit": "^2.7.5",
+    "lit": "^3.0.0",
     "monaco-editor": "^0.30.0",
     "monaco-editor-webpack-plugin": "^6.0.0",
     "node-sass": "npm:sass@^1.44.0",

packages/mgt-components/package.json

@@ -45,6 +45,7 @@
     "@microsoft/microsoft-graph-client": "3.0.2",
     "@microsoft/microsoft-graph-types": "^2.0.0",
     "@microsoft/microsoft-graph-types-beta": "^0.29.0-preview",
+    "lit": "^3.0.0",
     "office-ui-fabric-core": "^11.0.0"
   },
   "publishConfig": {

packages/mgt-element/package.json

@@ -34,7 +34,7 @@
   "dependencies": {
     "@microsoft/microsoft-graph-client": "3.0.2",
     "idb": "6.0.0",
-    "lit": "^2.3.1"
+    "lit": "^3.0.0"
   },
   "publishConfig": {
     "directory": "dist"

packages/mgt-spfx/gulpfile.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const build = require('@microsoft/sp-build-web');
+const path = require('path');
 
 build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
 
@@ -12,5 +13,28 @@ build.rig.getTasks = function () {
 
   return result;
 };
+// add babel-loader and some transforms to handle es2021 language features which are unsupported in webpack 4 by default
+build.configureWebpack.mergeConfig({
+  additionalConfiguration: (generatedConfiguration) => {
+    generatedConfiguration.module.rules.push({
+      test: /\.js$/,
+      // only run on lit packages in the root node_module folder
+      include: [
+          path.resolve(__dirname, "../../node_modules/lit"),
+      ],
+      use: {
+        loader: 'babel-loader',
+        options: {
+          plugins: [
+            "@babel/plugin-transform-optional-chaining",
+            "@babel/plugin-transform-nullish-coalescing-operator",
+            "@babel/plugin-transform-logical-assignment-operators"
+          ]
+        }
+      }
+    });
+    return generatedConfiguration;
+  }
+});
 
 build.initialize(require('gulp'));

packages/mgt-spfx/package.json

@@ -37,6 +37,10 @@
   },
   "sideEffects": false,
   "devDependencies": {
+    "@babel/plugin-transform-logical-assignment-operators": "^7.22.11",
+    "@babel/plugin-transform-nullish-coalescing-operator": "^7.22.11",
+    "@babel/plugin-transform-optional-chaining": "^7.23.0",
+    "@babel/preset-env": "^7.22.20",
     "@microsoft/eslint-config-spfx": "1.18.0",
     "@microsoft/eslint-plugin-spfx": "1.18.0",
     "@microsoft/rush-stack-compiler-4.7": "0.1.0",
@@ -45,6 +49,7 @@
     "@rushstack/eslint-config": "2.5.1",
     "@types/webpack-env": "~1.15.2",
     "ajv": "^6.12.5",
+    "babel-loader": "^8.0.0",
     "eslint": "8.7.0",
     "gulp": "4.0.2",
     "typescript": "4.7.4"

packages/mgt-spfx/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json",
   "compilerOptions": {
-    "target": "es5",
+    "target": "ES2019",
     "forceConsistentCasingInFileNames": true,
     "module": "esnext",
     "moduleResolution": "node",