Merge pull request #2942 from juliemturner/main

Update react-pnp-js-sample

samples/react-pnp-js-sample/.eslintrc.js

@@ -0,0 +1,5 @@
+require('@rushstack/eslint-config/patch/modern-module-resolution');
+module.exports = {
+  extends: ['@microsoft/eslint-config-spfx/lib/profiles/react'],
+  parserOptions: { tsconfigRootDir: __dirname }
+};

samples/react-pnp-js-sample/.gitignore

@@ -13,6 +13,7 @@ release
 solution
 temp
 *.sppkg
+.heft
 
 # Coverage directory used by tools like istanbul
 coverage

samples/react-pnp-js-sample/.yo-rc.json

@@ -3,7 +3,7 @@
     "plusBeta": true,
     "isCreatingSolution": true,
     "environment": "spo",
-    "version": "1.14.0",
+    "version": "1.15.2",
     "libraryName": "spfx-pnp-js-example",
     "libraryId": "d20ceaf6-094b-4086-b7a0-85761bc8be23",
     "packageManager": "npm",

samples/react-pnp-js-sample/README.md

@@ -48,6 +48,7 @@ react-spfx-pnp-js-sample | Julie Turner ([@jfj1997](https://twitter.com/jfj1997)
 
 Version|Date|Comments
 -------|----|--------
+1.1|Aug 29, 2022|Bug fix & dependency updates
 1.0|Jan 13, 2022|Initial release
 
 ## Minimal Path to Awesome

samples/react-pnp-js-sample/config/package-solution.json

@@ -3,7 +3,7 @@
   "solution": {
     "name": "spfx-pnp-js-example-client-side-solution",
     "id": "d20ceaf6-094b-4086-b7a0-85761bc8be23",
-    "version": "1.0.0.0",
+    "version": "1.1.0.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true,
     "isDomainIsolated": false,
@@ -37,4 +37,4 @@
   "paths": {
     "zippedPackage": "solution/spfx-pnp-js-example.sppkg"
   }
-}
+}

samples/react-pnp-js-sample/gulpfile.js

@@ -12,7 +12,5 @@ build.rig.getTasks = function () {
 
   return result;
 };
-// disable tslint
-build.tslintCmd.enabled = false;
 
 build.initialize(require('gulp'));

samples/react-pnp-js-sample/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spfx-pnp-js-example",
-  "version": "0.0.1",
+  "version": "1.1.0",
   "private": true,
   "main": "lib/index.js",
   "scripts": {
@@ -9,26 +9,30 @@
     "test": "gulp test"
   },
   "dependencies": {
-    "@microsoft/sp-core-library": "1.14.0",
-    "@microsoft/sp-lodash-subset": "1.14.0",
-    "@microsoft/sp-office-ui-fabric-core": "1.14.0",
-    "@microsoft/sp-property-pane": "1.14.0",
-    "@microsoft/sp-webpart-base": "1.14.0",
-    "@pnp/logging": "^3.0.2",
-    "@pnp/sp": "^3.0.2",
-    "office-ui-fabric-react": "7.174.1",
+    "@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",
+    "@pnp/logging": "^3.6.0",
+    "@pnp/sp": "^3.6.0",
     "react": "16.13.1",
-    "react-dom": "16.13.1"
+    "react-dom": "16.13.1",
+    "tslib": "2.3.1"
   },
   "devDependencies": {
-    "@microsoft/rush-stack-compiler-4.2": "^0.1.1",
-    "@microsoft/sp-build-web": "1.14.0",
-    "@microsoft/sp-module-interfaces": "1.14.0",
-    "@microsoft/sp-tslint-rules": "1.14.0",
+    "@microsoft/rush-stack-compiler-4.5": "^0.2.2",
+    "@microsoft/sp-build-web": "1.15.2",
+    "@microsoft/sp-module-interfaces": "1.15.2",
     "@types/react": "16.9.51",
     "@types/react-dom": "16.9.8",
-    "@types/webpack-env": "1.13.1",
-    "ajv": "~5.2.2",
-    "gulp": "~4.0.2"
+    "@types/webpack-env": "1.15.2",
+    "ajv": "6.12.5",
+    "gulp": "~4.0.2",
+    "@rushstack/eslint-config": "2.5.1",
+    "@microsoft/eslint-plugin-spfx": "1.15.2",
+    "@microsoft/eslint-config-spfx": "1.15.2",
+    "eslint": "8.7.0",
+    "eslint-plugin-react-hooks": "4.3.0"
   }
-}
+}

