Initial version

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.

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 BaseClientSideWebPart<IVersio
             {
               groupName: strings.AboutGroupName,
               groupFields: [
-                // Using a static import
+                // Using a the web part's manifest
                 PropertyPaneWebPartInformation({
-                  description: strings.ManifestVersionLabel + this.context.manifest.version,
+                  description: `${strings.ManifestVersionLabel} ${this.context.manifest.version}.0`,
                   key: 'webPartInfoStaticId'
                 }),
                 // Using a require statement
                 PropertyPaneWebPartInformation({
-                  description: strings.WebPartVersionLabel + requirePackage.solution.version,
+                  description: `${strings.RequireVersionLabel} ${requirePackage.solution.version}`,
                   key: 'webPartInfoId'
                 }),
-                // Using a the web part's manifest
+                // Using a static import
                 PropertyPaneWebPartInformation({
-                  description: strings.StaticImportVersionLabel + (<any>packageSolution).solution.version,
-                  key: 'webPartInfoStaticId'
+                  description: `${strings.StaticImportVersionLabel} ${(<any>packageSolution).solution.version}`,
+                  key: 'webPartInfoStaticId',
                 })
               ]
             }

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;
   }
 

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<IVersionDisplayProps, {}> {
   public render(): React.ReactElement<IVersionDisplayProps> {
@@ -10,11 +11,11 @@ export default class VersionDisplay extends React.Component<IVersionDisplayProps
         <div className={ styles.container }>
           <div className={ styles.row }>
             <div className={ styles.column }>
-              <span className={ styles.title }>Version Display</span>
-              <p className={ styles.subTitle }>This web part displays the solution version.</p>
-              <p className={ styles.description }>Version (using require): {escape(this.props.requireVersion)}</p>
-              <p className={ styles.description }>Version (using static import): {escape(this.props.staticImportVersion)}</p>
-              <p className={ styles.description }>Version (using manifest): {escape(this.props.manifestVersion)}</p>
+              <span className={ styles.title }>{strings.WebParttitle}</span>
+              <p className={ styles.subTitle }>{strings.WebPartDescription}</p>
+              <p className={ styles.description }>{strings.ManifestVersionLabel} {escape(this.props.manifestVersion)}.0</p>
+              <p className={ styles.description }>{strings.RequireVersionLabel} {escape(this.props.requireVersion)}</p>
+              <p className={ styles.description }>{strings.StaticImportVersionLabel} {escape(this.props.staticImportVersion)}</p>
             </div>
           </div>
         </div>

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",
   }

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;
 }