@microsoft/mgt-react - npm Package Compare versions

Comparing version 1.3.0-preview.3 to 2.0.0-preview.1

package.json

 {
   "name": "@microsoft/mgt-react",
-  "version": "1.3.0-preview.3",
+  "version": "2.0.0-preview.1",
   "description": "Microsoft Graph Toolkit React wrapper class",
   "author": "Microsoft",
   "license": "MIT",
-  "module": "dist/esm/index.js",
-  "main": "dist/esm/index.js",
+  "module": "dist/es6/index.js",
+  "main": "dist/es6/index.js",
+  "types": "dist/es6/types.d.ts",
   "files": [
@@ -29,24 +30,22 @@ "dist",
     "clean": "node ./scripts/clean.js",
-    "prepack": "npm run build",
-    "generate": "wca analyze ../../src --format json --outFile temp/web-components.json && node ./scripts/generate.js"
+    "prepack": "shx rm -rf *.tgz && npm run build",
+    "postpack": "cpx *.tgz ../../artifacts",
+    "generate": "wca analyze ../mgt/src --format json --outFile temp/web-components.json && node ./scripts/generate.js"
   },
-  "devDependencies": {
-    "@types/react": "^16.9.32",
-    "@types/react-dom": "^16.9.6",
-    "fs-extra": "^9.0.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "typescript": "^3.8.3",
-    "web-component-analyzer": "^1.0.3"
-  },
-  "prettier": {
-    "printWidth": 120,
-    "singleQuote": true
-  },
   "dependencies": {
-    "@microsoft/mgt": "^1.3.0-preview.3",
+    "@microsoft/mgt": "2.0.0-preview.1",
+    "@microsoft/mgt-element": "2.0.0-preview.1",
     "@microsoft/microsoft-graph-types": "^1.12.0",
     "@microsoft/microsoft-graph-types-beta": "github:microsoftgraph/msgraph-typescript-typings#beta",
     "wc-react": "^0.3.1"
+  },
+  "devDependencies": {
+    "shx": "^0.3.2",
+    "cpx": "^1.5.0",
+    "typescript": "^3.7.5",
+    "web-component-analyzer": "^1.1.6"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

readme.md

@@ -12,3 +12,3 @@ # React wrapper for Microsoft Graph Toolkit
 ```bash
-npm install mgt-react
+npm install @microsoft/mgt-react
 ```
@@ -19,11 +19,5 @@
 ```bash
-yarn add mgt-react
+yarn add @microsoft/mgt-react
 ```
 
-> Note: `mgt-react` does not import the Microsoft Graph Toolkit components automatically. Make sure to have the toolkit imported in your app somewhere:
->
-> ```tsx
-> import `@microsoft/mgt`
-> ```
-
 ## Usage
@@ -34,3 +28,3 @@
 ```tsx
-import { Person } from 'mgt-react';
+import { Person } from '@microsoft/mgt-react';
 ```
@@ -61,3 +55,3 @@
 ```jsx
-import { PeoplePicker } from 'mgt-react';
+import { PeoplePicker } from '@microsoft/mgt-react';
 
@@ -84,3 +78,3 @@ const App = (props) => {
 ```tsx
-import { MgtTemplateProps } from 'mgt-react';
+import { MgtTemplateProps } from '@microsoft/mgt-react';
 
@@ -96,3 +90,3 @@ const MyEvent = (props: MgtTemplateProps) => {
 ```tsx
-import { Agenda } from 'mgt-react';
+import { Agenda } from '@microsoft/mgt-react';
 
@@ -99,0 +93,0 @@ const App = (props) => {

src/generated/react.ts

@@ -1,2 +0,3 @@
-import { IDynamicPerson,TemplateContext,ComponentMediaQuery,PersonCardInteraction,PersonViewType,AvatarSize,TasksStringResource,TaskFilter,SelectedChannel } from '@microsoft/mgt';
+import { IDynamicPerson,PersonType,GroupType,ThemeType,PersonCardInteraction,PersonViewType,AvatarSize,TasksStringResource,TaskFilter,SelectedChannel } from '@microsoft/mgt';
+import * as MgtElement from '@microsoft/mgt-element';
 import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
@@ -6,143 +7,144 @@ import * as MicrosoftGraphBeta from '@microsoft/microsoft-graph-types-beta';
 
-export type PersonCardProps = {
-	personQuery?: string,
-	userId?: string,
-	personDetails?: IDynamicPerson,
-	personImage?: string,
-	fetchImage?: boolean,
-	isExpanded?: boolean,
-	inheritDetails?: boolean,
-	showPresence?: boolean,
-	personPresence?: MicrosoftGraphBeta.Presence,
-	templateContext?: TemplateContext,
-	templateConverters?: TemplateContext,
-	mediaQuery?: ComponentMediaQuery,
-	updated?: (e: Event) => void,
-}
-
-export type PersonProps = {
-	personQuery?: string,
-	userId?: string,
-	showName?: boolean,
-	showEmail?: boolean,
-	showPresence?: boolean,
-	personDetails?: IDynamicPerson,
-	personImage?: string,
-	fetchImage?: boolean,
-	personPresence?: MicrosoftGraphBeta.Presence,
-	personCardInteraction?: PersonCardInteraction,
-	line1Property?: string,
-	line2Property?: string,
-	view?: PersonViewType,
-	avatarSize?: AvatarSize,
-	templateContext?: TemplateContext,
-	templateConverters?: TemplateContext,
-	mediaQuery?: ComponentMediaQuery,
-	updated?: (e: Event) => void,
-}
-
 export type AgendaProps = {
-	date?: string,
-	groupId?: string,
-	days?: number,
-	eventQuery?: string,
-	events?: Array<MicrosoftGraph.Event>,
-	showMax?: number,
-	groupByDay?: boolean,
-	templateContext?: TemplateContext,
-	templateConverters?: TemplateContext,
-	mediaQuery?: ComponentMediaQuery,
-	eventClick?: (e: Event) => void,
-	updated?: (e: Event) => void,
+	date?: string;
+	groupId?: string;
+	days?: number;
+	eventQuery?: string;
+	events?: MicrosoftGraph.Event[];
+	showMax?: number;
+	groupByDay?: boolean;
+	templateConverters?: MgtElement.TemplateContext;
+	templateContext?: MgtElement.TemplateContext;
+	useShadowRoot?: boolean;
+	mediaQuery?: MgtElement.ComponentMediaQuery;
+	eventClick?: (e: Event) => void;
 }
 
 export type GetProps = {
-	resource?: string,
-	scopes?: string[],
-	version?: string,
-	maxPages?: number,
-	pollingRate?: number,
-	templateContext?: TemplateContext,
-	templateConverters?: TemplateContext,
-	mediaQuery?: ComponentMediaQuery,
-	dataChange?: (e: Event) => void,
-	updated?: (e: Event) => void,
+	resource?: string;
+	scopes?: string[];
+	version?: string;
+	maxPages?: number;
+	pollingRate?: number;
+	templateConverters?: MgtElement.TemplateContext;
+	templateContext?: MgtElement.TemplateContext;
+	useShadowRoot?: boolean;
+	mediaQuery?: MgtElement.ComponentMediaQuery;
+	dataChange?: (e: Event) => void;
 }
 
 export type LoginProps = {
-	userDetails?: IDynamicPerson,
-	templateContext?: TemplateContext,
-	templateConverters?: TemplateContext,
-	mediaQuery?: ComponentMediaQuery,
-	loginInitiated?: (e: Event) => void,
-	loginCompleted?: (e: Event) => void,
-	loginFailed?: (e: Event) => void,
-	logoutInitiated?: (e: Event) => void,
-	logoutCompleted?: (e: Event) => void,
-	updated?: (e: Event) => void,
+	userDetails?: IDynamicPerson;
+	templateConverters?: MgtElement.TemplateContext;
+	templateContext?: MgtElement.TemplateContext;
+	useShadowRoot?: boolean;
+	mediaQuery?: MgtElement.ComponentMediaQuery;
+	loginInitiated?: (e: Event) => void;
+	loginCompleted?: (e: Event) => void;
+	loginFailed?: (e: Event) => void;
+	logoutInitiated?: (e: Event) => void;
+	logoutCompleted?: (e: Event) => void;
 }
 
 export type PeoplePickerProps = {
-	groupId?: string,
-	type?: string,
-	groupType?: string,
-	people?: IDynamicPerson[],
-	defaultSelectedUserIds?: string[],
-	placeholder?: string,
-	selectionMode?: string,
-	showMax?: number,
-	selectedPeople?: IDynamicPerson[],
-	templateContext?: TemplateContext,
-	templateConverters?: TemplateContext,
-	mediaQuery?: ComponentMediaQuery,
-	selectionChanged?: (e: Event) => void,
-	updated?: (e: Event) => void,
+	groupId?: string;
+	type?: PersonType;
+	groupType?: GroupType;
+	people?: IDynamicPerson[];
+	defaultSelectedUserIds?: string[];
+	placeholder?: string;
+	selectionMode?: string;
+	showMax?: number;
+	selectedPeople?: IDynamicPerson[];
+	theme?: ThemeType;
+	templateConverters?: MgtElement.TemplateContext;
+	templateContext?: MgtElement.TemplateContext;
+	useShadowRoot?: boolean;
+	mediaQuery?: MgtElement.ComponentMediaQuery;
+	selectionChanged?: (e: Event) => void;
 }
 
 export type PeopleProps = {
-	groupId?: string,
-	userIds?: string[],
-	people?: IDynamicPerson[],
-	peopleQueries?: string[],
-	showPresence?: boolean,
-	personCardInteraction?: PersonCardInteraction,
-	showMax?: number,
-	templateContext?: TemplateContext,
-	templateConverters?: TemplateContext,
-	mediaQuery?: ComponentMediaQuery,
-	updated?: (e: Event) => void,
+	groupId?: string;
+	userIds?: string[];
+	people?: IDynamicPerson[];
+	peopleQueries?: string[];
+	showPresence?: boolean;
+	personCardInteraction?: PersonCardInteraction;
+	showMax?: number;
+	templateConverters?: MgtElement.TemplateContext;
+	templateContext?: MgtElement.TemplateContext;
+	useShadowRoot?: boolean;
+	mediaQuery?: MgtElement.ComponentMediaQuery;
 }
 
+export type PersonCardProps = {
+	personDetails?: IDynamicPerson;
+	personQuery?: string;
+	userId?: string;
+	personImage?: string;
+	fetchImage?: boolean;
+	isExpanded?: boolean;
+	inheritDetails?: boolean;
+	showPresence?: boolean;
+	personPresence?: MicrosoftGraphBeta.Presence;
+	templateConverters?: MgtElement.TemplateContext;
+	templateContext?: MgtElement.TemplateContext;
+	useShadowRoot?: boolean;
+	mediaQuery?: MgtElement.ComponentMediaQuery;
+}
+
+export type PersonProps = {
+	personQuery?: string;
+	userId?: string;
+	showName?: boolean;
+	showEmail?: boolean;
+	showPresence?: boolean;
+	personDetails?: IDynamicPerson;
+	personImage?: string;
+	fetchImage?: boolean;
+	personPresence?: MicrosoftGraphBeta.Presence;
+	personCardInteraction?: PersonCardInteraction;
+	line1Property?: string;
+	line2Property?: string;
+	view?: PersonViewType;
+	avatarSize?: AvatarSize;
+	templateConverters?: MgtElement.TemplateContext;
+	templateContext?: MgtElement.TemplateContext;
+	useShadowRoot?: boolean;
+	mediaQuery?: MgtElement.ComponentMediaQuery;
+}
+
 export type TasksProps = {
-	res?: TasksStringResource,
-	isNewTaskVisible?: boolean,
-	readOnly?: boolean,
-	dataSource?: string,
-	targetId?: string,
-	targetBucketId?: string,
-	initialId?: string,
-	initialBucketId?: string,
-	hideHeader?: boolean,
-	hideOptions?: boolean,
-	groupId?: string,
-	taskFilter?: TaskFilter,
-	templateContext?: TemplateContext,
-	templateConverters?: TemplateContext,
-	mediaQuery?: ComponentMediaQuery,
-	updated?: (e: Event) => void,
+	res?: TasksStringResource;
+	isNewTaskVisible?: boolean;
+	readOnly?: boolean;
+	dataSource?: string;
+	targetId?: string;
+	targetBucketId?: string;
+	initialId?: string;
+	initialBucketId?: string;
+	hideHeader?: boolean;
+	hideOptions?: boolean;
+	groupId?: string;
+	taskFilter?: TaskFilter;
+	templateConverters?: MgtElement.TemplateContext;
+	templateContext?: MgtElement.TemplateContext;
+	useShadowRoot?: boolean;
+	mediaQuery?: MgtElement.ComponentMediaQuery;
+	taskAdded?: (e: Event) => void;
+	taskChanged?: (e: Event) => void;
+	taskClick?: (e: Event) => void;
+	taskRemoved?: (e: Event) => void;
 }
 
 export type TeamsChannelPickerProps = {
-	selectedItem?: SelectedChannel,
-	templateContext?: TemplateContext,
-	templateConverters?: TemplateContext,
-	mediaQuery?: ComponentMediaQuery,
-	selectionChanged?: (e: Event) => void,
-	updated?: (e: Event) => void,
+	selectedItem?: SelectedChannel;
+	templateConverters?: MgtElement.TemplateContext;
+	templateContext?: MgtElement.TemplateContext;
+	useShadowRoot?: boolean;
+	mediaQuery?: MgtElement.ComponentMediaQuery;
+	selectionChanged?: (e: Event) => void;
 }
 
-export const PersonCard = wrapMgt<PersonCardProps>('mgt-person-card');
-
-export const Person = wrapMgt<PersonProps>('mgt-person');
-
 export const Agenda = wrapMgt<AgendaProps>('mgt-agenda');
@@ -158,2 +160,6 @@
 
+export const PersonCard = wrapMgt<PersonCardProps>('mgt-person-card');
+
+export const Person = wrapMgt<PersonProps>('mgt-person');
+
 export const Tasks = wrapMgt<TasksProps>('mgt-tasks');
@@ -160,0 +166,0 @@

src/Mgt.ts

@@ -115,5 +115,5 @@ import React, { ReactNode, ReactElement } from 'react';
 
-    React.Children.forEach(children, (child) => {
+    React.Children.forEach(children, child => {
       let element = child as ReactElement;
-      if (element?.props?.template) {
+      if (element && element.props && element.props.template) {
         templates[element.props.template] = element;
@@ -120,0 +120,0 @@ }

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

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

43652

increased by57.56%

Dev dependency count

4

decreased by-42.86%

Number of package files

22

increased by22.22%

Lines of code

601

increased by1.86%

Worsened metrics

Dependency count

5

increased by25%

Number of lines in readme file

111

decreased by-5.13%

Dependency changes

• + Added@microsoft/mgt-element@2.0.0-preview.1

• + Added@microsoft/mgt@2.0.0-preview.1(transitive)

• + Added@microsoft/mgt-element@2.0.0-preview.1(transitive)

• + Addedidb@5.0.8(transitive)

• - Removed@microsoft/mgt@1.3.6(transitive)

• Updated@microsoft/mgt@2.0.0-preview.1