Upgraded to SPFx 1.13.1

samples/react-versiondisplay/.devcontainer/devcontainer.json

@@ -0,0 +1,39 @@
+// 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.13.1",
+	"image": "docker.io/m365pnp/spfx:1.13.1",
+	// Set *default* container specific settings.json values on container create.
+	"settings": {},
+	// Add the IDs of extensions you want installed when the container is created.
+	"extensions": [
+		"editorconfig.editorconfig",
+		"dbaeumer.vscode-eslint"
+	],
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	"forwardPorts": [
+		4321,
+		35729
+	],
+	"portsAttributes": {
+		"4321": {
+			"protocol": "https",
+			"label": "Manifest",
+			"onAutoForward": "silent",
+			"requireLocalPort": true
+		},
+		// Not needed for SPFx>= 1.12.1 
+		// "5432": {
+		// 	"protocol": "https",
+		// 	"label": "Workbench",
+		// 	"onAutoForward": "silent"
+		// },
+		"35729": {
+			"protocol": "https",
+			"label": "LiveReload",
+			"onAutoForward": "silent",
+			"requireLocalPort": true
+		}
+	},
+	"postCreateCommand": "bash .devcontainer/spfx-startup.sh",
+	"remoteUser": "node"
+}

samples/react-versiondisplay/.devcontainer/spfx-startup.sh

@@ -0,0 +1,33 @@
+echo
+echo -e "\e[1;94mInstalling Node dependencies\e[0m"
+npm install
+
+## commands to create dev certificate and copy it to the root folder of the project
+echo
+echo -e "\e[1;94mGenerating dev certificate\e[0m"
+gulp trust-dev-cert
+
+# Convert the generated PEM certificate to a  CER certificate
+openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer
+
+# Copy the PEM ecrtificate for non-Windows hosts
+cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem
+
+## add *.cer to .gitignore to prevent certificates from being saved in repo
+if ! grep -Fxq '*.cer' ./.gitignore
+  then
+    echo "# .CER Certificates" >> .gitignore
+    echo "*.cer" >> .gitignore
+fi
+
+## add *.pem to .gitignore to prevent certificates from being saved in repo
+if ! grep -Fxq '*.pem' ./.gitignore
+  then
+    echo "# .PEM Certificates" >> .gitignore
+    echo "*.pem" >> .gitignore
+fi
+
+echo
+echo -e "\e[1;92mReady!\e[0m"
+
+echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********"

samples/react-versiondisplay/.editorconfig

@@ -1,25 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# we recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[{package,bower}.json]
-indent_style = space
-indent_size = 2

samples/react-versiondisplay/.gitignore

@@ -9,6 +9,7 @@ node_modules
 # Build generated files
 dist
 lib
+release
 solution
 temp
 *.sppkg

samples/react-versiondisplay/.npmignore

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

samples/react-versiondisplay/.yo-rc.json

