Workbench-customizer update to SPFx 1.18.2 and fix JS warnings causing the browser to crash

samples/js-workbench-customizer/.devcontainer/devcontainer.json

@@ -1,7 +1,7 @@
 // For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer
 {
-	"name": "SPFx 1.10.0",
-	"image": "docker.io/m365pnp/spfx:1.10.0",
+	"name": "SPFx 1.18.2",
+	"image": "docker.io/m365pnp/spfx:1.18.2",
 	// Set *default* container specific settings.json values on container create.
 	"settings": {},
 	// Add the IDs of extensions you want installed when the container is created.
@@ -36,4 +36,4 @@
 	},
 	"postCreateCommand": "bash .devcontainer/spfx-startup.sh",
 	"remoteUser": "node"
-}
+}

samples/js-workbench-customizer/.gitignore

@@ -9,9 +9,11 @@ node_modules
 # Build generated files
 dist
 lib
+release
 solution
 temp
 *.sppkg
+.heft
 
 # Coverage directory used by tools like istanbul
 coverage

samples/js-workbench-customizer/.npmignore

@@ -0,0 +1,16 @@
+!dist
+config
+
+gulpfile.js
+
+release
+src
+temp
+
+tsconfig.json
+tslint.json
+
+*.log
+
+.yo-rc.json
+.vscode

samples/js-workbench-customizer/.yo-rc.json

@@ -1,11 +1,21 @@
 {
   "@microsoft/generator-sharepoint": {
-    "packageManager": "pnpm",
+    "plusBeta": false,
     "isCreatingSolution": true,
-    "environment": "spo",
-    "version": "1.10.0",
+    "nodeVersion": "18.18.2",
+    "sdksVersions": {
+      "@microsoft/microsoft-graph-client": "3.0.2",
+      "@microsoft/teams-js": "2.12.0"
+    },
+    "version": "1.18.2",
     "libraryName": "workbench-customizer",
     "libraryId": "5d6f4a5a-9d2b-4a93-a283-16b8f5ea75d6",
+    "environment": "spo",
+    "packageManager": "npm",
+    "solutionName": "workbench-customizer",
+    "solutionShortDescription": "workbench-customizer description",
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
     "componentType": "webpart"
   }
 }

samples/js-workbench-customizer/README.md

@@ -31,8 +31,8 @@ Alternatively, you can add the output files for the web part to a custom SPFx pr
 | Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.|
 |Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility.   |
 
-![SPFx 1.11](https://img.shields.io/badge/SPFx-1.11.0-green.svg) 
-![Node.js v10](https://img.shields.io/badge/Node.js-v10-green.svg) 
+![SPFx 1.18.2](https://img.shields.io/badge/SPFx-1.18.2-green.svg) 
+![Node.js v18](https://img.shields.io/badge/Node.js-v18-green.svg) 
 ![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
 ![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%202019-Not%20compatible-red.svg)
 ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%202016%20(Feature%20Pack%202)-Not%20compatible-red.svg)
@@ -63,6 +63,7 @@ Version|Date|Comments
 1.3|July 07, 2020|Simplified web part
 1.4|July 28, 2020|Update styles to minimise toolbar overlap
 1.5|July 30, 2020|Update styles to improve full-width mode
+1.6|December 21, 2023|Update to SPFx 1.18.2 and fix issue with browser crashing
 
 ## Minimal Path to Awesome
 
@@ -71,7 +72,7 @@ Version|Date|Comments
   * `npm install`
   * `gulp serve`
 
->  This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions.
+> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions.
 
 ## Video
 

samples/js-workbench-customizer/config/deploy-azure-storage.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
-  "workingDir": "./temp/deploy/",
+  "workingDir": "./release/assets/",
   "account": "<!-- STORAGE ACCOUNT NAME -->",
   "container": "workbench-customizer",
   "accessKey": "<!-- ACCESS KEY -->"

samples/js-workbench-customizer/config/package-solution.json

@@ -3,16 +3,39 @@
   "solution": {
     "name": "workbench-customizer-client-side-solution",
     "id": "5d6f4a5a-9d2b-4a93-a283-16b8f5ea75d6",
-    "version": "1.5.0.0",
+    "version": "1.6.0.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
     "developer": {
       "name": "Contoso",
+      "websiteUrl": "https://contoso.com/my-app",
       "privacyUrl": "https://contoso.com/privacy",
       "termsOfUseUrl": "https://contoso.com/terms-of-use",
-      "websiteUrl": "https://contoso.com/my-app",
       "mpnId": "m365pnp"
-    }
+    },
+    "metadata": {
+      "shortDescription": {
+        "default": "workbench-customizer description"
+      },
+      "longDescription": {
+        "default": "workbench-customizer description"
+      },
+      "screenshotPaths": [],
+      "videoUrl": "",
+      "categories": []
+    },
+    "features": [
+      {
+        "title": "workbench-customizer Feature",
+        "description": "The feature that activates elements of the workbench-customizer solution.",
+        "id": "19882113-30db-44bd-8ed7-15c951fc2323",
+        "version": "1.0.0.0",
+        "componentIds": [
+          "19882113-30db-44bd-8ed7-15c951fc2323"
+        ]
+      }
+    ]
   },
   "paths": {
     "zippedPackage": "solution/workbench-customizer.sppkg"

samples/js-workbench-customizer/config/sass.json

@@ -0,0 +1,3 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
+}

samples/js-workbench-customizer/config/serve.json

@@ -1,10 +1,6 @@
 {
-  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-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://{tenantDomain}/_layouts/workbench.aspx"
 }

samples/js-workbench-customizer/gulpfile.js

@@ -1,7 +1,16 @@
 '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.initialize(gulp);
+var getTasks = build.rig.getTasks;
+build.rig.getTasks = function () {
+  var result = getTasks.call(build.rig);
+
+  result.set('serve', result.get('serve-deprecated'));
+
+  return result;
+};
+
+build.initialize(require('gulp'));