brighterscript-xml-plugin 0.0.1

package/README.md

@@ -0,0 +1,35 @@
+# brighterscript-xml-plugin
+## BrighterScript plugin for SceneGraph XML completions
+
+### It Does:
+- suggest components
+- suggest component fields
+
+### It Does Not:
+- validate field values
+- suggest interface elements like `field` and `function`
+
+### Installation
+```
+npm i bsc-xml
+```
+`bsconfig.json`
+```
+{
+    ...
+    plugins: [
+        'bsc-xml'
+    ]
+}
+```
+
+### Usage
+SceneGraph Component completions
+![usage gif](./bsc-xml.gif)
+
+
+- provides both built-in Roku SceneGraph components and custom project components
+- provides built-in fields and custom fields
+- auto suggestions for fields when typing inside an element tag
+- use completions shortcut to trigger manually
+- component completions on `<` do not fill automatically, pretty sure this is something that needs to be configured at the vscode extension level.

package/dist/SGFieldTypes.js

@@ -0,0 +1,59 @@
+"use strict";
+/**
+ * unused, just an export of all types for eventual validation
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SGFieldTypes = void 0;
+class SGFieldTypes {
+    constructor() {
+        this.typeMap = {
+            Time: true,
+            string: true,
+            float: true,
+            boolean: true,
+            'option string': true,
+            time: true,
+            Boolean: true,
+            integer: true,
+            'array of floats': true,
+            ContentNode: true,
+            color: true,
+            uri: true,
+            rect2d: true,
+            Float: true,
+            vector2d: true,
+            font: true,
+            'N/A': true,
+            'array of strings': true,
+            'Poster node': true,
+            Font: true,
+            'array of Boolean': true,
+            'array of colors': true,
+            ButtonGroup: true,
+            Event: true,
+            'array of integers': true,
+            'RSGPalette node': true,
+            "array of float's": true,
+            Node: true,
+            'option as string': true,
+            'array of float': true,
+            'URI string': true,
+            BusySpinner: true,
+            'color (string containing hex value e.g. RGBA)': true,
+            'array of integer': true,
+            'array of vector2d': true,
+            'associative array': true,
+            assocarray: true,
+            bool: true,
+            'associative array of associative arrays': true,
+            URL: true,
+            TargetSet: true,
+            int: true,
+            'array of TargetSet nodes': true,
+            Color: true,
+            'array of rectangles': true,
+            'roArray of roAssociativeArrays': true,
+        };
+    }
+}
+exports.SGFieldTypes = SGFieldTypes;

package/dist/SGXmlCompletionProvider.js

@@ -0,0 +1,243 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SGXmlCompletionProvider = void 0;
+const brighterscript_1 = require("brighterscript");
+const vscode_languageserver_types_1 = require("vscode-languageserver-types");
+const roku_types_1 = require("brighterscript/dist/roku-types");
+const SystemCompletion_1 = require("./SystemCompletion");
+const OPEN_CLOSE_TAGS = ['<', '</', '>', '/>'];
+const systemNodes = roku_types_1.nodes;
+class SGXmlCompletionProvider {
+    constructor(program) {
+        this.program = program;
+        this.systemCompletions = this.processSystemNodes();
+    }
+    /**
+     *
+     * @returns system nodes indexed by name {[name]: SystemCompletion}
+     */
+    processSystemNodes() {
+        const result = {};
+        for (const key in systemNodes) {
+            const node = systemNodes[key];
+            result[key] = new SystemCompletion_1.SystemCompletion(node);
+        }
+        return result;
+    }
+    getFieldCompletions(componentName) {
+        var _a;
+        componentName = componentName.toLocaleLowerCase();
+        const projectComponent = this.program.getComponent(componentName);
+        let result = [];
+        if (projectComponent) {
+            result.push(...this.getCompletionsFromXmlFile(projectComponent.file));
+            const extendsName = (_a = projectComponent.file.ast.component) === null || _a === void 0 ? void 0 : _a.extends;
+            if (extendsName) {
+                result.push(...this.getAllAvailableFields(extendsName));
+            }
+        }
+        else if (systemNodes[componentName]) {
+            const node = this.systemCompletions[componentName];
+            result.push(...node.fields);
+            if (node.extends) {
+                result.push(...this.getAllAvailableFields(node.extends));
+            }
+        }
+        else {
+            this.program.logger.error(`Unknown component extension: ${componentName}`);
+        }
+        return result;
+    }
+    getCompletionsFromXmlFile(xmlFile) {
+        var _a, _b;
+        return ((_b = (_a = xmlFile.ast.component) === null || _a === void 0 ? void 0 : _a.api.fields.map((f) => {
+            return {
+                label: f.id,
+                detail: `${f.type}${f.value ? `: ${f.value}` : ''}`,
+            };
+        })) !== null && _b !== void 0 ? _b : []);
+    }
+    getComponentCompletions(file, beforeToken) {
+        const completions = [];
+        // suggest components
+        completions.unshift(...Object.entries(this.systemCompletions).map(([key, obj]) => {
+            return {
+                label: obj.name,
+                sortText: '<' + obj.name,
+                kind: vscode_languageserver_types_1.CompletionItemKind.Class,
+                insertTextFormat: vscode_languageserver_types_1.InsertTextFormat.Snippet,
+                insertText: `${beforeToken === '<' ? '' : '<'}${obj.name} $0></${obj.name}>`,
+            };
+        }), ...this.program
+            .getScopes()
+            .filter(brighterscript_1.isXmlScope)
+            .filter((s) => s.xmlFile.componentName !== file.componentName)
+            .map((s) => s.xmlFile.componentName)
+            .map((name) => {
+            return {
+                label: name.text,
+                sortText: '<' + name.text,
+                kind: vscode_languageserver_types_1.CompletionItemKind.Class,
+                insertTextFormat: vscode_languageserver_types_1.InsertTextFormat.Snippet,
+                insertText: `${beforeToken === '<' ? '' : '<'}${name.text} $0></${name.text}>`,
+            };
+        }));
+        return completions;
+    }
+    getAllAvailableFields(componentName) {
+        var _a, _b, _c, _d, _e, _f;
+        const component = this.program.getComponent(componentName);
+        let result = [];
+        if (component) {
+            result = [
+                ...((_c = (_b = (_a = component.file.ast.component) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.fields.map((f) => {
+                    return {
+                        name: f.id,
+                        type: f.type,
+                        sortText: '0_' + f.id,
+                    };
+                })) !== null && _c !== void 0 ? _c : []),
+                ...this.getAllAvailableFields((_e = (_d = component.file.ast.component) === null || _d === void 0 ? void 0 : _d.extends) !== null && _e !== void 0 ? _e : '').map((f) => {
+                    return Object.assign(Object.assign({}, f), { sortText: '1_' + f.sortText });
+                }),
+            ];
+        }
+        else {
+            const rokuComponent = roku_types_1.nodes[componentName.toLowerCase()];
+            if (rokuComponent) {
+                const rokuComponentFields = (_f = rokuComponent.fields) === null || _f === void 0 ? void 0 : _f.filter((f) => { var _a; return (_a = f.accessPermission) === null || _a === void 0 ? void 0 : _a.includes('WRITE'); }).map((f) => {
+                    return {
+                        name: f.name,
+                        type: f.type,
+                        sortText: '0_' + f.name,
+                    };
+                });
+                if (rokuComponent.extends) {
+                    result = [
+                        ...rokuComponentFields,
+                        ...this.getAllAvailableFields(rokuComponent.extends.name).map((f) => {
+                            return Object.assign(Object.assign({}, f), { sortText: '1_' + f.sortText });
+                        }),
+                    ];
+                }
+                else {
+                    result = rokuComponentFields;
+                }
+            }
+        }
+        const resultMap = {};
+        result.forEach((e) => {
+            resultMap[e.name] = e;
+        });
+        result = Object.values(result);
+        return result;
+    }
+    process(event) {
+        var _a, _b, _c, _d, _e, _f;
+        const { file, position } = event;
+        const tokens = event.file.parser.tokens.map((t, i) => {
+            return Object.assign({ index: i }, t);
+        });
+        const cursorToken = tokens.find((t) => {
+            (t) => {
+                var _a;
+                return ((_a = (t.startLine - 1 <= position.line &&
+                    t.startColumn - 1 < position.character &&
+                    t.endColumn)) !== null && _a !== void 0 ? _a : 0 > position.character - 1);
+            };
+        });
+        const beforeToken = cursorToken
+            ? cursorToken
+            : tokens.find((t, i, o) => {
+                var _a, _b, _c, _d;
+                if (t.endLine <= position.line + 1) {
+                    const nextStartLine = (_b = (_a = o[i + 1]) === null || _a === void 0 ? void 0 : _a.startLine) !== null && _b !== void 0 ? _b : -1;
+                    let nextStartColumn = -1;
+                    if (nextStartLine === position.line + 1) {
+                        nextStartColumn = (_c = o[i + 1]) === null || _c === void 0 ? void 0 : _c.startColumn;
+                    }
+                    else if (nextStartLine > position.line + 1) {
+                        nextStartColumn = Number.MAX_SAFE_INTEGER;
+                    }
+                    return ((t.endLine < position.line + 1 ||
+                        ((_d = t.endColumn) !== null && _d !== void 0 ? _d : 0) < position.character + 1) &&
+                        nextStartColumn > position.character);
+                }
+                return false;
+            });
+        if (beforeToken) {
+            if (beforeToken.image === '<') {
+                event.completions.push(...this.getComponentCompletions(file, beforeToken === null || beforeToken === void 0 ? void 0 : beforeToken.image));
+                return;
+            }
+            else {
+                let openTag = beforeToken;
+                // iterate backwards until we find some kind of open or close tag
+                while (openTag) {
+                    if (OPEN_CLOSE_TAGS.includes(openTag.image)) {
+                        break;
+                    }
+                    openTag = tokens[openTag.index - 1];
+                }
+                switch (openTag === null || openTag === void 0 ? void 0 : openTag.image) {
+                    case '<': // we are  inside an element definition
+                        const fields = [];
+                        let nextField = tokens[openTag.index + 1];
+                        while (nextField) {
+                            if (OPEN_CLOSE_TAGS.includes(nextField.image)) {
+                                break;
+                            }
+                            else if (nextField.image === '=') {
+                                fields.push({
+                                    name: (_b = (_a = tokens[nextField.index - 1]) === null || _a === void 0 ? void 0 : _a.image) !== null && _b !== void 0 ? _b : '',
+                                    value: (_d = (_c = tokens[nextField.index + 1]) === null || _c === void 0 ? void 0 : _c.image.replace(/"/g, '')) !== null && _d !== void 0 ? _d : '',
+                                });
+                            }
+                            nextField = tokens[nextField.index + 1];
+                        }
+                        const componentName = (_e = tokens[openTag.index + 1]) === null || _e === void 0 ? void 0 : _e.image;
+                        event.completions.push(...((_f = this.getAllAvailableFields(componentName !== null && componentName !== void 0 ? componentName : '')
+                            .filter((f) => !fields.map((f) => f.name).includes(f.name))
+                            .map((field) => {
+                            var _a;
+                            return {
+                                label: field.name,
+                                insertText: `${field.name}="\${1:${(_a = field.value) !== null && _a !== void 0 ? _a : ''}}"`,
+                                kind: vscode_languageserver_types_1.CompletionItemKind.Field,
+                                insertTextFormat: vscode_languageserver_types_1.InsertTextFormat.Snippet,
+                                detail: field.type,
+                                sortText: field.sortText,
+                            };
+                        })) !== null && _f !== void 0 ? _f : []));
+                        return;
+                    case '>':
+                    case '/>':
+                        event.completions.push(...this.getComponentCompletions(file, beforeToken === null || beforeToken === void 0 ? void 0 : beforeToken.image));
+                        return;
+                    default:
+                        break;
+                }
+            }
+        }
+        else {
+            const childrenOpenToken = tokens.find((token) => {
+                return token.image.toLowerCase() === 'children';
+            });
+            if (childrenOpenToken &&
+                (childrenOpenToken.endLine <= position.line ||
+                    (childrenOpenToken.endLine === position.line + 1 &&
+                        childrenOpenToken.endColumn < position.character))) {
+                event.completions.push(...this.getComponentCompletions(file, undefined));
+            }
+            else {
+                event.completions.push({
+                    label: 'new component',
+                    insertText: `<component name="" extends="Group">
+      
+</component>`,
+                });
+            }
+        }
+    }
+}
+exports.SGXmlCompletionProvider = SGXmlCompletionProvider;

package/dist/SystemCompletion.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SystemCompletion = void 0;
+class SystemCompletion {
+    constructor(systemNode) {
+        var _a;
+        this.name = systemNode.name;
+        this.component = {
+            label: systemNode.name,
+        };
+        this.extends = (_a = systemNode.extends) === null || _a === void 0 ? void 0 : _a.name;
+        this.fields = systemNode.fields
+            .filter((f) => f.accessPermission.includes('WRITE'))
+            .map((f) => {
+            return {
+                label: f.name,
+                type: f.type,
+                detail: f.default,
+                description: f.description,
+            };
+        });
+    }
+}
+exports.SystemCompletion = SystemCompletion;

package/dist/index.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BscXmlPlugin = void 0;
+const brighterscript_1 = require("brighterscript");
+const SGXmlCompletionProvider_1 = require("./SGXmlCompletionProvider");
+const crypto_1 = require("crypto");
+class BscXmlPlugin {
+    constructor() {
+        this.name = 'bsc-xml-plugin';
+        this.id = (0, crypto_1.randomUUID)();
+        // console.log('creating bsc xml plugin');
+    }
+    provideCompletions(completionEvent) {
+        if ((0, brighterscript_1.isXmlFile)(completionEvent.file)) {
+            return new SGXmlCompletionProvider_1.SGXmlCompletionProvider(completionEvent.program).process(completionEvent);
+        }
+    }
+}
+exports.BscXmlPlugin = BscXmlPlugin;
+exports.default = () => {
+    return new BscXmlPlugin();
+};

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "brighterscript-xml-plugin",
+  "version": "0.0.1",
+  "description": "BrighterScript plugin for SceneGraph XML completions",
+  "main": "dist/index.js",
+  "keywords": [
+    "roku",
+    "brightscript",
+    "scenegraph",
+    "brighterscript",
+    "bsc"
+  ],
+  "scripts": {
+    "build": "npm run clean && tsc",
+    "test": "mocha",
+    "clean": "rimraf dist",
+    "prepack": "npm run build"
+  },
+  "mocha": {
+    "spec": "src/**/*.spec.ts",
+    "require": [
+      "source-map-support/register",
+      "ts-node/register"
+    ],
+    "fullTrace": true,
+    "timeout": 60000,
+    "watchExtensions": [
+      "ts"
+    ]
+  },
+  "author": "Sam Heavner",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/chai": "^4.3.4",
+    "@types/mocha": "^10.0.1",
+    "@types/node": "^18.15.3",
+    "brighterscript": "0.65.x",
+    "chai": "^4.3.7",
+    "mocha": "^10.2.0",
+    "rimraf": "^5.0.5",
+    "source-map-support": "^0.5.21",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.0.2",
+    "vscode-languageserver-types": "^3.17.3"
+  },
+  "peerDependencies": {
+    "brighterscript": "0.65.x"
+  },
+  "peerDependenciesMeta": {
+    "brighterscript": {
+      "optional": false
+    }
+  },
+  "files": [
+    "dist/*.js",
+    "!dist/*.spec.js"
+  ]
+}