diff --git a/index.html b/index.html
index 791f0ff54d..7276460453 100644
--- a/index.html
+++ b/index.html
@@ -6,53 +6,39 @@
Microsoft Graph Toolkit Test
-
+
-
-
+
-
-```
+> NOTE: MSAL requires the page to be hosted in a web server for the authentication redirects. If you are just getting started and want to play around, the quickest way is to use something like [live server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) in vscode.
## Feedback and Requests
diff --git a/packages/mgt/package.json b/packages/mgt/package.json
index 2d258d3160..2e33177dfe 100644
--- a/packages/mgt/package.json
+++ b/packages/mgt/package.json
@@ -20,20 +20,19 @@
"main": "./dist/es6/index.js",
"types": "./dist/es6/index.d.ts",
"module": "./dist/es6/index.js",
+ "unpkg": "./dist/bundle/mgt.js",
"files": [
"dist",
"src"
],
"scripts": {
"build": "npm-run-all clean build:compile build:bundle",
- "build:bundle": "npm-run-all copy:loader copy:wc sass rollup",
+ "build:bundle": "rollup",
"build:compile": "npm-run-all sass compile",
"build:watch": "npm-run-all -p sass:watch compile:watch",
"clean": "shx rm -rf ./dist && shx rm -rf ./tsconfig.tsbuildinfo",
"compile": "tsc -b",
"compile:watch": "tsc -w",
- "copy:loader": "cpx src/bundle/mgt-loader.js dist/bundle",
- "copy:wc": "cpx '../../node_modules/@webcomponents/webcomponentsjs/bundles/**/*' ./dist/bundle/wc/bundles && cpx ../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js ./dist/bundle/wc",
"lint": "eslint -c ../../.eslintrc.js 'src/**/*.ts'",
"postpack": "cpx *.tgz ../../artifacts",
"rollup": "rollup -c",
diff --git a/packages/mgt/rollup.config.js b/packages/mgt/rollup.config.js
index 6b491a1628..5b8ae22979 100644
--- a/packages/mgt/rollup.config.js
+++ b/packages/mgt/rollup.config.js
@@ -7,11 +7,11 @@ import json from 'rollup-plugin-json';
const extensions = ['.js', '.ts'];
-const getBabelConfig = isEs5 => {
+const getBabelConfig = () => {
return {
plugins: [
- ['@babel/plugin-proposal-decorators', isEs5 ? { legacy: true } : { decoratorsBeforeExport: true, legacy: false }],
- ['@babel/proposal-class-properties', { loose: isEs5 }],
+ ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true, legacy: false }],
+ ['@babel/proposal-class-properties', { loose: false }],
'@babel/proposal-object-rest-spread'
],
include: [
@@ -36,9 +36,8 @@ const es6Bundle = {
input: ['src/index.ts'],
output: {
dir: 'dist/bundle',
- entryFileNames: 'mgt.es6.js',
- format: 'iife',
- name: 'mgt',
+ entryFileNames: 'mgt.js',
+ format: 'esm',
sourcemap: false
},
plugins: [
@@ -53,65 +52,10 @@ const es6Bundle = {
],
'@babel/typescript'
],
- ...getBabelConfig(false)
+ ...getBabelConfig()
}),
...commonPlugins
]
};
-const es5Bundle = {
- input: ['src/bundle/index.es5.ts'],
- output: {
- dir: 'dist/bundle',
- entryFileNames: 'mgt.es5.js',
- format: 'iife',
- name: 'mgt',
- sourcemap: false
- },
- plugins: [
- babel({
- extensions,
- presets: [
- [
- '@babel/preset-env',
- {
- targets: 'last 2 versions',
- useBuiltIns: 'entry',
- corejs: 3
- }
- ],
- '@babel/typescript'
- ],
- ...getBabelConfig(true)
- }),
- ...commonPlugins
- ]
-};
-
-const cjsBundle = {
- input: ['src/bundle/index.es5.ts'],
- output: {
- dir: 'dist/commonjs',
- entryFileNames: 'index.js',
- format: 'cjs',
- sourcemap: true
- },
- plugins: [
- babel({
- extensions,
- presets: [
- [
- '@babel/preset-env',
- {
- targets: 'last 2 versions'
- }
- ],
- '@babel/typescript'
- ],
- ...getBabelConfig(true)
- }),
- ...commonPlugins
- ]
-};
-
-export default [es6Bundle, es5Bundle, cjsBundle];
+export default [es6Bundle];
diff --git a/packages/mgt/src/bundle/index.es5.ts b/packages/mgt/src/bundle/index.es5.ts
deleted file mode 100644
index 0fc4a88ae9..0000000000
--- a/packages/mgt/src/bundle/index.es5.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * -------------------------------------------------------------------------------------------
- * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
- * See License in the project root for license information.
- * -------------------------------------------------------------------------------------------
- */
-
-import 'core-js/stable';
-import 'regenerator-runtime/runtime';
-import 'whatwg-fetch';
-import '@webcomponents/webcomponentsjs/webcomponents-bundle';
-export * from '../index';
diff --git a/packages/mgt/src/bundle/mgt-loader.js b/packages/mgt/src/bundle/mgt-loader.js
deleted file mode 100644
index e511e0dbc4..0000000000
--- a/packages/mgt/src/bundle/mgt-loader.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/**
- * -------------------------------------------------------------------------------------------
- * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
- * See License in the project root for license information.
- * -------------------------------------------------------------------------------------------
- */
-
-(function () {
- 'use strict';
-
- var loaderScript = document.querySelector('script[src*="mgt-loader.js"]');
- if (
- loaderScript &&
- loaderScript.src.indexOf('unpkg.com/@microsoft/mgt') > 0 &&
- loaderScript.src.indexOf('/mgt@') === -1
- ) {
- console.warn(
- '🦒: You have loaded the mgt-loader script from unpkg without using a semver range or tag.\n',
- 'This could break your application when new major versions are released\n',
- 'Please update your application to use a mgt-loader with a semver range tag e.g. https://unpkg.com/@microsoft/mgt@2/dist/bundle/mgt-loader.js'
- );
- }
-
- var rootPath = getScriptPath();
-
- function onScriptLoaded() {
- console.log('script loaded');
- // register all the components to ensure that they are available in the browser
- mgt.registerMgtComponents();
- mgt.registerMgtMockProvider();
- mgt.registerMgtMsal2Provider();
- mgt.registerMgtProxyProvider();
- }
-
- // decide es5 or es6
- if (es6()) {
- window.WebComponents = window.WebComponents || {};
- window.WebComponents.root = rootPath + 'wc/';
-
- addScript(rootPath + 'wc/webcomponents-loader.js');
- addScript(rootPath + 'mgt.es6.js', onScriptLoaded);
- } else {
- // es5 bundle already includes all the polyfills
- addScript(rootPath + 'mgt.es5.js', onScriptLoaded);
- }
- function getScriptPath() {
- var scripts = document.getElementsByTagName('script');
- var path = scripts[scripts.length - 1].src.split('?')[0];
- var dir = path.split('/').slice(0, -1).join('/') + '/';
- return dir;
- }
-
- // from https://stackoverflow.com/questions/29046635/javascript-es6-cross-browser-detection
- function es6() {
- 'use strict';
-
- if (typeof Symbol == 'undefined') return false;
- try {
- eval('class Foo {}');
- eval('var bar = (x) => x+1');
- } catch (e) {
- return false;
- }
-
- return true;
- }
-
- function addScript(src, onload) {
- var tag = document.createElement('script');
- document.head.append(tag);
- if (onload) {
- tag.addEventListener('load', onload);
- }
- tag.src = src;
- }
-})();
diff --git a/readme.md b/readme.md
index b1824d4e69..07874f39be 100644
--- a/readme.md
+++ b/readme.md
@@ -100,7 +100,7 @@ The following guides are available to help you get started with the Toolkit:
* [Use the Toolkit with Angular](https://learn.microsoft.com/graph/toolkit/get-started/use-toolkit-with-angular)
* [Build a productivity hub app](https://learn.microsoft.com/en-us/graph/toolkit/get-started/building-one-productivity-hub)
-You can use the components by installing the npm packages or referencing the loader directly (via unpkg).
+You can use the components by installing the npm package or importing them from a CDN (unpkg).
### Use via NPM:
@@ -129,27 +129,22 @@ Now you can reference all components and providers at the page you are using:
```
-### Use via mgt-loader:
+### Use via CDN:
-```html
-
-```
-
-> NOTE: This link will load the highest available version of @microsoft/mgt in the range `>= 4.0.0 < 5.0.0`, omitting the `@4` fragment from the url results in loading the latest version. This could result in loading a new major version and breaking the application.
-
-You can then start using the components in your html page. Here is a full working example with the MSAL2 provider:
+The following script tag downloads the code from the CDN, configures an MSAL2 provider, and makes all the components available for use in the web page.
```html
-
-
+
-
-
+
```
+> NOTE: This link will load the highest available version of @microsoft/mgt in the range `>= 4.0.0 < 5.0.0`, omitting the `@4` fragment from the url results in loading the latest version. This could result in loading a new major version and breaking the application.
+
> NOTE: MSAL requires the page to be hosted in a web server for the authentication redirects. If you are just getting started and want to play around, the quickest way is to use something like [live server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) in vscode.
## Using our samples
diff --git a/stories/overview.stories.mdx b/stories/overview.stories.mdx
index a9bade1dab..2cc7b802e6 100644
--- a/stories/overview.stories.mdx
+++ b/stories/overview.stories.mdx
@@ -17,13 +17,18 @@ The Microsoft Graph Toolkit makes it easy to use Microsoft Graph in your applica
### Installing the Microsoft Graph Toolkit
-It's easy to get started! Add the Toolkit via our `mgt-loader` or via npm and you are ready to go!
+It's easy to get started! Add the Toolkit from a CDN or via npm and you are ready to go!
-#### Via the mgt-loader
+#### From a CDN
`}
+ code={`
+ `}
/>
#### Via npm