samples/react-pnp-js-sample/src/webparts/pnPjsExample/PnPjsExampleWebPart.ts

@@ -20,8 +20,8 @@ export interface IPnPjsExampleWebPartProps {
 
 export default class PnPjsExampleWebPart extends BaseClientSideWebPart<IPnPjsExampleWebPartProps> {
 
-  private _isDarkTheme: boolean = false;
-  private _environmentMessage: string = '';
+  private _isDarkTheme = false;
+  private _environmentMessage = '';
 
   protected async onInit(): Promise<void> {
     this._environmentMessage = this._getEnvironmentMessage();
@@ -49,7 +49,7 @@ export default class PnPjsExampleWebPart extends BaseClientSideWebPart<IPnPjsExa
   }
 
   private _getEnvironmentMessage(): string {
-    if (!!this.context.sdks.microsoftTeams) { // running in Teams
+    if (!this.context.sdks.microsoftTeams) { // running in Teams
       return this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment;
     }
 

samples/react-pnp-js-sample/src/webparts/pnPjsExample/components/PnPjsExample.tsx

@@ -70,7 +70,7 @@ export default class PnPjsExample extends React.Component<IPnPjsExampleProps, II
               );
             })}
             <tr>
-              <td></td>
+              <td>&nbps;</td>
               <td><strong>Total:</strong></td>
               <td><strong>{(totalDocs / 1024).toFixed(2)}</strong></td>
             </tr>
@@ -128,7 +128,7 @@ export default class PnPjsExample extends React.Component<IPnPjsExampleProps, II
       //Clone items from the state
       const items = JSON.parse(JSON.stringify(this.state.items));
 
-      let res: IItemUpdateResult[] = [];
+      const res: IItemUpdateResult[] = [];
 
       for (let i = 0; i < items.length; i++) {
         // you need to use .then syntax here as otherwise the application will stop and await the result

samples/react-pnp-js-sample/src/webparts/pnPjsExample/pnpjsConfig.ts

@@ -8,10 +8,11 @@ import "@pnp/sp/lists";
 import "@pnp/sp/items";
 import "@pnp/sp/batching";
 
+// eslint-disable-next-line no-var
 var _sp: SPFI = null;
 
 export const getSP = (context?: WebPartContext): SPFI => {
-  if (_sp === null && context != null) {
+  if (context != 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(SPFx(context)).using(PnPLogging(LogLevel.Warning));

samples/react-pnp-js-sample/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "./node_modules/@microsoft/rush-stack-compiler-4.2/includes/tsconfig-web.json",
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-4.5/includes/tsconfig-web.json",
   "compilerOptions": {
     "target": "es5",
     "forceConsistentCasingInFileNames": true,
@@ -32,4 +32,4 @@
     "src/**/*.ts",
     "src/**/*.tsx"
   ]
-}
+}

samples/react-pnp-js-sample/tslint.json

@@ -1,29 +0,0 @@
-{
-  "extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json",
-  "rules": {
-    "class-name": false,
-    "export-name": false,
-    "forin": false,
-    "label-position": false,
-    "member-access": true,
-    "no-arg": false,
-    "no-console": false,
-    "no-construct": false,
-    "no-duplicate-variable": true,
-    "no-eval": false,
-    "no-function-expression": true,
-    "no-internal-module": true,
-    "no-shadowed-variable": true,
-    "no-switch-case-fall-through": true,
-    "no-unnecessary-semicolons": true,
-    "no-unused-expression": true,
-    "no-with-statement": true,
-    "semicolon": true,
-    "trailing-comma": false,
-    "typedef": false,
-    "typedef-whitespace": false,
-    "use-named-parameter": true,
-    "variable-name": false,
-    "whitespace": false
-  }
-}