Upgrade to SPFx GA version

.gitignore

@@ -11,7 +11,7 @@ dist
 lib
 solution
 temp
-*.spapp
+*.sppkg
 
 # Coverage directory used by tools like istanbul
 coverage

.yo-rc.json

@@ -1,7 +1,8 @@
 {
   "@microsoft/generator-sharepoint": {
     "libraryName": "d-4-s-sp-fx-my-contacts",
-    "libraryId": "caa07132-4f35-44cc-b162-1b919b4867dd",
-    "framework": "react"
+    "framework": "react",
+    "version": "1.0.0",
+    "libraryId": "79640ea4-12ba-40d9-8373-8a4c12fcba04"
   }
 }

README.md

@@ -1,6 +1,6 @@
 ## d-4-s-sp-fx-my-contacts
 
-This is where you include your web part docs.
+This is where you include your WebPart documentation.
 
 ### Building the code
 
@@ -13,14 +13,14 @@ gulp
 
 This package produces the following:
 
-* lib/* commonjs components - this allows this package to be reused from other packages.
-* dist/* - a single bundle containing the components used for uploading to a cdn pointing a registered Sharepoint webpart library to.
-* example/* a test page that hosts all components in this package.
+* lib/* - intermediate-stage commonjs build artifacts
+* dist/* - the bundled script, along with other resources
+* deploy/* - all resources which should be uploaded to a CDN.
 
 ### Build options
 
-gulp nuke - TODO
+gulp clean - TODO
 gulp test - TODO
-gulp watch - TODO
-gulp build - TODO
-gulp deploy - TODO
+gulp serve - TODO
+gulp bundle - TODO
+gulp package-solution - TODO

config/config.json

@@ -6,17 +6,7 @@
       "outputPath": "./dist/my-contacts.bundle.js"
     }
   ],
-  "externals": {
-    "@microsoft/sp-client-base": "node_modules/@microsoft/sp-client-base/dist/sp-client-base.js",
-    "@microsoft/sp-client-preview": "node_modules/@microsoft/sp-client-preview/dist/sp-client-preview.js",
-    "@microsoft/sp-webpart-base": "node_modules/@microsoft/sp-webpart-base/dist/sp-webpart-base.js",
-    "@microsoft/sp-lodash-subset": "node_modules/@microsoft/sp-lodash-subset/dist/sp-lodash-subset.js",
-    "office-ui-fabric-react": "node_modules/office-ui-fabric-react/dist/office-ui-fabric-react.js",
-    "react": "node_modules/react/dist/react.min.js",
-    "react-dom": "node_modules/react-dom/dist/react-dom.min.js",
-    "react-dom/server": "node_modules/react-dom/dist/react-dom-server.min.js",
-    "linqts": "node_modules/linqts/dist/linq.js"
-  },
+  "externals": {},
   "localizedResources": {
     "myContactsStrings": "webparts/myContacts/loc/{locale}.js"
   }

config/package-solution.json

@@ -1,10 +1,10 @@
 {
   "solution": {
     "name": "d-4-s-sp-fx-my-contacts-client-side-solution",
-    "id": "caa07132-4f35-44cc-b162-1b919b4867dd",
+    "id": "79640ea4-12ba-40d9-8373-8a4c12fcba04",
     "version": "1.0.0.0"
   },
   "paths": {
-    "zippedPackage": "solution/d-4-s-sp-fx-my-contacts.spapp"
+    "zippedPackage": "solution/d-4-s-sp-fx-my-contacts.sppkg"
   }
 }

config/tslint.json

@@ -16,13 +16,11 @@
       "export-name": false,
       "forin": false,
       "label-position": false,
-      "label-undefined": false,
       "member-access": true,
       "no-arg": false,
       "no-console": false,
       "no-construct": false,
       "no-duplicate-case": true,
-      "no-duplicate-key": false,
       "no-duplicate-variable": true,
       "no-eval": false,
       "no-function-expression": true,
@@ -32,8 +30,6 @@
       "no-unnecessary-semicolons": true,
       "no-unused-expression": true,
       "no-unused-imports": true,
-      "no-unused-variable": true,
-      "no-unreachable": true,
       "no-use-before-declare": true,
       "no-with-statement": true,
       "semicolon": true,

package.json

@@ -6,24 +6,31 @@
     "node": ">=0.10.0"
   },
   "dependencies": {
-    "@microsoft/sp-client-base": "~0.5.1",
-    "@microsoft/sp-client-preview": "~0.7.1",
-    "@microsoft/sp-webpart-base": "^0.2.1",
-    "office-ui-fabric-react": "^0.36.0",
-    "react": "0.14.8",
-    "react-dom": "0.14.8",
-    "sp-pnp-js": "^1.0.6"
+    "@microsoft/sp-client-base": "~1.0.0",
+    "@microsoft/sp-core-library": "~1.0.0",
+    "@microsoft/sp-webpart-base": "~1.0.0",
+    "@types/react": "0.14.46",
+    "@types/react-addons-shallow-compare": "0.14.17",
+    "@types/react-addons-test-utils": "0.14.15",
+    "@types/react-addons-update": "0.14.14",
+    "@types/react-dom": "0.14.18",
+    "@types/webpack-env": ">=1.12.1 <1.14.0",
+    "react": "15.4.2",
+    "react-dom": "15.4.2",
+    "sp-pnp-js": "^2.0.1",
+    "style-loader": "^0.13.2"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "~0.8.1",
-    "@microsoft/sp-module-interfaces": "~0.5.1",
-    "@microsoft/sp-webpart-workbench": "~0.6.1",
+    "@microsoft/sp-build-web": "~1.0.0",
+    "@microsoft/sp-module-interfaces": "~1.0.0",
+    "@microsoft/sp-webpart-workbench": "~1.0.0",
     "gulp": "~3.9.1",
-    "sp-pnp-js": "^1.0.6"
+    "@types/chai": ">=3.4.34 <3.6.0",
+    "@types/mocha": ">=2.2.33 <2.6.0"
   },
   "scripts": {
     "build": "gulp bundle",
-    "clean": "gulp nuke",
+    "clean": "gulp clean",
     "test": "gulp test"
   }
 }

src/webparts/myContacts/MyContactsWebPart.manifest.json

@@ -1,8 +1,8 @@
 {
   "$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
 
-  "id": "8466ed85-3b44-4808-8637-06bb7fa40847",
-  "alias": "MyContacts",
+  "id": "ffc8d80d-f073-4e0d-9056-80dc88cc1a10",
+  "alias": "MyContactsWebPart",
   "componentType": "WebPart",
   "version": "0.0.1",
   "manifestVersion": 2,

src/webparts/myContacts/MyContactsWebPart.ts

@@ -1,17 +1,18 @@
 import * as React from 'react';
 import * as ReactDom from 'react-dom';
+import { Version } from '@microsoft/sp-core-library';
 import { BaseClientSideWebPart,
-  IPropertyPaneSettings,
+  IPropertyPaneConfiguration,
   IWebPartContext,
   PropertyPaneSlider,
   PropertyPaneToggle,
   PropertyPaneDropdown,
   IPropertyPaneDropdownOption } from '@microsoft/sp-webpart-base';
-import { EnvironmentType } from '@microsoft/sp-client-base';
+import { Environment, EnvironmentType } from '@microsoft/sp-core-library';
 import * as strings from 'myContactsStrings';
 import MyContacts, { IMyContactsProps } from './components/MyContacts';
 import { IMyContactsWebPartProps } from './IMyContactsWebPartProps';
-import { Dictionary } from '../../utilities/dictionary';
+import { Dictionary } from '../../utilities/Dictionary';
 import * as Managers from './managers/Managers';
 
 export default class MyContactsWebPart extends BaseClientSideWebPart<IMyContactsWebPartProps> {
@@ -24,14 +25,9 @@ export default class MyContactsWebPart extends BaseClientSideWebPart<IMyContacts
   private _contactLists: Array<IPropertyPaneDropdownOption>;
   private _pictureSizes: Array<IPropertyPaneDropdownOption>;
 
-  public constructor(context: IWebPartContext) {
-    super(context);
-
-    this._dataManger = this._managers[this.context.environment.type.toString()];
-    this._dataManger.SPContext = this.context;
-  }
-
   public onInit(): Promise<void> {
+    this._dataManger = this._managers[Environment.type.toString()];
+    this._dataManger.SPContext = this.context;
     this._dataManger.GetContactLists().then((results) => {
       this._contactLists = new Array<IPropertyPaneDropdownOption>();
       results.forEach(element => {
@@ -47,9 +43,13 @@ export default class MyContactsWebPart extends BaseClientSideWebPart<IMyContacts
     this._pictureSizes.push({ key: 4, text: "large" });
     this._pictureSizes.push({ key: 5, text: "extraLarge" });
 
-    return Promise.resolve();
+    return super.onInit();
   };
 
+  protected get dataVersion(): Version {
+    return Version.parse('1.0');
+  }
+
   public render(): void {
     this._dataManger.ListId = this.properties.listId;
     const element: React.ReactElement<IMyContactsProps> = React.createElement(MyContacts, {
@@ -71,7 +71,7 @@ export default class MyContactsWebPart extends BaseClientSideWebPart<IMyContacts
     super.onPropertyPaneFieldChanged(propertyPath, oldValue, newValue);
   };
 
-  protected get propertyPaneSettings(): IPropertyPaneSettings {
+  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
     return {
       pages: [
         {
@@ -84,7 +84,7 @@ export default class MyContactsWebPart extends BaseClientSideWebPart<IMyContacts
             }, {
               groupName: strings.VisualizationGroup,
               groupFields: [
-                PropertyPaneDropdown('pictureSize', { label: strings.VisualizationGroupImageSize, isDisabled: false, options: this._pictureSizes }),
+                PropertyPaneDropdown('pictureSize', { label: strings.VisualizationGroupImageSize, disabled: false, options: this._pictureSizes }),
                 PropertyPaneToggle("showPhone", { label: strings.VisualizationGroupShowPhone, disabled: false })
               ]
             }
@@ -95,7 +95,7 @@ export default class MyContactsWebPart extends BaseClientSideWebPart<IMyContacts
           groups: [{
             groupName: strings.ConnectionGroup,
             groupFields: [
-              PropertyPaneDropdown('listId', { label: strings.ConnectionGroupListName, isDisabled: false, options: this._contactLists })
+              PropertyPaneDropdown('listId', { label: strings.ConnectionGroupListName, disabled: false, options: this._contactLists })
             ]
           }]
         }

src/webparts/myContacts/components/MyContacts.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IWebPartContext } from '@microsoft/sp-client-preview';
+import { IWebPartContext } from '@microsoft/sp-webpart-base';
 import { Button, ButtonType } from 'office-ui-fabric-react/lib/Button';
 import styles from '../MyContacts.module.scss';
 import { IMyContactsWebPartProps } from '../IMyContactsWebPartProps';