Upgraded solution to 1.9.1
This commit is contained in:
Siddharth
parent
2ad0cfd0ca
commit
1dc9b6e595
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -12,18 +12,18 @@ This is sample webpart which showcase how to open webcam and take photo in SPFx.
|
|||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
|
||||
## 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
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -11,34 +11,35 @@
|
|||
"test": "gulp test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@microsoft/rush-stack-compiler-3.2": "^0.3.26",
|
||||
"@microsoft/sp-core-library": "1.8.2",
|
||||
"@microsoft/sp-lodash-subset": "1.8.2",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.8.2",
|
||||
"@microsoft/sp-property-pane": "1.8.2",
|
||||
"@microsoft/sp-webpart-base": "1.8.2",
|
||||
"@microsoft/rush-stack-compiler-3.2": "^0.3.33",
|
||||
"@microsoft/sp-core-library": "1.9.1",
|
||||
"@microsoft/sp-lodash-subset": "1.9.1",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.9.1",
|
||||
"@microsoft/sp-property-pane": "1.9.1",
|
||||
"@microsoft/sp-webpart-base": "1.9.1",
|
||||
"@types/es6-promise": "0.0.33",
|
||||
"@types/react": "16.7.22",
|
||||
"@types/react-dom": "16.8.0",
|
||||
"@types/react": "16.8.8",
|
||||
"@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/sp-tslint-rules": "1.8.2",
|
||||
"@microsoft/sp-module-interfaces": "1.8.2",
|
||||
"@microsoft/sp-webpart-workbench": "1.8.2",
|
||||
"@microsoft/rush-stack-compiler-2.9": "0.7.7",
|
||||
"gulp": "~3.9.1",
|
||||
"@microsoft/rush-stack-compiler-2.9": "0.7.16",
|
||||
"@microsoft/sp-build-web": "1.9.1",
|
||||
"@microsoft/sp-module-interfaces": "1.9.1",
|
||||
"@microsoft/sp-tslint-rules": "1.9.1",
|
||||
"@microsoft/sp-webpart-workbench": "1.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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
```
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
"group": { "default": "Other" },
|
||||
"title": { "default": "SPFxWebCam" },
|
||||
"description": { "default": "SPFxWebCam description" },
|
||||
"officeFabricIconFontName": "Page",
|
||||
"officeFabricIconFontName": "Camera",
|
||||
"properties": {
|
||||
"description": "SPFxWebCam"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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> {
|
|||
|
||||
}
|
||||
);
|
||||
|
||||
ReactDom.render(element2, document.getElementById("camContainer"));
|
||||
//const camContainer = document.getElementById("camContainer")
|
||||
ReactDom.render(element2, this._camContainer);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue