Jinan/reorganize js bundle (#503)

* Reorganize js bundle * Update readme * Update html and readme * Remove GUID for privacy reason * update pnpm-lock Co-authored-by: Nan Jiang <[email protected]>
Azure · Jun 29, 2021 · 2a0bb0f · 2a0bb0f
1 parent e8dc711
commit 2a0bb0f
Show file tree

Hide file tree

Showing 9 changed files with 1,290 additions and 477 deletions.
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
diff --git a/samples/StaticHtmlComposites/README.md b/samples/StaticHtmlComposites/README.md
@@ -41,8 +41,17 @@ The basic app is accessible on http://localhost:3000.
 
 >  This sample uses the `@azure/communication-react` package from within this repo, which can slightly diverge from the `latest` package on npm. If you copy this sample to bootstrap your own app and use the public npm package, you might need to fix the call signatures in `composites.js` file. Alternatively, you can install the `dev` tagged package from npm which is updated daily and should likely match the in-repo version.
 
-## Basic app
 
-![Basic app screenshot](./app.png)
+## Generate composite js bundles
+```
+rushx build
+```
+Get your own bundle according to the need:
+dist/chatComposite.js
+dist/callComposite.js
+
+Please check index.html for sample code for these 2 composites
 
+## Basic app
 
+![Basic app screenshot](./app.png)
diff --git a/samples/StaticHtmlComposites/index.html b/samples/StaticHtmlComposites/index.html
@@ -4,26 +4,31 @@
   <title>Basic example for CallComposite and ChatComposite</title>
 </head>
 <body>
-  <div id="video-call"></div>
-  <div id="chat"></div>
-  <script src="./dist/bundle.js"></script>
+  <!-- height need to be set for composite to fit the layout -->
+  <div id="video-call" style="height: 500px;"></div>
+  <div id="chat" style="height: 500px;"></div>
+  <script src="./dist/chatComposite.js"></script>
+  <script src="./dist/callComposite.js"></script>
+  <script src="./dist/service.js"></script>
   <script type="module">
-    const { user, token } = await app.createUserWithToken();
+    const { user, token } = await service.createUserWithToken();
+    // Call composite sample code starts here
     const displayName = 'Bob';
 
-    const callAdapter = await app.loadCallComposite({
+    const callAdapter = await callComposite.loadCallComposite({
       containerId: 'video-call',
-      groupId: '6e606975-7004-4c03-be37-e0851ed1850b', // any GUID
+      groupId: '', // Provide any GUID to join a group
       displayName: displayName,
       userId: user,
       token: token
     });
 
-    const threadId = await app.createChatThread();
-    await app.addChatUser(threadId, user, displayName);
-    const endpointUrl = await app.getEndpointUrl();
+    const threadId = await service.createChatThread();
+    await service.addChatUser(threadId, user, displayName);
+    const endpointUrl = await service.getEndpointUrl();
 
-    const chatAdapter = await app.loadChatComposite({
+    // Chat composite sample code starts here
+    const chatAdapter = await chatComposite.loadChatComposite({
       containerId: 'chat',
       displayName: displayName,
       threadId: threadId,

diff --git a/samples/StaticHtmlComposites/package.json b/samples/StaticHtmlComposites/package.json
@@ -4,9 +4,9 @@
   "description": "Basic bundle for communication react composites and usage on a static HTML page.",
   "private": true,
   "scripts": {
-    "build": "webpack",
+    "build": "webpack --config webpack.build.config.js",
     "start": "concurrently \"cd ../Server && rushx start:dev\" \"rushx start:app\"",
-    "start:app": "http-server -p 3000",
+    "start:app": "webpack && http-server -p 3000",
     "lint": "echo skip",
     "lint:fix": "echo skip",
 		"prettier": "",

diff --git a/samples/StaticHtmlComposites/src/callComposite.js b/samples/StaticHtmlComposites/src/callComposite.js
@@ -0,0 +1,13 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { CallComposite, createAzureCommunicationCallAdapter } from '@azure/communication-react';
+
+export const loadCallComposite = async function (args) {
+  const { containerId, userId, token, groupId, displayName } = args;
+  const adapter = await createAzureCommunicationCallAdapter(userId, token, { groupId }, displayName ?? 'anonymous');
+  ReactDOM.render(React.createElement(CallComposite, { adapter }, null), document.getElementById(containerId));
+  return adapter;
+};
diff --git a/...es/StaticHtmlComposites/src/composites.js → ...StaticHtmlComposites/src/chatComposite.js b/...es/StaticHtmlComposites/src/composites.js → ...StaticHtmlComposites/src/chatComposite.js
@@ -3,19 +3,7 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import {
-  CallComposite,
-  createAzureCommunicationCallAdapter,
-  ChatComposite,
-  createAzureCommunicationChatAdapter
-} from '@azure/communication-react';
-
-export const loadCallComposite = async function (args) {
-  const { containerId, userId, token, groupId, displayName } = args;
-  const adapter = await createAzureCommunicationCallAdapter(userId, token, { groupId }, displayName ?? 'anonymous');
-  ReactDOM.render(React.createElement(CallComposite, { adapter }, null), document.getElementById(containerId));
-  return adapter;
-};
+import { ChatComposite, createAzureCommunicationChatAdapter } from '@azure/communication-react';
 
 export const loadChatComposite = async function (args) {
   const { containerId, userId, token, endpointUrl, threadId, displayName } = args;

diff --git a/samples/StaticHtmlComposites/src/index.js b/samples/StaticHtmlComposites/src/index.js
diff --git a/samples/StaticHtmlComposites/webpack.build.config.js b/samples/StaticHtmlComposites/webpack.build.config.js
@@ -0,0 +1,6 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.config.js');
+
+module.exports = merge(common, {
+  mode: 'production'
+});
diff --git a/samples/StaticHtmlComposites/webpack.config.js b/samples/StaticHtmlComposites/webpack.config.js
@@ -1,17 +1,19 @@
 const path = require('path');
 
 module.exports = {
-  entry: './src/index.js',
+  entry: {
+    chatComposite: './src/chatComposite.js',
+    callComposite: './src/callComposite.js',
+    service: './src/service.js'
+  },
   mode: 'development', // change to 'production' for optimization
   resolve: {
     extensions: ['.js']
   },
   output: {
-    filename: 'bundle.js',
+    filename: '[name].js',
     path: path.resolve(__dirname, 'dist'),
-    library: {
-      type: 'var',
-      name: 'app'
-    }
+    libraryTarget: 'umd',
+    library: '[name]'
   }
 };