Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: allowing React components to be rendered as web components #2950

Draft
wants to merge 2 commits into
base: next/mgt-chat
Choose a base branch
from
Draft

feat: allowing React components to be rendered as web components #2950

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
03bd2c1
Adding base for react to WC
sebastienlevert Jan 15, 2024
8843622
Updating to reuse ES Modules
sebastienlevert Jan 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added .yarn/cache/@babel-plugin-transform-react-display-name-npm-7.23.3-42e6709253-7f86964e84.zip
View file
Open in desktop
Binary file not shown.
Binary file added ...cache/@babel-plugin-transform-react-pure-annotations-npm-7.23.3-2a925e2096-9ea3698b1d.zip
View file
Open in desktop
Binary file not shown.
Binary file added .yarn/cache/@babel-preset-react-npm-7.23.3-6a959abc25-2d90961e7e.zip
View file
Open in desktop
Binary file not shown.
Binary file added .yarn/cache/@r2wc-core-npm-1.0.1-af213829d4-0c71090e88.zip
View file
Open in desktop
Binary file not shown.
Binary file added .yarn/cache/@r2wc-react-to-web-component-npm-1.0.0-7aeae173e4-85455f59ba.zip
View file
Open in desktop
Binary file not shown.
Binary file added .yarn/cache/react-dom-npm-18.2.0-dd675bca1c-7d323310be.zip
View file
Open in desktop
Binary file not shown.
Binary file added .yarn/cache/scheduler-npm-0.23.0-a379a6bc3b-d79192eeaa.zip
View file
Open in desktop
Binary file not shown.
31 changes: 21 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
Expand All @@ -11,13 +11,23 @@

