Merge pull request #3047 from juliemturner/version-4

Documentation and sample updates

docs/getting-started.md

@@ -31,9 +31,17 @@ Next we can import and use the functionality within our application. Below is a
 
 ## Getting Started with SharePoint Framework
 
+### Quick References (v3 and v4 are the same for getting started)
+
+- [Code Sample: SharePoint Framework 1.19.0 with PnPjs v4](https://github.com/pnp/pnpjs/tree/version-4/samples/spfx-react-components/README.md)
+- [Code Sample: SharePoint Framework 1.15.2 with PnPjs v3 utilizing ReactJS Hooks](https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnp-js-hooks)
+- [Getting started with PnPjs 3.0: 5-part series](https://youtube.com/playlist?list=PLR9nK3mnD-OWvmtj9TKE6tM7ZrUosV_vB)
+
+### More Details
+
 The @pnp/sp and @pnp/graph libraries are designed to work seamlessly within SharePoint Framework projects with a small amount of upfront configuration. If you are running in 2016 or 2019 on-premises you will need to use [version 2](./v2/SPFx-on-premises/index.html) of the library. If you are targeting SharePoint online you may need to take the additional steps outlined below based on the version of the SharePoint Framework you are targeting.
 
-We've created two Getting Started samples. The first uses the more traditional React Component classes and can be found in the [spfx-react-components](../samples/spfx-react-components/README.md) sample project, utilizing SPFx 1.18.2 and PnPjs V4. 
+We've created two Getting Started samples. The first uses the more traditional React Component classes and can be found in the [spfx-react-components](https://github.com/pnp/pnpjs/tree/version-4/samples/spfx-react-components/README.md) sample project, utilizing SPFx 1.18.2 and PnPjs V4.
 
 Although original created for V3, this 5 part video series is similar enough to v4 to give good direction for getting started with PnPjs:
 

docs/sp/search.md

@@ -43,6 +43,25 @@ console.log(results3.RowCount);
 console.log(results3.PrimarySearchResults);
 ```
 
+## People Search Example
+
+```TypeScript
+import { spfi } from "@pnp/sp";
+import "@pnp/sp/search";
+import { SearchQueryInit, SearchResults, SearchQueryBuilder } from "@pnp/sp/search";
+
+const sp = spfi(...);
+
+// Where source id is the built in Search Source for People and is the same for every tenant.
+const q: SearchQueryInit = SearchQueryBuilder(`Joe`)
+        .sourceId("B09A7990-05EA-4AF9-81EF-EDFAB16C4E31")
+        .rowLimit(500)
+        .rowsPerPage(500)
+        .selectProperties("SipAddress", "PreferredName", "AccountName", "Department", "JobTitle")
+        .trimDuplicates;
+const people: SearchResults = await this._sp.search(q);
+```
+
 ## Search Result Caching
 
 Starting with v3 you can use any of the caching behaviors with search and the results will be cached. Please see here [for more details on caching options](https://pnp.github.io/pnpjs/queryable/behaviors/#caching).

samples/spfx-react-components/.yo-rc.json

@@ -2,7 +2,7 @@
   "@microsoft/generator-sharepoint": {
     "plusBeta": false,
     "isCreatingSolution": true,
-    "version": "1.18.2",
+    "version": "1.19.0",
     "libraryName": "pnpjs",
     "libraryId": "44a7bfd5-a98a-4efc-9536-6a18af1b8477",
     "environment": "spo",

samples/spfx-react-components/package.json

@@ -14,12 +14,12 @@
   "dependencies": {
     "react": "17.0.1",
     "react-dom": "17.0.1",
-    "@microsoft/sp-core-library": "1.18.2",
-    "@microsoft/sp-property-pane": "1.18.2",
-    "@microsoft/sp-webpart-base": "1.18.2",
-    "@microsoft/sp-lodash-subset": "1.18.2",
-    "@microsoft/sp-office-ui-fabric-core": "1.18.2",
-    "@microsoft/sp-adaptive-card-extension-base": "1.18.2",
+    "@microsoft/sp-core-library": "1.19.0",
+    "@microsoft/sp-property-pane": "1.19.0",
+    "@microsoft/sp-webpart-base": "1.19.0",
+    "@microsoft/sp-lodash-subset": "1.19.0",
+    "@microsoft/sp-office-ui-fabric-core": "1.19.0",
+    "@microsoft/sp-adaptive-card-extension-base": "1.19.0",
     "tslib": "2.3.1",
     "@pnp/sp": "^4.0.1",
     "@pnp/graph": "^4.0.1",
@@ -29,14 +29,14 @@
   "devDependencies": {
     "@types/react": "17.0.45",
     "@types/react-dom": "17.0.17",
-    "@microsoft/sp-build-web": "1.18.2",
-    "@microsoft/sp-module-interfaces": "1.18.2",
+    "@microsoft/sp-build-web": "1.20.1",
+    "@microsoft/sp-module-interfaces": "1.20.1",
     "@microsoft/rush-stack-compiler-4.7": "0.1.0",
     "gulp": "~4.0.2",
     "ajv": "6.12.5",
     "@types/webpack-env": "1.18.2",
-    "@microsoft/eslint-plugin-spfx": "1.18.2",
-    "@microsoft/eslint-config-spfx": "1.18.2",
+    "@microsoft/eslint-plugin-spfx": "1.20.1",
+    "@microsoft/eslint-config-spfx": "1.20.1",
     "typescript": "4.7.4",
     "@rushstack/eslint-config": "2.5.1",
     "eslint": "8.7.0",

samples/spfx-react-components/src/webparts/pnPjs/components/PnPjs.tsx

@@ -53,7 +53,8 @@ export default class pnpjs extends React.PureComponent<IpnpjsProps, IpnpjsState>
   }
 
   public componentDidMount(): void {
-    this._readAllFilesSize();
+    /*eslint no-void: ["error", { "allowAsStatement": true }]*/
+    void this._readAllFilesSize();
   }
 
   private _readAllFilesSize = async (): Promise<void> => {
@@ -94,7 +95,8 @@ export default class pnpjs extends React.PureComponent<IpnpjsProps, IpnpjsState>
           .items
           .getById(items[i].Id)
           .update({ Title: `${items[i].Name}-Updated` })
-          .then(r => res.push(r));
+          .then(r => res.push(r))
+          .catch(e => console.log(`Error: ${e}`));
       }
 
       await execute();
@@ -171,7 +173,7 @@ export default class pnpjs extends React.PureComponent<IpnpjsProps, IpnpjsState>
       );
     } catch (err) {
       Logger.write(`${this.LOG_SOURCE} (render) - ${JSON.stringify(err)}`, LogLevel.Error);
-      return null;
+      return <></>;
     }
   }
 }

samples/spfx-react-components/src/webparts/pnPjs/pnpjsConfig.ts

@@ -2,31 +2,30 @@
 import { WebPartContext } from "@microsoft/sp-webpart-base";
 
 // import pnp and pnp logging system
-import { spfi, SPFI, SPFx as spSPFx } from "@pnp/sp";
+import { ISPFXContext, spfi, SPFI, SPFx as spSPFx } from "@pnp/sp";
 import { graphfi, GraphFI, SPFx as graphSPFx } from "@pnp/graph";
-import { LogLevel, PnPLogging } from "@pnp/logging";
 import "@pnp/sp/webs";
 import "@pnp/sp/lists";
 import "@pnp/sp/items";
 import "@pnp/sp/batching";
 
-var _sp: SPFI = null;
-var _graph: GraphFI = null;
+var _sp: SPFI;
+var _graph: GraphFI;
 
 export const getSP = (context?: WebPartContext): SPFI => {
-  if (_sp === null) {
+  if (_sp === undefined || _sp === null) {
     //You must add the @pnp/logging package to include the PnPLogging behavior it is no longer a peer dependency
     // The LogLevel set's at what level a message will be written to the console
-    _sp = spfi().using(spSPFx(context)).using(PnPLogging(LogLevel.Warning));
+    _sp = spfi().using(spSPFx(context as ISPFXContext));
   }
   return _sp;
 };
 
 export const getGraph = (context?: WebPartContext): GraphFI => {
-  if (_graph === null) {
+  if (_graph === undefined || _graph === null) {
     //You must add the @pnp/logging package to include the PnPLogging behavior it is no longer a peer dependency
     // The LogLevel set's at what level a message will be written to the console
-    _graph = graphfi().using(graphSPFx(context)).using(PnPLogging(LogLevel.Warning));
+    _graph = graphfi().using(graphSPFx(context as ISPFXContext));
   }
   return _graph;
 };

samples/spfx-react-components/tsconfig.json

@@ -1,36 +1,36 @@
 {
-  "extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json",
-  "compilerOptions": {
-    "target": "es5",
-    "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "jsx": "react",
-    "declaration": true,
-    "sourceMap": true,
-    "experimentalDecorators": true,
-    "skipLibCheck": true,
-    "outDir": "lib",
-    "inlineSources": false,
-    "strictNullChecks": false,
-    "noUnusedLocals": false,
-    "noImplicitAny": true,
-    "typeRoots": [
-      "./node_modules/@types",
-      "./node_modules/@microsoft"
-    ],
-    "types": [
-      "webpack-env"
-    ],
-    "lib": [
-      "es5",
-      "dom",
-      "es2015.collection",
-      "es2015.promise"
+    "extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json",
+    "compilerOptions": {
+      "target": "es5",
+      "forceConsistentCasingInFileNames": true,
+      "module": "esnext",
+      "moduleResolution": "node",
+      "jsx": "react",
+      "declaration": true,
+      "sourceMap": true,
+      "experimentalDecorators": true,
+      "skipLibCheck": true,
+      "outDir": "lib",
+      "inlineSources": false,
+      "noImplicitAny": true,
+
+      "typeRoots": [
+        "./node_modules/@types",
+        "./node_modules/@microsoft"
+      ],
+      "types": [
+        "webpack-env"
+      ],
+      "lib": [
+        "es5",
+        "dom",
+        "es2015.collection",
+        "es2015.promise"
+      ]
+    },
+    "include": [
+      "src/**/*.ts",
+      "src/**/*.tsx"
     ]
-  },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx"
-  ]
-}
+  }
+