feat: update spfx samples for mgt v4 (#14)

* feat: update spfx samples for mgt v4

* update mgt versons to use *

* fixed view and card attributes

* updating webpack modification to use function

* updating gulpfiles for cross os compatibility

samples/app/sp-mgt/config/package-solution.json

@@ -3,7 +3,7 @@
   "solution": {
     "name": "sp-mgt-no-framework-client-side-solution",
     "id": "8606d7ab-8b1e-461f-b611-416054c65000",
-    "version": "1.0.0.3",
+    "version": "1.1.0.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true,
     "isDomainIsolated": false,
@@ -87,4 +87,4 @@
   "paths": {
     "zippedPackage": "solution/sp-mgt-no-framework.sppkg"
   }
-}
+}

samples/app/sp-mgt/gulpfile.js

@@ -1,16 +1,47 @@
-'use strict';
+"use strict";
 
-const build = require('@microsoft/sp-build-web');
+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.`);
+build.addSuppression(
+  `Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`
+);
 
 var getTasks = build.rig.getTasks;
 build.rig.getTasks = function () {
   var result = getTasks.call(build.rig);
 
-  result.set('serve', result.get('serve-deprecated'));
+  result.set("serve", result.get("serve-deprecated"));
 
   return result;
 };
 
-build.initialize(require('gulp'));
+// add babel-loader and some transforms to handle es2021 language features which are unsupported in webpack 4 by default
+const litFolders = [
+  `node_modules${path.sep}lit${path.sep}`,
+  `node_modules${path.sep}@lit${path.sep}`,
+  `node_modules${path.sep}lit-html${path.sep}`
+];
+build.configureWebpack.mergeConfig({
+  additionalConfiguration: generatedConfiguration => {
+    generatedConfiguration.module.rules.push({
+      test: /\.js$/,
+      // only run on lit packages in the root node_module folder
+      include: resourcePath =>
+        litFolders.some(litFolder => resourcePath.includes(litFolder)),
+      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"));