Upgraded solution to 1.9.1

samples/react-spfx-webcam/.yo-rc.json

@@ -2,7 +2,7 @@
   "@microsoft/generator-sharepoint": {
     "isCreatingSolution": false,
     "environment": "spo",
-    "version": "1.8.2",
+    "version": "1.9.1",
     "libraryName": "react--spfx-webcam",
     "libraryId": "a8075f7d-4517-44af-884c-5f0b348f8e57",
     "packageManager": "npm",

samples/react-spfx-webcam/README.md

@@ -12,18 +12,18 @@ This is sample webpart which showcase how to open webcam and take photo in SPFx.
 
 ## Used SharePoint Framework Version
 
-![drop](https://img.shields.io/badge/version-1.8.2-green.svg)
+![drop](https://img.shields.io/badge/version-1.9.1-green.svg)
 
 ## Applies to
 
 * [SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
 * [Office 365 tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
 
-> Update accordingly as needed.
+
 
 ## Prerequisites
 
-> NA
+> N/A
 
 ## Solution
 
@@ -35,6 +35,7 @@ react-spfx-webcam | Siddharth Vaghasia(@siddh_me)
 
 Version|Date|Comments
 -------|----|--------
+1.0.0|Sept 05, 2019|Upgraded to Latest SPFx Version 1.9.1
 1.0.0|Sept 04, 2019|Initial release
 
 ## Disclaimer

samples/react-spfx-webcam/package.json

@@ -11,34 +11,35 @@
     "test": "gulp test"
   },
   "dependencies": {
-    "@microsoft/rush-stack-compiler-3.2": "^0.3.26",
+    "@microsoft/rush-stack-compiler-3.2": "^0.3.33",
-    "@microsoft/sp-core-library": "1.8.2",
+    "@microsoft/sp-core-library": "1.9.1",
-    "@microsoft/sp-lodash-subset": "1.8.2",
+    "@microsoft/sp-lodash-subset": "1.9.1",
-    "@microsoft/sp-office-ui-fabric-core": "1.8.2",
+    "@microsoft/sp-office-ui-fabric-core": "1.9.1",
-    "@microsoft/sp-property-pane": "1.8.2",
+    "@microsoft/sp-property-pane": "1.9.1",
-    "@microsoft/sp-webpart-base": "1.8.2",
+    "@microsoft/sp-webpart-base": "1.9.1",
     "@types/es6-promise": "0.0.33",
-    "@types/react": "16.7.22",
+    "@types/react": "16.8.8",
-    "@types/react-dom": "16.8.0",
+    "@types/react-dom": "16.8.3",
     "@types/react-webcam": "^1.1.0",
     "@types/webpack-env": "1.13.1",
-    "office-ui-fabric-react": "6.143.0",
+    "office-ui-fabric-react": "6.189.2",
     "react": "16.7.0",
     "react-dom": "16.7.0",
     "react-webcam": "^1.1.1"
   },
   "resolutions": {
-    "@types/react": "16.7.22"
+    "@types/react": "16.8.8"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "1.8.2",
+    "@microsoft/rush-stack-compiler-2.9": "0.7.16",
-    "@microsoft/sp-tslint-rules": "1.8.2",
+    "@microsoft/sp-build-web": "1.9.1",
-    "@microsoft/sp-module-interfaces": "1.8.2",
+    "@microsoft/sp-module-interfaces": "1.9.1",
-    "@microsoft/sp-webpart-workbench": "1.8.2",
+    "@microsoft/sp-tslint-rules": "1.9.1",
-    "@microsoft/rush-stack-compiler-2.9": "0.7.7",
+    "@microsoft/sp-webpart-workbench": "1.9.1",
-    "gulp": "~3.9.1",
     "@types/chai": "3.4.34",
     "@types/mocha": "2.2.38",
-    "ajv": "~5.2.2"
+    "ajv": "~5.2.2",
+    "gulp": "~3.9.1",
+    "webpack": "^4.39.3"
   }
 }

samples/react-spfx-webcam/report.md

@@ -0,0 +1,316 @@
+# Upgrade project D:\SP\Samples\react-spfx-webcam to v1.9.0
+
+Date: 2019-9-5
+
+## Findings
+
+Following is the list of steps required to upgrade your project to SharePoint Framework version 1.9.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
+npm i -SE @microsoft/sp-core-library@1.9.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
+npm i -SE @microsoft/sp-lodash-subset@1.9.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
+npm i -SE @microsoft/sp-office-ui-fabric-core@1.9.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
+npm i -SE @microsoft/sp-webpart-base@1.9.0
+```
+
+File: [./package.json](./package.json)
+
+### FN001005 @types/react | Required
+
+Upgrade SharePoint Framework dependency package @types/react
+
+Execute the following command:
+
+```sh
+npm i -SE @types/react@16.8.8
+```
+
+File: [./package.json](./package.json)
+
+### FN001006 @types/react-dom | Required
+
+Upgrade SharePoint Framework dependency package @types/react-dom
+
+Execute the following command:
+
+```sh
+npm i -SE @types/react-dom@16.8.3
+```
+
+File: [./package.json](./package.json)
+
+### FN001021 @microsoft/sp-property-pane | Required
+
+Upgrade SharePoint Framework dependency package @microsoft/sp-property-pane
+
+Execute the following command:
+
+```sh
+npm i -SE @microsoft/sp-property-pane@1.9.0
+```
+
+File: [./package.json](./package.json)
+
+### FN001022 office-ui-fabric-react | Required
+
+Upgrade SharePoint Framework dependency package office-ui-fabric-react
+
+Execute the following command:
+
+```sh
+npm i -SE office-ui-fabric-react@6.189.2
+```
+
+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
+npm i -DE @microsoft/sp-build-web@1.9.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
+npm i -DE @microsoft/sp-module-interfaces@1.9.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
+npm i -DE @microsoft/sp-webpart-workbench@1.9.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
+npm i -DE @microsoft/sp-tslint-rules@1.9.0
+```
+
+File: [./package.json](./package.json)
+
+### FN002011 @microsoft/rush-stack-compiler-2.9 | Required
+
+Upgrade SharePoint Framework dev dependency package @microsoft/rush-stack-compiler-2.9
+
+Execute the following command:
+
+```sh
+npm i -DE @microsoft/rush-stack-compiler-2.9@0.7.16
+```
+
+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.9.0"
+  }
+}
+```
+
+File: [./.yo-rc.json](./.yo-rc.json)
+
+### FN020001 @types/react | Required
+
+Add resolution for package @types/react
+
+In file [./package.json](./package.json) update the code as follows:
+
+```json
+{
+  "resolutions": {
+    "@types/react": "16.8.8"
+  }
+}
+```
+
+File: [./package.json](./package.json)
+
+### 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)
+
+### FN001008 react | Required
+
+Upgrade SharePoint Framework dependency package react
+
+Execute the following command:
+
+```sh
+npm i -SE react@16.8.5
+```
+
+File: [./package.json](./package.json)
+
+### FN001009 react-dom | Required
+
+Upgrade SharePoint Framework dependency package react-dom
+
+Execute the following command:
+
+```sh
+npm i -SE react-dom@16.8.5
+```
+
+File: [./package.json](./package.json)
+
+### FN022001 Scss file import | Required
+
+Remove scss file import
+
+
+File: [src\webparts\spFxWebCam\components\SpFxWebCam.module.scss](src\webparts\spFxWebCam\components\SpFxWebCam.module.scss)
+
+### FN022002 Scss file import | Optional
+
+Add scss file import
+
+
+File: [src\webparts\spFxWebCam\components\SpFxWebCam.module.scss](src\webparts\spFxWebCam\components\SpFxWebCam.module.scss)
+
+### FN017001 Run npm dedupe | Optional
+
+If, after upgrading npm packages, when building the project you have errors similar to: "error TS2345: Argument of type 'SPHttpClientConfiguration' is not assignable to parameter of type 'SPHttpClientConfiguration'", try running 'npm dedupe' to cleanup npm packages.
+
+Execute the following command:
+
+```sh
+npm dedupe
+```
+
+File: [./package.json](./package.json)
+
+## Summary
+
+### Execute script
+
+```sh
+npm i -SE @microsoft/sp-core-library@1.9.0 @microsoft/sp-lodash-subset@1.9.0 @microsoft/sp-office-ui-fabric-core@1.9.0 @microsoft/sp-webpart-base@1.9.0 @types/react@16.8.8 @types/react-dom@16.8.3 @microsoft/sp-property-pane@1.9.0 office-ui-fabric-react@6.189.2 react@16.8.5 react-dom@16.8.5
+npm i -DE @microsoft/sp-build-web@1.9.0 @microsoft/sp-module-interfaces@1.9.0 @microsoft/sp-webpart-workbench@1.9.0 @microsoft/sp-tslint-rules@1.9.0 @microsoft/rush-stack-compiler-2.9@0.7.16
+```
+
+### Modify files
+
+#### [./.yo-rc.json](./.yo-rc.json)
+
+Update version in .yo-rc.json:
+
+```json
+{
+  "@microsoft/generator-sharepoint": {
+    "version": "1.9.0"
+  }
+}
+```
+
+#### [./package.json](./package.json)
+
+Add resolution for package @types/react:
+
+```json
+{
+  "resolutions": {
+    "@types/react": "16.8.8"
+  }
+}
+```
+
+Add package.json property:
+
+```json
+{
+  "main": "lib/index.js"
+}
+```
+
+#### [src\webparts\spFxWebCam\components\SpFxWebCam.module.scss](src\webparts\spFxWebCam\components\SpFxWebCam.module.scss)
+
+Remove scss file import:
+
+```scss
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'
+```
+
+Add scss file import:
+
+```scss
+@import '~office-ui-fabric-react/dist/sass/References.scss'
+```

samples/react-spfx-webcam/src/webparts/spFxWebCam/SpFxWebCamWebPart.manifest.json

@@ -19,7 +19,7 @@
     "group": { "default": "Other" },
     "title": { "default": "SPFxWebCam" },
     "description": { "default": "SPFxWebCam description" },
-    "officeFabricIconFontName": "Page",
+    "officeFabricIconFontName": "Camera",
     "properties": {
       "description": "SPFxWebCam"
     }

samples/react-spfx-webcam/src/webparts/spFxWebCam/components/SpFxWebCam.tsx

@@ -4,8 +4,12 @@ import { ISpFxWebCamProps } from './ISpFxWebCamProps';
 import { escape } from '@microsoft/sp-lodash-subset';
 import * as Webcam from "react-webcam";
 import * as ReactDom from 'react-dom';
+import { Button } from 'office-ui-fabric-react/lib/Button';
 export default class SpFxWebCam extends React.Component<ISpFxWebCamProps,{imageData: string, image_name:string,webcam:Webcam,stream:any}> {
 
+  private _camContainer: HTMLElement = undefined;
+  private _capturedPhoto: HTMLElement = undefined;
+
 
 public render(): React.ReactElement<ISpFxWebCamProps> {
     return (
@@ -26,14 +30,13 @@ public render(): React.ReactElement<ISpFxWebCamProps> {
                 <a onClick={() => this.close()} className={ styles.button }>
                 <span className={ styles.label }>Close webcam</span>
               </a>
-         
             </div>
           </div>
         </div>
       </div>
-      <div id="camContainer">
+      <div id="camContainer"   ref={(elm) => { this._camContainer = elm; }}>
         </div>
-      <div id="capturedPhoto"> 
+      <div id="capturedPhoto" ref={(elm) => { this._capturedPhoto = elm; }}> 
         </div>
       </div>
     );
@@ -43,7 +46,7 @@ public render(): React.ReactElement<ISpFxWebCamProps> {
     this.setState({webcam:webcam})
   }
   public close(){
-    ReactDom.unmountComponentAtNode(document.getElementById('camContainer'));
+    ReactDom.unmountComponentAtNode(this._camContainer);
   }
   private capture(){
     const imageSrc  =  this.state.webcam.getScreenshot();
@@ -53,7 +56,7 @@ public render(): React.ReactElement<ISpFxWebCamProps> {
         src:imageSrc
       }
     );
-    ReactDom.render(element, document.getElementById("capturedPhoto"));
+    ReactDom.render(element, this._capturedPhoto);
   }
   private opencam () {
       const element2: React.ReactElement<Webcam.WebcamProps > = React.createElement(
@@ -67,8 +70,8 @@ public render(): React.ReactElement<ISpFxWebCamProps> {
       
       }
     );
-    
+    //const camContainer = document.getElementById("camContainer")
-    ReactDom.render(element2, document.getElementById("camContainer"));
+    ReactDom.render(element2, this._camContainer);
 }