feat: enable live code inclusion for consuming applications

cem-plugins/mgt-tag-plugin.mjs

@@ -0,0 +1,37 @@
+import { resolveModuleOrPackageSpecifier } from '@custom-elements-manifest/analyzer/src/utils/index.js';
+export default function mgtTagPlugin() {
+  function isCustomRegistration(node) {
+    // this would be better if we tested arg[0] for a string literal
+    return node?.expression?.getText() === 'registerComponent' && node.arguments.length >= 2;
+  }
+  // Write a custom plugin
+  return {
+    // Make sure to always give your plugins a name, this helps when debugging
+    name: 'mgt-tag-plugin',
+    // Runs for all modules in a project, before continuing to the analyzePhase
+    collectPhase({ ts, node, context }) {},
+    // Runs for each module
+    analyzePhase({ ts: TS, node, moduleDoc, context }) {
+      if (isCustomRegistration(node)) {
+        //do things...
+        if (context.dev) console.log(node);
+
+        var elementClass = node.arguments[1].text;
+        var elementTag = node.arguments[0].text;
+        const definitionDoc = {
+          kind: 'custom-element-definition',
+          name: elementTag,
+          declaration: {
+            name: elementClass,
+            ...resolveModuleOrPackageSpecifier(moduleDoc, context, elementClass)
+          }
+        };
+        moduleDoc.exports = [...(moduleDoc.exports || []), definitionDoc];
+      }
+    },
+    // Runs for each module, after analyzing, all information about your module should now be available
+    moduleLinkPhase({ moduleDoc, context }) {},
+    // Runs after modules have been parsed and after post-processing
+    packageLinkPhase({ customElementsManifest, context }) {}
+  };
+}

custom-elements-manifest.config.mjs

@@ -0,0 +1,5 @@
+import mgtTagPlugin from './cem-plugins/mgt-tag-plugin.mjs';
+
+export default {
+  plugins: [mgtTagPlugin()]
+};

lerna.json

@@ -1,5 +1,9 @@
 {
-  "packages": ["packages/*", "packages/providers/*", "samples/react-contoso"],
+  "packages": [
+    "packages/*",
+    "packages/providers/*",
+    "samples/*"
+  ],
   "npmClient": "yarn",
   "version": "independent"
-}
+}

package.json

@@ -6,7 +6,7 @@
     "packages": [
       "packages/*",
       "packages/providers/*",
-      "samples/react-contoso"
+      "samples/*"
     ],
     "nohoist": [
       "**/@microsoft/sp-office-ui-fabric-core**",
@@ -16,7 +16,7 @@
   },
   "scripts": {
     "init": "yarn && yarn build",
-    "analyze": "custom-elements-manifest analyze --litelement --globs \"./packages/*/src/**/*.ts\"",
+    "analyze": "custom-elements-manifest analyze --globs \"./packages/*/src/**/*.ts\"",
     "build": "npm run prettier:check && npm run clean && lerna run build --scope @microsoft/*",
     "build:compile": "npm run prettier:check && npm run clean && lerna run build:compile --scope @microsoft/*",
     "build:mgt": "cd ./packages/mgt && npm run build",

packages/mgt-components/package.json

@@ -35,6 +35,10 @@
     "sass": "gulp sass --cwd .",
     "sass:watch": "gulp watchSass --cwd ."
   },
+  "sideEffects": [
+    "./dist/es6/index.js",
+    "./src/index.ts"
+  ],
   "dependencies": {
     "@microsoft/mgt-element": "*",
     "@microsoft/microsoft-graph-client": "3.0.2",
@@ -46,4 +50,4 @@
   "publishConfig": {
     "directory": "dist"
   }
-}
+}

packages/mgt-components/src/components/components.ts

@@ -25,6 +25,7 @@ import './mgt-messages/mgt-messages';
 import './mgt-organization/mgt-organization';
 import './mgt-profile/mgt-profile';
 import './mgt-theme-toggle/mgt-theme-toggle';
+import './sub-components/mgt-spinner/mgt-spinner';
 
 export * from './mgt-agenda/mgt-agenda';
 export * from './mgt-file/mgt-file';
@@ -47,3 +48,6 @@ export * from './mgt-messages/mgt-messages';
 export * from './mgt-organization/mgt-organization';
 export * from './mgt-profile/mgt-profile';
 export * from './mgt-theme-toggle/mgt-theme-toggle';
