@microsoft/mgt-element - npm Package Compare versions

Comparing version 2.0.0-preview.9 to 2.0.0-preview.6594bcb

package.json

 {
   "name": "@microsoft/mgt-element",
-  "version": "2.0.0-preview.9",
+  "version": "2.0.0-preview.6594bcb",
   "description": "Microsoft Graph Toolkit base classes",
@@ -15,5 +15,5 @@ "homepage": "https://github.com/microsoftgraph/microsoft-graph-toolkit",
   "license": "MIT",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "module": "./dist/index.js",
+  "main": "./dist/es6/index.js",
+  "types": "./dist/es6/index.d.ts",
+  "module": "./dist/es6/index.js",
   "files": [
@@ -33,22 +33,9 @@ "dist",
     "setLicense": "gulp setLicense --cwd .",
-    "postpack": "cpx *.tgz ../../artifacts",
-    "publish:next": "npm publish --tag next"
+    "postpack": "cpx *.tgz ../../artifacts"
   },
   "dependencies": {
-    "@microsoft/microsoft-graph-client": "^2.0.0",
+    "@microsoft/microsoft-graph-client": "^2.1.1",
     "lit-element": "^2.4.0",
-    "idb": "^5.0.6"
+    "idb": "^5.0.7"
   },
-  "devDependencies": {
-    "cpx": "^1.5.0",
-    "gulp": "^4.0.2",
-    "gulp-append-prepend": "^1.0.8",
-    "gulp-header-license": "^1.0.9",
-    "gulp-rename": "^2.0.0",
-    "gulp-sass": "^4.0.2",
-    "gulp-util": "^3.0.8",
-    "shx": "^0.3.2",
-    "tslint": "^5.20.1",
-    "typescript": "^3.7.5"
-  },
   "publishConfig": {
@@ -55,0 +42,0 @@ "directory": "dist"

README.md

@@ -1,1 +0,93 @@
-# mgt-element
+# Microsoft Graph Toolkit Base package
+
+[![npm](https://img.shields.io/npm/v/@microsoft/mgt-element?style=for-the-badge)](https://www.npmjs.com/package/@microsoft/mgt-element)
+
+The [Microsoft Graph Toolkit (mgt)](https://aka.ms/mgt) library is a collection of authentication providers and UI components powered by Microsoft Graph. 
+
+The `@microsoft/mgt-element` package contains all base classes that enable the providers and components to work together. Use this package to set the global provider, or to create your own providers and/or components that work with Microsoft Graph.
+
+[See docs for full documentation](https://aka.ms/mgt-docs)
+
+## Set and use the global provider
+
+The `@microsoft/mgt-element` package exposes the `Providers` namespace that enables global usage of the authentication providers across your entire app. 
+
+This example illustrates how to instantiate a new provider (MsalProvider in this case) and use it across your app:
+
+1. Install the packages 
+
+    ```bash
+    npm install @microsoft/mgt-element @microsoft/mgt-msal-provider
+    ```
+
+1. Create the provider
+
+    ```ts
+    import {Providers} from '@microsoft/mgt-element';
+    import {MsalProvider} from '@microsoft/mgt-msal-provider';
+
+    // initialize the auth provider globally
+    Providers.globalProvider = new MsalProvider({clientId: 'clientId'});
+    ```
+
+1. Use the provider to sign in and call the graph:
+
+    ```ts
+    import {Providers, ProviderState} from '@microsoft/mgt-element';
+
+    const handleLoginClicked = async () => {
+      await Providers.globalProvider.login();
+
+      if (Providers.globalProvider.state === ProviderState.SignedIn) {
+        let me = await Provider.globalProvider.graph.client.api('/me').get();
+      }
+    }
+    ```
+
+You can learn more about how to use the providers in the [documentation](https://docs.microsoft.com/graph/toolkit/providers).
+
+The providers work well with the `@microsoft/mgt-components` package and all components use the provider automatically when they need to call Microsoft Graph.
+
+## Create your own provider
+
+In scenarios where you want to use the Providers namespace and/or add Microsoft Graph Toolkit components to an application with pre-existing authentication code, you can create a custom provider that hooks into your authentication mechanism. `@microsoft/mgt-element` enables two ways to create new providers:
+
+### Create a Simple Provider
+
+If you already have a function that returns `accessTokens`, you can use a SimpleProvider to wrap the function:
+
+```ts
+import {Providers, SimpleProvider} from '@microsoft/mgt-element';
+
+function getAccessToken(scopes: string[]) {
+  // return a promise with accessToken string
+}
+
+function login() {
+  // login code - optional
+
+  // make sure to set the state when signed in
+  Providers.globalProvider.setState(ProviderState.SignedIn)
+}
+
+function logout() {
+  // logout code - optional
+
+  // make sure to set the state when signed out
+  Providers.globalProvider.setState(ProviderState.SignedOut)
+}
+
+Provider.globalProvider = new SimpleProvider(getAccessToken, login, logout);
+```
+
+### Extend an IProvider
+
+You can extend the IProvider abstract class to create your own provider. The IProvider is similar to the SimpleProvider in that it requires the developer to implement the `getAccessToken()` function.
+
+
+See the [custom provider documentation](https://docs.microsoft.com/en-us/graph/toolkit/providers/custom) for more details on both ways to create custom providers.
+
+## Sea also
+* [Microsoft Graph Toolkit docs](https://aka.ms/mgt-docs)
+* [Microsoft Graph Toolkit repository](https://aka.ms/mgt)
+* [Microsoft Graph Toolkit playground](https://mgt.dev)

src/components/baseComponent.ts

@@ -25,3 +25,3 @@ /**
   /**
-   * devies with width < 1200
+   * devices with width < 1200
    */
@@ -37,3 +37,3 @@ tablet = 'tablet',
 /**
- * BaseComponent extends LitElement including ShadowRoot toggle and fireCustomEvent features
+ * BaseComponent extends LitElement adding mgt specific features to all components
  *
@@ -55,22 +55,2 @@ * @export  MgtBaseComponent
   /**
-   * Get ShadowRoot toggle, returns value of _useShadowRoot
-   *
-   * @static _useShadowRoot
-   * @memberof MgtBaseComponent
-   */
-  public static get useShadowRoot() {
-    return this._useShadowRoot;
-  }
-
-  /**
-   * Set ShadowRoot toggle value
-   *
-   * @static _useShadowRoot
-   * @memberof MgtBaseComponent
-   */
-  public static set useShadowRoot(value: boolean) {
-    this._useShadowRoot = value;
-  }
-
-  /**
    * Gets the ComponentMediaQuery of the component
@@ -114,4 +94,2 @@ *
 
-  private static _useShadowRoot: boolean = true;
-
   /**
@@ -139,8 +117,6 @@ * returns component strings
     super();
-    if (this.isShadowRootDisabled()) {
-      (this as any)._needsShimAdoptedStyleSheets = true;
-    }
     this.handleLocalizationChanged = this.handleLocalizationChanged.bind(this);
-    this.updateDirection = this.updateDirection.bind(this);
-    this.updateDirection();
+    this.handleDirectionChanged = this.handleDirectionChanged.bind(this);
+    this.handleDirectionChanged();
+    this.handleLocalizationChanged();
   }
@@ -156,7 +132,7 @@
     LocalizationHelper.onStringsUpdated(this.handleLocalizationChanged);
-    LocalizationHelper.onDirectionUpdated(this.updateDirection);
+    LocalizationHelper.onDirectionUpdated(this.handleDirectionChanged);
   }
 
   /**
-   * Invoked each time the custom element is removed from the document
+   * Invoked each time the custom element is removed from a document-connected element
    *
@@ -168,27 +144,6 @@ * @memberof MgtBaseComponent
     LocalizationHelper.removeOnStringsUpdated(this.handleLocalizationChanged);
-    LocalizationHelper.removeOnDirectionUpdated(this.updateDirection);
+    LocalizationHelper.removeOnDirectionUpdated(this.handleDirectionChanged);
   }
 
   /**
-   * Request localization changes when the 'strings' event is detected
-   *
-   * @protected
-   * @memberof MgtBaseComponent
-   */
-  protected handleLocalizationChanged() {
-    this.requestUpdate();
-    LocalizationHelper.updateStringsForTag(this.tagName, this.strings);
-  }
-
-  /**
-   * Receive ShadowRoot Disabled value
-   *
-   * @returns boolean _useShadowRoot value
-   * @memberof MgtBaseComponent
-   */
-  public isShadowRootDisabled() {
-    return !MgtBaseComponent._useShadowRoot || !(this.constructor as typeof MgtBaseComponent)._useShadowRoot;
-  }
-
-  /**
    * Invoked when the element is first updated. Implement to perform one time
@@ -243,13 +198,2 @@ * work on the element after update.
   /**
-   * method to create ShadowRoot if disabled flag isn't present
-   *
-   * @protected
-   * @returns boolean
-   * @memberof MgtBaseComponent
-   */
-  protected createRenderRoot() {
-    return this.isShadowRootDisabled() ? this : super.createRenderRoot();
-  }
-
-  /**
    * Invoked whenever the element is updated. Implement to perform
@@ -324,11 +268,10 @@ * post-updating tasks via DOM APIs, for example, focusing an element.
 
-  /**
-   * Adds rtl attribute to component if direction is returned rtl
-   *
-   * @private
-   * @memberof MgtBaseComponent
-   */
-  protected updateDirection() {
+  private handleLocalizationChanged() {
+    LocalizationHelper.updateStringsForTag(this.tagName, this.strings);
+    this.requestUpdate();
+  }
+
+  private handleDirectionChanged() {
     this.direction = LocalizationHelper.getDocumentDirection();
   }
 }

src/components/templatedComponent.ts

@@ -9,5 +9,6 @@ /**
 import { html, PropertyValues } from 'lit-element';
-import { TemplateContext } from '../utils/TemplateContext';
+
 import { equals } from '../utils/equals';
 import { MgtBaseComponent } from './baseComponent';
+import { TemplateContext } from '../utils/TemplateContext';
 import { TemplateHelper } from '../utils/TemplateHelper';
@@ -41,11 +42,2 @@
   /**
-   * Collection of functions to be used in template binding
-   *
-   * @type {MgtElement.TemplateContext}
-   * @memberof MgtTemplatedComponent
-   * @deprecated since 1.2 - use templateContext instead
-   */
-  public templateConverters: TemplateContext;
-
-  /**
    * Additional data context to be used in template binding
@@ -75,6 +67,2 @@ * Use this to add event listeners or value converters
     this.templateContext = this.templateContext || {};
-    this.templateConverters = this.templateConverters || {};
-
-    this.templateContext.lower = (str: string) => str.toLowerCase();
-    this.templateContext.upper = (str: string) => str.toUpperCase();
   }
@@ -143,3 +131,2 @@
     TemplateHelper.renderTemplate(div, this.templates[templateType], context, {
-      ...this.templateConverters,
       ...this.templateContext
@@ -146,0 +133,0 @@ });

src/index.ts

@@ -12,7 +12,11 @@ /**
 export * from './BetaGraph';
+
 export * from './components/baseComponent';
 export * from './components/baseProvider';
 export * from './components/templatedComponent';
+
 export * from './providers/IProvider';
 export * from './providers/Providers';
+export * from './providers/SimpleProvider';
+
 export * from './utils/Cache';
@@ -27,3 +31,4 @@ export * from './utils/EventDispatcher';
 export * from './utils/LocalizationHelper';
+
 export * from './mock/MockProvider';
 export * from './mock/mgt-mock-provider';

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

781270

increased by101.75%

Dev dependency count

0

decreased by-100%

Number of package files

143

increased by0.7%

Number of lines in readme file

94

increased by9300%

Worsened metrics

Lines of code

6889

decreased by-2.35%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@microsoft/microsoft-graph-client@^2.1.1

• Updatedidb@^5.0.7