chore: update sp-webpart sample to spfx v1.15 (#1776)

* fix: update spfx webpart sample to use v1.15.0

* ensure dev workbench usage works and update docs

Author: gavinbarron

samples/sp-webpart/.eslintrc.js

@@ -0,0 +1,5 @@
+require('@rushstack/eslint-config/patch/modern-module-resolution');
+  module.exports = {
+    extends: ['@microsoft/eslint-config-spfx/lib/profiles/default'],
+    parserOptions: { tsconfigRootDir: __dirname }
+  };

samples/sp-webpart/README.md

@@ -28,13 +28,19 @@ Run the webpart by running:
 
 `gulp serve`
 
+In the output from the `gulp serve` command you will see a query string to load your scripts e.g.:
+```
+[spfx-serve] To load your scripts, use this query string: ?debug=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/manifests.js
+```
+Copy this query string value.
+
 Open the browser to:
 
-`https://<your-tenant>.sharepoint.com/_layouts/15/Workbench.aspx`
+`https://<your-tenant>.sharepoint.com/_layouts/15/Workbench.aspx<copied-query-string>`
 
-The webpart will be available to be added
+After trusting the scripts the webpart will be available to be added
 
-### Approving permissions 
+### Approving permissions
 
 The admin of your tenant will need to approve the graph permissions in the admin portal before you can use any graph APIs. You only need to do these steps once (or if you add additional permissions to `config/package-solution.json`)
 
@@ -50,7 +56,7 @@ The admin of your tenant will need to approve the graph permissions in the admin
 
 2. Upload the package to an app catalog. Navigate to the app catalog url and click on *Distribute apps for SharePoint*. Click on *new* to upload the solution to the app catalog and deploy it.
 
-    > If you do not have an app catalog on your tenant, follow [these steps](https://docs.microsoft.com/en-us/sharepoint/use-app-catalog#step-1-create-the-app-catalog-site-collection) to create one. 
+    > If you do not have an app catalog on your tenant, follow [these steps](https://docs.microsoft.com/en-us/sharepoint/use-app-catalog#step-1-create-the-app-catalog-site-collection) to create one.
 
 3. Approve the permissions. Go to the SharePoint admin center (best reached via https://admin.microsoft.com > click **Show All** > SharePoint) and make sure you are signed in as admin.
 

samples/sp-webpart/config/serve.json

@@ -2,9 +2,5 @@
   "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
   "port": 4321,
   "https": true,
-  "initialPage": "https://localhost:5432/workbench",
-  "api": {
-    "port": 5432,
-    "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
-  }
+  "initialPage": "https://{Your-SharePoint-site}/_layouts/workbench.aspx?debug=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/manifests.js"
 }

samples/sp-webpart/gulpfile.js

@@ -1,33 +1,8 @@
 'use strict';
 
-const gulp = require('gulp');
 const build = require('@microsoft/sp-build-web');
-build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
-
-build.configureWebpack.mergeConfig({
-  additionalConfiguration: generatedConfiguration => {
-    generatedConfiguration.module.rules.push({
-      test: /\.m?js$/,
-      use: {
-        loader: 'babel-loader',
-        options: {
-          presets: [
-            [
-              '@babel/preset-env',
-              {
-                targets: {
-                  ie: '11'
-                }
-              }
-            ]
-          ]
-        }
-      }
-    });
 
-    return generatedConfiguration;
-  }
-});
+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 () {
@@ -38,4 +13,4 @@ build.rig.getTasks = function () {
   return result;
 };
 
-build.initialize(gulp);
+build.initialize(require('gulp'));

samples/sp-webpart/package.json

@@ -11,28 +11,30 @@
   "dependencies": {
     "@microsoft/mgt-react": "*",
     "@microsoft/mgt-spfx": "*",
-    "@microsoft/sp-core-library": "1.13.0",
-    "@microsoft/sp-lodash-subset": "1.13.0",
-    "@microsoft/sp-office-ui-fabric-core": "1.13.0",
-    "@microsoft/sp-property-pane": "1.13.0",
-    "@microsoft/sp-webpart-base": "1.13.0",
-    "office-ui-fabric-react": "7.156.0",
+    "@microsoft/sp-core-library": "1.15.0",
+    "@microsoft/sp-lodash-subset": "1.15.0",
+    "@microsoft/sp-office-ui-fabric-core": "1.15.0",
+    "@microsoft/sp-property-pane": "1.15.0",
+    "@microsoft/sp-webpart-base": "1.15.0",
+    "office-ui-fabric-react": "7.185.7",
     "react": "16.9.0",
     "react-dom": "16.9.0"
   },
   "resolutions": {
     "@types/react": "16.9.36"
   },
   "devDependencies": {
+    "@microsoft/eslint-config-spfx": "1.15.0",
+    "@microsoft/eslint-plugin-spfx": "1.15.0",
+    "@microsoft/rush-stack-compiler-4.5": "0.2.2",
+    "@microsoft/sp-build-web": "1.15.0",
+    "@microsoft/sp-module-interfaces": "1.15.0",
     "@types/react": "16.9.36",
     "@types/react-dom": "16.9.8",
-    "@microsoft/sp-build-web": "1.13.0",
-    "@microsoft/sp-tslint-rules": "1.13.0",
-    "@microsoft/sp-module-interfaces": "1.13.0",
-    "@microsoft/sp-webpart-workbench": "1.12.1",
-    "@microsoft/rush-stack-compiler-3.9": "0.4.47",
-    "gulp": "4.0.2",
+    "@types/webpack-env": "1.13.1",
+    "@rushstack/eslint-config": "2.5.1",
     "ajv": "~5.2.2",
-    "@types/webpack-env": "1.13.1"
+    "eslint-plugin-react-hooks": "4.3.0",
+    "gulp": "4.0.2"
   }
 }

samples/sp-webpart/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../node_modules/@microsoft/rush-stack-compiler-3.9/includes/tsconfig-web.json",
+  "extends": "../../node_modules/@microsoft/rush-stack-compiler-4.5/includes/tsconfig-web.json",
   "compilerOptions": {
     "target": "es5",
     "forceConsistentCasingInFileNames": true,
@@ -14,6 +14,7 @@
     "inlineSources": false,
     "strictNullChecks": false,
     "noUnusedLocals": false,
+    "rootDir": "src",
     "typeRoots": ["./node_modules/@types", "./node_modules/@microsoft"],
     "types": ["webpack-env"],
     "lib": ["es5", "dom", "es2015.collection", "es2015.promise"]