Replace sp-pnp-js with pnp/sp

samples/react-pagecontributors/README.md

@@ -22,42 +22,42 @@ Displays page contributors in reverse chronological order.
 
 ![Organisation Chart for the current user running in local Workbench](./assets/pagecontributors_mockup.PNG)
 
-## Used SharePoint Framework Version 
+
-![drop](https://img.shields.io/badge/version-GA-green.svg)
+## Compatibility
+
+![SPFx 1.12.1](https://img.shields.io/badge/SPFx-1.12.1-green.svg) 
+![Node.js LTS 10.x](https://img.shields.io/badge/Node.js-LTS%2010.x-green.svg) 
+![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg) 
+![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams") 
+![Workbench Local | Hosted](https://img.shields.io/badge/Workbench-Local%20%7C%20Hosted-green.svg)
+
 
 ## Applies to
 
 * [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
+* [Microsoft 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
 
 
-## Prerequisites
- 
-PnP-JS-Core
-
 ## Solution
 
 Solution|Author(s)
 --------|---------
 PageContributors | Stéphane Magne ([@SPParse](https://twitter.com/SPParse))
+PageContributors | Ari Gunawan ([@arigunawan3023](https://twitter.com/arigunawan3023))
 
 ## Version history
 
 Version|Date|Comments
 -------|----|--------
-1.0|July 27, 2017|Initial release
+1.0.0|July 27, 2017|Initial release
-
+1.1.0|May 23, 2021|Update SPFx (v1.12.1) version and replace sp-pnp-js with @pnp/sp (v2.5)
-## Disclaimer
-**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
-
----
 
 ## Minimal Path to Awesome
 
-- Clone this repository
+* Clone this repository
-- in the command line run:
+* in the command line run:
-  - `npm install`
+  * `npm install`
-  - `gulp serve`
+  * `gulp serve`
 
 ## Features
 
@@ -70,6 +70,20 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
 
 - Office UI Fabric
 - React
-- Pnp JS Core
+- PNP JS
+
+## Disclaimer
+
+**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
+
+## Support
+
+We do not support samples, but we do use GitHub to track issues and constantly want to improve these samples.
+
+If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=YOUR-SOLUTION-NAME&authors=@YOURGITHUBUSERNAME&title=YOUR-SOLUTION-NAME%20-%20).
+
+For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=YOUR-SOLUTION-NAME&authors=@YOURGITHUBUSERNAME&title=YOUR-SOLUTION-NAME%20-%20).
+
+Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=YOUR-SOLUTION-NAME&authors=@YOURGITHUBUSERNAME&title=YOUR-SOLUTION-NAME%20-%20).
 
 <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-pagecontributors" />

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

@@ -3,7 +3,7 @@
   "solution": {
     "name": "react-pagecontributors-client-side-solution",
     "id": "1c18830a-4c18-4b82-a571-77863b19c66d",
-    "version": "1.0.0.0",
+    "version": "1.1.0.0",
     "skipFeatureDeployment": true,
     "developer": {
       "name": "",

samples/react-pagecontributors/package-lock.json

@@ -1673,11 +1673,6 @@
         "isomorphic-fetch": "^2.2.1"
       }
     },
-    "@microsoft/microsoft-graph-types": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@microsoft/microsoft-graph-types/-/microsoft-graph-types-1.1.0.tgz",
-      "integrity": "sha1-CGRuRpJHpBRMcVFhoQgTh63nzTs="
-    },
     "@microsoft/node-core-library": {
       "version": "3.19.3",
       "resolved": "https://registry.npmjs.org/@microsoft/node-core-library/-/node-core-library-3.19.3.tgz",
@@ -2832,6 +2827,71 @@
       "integrity": "sha512-hZNKjKOYsckoOEgBziGMnBcX0M7EtstnCmwz5jZUOUYwlZ+/xxX6z3jPu1XVO2Jivk0eLfuP9GP+vFD49CMetw==",
       "dev": true
     },
+    "@pnp/common": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@pnp/common/-/common-2.5.0.tgz",
+      "integrity": "sha512-ea4zTNC3sjLolrHZXP+/2SrJM+yC8PygmPW/yRfgbErdvdwYMUSogT69dW+NUaqhkfYZfkkAoWn42irlLMSpdw==",
+      "requires": {
+        "tslib": "2.2.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
+          "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
+        }
+      }
+    },
+    "@pnp/logging": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@pnp/logging/-/logging-2.5.0.tgz",
+      "integrity": "sha512-SnmMCN6oADjiHKAIR23FfTqXeQZeXPBnWeVfyZAgzJfRn9uEQoUlkyET3jHjl9kkrFOVkiOD1CRI7TWMIxURbA==",
+      "requires": {
+        "tslib": "2.2.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
+          "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
+        }
+      }
+    },
+    "@pnp/odata": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@pnp/odata/-/odata-2.5.0.tgz",
+      "integrity": "sha512-AeP01jDvnkiUVn7V+4FT07chz+G/yzrJDH0Gk+qzujJ393ZO6FwJpJEiOCRh9cxF48gqSj/f7r/IIyDHe0+IpQ==",
+      "requires": {
+        "@pnp/common": "2.5.0",
+        "@pnp/logging": "2.5.0",
+        "tslib": "2.2.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
+          "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
+        }
+      }
+    },
+    "@pnp/sp": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@pnp/sp/-/sp-2.5.0.tgz",
+      "integrity": "sha512-4s2p+X5qvkXR72NViKb8DIfC+pvj/a3psZ3Im5PRIan2ErMtu9ch3Lb9nkSaMCF3NTJxWOhkUQ/R6tx8ApaUkg==",
+      "requires": {
+        "@pnp/common": "2.5.0",
+        "@pnp/logging": "2.5.0",
+        "@pnp/odata": "2.5.0",
+        "tslib": "2.2.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
+          "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
+        }
+      }
+    },
     "@pnpm/error": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@pnpm/error/-/error-1.4.0.tgz",
