honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Replaced deprecated sp-pnp-js with @pnp/js (#597)

This commit is contained in:
Waldek Mastykarz 2018-09-10 12:05:05 +02:00 committed by Vesa Juvonen
parent 5044b54a31
commit 53d14f2898
4 changed files with 91 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
samples/react-async-await-sp-pnp-js/README.md
View File

@ -1,7 +1,7 @@
# React sample showing the use of sp-pnp-js with Async / Await
# React sample showing the use of @pnp/js with Async / Await
## Summary
This webpart demonstrates how to use [PnP JS Core](https://github.com/SharePoint/PnP-JS-Core) with Async functions into the SharePoint Framework as well as integrating [PnP JS and SPFx Logging systems](https://blog.josequinto.com/2017/04/30/how-to-integrate-pnp-js-core-and-sharepoint-framework-logging-systems/). Real example querying SharePoint library to show document sizes.
This webpart demonstrates how to use [PnPJS](https://pnp.github.io/pnpjs/) with Async functions into the SharePoint Framework as well as integrating [PnP JS and SPFx Logging systems](https://blog.josequinto.com/2017/04/30/how-to-integrate-pnp-js-core-and-sharepoint-framework-logging-systems/). Real example querying SharePoint library to show document sizes.
![React-sp-pnp-js-async-await](./assets/async-await-sp-pnp-js.png)
@ -24,8 +24,9 @@ react-async-await-sp-pnp-js | Jose Quinto ([@jquintozamora](https://twitter.com/
Version|Date|Comments
-------|----|--------
1.0|May 1, 2017|Initial release
1.2|Jul 20, 2018|Replaced deprecated sp-pnp-js with @pnp/js
1.1|Mar 6, 2018|Update to 1.4.1
1.0|May 1, 2017|Initial release
## 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.**

93
samples/react-async-await-sp-pnp-js/package-lock.json generated
View File

@ -1265,6 +1265,73 @@
}
}
},
"@pnp/common": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@pnp/common/-/common-1.1.2.tgz",
"integrity": "sha1-AieN9cb8ds60eoHNBLxDANak5JI=",
"requires": {
"@types/adal-angular": "1.0.1",
"adal-angular": "1.0.17",
"tslib": "1.9.2"
},
"dependencies": {
"adal-angular": {
"version": "1.0.17",
"resolved": "https://registry.npmjs.org/adal-angular/-/adal-angular-1.0.17.tgz",
"integrity": "sha1-bpNuDkH5HTsqiOf/ypwvb29WLMQ="
},
"tslib": {
"version": "1.9.2",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.2.tgz",
"integrity": "sha512-AVP5Xol3WivEr7hnssHDsaM+lVrVXWUvd1cfXTRkTj80b//6g2wIFEH6hZG0muGZRnHGrfttpdzRk3YlBkWjKw=="
}
}
},
"@pnp/logging": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@pnp/logging/-/logging-1.1.2.tgz",
"integrity": "sha1-XxJmpCwA2wpPYyDNbg66s6wVqRA=",
"requires": {
"tslib": "1.9.2"
},
"dependencies": {
"tslib": {
"version": "1.9.2",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.2.tgz",
"integrity": "sha512-AVP5Xol3WivEr7hnssHDsaM+lVrVXWUvd1cfXTRkTj80b//6g2wIFEH6hZG0muGZRnHGrfttpdzRk3YlBkWjKw=="
}
}
},
"@pnp/odata": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@pnp/odata/-/odata-1.1.2.tgz",
"integrity": "sha1-RaKSK4NKsd5RPPwYyfN4ZiZbVAc=",
"requires": {
"tslib": "1.9.2"
},
"dependencies": {
"tslib": {
"version": "1.9.2",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.2.tgz",
"integrity": "sha512-AVP5Xol3WivEr7hnssHDsaM+lVrVXWUvd1cfXTRkTj80b//6g2wIFEH6hZG0muGZRnHGrfttpdzRk3YlBkWjKw=="
}
}
},
"@pnp/sp": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@pnp/sp/-/sp-1.1.2.tgz",
"integrity": "sha1-D6XT6QSxmTRKLd6L2ClbPrRkawQ=",
"requires": {
"tslib": "1.9.2"
},
"dependencies": {
"tslib": {
"version": "1.9.2",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.2.tgz",
"integrity": "sha512-AVP5Xol3WivEr7hnssHDsaM+lVrVXWUvd1cfXTRkTj80b//6g2wIFEH6hZG0muGZRnHGrfttpdzRk3YlBkWjKw=="
}
}
},
"@types/adal": {
"version": "1.0.27",
"resolved": "https://registry.npmjs.org/@types/adal/-/adal-1.0.27.tgz",
@ -1273,6 +1340,11 @@
"@types/angular": "1.6.43"
}
},
"@types/adal-angular": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@types/adal-angular/-/adal-angular-1.0.1.tgz",
"integrity": "sha512-2sRGxJYrluhvIz8ae98i5k5woe9Fics4dMFHTcNfY2xAkj5QGZor+sfZzlgM58Fpw7Kklau9Gn6OhgJP25dKug=="
},
"@types/angular": {
"version": "1.6.43",
"resolved": "https://registry.npmjs.org/@types/angular/-/angular-1.6.43.tgz",
@ -1429,11 +1501,6 @@
"@types/node": "6.0.64"
}
},
"@types/microsoft-ajax": {
"version": "0.0.33",
"resolved": "https://registry.npmjs.org/@types/microsoft-ajax/-/microsoft-ajax-0.0.33.tgz",
"integrity": "sha512-R31YIw2FUZsx62yzH1LX9+SV0xCxRn+r6FpYhaEKHAms+3zozMYZZvsJO+I3za+wlE/z03PrePGgCO1rxv7dUg=="
},
"@types/mime": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-2.0.0.tgz",
@ -1559,14 +1626,6 @@
"@types/mime": "2.0.0"
}
},
"@types/sharepoint": {
"version": "2013.1.10",
"resolved": "https://registry.npmjs.org/@types/sharepoint/-/sharepoint-2013.1.10.tgz",
"integrity": "sha512-rDsQNjMnRkzIU4Iz5GWHivR3CXZAbsGMAmPDakMZkgDSl2uzAFcm78ugMnbV0B6vi0ClDGiVrsiPCdkFExhVSw==",
"requires": {
"@types/microsoft-ajax": "0.0.33"
}
},
"@types/sinon": {
"version": "1.16.34",
"resolved": "https://registry.npmjs.org/@types/sinon/-/sinon-1.16.34.tgz",
@ -15347,14 +15406,6 @@
"integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
"dev": true
},
"sp-pnp-js": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/sp-pnp-js/-/sp-pnp-js-2.0.6.tgz",
"integrity": "sha1-zWeDkx30gT5EGZpw9HbnpiQNoSo=",
"requires": {
"@types/sharepoint": "2013.1.10"
}
},
"sparkles": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/sparkles/-/sparkles-1.0.0.tgz",

