diff --git a/samples/react-versiondisplay/README.md b/samples/react-versiondisplay/README.md index 112b5dc82..17f833c1a 100644 --- a/samples/react-versiondisplay/README.md +++ b/samples/react-versiondisplay/README.md @@ -72,17 +72,36 @@ The following table shows when you should call which `npm version` command, depe ### To use the custom gulp task in your solutions +> NOTE: if you use the [PnP SPFx Yeoman generator](https://pnp.github.io/generator-spfx/), there is already a built-in `gulp` command that will synchronize your version number when you use `npm version`. You only need to follow the steps below if you use the regular SPFx Yeoman generator. + If you'd like to use the custom `gulp` task in your solutions, copy the code from this solution's `gulpfile.js` between: -```javascript +```typescript // BEGIN: Add custom version sync task ``` + and -```javascript + +```typescript // END: Add custom version sync task ``` + To your own `gulpfile.js`. +### To use the version using the web part's manifest + +The `BaseClientSideWebPart` class `context` property provides a `manifest` which contains a `version` property. To use it in your web part, simply use: + +```typescript +this.context.manifest.version +``` + +This approach provides a version number that follows the `1.0.0` format, instead of the usual `1.0.0.0` format. However, since the `gulp` tasks describe above append an additional `.0` to the end of the `package.json` version number, you can choose to append `.0` yourself when displaying the manifest version. For example: + +```typescript +this.context.manifest.version + '.0' +``` + ### To use the version using a static import 1. Copy the content of this solution's `src\typings.d.ts` to your own `src` folder in your own project. diff --git a/samples/react-versiondisplay/src/webparts/versionDisplay/VersionDisplayWebPart.ts b/samples/react-versiondisplay/src/webparts/versionDisplay/VersionDisplayWebPart.ts index 8838ed259..31f7aa8be 100644 --- a/samples/react-versiondisplay/src/webparts/versionDisplay/VersionDisplayWebPart.ts +++ b/samples/react-versiondisplay/src/webparts/versionDisplay/VersionDisplayWebPart.ts @@ -3,7 +3,6 @@ import * as ReactDom from 'react-dom'; import { Version } from '@microsoft/sp-core-library'; import { IPropertyPaneConfiguration, - PropertyPaneTextField } from '@microsoft/sp-property-pane'; import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base'; @@ -20,6 +19,7 @@ const requirePackage: any = require("../../../config/package-solution.json"); // Static import import * as packageSolution from '../../../config/package-solution.json'; + export interface IVersionDisplayWebPartProps { description: string; } @@ -58,20 +58,20 @@ export default class VersionDisplayWebPart extends BaseClientSideWebPartpackageSolution).solution.version, - key: 'webPartInfoStaticId' + description: `${strings.StaticImportVersionLabel} ${(packageSolution).solution.version}`, + key: 'webPartInfoStaticId', }) ] } diff --git a/samples/react-versiondisplay/src/webparts/versionDisplay/components/VersionDisplay.module.scss b/samples/react-versiondisplay/src/webparts/versionDisplay/components/VersionDisplay.module.scss index 93ae290e0..03b87b938 100644 --- a/samples/react-versiondisplay/src/webparts/versionDisplay/components/VersionDisplay.module.scss +++ b/samples/react-versiondisplay/src/webparts/versionDisplay/components/VersionDisplay.module.scss @@ -23,7 +23,7 @@ } .title { - @include ms-font-xl; + @include ms-font-xxl; @include ms-fontColor-white; } diff --git a/samples/react-versiondisplay/src/webparts/versionDisplay/components/VersionDisplay.tsx b/samples/react-versiondisplay/src/webparts/versionDisplay/components/VersionDisplay.tsx index 92582c873..b6cca6099 100644 --- a/samples/react-versiondisplay/src/webparts/versionDisplay/components/VersionDisplay.tsx +++ b/samples/react-versiondisplay/src/webparts/versionDisplay/components/VersionDisplay.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import styles from './VersionDisplay.module.scss'; import { IVersionDisplayProps } from './IVersionDisplayProps'; import { escape } from '@microsoft/sp-lodash-subset'; +import * as strings from 'VersionDisplayWebPartStrings'; export default class VersionDisplay extends React.Component { public render(): React.ReactElement { @@ -10,11 +11,11 @@ export default class VersionDisplay extends React.Component
- Version Display -

This web part displays the solution version.

-

Version (using require): {escape(this.props.requireVersion)}

-

Version (using static import): {escape(this.props.staticImportVersion)}

-

Version (using manifest): {escape(this.props.manifestVersion)}

+ {strings.WebParttitle} +

{strings.WebPartDescription}

+

{strings.ManifestVersionLabel} {escape(this.props.manifestVersion)}.0

+

{strings.RequireVersionLabel} {escape(this.props.requireVersion)}

+

{strings.StaticImportVersionLabel} {escape(this.props.staticImportVersion)}

diff --git a/samples/react-versiondisplay/src/webparts/versionDisplay/loc/en-us.js b/samples/react-versiondisplay/src/webparts/versionDisplay/loc/en-us.js index b77c02712..66b7db54a 100644 --- a/samples/react-versiondisplay/src/webparts/versionDisplay/loc/en-us.js +++ b/samples/react-versiondisplay/src/webparts/versionDisplay/loc/en-us.js @@ -1,8 +1,10 @@ define([], function() { return { + WebPartDescription: "This web part displays the solution version.", + WebParttitle: "Version Display", ManifestVersionLabel: "Version (from manifest):", StaticImportVersionLabel: "Version (using static import): ", - WebPartVersionLabel: "Version (using require): ", + RequireVersionLabel: "Version (using require): ", AboutGroupName: "About", PropertyPaneDescription: "This web part displays the current version of the solution", } diff --git a/samples/react-versiondisplay/src/webparts/versionDisplay/loc/mystrings.d.ts b/samples/react-versiondisplay/src/webparts/versionDisplay/loc/mystrings.d.ts index 96b6515b8..e96f81c61 100644 --- a/samples/react-versiondisplay/src/webparts/versionDisplay/loc/mystrings.d.ts +++ b/samples/react-versiondisplay/src/webparts/versionDisplay/loc/mystrings.d.ts @@ -1,7 +1,9 @@ declare interface IVersionDisplayWebPartStrings { + WebPartDescription: string; + WebParttitle: string; ManifestVersionLabel: string; StaticImportVersionLabel: string; - WebPartVersionLabel: string; + RequireVersionLabel: string; AboutGroupName: string; PropertyPaneDescription: string; }