feat: LG LSP in Composer

.vscode/launch.json

@@ -1,14 +1,41 @@
 {
   "version": "0.2.0",
   "configurations": [
+    {
+      "type": "chrome",
+      "request": "attach",
+      "name": "Attach to Chrome",
+      "port": 9222,
+      "webRoot": "${workspaceFolder}"
+    },
+    {
+      "name": "LSP Server",
+      "type": "node",
+      "request": "launch",
+      "args": [
+        "${workspaceFolder}/Composer/packages/tools/language-servers/language-generation/demo/src/server.ts"
+      ],
+      "runtimeArgs": [
+        "--nolazy",
+        "-r",
+        "${workspaceFolder}/Composer/node_modules/ts-node/register"
+      ],
+      "sourceMaps": true,
+      "cwd": "${workspaceFolder}/Composer/packages/tools/language-servers/language-generation/demo/src",
+      "protocol": "inspector",
+    },
     {
       "type": "node",
       "request": "launch",
       "name": "Server: Launch",
-      "args": ["./build/server.js"],
+      "args": [
+        "./build/server.js"
+      ],
       "preLaunchTask": "server: build",
       "restart": true,
-      "outFiles": ["./build/*"],
+      "outFiles": [
+        "./build/*"
+      ],
       "envFile": "${workspaceFolder}/Composer/packages/server/.env",
       "outputCapture": "std",
       "cwd": "${workspaceFolder}/Composer/packages/server"
@@ -20,8 +47,14 @@
       "name": "Jest Debug",
       "program": "${workspaceRoot}/Composer/node_modules/jest/bin/jest",
       "stopOnEntry": false,
-      "args": ["--runInBand", "--env=jsdom", "--config=jest.config.js"],
-      "runtimeArgs": ["--inspect-brk"],
+      "args": [
+        "--runInBand",
+        "--env=jsdom",
+        "--config=jest.config.js"
+      ],
+      "runtimeArgs": [
+        "--inspect-brk"
+      ],
       "cwd": "${workspaceRoot}/Composer/packages/server",
       "sourceMaps": true,
       "console": "integratedTerminal"

Composer/jest.config.js

@@ -41,5 +41,6 @@ module.exports = {
     '<rootDir>/packages/extensions/visual-designer',
     '<rootDir>/packages/lib/code-editor',
     '<rootDir>/packages/lib/shared',
+    '<rootDir>/packages/tools/language-servers/language-generation',
   ],
 };

Composer/package.json

@@ -13,16 +13,20 @@
     "packages/extensions",
     "packages/extensions/*",
     "packages/lib",
-    "packages/lib/*"
+    "packages/lib/*",
+    "packages/tools",
+    "packages/tools/language-servers",
+    "packages/tools/language-servers/*"
   ],
   "scripts": {
     "build": "node scripts/begin.js && yarn build:prod",
-    "build:prod": "yarn build:lib && yarn build:extensions && yarn build:server && yarn build:client",
-    "build:dev": "yarn build:lib && yarn build:extensions",
+    "build:prod": "yarn build:dev && yarn build:server && yarn build:client",
+    "build:dev": "yarn build:tools && yarn build:lib && yarn build:extensions",
     "build:lib": "yarn workspace @bfc/libs build:all",
     "build:extensions": "yarn workspace @bfc/extensions build:all",
     "build:server": "yarn workspace @bfc/server build",
     "build:client": "yarn workspace @bfc/client build",
+    "build:tools": "yarn workspace @bfc/tools build:all",
     "start": "cross-env NODE_ENV=production PORT=3000 yarn start:server",
     "startall": "concurrently --kill-others-on-fail \"npm:runtime\" \"npm:start\"",
     "start:dev": "concurrently  \"npm:start:client\" \"npm:start:server:dev\"",

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

@@ -228,6 +228,10 @@ module.exports = function(webpackEnv) {
       // `web` extension prefixes have been added for better support
       // for React Native Web.
       extensions: paths.moduleFileExtensions.map(ext => `.${ext}`),
+      alias: {
+        // Support lsp code editor
+        vscode: require.resolve('monaco-languageclient/lib/vscode-compatibility'),
+      },
       plugins: [
         // Adds support for installing with Plug'n'Play, leading to faster installs and adding
         // guards against forgotten dependencies and such.
@@ -402,7 +406,7 @@ module.exports = function(webpackEnv) {
     plugins: [
       new MonacoWebpackPlugin({
         // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
-        languages: ['markdown', 'botbuilderlg', 'json'],
+        languages: ['markdown', 'json'],
       }),
       // Generates an `index.html` file with the <script> injected.
       new HtmlWebpackPlugin(

Composer/packages/client/jest.config.js

@@ -10,6 +10,8 @@ module.exports = {
     // Any imports of .scss / .css files will instead import styleMock.js which is an empty object
     '\\.(jpg|jpeg|png|svg|gif)$': '<rootDir>/__tests__/jestMocks/styleMock.js',
     '\\.(s)?css$': '<rootDir>/__tests__/jestMocks/styleMock.js',
+    // lsp code editor
+    vscode$: 'monaco-languageclient/lib/vscode-compatibility',
 
     // use commonjs modules for test so they do not need to be compiled
     'office-ui-fabric-react/lib/(.*)$': 'office-ui-fabric-react/lib-commonjs/$1',

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

@@ -2,45 +2,108 @@
 // Licensed under the MIT License.
 
 /* eslint-disable react/display-name */
-import React, { useState, useEffect } from 'react';
-import { LgEditor } from '@bfc/code-editor';
+import React, { useState, useEffect, useMemo, useContext } from 'react';
+import { LgEditor, LGOption } from '@bfc/code-editor';
 import get from 'lodash/get';
 import debounce from 'lodash/debounce';
 import isEmpty from 'lodash/isEmpty';
-import { CodeRange, LgFile } from '@bfc/shared';
+import { Diagnostic } from 'botbuilder-lg';
+import { LgFile } from '@bfc/shared';
 
+import { StoreContext } from '../../store';
 import * as lgUtil from '../../utils/lgUtil';
 
 interface CodeEditorProps {
   file: LgFile;
-  onChange: (value: string) => void;
-  codeRange?: Partial<CodeRange> | null;
+  template: lgUtil.Template | null;
 }
 
+// lsp server port should be same with composer/server port.
+const lspServerPort = process.env.NODE_ENV === 'production' ? process.env.PORT || 3000 : 5000;
+const lspServerPath = '/lg-language-server';
+
 export default function CodeEditor(props: CodeEditorProps) {
-  const { file, codeRange } = props;
-  const onChange = debounce(props.onChange, 500);
+  const { actions } = useContext(StoreContext);
+  const { file, template } = props;
   const [diagnostics, setDiagnostics] = useState(get(file, 'diagnostics', []));
-  const [content, setContent] = useState(get(file, 'content', ''));
-
+  const [content, setContent] = useState('');
+  const [errorMsg, setErrorMsg] = useState('');
   const fileId = file && file.id;
+  const inlineMode = !!template;
   useEffect(() => {
     // reset content with file.content's initial state
     if (isEmpty(file)) return;
-    setContent(file.content);
-  }, [fileId]);
+    const value = template ? get(template, 'Body', '') : get(file, 'content', '');
+    setContent(value);
+  }, [fileId, template]);
+
+  useEffect(() => {
+    const isInvalid = !lgUtil.isValid(diagnostics);
+    const text = isInvalid ? lgUtil.combineMessage(diagnostics) : '';
+    setErrorMsg(text);
+  }, [diagnostics]);
+
+  const updateLgTemplate = useMemo(
+    () =>
+      debounce((body: string) => {
+        const templateName = get(template, 'Name');
+        if (!templateName) return;
+        const payload = {
+          file,
+          templateName,
+          template: {
+            Name: templateName,
+            Parameters: get(template, 'Parameters'),
+            Body: body,
+          },
+        };
+        actions.updateLgTemplate(payload);
+      }, 500),
+    [file, template]
+  );
+
+  const updateLgFile = useMemo(
+    () =>
+      debounce((content: string) => {
+        const payload = {
+          id: file.id,
+          content,
+        };
+        actions.updateLgFile(payload);
+      }, 500),
+    [file]
+  );
 
-  // local content maybe invalid and should always sync real-time
-  // file.content assume to be load from server
   const _onChange = value => {
     setContent(value);
-    onChange(value);
-    const diagnostics = lgUtil.check(value);
+
+    let diagnostics: Diagnostic[] = [];
+    if (inlineMode) {
+      const content = get(file, 'content', '');
+      const templateName = get(template, 'Name', '');
+      try {
+        const newContent = lgUtil.updateTemplate(content, templateName, {
+          Name: templateName,
+          Parameters: get(template, 'Parameters'),
+          Body: value,
+        });
+        diagnostics = lgUtil.check(newContent);
+        updateLgTemplate(value);
+      } catch (error) {
+        setErrorMsg(error.message);
+      }
+    } else {
+      diagnostics = lgUtil.check(value);
+      updateLgFile(value);
+    }
     setDiagnostics(diagnostics);
   };
 
-  const isInvalid = !lgUtil.isValid(diagnostics);
-  const errorMsg = isInvalid ? lgUtil.combineMessage(diagnostics) : '';
+  const lgOption: LGOption = {
+    inline: inlineMode,
+    content: get(file, 'content', ''),
+    template: template ? template : undefined,
+  };
 
   return (
     <LgEditor
@@ -53,9 +116,14 @@ export default function CodeEditor(props: CodeEditorProps) {
         lineDecorationsWidth: undefined,
         lineNumbersMinChars: false,
       }}
-      codeRange={codeRange || -1}
-      errorMsg={errorMsg}
+      hidePlaceholder={inlineMode}
       value={content}
+      errorMsg={errorMsg}
+      lgOption={lgOption}
+      languageServer={{
+        port: Number(lspServerPort),
+        path: lspServerPath,
+      }}
       onChange={_onChange}
     />
   );

Composer/packages/client/src/pages/language-generation/index.tsx

@@ -7,12 +7,11 @@ import React, { useContext, Fragment, useEffect, useState, useMemo, Suspense } f
 import formatMessage from 'format-message';
 import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
 import { Nav, INavLinkGroup, INavLink } from 'office-ui-fabric-react/lib/Nav';
-import get from 'lodash/get';
+import { LGTemplate } from 'botbuilder-lg';
 import { RouteComponentProps } from '@reach/router';
-import { CodeRange } from '@bfc/shared';
+import get from 'lodash/get';
 
 import { LoadingSpinner } from '../../components/LoadingSpinner';
-import { OpenAlertModal, DialogStyle } from '../../components/Modal';
 import { StoreContext } from '../../store';
 import {
   ContentHeaderStyle,
@@ -33,11 +32,11 @@ import { TestController } from './../../TestController';
 const CodeEditor = React.lazy(() => import('./code-editor'));
 
 const LGPage: React.FC<RouteComponentProps> = props => {
-  const { state, actions } = useContext(StoreContext);
+  const { state } = useContext(StoreContext);
   const { lgFiles, dialogs } = state;
   const [editMode, setEditMode] = useState(false);
   const [fileValid, setFileValid] = useState(true);
-  const [codeRange, setCodeRange] = useState<CodeRange | null>(null);
+  const [inlineTemplate, setInlineTemplate] = useState<null | lgUtil.Template>(null);
 
   const subPath = props['*'];
   const isRoot = subPath === '';
@@ -121,34 +120,16 @@ const LGPage: React.FC<RouteComponentProps> = props => {
 
   function onToggleEditMode() {
     setEditMode(!editMode);
-    setCodeRange(null);
-  }
-
-  async function onChange(newContent) {
-    if (!lgFile) {
-      return;
-    }
-
-    const payload = {
-      id: lgFile.id,
-      content: newContent,
-    };
-
-    try {
-      await actions.updateLgFile(payload);
-    } catch (error) {
-      OpenAlertModal('Save Failed', error.message, {
-        style: DialogStyle.Console,
-      });
-    }
+    setInlineTemplate(null);
   }
 
   // #TODO: get line number from lg parser, then deep link to code editor this
   // Line
-  function onTableViewClickEdit(template) {
-    setCodeRange({
-      startLineNumber: get(template, 'ParseTree._start._line', 0),
-      endLineNumber: get(template, 'ParseTree._stop._line', 0),
+  function onTableViewClickEdit(template: LGTemplate) {
+    setInlineTemplate({
+      Name: get(template, 'Name', ''),
+      Parameters: get(template, 'Parameters'),
+      Body: get(template, 'Body', ''),
     });
     navigateTo(`/language-generation`);
     setEditMode(true);
@@ -174,7 +155,7 @@ const LGPage: React.FC<RouteComponentProps> = props => {
             onText={formatMessage('Edit mode')}
             offText={formatMessage('Edit mode')}
             checked={editMode}
-            disabled={(!isRoot && editMode === false) || (codeRange === null && fileValid === false)}
+            disabled={(!isRoot && editMode === false) || (fileValid === false && editMode === true)}
             onChange={onToggleEditMode}
           />
         </div>
@@ -215,7 +196,7 @@ const LGPage: React.FC<RouteComponentProps> = props => {
           <div css={contentEditor}>
             {editMode ? (
               <Suspense fallback={<LoadingSpinner />}>
-                <CodeEditor file={lgFile} codeRange={codeRange} onChange={onChange} />
+                <CodeEditor file={lgFile} template={inlineTemplate} />
               </Suspense>
             ) : (
               <TableView file={lgFile} activeDialog={activeDialog} onClickEdit={onTableViewClickEdit} />

Composer/packages/client/src/utils/lgUtil.ts

@@ -14,9 +14,9 @@ const lgStaticChecker = new StaticChecker();
 
 const lgImportResolver = ImportResolver.fileResolver;
 
-interface Template {
+export interface Template {
   Name: string;
-  Parameters: string[];
+  Parameters?: string[];
   Body: string;
 }
 
@@ -69,7 +69,11 @@ export function increaseNameUtilNotExist(templates: LGTemplate[], name: string):
   return newName;
 }
 
-export function updateTemplate(content: string, templateName: string, { Name, Parameters, Body }: Template): string {
+export function updateTemplate(
+  content: string,
+  templateName: string,
+  { Name, Parameters = [], Body }: Template
+): string {
   const resource = LGParser.parse(content);
   // add if not exist
   if (resource.Templates.findIndex(t => t.Name === templateName) === -1) {
@@ -80,7 +84,7 @@ export function updateTemplate(content: string, templateName: string, { Name, Pa
 }
 
 // if Name exist, throw error.
-export function addTemplate(content: string, { Name, Parameters, Body }: Template): string {
+export function addTemplate(content: string, { Name, Parameters = [], Body }: Template): string {
   const resource = LGParser.parse(content);
   return resource.addTemplate(Name, Parameters, Body).toString();
 }

Composer/packages/extensions/obiformeditor/demo/webpack.config.demo.js

@@ -94,6 +94,9 @@ module.exports = {
   resolve: {
     extensions: ['.tsx', '.ts', '.js'],
     plugins: [new TsconfigPathsPlugin({ configFile: path.resolve(__dirname, './tsconfig.json') })],
+    alias: {
+      vscode: require.resolve('monaco-languageclient/lib/vscode-compatibility'),
+    },
   },
 
   output: {