support abell regions with auto-completion

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "languageServerExample.trace.server": "verbose"
+}

CHANGELOG.md

@@ -4,7 +4,11 @@ All notable changes to the "abell-syntax-highlight" extension will be documented
 
 ## Releases
 
-### 0.0.15
+### 0.1.0
+Major Update!
+- AutoComplete Component Names
+- AutoComplete important predefined variables of Abell.
+- Add support to recognize Abell region
 
 ### 0.0.14
 - Removed CSS errors and warnings (They were clashing with Abell syntax and idk how to fix :/)

CONTRIBUTING.md

@@ -0,0 +1,17 @@
+# Contribution Guide
+
+## Running Snippets and Syntax Highlighting
+
+- Open the repository in VSCode
+- Press `CTRL + F5`
+
+This should open a new extension host. You can open `.abell` file in it to see syntax highlighting.
+
+
+## Running Language Server in Watch Mode
+
+- Run `npm run watch` on root.
+- Go to Debug section and run `Extension`
+- In debug section, run `Attach Debugger`
+
+You can now make changes to Language Server and check in the extension host.

README.md

@@ -10,7 +10,8 @@ Syntax Highlighting for `.abell` files.
 - Syntax Highlighting for `.abell` files
 - Support for HTML blocks inside JavaScript strings inside Abell Blocks
 - Support for Abell Components
-- Support for Abell Markdown 
+- AutoComplete Component Names
+- AutoComplete important predefined variables of Abell.
 
 ## Release Notes
 

package.json

@@ -2,7 +2,7 @@
     "name": "abell-language-features",
     "displayName": "Abell Language Features",
     "description": "Syntax Highlighting for .abell files to help you make static sites even faster",