<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="./packages/mgt/dist/bundle/mgt-loader.js"></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 crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></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/mgt-react/dist/es6/index.js"></script>
<script type="module" src="packages/mgt-chat/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 "@microsoft/mgt-components";
import { Chat } from "@microsoft/mgt-chat";
registerMgtComponents();
//registerMgtChatComponent();
</script>
<style>
header {
display: flex;
Expand All @@ -39,13 +49,13 @@
</head>

<body>
<!-- <mgt-msal2-provider
<mgt-msal2-provider
client-id="2dfea037-938a-4ed8-9b35-c05708a1b241"
redirect-uri="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"
></mgt-msal2-provider> -->
></mgt-msal2-provider>

<mgt-mock-provider></mgt-mock-provider>
<!--mgt-mock-provider></mgt-mock-provider-->
<header>
<mgt-theme-toggle></mgt-theme-toggle>
</header>
Expand Down Expand Up @@ -82,6 +92,7 @@ <h2>mgt-login</h2>
<mgt-search-box search-term="contoso"></mgt-search-box>
<h2>mgt-search-results</h2>
<mgt-search-results query-string="contoso"></mgt-search-results> -->
<mgt-chat chat-id=""></mgt-chat>
</main>
</body>
</html>
2 changes: 1 addition & 1 deletion packages/mgt-chat/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,13 +56,13 @@
"@fluentui/react-components": "^9.19.1",
"@fluentui/react-icons": "^2.0.210",
"@fluentui/react-northstar": "^0.66.4",
"@microsoft/mgt-components": "*",
"@microsoft/mgt-element": "*",
"@microsoft/mgt-msal2-provider": "*",
"@microsoft/mgt-react": "*",
"@microsoft/microsoft-graph-types": "^2.0.0",
"@microsoft/microsoft-graph-types-beta": "^0.16.0-preview",
"@microsoft/signalr": "^7.0.4",
"@r2wc/react-to-web-component": "^1.0",
"immer": "^9.0.6",
"opencrypto": "1.5.5",
"uuid": "^9.0.0",
Expand Down
8 changes: 8 additions & 0 deletions packages/mgt-chat/src/components/Chat/Chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,17 @@ import ChatMessageBar from '../ChatMessageBar/ChatMessageBar';
import { renderMGTMention } from '../../utils/mentions';
import { registerAppIcons } from '../styles/registerIcons';
import { ChatHeader } from '../ChatHeader/ChatHeader';
import r2wc from '@r2wc/react-to-web-component';
import { registerComponent } from '@microsoft/mgt-element';

registerAppIcons();

export const registerMgtChatComponent = () => {
// register self
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-call
registerComponent('chat', r2wc(Chat));
};

interface IMgtChatProps {
chatId: string;
}
Expand Down
3 changes: 1 addition & 2 deletions packages/mgt-chat/src/components/NewChat/NewChat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React, { FC, useCallback, useState } from 'react';
import { IDynamicPerson } from '@microsoft/mgt-components';
import { Chat } from '@microsoft/microsoft-graph-types';
import { IGraph, PeoplePicker, Spinner } from '@microsoft/mgt-react';
import { IGraph, PeoplePicker, Spinner, IDynamicPerson } from '@microsoft/mgt-react';
import {
Button,
Field,
Expand Down
4 changes: 2 additions & 2 deletions packages/mgt-chat/src/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,6 @@
* -------------------------------------------------------------------------------------------
*/

import { Chat } from './Chat/Chat';
import { Chat, registerMgtChatComponent } from './Chat/Chat';
import { NewChat } from './NewChat/NewChat';
export { Chat, NewChat };
export { Chat, NewChat, registerMgtChatComponent };
2 changes: 1 addition & 1 deletion packages/mgt-chat/src/statefulClient/StatefulGraphChatClient.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
SendBoxProps,
SystemMessage
} from '@azure/communication-react';
import { IDynamicPerson, getUserWithPhoto } from '@microsoft/mgt-components';
import { IDynamicPerson, getUserWithPhoto } from '@microsoft/mgt-react';
import {
ActiveAccountChanged,
IGraph,
Expand Down
2 changes: 1 addition & 1 deletion packages/mgt-chat/src/statefulClient/chatOperationScopes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* See License in the project root for license information.
* -------------------------------------------------------------------------------------------
*/
import { getMgtPersonCardScopes } from '@microsoft/mgt-components/dist/es6/exports';
import { getMgtPersonCardScopes } from '@microsoft/mgt-react';

/**
* The lowest count of scopes required to perform all chat operations
Expand Down
8 changes: 1 addition & 7 deletions packages/mgt-chat/src/statefulClient/graph.chat.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,7 @@
* -------------------------------------------------------------------------------------------
*/

import {
schemas,
CachePhoto,
getPhotoInvalidationTime,
storePhotoInCache,
blobToBase64
} from '@microsoft/mgt-components';
import { schemas, CachePhoto, getPhotoInvalidationTime, storePhotoInCache, blobToBase64 } from '@microsoft/mgt-react';
import { CacheService, IGraph, prepScopes } from '@microsoft/mgt-element';
import { ResponseType } from '@microsoft/microsoft-graph-client';
import { AadUserConversationMember, Chat, ChatMessage } from '@microsoft/microsoft-graph-types';
Expand Down
3 changes: 1 addition & 2 deletions packages/mgt-chat/src/utils/mentions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react';
import { PersonCardInteraction } from '@microsoft/mgt-components';
import { MgtTemplateProps, Person } from '@microsoft/mgt-react';
import { MgtTemplateProps, Person, PersonCardInteraction } from '@microsoft/mgt-react';
import { ChatMessageMention, User } from '@microsoft/microsoft-graph-types';
import { GraphChatClient } from 'src/statefulClient/StatefulGraphChatClient';
import { Mention } from '@azure/communication-react';
Expand Down
6 changes: 2 additions & 4 deletions packages/mgt-react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,11 +39,9 @@
"@microsoft/mgt-element": "*",
"@microsoft/microsoft-graph-types": "^2.0.0",
"@microsoft/microsoft-graph-types-beta": "^0.29.0-preview",
"wc-react": "^0.5.0"
},
"peerDependencies": {
"react": "^17.0.1 || ^18.0.0",
"react-dom": "^17.0.1 || ^18.0.0"
"react-dom": "^17.0.1 || ^18.0.0",
"wc-react": "^0.5.0"
},
"publishConfig": {
"access": "public"
Expand Down
88 changes: 83 additions & 5 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1668,6 +1668,17 @@ __metadata:
languageName: node
linkType: hard

"@babel/plugin-transform-react-display-name@npm:^7.23.3":
version: 7.23.3
resolution: "@babel/plugin-transform-react-display-name@npm:7.23.3"
dependencies:
"@babel/helper-plugin-utils": ^7.22.5
peerDependencies:
"@babel/core": ^7.0.0-0
checksum: 7f86964e8434d3ddbd3c81d2690c9b66dbf1cd8bd9512e2e24500e9fa8cf378bc52c0853270b3b82143aba5965aec04721df7abdb768f952b44f5c6e0b198779
languageName: node
linkType: hard

"@babel/plugin-transform-react-jsx-development@npm:^7.22.5":
version: 7.22.5
resolution: "@babel/plugin-transform-react-jsx-development@npm:7.22.5"
Expand Down Expand Up @@ -1706,6 +1717,18 @@ __metadata:
languageName: node
linkType: hard

"@babel/plugin-transform-react-pure-annotations@npm:^7.23.3":
version: 7.23.3
resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.23.3"
dependencies:
"@babel/helper-annotate-as-pure": ^7.22.5
"@babel/helper-plugin-utils": ^7.22.5
peerDependencies:
"@babel/core": ^7.0.0-0
checksum: 9ea3698b1d422561d93c0187ac1ed8f2367e4250b10e259785ead5aa643c265830fd0f4cf5087a5bedbc4007444c06da2f2006686613220acf0949895f453666
languageName: node
linkType: hard

"@babel/plugin-transform-regenerator@npm:^7.22.10":
version: 7.22.10
resolution: "@babel/plugin-transform-regenerator@npm:7.22.10"
Expand Down Expand Up @@ -1978,7 +2001,7 @@ __metadata:
languageName: node
linkType: hard

"@babel/preset-react@npm:^7.12.5, @babel/preset-react@npm:^7.12.7, @babel/preset-react@npm:^7.16.0":
"@babel/preset-react@npm:^7.12.5, @babel/preset-react@npm:^7.16.0":
version: 7.22.15
resolution: "@babel/preset-react@npm:7.22.15"
dependencies:
Expand All @@ -1994,6 +2017,22 @@ __metadata:
languageName: node
linkType: hard

"@babel/preset-react@npm:^7.12.7":
version: 7.23.3
resolution: "@babel/preset-react@npm:7.23.3"
dependencies:
"@babel/helper-plugin-utils": ^7.22.5
"@babel/helper-validator-option": ^7.22.15
"@babel/plugin-transform-react-display-name": ^7.23.3
"@babel/plugin-transform-react-jsx": ^7.22.15
"@babel/plugin-transform-react-jsx-development": ^7.22.5
"@babel/plugin-transform-react-pure-annotations": ^7.23.3
peerDependencies:
"@babel/core": ^7.0.0-0
checksum: 2d90961e7e627a74b44551e88ad36a440579e283e8dc27972bf2f50682152bbc77228673a3ea22c0e0d005b70cbc487eccd64897c5e5e0384e5ce18f300b21eb
languageName: node
linkType: hard

"@babel/preset-typescript@npm:^7.13.0, @babel/preset-typescript@npm:^7.16.0, @babel/preset-typescript@npm:^7.23.0":
version: 7.23.2
resolution: "@babel/preset-typescript@npm:7.23.2"
Expand Down Expand Up @@ -5940,13 +5979,13 @@ __metadata:
"@fluentui/react-components": ^9.19.1
"@fluentui/react-icons": ^2.0.210
"@fluentui/react-northstar": ^0.66.4
"@microsoft/mgt-components": "*"
"@microsoft/mgt-element": "*"
"@microsoft/mgt-msal2-provider": "*"
"@microsoft/mgt-react": "*"
"@microsoft/microsoft-graph-types": ^2.0.0
"@microsoft/microsoft-graph-types-beta": ^0.16.0-preview
"@microsoft/signalr": ^7.0.4
"@r2wc/react-to-web-component": ^1.0
"@types/react": ^17.0.0
immer: ^9.0.6
opencrypto: 1.5.5
Expand Down Expand Up @@ -6032,10 +6071,9 @@ __metadata:
"@microsoft/mgt-element": "*"
"@microsoft/microsoft-graph-types": ^2.0.0
"@microsoft/microsoft-graph-types-beta": ^0.29.0-preview
wc-react: ^0.5.0
peerDependencies:
react: ^17.0.1 || ^18.0.0
react-dom: ^17.0.1 || ^18.0.0
wc-react: ^0.5.0
languageName: unknown
linkType: soft

Expand Down Expand Up @@ -7250,6 +7288,25 @@ __metadata:
languageName: node
linkType: hard

"@r2wc/core@npm:^1.0.0":
version: 1.0.1
resolution: "@r2wc/core@npm:1.0.1"
checksum: 0c71090e887cc9e295efe5ed2c038d937be870dfd2c409b5100cd91a662e5ac0ba938687aa33bdf98a874b4056a8af26f66357a8f8ac8a371334da99cb4d8400
languageName: node
linkType: hard

"@r2wc/react-to-web-component@npm:^1.0":
version: 1.0.0
resolution: "@r2wc/react-to-web-component@npm:1.0.0"
dependencies:
"@r2wc/core": ^1.0.0
peerDependencies:
react: ^16.0.0 || ^17.0.0
react-dom: ^16.0.0 || ^17.0.0
checksum: 85455f59ba20e9de6070afca26920c30be3ef44b292fe1373265963c6ded01a0ba3b8555648b158bb733d84143aacb49dd11c430a98b74dd90c698b37575da00
languageName: node
linkType: hard

"@radix-ui/number@npm:1.0.1":
version: 1.0.1
resolution: "@radix-ui/number@npm:1.0.1"
Expand Down Expand Up @@ -32980,6 +33037,18 @@ __metadata:
languageName: node
linkType: hard

"react-dom@npm:^17.0.1 || ^18.0.0":
version: 18.2.0
resolution: "react-dom@npm:18.2.0"
dependencies:
loose-envify: ^1.1.0
scheduler: ^0.23.0
peerDependencies:
react: ^18.2.0
checksum: 7d323310bea3a91be2965f9468d552f201b1c27891e45ddc2d6b8f717680c95a75ae0bc1e3f5cf41472446a2589a75aed4483aee8169287909fcd59ad149e8cc
languageName: node
linkType: hard

"react-error-overlay@npm:^6.0.11":
version: 6.0.11
resolution: "react-error-overlay@npm:6.0.11"
Expand Down Expand Up @@ -33265,7 +33334,7 @@ __metadata:
languageName: node
linkType: hard

"react@npm:^18.0":
"react@npm:^17.0.1 || ^18.0.0, react@npm:^18.0":
version: 18.2.0
resolution: "react@npm:18.2.0"
dependencies:
Expand Down Expand Up @@ -34866,6 +34935,15 @@ __metadata:
languageName: node
linkType: hard

"scheduler@npm:^0.23.0":
version: 0.23.0
resolution: "scheduler@npm:0.23.0"
dependencies:
loose-envify: ^1.1.0
checksum: d79192eeaa12abef860c195ea45d37cbf2bbf5f66e3c4dcd16f54a7da53b17788a70d109ee3d3dde1a0fd50e6a8fc171f4300356c5aee4fc0171de526bf35f8a
languageName: node
linkType: hard

"schema-utils@npm:2.7.0":
version: 2.7.0
resolution: "schema-utils@npm:2.7.0"
Expand Down
Loading