Merge branch 'master' into mhawker/vue-sample-demo

Author: nmetulev

.vscode/snippets/typescript.json

@@ -1,6 +1,6 @@
 {
   "MgtComponent": {
-    "prefix": "newmgt",
+    "prefix": "mgtnew",
     "body": [
       "import { html, css, customElement, property } from 'lit-element';",
       "import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';",
@@ -11,18 +11,21 @@
       "@customElement('${1:mgt-component}')",
       "export class ${2:MgtComponent} extends MgtTemplatedComponent {",
       "  @property({",
-      "  attribute: 'my-name',",
+      "  attribute: 'my-title',",
       "    type: String",
       "  })",
-      "  myName: string;",
+      "  myTitle: string = 'My First Component';",
+      "",
+      "  // assignment to this property will re-render the component",
+      "  @property({ attribute: false }) private _me: MicrosoftGraph.User;",
       "",
       "  attributeChangedCallback(name, oldval, newval) {",
       "    super.attributeChangedCallback(name, oldval, newval);",
       "",
       "    // TODO: handle when an attribute changes.",
       "    //",
       "    // Ex: load data when the name attribute changes",
-      "    // if (name === 'name' && oldval !== newval){",
+      "    // if (name === 'person-id' && oldval !== newval){",
       "    //  this.loadData();",
       "    // }",
       "  }",
@@ -40,25 +43,27 @@
       "    }",
       "",
       "    // TODO: load data from the graph",
+      "    this._me = await provider.graph.client.api('/me').get();",
       "  }",
       "",
       "  static get styles() {",
       "    return css`",
-      "      .root {",
+      "      .title {",
       "        color: red;",
       "      }",
       "    `;",
       "  }",
       "",
       "  render() {",
-      "    return html`",
+      "    $0return html`",
       "      <div class='root'>",
-      "        Hello ${this.myName}!$0",
+      "        <h1 class='title'>${this.myTitle}</h1>",
+      "        ${this._me ? `Hello ${this._me.displayName}` : `Not signed in`}!",
       "      </div>",
       "    `;",
       "  }",
       "}"
     ],
-    "description": "Create New Component"
+    "description": "Create New Mgt Component"
   }
 }

CONTRIBUTING.md

@@ -35,6 +35,26 @@ npm install
 npm start
 ```
 
+## Creating a new component (quick start)
+
+The best way to get started with a new component is to use our snippets for scaffolding:
+
+> Note: The steps below assume you are using Visual Studio Code and you've installed all the recommended extensions.
+
+1. Chose a name for your component. The component must be prefixed with `mgt`. For example `mgt-component`
+
+1. Create a new folder for your new component under `src` \ `components` and name it with the name of your component.
+
+1. Create a new typescript file in your new folder with the same name. Ex: `mgt-component.ts`
+
+1. Open the file and use the `mgtnew` snippet to scaffold the new component.
+
+    > To use a snippet, start typing the name of the snippet (`mgtnew`) and press `tab`
+
+1. Tab through the generated code to set the name of your component. 
+
+1. Add your code!
+
 <!-- ## Testing the preview NPM package
 
 If you want to install the preview package just once, run this command: