Upgrading to @pnp/sp v2

package.json

@@ -5,32 +5,29 @@
   "main": "./lib/index.js",
   "typings": "./lib/index.d.ts",
   "dependencies": {
-    "@pnp/common": "1.3.6",
-    "@pnp/logging": "1.3.6",
-    "@pnp/nodejs": "1.3.6",
-    "@pnp/odata": "1.3.6",
-    "@pnp/sp": "1.3.6",
+    "@pnp/common": "2.14.0",
+    "@pnp/logging": "3.8.0",
+    "@pnp/nodejs": "2.14.0",
+    "@pnp/odata": "2.14.0",
+    "@pnp/sp": "3.8.0",
     "object.omit": "3.0.0",
     "spfx-jsom": "0.6.4",
     "xml-js": "1.6.11"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^12.0.1",
     "@types/es6-promise": "0.0.33",
     "@types/node": "^8.0.28",
     "@types/sharepoint": "^2016.1.2",
     "@types/webpack-env": "1.13.1",
     "@typescript-eslint/eslint-plugin": "4.6.1",
     "@typescript-eslint/parser": "4.6.1",
-    "commitlint": "^12.0.1",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "7.2.0",
     "eslint-plugin-prettier": "3.3.1",
     "eslint-plugin-react": "7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-tsdoc": "0.2.11",
     "eslint-plugin-unicorn": "^28.0.2",
-    "husky": "^5.2.0",
     "merge": "1.2.0",
     "merge2": "^1.0.2",
     "prettier": "2.2.1",
@@ -40,14 +37,8 @@
     "build": "tsc",
     "watch": "tsc --watch",
     "lint": "eslint --ext .ts ./src --color --fix && prettier '**/*.ts*' --write --loglevel silent",
-    "prepare": "husky install",
     "postversion": "tsc && npm publish"
   },
