Remove language specific features from core and into runtime plugin

.vscode/launch.json

@@ -82,5 +82,18 @@
       "port": 9228,
       "sourceMaps": true
     }
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Electron Main Process",
+      "runtimeExecutable": "${workspaceRoot}/Composer/node_modules/.bin/electron",
+      "args": [
+        "${workspaceRoot}/Composer/packages/electron-server",
+      ],
+      "env": {
+        "NODE_ENV": "development",
+      },
+      "outputCapture": "std"
+    }
   ]
 }

.vscode/settings.json

@@ -1,9 +1,16 @@
 {
+  "files.trimTrailingWhitespace": true,
   "files.associations": {
     "*.dialog": "json",
     "*.botproj": "json",
     "*.schema": "json"
   },
+  "files.exclude": {
+    "**/.git": true,
+    "**/.DS_Store": true,
+    "**/node_modules": true,
+    "**/build": true
+  },
   "eslint.enable": true,
   "eslint.packageManager": "yarn",
   "eslint.validate": [
@@ -14,6 +21,7 @@
   ],
   "eslint.workingDirectories": ["./Composer"],
   "typescript.tsdk": "./Composer/node_modules/typescript/lib",
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   }

Composer/.eslintrc.js

@@ -42,6 +42,16 @@ module.exports = {
     yoda: 'error',
     'no-bitwise': 'error',
     // eqeqeq: 'error',
+    'no-underscore-dangle': [
+      'error',
+      {
+        // add special window.__foo__ names as exceptions here
+        allow: ['__nonce__', '__IS_ELECTRON__'],
+        // allow this._name so custom getters and setters can be written gracefully
+        allowAfterThis: true,
+        enforceInMethodNames: true,
+      },
+    ],
 
     // plugin: import
     'import/first': 'error',

Composer/cypress/integration/LGPage.spec.ts

@@ -24,6 +24,9 @@ context('LG Page', () => {
     // back to table view
     cy.get('@switchButton').click();
 
+    // click the logo to clear any stray navigation
+    cy.findByAltText('Composer Logo').click();
+
     // nav to Main dialog
     cy.findByTestId('ProjectTree').within(() => {
       cy.findByText('__TestTodoSample').click();

Composer/cypress/integration/NotificationPage.spec.ts

@@ -44,6 +44,9 @@ context('Notification Page', () => {
   it('can show dialog expression error ', () => {
     cy.visitPage('Design');
 
+    // click the logo to clear any stray tooltips from page navigation
+    cy.findByAltText('Composer Logo').click();
+
     cy.findByTestId('ProjectTree').within(() => {
       cy.findByText('WelcomeUser').click();
     });

Composer/package.json

@@ -8,7 +8,8 @@
     "serialize-javascript": "^3.1.0",
     "lodash": "^4.17.12",
     "set-value": "^3.0.2",
-    "kind-of": "^6.0.3"
+    "kind-of": "^6.0.3",
+    "elliptic": "^6.5.3"
   },
   "engines": {
     "node": ">=12"
@@ -26,9 +27,7 @@
     "packages/tools",
     "packages/tools/language-servers",
     "packages/tools/language-servers/*",
-    "packages/ui-plugins/*",
-    "packages/plugins",
-    "packages/plugins/*"
+    "packages/ui-plugins/*"
   ],
   "scripts": {
     "build": "node scripts/begin.js && yarn build:prod && yarn build:plugins",
@@ -41,7 +40,11 @@
     "build:server": "yarn workspace @bfc/server build",
     "build:client": "yarn workspace @bfc/client build",
     "build:tools": "yarn workspace @bfc/tools build:all",
-    "build:plugins": "wsrun -lt -p @bfc/plugin-samples @bfc/plugin-azure-publish @bfc/plugin-azure-functions-publish @bfc/plugin-localpublish -c build",
+    "build:plugins": "yarn build:plugins:localpublish && yarn build:plugins:samples && yarn build:plugins:azurePublish && yarn build:plugins:runtimes",
+    "build:plugins:localpublish": "cd plugins/localPublish && yarn install && yarn build",
+    "build:plugins:samples": "cd plugins/samples && yarn install && yarn build",
+    "build:plugins:azurePublish": "cd plugins/azurePublish && yarn install && yarn build",
+    "build:plugins:runtimes": "cd plugins/runtimes && yarn install && yarn build",
     "start": "cross-env NODE_ENV=production PORT=3000 yarn start:server",
     "startall": "yarn start",
     "start:dev": "concurrently  \"npm:start:client\" \"npm:start:server:dev\"",
@@ -117,4 +120,4 @@
   "dependencies": {
     "cross-env": "^6.0.3"
   }
-}
+}

Composer/packages/client/config/env.js

@@ -90,7 +90,7 @@ function getClientEnvironment(publicUrl) {
         SDK_PACKAGE_VERSION: '4.9.3', // TODO: change this when Composer supports custom schema/custom runtime
         COMPOSER_VERSION: '1.0.1',
         LOCAL_PUBLISH_PATH:
-          process.env.LOCAL_PUBLISH_PATH || path.resolve(process.cwd(), '../plugins/localPublish/hostedBots'),
+          process.env.LOCAL_PUBLISH_PATH || path.resolve(process.cwd(), '../../plugins/localPublish/hostedBots'),
       }
     );
   // Stringify all values so we can feed into Webpack DefinePlugin

Composer/packages/client/package.json

@@ -73,6 +73,7 @@
     "@types/reach__router": "^1.2.4",
     "@types/react": "16.9.23",
     "@types/react-dom": "16.9.5",
+    "@types/webpack-env": "^1.15.2",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.1.0",
     "babel-loader": "8.0.5",

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

@@ -46,7 +46,7 @@ type SortState = {
   descending: boolean;
 };
 
-const _renderIcon = (file: File) => {
+const renderIcon = (file: File) => {
   const iconName = getFileIconName(file);
   if (iconName === FileTypes.FOLDER) {
     return <Icon iconName="OpenFolderHorizontal" style={{ fontSize: '16px' }} />;
@@ -60,7 +60,7 @@ const _renderIcon = (file: File) => {
   return <img alt={`${iconName} file icon`} className={detailListClass.fileIconImg} src={url} />;
 };
 
-const _renderNameColumn = (onFileChosen: (file: File) => void) => (file: File) => {
+const renderNameColumn = (onFileChosen: (file: File) => void) => (file: File) => {
   const iconName = getFileIconName(file);
   return (
     <div data-is-focusable css={tableCell}>
@@ -105,7 +105,7 @@ export const FileSelector: React.FC<FileSelectorProps> = (props) => {
       fieldName: 'name',
       minWidth: 16,
       maxWidth: 16,
-      onRender: _renderIcon,
+      onRender: renderIcon,
     },
     {
       key: 'name',
@@ -118,7 +118,7 @@ export const FileSelector: React.FC<FileSelectorProps> = (props) => {
       sortAscendingAriaLabel: formatMessage('Sorted A to Z'),
       sortDescendingAriaLabel: formatMessage('Sorted Z to A'),
       data: 'string',
-      onRender: _renderNameColumn(onFileChosen),
+      onRender: renderNameColumn(onFileChosen),
       isPadded: true,
     },
     {

Composer/packages/client/src/components/ErrorPopup/index.tsx

@@ -18,7 +18,7 @@ type ErrorPopupProps = {
 export const ErrorPopup = (props: ErrorPopupProps) => {
   const [hidden, setHidden] = useState(props.error ? false : true);
 
-  const _closeDialog = () => {
+  const closeDialog = () => {
     setHidden(true);
     props.onDismiss();
   };
@@ -35,11 +35,11 @@ export const ErrorPopup = (props: ErrorPopupProps) => {
         isBlocking: false,
         styles: { main: { maxWidth: 450 } },
       }}
-      onDismiss={_closeDialog}
+      onDismiss={closeDialog}
     >
       <div css={consoleStyle}>{props.error}</div>
       <DialogFooter>
-        <PrimaryButton text="Ok" onClick={_closeDialog} />
+        <PrimaryButton text="Ok" onClick={closeDialog} />
       </DialogFooter>
     </Dialog>
   );

Composer/packages/client/src/components/TestController/index.tsx

@@ -30,7 +30,15 @@ export const TestController: React.FC = () => {
   const botActionRef = useRef(null);
   const notifications = useNotifications();
   const { botEndpoints, botName, botStatus, dialogs, luFiles, settings, projectId, botLoadErrorMsg } = state;
-  const { publishToTarget, onboardingAddCoachMarkRef, publishLuis, getPublishStatus, setBotStatus } = actions;
+  const {
+    publishToTarget,
+    onboardingAddCoachMarkRef,
+    publishLuis,
+    getPublishStatus,
+    setBotStatus,
+    startPollingRuntime,
+    stopPollingRuntime,
+  } = actions;
   const connected = botStatus === BotStatus.connected;
   const publishing = botStatus === BotStatus.publishing;
   const reloading = botStatus === BotStatus.reloading;
@@ -48,12 +56,26 @@ export const TestController: React.FC = () => {
     switch (botStatus) {
       case BotStatus.failed:
         openCallout();
+        stopPollingRuntime();
         setBotStatus(BotStatus.pending);
         break;
       case BotStatus.published:
+        stopPollingRuntime();
         handleLoadBot();
         break;
+      case BotStatus.reloading:
+        startPollingRuntime();
+        break;
+      default:
+      case BotStatus.connected:
+        stopPollingRuntime();
+        break;
     }
+    // return the stoppolling function so the component will clean up
+    return () => {
+      stopPollingRuntime();
+      return;
+    };
   }, [botStatus]);
 
   function dismissDialog() {

Composer/packages/client/src/constants/index.ts

@@ -102,6 +102,7 @@ export enum ActionTypes {
   REMOVE_SKILL_MANIFEST = 'REMOVE_SKILL_MANIFEST',
   DISPLAY_SKILL_MANIFEST_MODAL = 'DISPLAY_SKILL_MANIFEST_MODAL',
   DISMISS_SKILL_MANIFEST_MODAL = 'DISMISS_SKILL_MANIFEST_MODAL',
+  RUNTIME_POLLING_UPDATE = 'RUNTIME_POLLING_UPDATE',
 }
 
 export const Tips = {
@@ -251,7 +252,7 @@ export enum AppUpdaterStatus {
 
 export const DefaultPublishConfig = {
   name: 'default',
-  type: '@bfc/plugin-localpublish',
+  type: 'localpublish',
 };
 
 export const EmptyBotTemplateId = 'EmptyBot';

Composer/packages/client/src/index.tsx

@@ -11,6 +11,8 @@ import './index.css';
 import { App } from './App';
 import { StoreProvider } from './store';
 
+const appHostElm = document.getElementById('root');
+
 formatMessage.setup({
   missingTranslation: 'ignore',
 });
@@ -20,11 +22,29 @@ const emotionCache = createCache({
   nonce: window.__nonce__,
 });
 
-ReactDOM.render(
-  <CacheProvider value={emotionCache}>
-    <StoreProvider>
-      <App />
-    </StoreProvider>
-  </CacheProvider>,
-  document.getElementById('root')
-);
+/**
+ * Renders the React App module.
+ */
+const renderApp = (AppComponent: typeof App) => {
+  ReactDOM.render(
+    <CacheProvider value={emotionCache}>
+      <StoreProvider>
+        <AppComponent />
+      </StoreProvider>
+    </CacheProvider>,
+    appHostElm
+  );
+};
+
+// Rendering the App for the first time.
+renderApp(App);
+
+/**
+ * Re-render updated App Module when hot module notifies a change.
+ */
+if (module.hot) {
+  module.hot.accept('./App', () => {
+    const NextApp = require<{ App: typeof App }>('./App').App;
+    renderApp(NextApp);
+  });
+}

Composer/packages/client/src/pages/design/index.tsx

@@ -148,8 +148,10 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
         onBreadcrumbItemClick: handleBreadcrumbItemClick,
         promptTab: getTabFromFragment(),
       });
+      /* eslint-disable no-underscore-dangle */
       // @ts-ignore
       globalHistory._onTransitionComplete();
+      /* eslint-enable */
     } else {
       //leave design page should clear the history
       clearUndoHistory();

Composer/packages/client/src/pages/home/ExampleList.tsx

@@ -35,7 +35,7 @@ const resolveIcon = (exampleId: string): string => {
 export const ExampleList: React.FC<ExampleListProps> = (props) => {
   const { onClick, examples } = props;
 
-  function _onRenderCell(item?: ProjectTemplate): React.ReactNode {
+  function onRenderCell(item?: ProjectTemplate): React.ReactNode {
     if (!item) {
       return;
     }
@@ -46,6 +46,7 @@ export const ExampleList: React.FC<ExampleListProps> = (props) => {
         data-is-focusable
         aria-label={item.name + '; ' + item.description}
         css={exampleListCell}
+        role="button"
         tabIndex={0}
         onClick={() => onClick(item.id)}
         onKeyDown={(ev) => {
@@ -66,7 +67,7 @@ export const ExampleList: React.FC<ExampleListProps> = (props) => {
   return (
     <div css={exampleListContainer} data-is-scrollable="true">
       <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
-        <List items={examples} onRenderCell={_onRenderCell} />
+        <List items={examples} onRenderCell={onRenderCell} />
       </ScrollablePane>
     </div>
   );

Composer/packages/client/src/pages/language-generation/code-editor.tsx

@@ -103,7 +103,7 @@ const CodeEditor: React.FC<CodeEditorProps> = (props) => {
     [file, projectId]
   );
 
-  const _onChange = useCallback(
+  const onChange = useCallback(
     (value) => {
       if (!file) return;
       if (inlineMode) {
@@ -142,7 +142,7 @@ const CodeEditor: React.FC<CodeEditorProps> = (props) => {
       }}
       lgOption={lgOption}
       value={content}
-      onChange={_onChange}
+      onChange={onChange}
       onChangeSettings={handleSettingsChange}
     />
   );

Composer/packages/client/src/pages/language-understanding/code-editor.tsx

@@ -101,7 +101,7 @@ const CodeEditor: React.FC<CodeEditorProps> = (props) => {
     [file, projectId]
   );
 
-  const _onChange = useCallback(
+  const onChange = useCallback(
     (value) => {
       setContent(value);
       if (!file) return;
@@ -134,7 +134,7 @@ const CodeEditor: React.FC<CodeEditorProps> = (props) => {
       }}
       luOption={luOption}
       value={content}
-      onChange={_onChange}
+      onChange={onChange}
       onChangeSettings={handleSettingsChange}
     />
   );