Merge pull request #1120 from joelfmrodrigues/update-spfx-1.10

update js-workbench-customizer to SPFx 1.10

samples/js-workbench-customizer/.yo-rc.json

@@ -3,9 +3,9 @@
     "packageManager": "pnpm",
     "isCreatingSolution": true,
     "environment": "spo",
-    "version": "1.7.1",
+    "version": "1.10.0",
     "libraryName": "workbench-customizer",
     "libraryId": "5d6f4a5a-9d2b-4a93-a283-16b8f5ea75d6",
     "componentType": "webpart"
   }
-}
+}

samples/js-workbench-customizer/README.md

@@ -4,13 +4,29 @@
 
 This sample shows how the Workbench page can be customized to display in a way that better mimics a modern SharePoint page.
 This is done using CSS overrides on some of the page styles, which does not cause any negative impact on your site as the web part is not intended to be consumed by final users, only developers.
-The web part also has some properties that control which customizations are applied to the workbench page (all enabled by default).
+The web part also has some properties that control which customizations are applied to the workbench page (all enabled by default). There is also an option to switch the page to Preview after the page is loaded, which gives a UI more close to what end users will see on a published page - this is very useful when doing UI work.
 
 ![Demo](./assets/Preview.png)
 
+## Usage
+
+### Deploy to tenant
+
+The easiest way to use the solution is to package it up and deploy to the App Catalog. You can then add the web part to the bottom of the O365 Workbench page when developing your custom solutions.
+
+### Run locally
+
+Alternatively, you can add the output files for the web part to a custom SPFx project and the web part will also be served and available both from the local or hosted Workbench page:
+
+* Generate the output files for the solution by executing `gulp bundle --ship`
+* Copy all files from js-workbench-customizer\dist to the dist folder of your custom solution
+* Copy the workbenchCustomizer folder from js-workbench-customizer\lib\webparts to the corresponding webparts folder of your custom solution
+
+Note: This approach will not "pollute" your solution with additional resources or dependencies as the SPFx toolchain will ignore those additional files by default when you package your solution. You can also clean everything by running `gulp clean` as both the lib and dist folders are deleted and recreated again. Git will also ignore dist and lib folders by default, so the files will never be added to source control.
+
 ## Used SharePoint Framework Version
 
-![drop](https://img.shields.io/badge/drop-1.7.1-green.svg)
+![drop](https://img.shields.io/badge/drop-1.10.0-green.svg)
 
 ## Applies to
 
@@ -32,6 +48,7 @@ workbench-customizer|Joel Rodrigues
 Version|Date|Comments
 -------|----|--------
 1.0|January 24, 2019|Initial release
+1.1|February 05, 2020|Update to SPFx 1.10.0
 
 ## Disclaimer
 

samples/js-workbench-customizer/package.json

@@ -2,6 +2,7 @@
   "name": "workbench-customizer",
   "version": "0.0.1",
   "private": true,
+  "main": "lib/index.js",
   "engines": {
     "node": ">=0.10.0"
   },
@@ -11,22 +12,24 @@
     "test": "gulp test"
   },
   "dependencies": {
-    "@microsoft/sp-core-library": "1.7.1",
-    "@microsoft/sp-lodash-subset": "1.7.1",
-    "@microsoft/sp-office-ui-fabric-core": "1.7.1",
-    "@microsoft/sp-webpart-base": "1.7.1",
+    "@microsoft/sp-core-library": "1.10.0",
+    "@microsoft/sp-lodash-subset": "1.10.0",
+    "@microsoft/sp-office-ui-fabric-core": "1.10.0",
+    "@microsoft/sp-property-pane": "1.10.0",
+    "@microsoft/sp-webpart-base": "1.10.0",
     "@types/es6-promise": "0.0.33",
     "@types/webpack-env": "1.13.1",
     "npm": "^6.7.0"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "1.7.1",
-    "@microsoft/sp-tslint-rules": "1.7.1",
-    "@microsoft/sp-module-interfaces": "1.7.1",
-    "@microsoft/sp-webpart-workbench": "1.7.1",
-    "gulp": "~3.9.1",
+    "@microsoft/rush-stack-compiler-3.3": "0.3.5",
+    "@microsoft/sp-build-web": "1.10.0",
+    "@microsoft/sp-module-interfaces": "1.10.0",
+    "@microsoft/sp-tslint-rules": "1.10.0",
+    "@microsoft/sp-webpart-workbench": "1.10.0",
     "@types/chai": "3.4.34",
     "@types/mocha": "2.2.38",
-    "ajv": "~5.2.2"
+    "ajv": "~5.2.2",
+    "gulp": "~3.9.1"
   }
 }

