Skip to content

Commit

Permalink
feat: remove mgt-loader (#2963)
Browse files Browse the repository at this point in the history 
removes mgt loader and es5 support.

BREAKING CHANGE: mgt-loader.js is removed and there is no support for es5 only browsers direct from CDN. Developers loading mgt from a CDN must use module syntax and explicitly initialize their applications.
  • Loading branch information
@gavinbarron
gavinbarron authored Jan 25, 2024
1 parent 73ae85c commit ea0f71b
Show file tree
Hide file tree
Showing 8 changed files with 69 additions and 232 deletions.
72 changes: 29 additions & 43 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,53 +6,39 @@
<title>Microsoft Graph Toolkit Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" />
<!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" /> -->
<!-- <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script> -->

<script src="https://unpkg.com/@microsoft/teams-js@2/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
<!--
<script src="./packages/mgt/dist/bundle/mgt-loader.js"></script> -->
<!-- <script src="https://unpkg.com/@microsoft/teams-js@2/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script> -->

<script type="module">
import { registerMgtMsal2Provider } from 'node_modules/@microsoft/mgt-msal2-provider/dist/es6/index.js';
import { registerMgtComponents } from 'node_modules/@microsoft/mgt-components/dist/es6/index.js';
registerMgtMsal2Provider();
registerMgtComponents();
</script>
<!-- <script type="module" src="./packages/mgt-element/dist/es6/index.js"></script>
<script type="module" src="./packages/mgt-components/dist/es6/index.js"></script>
<script type="module" src="./packages/providers/mgt-msal2-provider/dist/es6/index.js"></script>
<script type="module" src="./packages/providers/mgt-mock-provider/dist/es6/index.js"></script>
<script type="module">
import { registerMgtComponents } from './packages/mgt-components/dist/es6/index.js';
// import { Msal2Provider } from './packages/providers/mgt-msal2-provider/dist/es6/index.js';
import { Providers } from './packages/mgt-element/dist/es6/index.js';
import { MockProvider } from './packages/mgt-element/dist/es6/index.js';
Providers.globalProvider = new MockProvider(true);
// Providers.globalProvider = new Msal2Provider({
// clientId: '2dfea037-938a-4ed8-9b35-c05708a1b241',
// redirectUri: "http://localhost:3000",
// scopes: [
// 'user.read',
// 'user.read.all',
// 'mail.readBasic',
// 'people.read',
// 'people.read.all',
// 'sites.read.all',
// 'user.readbasic.all',
// 'contacts.read',
// 'presence.read',
// 'presence.read.all',
// 'tasks.readwrite',
// 'tasks.read',
// 'calendars.read',
// 'group.read.all',
// 'files.read',
// 'files.read.all',
// 'files.readwrite',
// 'files.readwrite.all'
// ]
// });
// import { registerMgtComponents, Providers, MockProvider, Msal2Provider } from 'https://unpkg.com/@microsoft/mgt@next/dist/bundle/mgt.es6.js';
import { registerMgtComponents, Providers, MockProvider, Msal2Provider } from './packages/mgt/dist/bundle/mgt.es6.js';
// Providers.globalProvider = new MockProvider(true);
Providers.globalProvider = new Msal2Provider({
clientId: '2dfea037-938a-4ed8-9b35-c05708a1b241',
redirectUri: "http://localhost:3000",
scopes: [
'user.read',
'user.read.all',
'mail.readBasic',
'people.read',
'people.read.all',
'sites.read.all',
'user.readbasic.all',
'contacts.read',
'presence.read',
'presence.read.all',
'tasks.readwrite',
'tasks.read',
'calendars.read',
'group.read.all',
'files.read',
'files.read.all',
'files.readwrite',
'files.readwrite.all'
]
});
registerMgtComponents();
</script>

Expand Down
28 changes: 12 additions & 16 deletions packages/mgt/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,7 @@ The components are also available as [React components](https://learn.microsoft.

[Watch the Getting Started Video](https://www.youtube.com/watch?v=oZCGb2MMxa0)


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:

Expand Down Expand Up @@ -78,26 +77,23 @@ Now you can reference all components and providers at the page you are using:
<mgt-agenda></mgt-agenda>
```

### Use via mgt-loader:
### Use via CDN:

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
<script src="https://unpkg.com/@microsoft/mgt@4/dist/bundle/mgt-loader.js"></script>
<script type="module">
import { registerMgtComponents, Providers, Msal2Provider } from 'https://unpkg.com/@microsoft/mgt@4';
Providers.globalProvider = new Msal2Provider({clientId: '[CLIENT-ID]'});
registerMgtComponents();
</script>
<mgt-login></mgt-login>
<mgt-agenda></mgt-agenda>
```

> 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:

```html
<script src="https://unpkg.com/@microsoft/mgt@4/dist/bundle/mgt-loader.js"></script>
<mgt-msal2-provider client-id="[CLIENT-ID]"></mgt-msal2-provider>
<mgt-login></mgt-login>

<!-- <script>
// alternatively, you can set the provider in code and provide more options
mgt.Providers.globalProvider = new mgt.Msal2Provider({clientId: '[CLIENT-ID]'});
</script> -->
```
> 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

Expand Down
5 changes: 2 additions & 3 deletions packages/mgt/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
70 changes: 7 additions & 63 deletions packages/mgt/rollup.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand All @@ -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: [
Expand All @@ -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];
12 changes: 0 additions & 12 deletions packages/mgt/src/bundle/index.es5.ts
View file

This file was deleted.

76 changes: 0 additions & 76 deletions packages/mgt/src/bundle/mgt-loader.js
View file

This file was deleted.

27 changes: 11 additions & 16 deletions readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down Expand Up @@ -129,27 +129,22 @@ Now you can reference all components and providers at the page you are using:
<mgt-agenda></mgt-agenda>
```

### Use via mgt-loader:
### Use via CDN:

```html
<script src="https://unpkg.com/@microsoft/mgt@4/dist/bundle/mgt-loader.js"></script>
```

> 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
<script src="https://unpkg.com/@microsoft/mgt@4/dist/bundle/mgt-loader.js"></script>
<mgt-msal2-provider client-id="[CLIENT-ID]"></mgt-msal2-provider>
<script type="module">
import { registerMgtComponents, Providers, Msal2Provider } from 'https://unpkg.com/@microsoft/mgt@4';
Providers.globalProvider = new Msal2Provider({clientId: '[CLIENT-ID]'});
registerMgtComponents();
</script>
<mgt-login></mgt-login>

<!-- <script>
// alternatively, you can set the provider in code and provide more options
mgt.Providers.globalProvider = new mgt.Msal2Provider({clientId: '[CLIENT-ID]'});
</script> -->
<mgt-agenda></mgt-agenda>
```

> 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
Expand Down
Loading

0 comments on commit ea0f71b

Please sign in to comment.