@@ -1,10 +1,11 @@
 {
   "@microsoft/generator-sharepoint": {
+    "plusBeta": false,
     "isCreatingSolution": true,
     "environment": "spo",
-    "version": "1.10.0",
+    "version": "1.13.1",
     "libraryName": "react-versiondisplay",
-    "libraryId": "826341a0-9c23-4f9f-9ed0-bc44ab43e2f6",
+    "libraryId": "f5045258-1b8e-4fb4-9609-f55c842deb6f",
     "packageManager": "npm",
     "isDomainIsolated": false,
     "componentType": "webpart"

samples/react-versiondisplay/README.md

@@ -25,13 +25,14 @@ Display your SharePoint solution version within your web parts.
 
 ## Compatibility
 
-![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) 
+![SPFx 1.13.1](https://img.shields.io/badge/SPFx-1.13.1-green.svg)
-![Node.js LTS 10 | LTS 8](https://img.shields.io/badge/Node.js-LTS%2010%20%7C%20LTS%208-green.svg) 
+![Node.js v14 | v12](https://img.shields.io/badge/Node.js-v14%20%7C%20v12-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%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
 ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
-![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg)
+![Local Workbench Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above")
 ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
+![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg)
 
 ## Applies to
 
@@ -53,7 +54,7 @@ react-versiondisplay | [Hugo Bernier](https://github.com/hugoabernier) ([Tahoe N
 Version|Date|Comments
 -------|----|--------
 1.0|March 31, 2020|Initial release
-
+2.0|February 7, 2022|Upgraded to SPFx 1.13.1
 
 ## Minimal Path to Awesome
 
@@ -63,6 +64,8 @@ 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 more information.
+
 ## Features
 
 The sample uses a custom `gulp` task to synchronize the `version` node from the NodeJS `package.json` to the SharePoint solution's `package-solution.json`.

samples/react-versiondisplay/assets/sample.json

@@ -1,51 +0,0 @@
-[
-  {
-    "name": "pnp-sp-dev-spfx-web-parts-react-versiondisplay",
-    "source": "pnp",
-    "title": "Displaying the version number in a web part",
-    "shortDescription": "This very simple sample demonstrates three different approaches to display the version number of your SharePoint solution in your web part.",
-    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-versiondisplay",
-    "longDescription": [
-      "This very simple sample demonstrates three different approaches to display the version number of your SharePoint solution in your web part."
-    ],
-    "creationDateTime": "2020-04-10",
-    "updateDateTime": "2020-04-10",
-    "products": [
-      "SharePoint"
-    ],
-    "metadata": [
-      {
-        "key": "CLIENT-SIDE-DEV",
-        "value": "React"
-      },
-      {
-        "key": "SPFX-VERSION",
-        "value": "1.10.0"
-      }
-    ],
-    "thumbnails": [
-      {
-        "type": "image",
-        "order": 100,
-        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-versiondisplay/assets/VersionDisplay.gif",
-        "alt": "Displaying the version number in a web part"
-      }
-    ],
-    "authors": [
-      {
-        "gitHubAccount": "hugoabernier",
-        "company": "Tahoe Ninjas",
-        "pictureUrl": "https://github.com/hugoabernier.png",
-        "name": "Hugo Bernier",
-        "twitter": "bernierh"
-      }
-    ],
-    "references": [
-      {
-        "name": "Build your first SharePoint client-side web part",
-        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
-      }
-    ]
-  }
-]

samples/react-versiondisplay/config/copy-assets.json

@@ -1,4 +0,0 @@
-{
-  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
-  "deployCdnPath": "temp/deploy"
-}

samples/react-versiondisplay/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": "react-versiondisplay",
   "accessKey": "<!-- ACCESS KEY -->"

samples/react-versiondisplay/config/package-solution.json

@@ -2,10 +2,17 @@
     "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
     "solution": {
         "name": "react-versiondisplay-client-side-solution",
-        "id": "826341a0-9c23-4f9f-9ed0-bc44ab43e2f6",
+        "id": "f5045258-1b8e-4fb4-9609-f55c842deb6f",
-        "version": "1.0.0.0",
+        "version": "2.0.0.0",
         "includeClientSideAssets": true,
-        "isDomainIsolated": false
+        "isDomainIsolated": false,
+        "developer": {
+            "name": "",
+            "websiteUrl": "",
+            "privacyUrl": "",
+            "termsOfUseUrl": "",
+            "mpnId": "Undefined-1.13.1"
+        }
     },
     "paths": {
         "zippedPackage": "solution/react-versiondisplay.sppkg"

samples/react-versiondisplay/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",
+  "initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"
-  "api": {
-    "port": 5432,
-    "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
-  }
 }

samples/react-versiondisplay/gulpfile.js

@@ -4,14 +4,19 @@ 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.`);
 
-// BEGIN: Add custom version sync task
+var getTasks = build.rig.getTasks;
-// This section is inspired by Stefan Bauer's article at https://n8d.at/how-to-version-new-sharepoint-framework-projects/
+build.rig.getTasks = function () {
-// Stefan rocks!
+  var result = getTasks.call(build.rig);
-let syncVersionsSubtask = build.subTask('version-sync', function (gulp, buildOptions, done) {
-  this.log('Synching versions');
 
-  // import gulp utilits to write error messages
+  result.set('serve', result.get('serve-deprecated'));
-  const gutil = require('gulp-util');
+
+  return result;
+};
+
+
+// BEGIN: Add custom version sync task
+let syncVersionsSubtask = build.subTask('version-sync', function (_gulp, _buildOptions, done) {
+  this.log('Synching versions');
 
   // import file system utilities form nodeJS
   const fs = require('fs');
@@ -36,7 +41,7 @@ let syncVersionsSubtask = build.subTask('version-sync', function (gulp, buildOpt
     this.log('New package-solution.json version:\t' + pkgSolution.solution.version);
 
     // write changed package-solution file
-    fs.writeFile('./config/package-solution.json', JSON.stringify(pkgSolution, null, 4));
+    fs.writeFileSync('./config/package-solution.json', JSON.stringify(pkgSolution, null, 4));
   }
   else {
     this.log('package-solution.json version is up-to-date');
@@ -45,9 +50,11 @@ let syncVersionsSubtask = build.subTask('version-sync', function (gulp, buildOpt
   done();
 });
 
-let syncVersionTask = build.task('version-sync', syncVersionsSubtask);
+// Register the task with gulp command line
+let versionSyncTask = build.task('version-sync', syncVersionsSubtask);
 
-build.rig.addPreBuildTask(syncVersionTask);
+// execute before the TypeScript subtask
+build.rig.addPreBuildTask(versionSyncTask);
 // END: Add custom version sync task
 
 build.initialize(require('gulp'));

samples/react-versiondisplay/package.json

@@ -1,43 +1,33 @@
 {
   "name": "react-versiondisplay",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "private": true,
   "main": "lib/index.js",
-  "engines": {
-    "node": ">=0.10.0"
-  },
   "scripts": {
     "build": "gulp bundle",
     "clean": "gulp clean",
     "test": "gulp test"
   },
   "dependencies": {
-    "@microsoft/sp-core-library": "1.10.0",
+    "@microsoft/sp-core-library": "1.13.1",
-    "@microsoft/sp-lodash-subset": "1.10.0",
+    "@microsoft/sp-lodash-subset": "1.13.1",
-    "@microsoft/sp-office-ui-fabric-core": "1.10.0",
+    "@microsoft/sp-office-ui-fabric-core": "1.13.1",
-    "@microsoft/sp-property-pane": "1.10.0",
+    "@microsoft/sp-property-pane": "1.13.1",
-    "@microsoft/sp-webpart-base": "1.10.0",
+    "@microsoft/sp-webpart-base": "1.13.1",
-    "@pnp/spfx-property-controls": "1.17.0",
+    "@pnp/spfx-property-controls": "^3.3.0",
-    "@types/es6-promise": "0.0.33",
+    "office-ui-fabric-react": "7.174.1",
-    "@types/react": "16.8.8",
+    "react": "16.13.1",
-    "@types/react-dom": "16.8.3",
+    "react-dom": "16.13.1"
-    "@types/webpack-env": "1.13.1",
-    "office-ui-fabric-react": "6.189.2",
-    "react": "16.8.5",
-    "react-dom": "16.8.5"
-  },
-  "resolutions": {
-    "@types/react": "16.8.8"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "1.10.0",
+    "@microsoft/rush-stack-compiler-3.9": "0.4.47",
-    "@microsoft/sp-tslint-rules": "1.10.0",
+    "@microsoft/sp-build-web": "1.13.1",
-    "@microsoft/sp-module-interfaces": "1.10.0",
+    "@microsoft/sp-module-interfaces": "1.13.1",
-    "@microsoft/sp-webpart-workbench": "1.10.0",
+    "@microsoft/sp-tslint-rules": "1.13.1",
-    "@microsoft/rush-stack-compiler-3.3": "0.3.5",
+    "@types/react": "16.9.51",
-    "gulp": "~3.9.1",
+    "@types/react-dom": "16.9.8",
-    "@types/chai": "3.4.34",
+    "@types/webpack-env": "1.13.1",
-    "@types/mocha": "2.2.38",
+    "ajv": "~5.2.2",
-    "ajv": "~5.2.2"
+    "gulp": "~4.0.2"
   }
 }

samples/react-versiondisplay/src/typings.d.ts

@@ -1,4 +0,0 @@
-declare module "*.json" {
-  const value: any;
-  export default value;
-}

samples/react-versiondisplay/src/webparts/versionDisplay/VersionDisplayWebPart.manifest.json

@@ -1,17 +1,22 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
-  "id": "1f2cbf1e-b43a-475d-beda-35cdad7ff4f7",
+  "id": "5515ef23-6a72-4099-b9eb-4a92dec25693",
   "alias": "VersionDisplayWebPart",
   "componentType": "WebPart",
 
+  // The "*" signifies that the version should be taken from the package.json
   "version": "*",
   "manifestVersion": 2,
 
+  // If true, the component can only be installed on sites where Custom Script is allowed.
+  // Components that allow authors to embed arbitrary script code should set this to true.
+  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
   "requiresCustomScript": false,
-  "supportedHosts": ["SharePointWebPart"],
+  "supportedHosts": ["SharePointWebPart", "TeamsPersonalApp", "TeamsTab", "SharePointFullPage"],
+  "supportsThemeVariants": true,
 
   "preconfiguredEntries": [{
-    "groupId": "5c03119e-3074-46fd-976b-c60198311f70",
+    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
     "group": { "default": "Other" },
     "title": { "default": "Version Display" },
     "description": { "default": "Demonstrates how to update and display the version number of a web part" },

samples/react-versiondisplay/src/webparts/versionDisplay/VersionDisplayWebPart.ts

@@ -3,6 +3,7 @@ import * as ReactDom from 'react-dom';
 import { Version } from '@microsoft/sp-core-library';
 import {
   IPropertyPaneConfiguration,
+  PropertyPaneTextField
 } from '@microsoft/sp-property-pane';
 import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
 
@@ -17,11 +18,8 @@ import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/
 const requirePackage: any = require("../../../config/package-solution.json");
 
 // Static import
-import * as packageSolution from '../../../config/package-solution.json';
+const packageSolution: any = require("../../../config/package-solution.json");
-
-
 export interface IVersionDisplayWebPartProps {
-  description: string;
 }
 
 export default class VersionDisplayWebPart extends BaseClientSideWebPart<IVersionDisplayWebPartProps> {

samples/react-versiondisplay/src/webparts/versionDisplay/components/VersionDisplay.module.scss

@@ -4,7 +4,6 @@
   .container {
     max-width: 700px;
     margin: 0px auto;
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
   }
 
   .row {
@@ -23,7 +22,7 @@
   }
 
   .title {
-    @include ms-font-xxl;
+    @include ms-font-xl;
     @include ms-fontColor-white;
   }
 

samples/react-versiondisplay/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.9/includes/tsconfig-web.json",
   "compilerOptions": {
     "target": "es5",
     "forceConsistentCasingInFileNames": true,
@@ -19,20 +19,17 @@
       "./node_modules/@microsoft"
     ],
     "types": [
-      "es6-promise",
       "webpack-env"
     ],
     "lib": [
       "es5",
       "dom",
-      "es2015.collection"
+      "es2015.collection",
+      "es2015.promise"
     ]
   },
   "include": [
-    "src/**/*.ts"
+    "src/**/*.ts",
-  ],
+    "src/**/*.tsx"
-  "exclude": [
-    "node_modules",
-    "lib"
   ]
 }

samples/react-versiondisplay/tslint.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@microsoft/sp-tslint-rules/base-tslint.json",
+  "extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json",
   "rules": {
     "class-name": false,
     "export-name": false,
@@ -17,7 +17,6 @@
     "no-switch-case-fall-through": true,
     "no-unnecessary-semicolons": true,
     "no-unused-expression": true,
-    "no-use-before-declare": true,
     "no-with-statement": true,
     "semicolon": true,
     "trailing-comma": false,