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
|
||||
solution
|
||||
temp
|
||||
release
|
||||
*.sppkg
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"version": "1.10.0",
|
||||
"version": "1.14.0-beta.4",
|
||||
"isDomainIsolated": false,
|
||||
"isCreatingSolution": true,
|
||||
"packageManager": "npm",
|
||||
|
|
|
|||
|
|
@ -17,78 +17,63 @@ extensions:
|
|||
|
||||
## 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")
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
* [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|Author(s)
|
||||
--------|---------
|
||||
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|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.1|Mar 6, 2018|Update to 1.4.1
|
||||
1.0|May 1, 2017|Initial release
|
||||
|
||||
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
- clone this repo
|
||||
- `$ npm i`
|
||||
- `$ gulp trust-dev-cert`
|
||||
- `$ 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
|
||||
1. clone this repo
|
||||
1. `$ npm i`
|
||||
1. Update online workbench url in the `initialPage` property of the `config/serve.json` file.
|
||||
1. `$ gulp serve`
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
|
||||
|
||||
## 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)
|
||||
- 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)
|
||||
- [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)
|
||||
* [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)
|
||||
* 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)
|
||||
* [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
|
||||
|
||||
**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" />
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
"workingDir": "./temp/deploy/",
|
||||
"workingDir": "./release/assets/",
|
||||
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||
"container": "react-async-await-sp-pnp-js",
|
||||
"accessKey": "<!-- ACCESS KEY -->"
|
||||
|
|
|
|||
|
|
@ -3,9 +3,35 @@
|
|||
"solution": {
|
||||
"name": "react-async-await-sp-pnp-js-client-side-solution",
|
||||
"id": "c3bd0bfa-1bee-4af0-ad3d-a72d02b4dc7c",
|
||||
"version": "1.0.0.0",
|
||||
"version": "2.0.0.0",
|
||||
"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": {
|
||||
"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",
|
||||
"port": 4321,
|
||||
"initialPage": "https://localhost:5432/workbench",
|
||||
"https": true,
|
||||
"api": {
|
||||
"port": 5432,
|
||||
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
|
||||
}
|
||||
"initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx",
|
||||
"https": true
|
||||
}
|
||||
|
|
@ -3,5 +3,16 @@
|
|||
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(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",
|
||||
"version": "1.1.10",
|
||||
"version": "2.0.0",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.13"
|
||||
},
|
||||
"main": "lib/index.js",
|
||||
"dependencies": {
|
||||
"@microsoft/rush-stack-compiler-3.2": "^0.6.2",
|
||||
"@microsoft/sp-core-library": "1.10.0",
|
||||
"@microsoft/sp-property-pane": "1.10.0",
|
||||
"@microsoft/sp-webpart-base": "1.10.0",
|
||||
"@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",
|
||||
"@microsoft/sp-core-library": "1.14.0-beta.4",
|
||||
"@microsoft/sp-property-pane": "1.14.0-beta.4",
|
||||
"@microsoft/sp-webpart-base": "1.14.0-beta.4",
|
||||
"@pnp/sp": "^3.0.0-v3nightly.20220013",
|
||||
"natives": "^1.1.6",
|
||||
"office-ui-fabric-react": "6.189.2",
|
||||
"react": "16.8.5",
|
||||
"react-dom": "16.8.5"
|
||||
"office-ui-fabric-react": "7.174.1",
|
||||
"react": "16.13.1",
|
||||
"react-dom": "16.13.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/rush-stack-compiler-3.3": "0.3.5",
|
||||
"@microsoft/sp-build-web": "1.10.0",
|
||||
"@microsoft/sp-module-interfaces": "1.10.0",
|
||||
"@microsoft/sp-tslint-rules": "1.10.0",
|
||||
"@microsoft/sp-webpart-workbench": "1.10.0",
|
||||
"@types/chai": "3.4.34",
|
||||
"@types/mocha": "2.2.38",
|
||||
"@microsoft/rush-stack-compiler-4.2": "^0.1.1",
|
||||
"@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/es6-promise": "0.0.33",
|
||||
"@types/react": "16.9.51",
|
||||
"@types/react-dom": "16.9.8",
|
||||
"@types/webpack-env": "1.13.1",
|
||||
"ajv": "5.2.2",
|
||||
"gulp": "~3.9.1",
|
||||
"gulp": "4.0.2",
|
||||
"tslint-microsoft-contrib": "5.0.0"
|
||||
},
|
||||
"resolutions": {
|
||||
|
|
|
|||
|
|
@ -7,25 +7,25 @@ import {
|
|||
PropertyPaneTextField
|
||||
} from '@microsoft/sp-property-pane';
|
||||
|
||||
import { sp } from '@pnp/sp';
|
||||
|
||||
import * as strings from 'asyncAwaitPnPJsStrings';
|
||||
import AsyncAwaitPnPJs from './components/AsyncAwaitPnPJs';
|
||||
import { IAsyncAwaitPnPJsProps } from './components/IAsyncAwaitPnPJsProps';
|
||||
import { IAsyncAwaitPnPJsWebPartProps } from './IAsyncAwaitPnPJsWebPartProps';
|
||||
import { IAsyncAwaitPnPJsProps } from './components/AsyncAwaitPnPJs';
|
||||
|
||||
// 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> {
|
||||
private sp: SPFI;
|
||||
|
||||
// // https://github.com/SharePoint/PnP-JS-Core/wiki/Using-sp-pnp-js-in-SharePoint-Framework
|
||||
public onInit(): Promise<void> {
|
||||
return super.onInit().then(_ => {
|
||||
// establish SPFx context
|
||||
sp.setup({
|
||||
spfxContext: this.context
|
||||
});
|
||||
});
|
||||
public async onInit(): Promise<void> {
|
||||
await super.onInit();
|
||||
|
||||
this.sp = spfi().using(SPFx(this.context));
|
||||
}
|
||||
|
||||
public render(): void {
|
||||
|
|
@ -33,7 +33,7 @@ export default class AsyncAwaitPnPJsWebPart extends BaseClientSideWebPart<IAsync
|
|||
AsyncAwaitPnPJs,
|
||||
{
|
||||
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 pnp and pnp logging system
|
||||
import { sp } from "@pnp/sp";
|
||||
import { SPFI } from "@pnp/sp";
|
||||
import "@pnp/sp/webs";
|
||||
import "@pnp/sp/lists";
|
||||
import "@pnp/sp/items";
|
||||
import { Logger, LogLevel, LogEntry, FunctionListener } from "@pnp/logging";
|
||||
|
||||
// import SPFx Logging system
|
||||
import { Log } from "@microsoft/sp-core-library";
|
||||
export interface IAsyncAwaitPnPJsProps {
|
||||
description: string;
|
||||
sp: SPFI;
|
||||
}
|
||||
|
||||
// import React props and state
|
||||
import { IAsyncAwaitPnPJsProps } from "./IAsyncAwaitPnPJsProps";
|
||||
import { IAsyncAwaitPnPJsState } from "./IAsyncAwaitPnPJsState";
|
||||
export interface IAsyncAwaitPnPJsState {
|
||||
items: IFile[];
|
||||
errors: string[];
|
||||
}
|
||||
|
||||
export default class AsyncAwaitPnPJs extends React.Component<IAsyncAwaitPnPJsProps, IAsyncAwaitPnPJsState> {
|
||||
|
||||
|
|
@ -27,14 +29,6 @@ export default class AsyncAwaitPnPJs extends React.Component<IAsyncAwaitPnPJsPro
|
|||
items: [],
|
||||
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 {
|
||||
|
|
@ -62,7 +56,7 @@ export default class AsyncAwaitPnPJs extends React.Component<IAsyncAwaitPnPJsPro
|
|||
<div className={styles.row}>
|
||||
<div className={styles.left}>Name</div>
|
||||
<div className={styles.right}>Size (KB)</div>
|
||||
<div className={styles.clear + " " + styles.header}></div>
|
||||
<div className={`${styles.clear} ${styles.header}`}></div>
|
||||
</div>
|
||||
{this.state.items.map((item, idx) => {
|
||||
return (
|
||||
|
|
@ -74,10 +68,10 @@ export default class AsyncAwaitPnPJs extends React.Component<IAsyncAwaitPnPJsPro
|
|||
);
|
||||
})}
|
||||
<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.right}>{(totalDocs / 1024).toFixed(2)}</div>
|
||||
<div className={styles.clear + " " + styles.header}></div>
|
||||
<div className={`${styles.clear} ${styles.header}`}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -86,56 +80,7 @@ export default class AsyncAwaitPnPJs extends React.Component<IAsyncAwaitPnPJsPro
|
|||
);
|
||||
}
|
||||
|
||||
private _enableLogging(): 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> {
|
||||
private _readAllFilesSize = async (libraryName: string): Promise<void> => {
|
||||
try {
|
||||
// do PnP JS query, some notes:
|
||||
// - .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
|
||||
// - await converts Promise<IResponseItem[]> into IResponse[]
|
||||
|
||||
const response: IResponseItem[] = await sp.web.lists
|
||||
const response: IResponseItem[] = await this.props.sp.web.lists
|
||||
.getByTitle(libraryName)
|
||||
.items
|
||||
.select("Title", "FileLeafRef", "File/Length")
|
||||
.expand("File/Length")
|
||||
.usingCaching()
|
||||
.get();
|
||||
.expand("File/Length")();
|
||||
|
||||
// use map to convert IResponseItem[] into our internal object IFile[]
|
||||
const items: IFile[] = response.map((item: IResponseItem) => {
|
||||
|
|
@ -161,20 +104,18 @@ export default class AsyncAwaitPnPJs extends React.Component<IAsyncAwaitPnPJsPro
|
|||
});
|
||||
|
||||
// set our Component´s State
|
||||
this.setState({ ...this.state, items });
|
||||
this.setState({ items });
|
||||
|
||||
// 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)
|
||||
.items
|
||||
.select("Title", "FileLeafRef", "File/Length")
|
||||
.expand("File/Length")
|
||||
.usingCaching()
|
||||
.get();
|
||||
.expand("File/Length")();
|
||||
|
||||
} catch (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": {
|
||||
"target": "es5",
|
||||
"module": "esnext",
|
||||
|
|
@ -18,20 +18,17 @@
|
|||
"./node_modules/@microsoft"
|
||||
],
|
||||
"types": [
|
||||
"es6-promise",
|
||||
"webpack-env"
|
||||
],
|
||||
"lib": [
|
||||
"es5",
|
||||
"dom",
|
||||
"es2015.collection"
|
||||
"es2015.collection",
|
||||
"es2015.promise"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"lib"
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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