+export * from './sub-components/mgt-spinner/mgt-spinner';
+// include preview components here for ease of import into mgt-react
+export * from './preview';

packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts

@@ -8,17 +8,17 @@
 import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
 import { html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
-import { Providers, ProviderState, MgtTemplatedComponent, mgtHtml, customElement } from '@microsoft/mgt-element';
+import { Providers, ProviderState, MgtTemplatedComponent, mgtHtml } from '@microsoft/mgt-element';
 import '../../styles/style-helper';
 import '../mgt-person/mgt-person';
 import { styles } from './mgt-agenda-css';
 import { getEventsPageIterator, getEventsQueryPageIterator } from './mgt-agenda.graph';
 import { SvgIcon, getSvg } from '../../utils/SvgHelper';
-import { MgtPeople } from '../mgt-people/mgt-people';
+import { MgtPeople, registerMgtPeopleComponent } from '../mgt-people/mgt-people';
 import { registerFluentComponents } from '../../utils/FluentComponents';
 import { fluentCard } from '@fluentui/web-components';
 import { classMap } from 'lit/directives/class-map.js';
-registerFluentComponents(fluentCard);
+import { registerComponent } from '../registerComponent';
 
 /**
  * Web Component which represents events in a user or group calendar.
@@ -45,7 +45,15 @@ registerFluentComponents(fluentCard);
  * @cssprop --event-location-color - {Color} Event location color
  * @cssprop --event-attendees-color - {Color} Event attendees color
  */
-@customElement('agenda')
+
+export const registerMgtAgendaComponent = () => {
+  registerFluentComponents(fluentCard);
+  // register dependent components
+  registerMgtPeopleComponent();
+  // register self
+  registerComponent('agenda', MgtAgenda);
+};
+
 export class MgtAgenda extends MgtTemplatedComponent {
   /**
    * Array of styles to apply to the element. The styles should be defined

packages/mgt-components/src/components/mgt-contact/mgt-contact.ts

@@ -7,14 +7,15 @@
 
 import { User } from '@microsoft/microsoft-graph-types';
 import { html, TemplateResult } from 'lit';
-import { TeamsHelper, customElement } from '@microsoft/mgt-element';
+import { TeamsHelper } from '@microsoft/mgt-element';
 import { classMap } from 'lit/directives/class-map.js';
 
 import { getEmailFromGraphEntity } from '../../graph/graph.people';
 import { BasePersonCardSection } from '../BasePersonCardSection';
 import { styles } from './mgt-contact-css';
 import { getSvg, SvgIcon } from '../../utils/SvgHelper';
 import { strings } from './strings';
+import { registerComponent } from '../registerComponent';
 
 /**
  * Represents a contact part and its metadata
@@ -31,15 +32,17 @@ interface IContactPart {
 
 type Protocol = 'mailto:' | 'tel:';
 
+export const registerMgtContactComponent = () => {
+  registerComponent('contact', MgtContact);
+};
+
 /**
  * The contact details subsection of the person card
  *
  * @export
  * @class MgtContact
  * @extends {MgtTemplatedComponent}
  */
-@customElement('contact')
-// @customElement('mgt-contact')
 export class MgtContact extends BasePersonCardSection {
   /**
    * Array of styles to apply to the element. The styles should be defined

packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts

@@ -10,7 +10,6 @@ import {
   GraphPageIterator,
   Providers,
   ProviderState,
-  customElement,
   mgtHtml,
   MgtTemplatedComponent
 } from '@microsoft/mgt-element';
@@ -42,14 +41,21 @@ import { getSvg, SvgIcon } from '../../utils/SvgHelper';
 import { OfficeGraphInsightString, ViewType } from '../../graph/types';
 import { styles } from './mgt-file-list-css';
 import { strings } from './strings';
-import { MgtFile } from '../mgt-file/mgt-file';
-import { MgtFileUploadConfig } from './mgt-file-upload/mgt-file-upload';
+import { MgtFile, registerMgtFileComponent } from '../mgt-file/mgt-file';
+import { MgtFileUploadConfig, registerMgtFileUploadComponent } from './mgt-file-upload/mgt-file-upload';
 
 import { fluentProgressRing } from '@fluentui/web-components';
 import { registerFluentComponents } from '../../utils/FluentComponents';
 import { CardSection } from '../BasePersonCardSection';
+import { registerComponent } from '../registerComponent';
 
-registerFluentComponents(fluentProgressRing);
+export const registerMgtFileListComponent = () => {
+  registerFluentComponents(fluentProgressRing);
+
+  registerMgtFileComponent();
+  registerMgtFileUploadComponent();
+  registerComponent('file-list', MgtFileList);
+};
 
 /**
  * The File List component displays a list of multiple folders and files by
@@ -77,8 +83,6 @@ registerFluentComponents(fluentProgressRing);
  * @cssprop --show-more-button-border-bottom-left-radius - {String} the "show more" button bottom left border radius. Default value is 8px;
  * @cssprop --progress-ring-size -{String} Progress ring height and width. Default value is 24px.
  */
-
-@customElement('file-list')
 export class MgtFileList extends MgtTemplatedComponent implements CardSection {
   @state() private _isCompact = false;
   /**

packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts

@@ -26,8 +26,8 @@ import { getSvg, SvgIcon } from '../../../utils/SvgHelper';
 import { formatBytes } from '../../../utils/Utils';
 import { styles } from './mgt-file-upload-css';
 import { strings } from './strings';
-
-registerFluentComponents(fluentProgress, fluentButton, fluentCheckbox, fluentDialog);
+import { registerComponent } from '../../registerComponent';
+import { registerMgtFileComponent } from '../../mgt-file/mgt-file';
 
 /**
  * Simple union type for file system entry and directory entry types
@@ -236,6 +236,13 @@ interface FileWithPath extends File {
   fullPath: string;
 }
 
+export const registerMgtFileUploadComponent = () => {
+  registerFluentComponents(fluentProgress, fluentButton, fluentCheckbox, fluentDialog);
+
+  registerMgtFileComponent();
+  registerComponent('file-upload', MgtFileUpload);
+};
+
 /**
  * A component to upload files to OneDrive or SharePoint Sites
  *
@@ -264,8 +271,6 @@ interface FileWithPath extends File {
  * @cssprop --file-upload-dialog-height - {String} the height of the file upload dialog box. Default value is auto.
  * @cssprop --file-upload-dialog-padding - {String} the padding of the file upload dialog box. Default value is 24px;
  */
-
-@customElement('file-upload')
 export class MgtFileUpload extends MgtBaseComponent {
   /**
    * Array of styles to apply to the element. The styles should be defined

packages/mgt-components/src/components/mgt-file/mgt-file.ts

@@ -31,6 +31,9 @@ import { OfficeGraphInsightString, ViewType } from '../../graph/types';
 import { getFileTypeIconUriByExtension } from '../../styles/fluent-icons';
 import { getSvg, SvgIcon } from '../../utils/SvgHelper';
 import { strings } from './strings';
+import { registerComponent } from '../registerComponent';
+
+export const registerMgtFileComponent = () => registerComponent('file', MgtFile);
 
 /**
  * The File component is used to represent an individual file/folder from OneDrive or SharePoint by displaying information such as the file/folder name, an icon indicating the file type, and other properties such as the author, last modified date, or other details selected by the developer.
@@ -62,8 +65,6 @@ import { strings } from './strings';
  * @cssprop --file-line3-color - {Color} the third line text color.
  * @cssprop --file-line3-text-transform - {String} the third line text text transform. Default value is 400.
  */
-
-@customElement('file')
 export class MgtFile extends MgtTemplatedComponent {
   /**
    * Array of styles to apply to the element. The styles should be defined

packages/mgt-components/src/components/mgt-get/mgt-get.ts

@@ -16,14 +16,17 @@ import {
   Providers,
   ProviderState,
   customElement,
-  CollectionResponse
+  CollectionResponse,
+  IGraph
 } from '@microsoft/mgt-element';
 
 import { getPhotoForResource } from '../../graph/graph.photos';
 import { getDocumentThumbnail } from '../../graph/graph.files';
 import { schemas } from '../../graph/cacheStores';
 import { CacheResponse } from '../CacheResponse';
 import { Entity } from '@microsoft/microsoft-graph-types';
+import { GraphRequest } from '@microsoft/microsoft-graph-client';
+import { registerComponent } from '../registerComponent';
 
 /**
  * Simple holder type for an image
@@ -79,6 +82,8 @@ export type DataChangedDetail = {
   error?: object;
 };
 
+export const registerMgtGetComponent = () => registerComponent('get', MgtGet);
+
 /**
  * Custom element for making Microsoft Graph get queries
  *
@@ -88,7 +93,6 @@ export type DataChangedDetail = {
  * @class mgt-get
  * @extends {MgtTemplatedComponent}
  */
-@customElement('get')
 export class MgtGet extends MgtTemplatedComponent {
   /**
    * The resource to get
@@ -355,8 +359,8 @@ export class MgtGet extends MgtTemplatedComponent {
             isDeltaLink = new URL(uri, 'https://graph.microsoft.com').pathname.endsWith('delta');
           }
 
-          const graph = provider.graph.forComponent(this);
-          let request = graph.api(uri).version(this.version);
+          const graph: IGraph = provider.graph.forComponent(this);
+          let request: GraphRequest = graph.api(uri).version(this.version);
 
           if (this.scopes?.length) {
             request = request.middlewareOptions(prepScopes(...this.scopes));

packages/mgt-components/src/components/mgt-login/mgt-login.ts

@@ -9,19 +9,12 @@ import { CSSResult, html, TemplateResult } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import {
-  Providers,
-  ProviderState,
-  MgtTemplatedComponent,
-  IProviderAccount,
-  mgtHtml,
-  customElement
-} from '@microsoft/mgt-element';
+import { Providers, ProviderState, MgtTemplatedComponent, IProviderAccount, mgtHtml } from '@microsoft/mgt-element';
 
 import { AvatarSize, IDynamicPerson, ViewType } from '../../graph/types';
-import { MgtFlyout } from '../sub-components/mgt-flyout/mgt-flyout';
+import { MgtFlyout, registerMgtFlyoutComponent } from '../sub-components/mgt-flyout/mgt-flyout';
 import { getUserWithPhoto } from '../../graph/graph.userWithPhoto';
-import { MgtPerson } from '../mgt-person/mgt-person';
+import { MgtPerson, registerMgtPersonComponent } from '../mgt-person/mgt-person';
 import { PersonViewType } from '../mgt-person/mgt-person-types';
 
 import { getSvg, SvgIcon } from '../../utils/SvgHelper';
@@ -33,7 +26,7 @@ import '../../styles/style-helper';
 
 import { fluentListbox, fluentProgressRing, fluentButton, fluentCard } from '@fluentui/web-components';
 import { registerFluentComponents } from '../../utils/FluentComponents';
-registerFluentComponents(fluentListbox, fluentProgressRing, fluentButton, fluentCard);
+import { registerComponent } from '../registerComponent';
 
 /**
  * loginViewType describes the enum strings that can be passed in to determine
@@ -46,6 +39,14 @@ type PersonViewConfig = {
   avatarSize: AvatarSize;
 };
 
+export const registerMgtLoginComponent = () => {
+  registerFluentComponents(fluentListbox, fluentProgressRing, fluentButton, fluentCard);
+
+  registerMgtFlyoutComponent();
+  registerMgtPersonComponent();
+  registerComponent('login', MgtLogin);
+};
+
 /**
  * Web component button and flyout control to facilitate Microsoft identity platform authentication
  *
@@ -82,7 +83,6 @@ type PersonViewConfig = {
  * @cssprop --login-account-item-hover-bg-color - {Color} the background color of the account item on hover.
  * @cssprop --login-flyout-command-text-color - {Color} the color for the text of the flyout command button.
  */
-@customElement('login')
 export class MgtLogin extends MgtTemplatedComponent {
   /**
    * Array of styles to apply to the element. The styles should be defined

packages/mgt-components/src/components/mgt-messages/mgt-messages.ts

@@ -13,7 +13,9 @@ import { getSvg, SvgIcon } from '../../utils/SvgHelper';
 import { getRelativeDisplayDate } from '../../utils/Utils';
 import { styles } from './mgt-messages-css';
 import { strings } from './strings';
-import { customElement } from '@microsoft/mgt-element';
+import { registerComponent } from '../registerComponent';
+
+export const registerMgtMessagesComponent = () => registerComponent('messages', MgtMessages);
 
 /**
  * The email messages subsection of the person card
@@ -22,7 +24,6 @@ import { customElement } from '@microsoft/mgt-element';
  * @class MgtMessages
  * @extends {MgtTemplatedComponent}
  */
-@customElement('messages')
 export class MgtMessages extends BasePersonCardSection {
   /**
    * Array of styles to apply to the element. The styles should be defined