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

Added nvmrc, updated sample.json

This commit is contained in:
Hugo Bernier 2023-10-25 18:01:06 -04:00
parent ea554c8843
commit 48db6ab923
4 changed files with 7 additions and 656 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
samples/react-functional-component-with-data-fetch/.nvmrc Normal file
View File

@ -0,0 +1 @@
v16.13.0

8
samples/react-functional-component-with-data-fetch/README.md
View File

@ -32,7 +32,7 @@ This web part demonstrates building a React functional component that uses data
## Contributors
* Bill Ayers
* [Bill Ayers (SPDoctor)](https://github.com/SPDoctor)
* [Don Kirkham](https://github.com/DonKirkham)
## Version history
@ -72,7 +72,7 @@ This is an extension of the approach used in the [React-Functional-Component](ht
## TeamsTrackerWebPart.ts Initialise PnPJS
The onInit method of BaseClientSideWebPart is overriden to initialise the PnPJS graph object. The web part is then able to get access to the Microsoft Graph using the PnPJS library. The User.Read.All permission is implicitly provided.
The onInit method of BaseClientSideWebPart is overridden to initialise the PnPJS graph object. The web part is then able to get access to the Microsoft Graph using the PnPJS library. The User.Read.All permission is implicitly provided.
## Functional Component with state
@ -82,7 +82,7 @@ The TeamsTracker.tsx React Component is a React functional component. This simpl
const initialTeamsList: MSGraph.Group[] = null;
const [teamsList, setTeamsList] = React.useState(initialTeamsList);
```
React.useState takes an initial value for the state variable, which we initialise to *null* but by means of a strongly typed const. This means that we will get type checking and intellisense for the state object. React.useState returns an array of two objects. The first is a variable containing the state value, and the second is a setter function for the value, and the convention is to use the array destructuring operator to unpack them into local constants. Whenever we need to use the current value of the teamsList we just use it as a normal variable, and wherever we need to change the value we call *setTeamsList(newValue)*.
React.useState takes an initial value for the state variable, which we initialize to *null* but by means of a strongly typed const. This means that we will get type checking and intellisense for the state object. React.useState returns an array of two objects. The first is a variable containing the state value, and the second is a setter function for the value, and the convention is to use the array destructuring operator to unpack them into local constants. Whenever we need to use the current value of the teamsList we just use it as a normal variable, and wherever we need to change the value we call *setTeamsList(newValue)*.
## Fetching Data
@ -117,7 +117,7 @@ The `Teams.tsx` component is only responsible for rendering an individual team,
```
export default function Team({ channelID, displayName, showChannels }) {
```
Again we use state to manage a list of channels and initialise it to an empty array. But in this case we have a property *showChannels* that is the flag set by the user in the property pane. If this is enabled we retrieve the channels from the Microsoft Graph using the PnPJS library, and if not we set it to an empty array. We need to explicitly reset the array in case the user enables and then subsequently disables the *showChannels* option. Finally, notice that we now need to include a dependency for the second argument of *useEffect* so that the framework knows to call the method again if the value of showChannels changes.
Again we use state to manage a list of channels and initialize it to an empty array. But in this case we have a property *showChannels* that is the flag set by the user in the property pane. If this is enabled we retrieve the channels from the Microsoft Graph using the PnPJS library, and if not we set it to an empty array. We need to explicitly reset the array in case the user enables and then subsequently disables the *showChannels* option. Finally, notice that we now need to include a dependency for the second argument of *useEffect* so that the framework knows to call the method again if the value of showChannels changes.
```
const [channelsList, setChannelsList] = React.useState([]);

5
samples/react-functional-component-with-data-fetch/assets/sample.json
View File

@ -9,7 +9,7 @@
"This web part demonstrates building a React functional component that uses data from a remote service, in this case the Microsoft Graph, using the recently introduced React Hooks feature. The example web part renders a list of the user\u0027s Teams and, optionally, the channels in each Team."
],
"creationDateTime": "2019-06-14",
"updateDateTime": "2022-02-21",
"updateDateTime": "2023-10-10",
"products": [
"SharePoint"
],
@ -20,7 +20,7 @@
},
{
"key": "SPFX-VERSION",
"value": "1.14.0"
"value": "1.18.0"
}
],
"thumbnails": [
@ -34,7 +34,6 @@
"authors": [
{
"gitHubAccount": "SPDoctor",
"company": "Flow Simulation Ltd.",
"pictureUrl": "https://avatars.githubusercontent.com/u/10207194?s=460\u0026v=4",
"name": "Bill Ayers",
"twitter": "SPDoctor"

649
samples/react-functional-component-with-data-fetch/upgrade.md
View File

@ -1,649 +0,0 @@
# Upgrade project react-functional-component-with-data-fetch to v1.18.0
Date: 10/15/2023
## Findings
Following is the list of steps required to upgrade your project to SharePoint Framework version 1.18.0. [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.18.0
```
File: [./package.json:13:5](./package.json)
### FN001002 @microsoft/sp-lodash-subset | Required
Upgrade SharePoint Framework dependency package @microsoft/sp-lodash-subset
Execute the following command:
```sh
npm i -SE @microsoft/sp-lodash-subset@1.18.0
```
File: [./package.json:14:5](./package.json)
### FN001003 @microsoft/sp-office-ui-fabric-core | Required
Upgrade SharePoint Framework dependency package @microsoft/sp-office-ui-fabric-core
Execute the following command:
```sh
npm i -SE @microsoft/sp-office-ui-fabric-core@1.18.0
```
File: [./package.json:15: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.18.0
```
File: [./package.json:17: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.18.0
```
File: [./package.json:16:5](./package.json)
### FN001022 office-ui-fabric-react | Required
Remove SharePoint Framework dependency package office-ui-fabric-react
Execute the following command:
```sh
npm un -S office-ui-fabric-react
```
File: [./package.json:22:5](./package.json)
### FN001035 @fluentui/react | Required
Install SharePoint Framework dependency package @fluentui/react
Execute the following command:
```sh
npm i -SE @fluentui/react@8.106.4
```
File: [./package.json:12:3](./package.json)
### FN001034 @microsoft/sp-adaptive-card-extension-base | Optional
Install SharePoint Framework dependency package @microsoft/sp-adaptive-card-extension-base
Execute the following command:
```sh
npm i -SE @microsoft/sp-adaptive-card-extension-base@1.18.0
```
File: [./package.json:12:3](./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.18.0
```
File: [./package.json:32:5](./package.json)
### FN002022 @microsoft/eslint-plugin-spfx | Required
Install SharePoint Framework dev dependency package @microsoft/eslint-plugin-spfx
Execute the following command:
```sh
npm i -DE @microsoft/eslint-plugin-spfx@1.18.0
```
File: [./package.json:29:3](./package.json)
### FN002023 @microsoft/eslint-config-spfx | Required
Install SharePoint Framework dev dependency package @microsoft/eslint-config-spfx
Execute the following command:
```sh
npm i -DE @microsoft/eslint-config-spfx@1.18.0
```
File: [./package.json:29:3](./package.json)
### FN002026 typescript | Required
Upgrade SharePoint Framework dev dependency package typescript
Execute the following command:
```sh
npm i -DE typescript@4.7.4
```
File: [./package.json:40:5](./package.json)
### FN002028 @microsoft/rush-stack-compiler-4.7 | Required
Install SharePoint Framework dev dependency package @microsoft/rush-stack-compiler-4.7
Execute the following command:
```sh
npm i -DE @microsoft/rush-stack-compiler-4.7@0.1.0
```
File: [./package.json:29:3](./package.json)
### FN010001 .yo-rc.json version | Recommended
Update version in .yo-rc.json
```json
{
"@microsoft/generator-sharepoint": {
"version": "1.18.0"
}
}
```
File: [./.yo-rc.json:3:5](./.yo-rc.json)
### FN010010 .yo-rc.json @microsoft/teams-js SDK version | Recommended
Update @microsoft/teams-js SDK version in .yo-rc.json
```json
{
"@microsoft/generator-sharepoint": {
"sdkVersions": {
"@microsoft/teams-js": "2.12.0"
}
}
}
```
File: [./.yo-rc.json:2:3](./.yo-rc.json)
### FN012017 tsconfig.json extends property | Required
Update tsconfig.json extends property
```json
{
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json"
}
```
File: [./tsconfig.json:2:3](./tsconfig.json)
### FN021003 package.json engines.node | Required
Update package.json engines.node property
```json
{
"engines": {
"node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
}
}
```
File: [./package.json:5:14](./package.json)
### FN002024 eslint | Required
Install SharePoint Framework dev dependency package eslint
Execute the following command:
```sh
npm i -DE eslint@8.7.0
```
File: [./package.json:29:3](./package.json)
### FN007002 serve.json initialPage | Required
Update serve.json initialPage URL
```json
{
"initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
}
```
File: [./config/serve.json:5:3](./config/serve.json)
### FN015009 config/sass.json | Required
Add file config/sass.json
Execute the following command:
```sh
cat > "config/sass.json" << EOF
{
"$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
}
EOF
```
File: [config/sass.json](config/sass.json)
### FN001008 react | Required
Upgrade SharePoint Framework dependency package react
Execute the following command:
```sh
npm i -SE react@17.0.1
```
File: [./package.json:23:5](./package.json)
### FN001009 react-dom | Required
Upgrade SharePoint Framework dependency package react-dom
Execute the following command:
```sh
npm i -SE react-dom@17.0.1
```
File: [./package.json:24:5](./package.json)
### FN002015 @types/react | Required
Upgrade SharePoint Framework dev dependency package @types/react
Execute the following command:
```sh
npm i -DE @types/react@17.0.45
```
File: [./package.json:35:5](./package.json)
### FN002016 @types/react-dom | Required
Upgrade SharePoint Framework dev dependency package @types/react-dom
Execute the following command:
```sh
npm i -DE @types/react-dom@17.0.17
```
File: [./package.json:36:5](./package.json)
### FN010008 .yo-rc.json nodeVersion | Recommended
Update nodeVersion in .yo-rc.json
```json
{
"@microsoft/generator-sharepoint": {
"nodeVersion": "18.18.0"
}
}
```
File: [./.yo-rc.json:2:38](./.yo-rc.json)
### FN010009 .yo-rc.json @microsoft/microsoft-graph-client SDK version | Recommended
Update @microsoft/microsoft-graph-client SDK version in .yo-rc.json
```json
{
"@microsoft/generator-sharepoint": {
"sdkVersions": {
"@microsoft/microsoft-graph-client": "3.0.2"
}
}
}
```
File: [./.yo-rc.json:2:3](./.yo-rc.json)
### FN022001 Scss file import | Required
Remove scss file import
```scss
@import '~office-ui-fabric-react/dist/sass/References.scss'
```
File: [src/webparts/teamsTracker/components/TeamsTracker.module.scss](src/webparts/teamsTracker/components/TeamsTracker.module.scss)
### FN022002 Scss file import | Optional
Add scss file import
```scss
@import '~@fluentui/react/dist/sass/References.scss'
```
File: [src/webparts/teamsTracker/components/TeamsTracker.module.scss](src/webparts/teamsTracker/components/TeamsTracker.module.scss)
### FN012020 tsconfig.json noImplicitAny | Required
Add noImplicitAny in tsconfig.json
```json
{
"compilerOptions": {
"noImplicitAny": true
}
}
```
File: [./tsconfig.json:3:22](./tsconfig.json)
### FN007001 serve.json schema | Required
Update serve.json schema URL
```json
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json"
}
```
File: [./config/serve.json:2:3](./config/serve.json)
### FN001033 tslib | Required
Install SharePoint Framework dependency package tslib
Execute the following command:
```sh
npm i -SE tslib@2.3.1
```
File: [./package.json:12:3](./package.json)
### FN002007 ajv | Required
Upgrade SharePoint Framework dev dependency package ajv
Execute the following command:
```sh
npm i -DE ajv@6.12.5
```
File: [./package.json:38:5](./package.json)
### FN002009 @microsoft/sp-tslint-rules | Required
Remove SharePoint Framework dev dependency package @microsoft/sp-tslint-rules
Execute the following command:
```sh
npm un -D @microsoft/sp-tslint-rules
```
File: [./package.json:33:5](./package.json)
### FN002013 @types/webpack-env | Required
Upgrade SharePoint Framework dev dependency package @types/webpack-env
Execute the following command:
```sh
npm i -DE @types/webpack-env@1.15.2
```
File: [./package.json:37:5](./package.json)
### FN002021 @rushstack/eslint-config | Required
Install SharePoint Framework dev dependency package @rushstack/eslint-config
Execute the following command:
```sh
npm i -DE @rushstack/eslint-config@2.5.1
```
File: [./package.json:29:3](./package.json)
### FN002025 eslint-plugin-react-hooks | Required
Install SharePoint Framework dev dependency package eslint-plugin-react-hooks
Execute the following command:
```sh
npm i -DE eslint-plugin-react-hooks@4.3.0
```
File: [./package.json:29:3](./package.json)
### FN015003 tslint.json | Required
Remove file tslint.json
Execute the following command:
```sh
rm "tslint.json"
```
File: [tslint.json](tslint.json)
### FN015008 .eslintrc.js | Required
Add file .eslintrc.js
Execute the following command:
```sh
cat > ".eslintrc.js" << EOF
require('@rushstack/eslint-config/patch/modern-module-resolution');
export default {
extends: ['@microsoft/eslint-config-spfx/lib/profiles/react'],
parserOptions: { tsconfigRootDir: __dirname }
};
EOF
```
File: [.eslintrc.js](.eslintrc.js)
### FN023002 .gitignore '.heft' folder | Required
To .gitignore add the '.heft' folder
File: [./.gitignore](./.gitignore)
### 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 office-ui-fabric-react
npm un -D @microsoft/sp-tslint-rules
npm i -SE @microsoft/sp-core-library@1.18.0 @microsoft/sp-lodash-subset@1.18.0 @microsoft/sp-office-ui-fabric-core@1.18.0 @microsoft/sp-webpart-base@1.18.0 @microsoft/sp-property-pane@1.18.0 @fluentui/react@8.106.4 @microsoft/sp-adaptive-card-extension-base@1.18.0 react@17.0.1 react-dom@17.0.1 tslib@2.3.1
npm i -DE @microsoft/sp-module-interfaces@1.18.0 @microsoft/eslint-plugin-spfx@1.18.0 @microsoft/eslint-config-spfx@1.18.0 typescript@4.7.4 @microsoft/rush-stack-compiler-4.7@0.1.0 eslint@8.7.0 @types/react@17.0.45 @types/react-dom@17.0.17 ajv@6.12.5 @types/webpack-env@1.15.2 @rushstack/eslint-config@2.5.1 eslint-plugin-react-hooks@4.3.0
npm dedupe
cat > "config/sass.json" << EOF
{
"$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
}
EOF
rm "tslint.json"
cat > ".eslintrc.js" << EOF
require('@rushstack/eslint-config/patch/modern-module-resolution');
export default {
extends: ['@microsoft/eslint-config-spfx/lib/profiles/react'],
parserOptions: { tsconfigRootDir: __dirname }
};
EOF
```
### Modify files
#### [./.yo-rc.json](./.yo-rc.json)
Update version in .yo-rc.json:
```json
{
"@microsoft/generator-sharepoint": {
"version": "1.18.0"
}
}
```
Update @microsoft/teams-js SDK version in .yo-rc.json:
```json
{
"@microsoft/generator-sharepoint": {
"sdkVersions": {
"@microsoft/teams-js": "2.12.0"
}
}
}
```
Update nodeVersion in .yo-rc.json:
```json
{
"@microsoft/generator-sharepoint": {
"nodeVersion": "18.18.0"
}
}
```
Update @microsoft/microsoft-graph-client SDK version in .yo-rc.json:
```json
{
"@microsoft/generator-sharepoint": {
"sdkVersions": {
"@microsoft/microsoft-graph-client": "3.0.2"
}
}
}
```
#### [./tsconfig.json](./tsconfig.json)
Update tsconfig.json extends property:
```json
{
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json"
}
```
Add noImplicitAny in tsconfig.json:
```json
{
"compilerOptions": {
"noImplicitAny": true
}
}
```
#### [./package.json](./package.json)
Update package.json engines.node property:
```json
{
"engines": {
"node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
}
}
```
#### [./config/serve.json](./config/serve.json)
Update serve.json initialPage URL:
```json
{
"initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
}
```
Update serve.json schema URL:
```json
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json"
}
```
#### [src/webparts/teamsTracker/components/TeamsTracker.module.scss](src/webparts/teamsTracker/components/TeamsTracker.module.scss)
Remove scss file import:
```scss
@import '~office-ui-fabric-react/dist/sass/References.scss'
```
Add scss file import:
```scss
@import '~@fluentui/react/dist/sass/References.scss'
```
#### [./.gitignore](./.gitignore)
To .gitignore add the '.heft' folder:
```text
.heft
```