Added snippet for creating new components

Author: nmetulev

.vscode/extensions.json

@@ -1,5 +1,10 @@
 {
   // See https://go.microsoft.com/fwlink/?LinkId=827846
   // for the documentation about the extensions.json format
-  "recommendations": ["nicolasparada.innerhtml", "bierner.lit-html", "esbenp.prettier-vscode"]
+  "recommendations": [
+    "nicolasparada.innerhtml",
+    "bierner.lit-html",
+    "esbenp.prettier-vscode",
+    "rebornix.project-snippets"
+  ]
 }

.vscode/snippets/typescript.json

@@ -0,0 +1,64 @@
+{
+  "MgtComponent": {
+    "prefix": "newmgt",
+    "body": [
+      "import { html, css, customElement, property } from 'lit-element';",
+      "import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';",
+      "import { MgtTemplatedComponent } from '../templatedComponent';",
+      "import { Providers } from '../../Providers';",
+      "import { ProviderState } from '../../providers/IProvider';",
+      "",
+      "@customElement('${1:mgt-component}')",
+      "export class ${2:MgtComponent} extends MgtTemplatedComponent {",
+      "  @property({",
+      "  attribute: 'my-name',",
+      "    type: String",
+      "  })",
+      "  myName: string;",
+      "",
+      "  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){",
+      "    //  this.loadData();",
+      "    // }",
+      "  }",
+      "",
+      "  firstUpdated() {",
+      "    Providers.onProviderUpdated(() => this.loadData());",
+      "    this.loadData();",
+      "  }",
+      "",
+      "  private async loadData() {",
+      "    let provider = Providers.globalProvider;",
+      "",
+      "    if (!provider || provider.state !== ProviderState.SignedIn) {",
+      "      return;",
+      "    }",
+      "",
+      "    // TODO: load data from the graph",
+      "  }",
+      "",
+      "  static get styles() {",
+      "    return css`",
+      "      .root {",
+      "        color: red;",
+      "      }",
+      "    `;",
+      "  }",
+      "",
+      "  render() {",
+      "    return html`",
+      "      <div class='root'>",
+      "        Hello ${this.myName}!$0",
+      "      </div>",
+      "    `;",
+      "  }",
+      "}"
+    ],
+    "description": "Create New Component"
+  }
+}