Update react-async-await-sp-pnp-js
Updated SPFx to version 1.14 Update to PnPjs version 3.0 Removed logging interface Updated codebase for current better coding practices Added samples to show how to utilize new PnPjs version 3 features
This commit is contained in:
Julie Turner
parent
c583554553
commit
3e9f4519c4
|
|
@ -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
|
|
||||||
|
|
@ -11,6 +11,7 @@ dist
|
||||||
lib
|
lib
|
||||||
solution
|
solution
|
||||||
temp
|
temp
|
||||||
|
release
|
||||||
*.sppkg
|
*.sppkg
|
||||||
|
|
||||||
# Coverage directory used by tools like istanbul
|
# Coverage directory used by tools like istanbul
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"@microsoft/generator-sharepoint": {
|
"@microsoft/generator-sharepoint": {
|
||||||
"version": "1.10.0",
|
"version": "1.14.0-beta.4",
|
||||||
"isDomainIsolated": false,
|
"isDomainIsolated": false,
|
||||||
"isCreatingSolution": true,
|
"isCreatingSolution": true,
|
||||||
"packageManager": "npm",
|
"packageManager": "npm",
|
||||||
|
|
|
||||||
|
|
@ -17,78 +17,63 @@ extensions:
|
||||||
|
|
||||||
## Summary
|
## Summary
|
||||||
|
|
||||||
This web part 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.
|
This web part demonstrates how to use [PnPJS](https://pnp.github.io/pnpjs/) with Async functions into the SharePoint Framework.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Compatibility
|
||||||
|
|
||||||
# Compatibility
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Applies to
|
## Applies to
|
||||||
|
|
||||||
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
|
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
|
||||||
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
* [Microsoft 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||||||
|
|
||||||
## Solution
|
## Solution
|
||||||
|
|
||||||
Solution|Author(s)
|
Solution|Author(s)
|
||||||
--------|---------
|
--------|---------
|
||||||
react-async-await-sp-pnp-js | Jose Quinto ([@jquintozamora](https://twitter.com/jquintozamora) , [blog.josequinto.com](https://blog.josequinto.com))
|
react-async-await-sp-pnp-js | Jose Quinto ([@jquintozamora](https://twitter.com/jquintozamora) , [blog.josequinto.com](https://blog.josequinto.com))
|
||||||
|
Version 2 refactored as purely a PnPjs sample by Julie Turner ([@jfj1997](https://twitter.com/jfj1997))
|
||||||
|
|
||||||
## Version history
|
## Version history
|
||||||
|
|
||||||
Version|Date|Comments
|
Version|Date|Comments
|
||||||
-------|----|--------
|
-------|----|--------
|
||||||
|
2.0|Jan 13, 2022|Updated to SPFx 1.14 & PnPjs version 3 & removed logging sample.
|
||||||
1.2|Jul 20, 2018|Replaced deprecated sp-pnp-js with @pnp/js
|
1.2|Jul 20, 2018|Replaced deprecated sp-pnp-js with @pnp/js
|
||||||
1.1|Mar 6, 2018|Update to 1.4.1
|
1.1|Mar 6, 2018|Update to 1.4.1
|
||||||
1.0|May 1, 2017|Initial release
|
1.0|May 1, 2017|Initial release
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Minimal Path to Awesome
|
## Minimal Path to Awesome
|
||||||
|
|
||||||
- clone this repo
|
1. clone this repo
|
||||||
- `$ npm i`
|
1. `$ npm i`
|
||||||
- `$ gulp trust-dev-cert`
|
1. Update online workbench url in the `initialPage` property of the `config/serve.json` file.
|
||||||
- `$ gulp serve `
|
1. `$ gulp serve`
|
||||||
|
|
||||||
### Local Mode
|
|
||||||
|
|
||||||
A browser in local mode (localhost) will be opened.
|
|
||||||
https://localhost:4321/temp/workbench.html
|
|
||||||
|
|
||||||
### SharePoint Mode
|
|
||||||
|
|
||||||
If you want to try on a real environment, open:
|
|
||||||
https://your-domain.sharepoint.com/_layouts/15/workbench.aspx
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
- [Async / Await functionality working with PnP JS sample](https://github.com/jquintozamora/spfx-react-async-await-sp-pnp-js/blob/master/src/webparts/asyncAwaitPnPJs/components/AsyncAwaitPnPJs.tsx#L93)
|
* [Async / Await functionality working with PnP JS sample](https://github.com/jquintozamora/spfx-react-async-await-sp-pnp-js/blob/master/src/webparts/asyncAwaitPnPJs/components/AsyncAwaitPnPJs.tsx#L93)
|
||||||
- Tested and working on IE11 (as TypeScript config provides Promise polyfill)
|
* Tested and working on IE11 (as TypeScript config provides Promise polyfill)
|
||||||
- React Container for the initial load. [Smart Component](https://github.com/jquintozamora/spfx-react-async-await-sp-pnp-js/blob/master/src/webparts/asyncAwaitPnPJs/components/IAsyncAwaitPnPJsState.ts)
|
* React Container for the initial load. [Smart Component](https://github.com/jquintozamora/spfx-react-async-await-sp-pnp-js/blob/master/src/webparts/asyncAwaitPnPJs/components/IAsyncAwaitPnPJsState.ts)
|
||||||
- [Interface best practices](https://github.com/jquintozamora/spfx-react-async-await-sp-pnp-js/tree/master/src/webparts/asyncAwaitPnPJs/interfaces)
|
* [Interface best practices](https://github.com/jquintozamora/spfx-react-async-await-sp-pnp-js/tree/master/src/webparts/asyncAwaitPnPJs/interfaces)
|
||||||
- [PnP JS and SPFx Logging systems integration](https://blog.josequinto.com/2017/04/30/how-to-integrate-pnp-js-core-and-sharepoint-framework-logging-systems)
|
* [PnP JS and SPFx Logging systems integration](https://blog.josequinto.com/2017/04/30/how-to-integrate-pnp-js-core-and-sharepoint-framework-logging-systems)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Disclaimer
|
## 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.**
|
**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.**
|
||||||
|
|
||||||
|
|
||||||
<img src="https://pnptelemetry.azurewebsites.net/sp-dev-fx-webparts/samples/react-async-await-sp-pnp-js" />
|
<img src="https://pnptelemetry.azurewebsites.net/sp-dev-fx-webparts/samples/react-async-await-sp-pnp-js" />
|
||||||
|
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
{
|
|
||||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
|
|
||||||
"deployCdnPath": "temp/deploy"
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||||
"workingDir": "./temp/deploy/",
|
"workingDir": "./release/assets/",
|
||||||
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||||
"container": "react-async-await-sp-pnp-js",
|
"container": "react-async-await-sp-pnp-js",
|
||||||
"accessKey": "<!-- ACCESS KEY -->"
|
"accessKey": "<!-- ACCESS KEY -->"
|
||||||
|
|
|
||||||
|
|
@ -3,9 +3,35 @@
|
||||||
"solution": {
|
"solution": {
|
||||||
"name": "react-async-await-sp-pnp-js-client-side-solution",
|
"name": "react-async-await-sp-pnp-js-client-side-solution",
|
||||||
"id": "c3bd0bfa-1bee-4af0-ad3d-a72d02b4dc7c",
|
"id": "c3bd0bfa-1bee-4af0-ad3d-a72d02b4dc7c",
|
||||||
"version": "1.0.0.0",
|
"version": "2.0.0.0",
|
||||||
"isDomainIsolated": false,
|
"isDomainIsolated": false,
|
||||||
"includeClientSideAssets": true
|
"includeClientSideAssets": true,
|
||||||
|
"features": [
|
||||||
|
{
|
||||||
|
"title": "react-async-await-sp-pnp-js Feature",
|
||||||
|
"description": "The feature that activates elements of the react-async-await-sp-pnp-js solution.",
|
||||||
|
"id": "f603896e-4507-4787-a6bf-1f44b985645e",
|
||||||
|
"version": "1.0.0.0"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"developer": {
|
||||||
|
"name": "",
|
||||||
|
"privacyUrl": "",
|
||||||
|
"termsOfUseUrl": "",
|
||||||
|
"websiteUrl": "",
|
||||||
|
"mpnId": "M365PnPJS"
|
||||||
|
},
|
||||||
|
"metadata": {
|
||||||
|
"shortDescription": {
|
||||||
|
"default": "react-async-await-sp-pnp-js description"
|
||||||
|
},
|
||||||
|
"longDescription": {
|
||||||
|
"default": "react-async-await-sp-pnp-js description"
|
||||||
|
},
|
||||||
|
"screenshotPaths": [],
|
||||||
|
"videoUrl": "",
|
||||||
|
"categories": []
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"paths": {
|
"paths": {
|
||||||
"zippedPackage": "solution/react-async-await-sp-pnp-js.sppkg"
|
"zippedPackage": "solution/react-async-await-sp-pnp-js.sppkg"
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,6 @@
|
||||||
{
|
{
|
||||||
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
|
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
|
||||||
"port": 4321,
|
"port": 4321,
|
||||||
"initialPage": "https://localhost:5432/workbench",
|
"initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx",
|
||||||
"https": true,
|
"https": true
|
||||||
"api": {
|
|
||||||
"port": 5432,
|
|
||||||
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
@ -3,5 +3,16 @@
|
||||||
const build = require('@microsoft/sp-build-web');
|
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.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
|
||||||
build.initialize(require('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;
|
||||||
|
};
|
||||||
|
// disable tslint
|
||||||
|
build.tslintCmd.enabled = false;
|
||||||
|
|
||||||
|
build.initialize(require('gulp'));
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,39 +1,29 @@
|
||||||
{
|
{
|
||||||
"name": "react-async-await-sp-pnp-js",
|
"name": "react-async-await-sp-pnp-js",
|
||||||
"version": "1.1.10",
|
"version": "2.0.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"engines": {
|
|
||||||
"node": ">=0.10.13"
|
|
||||||
},
|
|
||||||
"main": "lib/index.js",
|
"main": "lib/index.js",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@microsoft/rush-stack-compiler-3.2": "^0.6.2",
|
"@microsoft/sp-core-library": "1.14.0-beta.4",
|
||||||
"@microsoft/sp-core-library": "1.10.0",
|
"@microsoft/sp-property-pane": "1.14.0-beta.4",
|
||||||
"@microsoft/sp-property-pane": "1.10.0",
|
"@microsoft/sp-webpart-base": "1.14.0-beta.4",
|
||||||
"@microsoft/sp-webpart-base": "1.10.0",
|
"@pnp/sp": "^3.0.0-v3nightly.20220013",
|
||||||
"@pnp/common": "^1.1.2",
|
|
||||||
"@pnp/logging": "^1.1.2",
|
|
||||||
"@pnp/odata": "^1.1.2",
|
|
||||||
"@pnp/sp": "^2.0.2",
|
|
||||||
"@types/es6-promise": "0.0.33",
|
|
||||||
"@types/react": "16.8.8",
|
|
||||||
"@types/react-dom": "16.8.3",
|
|
||||||
"@types/webpack-env": "1.13.1",
|
|
||||||
"natives": "^1.1.6",
|
"natives": "^1.1.6",
|
||||||
"office-ui-fabric-react": "6.189.2",
|
"office-ui-fabric-react": "7.174.1",
|
||||||
"react": "16.8.5",
|
"react": "16.13.1",
|
||||||
"react-dom": "16.8.5"
|
"react-dom": "16.13.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@microsoft/rush-stack-compiler-3.3": "0.3.5",
|
"@microsoft/rush-stack-compiler-4.2": "^0.1.1",
|
||||||
"@microsoft/sp-build-web": "1.10.0",
|
"@microsoft/sp-build-web": "1.14.0-beta.4",
|
||||||
"@microsoft/sp-module-interfaces": "1.10.0",
|
"@microsoft/sp-module-interfaces": "1.14.0-beta.4",
|
||||||
"@microsoft/sp-tslint-rules": "1.10.0",
|
"@microsoft/sp-tslint-rules": "1.14.0-beta.4",
|
||||||
"@microsoft/sp-webpart-workbench": "1.10.0",
|
"@types/es6-promise": "0.0.33",
|
||||||
"@types/chai": "3.4.34",
|
"@types/react": "16.9.51",
|
||||||
"@types/mocha": "2.2.38",
|
"@types/react-dom": "16.9.8",
|
||||||
|
"@types/webpack-env": "1.13.1",
|
||||||
"ajv": "5.2.2",
|
"ajv": "5.2.2",
|
||||||
"gulp": "~3.9.1",
|
"gulp": "4.0.2",
|
||||||
"tslint-microsoft-contrib": "5.0.0"
|
"tslint-microsoft-contrib": "5.0.0"
|
||||||
},
|
},
|
||||||
"resolutions": {
|
"resolutions": {
|
||||||
|
|
|
||||||
|
|
@ -7,25 +7,25 @@ import {
|
||||||
PropertyPaneTextField
|
PropertyPaneTextField
|
||||||
} from '@microsoft/sp-property-pane';
|
} from '@microsoft/sp-property-pane';
|
||||||
|
|
||||||
import { sp } from '@pnp/sp';
|
|
||||||
|
|
||||||
import * as strings from 'asyncAwaitPnPJsStrings';
|
import * as strings from 'asyncAwaitPnPJsStrings';
|
||||||
import AsyncAwaitPnPJs from './components/AsyncAwaitPnPJs';
|
import AsyncAwaitPnPJs from './components/AsyncAwaitPnPJs';
|
||||||
import { IAsyncAwaitPnPJsProps } from './components/IAsyncAwaitPnPJsProps';
|
import { IAsyncAwaitPnPJsProps } from './components/AsyncAwaitPnPJs';
|
||||||
import { IAsyncAwaitPnPJsWebPartProps } from './IAsyncAwaitPnPJsWebPartProps';
|
|
||||||
|
|
||||||
// import pnp from "sp-pnp-js";
|
import { spfi, SPFI, SPFx } from "@pnp/sp";
|
||||||
|
|
||||||
|
export interface IAsyncAwaitPnPJsWebPartProps {
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
|
||||||
export default class AsyncAwaitPnPJsWebPart extends BaseClientSideWebPart<IAsyncAwaitPnPJsWebPartProps> {
|
export default class AsyncAwaitPnPJsWebPart extends BaseClientSideWebPart<IAsyncAwaitPnPJsWebPartProps> {
|
||||||
|
private sp: SPFI;
|
||||||
|
|
||||||
// // https://github.com/SharePoint/PnP-JS-Core/wiki/Using-sp-pnp-js-in-SharePoint-Framework
|
// // https://github.com/SharePoint/PnP-JS-Core/wiki/Using-sp-pnp-js-in-SharePoint-Framework
|
||||||
public onInit(): Promise<void> {
|
public async onInit(): Promise<void> {
|
||||||
return super.onInit().then(_ => {
|
await super.onInit();
|
||||||
// establish SPFx context
|
|
||||||
sp.setup({
|
this.sp = spfi().using(SPFx(this.context));
|
||||||
spfxContext: this.context
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public render(): void {
|
public render(): void {
|
||||||
|
|
@ -33,7 +33,7 @@ export default class AsyncAwaitPnPJsWebPart extends BaseClientSideWebPart<IAsync
|
||||||
AsyncAwaitPnPJs,
|
AsyncAwaitPnPJs,
|
||||||
{
|
{
|
||||||
description: this.properties.description,
|
description: this.properties.description,
|
||||||
pageContext: this.context.pageContext
|
sp: this.sp
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
export interface IAsyncAwaitPnPJsWebPartProps {
|
|
||||||
description: string;
|
|
||||||
}
|
|
||||||
|
|
@ -5,18 +5,20 @@ import styles from "./AsyncAwaitPnPJs.module.scss";
|
||||||
import { IFile, IResponseItem } from "../interfaces";
|
import { IFile, IResponseItem } from "../interfaces";
|
||||||
|
|
||||||
// import pnp and pnp logging system
|
// import pnp and pnp logging system
|
||||||
import { sp } from "@pnp/sp";
|
import { SPFI } from "@pnp/sp";
|
||||||
import "@pnp/sp/webs";
|
import "@pnp/sp/webs";
|
||||||
import "@pnp/sp/lists";
|
import "@pnp/sp/lists";
|
||||||
import "@pnp/sp/items";
|
import "@pnp/sp/items";
|
||||||
import { Logger, LogLevel, LogEntry, FunctionListener } from "@pnp/logging";
|
|
||||||
|
|
||||||
// import SPFx Logging system
|
export interface IAsyncAwaitPnPJsProps {
|
||||||
import { Log } from "@microsoft/sp-core-library";
|
description: string;
|
||||||
|
sp: SPFI;
|
||||||
|
}
|
||||||
|
|
||||||
// import React props and state
|
export interface IAsyncAwaitPnPJsState {
|
||||||
import { IAsyncAwaitPnPJsProps } from "./IAsyncAwaitPnPJsProps";
|
items: IFile[];
|
||||||
import { IAsyncAwaitPnPJsState } from "./IAsyncAwaitPnPJsState";
|
errors: string[];
|
||||||
|
}
|
||||||
|
|
||||||
export default class AsyncAwaitPnPJs extends React.Component<IAsyncAwaitPnPJsProps, IAsyncAwaitPnPJsState> {
|
export default class AsyncAwaitPnPJs extends React.Component<IAsyncAwaitPnPJsProps, IAsyncAwaitPnPJsState> {
|
||||||
|
|
||||||
|
|
@ -27,14 +29,6 @@ export default class AsyncAwaitPnPJs extends React.Component<IAsyncAwaitPnPJsPro
|
||||||
items: [],
|
items: [],
|
||||||
errors: []
|
errors: []
|
||||||
};
|
};
|
||||||
|
|
||||||
// normally we don't need to bind the functions as we use arrow functions and do automatically the bing
|
|
||||||
// http://bit.ly/reactArrowFunction
|
|
||||||
// but using Async function we can't convert it into arrow function, so we do the binding here
|
|
||||||
this._readAllFilesSize.bind(this);
|
|
||||||
|
|
||||||
// enable PnP JS Logging integrated with SPFx Logging
|
|
||||||
this._enableLogging();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public componentDidMount(): void {
|
public componentDidMount(): void {
|
||||||
|
|
@ -62,7 +56,7 @@ export default class AsyncAwaitPnPJs extends React.Component<IAsyncAwaitPnPJsPro
|
||||||
<div className={styles.row}>
|
<div className={styles.row}>
|
||||||
<div className={styles.left}>Name</div>
|
<div className={styles.left}>Name</div>
|
||||||
<div className={styles.right}>Size (KB)</div>
|
<div className={styles.right}>Size (KB)</div>
|
||||||
<div className={styles.clear + " " + styles.header}></div>
|
<div className={`${styles.clear} ${styles.header}`}></div>
|
||||||
</div>
|
</div>
|
||||||
{this.state.items.map((item, idx) => {
|
{this.state.items.map((item, idx) => {
|
||||||
return (
|
return (
|
||||||
|
|
@ -74,10 +68,10 @@ export default class AsyncAwaitPnPJs extends React.Component<IAsyncAwaitPnPJsPro
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
<div className={styles.row}>
|
<div className={styles.row}>
|
||||||
<div className={styles.clear + " " + styles.header}></div>
|
<div className={`${styles.clear} ${styles.header}`}></div>
|
||||||
<div className={styles.left}>Total: </div>
|
<div className={styles.left}>Total: </div>
|
||||||
<div className={styles.right}>{(totalDocs / 1024).toFixed(2)}</div>
|
<div className={styles.right}>{(totalDocs / 1024).toFixed(2)}</div>
|
||||||
<div className={styles.clear + " " + styles.header}></div>
|
<div className={`${styles.clear} ${styles.header}`}></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -86,56 +80,7 @@ export default class AsyncAwaitPnPJs extends React.Component<IAsyncAwaitPnPJsPro
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
private _enableLogging(): void {
|
private _readAllFilesSize = async (libraryName: string): Promise<void> => {
|
||||||
////////////////////////////////////////////////////////////////////////
|
|
||||||
// enable Logging system
|
|
||||||
////////////////////////////////////////////////////////////////////////
|
|
||||||
// we will integrate PnP JS Logging System with SPFx Logging system
|
|
||||||
// 1. Logger object => PnP JS Logger
|
|
||||||
// https://github.com/SharePoint/PnP-JS-Core/wiki/Working-With:-Logging
|
|
||||||
// 2. Log object => SPFx Logger
|
|
||||||
// https://github.com/SharePoint/sp-dev-docs/wiki/Working-with-the-Logging-API
|
|
||||||
////////////////////////////////////////////////////////////////////////
|
|
||||||
// [PnP JS Logging] activate Info level
|
|
||||||
Logger.activeLogLevel = LogLevel.Info;
|
|
||||||
|
|
||||||
// [PnP JS Logging] create a custom FunctionListener to integrate PnP JS and SPFx Logging systems
|
|
||||||
const listener = new FunctionListener((entry: LogEntry) => {
|
|
||||||
|
|
||||||
// get React component name
|
|
||||||
const componentName: string = (this as any)._reactInternalInstance._currentElement.props.description;
|
|
||||||
|
|
||||||
// mapping betwween PnP JS Log types and SPFx logging methods
|
|
||||||
// instead of using switch we use object easy syntax
|
|
||||||
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.
|
|
||||||
// 2. Use JavaScript´s Error constructor allows us to output more than 100 characters using SPFx logging
|
|
||||||
let formatedMessage;
|
|
||||||
if (entry.level === LogLevel.Error) {
|
|
||||||
formatedMessage = new Error(`Message: ${entry.message} Data: ${JSON.stringify(entry.data)}`);
|
|
||||||
// formatedMessage = `Message: ${entry.message} Data: ${JSON.stringify(entry.data)}`;
|
|
||||||
} else {
|
|
||||||
formatedMessage = `Message: ${entry.message} Data: ${JSON.stringify(entry.data)}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// [SPFx Logging] Calculate method to invoke verbose, info, warn or error
|
|
||||||
const method = logLevelConversion[entry.level];
|
|
||||||
|
|
||||||
// [SPFx Logging] Call SPFx Logging system with the message received from PnP JS Logging
|
|
||||||
Log[method](componentName, formatedMessage);
|
|
||||||
});
|
|
||||||
|
|
||||||
// [PnP JS Logging] Once create the custom listerner we should subscribe to it
|
|
||||||
Logger.subscribe(listener);
|
|
||||||
}
|
|
||||||
|
|
||||||
// async functions were introduced with ES3/ES5 native support in TypeScript 2.1
|
|
||||||
// https://blogs.msdn.microsoft.com/typescript/2016/12/07/announcing-typescript-2-1/
|
|
||||||
// async function always return a Promise, on this scenario we return void Promise
|
|
||||||
// because we will not need it as we are directly setting the Component´s state
|
|
||||||
private async _readAllFilesSize(libraryName: string): Promise<void> {
|
|
||||||
try {
|
try {
|
||||||
// do PnP JS query, some notes:
|
// do PnP JS query, some notes:
|
||||||
// - .expand() method will retrive Item.File item but only Length property
|
// - .expand() method will retrive Item.File item but only Length property
|
||||||
|
|
@ -143,13 +88,11 @@ export default class AsyncAwaitPnPJs extends React.Component<IAsyncAwaitPnPJsPro
|
||||||
// - .get() always returns a promise
|
// - .get() always returns a promise
|
||||||
// - await converts Promise<IResponseItem[]> into IResponse[]
|
// - await converts Promise<IResponseItem[]> into IResponse[]
|
||||||
|
|
||||||
const response: IResponseItem[] = await sp.web.lists
|
const response: IResponseItem[] = await this.props.sp.web.lists
|
||||||
.getByTitle(libraryName)
|
.getByTitle(libraryName)
|
||||||
.items
|
.items
|
||||||
.select("Title", "FileLeafRef", "File/Length")
|
.select("Title", "FileLeafRef", "File/Length")
|
||||||
.expand("File/Length")
|
.expand("File/Length")();
|
||||||
.usingCaching()
|
|
||||||
.get();
|
|
||||||
|
|
||||||
// use map to convert IResponseItem[] into our internal object IFile[]
|
// use map to convert IResponseItem[] into our internal object IFile[]
|
||||||
const items: IFile[] = response.map((item: IResponseItem) => {
|
const items: IFile[] = response.map((item: IResponseItem) => {
|
||||||
|
|
@ -161,20 +104,18 @@ export default class AsyncAwaitPnPJs extends React.Component<IAsyncAwaitPnPJsPro
|
||||||
});
|
});
|
||||||
|
|
||||||
// set our Component´s State
|
// set our Component´s State
|
||||||
this.setState({ ...this.state, items });
|
this.setState({ items });
|
||||||
|
|
||||||
// intentionally set wrong query to see console errors...
|
// intentionally set wrong query to see console errors...
|
||||||
const failResponse: IResponseItem[] = await sp.web.lists
|
const failResponse: IResponseItem[] = await this.props.sp.web.lists
|
||||||
.getByTitle(libraryName)
|
.getByTitle(libraryName)
|
||||||
.items
|
.items
|
||||||
.select("Title", "FileLeafRef", "File/Length")
|
.select("Title", "FileLeafRef", "File/Length")
|
||||||
.expand("File/Length")
|
.expand("File/Length")();
|
||||||
.usingCaching()
|
|
||||||
.get();
|
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
// set a new state conserving the previous state + the new error
|
// set a new state conserving the previous state + the new error
|
||||||
this.setState({ ...this.state, errors: [...this.state.errors, error] });
|
this.setState({ errors: [...this.state.errors, error] });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
import { PageContext } from "@microsoft/sp-page-context";
|
|
||||||
export interface IAsyncAwaitPnPJsProps {
|
|
||||||
description: string;
|
|
||||||
pageContext: PageContext;
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
import {IFile} from "../interfaces";
|
|
||||||
export interface IAsyncAwaitPnPJsState {
|
|
||||||
items: IFile[];
|
|
||||||
errors: string[];
|
|
||||||
}
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
/// <reference types="mocha" />
|
|
||||||
|
|
||||||
import { assert } from 'chai';
|
|
||||||
|
|
||||||
describe('AsyncAwaitPnPJsWebPart', () => {
|
|
||||||
it('should do something', () => {
|
|
||||||
assert.ok(true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
{
|
|
||||||
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.2/MicrosoftTeams.schema.json",
|
|
||||||
"manifestVersion": "1.2",
|
|
||||||
"packageName": "AsyncAwaitPnPJs",
|
|
||||||
"id": "c81d0661-6ead-4c3c-a3a0-261e2a7edd44",
|
|
||||||
"version": "0.1",
|
|
||||||
"developer": {
|
|
||||||
"name": "SPFx + Teams Dev",
|
|
||||||
"websiteUrl": "https://products.office.com/en-us/sharepoint/collaboration",
|
|
||||||
"privacyUrl": "https://privacy.microsoft.com/en-us/privacystatement",
|
|
||||||
"termsOfUseUrl": "https://www.microsoft.com/en-us/servicesagreement"
|
|
||||||
},
|
|
||||||
"name": {
|
|
||||||
"short": "AsyncAwaitPnPJs"
|
|
||||||
},
|
|
||||||
"description": {
|
|
||||||
"short": "AsyncAwaitPnPJs description",
|
|
||||||
"full": "AsyncAwaitPnPJs description"
|
|
||||||
},
|
|
||||||
"icons": {
|
|
||||||
"outline": "tab20x20.png",
|
|
||||||
"color": "tab96x96.png"
|
|
||||||
},
|
|
||||||
"accentColor": "#004578",
|
|
||||||
"configurableTabs": [
|
|
||||||
{
|
|
||||||
"configurationUrl": "https://{teamSiteDomain}{teamSitePath}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest={teamSitePath}/_layouts/15/teamshostedapp.aspx%3FopenPropertyPane=true%26teams%26componentId=c81d0661-6ead-4c3c-a3a0-261e2a7edd44", "canUpdateConfiguration": true,
|
|
||||||
"scopes": [
|
|
||||||
"team"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"validDomains": [
|
|
||||||
"*.login.microsoftonline.com",
|
|
||||||
"*.sharepoint.com",
|
|
||||||
"*.sharepoint-df.com",
|
|
||||||
"spoppe-a.akamaihd.net",
|
|
||||||
"spoprod-a.akamaihd.net",
|
|
||||||
"resourceseng.blob.core.windows.net",
|
|
||||||
"msft.spoppe.com"
|
|
||||||
],
|
|
||||||
"webApplicationInfo": {
|
|
||||||
"resource": "https://{teamSiteDomain}",
|
|
||||||
"id": "00000003-0000-0ff1-ce00-000000000000"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
|
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.2/includes/tsconfig-web.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"target": "es5",
|
"target": "es5",
|
||||||
"module": "esnext",
|
"module": "esnext",
|
||||||
|
|
@ -18,20 +18,17 @@
|
||||||
"./node_modules/@microsoft"
|
"./node_modules/@microsoft"
|
||||||
],
|
],
|
||||||
"types": [
|
"types": [
|
||||||
"es6-promise",
|
|
||||||
"webpack-env"
|
"webpack-env"
|
||||||
],
|
],
|
||||||
"lib": [
|
"lib": [
|
||||||
"es5",
|
"es5",
|
||||||
"dom",
|
"dom",
|
||||||
"es2015.collection"
|
"es2015.collection",
|
||||||
|
"es2015.promise"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"include": [
|
"include": [
|
||||||
"src/**/*.ts"
|
"src/**/*.ts",
|
||||||
],
|
"src/**/*.tsx"
|
||||||
"exclude": [
|
|
||||||
"node_modules",
|
|
||||||
"lib"
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"extends": "@microsoft/sp-tslint-rules/base-tslint.json",
|
"extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json",
|
||||||
"rules": {
|
"rules": {
|
||||||
"class-name": false,
|
"class-name": false,
|
||||||
"export-name": false,
|
"export-name": false,
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,744 @@
|
||||||
|
# Upgrade project react-async-await-sp-pnp-js to v1.14.0-beta.4
|
||||||
|
|
||||||
|
Date: 1/13/2022
|
||||||
|
|
||||||
|
## Findings
|
||||||
|
|
||||||
|
Following is the list of steps required to upgrade your project to SharePoint Framework version 1.14.0-beta.4. [Summary](#Summary) of the modifications is included at the end of the report.
|
||||||
|
|
||||||
|
### FN001001 @microsoft/sp-core-library | Required
|
||||||
|
|
||||||
|
Upgrade SharePoint Framework dependency package @microsoft/sp-core-library
|
||||||
|
|
||||||
|
Execute the following command:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm i -SE @microsoft/sp-core-library@1.14.0-beta.4
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./package.json:11:5](./package.json)
|
||||||
|
|
||||||
|
### FN001004 @microsoft/sp-webpart-base | Required
|
||||||
|
|
||||||
|
Upgrade SharePoint Framework dependency package @microsoft/sp-webpart-base
|
||||||
|
|
||||||
|
Execute the following command:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm i -SE @microsoft/sp-webpart-base@1.14.0-beta.4
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./package.json:13:5](./package.json)
|
||||||
|
|
||||||
|
### FN001021 @microsoft/sp-property-pane | Required
|
||||||
|
|
||||||
|
Upgrade SharePoint Framework dependency package @microsoft/sp-property-pane
|
||||||
|
|
||||||
|
Execute the following command:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm i -SE @microsoft/sp-property-pane@1.14.0-beta.4
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./package.json:12:5](./package.json)
|
||||||
|
|
||||||
|
### FN002001 @microsoft/sp-build-web | Required
|
||||||
|
|
||||||
|
Upgrade SharePoint Framework dev dependency package @microsoft/sp-build-web
|
||||||
|
|
||||||
|
Execute the following command:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm i -DE @microsoft/sp-build-web@1.14.0-beta.4
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./package.json:29:5](./package.json)
|
||||||
|
|
||||||
|
### FN002002 @microsoft/sp-module-interfaces | Required
|
||||||
|
|
||||||
|
Upgrade SharePoint Framework dev dependency package @microsoft/sp-module-interfaces
|
||||||
|
|
||||||
|
Execute the following command:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm i -DE @microsoft/sp-module-interfaces@1.14.0-beta.4
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./package.json:30:5](./package.json)
|
||||||
|
|
||||||
|
### FN002009 @microsoft/sp-tslint-rules | Required
|
||||||
|
|
||||||
|
Upgrade SharePoint Framework dev dependency package @microsoft/sp-tslint-rules
|
||||||
|
|
||||||
|
Execute the following command:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm i -DE @microsoft/sp-tslint-rules@1.14.0-beta.4
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./package.json:31:5](./package.json)
|
||||||
|
|
||||||
|
### FN006004 package-solution.json developer | Optional
|
||||||
|
|
||||||
|
In package-solution.json add developer section
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"solution": {
|
||||||
|
"developer": {
|
||||||
|
"name": "",
|
||||||
|
"privacyUrl": "",
|
||||||
|
"termsOfUseUrl": "",
|
||||||
|
"websiteUrl": "",
|
||||||
|
"mpnId": "Undefined-1.14.0-beta.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./config/package-solution.json:3:3](./config/package-solution.json)
|
||||||
|
|
||||||
|
### FN006005 package-solution.json metadata | Required
|
||||||
|
|
||||||
|
In package-solution.json add metadata section
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"solution": {
|
||||||
|
"metadata": {
|
||||||
|
"shortDescription": {
|
||||||
|
"default": "react-async-await-sp-pnp-js description"
|
||||||
|
},
|
||||||
|
"longDescription": {
|
||||||
|
"default": "react-async-await-sp-pnp-js description"
|
||||||
|
},
|
||||||
|
"screenshotPaths": [],
|
||||||
|
"videoUrl": "",
|
||||||
|
"categories": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./config/package-solution.json:3:3](./config/package-solution.json)
|
||||||
|
|
||||||
|
### FN006006 package-solution.json features | Required
|
||||||
|
|
||||||
|
In package-solution.json add features section
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"solution": {
|
||||||
|
"features": [
|
||||||
|
{
|
||||||
|
"title": "react-async-await-sp-pnp-js Feature",
|
||||||
|
"description": "The feature that activates elements of the react-async-await-sp-pnp-js solution.",
|
||||||
|
"id": "f603896e-4507-4787-a6bf-1f44b985645e",
|
||||||
|
"version": "1.0.0.0"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./config/package-solution.json:3:3](./config/package-solution.json)
|
||||||
|
|
||||||
|
### FN010001 .yo-rc.json version | Recommended
|
||||||
|
|
||||||
|
Update version in .yo-rc.json
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"@microsoft/generator-sharepoint": {
|
||||||
|
"version": "1.14.0-beta.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./.yo-rc.json:3:5](./.yo-rc.json)
|
||||||
|
|
||||||
|
### FN001008 react | Required
|
||||||
|
|
||||||
|
Upgrade SharePoint Framework dependency package react
|
||||||
|
|
||||||
|
Execute the following command:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm i -SE react@16.13.1
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./package.json:24:5](./package.json)
|
||||||
|
|
||||||
|
### FN001009 react-dom | Required
|
||||||
|
|
||||||
|
Upgrade SharePoint Framework dependency package react-dom
|
||||||
|
|
||||||
|
Execute the following command:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm i -SE react-dom@16.13.1
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./package.json:25:5](./package.json)
|
||||||
|
|
||||||
|
### FN001022 office-ui-fabric-react | Required
|
||||||
|
|
||||||
|
Upgrade SharePoint Framework dependency package office-ui-fabric-react
|
||||||
|
|
||||||
|
Execute the following command:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm i -SE office-ui-fabric-react@7.174.1
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./package.json:23:5](./package.json)
|
||||||
|
|
||||||
|
### FN002003 @microsoft/sp-webpart-workbench | Required
|
||||||
|
|
||||||
|
Remove SharePoint Framework dev dependency package @microsoft/sp-webpart-workbench
|
||||||
|
|
||||||
|
Execute the following command:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm un -D @microsoft/sp-webpart-workbench
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./package.json:32:5](./package.json)
|
||||||
|
|
||||||
|
### FN002015 @types/react | Required
|
||||||
|
|
||||||
|
Install SharePoint Framework dev dependency package @types/react
|
||||||
|
|
||||||
|
Execute the following command:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm i -DE @types/react@16.9.51
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./package.json:27:3](./package.json)
|
||||||
|
|
||||||
|
### FN002018 @microsoft/rush-stack-compiler-3.9 | Required
|
||||||
|
|
||||||
|
Install SharePoint Framework dev dependency package @microsoft/rush-stack-compiler-3.9
|
||||||
|
|
||||||
|
Execute the following command:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm i -DE @microsoft/rush-stack-compiler-3.9@0.4.47
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./package.json:27:3](./package.json)
|
||||||
|
|
||||||
|
### FN007002 serve.json initialPage | Required
|
||||||
|
|
||||||
|
Update serve.json initialPage URL
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./config/serve.json:4:3](./config/serve.json)
|
||||||
|
|
||||||
|
### FN007003 serve.json api | Required
|
||||||
|
|
||||||
|
From serve.json remove the api property
|
||||||
|
|
||||||
|
```json
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./config/serve.json:6:3](./config/serve.json)
|
||||||
|
|
||||||
|
### FN012017 tsconfig.json extends property | Required
|
||||||
|
|
||||||
|
Update tsconfig.json extends property
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.9/includes/tsconfig-web.json"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./tsconfig.json:2:3](./tsconfig.json)
|
||||||
|
|
||||||
|
### FN015007 config\copy-assets.json | Required
|
||||||
|
|
||||||
|
Remove file config\copy-assets.json
|
||||||
|
|
||||||
|
Execute the following command:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
rm "config\copy-assets.json"
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [config\copy-assets.json](config\copy-assets.json)
|
||||||
|
|
||||||
|
### FN005002 deploy-azure-storage.json workingDir | Required
|
||||||
|
|
||||||
|
Update deploy-azure-storage.json workingDir
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"workingDir": "./release/assets/"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./config/deploy-azure-storage.json:3:3](./config/deploy-azure-storage.json)
|
||||||
|
|
||||||
|
### FN023001 .gitignore 'release' folder | Required
|
||||||
|
|
||||||
|
To .gitignore add the 'release' folder
|
||||||
|
|
||||||
|
|
||||||
|
File: [./.gitignore](./.gitignore)
|
||||||
|
|
||||||
|
### FN002004 gulp | Required
|
||||||
|
|
||||||
|
Upgrade SharePoint Framework dev dependency package gulp
|
||||||
|
|
||||||
|
Execute the following command:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm i -DE gulp@4.0.2
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./package.json:36:5](./package.json)
|
||||||
|
|
||||||
|
### FN002005 @types/chai | Required
|
||||||
|
|
||||||
|
Remove SharePoint Framework dev dependency package @types/chai
|
||||||
|
|
||||||
|
Execute the following command:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm un -D @types/chai
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./package.json:33:5](./package.json)
|
||||||
|
|
||||||
|
### FN002006 @types/mocha | Required
|
||||||
|
|
||||||
|
Remove SharePoint Framework dev dependency package @types/mocha
|
||||||
|
|
||||||
|
Execute the following command:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm un -D @types/mocha
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./package.json:34:5](./package.json)
|
||||||
|
|
||||||
|
### FN002016 @types/react-dom | Required
|
||||||
|
|
||||||
|
Install SharePoint Framework dev dependency package @types/react-dom
|
||||||
|
|
||||||
|
Execute the following command:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm i -DE @types/react-dom@16.9.8
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./package.json:27:3](./package.json)
|
||||||
|
|
||||||
|
### FN012013 tsconfig.json exclude property | Required
|
||||||
|
|
||||||
|
Remove tsconfig.json exclude property
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"exclude": []
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./tsconfig.json:33:3](./tsconfig.json)
|
||||||
|
|
||||||
|
### FN012018 tsconfig.json es2015.promise lib | Required
|
||||||
|
|
||||||
|
Add es2015.promise lib in tsconfig.json
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"lib": [
|
||||||
|
"es2015.promise"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./tsconfig.json:24:5](./tsconfig.json)
|
||||||
|
|
||||||
|
### FN012019 tsconfig.json es6-promise types | Required
|
||||||
|
|
||||||
|
Remove es6-promise type in tsconfig.json
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"types": [
|
||||||
|
"es6-promise"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./tsconfig.json:21:7](./tsconfig.json)
|
||||||
|
|
||||||
|
### FN013002 gulpfile.js serve task | Required
|
||||||
|
|
||||||
|
Before 'build.initialize(require('gulp'));' add the serve task
|
||||||
|
|
||||||
|
```js
|
||||||
|
var getTasks = build.rig.getTasks;
|
||||||
|
build.rig.getTasks = function () {
|
||||||
|
var result = getTasks.call(build.rig);
|
||||||
|
|
||||||
|
result.set('serve', result.get('serve-deprecated'));
|
||||||
|
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./gulpfile.js](./gulpfile.js)
|
||||||
|
|
||||||
|
### FN015006 .editorconfig | Required
|
||||||
|
|
||||||
|
Remove file .editorconfig
|
||||||
|
|
||||||
|
Execute the following command:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
rm ".editorconfig"
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [.editorconfig](.editorconfig)
|
||||||
|
|
||||||
|
### FN019002 tslint.json extends | Required
|
||||||
|
|
||||||
|
Update tslint.json extends property
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./tslint.json:2:5](./tslint.json)
|
||||||
|
|
||||||
|
### FN021002 engines | Required
|
||||||
|
|
||||||
|
Remove package.json property
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"engines": "undefined"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./package.json:5:3](./package.json)
|
||||||
|
|
||||||
|
### FN001005 @types/react | Required
|
||||||
|
|
||||||
|
Remove SharePoint Framework dependency package @types/react
|
||||||
|
|
||||||
|
Execute the following command:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm un -S @types/react
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./package.json:19:5](./package.json)
|
||||||
|
|
||||||
|
### FN001006 @types/react-dom | Required
|
||||||
|
|
||||||
|
Remove SharePoint Framework dependency package @types/react-dom
|
||||||
|
|
||||||
|
Execute the following command:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm un -S @types/react-dom
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./package.json:20:5](./package.json)
|
||||||
|
|
||||||
|
### FN001007 @types/webpack-env | Required
|
||||||
|
|
||||||
|
Remove SharePoint Framework dependency package @types/webpack-env
|
||||||
|
|
||||||
|
Execute the following command:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm un -S @types/webpack-env
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./package.json:21:5](./package.json)
|
||||||
|
|
||||||
|
### FN001010 @types/es6-promise | Required
|
||||||
|
|
||||||
|
Remove SharePoint Framework dependency package @types/es6-promise
|
||||||
|
|
||||||
|
Execute the following command:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm un -S @types/es6-promise
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./package.json:18:5](./package.json)
|
||||||
|
|
||||||
|
### FN002013 @types/webpack-env | Required
|
||||||
|
|
||||||
|
Install SharePoint Framework dev dependency package @types/webpack-env
|
||||||
|
|
||||||
|
Execute the following command:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm i -DE @types/webpack-env@1.13.1
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./package.json:27:3](./package.json)
|
||||||
|
|
||||||
|
### FN002014 @types/es6-promise | Required
|
||||||
|
|
||||||
|
Install SharePoint Framework dev dependency package @types/es6-promise
|
||||||
|
|
||||||
|
Execute the following command:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm i -DE @types/es6-promise@0.0.33
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./package.json:27:3](./package.json)
|
||||||
|
|
||||||
|
### FN012012 tsconfig.json include property | Required
|
||||||
|
|
||||||
|
Add to the tsconfig.json include property
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"include": [
|
||||||
|
"src/**/*.tsx"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./tsconfig.json:30:3](./tsconfig.json)
|
||||||
|
|
||||||
|
### FN017001 Run npm dedupe | Optional
|
||||||
|
|
||||||
|
If, after upgrading npm packages, when building the project you have errors similar to: "error TS2345: Argument of type 'SPHttpClientConfiguration' is not assignable to parameter of type 'SPHttpClientConfiguration'", try running 'npm dedupe' to cleanup npm packages.
|
||||||
|
|
||||||
|
Execute the following command:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm dedupe
|
||||||
|
```
|
||||||
|
|
||||||
|
File: [./package.json](./package.json)
|
||||||
|
|
||||||
|
## Summary
|
||||||
|
|
||||||
|
### Execute script
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm un -S @types/react @types/react-dom @types/webpack-env @types/es6-promise
|
||||||
|
npm un -D @microsoft/sp-webpart-workbench @types/chai @types/mocha
|
||||||
|
npm i -SE @microsoft/sp-core-library@1.14.0-beta.4 @microsoft/sp-webpart-base@1.14.0-beta.4 @microsoft/sp-property-pane@1.14.0-beta.4 react@16.13.1 react-dom@16.13.1 office-ui-fabric-react@7.174.1
|
||||||
|
npm i -DE @microsoft/sp-build-web@1.14.0-beta.4 @microsoft/sp-module-interfaces@1.14.0-beta.4 @microsoft/sp-tslint-rules@1.14.0-beta.4 @types/react@16.9.51 @microsoft/rush-stack-compiler-3.9@0.4.47 gulp@4.0.2 @types/react-dom@16.9.8 @types/webpack-env@1.13.1 @types/es6-promise@0.0.33
|
||||||
|
npm dedupe
|
||||||
|
rm "config\copy-assets.json"
|
||||||
|
rm ".editorconfig"
|
||||||
|
```
|
||||||
|
|
||||||
|
### Modify files
|
||||||
|
|
||||||
|
#### [./config/package-solution.json](./config/package-solution.json)
|
||||||
|
|
||||||
|
In package-solution.json add developer section:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"solution": {
|
||||||
|
"developer": {
|
||||||
|
"name": "",
|
||||||
|
"privacyUrl": "",
|
||||||
|
"termsOfUseUrl": "",
|
||||||
|
"websiteUrl": "",
|
||||||
|
"mpnId": "Undefined-1.14.0-beta.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
In package-solution.json add metadata section:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"solution": {
|
||||||
|
"metadata": {
|
||||||
|
"shortDescription": {
|
||||||
|
"default": "react-async-await-sp-pnp-js description"
|
||||||
|
},
|
||||||
|
"longDescription": {
|
||||||
|
"default": "react-async-await-sp-pnp-js description"
|
||||||
|
},
|
||||||
|
"screenshotPaths": [],
|
||||||
|
"videoUrl": "",
|
||||||
|
"categories": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
In package-solution.json add features section:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"solution": {
|
||||||
|
"features": [
|
||||||
|
{
|
||||||
|
"title": "react-async-await-sp-pnp-js Feature",
|
||||||
|
"description": "The feature that activates elements of the react-async-await-sp-pnp-js solution.",
|
||||||
|
"id": "f603896e-4507-4787-a6bf-1f44b985645e",
|
||||||
|
"version": "1.0.0.0"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### [./.yo-rc.json](./.yo-rc.json)
|
||||||
|
|
||||||
|
Update version in .yo-rc.json:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"@microsoft/generator-sharepoint": {
|
||||||
|
"version": "1.14.0-beta.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### [./config/serve.json](./config/serve.json)
|
||||||
|
|
||||||
|
Update serve.json initialPage URL:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
From serve.json remove the api property:
|
||||||
|
|
||||||
|
```json
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
#### [./tsconfig.json](./tsconfig.json)
|
||||||
|
|
||||||
|
Update tsconfig.json extends property:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.9/includes/tsconfig-web.json"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Remove tsconfig.json exclude property:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"exclude": []
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Add es2015.promise lib in tsconfig.json:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"lib": [
|
||||||
|
"es2015.promise"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Remove es6-promise type in tsconfig.json:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"types": [
|
||||||
|
"es6-promise"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Add to the tsconfig.json include property:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"include": [
|
||||||
|
"src/**/*.tsx"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### [./config/deploy-azure-storage.json](./config/deploy-azure-storage.json)
|
||||||
|
|
||||||
|
Update deploy-azure-storage.json workingDir:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"workingDir": "./release/assets/"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### [./.gitignore](./.gitignore)
|
||||||
|
|
||||||
|
To .gitignore add the 'release' folder:
|
||||||
|
|
||||||
|
```text
|
||||||
|
release
|
||||||
|
```
|
||||||
|
|
||||||
|
#### [./gulpfile.js](./gulpfile.js)
|
||||||
|
|
||||||
|
Before 'build.initialize(require('gulp'));' add the serve task:
|
||||||
|
|
||||||
|
```js
|
||||||
|
var getTasks = build.rig.getTasks;
|
||||||
|
build.rig.getTasks = function () {
|
||||||
|
var result = getTasks.call(build.rig);
|
||||||
|
|
||||||
|
result.set('serve', result.get('serve-deprecated'));
|
||||||
|
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
#### [./tslint.json](./tslint.json)
|
||||||
|
|
||||||
|
Update tslint.json extends property:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### [./package.json](./package.json)
|
||||||
|
|
||||||
|
Remove package.json property:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"engines": "undefined"
|
||||||
|
}
|
||||||
|
```
|
||||||
Loading…
Reference in New Issue