-  "commitlint": {
-    "extends": [
-      "@commitlint/config-conventional"
-    ]
-  },
   "eslintConfig": {
     "env": {
       "browser": true,

src/handlers/clientsidepages.ts

@@ -1,12 +1,11 @@
-import {
-  ClientSidePage, ClientSidePageComponent, ClientSideWebpart, Web
-} from '@pnp/sp'
 import { IProvisioningConfig } from '../provisioningconfig'
 import { ProvisioningContext } from '../provisioningcontext'
-import { IClientSidePage } from '../schema'
+import { IClientSideControl, IClientSidePage } from '../schema'
 import { replaceUrlTokens } from '../util'
 import { TokenHelper } from '../util/tokenhelper'
 import { HandlerBase } from './handlerbase'
+import { CreateClientsidePage, IClientsidePageComponent, ClientsideWebpart } from '@pnp/sp/clientside-pages'
+import { IWeb } from '@pnp/sp/webs/types'
 
 /**
  * Describes the Composed Look Object Handler
@@ -29,18 +28,18 @@ export class ClientSidePages extends HandlerBase {
    * @param context - Provisioning context
    */
   public async ProvisionObjects(
-    web: Web,
+    web: IWeb,
     clientSidePages: IClientSidePage[],
     context?: ProvisioningContext
   ): Promise<void> {
     this.tokenHelper = new TokenHelper(context, this.config)
     super.scope_started()
     try {
-      const partDefinitions = await web.getClientSideWebParts()
+      const clientsideWebParts = await web.getClientsideWebParts()
       await clientSidePages.reduce(
         (chain: Promise<any>, clientSidePage) =>
           chain.then(() =>
-            this.processClientSidePage(web, clientSidePage, partDefinitions)
+            this.processClientSidePage(web, clientSidePage, clientsideWebParts)
           ),
         Promise.resolve()
       )
@@ -55,18 +54,18 @@ export class ClientSidePages extends HandlerBase {
    *
    * @param web - The web
    * @param clientSidePage - Cient side page
-   * @param partDefinitions - Cient side web parts
+   * @param clientsideWebParts - Cient side web parts
    */
   private async processClientSidePage(
-    web: Web,
+    web: IWeb,
     clientSidePage: IClientSidePage,
-    partDefinitions: ClientSidePageComponent[]
+    clientsideWebParts: IClientsidePageComponent[]
   ) {
     super.log_info(
       'processClientSidePage',
       `Processing client side page ${clientSidePage.Name}`
     )
-    const page = await ClientSidePage.create(
+    const page = await CreateClientsidePage(
       web,
       clientSidePage.Name,
       clientSidePage.Title,
@@ -78,61 +77,60 @@ export class ClientSidePages extends HandlerBase {
       for (const col of s.Columns) {
         const column = section.addColumn(col.Factor)
         for (const control of col.Controls) {
-          const partDef = partDefinitions.find((c) =>
-            c.Id.toLowerCase().includes(control.Id.toLowerCase())
-          )
-          if (!partDef) {
-            super.log_warn(
-              'processClientSidePage',
-              `Client side web part with definition id ${control.Id} not found.`
-            )
-            continue
-          }
           try {
-            let properties = this.tokenHelper.replaceTokens(
-              JSON.stringify(control.Properties)
-            )
-            properties = replaceUrlTokens(properties, this.config)
-            const part = ClientSideWebpart.fromComponentDef(
-              partDef
-            ).setProperties<any>(JSON.parse(properties))
-            if (control.ServerProcessedContent) {
-              const serverProcessedContent = this.tokenHelper.replaceTokens(
-                JSON.stringify(control.ServerProcessedContent)
-              )
-              super.log_info(
-                'processClientSidePage',
-                `Adding serverProcessedContent ${serverProcessedContent} to client side page ${clientSidePage.Name}`
-              )
-              part.data.webPartData.serverProcessedContent = JSON.parse(
-                serverProcessedContent
-              )
-            }
-            super.log_info(
-              'processClientSidePage',
-              `Adding ${partDef.Name} to client side page ${clientSidePage.Name}`
-            )
-            column.addControl(part)
-          } catch {
-            super.log_info(
-              'processClientSidePage',
-              `Failed adding part ${partDef.Name} to client side page ${clientSidePage.Name}`
-            )
-          }
+            const columnControl = this.getColumnControl(control, clientsideWebParts)
+            if (columnControl !== null) column.addControl(columnControl)
+          } catch {}
         }
       }
     }
+    if (clientSidePage.VerticalSection) {
+      const a = page.addVerticalSection()
+      for (const control of clientSidePage.VerticalSection) {
+        const columnControl = this.getColumnControl(control, clientsideWebParts)
+        a.addControl(columnControl)
+      }
+    }
     super.log_info(
       'processClientSidePage',
       `Saving client side page ${clientSidePage.Name}`
     )
+    page.commentsDisabled = clientSidePage.CommentsDisabled
     await page.save()
-    if (clientSidePage.CommentsDisabled) {
-      super.log_info(
+  }
+
+  /**
+   * Provision a client side page
+   *
+   * @param control - Control
+   * @param clientsideWebParts - Cient side web parts
+   */
+  private getColumnControl(control: IClientSideControl, clientsideWebParts: IClientsidePageComponent[]) {
+    const partDefinition = clientsideWebParts.find((c) =>
+      c.Id.toLowerCase().includes(control.Id.toLowerCase())
+    )
+    if (!partDefinition) {
+      super.log_warn(
         'processClientSidePage',
-        `Disabling comments for client side page ${clientSidePage.Name}`
+        `Client side web part with definition id ${control.Id} not found.`
+      )
+      return null
+    }
+    let properties = this.tokenHelper.replaceTokens(
+      JSON.stringify(control.Properties)
+    )
+    properties = replaceUrlTokens(properties, this.config)
+    const part = ClientsideWebpart.fromComponentDef(
+      partDefinition
+    ).setProperties<any>(JSON.parse(properties))
+    if (control.ServerProcessedContent) {
+      const serverProcessedContent = this.tokenHelper.replaceTokens(
+        JSON.stringify(control.ServerProcessedContent)
+      )
+      part.data.webPartData.serverProcessedContent = JSON.parse(
+        serverProcessedContent
       )
-      await page.disableComments()
     }
+    return part
   }
 }

src/handlers/composedlook.ts

@@ -1,8 +1,8 @@
+import { IWeb } from '@pnp/sp/presets/all'
+import { IProvisioningConfig } from '../provisioningconfig'
 import { IComposedLook } from '../schema'
+import { makeUrlRelative, replaceUrlTokens } from '../util'
 import { HandlerBase } from './handlerbase'
-import { Web } from '@pnp/sp'
-import { replaceUrlTokens, makeUrlRelative } from '../util'
-import { IProvisioningConfig } from '../provisioningconfig'
 
 /**
  * Describes the Composed Look Object Handler
@@ -19,10 +19,10 @@ export class ComposedLook extends HandlerBase {
    * Provisioning Composed Look
    *
    * @param web - The web
-   * @param object - The Composed look to provision
+   * @param composedLook - The Composed look to provision
    */
   public async ProvisionObjects(
-    web: Web,
+    web: IWeb,
     composedLook: IComposedLook
   ): Promise<void> {
     super.scope_started()

src/handlers/contenttypes.ts

@@ -1,9 +1,10 @@
 import initSpfxJsom, { ExecuteJsomQuery, JsomContext } from 'spfx-jsom'
 import { HandlerBase } from './handlerbase'
-import { Web, ContentTypeAddResult } from '@pnp/sp'
 import { ProvisioningContext } from '../provisioningcontext'
 import { IProvisioningConfig } from '../provisioningconfig'
 import { IContentType } from '../schema'
+import { IWeb } from '@pnp/sp/webs'
+import { IContentTypeAddResult } from '@pnp/sp/content-types'
 
 /**
  * Describes the Content Types Object Handler
@@ -27,7 +28,7 @@ export class ContentTypes extends HandlerBase {
    * @param context - Provisioning context
    */
   public async ProvisionObjects(
-    web: Web,
+    web: IWeb,
     contentTypes: IContentType[],
     context: ProvisioningContext
   ): Promise<void> {
@@ -40,13 +41,12 @@ export class ContentTypes extends HandlerBase {
       this.context.contentTypes = (
         await web.contentTypes
           .select('Id', 'Name', 'FieldLinks')
-          .expand('FieldLinks')
-          .get<any[]>()
+          .expand('FieldLinks')()
       ).reduce((object, contentType) => {
         object[contentType.Name] = {
           ID: contentType.Id.StringValue,
           Name: contentType.Name,
-          FieldRefs: contentType.FieldLinks.map((fieldLink: any) => ({
+          FieldRefs: contentType['FieldLinks'].map((fieldLink: any) => ({
             ID: fieldLink.Id,
             Name: fieldLink.Name,
             Required: fieldLink.Required,
@@ -83,14 +83,14 @@ export class ContentTypes extends HandlerBase {
    * @param contentType - Content type
    */
   private async processContentType(
-    web: Web,
+    web: IWeb,
     contentType: IContentType
   ): Promise<void> {
     try {
       let contentTypeId = this.context.contentTypes[contentType.Name].ID
       if (!contentTypeId) {
         const contentTypeAddResult = await this.addContentType(web, contentType)
-        contentTypeId = contentTypeAddResult.data.Id
+        contentTypeId = contentTypeAddResult.data.Id.StringValue
       }
       super.log_info(
         'processContentType',
@@ -122,9 +122,9 @@ export class ContentTypes extends HandlerBase {
    * @param contentType - Content type
    */
   private async addContentType(
-    web: Web,
+    web: IWeb,
     contentType: IContentType
-  ): Promise<ContentTypeAddResult> {
+  ): Promise<IContentTypeAddResult> {
     try {
       super.log_info(
         'addContentType',

src/handlers/customactions.ts

@@ -1,7 +1,7 @@
 import { HandlerBase } from './handlerbase'
 import { ICustomAction } from '../schema'
-import { Web } from '@pnp/sp'
 import { IProvisioningConfig } from '../provisioningconfig'
+import { IWeb } from '@pnp/sp/webs'
 
 /**
  * Describes the Custom Actions Object Handler
@@ -20,17 +20,16 @@ export class CustomActions extends HandlerBase {
    * Provisioning Custom Actions
    *
    * @param web - The web
-   * @param customactions - The Custom Actions to provision
+   * @param customActions - The Custom Actions to provision
    */
   public async ProvisionObjects(
-    web: Web,
+    web: IWeb,
     customActions: ICustomAction[]
   ): Promise<void> {
     super.scope_started()
     try {
       const existingActions = await web.userCustomActions
-        .select('Title')
-        .get<{ Title: string }[]>()
+        .select('Title')()
 
       const batch = web.createBatch()
 

src/handlers/exports.ts

@@ -1,4 +1,3 @@
-import { TypedHash } from '@pnp/common'
 import { HandlerBase } from './handlerbase'
 import { ComposedLook } from './composedlook'
 import { CustomActions } from './customactions'
@@ -16,7 +15,7 @@ import { ContentTypes } from './contenttypes'
 
 export const DefaultHandlerMap = (
   config: IProvisioningConfig
-): TypedHash<HandlerBase> => ({
+): Record<string, HandlerBase> => ({
   ClientSidePages: new ClientSidePages(config),
   ComposedLook: new ComposedLook(config),
   ContentTypes: new ContentTypes(config),
@@ -31,7 +30,7 @@ export const DefaultHandlerMap = (
   Hooks: new Hooks(config)
 })
 
-export const DefaultHandlerSort: TypedHash<number> = {
+export const DefaultHandlerSort: Record<string, number> = {
   ClientSidePages: 7,
   ComposedLook: 6,
   ContentTypes: 1,

src/handlers/features.ts

@@ -1,7 +1,7 @@
 import { HandlerBase } from './handlerbase'
 import { IFeature } from '../schema'
-import { Web } from '@pnp/sp'
 import { IProvisioningConfig } from '../provisioningconfig'
+import { IWeb } from '@pnp/sp/webs'
 
 /**
  * Describes the Features Object Handler
@@ -22,7 +22,7 @@ export class Features extends HandlerBase {
    * @param web - The web
    * @param features - The features to provision
    */
-  public async ProvisionObjects(web: Web, features: IFeature[]): Promise<void> {
+  public async ProvisionObjects(web: IWeb, features: IFeature[]): Promise<void> {
     super.scope_started()
     try {
       await features.reduce((chain, feature) => {