@@ -3457,11 +3517,6 @@
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.117.tgz",
       "integrity": "sha512-xyf2m6tRbz8qQKcxYZa7PA4SllYcay+eh25DN3jmNYY6gSTL7Htc/bttVdkqj2wfJGbeWlQiX8pIyJpKU+tubw=="
     },
-    "@types/microsoft-ajax": {
-      "version": "0.0.36",
-      "resolved": "https://registry.npmjs.org/@types/microsoft-ajax/-/microsoft-ajax-0.0.36.tgz",
-      "integrity": "sha512-aQIlZ0LXpOaxjl0qQt6BoKI9lVPud5z5zxTY1LQBmqmZziryX0rRTHT56WjWTJqVj1M3ZrC/iR606ReuvFs3zA=="
-    },
     "@types/minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.4.tgz",
@@ -3584,14 +3639,6 @@
       "integrity": "sha512-0caWDWmpCp0uifxFh+FaqK3CuZ2SkRR/ZRxAV5+zNdC3QVUi6wyOJnefhPvtNt8NQWXB5OA93BUvZsXpWat2Xw==",
       "dev": true
     },
-    "@types/sharepoint": {
-      "version": "2013.1.9",
-      "resolved": "https://registry.npmjs.org/@types/sharepoint/-/sharepoint-2013.1.9.tgz",
-      "integrity": "sha512-OP3D/vKnOnZcRwTu2jdt7gp8AGDKx3jFoBHudR7UUX4IIwDqOPEJdkfvIpz/KiQbbbyvWS0PtvDz3iQ1HH/rcw==",
-      "requires": {
-        "@types/microsoft-ajax": "*"
-      }
-    },
     "@types/source-list-map": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@@ -18262,15 +18309,6 @@
       "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==",
       "dev": true
     },
-    "sp-pnp-js": {
-      "version": "3.0.10",
-      "resolved": "https://registry.npmjs.org/sp-pnp-js/-/sp-pnp-js-3.0.10.tgz",
-      "integrity": "sha1-Rm180DEgkNbEXTH20azoAgW9QjA=",
-      "requires": {
-        "@microsoft/microsoft-graph-types": "1.1.0",
-        "@types/sharepoint": "2013.1.9"
-      }
-    },
     "sparkles": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/sparkles/-/sparkles-1.0.1.tgz",

samples/react-pagecontributors/package.json

@@ -11,7 +11,7 @@
     "office-ui-fabric-react": "7.156.0",
     "react": "16.9.0",
     "react-dom": "16.9.0",