-    "version": "0.0.15",
+    "version": "0.1.0",
     "publisher": "saurabh",
     "author": {
         "name": "saurabhdaware"

server/src/embeddedSupport.ts

@@ -5,6 +5,7 @@
 
 import { TextDocument, Position, LanguageService, TokenType, Range } from './languageModes';
 import { exec } from 'child_process';
+import { execRegexOnAll } from './helpers';
 
 export interface LanguageRange extends Range {
 	languageId: string | undefined;
@@ -81,6 +82,12 @@ export function getDocumentRegions(languageService: LanguageService, document: T
 		}
 		token = scanner.scan();
 	}
+
+	const { matches } = execRegexOnAll(/{{.*?}}/gs, document.getText());
+	for (const match of matches) {
+		regions.push({languageId: 'abell', start: match.index, end: match.index + match[0].length});
+	}
+
 	return {
 		getLanguageRanges: (range: Range) => getLanguageRanges(document, regions, range),
 		getEmbeddedDocument: (languageId: string, ignoreAttributeValues: boolean) => getEmbeddedDocument(document, regions, languageId, ignoreAttributeValues),

server/src/helpers.ts

@@ -0,0 +1,21 @@
+/** helper */
+
+export const execRegexOnAll = (regex:RegExp, template:string) => {
+  /** allMatches holds all the results of RegExp.exec() */
+	const allMatches = [];
+  let match:any = regex.exec(template);
+  if (!match) {
+    return { matches: [], input: template };
+  }
+
+  const { input } = match;
+
+  while (match !== null) {
+    delete match.input;
+    allMatches.push(match);
+    match = regex.exec(template);
+  }
+
+  return { matches: allMatches, input };
+};
+

server/src/languageModes.ts

@@ -16,6 +16,8 @@ import { getCSSMode } from './modes/cssMode';
 import { getDocumentRegions, HTMLDocumentRegions } from './embeddedSupport';
 import { getHTMLMode } from './modes/htmlMode';
 import { getLanguageModelCache, LanguageModelCache } from './languageModelCache';
+import { getJSMode } from './modes/jsMode';
+import { getAbellMode } from './modes/abellMode';
 
 export * from 'vscode-html-languageservice';
 
@@ -56,6 +58,8 @@ export function getLanguageModes(): LanguageModes {
 	let modes = Object.create(null);
 	modes['html'] = getHTMLMode(htmlLanguageService);
 	modes['css'] = getCSSMode(cssLanguageService, documentRegions);
+	modes['javascript'] = getJSMode();
+	modes['abell'] = getAbellMode();
 
 	return {
 		getModeAtPosition(

server/src/modes/abellMode.ts

@@ -0,0 +1,49 @@
+import { CompletionItemKind, TextDocument } from "vscode-languageserver"
+import { Position } from "vscode-languageserver-textdocument"
+
+export function getAbellMode() {
+  return {
+    getId() {
+      return 'abell'
+    },
+    doComplete(document: TextDocument, position: Position) {
+      const isAbellComponent = document.getText().trim().startsWith('<AbellComponent');
+
+      const abellCompletions = [
+				{
+					label: 'Abell',
+					kind: CompletionItemKind.Variable,
+					documentation: 'Main Abell variable that exports all necessary data'
+				},
+				{
+					label: 'contentArray',
+					kind: CompletionItemKind.Variable,
+					documentation: 'Returns Array of meta values of all content'
+				},
+				{
+					label: 'contentObj',
+					kind: CompletionItemKind.Variable,
+					documentation: 'Returns Object of meta values of all content'
+				},
+				{
+					label: 'globalMeta',
+					kind: CompletionItemKind.Variable,
+					documentation: 'Contains all meta values from abell.config.js file'
+				},
+				{
+					label: 'importContent',
+					kind: CompletionItemKind.Function,
+					documentation: 'Import markdown file from content directory. \n\nAbell.importContent(\'./hello-world/index.md\')'
+				}
+      ]
+
+      if (!isAbellComponent) {
+        return abellCompletions;
+      }
+
+      return []
+    },
+    onDocumentRemoved(_document: TextDocument) {},
+		dispose() {}
+  }
+}

server/src/modes/htmlMode.ts

@@ -3,6 +3,8 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import { CompletionItemKind } from 'vscode-languageserver';
+import { execRegexOnAll } from '../helpers';
 import {
 	LanguageMode,
 	LanguageService as HTMLLanguageService,
@@ -16,11 +18,30 @@ export function getHTMLMode(htmlLanguageService: HTMLLanguageService): LanguageM
 			return 'html';
 		},
 		doComplete(document: TextDocument, position: Position) {
-			return htmlLanguageService.doComplete(
+			const abellCompletions = [];
+			const componentVariables = execRegexOnAll(
+				/(?:const|var|let) (\w*) *?= *?require\(["'`](.*?)\.abell["'`]\)/g,
+				document.getText()
+			);
+
+			for (const match of componentVariables.matches) {
+				abellCompletions.push({
+					label: match[1] + ' ',
+					kind: CompletionItemKind.Variable,
+					documentation: 'Custom Abell Component required from \'' + match[2] + '.abell\''
+				})
+			}
+
+			const htmlCompletions = htmlLanguageService.doComplete(
 				document,
 				position,
 				htmlLanguageService.parseHTMLDocument(document)
-			);
+			)
+
+			return {
+				isIncomplete: htmlCompletions.isIncomplete,
+				items: [...htmlCompletions.items, ...abellCompletions]
+			};
 		},
 		onDocumentRemoved(_document: TextDocument) {},
 		dispose() {}

server/src/modes/jsMode.ts

@@ -0,0 +1,31 @@
+import { CompletionItemKind, TextDocument } from "vscode-languageserver"
+import { Position } from "vscode-languageserver-textdocument"
+
+export function getJSMode() {
+  return {
+    getId() {
+      return 'javascript'
+    },
+    doComplete(document: TextDocument, position: Position) {
+      const isAbellComponent = document.getText().trim().startsWith('<AbellComponent');  
+      if (!isAbellComponent) {
+        return [];
+      }
+
+      return [
+        {
+          label: 'scopedSelector',
+          documentation: 'Like document.querySelector but selects element ensuring it is from the same component',
+          kind: CompletionItemKind.Function
+        },
+        {
+          label: 'scopedSelectorAll',
+          documentation: 'Like document.querySelectorAll but selects element ensuring it is from the same component',
+          kind: CompletionItemKind.Function
+        }
+      ]
+    },
+    onDocumentRemoved(_document: TextDocument) {},
+		dispose() {}
+  }
+}

syntaxes/html-injections.json

@@ -22,7 +22,12 @@
         "0": {
           "name": "punctuation.definition.tag.end.html"
         }
-      }
+      },
+      "patterns": [
+        {
+          "include": "source.js"
+        }
+      ]
     },
     "highlight-js-literal": {
       "begin": "\\${",