17
samples/react-async-await-sp-pnp-js/package.json
View File

@ -8,15 +8,18 @@
"dependencies": {
"@microsoft/sp-core-library": "~1.4.1",
"@microsoft/sp-webpart-base": "~1.4.1",
"@pnp/common": "^1.1.2",
"@pnp/logging": "^1.1.2",
"@pnp/odata": "^1.1.2",
"@pnp/sp": "^1.1.2",
"@types/react": "0.14.46",
"@types/react-addons-shallow-compare": "0.14.17",
"@types/react-addons-test-utils": "0.14.15",
"@types/react-addons-update": "0.14.14",
"@types/react-dom": "0.14.18",
"@types/webpack-env": ">=1.12.1 <1.14.0",
"react": "15.4.2",
"react-dom": "15.4.2",
"@types/react": "0.14.46",
"@types/react-dom": "0.14.18",
"@types/react-addons-shallow-compare": "0.14.17",
"@types/react-addons-update": "0.14.14",
"@types/react-addons-test-utils": "0.14.15",
"sp-pnp-js": "2.0.6"
"react-dom": "15.4.2"
},
"devDependencies": {
"@microsoft/sp-build-web": "~1.4.1",

8
samples/react-async-await-sp-pnp-js/src/webparts/asyncAwaitPnPJs/components/AsyncAwaitPnPJs.tsx
View File

@ -5,7 +5,9 @@ import styles from "./AsyncAwaitPnPJs.module.scss";
import { IFile, IResponseItem } from "../interfaces";
// import pnp and pnp logging system
import { Logger, FunctionListener, LogEntry, LogLevel, Web } from "sp-pnp-js";
import { Web } from "@pnp/sp";
import { Logger, LogLevel, LogEntry, FunctionListener } from "@pnp/logging";
// import SPFx Logging system
import { Log } from "@microsoft/sp-core-library";
@ -102,7 +104,7 @@ export default class AsyncAwaitPnPJs extends React.Component<IAsyncAwaitPnPJsPro
// mapping betwween PnP JS Log types and SPFx logging methods
// instead of using switch we use object easy syntax
const logLevelConversion = { Verbose: "verbose", Info: "info", Warning: "warn", Error: "error" };
const logLevelConversion = { 0: "verbose", 1: "info", 2: "warn", 3: "error" };
// create Message. Two importante notes here:
// 1. Use JSON.stringify to output everything. It´s helpful when some internal exception comes thru.
@ -116,7 +118,7 @@ export default class AsyncAwaitPnPJs extends React.Component<IAsyncAwaitPnPJsPro
}
// [SPFx Logging] Calculate method to invoke verbose, info, warn or error
const method = logLevelConversion[LogLevel[entry.level]];
const method = logLevelConversion[entry.level];
// [SPFx Logging] Call SPFx Logging system with the message received from PnP JS Logging
Log[method](componentName, formatedMessage);