Merge branch 'main' into luhan/enableWebSockets

.vscode/launch.json

@@ -44,12 +44,16 @@
       "type": "node",
       "request": "launch",
       "name": "Server: Launch",
-      "program": "${workspaceFolder}/Composer/packages/server/src/init.ts",
+      "program": "${workspaceFolder}/Composer/packages/server/build/init.js",
       "env": {
         "DEBUG": "composer*"
       },
       "restart": true,
-      "outFiles": ["${workspaceFolder}/Composer/packages/server/build/**/*.js"],
+      "outFiles": [
+        "${workspaceRoot}/Composer/packages/server/build/**/*.js",
+        "${workspaceRoot}/extensions/**/*.js"
+      ],
+      "sourceMaps": true,
       "preLaunchTask": "server: build",
       "outputCapture": "std",
       "cwd": "${workspaceFolder}/Composer/packages/server"
@@ -67,13 +71,6 @@
       "sourceMaps": true,
       "console": "integratedTerminal"
     },
-    {
-      "type": "node",
-      "request": "attach",
-      "name": "Server: Attach",
-      "port": 9228,
-      "sourceMaps": true
-    },
     {
       "type": "node",
       "request": "launch",

.vscode/settings.json

@@ -11,7 +11,6 @@
     "**/node_modules": true,
     "**/build": true
   },
-  "eslint.enable": true,
   "eslint.packageManager": "yarn",
   "eslint.validate": [
     "javascript",
@@ -24,5 +23,12 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
-  }
+  },
+  "json.schemas": [
+    {
+      "fileMatch": [".composer/settings.json"],
+      "url": "http://localhost:5000/api/extensions/settings/schema.json"
+    }
+  ],
+  "json.schemaDownload.enable": true
 }

Composer/package.json

@@ -46,7 +46,7 @@
     "build:libs": "wsrun -ltm -x @bfc/electron-server -x @bfc/client -x @bfc/server -p @botframework-composer/* -p @bfc/* -c build",
     "build:server": "yarn workspace @bfc/server build",
     "build:client": "yarn workspace @bfc/client build",
-    "build:extensions": "node scripts/compileExtensions.js",
+    "build:extensions": "cd ../extensions && yarn && yarn build:all",
     "start": "cross-env NODE_ENV=production PORT=3000 yarn start:server",
     "startall": "yarn start",
     "start:dev": "concurrently  \"npm:start:client\" \"npm:start:server:dev\"",
