Add pnpjs

samples/react-zod/package.json

@@ -10,30 +10,31 @@
     "serve": "gulp bundle --custom-serve --max_old_space_size=4096 && fast-serve"
   },
   "dependencies": {
-    "tslib": "2.3.1",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "office-ui-fabric-react": "7.185.7",
     "@microsoft/sp-core-library": "1.15.2",
+    "@microsoft/sp-lodash-subset": "1.15.2",
+    "@microsoft/sp-office-ui-fabric-core": "1.15.2",
     "@microsoft/sp-property-pane": "1.15.2",
     "@microsoft/sp-webpart-base": "1.15.2",
-    "@microsoft/sp-lodash-subset": "1.15.2",
+    "@pnp/sp": "^3.7.0",
-    "@microsoft/sp-office-ui-fabric-core": "1.15.2"
+    "office-ui-fabric-react": "7.185.7",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "tslib": "2.3.1"
   },
   "devDependencies": {
-    "@microsoft/rush-stack-compiler-4.5": "0.2.2",
-    "@rushstack/eslint-config": "2.5.1",
-    "@microsoft/eslint-plugin-spfx": "1.15.2",
     "@microsoft/eslint-config-spfx": "1.15.2",
+    "@microsoft/eslint-plugin-spfx": "1.15.2",
+    "@microsoft/rush-stack-compiler-4.5": "0.2.2",
     "@microsoft/sp-build-web": "1.15.2",
-    "@types/webpack-env": "~1.15.2",
+    "@microsoft/sp-module-interfaces": "1.15.2",
-    "ajv": "^6.12.5",
+    "@rushstack/eslint-config": "2.5.1",
-    "gulp": "4.0.2",
-    "typescript": "4.5.5",
     "@types/react": "16.9.51",
     "@types/react-dom": "16.9.8",
+    "@types/webpack-env": "~1.15.2",
+    "ajv": "^6.12.5",
     "eslint-plugin-react-hooks": "4.3.0",
-    "@microsoft/sp-module-interfaces": "1.15.2",
+    "gulp": "4.0.2",
-    "spfx-fast-serve-helpers": "~1.15.0"
+    "spfx-fast-serve-helpers": "~1.15.0",
+    "typescript": "4.5.5"
   }
 }

samples/react-zod/src/webparts/reactZod/ReactZodWebPart.ts

@@ -1,24 +1,26 @@
-import * as React from 'react';
+import * as React from "react";
-import * as ReactDom from 'react-dom';
+import * as ReactDom from "react-dom";
-import { Version } from '@microsoft/sp-core-library';
+import * as strings from "ReactZodWebPartStrings";
+
+import { Version } from "@microsoft/sp-core-library";
 import {
   IPropertyPaneConfiguration,
-  PropertyPaneTextField
+  PropertyPaneTextField,
-} from '@microsoft/sp-property-pane';
+} from "@microsoft/sp-property-pane";
-import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
+import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
+import { SPFI, spfi, SPFx } from "@pnp/sp";
 
-import * as strings from 'ReactZodWebPartStrings';
+import { IReactZodProps } from "./components/IReactZodProps";
-import ReactZod from './components/ReactZod';
+import ReactZod from "./components/ReactZod";
-import { IReactZodProps } from './components/IReactZodProps';
 
 export interface IReactZodWebPartProps {
   description: string;
 }
 
 export default class ReactZodWebPart extends BaseClientSideWebPart<IReactZodWebPartProps> {
-
   private _isDarkTheme: boolean = false;
-  private _environmentMessage: string = '';
+  private _environmentMessage: string = "";
+  private _spfi: SPFI;
 
   public render(): void {
     const element: React.ReactElement<IReactZodProps> = React.createElement(
@@ -28,25 +30,31 @@ export default class ReactZodWebPart extends BaseClientSideWebPart<IReactZodWebP
         isDarkTheme: this._isDarkTheme,
         environmentMessage: this._environmentMessage,
         hasTeamsContext: !!this.context.sdks.microsoftTeams,
-        userDisplayName: this.context.pageContext.user.displayName
+        userDisplayName: this.context.pageContext.user.displayName,
       }
     );
 
     ReactDom.render(element, this.domElement);
   }
 
-  protected onInit(): Promise<void> {
+  protected async onInit(): Promise<void> {
     this._environmentMessage = this._getEnvironmentMessage();
 
-    return super.onInit();
+    await super.onInit();
+    this._spfi = spfi().using(SPFx(this.context));
   }
 
   private _getEnvironmentMessage(): string {
-    if (!!this.context.sdks.microsoftTeams) { // running in Teams
+    if (!!this.context.sdks.microsoftTeams) {
-      return this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment;
+      // running in Teams
+      return this.context.isServedFromLocalhost
+        ? strings.AppLocalEnvironmentTeams
+        : strings.AppTeamsTabEnvironment;
     }
 
-    return this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentSharePoint : strings.AppSharePointEnvironment;
+    return this.context.isServedFromLocalhost
+      ? strings.AppLocalEnvironmentSharePoint
+      : strings.AppSharePointEnvironment;
   }
 
   protected onDispose(): void {
@@ -54,7 +62,7 @@ export default class ReactZodWebPart extends BaseClientSideWebPart<IReactZodWebP
   }
 
   protected get dataVersion(): Version {
-    return Version.parse('1.0');
+    return Version.parse("1.0");
   }
 
   protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
@@ -62,20 +70,20 @@ export default class ReactZodWebPart extends BaseClientSideWebPart<IReactZodWebP
       pages: [
         {
           header: {
-            description: strings.PropertyPaneDescription
+            description: strings.PropertyPaneDescription,
           },
           groups: [
             {
               groupName: strings.BasicGroupName,
               groupFields: [
-                PropertyPaneTextField('description', {
+                PropertyPaneTextField("description", {
-                  label: strings.DescriptionFieldLabel
+                  label: strings.DescriptionFieldLabel,
-                })
+                }),
-              ]
+              ],
-            }
+            },
-          ]
+          ],
-        }
+        },
-      ]
+      ],
     };
   }
 }