Updated samples to use local package dependencies (#655)

shweaver-MSFT · nmetulev · web-flow · commit b5c69601defa · 2020-09-29T16:26:44.000-07:00
* Updated vue-app to use local packages

* Updated samples to use re-exported contructs from mgt instead of mgt-element

Co-authored-by: Nikola Metulev &lt;nmetulev@users.noreply.github.com&gt;
diff --git a/docs/preview/mgt-element.md b/docs/preview/mgt-element.md
@@ -4,14 +4,15 @@ Going forward in version 2, Microsoft Graph Toolkit will be broken up into multi
 
 `@microsft/mgt-element` is the first of these packages. It contains the low level interfaces and base classes that all MGT components and providers are built upon.
 
-The most notable change for consuming apps is the relocation of the `Providers` class. Access to the global provider instance is managed through `Providers`, so any module references will need to import from `@microsoft/mgt-element` instead.
-
 ```ts
 <script type="module">
-    import { MsalProvider } from '@microsoft/mgt';
-    import { IGraph, IProvider, Providers } from '@microsoft/mgt-element'
+    import { IProvider, Providers } from '@microsoft/mgt-element'
+
+    export class MyProvider extends IProvider {
+        // Create your own provider
+    }
 
-    const provider: IProvider = new MsalProvider({ clientId: '[CLIENT-ID]' });
+    const provider: IProvider = new MyProvider();
     Providers.globalProvider = provider;
 
     const graph: IGraph = provider.graph;
diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "packages": ["packages/*", "samples/react-app", "samples/angular-app"],
+  "packages": ["packages/*", "samples/react-app", "samples/angular-app", "samples/vue-app"],
   "npmClient": "yarn",
   "useWorkspaces": true,
   "version": "independent"
diff --git a/package.json b/package.json
@@ -4,7 +4,8 @@
   "workspaces": [
     "packages/*",
     "samples/react-app",
-    "samples/angular-app"
+    "samples/angular-app",
+    "samples/vue-app"
   ],
   "scripts": {
     "build": "npm run prettier:check && npm run clean && lerna run build --scope @microsoft/*",
diff --git a/samples/angular-app/package.json b/samples/angular-app/package.json
@@ -21,7 +21,6 @@
     "@angular/router": "~9.1.6",
     "@azure/msal-angular": "^1.0.0",
     "@microsoft/mgt": "*",
-    "@microsoft/mgt-element": "*",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"
diff --git a/samples/angular-app/src/app/app.component.ts b/samples/angular-app/src/app/app.component.ts
@@ -1,7 +1,6 @@
 import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
 import { MsalService } from '@azure/msal-angular';
-import { MsalProvider } from '@microsoft/mgt';
-import { LoginType, Providers, ProviderState, TemplateHelper } from '@microsoft/mgt-element';
+import { MsalProvider, LoginType, Providers, ProviderState, TemplateHelper } from '@microsoft/mgt';
 import { MSALAngularConfig } from '../environments/environment.msal';
 
 @Component({
diff --git a/samples/angular-app/src/environments/environment.msal.ts b/samples/angular-app/src/environments/environment.msal.ts
@@ -7,7 +7,7 @@ const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigato
 
 export const MsalConfig: Configuration = {
   auth: {
-    clientId: '[YOUR-CLIENT-ID]',
+    clientId: 'a974dfa0-9f57-49b9-95db-90f04ce2111a',
     authority: 'https://login.microsoftonline.com/common/',
     validateAuthority: true,
     redirectUri: 'http://localhost:4200/',
diff --git a/samples/examples/person-card-extensions.html b/samples/examples/person-card-extensions.html
@@ -15,7 +15,7 @@
     </mgt-person>
 
     <script type="module">
-      import { Providers } from '../../packages/mgt-element/dist/index.js';
+      import { Providers } from '../../packages/mgt/es6/dist/index.js';
 
       let mgtPerson = document.querySelector('mgt-person');
       mgtPerson.addEventListener('templateRendered', async e => {
diff --git a/samples/react-app/package.json b/samples/react-app/package.json
@@ -4,7 +4,6 @@
   "private": true,
   "dependencies": {
     "@microsoft/mgt": "*",
-    "@microsoft/mgt-element": "*",
     "@microsoft/mgt-react": "*",
     "@webcomponents/webcomponentsjs": "2.2.10",
     "react": "^16.8.5",
diff --git a/samples/react-app/src/index.js b/samples/react-app/src/index.js
@@ -13,8 +13,7 @@ import '../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
-import { Providers } from '@microsoft/mgt-element';
-import { MsalProvider } from '@microsoft/mgt';
+import { Providers, MsalProvider } from '@microsoft/mgt';
 import { MockProvider } from '@microsoft/mgt/dist/es6/mock/MockProvider';
 
 Providers.globalProvider = new MockProvider(true);
diff --git a/samples/teams-tab/index.html b/samples/teams-tab/index.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <script src="https://unpkg.com/@microsoft/teams-js/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
-    <script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
+    <script src="../../packages/mgt/dist/es6/index.js"></script>
   </head>
   <body>
     <mgt-teams-provider client-id="<CLIENT-ID>" auth-popup-url="auth.html"></mgt-teams-provider>
diff --git a/samples/vue-app/README.md b/samples/vue-app/README.md
@@ -6,33 +6,38 @@ The sample was initially created with the [vue-cli](https://cli.vuejs.org/) tool
 
 ## Setting up Vue for MGT
 
-1. Install MGT with `npm install @microsoft/mgt`
+1. Install MGT with `yarn add @microsoft/mgt`
 2. In your `App.vue` or other Vue components, add an import with the components you want to use E.g. `import { MgtMsalProvider, MgtLogin, MgtAgenda } from '@microsoft/mgt';`.
 3. Now you can use those MGT components in your Vue component!
 
 ## Project setup
-```
-npm install
+```bash
+# Run these commands at the repo root directory to build the local mgt packages
+# and install dependencies in node_modules folders.
+npm i -g yarn
+yarn
+yarn build
+cd ./samples/vue-app
 ```
 
 ### Compiles and hot-reloads for development
-```
-npm run serve
+```bash
+yarn serve
 ```
 
 ### Compiles and minifies for production
-```
-npm run build
+```bash
+yarn build
 ```
 
 ### Run your tests
-```
-npm run test
+```bash
+yarn test
 ```
 
 ### Lints and fixes files
 ```
-npm run lint
+yarn lint
 ```
 
 ### Customize configuration
diff --git a/samples/vue-app/package.json b/samples/vue-app/package.json
@@ -1,14 +1,14 @@
 {
   "name": "vue-app",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@microsoft/mgt": "0.1.1",
+    "@microsoft/mgt": "*",
     "vue": "^2.6.10",
     "vue-class-component": "^7.0.2",
     "vue-property-decorator": "^8.1.0"
diff --git a/samples/vue-app/src/App.vue b/samples/vue-app/src/App.vue
@@ -1,9 +1,9 @@
 <template>
-  <div id="app"
-       :class="{ 'loggedOut' : !signedIn, 'loggedIn' : signedIn }">
-    <mgt-msal-provider 
+  <div id="app" :class="{ loggedOut: !signedIn, loggedIn: signedIn }">
+    <mgt-msal-provider
       client-id="a974dfa0-9f57-49b9-95db-90f04ce2111a"
-      scopes="user.read,people.read,user.readbasic.all,contacts.read,calendars.read,files.read,group.read.all,tasks.readwrite">
+      scopes="user.read,people.read,user.readbasic.all,contacts.read,calendars.read,files.read,group.read.all,tasks.readwrite"
+    >
     </mgt-msal-provider>
 
     <header v-if="!signedIn">
@@ -16,7 +16,7 @@
       </mgt-login>
     </header>
 
-    <logged-in-page v-if="signedIn"/>
+    <logged-in-page v-if="signedIn" />
   </div>
 </template>
 
@@ -27,8 +27,8 @@ import LoggedInPage from './components/LoggedInPage.vue';
 
 @Component({
   components: {
-    LoggedInPage,
-  },
+    LoggedInPage
+  }
 })
 export default class App extends Vue {
   private signedIn = false;
@@ -63,84 +63,84 @@ export default class App extends Vue {
 </script>
 
 <style lang="scss">
-  body {
-    margin: 0px;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  }
+body {
+  margin: 0px;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
 
-  #app {
-    &.loggedOut {
-      background: url('/background.svg');
-      background-size: 100% 100%;
-      height: 100vh;
-    }
+#app {
+  &.loggedOut {
+    background: url('/background.svg');
+    background-size: 100% 100%;
+    height: 100vh;
   }
+}
 
-  header {
-    background-color: white;
-    border: 1px solid #C8C6C4;
-    box-sizing: border-box;
-    box-shadow: 0px -4px 56px rgba(10, 38, 66, 0.05), 0px 4px 16px rgba(0, 0, 0, 0.07);
-    
-    width: 664px;
-    height: 458px;
+header {
+  background-color: white;
+  border: 1px solid #c8c6c4;
+  box-sizing: border-box;
+  box-shadow: 0px -4px 56px rgba(10, 38, 66, 0.05), 0px 4px 16px rgba(0, 0, 0, 0.07);
 
-    margin: auto;
+  width: 664px;
+  height: 458px;
 
-    position: relative;
-    top: 50%;
-    transform: perspective(1px) translateY(-50%);
+  margin: auto;
 
-    font-style: normal;
-    text-align: center;
+  position: relative;
+  top: 50%;
+  transform: perspective(1px) translateY(-50%);
 
-    h1 {
-      font-size: 56px;
-      font-weight: 350;
-      line-height: 100%;/* or 56px */
+  font-style: normal;
+  text-align: center;
 
-      margin: 72px 0px 0px 0px;
+  h1 {
+    font-size: 56px;
+    font-weight: 350;
+    line-height: 100%; /* or 56px */
 
-      color: #323130;
-    }
+    margin: 72px 0px 0px 0px;
+
+    color: #323130;
+  }
 
-    p {
-      font-size: 16px;
-      line-height: 24px;/* or 150% */
+  p {
+    font-size: 16px;
+    line-height: 24px; /* or 150% */
 
-      margin: 64px 0px 0px 0px;
+    margin: 64px 0px 0px 0px;
 
-      color: #323130;
-    }
+    color: #323130;
+  }
 
-    mgt-login {    
-      margin: 64px auto 0px auto;
+  mgt-login {
+    margin: 64px auto 0px auto;
 
-      width: 160px;
-      --width: 160px;
-      height: 50px;
-      --height: 50px;
+    width: 160px;
+    --width: 160px;
+    height: 50px;
+    --height: 50px;
 
-      --color: white;
-      --background-color: #0078D4;
+    --color: white;
+    --background-color: #0078d4;
 
-      div {
-        width: 100%;
-      }
+    div {
+      width: 100%;
     }
   }
+}
 
-  #fileBrowser {
-    position: absolute;
+#fileBrowser {
+  position: absolute;
 
-    top: 32px;
-    left: 32px;
+  top: 32px;
+  left: 32px;
 
-    padding: 32px;
+  padding: 32px;
 
-    z-index: 9999;
+  z-index: 9999;
 
-    background: white;
-    box-shadow: 0px -4px 56px rgba(10, 38, 66, 0.05), 0px 4px 16px rgba(0, 0, 0, 0.07);
-  }
+  background: white;
+  box-shadow: 0px -4px 56px rgba(10, 38, 66, 0.05), 0px 4px 16px rgba(0, 0, 0, 0.07);
+}
 </style>
diff --git a/samples/vue-app/src/components/LoggedInPage.vue b/samples/vue-app/src/components/LoggedInPage.vue
diff --git a/samples/vue-app/src/components/RecentFileList.vue b/samples/vue-app/src/components/RecentFileList.vue

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "packages": ["packages/*", "samples/react-app", "samples/angular-app"],`
	`2`	`+ "packages": ["packages/*", "samples/react-app", "samples/angular-app", "samples/vue-app"],`
`3`	`3`	`"npmClient": "yarn",`
`4`	`4`	`"useWorkspaces": true,`
`5`	`5`	`"version": "independent"`