-    "sp-pnp-js": "^3.0.10"
+    "@pnp/sp": "^2.5.0"
   },
   "devDependencies": {
     "@microsoft/rush-stack-compiler-3.7": "0.2.3",

samples/react-pagecontributors/src/webparts/pageContributors/PageContributorsWebPart.ts

@@ -13,12 +13,12 @@ import * as strings from 'pageContributorsStrings';
 import PageContributors from './components/PageContributors';
 import { IPageContributorsWebPartProps } from './IPageContributorsWebPartProps';
 import { PersonaSize } from "office-ui-fabric-react/lib/index";
-import pnp from 'sp-pnp-js';
+import { sp } from "@pnp/sp/presets/all";
 
 export default class PagecontributionWebPart extends BaseClientSideWebPart<IPageContributorsWebPartProps> {
   public onInit(): Promise<void> {
     return super.onInit().then(_ => {
-      pnp.setup({
+      sp.setup({
         spfxContext: this.context
       });
     });
@@ -56,13 +56,13 @@ export default class PagecontributionWebPart extends BaseClientSideWebPart<IPage
                 PropertyPaneDropdown('personaSize', {
                   label: strings.PropertyPanePersonaSizeText,
                   options: [
-                    { key: PersonaSize.tiny, text: strings.PropertyPaneIconsSizeTiny },
+                    { key: PersonaSize.size8, text: strings.PropertyPaneIconsSizeTiny },
-                    { key: PersonaSize.extraExtraSmall, text: strings.PropertyPaneIconsSizeEES },
+                    { key: PersonaSize.size24, text: strings.PropertyPaneIconsSizeEES },
-                    { key: PersonaSize.extraSmall, text: strings.PropertyPaneIconsSizeES },
+                    { key: PersonaSize.size32, text: strings.PropertyPaneIconsSizeES },
-                    { key: PersonaSize.small, text: strings.PropertyPaneIconsSizeS },
+                    { key: PersonaSize.size40, text: strings.PropertyPaneIconsSizeS },
-                    { key: PersonaSize.regular, text: strings.PropertyPaneIconsSizeR },
+                    { key: PersonaSize.size48, text: strings.PropertyPaneIconsSizeR },
-                    { key: PersonaSize.large, text: strings.PropertyPaneIconsSizeL },
+                    { key: PersonaSize.size72, text: strings.PropertyPaneIconsSizeL },
-                    { key: PersonaSize.extraLarge, text: strings.PropertyPaneIconsSizeEL },
+                    { key: PersonaSize.size100, text: strings.PropertyPaneIconsSizeEL },
                   ],
                   selectedKey: this.properties.personaSize
                 }),

samples/react-pagecontributors/src/webparts/pageContributors/components/PageContributors.tsx

@@ -5,7 +5,7 @@ import {
     Environment,
     EnvironmentType
 } from '@microsoft/sp-core-library';
-import pnp from 'sp-pnp-js';
+import { sp } from '@pnp/sp';
 import { IPageContributorsProps } from "./IPageContributorsProps";
 
 export class PageContributor {
@@ -56,12 +56,12 @@ export class PageContributorsMockData {
 export class PageContributorsService {
     public static getPageContributors(pageServerRelativeUrl: string): Promise<PageContributor[]> {
         return new Promise<PageContributor[]>((resolve, reject) => {
-            pnp.sp.web.getFileByServerRelativeUrl(pageServerRelativeUrl)
+            sp.web.getFileByServerRelativeUrl(pageServerRelativeUrl)
                 .select('ModifiedBy')
                 .expand('ModifiedBy')
                 .get()
                 .then(file => {
-                    pnp.sp.web.getFileByServerRelativeUrl(pageServerRelativeUrl)
+                    sp.web.getFileByServerRelativeUrl(pageServerRelativeUrl)
                         .versions
                         .orderBy('Created')
                         .select('ID, Created, CreatedBy')
@@ -71,7 +71,7 @@ export class PageContributorsService {
                             let history = versions.map((version) => {
                                 return new PageContributor(version.CreatedBy);
                             });
-                            history.unshift(new PageContributor(file.ModifiedBy));
+                            history.unshift(new PageContributor(file['ModifiedBy']));
                             history = RemoveDuplicates(history);
                             resolve(history);
                         });