refactor: upgrade lg parser and syntax

BotProject/CSharp/ComposerDialogs/Main/Main.dialog

@@ -9,7 +9,7 @@
       "actions": [
         {
           "$type": "Microsoft.SendActivity",
-          "activity": "[bfdactivity-003038]"
+          "activity": "@{bfdactivity-003038()}"
         }
       ]
     }

Composer/packages/client/package.json

@@ -23,7 +23,7 @@
     "@emotion/core": "^10.0.7",
     "@reach/router": "^1.2.1",
     "axios": "^0.18.0",
-    "botbuilder-lg": "https://botbuilder.myget.org/F/botbuilder-declarative/npm/botbuilder-lg/-/4.7.0-preview2.tgz",
+    "botbuilder-lg": "4.7.0-preview.93464",
     "format-message": "^6.2.3",
     "immer": "^2.1.4",
     "jwt-decode": "^2.2.0",

Composer/packages/client/src/ShellApi.ts

@@ -133,29 +133,15 @@ export const ShellApi: React.FC = () => {
     const file = lgFiles.find(file => file.id === id);
     if (!file) throw new Error(`lg file ${id} not found`);
 
-    const templates = lgUtil.parse(file.content);
-    const lines = file.content.split('\n');
-
-    return templates.map(t => {
-      const [start, end] = getTemplateBodyRange(t);
-      const body = lines.slice(start - 1, end).join('\n');
-
-      return { Name: t.Name, Parameters: t.Parameters, Body: body };
-    });
-  }
-
-  function getTemplateBodyRange(template) {
-    const startLineNumber = template.ParseTree._start.line + 1;
-    const endLineNumber = template.ParseTree._stop.line;
-    return [startLineNumber, endLineNumber];
+    return lgUtil.parse(file.content);
   }
 
   /**
    *
    * @param {
    * id: string,
    * templateName: string,
-   * template: { Name: string, ?Parameters: string[], Body: string }
+   * template: { name: string, ?parameters: string[], body: string }
    * }
    * when templateName exit in current file, will do update
    * when templateName do not exit in current file, will do create

Composer/packages/client/src/extension-container/ExtensionContainer.tsx

@@ -94,7 +94,7 @@ const shellApi: ShellApi = {
     return apiClient.apiCall('updateLgTemplate', {
       id,
       templateName,
-      template: { Name: templateName, Body: template },
+      template: { name: templateName, body: template },
     });
   },
 

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

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /* eslint-disable react/display-name */
-import React, { useState, useEffect, useMemo, useContext } from 'react';
+import React, { useState, useEffect, useMemo, useContext, useCallback } from 'react';
 import { LgEditor, LGOption } from '@bfc/code-editor';
 import get from 'lodash/get';
 import debounce from 'lodash/debounce';
@@ -33,7 +33,7 @@ export default function CodeEditor(props: CodeEditorProps) {
   useEffect(() => {
     // reset content with file.content's initial state
     if (isEmpty(file)) return;
-    const value = template ? get(template, 'Body', '') : get(file, 'content', '');
+    const value = template ? get(template, 'body', '') : get(file, 'content', '');
     setContent(value);
   }, [fileId, template]);
 
@@ -46,15 +46,15 @@ export default function CodeEditor(props: CodeEditorProps) {
   const updateLgTemplate = useMemo(
     () =>
       debounce((body: string) => {
-        const templateName = get(template, 'Name');
+        const templateName = get(template, 'name');
         if (!templateName) return;
         const payload = {
           file,
           templateName,
           template: {
-            Name: templateName,
-            Parameters: get(template, 'Parameters'),
-            Body: body,
+            name: templateName,
+            parameters: get(template, 'parameters'),
+            body,
           },
         };
         actions.updateLgTemplate(payload);
@@ -74,30 +74,33 @@ export default function CodeEditor(props: CodeEditorProps) {
     [file]
   );
 
-  const _onChange = value => {
-    setContent(value);
+  const _onChange = useCallback(
+    value => {
+      setContent(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);
+      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);
       }
-    } else {
-      diagnostics = lgUtil.check(value);
-      updateLgFile(value);
-    }
-    setDiagnostics(diagnostics);
-  };
+      setDiagnostics(diagnostics);
+    },
+    [file, template]
+  );
 
   const lgOption: LGOption = {
     inline: inlineMode,

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

@@ -3,7 +3,7 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import React, { useContext, Fragment, useEffect, useState, useMemo, Suspense } from 'react';
+import React, { useContext, Fragment, useEffect, useState, useMemo, Suspense, useCallback } from 'react';
 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';
@@ -107,30 +107,28 @@ const LGPage: React.FC<RouteComponentProps> = props => {
     }
   }, [lgFiles]);
 
-  function onSelect(id) {
+  const onSelect = useCallback(id => {
     if (id === '_all') {
       navigateTo('/language-generation');
     } else {
       navigateTo(`language-generation/${id}`);
     }
-  }
+  }, []);
 
-  function onToggleEditMode() {
+  const onToggleEditMode = useCallback(() => {
     setEditMode(!editMode);
     setInlineTemplate(null);
-  }
+  }, [editMode]);
 
-  // #TODO: get line number from lg parser, then deep link to code editor this
-  // Line
-  function onTableViewClickEdit(template: LGTemplate) {
+  const onTableViewClickEdit = useCallback((template: LGTemplate) => {
     setInlineTemplate({
-      Name: get(template, 'Name', ''),
-      Parameters: get(template, 'Parameters'),
-      Body: get(template, 'Body', ''),
+      name: get(template, 'name', ''),
+      parameters: get(template, 'parameters'),
+      body: get(template, 'body', ''),
     });
     navigateTo(`/language-generation`);
     setEditMode(true);
-  }
+  }, []);
 
   const toolbarItems = [
     {