Upraded to SPFx 1.10.0

samples/js-theme-manager/.yo-rc.json

@@ -2,10 +2,10 @@
   "@microsoft/generator-sharepoint": {
     "isCreatingSolution": true,
     "environment": "spo",
-    "version": "1.7.1",
+    "version": "1.10.0",
     "libraryName": "js-theme-manager",
     "libraryId": "555147fb-b773-446f-aef2-1b25001f92d9",
     "packageManager": "npm",
     "componentType": "webpart"
   }
-}
+}

samples/js-theme-manager/README.md

@@ -26,7 +26,7 @@ NOTE: This is a great option to provide theme management of a Site Collection wi
 
 
 ## Used SharePoint Framework Version 
-![drop](https://img.shields.io/badge/drop-1.7.1-orange.svg)
+![1.10.0](https://img.shields.io/badge/drop-1.10.0-orange.svg)
 
 ## Applies to
 
@@ -38,7 +38,8 @@ NOTE: This is a great option to provide theme management of a Site Collection wi
 
 Solution|Author(s)
 --------|---------
-js-theme-manager | David Warner II ([@DavidWarnerII](https://twitter.com/davidwarnerii) / [Warner Digital](http://warner.digital))
+js-theme-manager (Upgrade) | Hugo Bernier ([@bernierh](https://twitter.com/bernierh) / [Tahoe Ninjas](https://tahoeninjas.blog))
+js-theme-manager | Beau Cameron ([@Beau__Cameron](https://twitter.com/@Beau__Cameron) / [Blog](https://beaucameron.net/))
 js-theme-manager | Beau Cameron ([@Beau__Cameron](https://twitter.com/@Beau__Cameron) / [Blog](https://beaucameron.net/))
 
 ## Version history
@@ -46,6 +47,7 @@ js-theme-manager | Beau Cameron ([@Beau__Cameron](https://twitter.com/@Beau__Cam
 Version|Date|Comments
 -------|----|--------
 1.0|February 27, 2019|Initial release
+2.0|June 1, 2020|Upgraded to SPFx 1.10.0
 
 ## Disclaimer
 **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**

samples/js-theme-manager/config/package-solution.json

@@ -3,7 +3,7 @@
   "solution": {
     "name": "js-theme-manager-client-side-solution",
     "id": "555147fb-b773-446f-aef2-1b25001f92d9",
-    "version": "1.0.0.0",
+    "version": "2.0.0.0",
     "includeClientSideAssets": true
   },
   "paths": {

samples/js-theme-manager/package.json

@@ -1,6 +1,7 @@
 {
   "name": "js-theme-manager",
-  "version": "0.0.1",
+  "main": "lib/index.js",
+  "version": "2.0.0",
   "private": true,
   "engines": {
     "node": ">=0.10.0"
@@ -11,21 +12,23 @@
     "test": "gulp test"
   },
   "dependencies": {
-    "@microsoft/sp-core-library": "1.7.1",
+    "@microsoft/sp-core-library": "1.10.0",
-    "@microsoft/sp-webpart-base": "1.7.1",
+    "@microsoft/sp-lodash-subset": "1.10.0",
-    "@microsoft/sp-lodash-subset": "1.7.1",
+    "@microsoft/sp-office-ui-fabric-core": "1.10.0",
-    "@microsoft/sp-office-ui-fabric-core": "1.7.1",
+    "@microsoft/sp-property-pane": "1.10.0",
-    "@types/webpack-env": "1.13.1",
+    "@microsoft/sp-webpart-base": "1.10.0",
-    "@types/es6-promise": "0.0.33"
+    "@types/es6-promise": "0.0.33",
+    "@types/webpack-env": "1.13.1"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "1.7.1",
+    "@microsoft/rush-stack-compiler-3.3": "0.3.5",
-    "@microsoft/sp-tslint-rules": "1.7.1",
+    "@microsoft/sp-build-web": "1.10.0",
-    "@microsoft/sp-module-interfaces": "1.7.1",
+    "@microsoft/sp-module-interfaces": "1.10.0",
-    "@microsoft/sp-webpart-workbench": "1.7.1",
+    "@microsoft/sp-tslint-rules": "1.10.0",
-    "gulp": "~3.9.1",
+    "@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-theme-manager/src/webparts/modernThemeManager/ModernThemeManagerWebPart.manifest.json

@@ -4,21 +4,17 @@
   "alias": "ModernThemeManagerWebPart",
   "componentType": "WebPart",
 
-  // The "*" signifies that the version should be taken from the package.json
   "version": "*",
   "manifestVersion": 2,
 
-  // 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.
-  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
   "requiresCustomScript": false,
-
+  "supportedHosts": ["SharePointWebPart"],
   "preconfiguredEntries": [{
     "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
     "group": { "default": "Other" },
     "title": { "default": "Modern Theme Manager" },
     "description": { "default": "Modern Theme Manager description" },
-    "officeFabricIconFontName": "Page",
+    "officeFabricIconFontName": "Color",
     "properties": {
       "description": "Modern Theme Manager"
     }

samples/js-theme-manager/src/webparts/modernThemeManager/ModernThemeManagerWebPart.ts

@@ -1,9 +1,6 @@
 import { Version } from '@microsoft/sp-core-library';
-import {
+import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
-  BaseClientSideWebPart,
+import { IPropertyPaneConfiguration, PropertyPaneTextField } from "@microsoft/sp-property-pane";
-  IPropertyPaneConfiguration,
-  PropertyPaneTextField
-} from '@microsoft/sp-webpart-base';
 import { escape } from '@microsoft/sp-lodash-subset';
 
 import styles from './ModernThemeManagerWebPart.module.scss';
@@ -30,7 +27,7 @@ export default class ModernThemeManagerWebPart extends BaseClientSideWebPart<IMo
               </a>
 
               <div>
-                <p class="${ styles.subTitle}">Theme Actions</p> 
+                <p class="${ styles.subTitle}">Theme Actions</p>
                 <label class="${ styles.radio}"><input type="radio" name="themeAction" value="create"> Create a theme</label>
                 <label class="${ styles.radio}"><input type="radio" name="themeAction" value="update"> Update a theme</label>
                 <label class="${ styles.radio}"><input type="radio" name="themeAction" value="delete"> Delete a theme</label>
@@ -38,12 +35,12 @@ export default class ModernThemeManagerWebPart extends BaseClientSideWebPart<IMo
               </div>
 
               <div class="${ styles.hide} ${styles.genericWrapper}" id="${styles.themeSelectWrapper}">
-                <p class="${ styles.subTitle}">Available Themes</p> 
+                <p class="${ styles.subTitle}">Available Themes</p>
                 <select id="${ styles.availableThemesSelect}" name="availableThemes">
                 </select>
               </div>
 
-              
+
               <div class="${ styles.hide} ${styles.genericWrapper}" id="${styles.themeNameWrapper}">
                 <p class="${ styles.subTitle}">Theme Name</p>
                 <div>
@@ -84,7 +81,7 @@ export default class ModernThemeManagerWebPart extends BaseClientSideWebPart<IMo
     this.setupClickEvent();
   }
 
-  /***** ***** 
+  /***** *****
   Create event listeners for Radio & Buttons
   ***** *****/
  public setupClickEvent(): void {
@@ -118,15 +115,11 @@ export default class ModernThemeManagerWebPart extends BaseClientSideWebPart<IMo
       else if (selectedValue == 'apply') {
         parent.displayApplyOptions();
       }
-
-
     };
-  };
+  }
-
-
 }
 
-/***** ***** 
+/***** *****
 Hide All Wrappers:
 Generic method for hiding all of the form elements
 ***** *****/
@@ -148,7 +141,7 @@ public hideAllWrappers(): void {
 
 }
 
-/***** ***** 
+/***** *****
 Display Update Options:
 This method is used to display the form elements for the Theme Update Options.
 ***** *****/
@@ -163,12 +156,11 @@ public displayUpdateOptions(): void {
       document.getElementById(styles.themePaletteWrapper).classList.remove(styles.hide);
       document.getElementById('updateTheme').classList.remove(styles.hide);
     }
-  })
+  });
-
+}
-};
 
 
-/***** ***** 
+/***** *****
 Display Create Options:
 This method is used to display the form elements for the Theme Creation Options.
 ***** *****/
@@ -181,11 +173,9 @@ public displayCreateOptions(): void {
   document.getElementById(styles.themeNameWrapper).classList.remove(styles.hide);
   document.getElementById(styles.themePaletteWrapper).classList.remove(styles.hide);
   document.getElementById('createTheme').classList.remove(styles.hide);
-
-
 }
 
-/***** ***** 
+/***** *****
 Display Delete Options:
 This method is used to display the form elements for the Theme Deletion Options.
 ***** *****/
@@ -202,7 +192,7 @@ public displayDeleteOptions(): void {
   });
 }
 
-/***** ***** 
+/***** *****
 Display Apply Options:
 This method is used to display the form elements for the Theme Apply Options.
 ***** *****/
@@ -217,7 +207,7 @@ public displayApplyOptions(): void {
   document.getElementById('applyTheme').classList.remove(styles.hide);
 }
 
-/***** ***** 
+/***** *****
 Populate Existing Themes:
 This method retrieves the currently available themes in the tenant and inserts the values into the dropdown.
 ***** *****/
@@ -243,7 +233,7 @@ public populateExistingThemes(url, params): Promise<boolean> {
 
 }
 
-/***** ***** 
+/***** *****
 Create new theme at tenant level:
 Collects the data needed to create a new theme at the tenant level and passes it to the creation execution method.
 ***** *****/
@@ -273,7 +263,7 @@ public createTheme(): void {
 
 
 
-/***** ***** 
+/***** *****
 Deletes a theme at tenant level:
 Collects the data needed to delete a theme at the tenant level and passes it to the deletion execution method.
 ***** *****/
@@ -300,7 +290,7 @@ public deleteTheme(): void {
     });
 }
 
-/***** ***** 
+/***** *****
 Updates a theme at tenant level:
 Collects the data needed to update a theme at the tenant level and passes it to the update execution method.
 ***** *****/
@@ -311,7 +301,7 @@ public updateTheme(): void {
   let themePalette: JSON = JSON.parse((<HTMLInputElement>document.getElementById(styles.textarea)).value);
   let themePaletteJSON = {
     "palette": themePalette
-  }
+  };
 
   // Pass the theme properties to themeManagerExecution method
   this.themeManagerExecution(this.context.pageContext.site.serverRelativeUrl + "/_api/thememanager/UpdateTenantTheme", { name: themeTitle, themeJson: JSON.stringify(themePaletteJSON) })
@@ -328,7 +318,7 @@ public updateTheme(): void {
 }
 
 
-/***** ***** 
+/***** *****
 Apply a theme to a site collection:
 Collects the data needed to apply a theme directly to a site colleciton.
 NOTE: This does NOT create a theme choice at the tenant level. It will directly apply the theme to a site collection.
@@ -341,7 +331,7 @@ public applyThemeNew(): void {
   let themePalette: JSON = JSON.parse((<HTMLInputElement>document.getElementById(styles.textarea)).value);
   let themePaletteJSON = {
     "palette": themePalette
-  }
+  };
 
   const digestCache: IDigestCache = this.context.serviceScope.consume(DigestCache.serviceKey);
   digestCache.fetchDigest(themeURL).then((digest: string): void => {
@@ -363,18 +353,18 @@ public applyThemeNew(): void {
 
 }
 
-/***** ***** 
+/***** *****
 Generic method for creating, updating, deleting and applying a theme.
 ***** *****/
 public themeManagerExecution(url: string, params: any): Promise<boolean> {
 
   let options: ISPHttpClientOptions = {
     body: JSON.stringify(params)
-  }
+  };
 
   return this.context.spHttpClient.post(url, SPHttpClient.configurations.v1, options)
     .then((response: SPHttpClientResponse) => {
-      return response.ok
+      return response.ok;
     });
 
 }

samples/js-theme-manager/tsconfig.json

@@ -1,5 +1,9 @@
 {
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
   "compilerOptions": {
+    "noUnusedLocals": false,
+    "strictNullChecks": false,
+    "inlineSources": false,
     "target": "es5",
     "forceConsistentCasingInFileNames": true,
     "module": "esnext",