Component statement support for <children> and field attributes

src/bscPlugin/fileProviders/ComponentStatementProvider.ts

@@ -7,7 +7,7 @@ import { Cache } from '../../Cache';
 import * as path from 'path';
 import { util } from '../../util';
 import type { ProvideFileEvent } from '../../interfaces';
-import { isDottedGetExpression, isFieldStatement, isMethodStatement, isVariableExpression } from '../../astUtils/reflection';
+import { isDottedGetExpression, isFieldStatement, isMethodStatement, isVariableExpression, isLiteralExpression, isTemplateStringExpression } from '../../astUtils/reflection';
 import { createFunctionStatement, createFunctionExpression, createDottedSetStatement, createVariableExpression } from '../../astUtils/creators';
 import type { Statement } from '../../parser/AstNode';
 import { TokenKind } from '../../lexer/TokenKind';
@@ -27,7 +27,7 @@ export class ComponentStatementProvider {
         const cache = new Cache<string, string>();
         file.ast.walk(createVisitor({
             ComponentStatement: (node) => {
-                //force the desetPath for this component to be within the `pkg:/components` folder
+                //force the destPath for this component to be within the `pkg:/components` folder
                 const destDir = cache.getOrAdd(file.srcPath, () => {
                     return path.dirname(file.destPath).replace(/^(.+?)(?=[\/\\]|$)/, (match: string, firstDirName: string) => {
                         return 'components';
@@ -56,26 +56,76 @@ export class ComponentStatementProvider {
 
                 //declare interface field
             } else if (isFieldStatement(member) && member.accessModifier?.text.toLowerCase() === 'public') {
-                return `<field id="${member.name.text}" type="${member.typeExpression.getName()}" />`;
+                let fieldAttributes = {
+                    id: member.name.text,
+                    type: member.typeExpression.getName(),
+                    alias: this.getAnnotationValue(member.annotations?.filter(x => x.name.toLowerCase() === 'alias')),
+                    onChange: this.getAnnotationValue(member.annotations?.filter(x => x.name.toLowerCase() === 'onchange')),
+                    alwaysNotify: this.getAnnotationValue(member.annotations?.filter(x => x.name.toLowerCase() === 'alwaysnotify')) === 'true' ? 'true' : ''
+                };
+
+                let field = '<field';
+                Object.keys(fieldAttributes).forEach(attribute => {
+                    let value = fieldAttributes[attribute];
+                    // Only add a attribute if the value is not empty.
+                    if (value !== '') {
+                        field += ` ${attribute}="${fieldAttributes[attribute]}"`;
+                    }
+                });
+                field += ' />';
+                return field;
             } else {
                 return '';
             }
         }).filter(x => !!x);
 
+        let componentChildren = '';
+        const template = statement.annotations?.find(x => x.name.toLowerCase() === 'template');
+        if (template) {
+            // TODO: Better strip of component and children elements.
+            componentChildren = `<children>${this.getAnnotationValue([template]).replaceAll('<component>', '').replaceAll('</component>', '').replaceAll('<children>', '').replaceAll('</children>', '')}</children>`;
+        }
+
         xmlFile.parse(undent`
             <component name="${name}" extends="${statement.getParentName(ParseMode.BrightScript) ?? 'Group'}">
                 <script uri="${util.sanitizePkgPath(file.destPath)}" />
                 <script uri="${util.sanitizePkgPath(codebehindFile.destPath)}" />
                 ${interfaceMembers.length > 0 ? '<interface>' : ''}
                     ${interfaceMembers.join('\n                    ')}
                 ${interfaceMembers.length > 0 ? '</interface>' : ''}
+                ${componentChildren}
             </component>
         `);
 
-
         this.event.files.push(xmlFile);
     }
 
+    private getAnnotationValue(annotations: any) {
+        let response = [];
+        if (annotations !== undefined) {
+            annotations.forEach(a => {
+                let args = a?.call?.args[0];
+                if (isVariableExpression(args) || isDottedGetExpression(args)) {
+                    response.push(args.name.text);
+                } else if (isLiteralExpression(args)) {
+                    let values = args?.token?.text.replaceAll('\"', '').replaceAll(' ', '').split(',');
+                    response = response.concat(values);
+                } else if (isTemplateStringExpression(args)) {
+                    let textOutput = '';
+                    args.quasis[0]?.expressions?.forEach((a: { token: { text: string } }) => {
+                        textOutput += a.token.text;
+                    });
+                    response.push(textOutput);
+                }
+            });
+
+            response = response.filter((item, index) => {
+                return response.indexOf(item) === index;
+            });
+        }
+        return response.join(', ');
+    }
+
     private registerCodebehind(name: string, statement: ComponentStatement, destDir: string) {
         //create the codebehind file
         const file = this.event.fileFactory.BrsFile({
@@ -120,7 +170,7 @@ export class ComponentStatementProvider {
             initFunc.func.body.statements.unshift(...initStatements);
         }
 
-        //TODO these are hacks that we need until scope has been refactored to leverate the AST directly
+        //TODO these are hacks that we need until scope has been refactored to leverage the AST directly
         file.parser.invalidateReferences();
         // eslint-disable-next-line @typescript-eslint/dot-notation
         file['findCallables']();