@@ -82,7 +82,7 @@
     }
   },
   "lint-staged": {
-    "packages/**/*.{ts,tsx,js,jsx}": [
+    "**/*.{ts,tsx,js,jsx}": [
       "prettier --write",
       "git add"
     ]

Composer/packages/adaptive-flow/__tests__/adaptive-flow-editor/stubs/ShellApiStub.ts

@@ -40,7 +40,6 @@ export const ShellApiStub: ShellApi = {
   undo: fn,
   redo: fn,
   updateUserSettings: fn,
-  addSkillDialog: fnPromise,
   announce: fn,
   displayManifestModal: fn,
   constructAction: fnPromise,
@@ -56,7 +55,6 @@ export const ShellApiStub: ShellApi = {
   commitChanges: fnPromise,
   updateDialogSchema: fnPromise,
   createTrigger: fnPromise,
-  updateSkillSetting: fnPromise,
   updateFlowZoomRate: fnPromise,
 };
 

Composer/packages/adaptive-flow/src/adaptive-flow-editor/hooks/useEditorEventApi.ts

@@ -3,7 +3,6 @@
 
 import { DialogUtils, SDKKinds, ShellApi, registerEditorAPI, MicrosoftIDialog } from '@bfc/shared';
 import get from 'lodash/get';
-import { useDialogApi } from '@bfc/extension-client';
 
 // TODO: leak of visual-sdk domain (designerCache)
 import { designerCache } from '../../adaptive-flow-renderer/utils/visual/DesignerCache';
@@ -29,7 +28,7 @@ export const useEditorEventApi = (
   },
   shellApi: ShellApi
 ) => {
-  const { actionsContainLuIntent } = shellApi;
+  const { actionsContainLuIntent, getDialog, saveDialog, createDialog } = shellApi;
   const {
     insertAction,
     insertActions,
@@ -42,7 +41,6 @@ export const useEditorEventApi = (
     enableSelectedActions,
     updateRecognizer,
   } = useDialogEditApi(shellApi);
-  const { createDialog, readDialog, updateDialog } = useDialogApi(shellApi);
   const { path, data, nodeContext, selectionContext } = state;
   const { focusedId, focusedTab, focusedEvent, clipboardActions, dialogFactory } = nodeContext;
   const { selectedIds, setSelectedIds, selectableElements } = selectionContext;
@@ -237,7 +235,7 @@ export const useEditorEventApi = (
           // Create target dialog
           const newDialogId = await createDialog();
           if (!newDialogId) return;
-          let newDialogData = readDialog(newDialogId);
+          let newDialogData = getDialog(newDialogId);
 
           // Using copy->paste->delete pattern is safer than using cut->paste
           const actionsToBeMoved = await copySelectedActions(path, data, actionIds);
@@ -252,7 +250,7 @@ export const useEditorEventApi = (
             // auto assign recognizer type to lu
             newDialogData = updateRecognizer(path, newDialogData, `${newDialogId}.lu`);
           }
-          updateDialog(newDialogId, newDialogData);
+          saveDialog(newDialogId, newDialogData);
 
           // Delete moved actions
           const deleteResult = await deleteSelectedActions(path, data, actionIds);

Composer/packages/client/config/webpack.config.js

@@ -6,7 +6,6 @@ const webpack = require('webpack');
 const PnpWebpackPlugin = require('pnp-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const safePostCssParser = require('postcss-safe-parser');
@@ -18,6 +17,7 @@ const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const { ESBuildPlugin, ESBuildMinifyPlugin } = require('esbuild-loader');
 
 const getClientEnvironment = require('./env');
 const paths = require('./paths');
@@ -146,43 +146,8 @@ module.exports = function (webpackEnv) {
     optimization: {
       minimize: isEnvProduction,
       minimizer: [
-        // This is only used in production mode
-        new TerserPlugin({
-          terserOptions: {
-            parse: {
-              // we want terser to parse ecma 8 code. However, we don't want it
-              // to apply any minfication steps that turns valid ecma 5 code
-              // into invalid ecma 5 code. This is why the 'compress' and 'output'
-              // sections only apply transformations that are ecma 5 safe
-              // https://github.com/facebook/create-react-app/pull/4234
-              ecma: 8,
-            },
-            compress: {
-              ecma: 5,
-              warnings: false,
-              // Disabled because of an issue with Uglify breaking seemingly valid code:
-              // https://github.com/facebook/create-react-app/issues/2376
-              // Pending further investigation:
-              // https://github.com/mishoo/UglifyJS2/issues/2011
-              comparisons: false,
-              // Disabled because of an issue with Terser breaking valid code:
-              // https://github.com/facebook/create-react-app/issues/5250
-              // Pending futher investigation:
-              // https://github.com/terser-js/terser/issues/120
-              inline: 2,
-            },
-            mangle: {
-              safari10: true,
-            },
-            output: {
-              ecma: 5,
-              comments: false,
-              // Turned on because emoji and regex is not minified properly using default
-              // https://github.com/facebook/create-react-app/issues/2488
-              ascii_only: true,
-            },
-          },
-          sourceMap: shouldUseSourceMap,
+        new ESBuildMinifyPlugin({
+          target: 'es2015',
         }),
         // This is only used in production mode
         new OptimizeCSSAssetsPlugin({
@@ -300,39 +265,18 @@ module.exports = function (webpackEnv) {
             {
               test: /\.tsx?$/,
               include: paths.appSrc,
-              loader: require.resolve('ts-loader'),
-              options: PnpWebpackPlugin.tsLoaderOptions({
-                transpileOnly: isEnvDevelopment,
-                configFile: path.resolve(__dirname, '../tsconfig.build.json'),
-              }),
+              loader: require.resolve('esbuild-loader'),
+              options: {
+                loader: 'tsx',
+              },
             },
-            // Process application JS with Babel.
-            // The preset includes JSX, Flow, and some ESnext features.
+            // Process application JS with esbuild.
             {
               test: /\.(js|jsx)$/,
               include: paths.appSrc,
-              loader: require.resolve('babel-loader'),
+              loader: require.resolve('esbuild-loader'),
               options: {
-                customize: require.resolve('babel-preset-react-app/webpack-overrides'),
-
-                plugins: [
-                  [
-                    require.resolve('babel-plugin-named-asset-import'),
-                    {
-                      loaderMap: {
-                        svg: {
-                          ReactComponent: '@svgr/webpack?-svgo![path]',
-                        },
-                      },
-                    },
-                  ],
-                ],
-                // This is a feature of `babel-loader` for webpack (not Babel itself).
-                // It enables caching results in ./node_modules/.cache/babel-loader/
-                // directory for faster rebuilds.
-                cacheDirectory: true,
-                cacheCompression: isEnvProduction,
-                compact: isEnvProduction,
+                loader: 'jsx',
               },
             },
             // Process any JS outside of the app with Babel.
@@ -517,6 +461,8 @@ module.exports = function (webpackEnv) {
         analyzerMode: 'static',
         openAnalyzer: false,
       }),
+
+      new ESBuildPlugin(),
     ].filter(Boolean),
     // Some libraries import Node modules but don't use them in the browser.
     // Tell Webpack to provide empty mocks for them so importing them works.

Composer/packages/client/package.json

@@ -102,6 +102,7 @@
     "css-loader": "3.2.0",
     "dotenv": "6.0.0",
     "dotenv-expand": "4.2.0",
+    "esbuild-loader": "^2.8.0",
     "eslint-config-react-app": "5.2.1",
     "eslint-loader": "4.0.0",
     "file-loader": "4.2.0",

Composer/packages/client/src/components/CreationFlow/CreationFlow.tsx

@@ -78,7 +78,7 @@ const CreationFlow: React.FC<CreationFlowProps> = () => {
     }
     await fetchStorages();
     fetchRecentProjects();
-    featureFlags.NEW_CREATION_FLOW.enabled ? fetchTemplatesV2([feedDictionary[csharpFeedKey]]) : fetchTemplates();
+    featureFlags.NEW_CREATION_FLOW?.enabled ? fetchTemplatesV2([feedDictionary[csharpFeedKey]]) : fetchTemplates();
   };
 
   useEffect(() => {

Composer/packages/client/src/components/CreationFlow/v2/CreationFlow.tsx

@@ -148,7 +148,7 @@ const CreationFlowV2: React.FC<CreationFlowProps> = () => {
 
   const handleCreateNext = async (data: string) => {
     setCreationFlowStatus(CreationFlowStatus.NEW_FROM_TEMPLATE);
-    navigate(`./create/${data}`);
+    navigate(`./create/${encodeURIComponent(data)}`);
   };
 
   return (

Composer/packages/client/src/components/PluginHost/PluginHost.tsx

@@ -1,14 +1,17 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
+/* eslint-disable no-underscore-dangle */
 
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
 import React, { useState, useEffect, useRef } from 'react';
-import { Shell } from '@botframework-composer/types';
+import { Shell, ExtensionSettings } from '@botframework-composer/types';
 import { PluginType } from '@bfc/extension-client';
+import { useRecoilValue } from 'recoil';
 
 import { LoadingSpinner } from '../LoadingSpinner';
 import { PluginAPI } from '../../plugins/api';
+import { extensionSettingsState } from '../../recoilModel';
 
 const containerStyles = css`
   position: relative;
@@ -39,16 +42,23 @@ interface PluginHostProps {
 }
 
 /** Binds closures around Composer client code to plugin iframe's window object */
-function attachPluginAPI(win: Window, type: PluginType, shell?: object) {
+async function attachPluginAPI(
+  win: Window,
+  id: string,
+  type: PluginType,
+  shell?: object,
+  settings?: ExtensionSettings
+) {
   const api = { ...PluginAPI[type], ...PluginAPI.auth };
 
   for (const method in api) {
     win.Composer[method] = (...args) => api[method](...args);
   }
 
-  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-  // @ts-ignore
-  win.Composer.render = win.Composer.render.bind(null, type, shell);
+  win.Composer.__extensionId = id;
+  win.Composer.__pluginType = type;
+  win.Composer.settings = settings ?? {};
+  win.Composer.sync(shell);
 }
 
 function injectScript(doc: Document, id: string, src: string, async: boolean, onload?: () => any) {
@@ -66,6 +76,7 @@ export const PluginHost: React.FC<PluginHostProps> = (props) => {
   const targetRef = useRef<HTMLIFrameElement>(null);
   const { pluginType, pluginName, bundleId, shell } = props;
   const [isLoading, setIsLoading] = useState(true);
+  const extensionSettings = useRecoilValue(extensionSettingsState);
 
   useEffect(() => {
     const isReady = (ev) => {
@@ -81,11 +92,11 @@ export const PluginHost: React.FC<PluginHostProps> = (props) => {
     };
   }, []);
 
-  const loadBundle = (name: string, bundle: string, type: PluginType) => {
+  const loadBundle = async (name: string, bundle: string, type: PluginType) => {
     const iframeWindow = targetRef.current?.contentWindow as Window;
     const iframeDocument = targetRef.current?.contentDocument as Document;
 
-    attachPluginAPI(iframeWindow, type, shell);
+    await attachPluginAPI(iframeWindow, name, type, shell, extensionSettings);
 
     //load the bundle for the specified plugin
     const pluginScriptId = `plugin-${type}-${name}`;

Composer/packages/client/src/pages/botProject/create-publish-profile/PublishProfileDialog.tsx

@@ -90,7 +90,7 @@ export const PublishProfileDialog: React.FC<PublishProfileDialogProps> = (props)
 
   // setup plugin APIs so that the provisioning plugin can initiate the process from inside the iframe
   useEffect(() => {
-    PluginAPI.publish.useConfigBeingEdited = () => [current ? JSON.parse(current.item.configuration) : undefined];
+    PluginAPI.publish.getPublishConfig = () => (current ? JSON.parse(current.item.configuration) : undefined);
     PluginAPI.publish.currentProjectId = () => {
       return projectId;
     };