samples/js-workbench-customizer/src/webparts/workbenchCustomizer/WorkbenchCustomizerWebPart.manifest.json

@@ -7,6 +7,7 @@
   // The "*" signifies that the version should be taken from the package.json
   "version": "*",
   "manifestVersion": 2,
+  "supportedHosts": ["SharePointWebPart"],
 
   // If true, the component can only be installed on sites where Custom Script is allowed.
   // Components that allow authors to embed arbitrary script code should set this to true.

samples/js-workbench-customizer/src/webparts/workbenchCustomizer/WorkbenchCustomizerWebPart.ts

@@ -1,9 +1,6 @@
 import { Version } from '@microsoft/sp-core-library';
-import {
-  BaseClientSideWebPart,
-  IPropertyPaneConfiguration,
-  PropertyPaneToggle
-} from '@microsoft/sp-webpart-base';
+import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
+import { IPropertyPaneConfiguration, PropertyPaneToggle } from "@microsoft/sp-property-pane";
 import styles from './WorkbenchCustomizerWebPart.module.scss';
 
 import * as strings from 'WorkbenchCustomizerWebPartStrings';

samples/js-workbench-customizer/tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
   "compilerOptions": {
     "target": "es5",
     "forceConsistentCasingInFileNames": true,
@@ -10,6 +11,9 @@
     "experimentalDecorators": true,
     "skipLibCheck": true,
     "outDir": "lib",
+    "inlineSources": false,
+    "strictNullChecks": false,
+    "noUnusedLocals": false,
     "typeRoots": [
       "./node_modules/@types",
       "./node_modules/@microsoft"

samples/js-workbench-customizer/upgrade-report.md

@@ -0,0 +1,338 @@
+# Upgrade project C:\Users\joelf\dev\GitHub\sp-dev-fx-webparts\samples\js-workbench-customizer to v1.10.0
+
+Date: 1/21/2020
+
+## Findings
+
+Following is the list of steps required to upgrade your project to SharePoint Framework version 1.10.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
+pnpm i -E @microsoft/sp-core-library@1.10.0
+```
+
+File: [./package.json](./package.json)
+
+### FN001002 @microsoft/sp-lodash-subset | Required
+
+Upgrade SharePoint Framework dependency package @microsoft/sp-lodash-subset
+
+Execute the following command:
+
+```sh
+pnpm i -E @microsoft/sp-lodash-subset@1.10.0
+```
+
+File: [./package.json](./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
+pnpm i -E @microsoft/sp-office-ui-fabric-core@1.10.0
+```
+
+File: [./package.json](./package.json)
+
+### FN001004 @microsoft/sp-webpart-base | Required
+
+Upgrade SharePoint Framework dependency package @microsoft/sp-webpart-base
+
+Execute the following command:
+
+```sh
+pnpm i -E @microsoft/sp-webpart-base@1.10.0
+```
+
+File: [./package.json](./package.json)
+
+### FN001021 @microsoft/sp-property-pane | Required
+
+Install SharePoint Framework dependency package @microsoft/sp-property-pane
+
+Execute the following command:
+
+```sh
+pnpm i -E @microsoft/sp-property-pane@1.10.0
+```
+
+File: [./package.json](./package.json)
+
+### FN002001 @microsoft/sp-build-web | Required
+
+Upgrade SharePoint Framework dev dependency package @microsoft/sp-build-web
+
+Execute the following command:
+
+```sh
+pnpm i -DE @microsoft/sp-build-web@1.10.0
+```
+
+File: [./package.json](./package.json)
+
+### FN002002 @microsoft/sp-module-interfaces | Required
+
+Upgrade SharePoint Framework dev dependency package @microsoft/sp-module-interfaces
+
+Execute the following command:
+
+```sh
+pnpm i -DE @microsoft/sp-module-interfaces@1.10.0
+```
+
+File: [./package.json](./package.json)
+
+### FN002003 @microsoft/sp-webpart-workbench | Required
+
+Upgrade SharePoint Framework dev dependency package @microsoft/sp-webpart-workbench
+
+Execute the following command:
+
+```sh
+pnpm i -DE @microsoft/sp-webpart-workbench@1.10.0
+```
+
+File: [./package.json](./package.json)
+
+### FN002009 @microsoft/sp-tslint-rules | Required
+
+Upgrade SharePoint Framework dev dependency package @microsoft/sp-tslint-rules
+
+Execute the following command:
+
+```sh
+pnpm i -DE @microsoft/sp-tslint-rules@1.10.0
+```
+
+File: [./package.json](./package.json)
+
+### FN002012 @microsoft/rush-stack-compiler-3.3 | Required
+
+Install SharePoint Framework dev dependency package @microsoft/rush-stack-compiler-3.3
+
+Execute the following command:
+
+```sh
+pnpm i -DE @microsoft/rush-stack-compiler-3.3@0.3.5
+```
+
+File: [./package.json](./package.json)
+
+### FN010001 .yo-rc.json version | Recommended
+
+Update version in .yo-rc.json
+
+In file [./.yo-rc.json](./.yo-rc.json) update the code as follows:
+
+```json
+{
+  "@microsoft/generator-sharepoint": {
+    "version": "1.10.0"
+  }
+}
+```
+
+File: [./.yo-rc.json](./.yo-rc.json)
+
+### FN012017 tsconfig.json extends property | Required
+
+Update tsconfig.json extends property
+
+In file [./tsconfig.json](./tsconfig.json) update the code as follows:
+
+```json
+{
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json"
+}
+```
+
+File: [./tsconfig.json](./tsconfig.json)
+
+### FN016004 Property pane property import change to @microsoft/sp-property-pane | Required
+
+Refactor the code to import property pane property from the @microsoft/sp-property-pane npm package instead of the @microsoft/sp-webpart-base package
+
+In file [src\webparts\workbenchCustomizer\WorkbenchCustomizerWebPart.ts](src\webparts\workbenchCustomizer\WorkbenchCustomizerWebPart.ts) update the code as follows:
+
+```ts
+import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
+import { IPropertyPaneConfiguration, PropertyPaneToggle } from "@microsoft/sp-property-pane";
+```
+
+File: [src\webparts\workbenchCustomizer\WorkbenchCustomizerWebPart.ts:2:1](src\webparts\workbenchCustomizer\WorkbenchCustomizerWebPart.ts)
+
+### FN021001 main | Required
+
+Add package.json property
+
+In file [./package.json](./package.json) update the code as follows:
+
+```json
+{
+  "main": "lib/index.js"
+}
+```
+
+File: [./package.json](./package.json)
+
+### FN011011 Web part manifest supportedHosts | Required
+
+Update the supportedHosts property in the manifest
+
+In file [src\webparts\workbenchCustomizer\WorkbenchCustomizerWebPart.manifest.json](src\webparts\workbenchCustomizer\WorkbenchCustomizerWebPart.manifest.json) update the code as follows:
+
+```json
+{
+  "supportedHosts": ["SharePointWebPart"]
+}
+```
+
+File: [src\webparts\workbenchCustomizer\WorkbenchCustomizerWebPart.manifest.json](src\webparts\workbenchCustomizer\WorkbenchCustomizerWebPart.manifest.json)
+
+### FN012014 tsconfig.json compiler options inlineSources | Required
+
+Update tsconfig.json inlineSources value
+
+In file [./tsconfig.json](./tsconfig.json) update the code as follows:
+
+```json
+{
+  "compilerOptions": {
+    "inlineSources": false
+  }
+}
+```
+
+File: [./tsconfig.json](./tsconfig.json)
+
+### FN012015 tsconfig.json compiler options strictNullChecks | Required
+
+Update tsconfig.json strictNullChecks value
+
+In file [./tsconfig.json](./tsconfig.json) update the code as follows:
+
+```json
+{
+  "compilerOptions": {
+    "strictNullChecks": false
+  }
+}
+```
+
+File: [./tsconfig.json](./tsconfig.json)
+
+### FN012016 tsconfig.json compiler options noUnusedLocals | Required
+
+Update tsconfig.json noUnusedLocals value
+
+In file [./tsconfig.json](./tsconfig.json) update the code as follows:
+
+```json
+{
+  "compilerOptions": {
+    "noUnusedLocals": false
+  }
+}
+```
+
+File: [./tsconfig.json](./tsconfig.json)
+
+## Summary
+
+### Execute script
+
+```sh
+pnpm i -E @microsoft/sp-core-library@1.10.0 @microsoft/sp-lodash-subset@1.10.0 @microsoft/sp-office-ui-fabric-core@1.10.0 @microsoft/sp-webpart-base@1.10.0 @microsoft/sp-property-pane@1.10.0
+pnpm i -DE @microsoft/sp-build-web@1.10.0 @microsoft/sp-module-interfaces@1.10.0 @microsoft/sp-webpart-workbench@1.10.0 @microsoft/sp-tslint-rules@1.10.0 @microsoft/rush-stack-compiler-3.3@0.3.5
+```
+
+### Modify files
+
+#### [./.yo-rc.json](./.yo-rc.json)
+
+Update version in .yo-rc.json:
+
+```json
+{
+  "@microsoft/generator-sharepoint": {
+    "version": "1.10.0"
+  }
+}
+```
+
+#### [./tsconfig.json](./tsconfig.json)
+
+Update tsconfig.json extends property:
+
+```json
+{
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json"
+}
+```
+
+Update tsconfig.json inlineSources value:
+
+```json
+{
+  "compilerOptions": {
+    "inlineSources": false
+  }
+}
+```
+
+Update tsconfig.json strictNullChecks value:
+
+```json
+{
+  "compilerOptions": {
+    "strictNullChecks": false
+  }
+}
+```
+
+Update tsconfig.json noUnusedLocals value:
+
+```json
+{
+  "compilerOptions": {
+    "noUnusedLocals": false
+  }
+}
+```
+
+#### [src\webparts\workbenchCustomizer\WorkbenchCustomizerWebPart.ts](src\webparts\workbenchCustomizer\WorkbenchCustomizerWebPart.ts)
+
+Refactor the code to import property pane property from the @microsoft/sp-property-pane npm package instead of the @microsoft/sp-webpart-base package:
+
+```ts
+import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
+import { IPropertyPaneConfiguration, PropertyPaneToggle } from "@microsoft/sp-property-pane";
+```
+
+#### [./package.json](./package.json)
+
+Add package.json property:
+
+```json
+{
+  "main": "lib/index.js"
+}
+```
+
+#### [src\webparts\workbenchCustomizer\WorkbenchCustomizerWebPart.manifest.json](src\webparts\workbenchCustomizer\WorkbenchCustomizerWebPart.manifest.json)
+
+Update the supportedHosts property in the manifest:
+
+```json
+{
+  "supportedHosts": ["SharePointWebPart"]
+}
+```