From 778c9cb0de28e12eb02aa6bb648bdb516ba64436 Mon Sep 17 00:00:00 2001
From: Alex Kanunnikov <lifeart92@gmail.com>
Date: Sat, 5 Feb 2022 19:18:02 +0300
Subject: [PATCH] feat: basic template imports support (<template> tag and gts,
 gjs files) (#350)

* draft

* file renages test

* range walker test

* add bounds tests

* tests for expected corner cases

* smoke template locals test

* improve subtract logic

* cleanup

* scope strip example

* use char placeholder

* scope locator

* implement placeholders

* extract scope bindings

* support inline scope extraction

* basic completion provider based on js scope

* basic unit test for completion provider

* get test working

* absolute content part support

* query legacy template completion logic for results

* fix snapshot

* fix linting error

* support {gts,gjs} in tests, components

* use emoji for pointer

* get basic autocomplete working

* support non-instrumented runs

* add gts/gjs integration tests

* add template lint support

* add gts and gjs to list of supported extensions

* fix absolute content boundaries

* hbs source convert

* attempt to get autofixes working
---
 package.json                                  |   2 +-
 src/builtin-addons/core/code-actions/base.ts  |  25 +-
 .../glimmer-script-completion-provider.ts     |  95 ++++++
 .../script-completion-provider.ts             |  10 +-
 .../template-completion-provider.ts           | 170 +++-------
 src/definition-providers/entry.ts             |   6 +-
 src/definition-providers/glimmer-script.ts    |  91 +++++
 src/template-linter.ts                        |  18 +-
 src/utils/glimmer-script.ts                   | 319 ++++++++++++++++++
 src/utils/glimmer-template.ts                 | 114 +++++++
 src/utils/layout-helpers.ts                   |   8 +-
 test/__snapshots__/glimmer-utils-test.ts.snap |   5 +
 .../template-imports-integration-test.ts.snap |  67 ++++
 ...glimmer-script-completion-provider-test.ts |  59 ++++
 test/template-imports-integration-test.ts     | 124 +++++++
 test/test_helpers/integration-helpers.ts      |  27 +-
 test/utils/glimmer-script-test.ts             | 286 ++++++++++++++++
 tsconfig.json                                 |   2 +-
 yarn.lock                                     |  50 +--
 19 files changed, 1309 insertions(+), 169 deletions(-)
 create mode 100644 src/completion-provider/glimmer-script-completion-provider.ts
 create mode 100644 src/definition-providers/glimmer-script.ts
 create mode 100644 src/utils/glimmer-script.ts
 create mode 100644 src/utils/glimmer-template.ts
 create mode 100644 test/__snapshots__/template-imports-integration-test.ts.snap
 create mode 100644 test/completion-provider/glimmer-script-completion-provider-test.ts
 create mode 100644 test/template-imports-integration-test.ts
 create mode 100644 test/utils/glimmer-script-test.ts

diff --git a/package.json b/package.json
index 8da8ed21..d2dcd06e 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
   "dependencies": {
-    "@glimmer/syntax": "^0.73.1",
+    "@glimmer/syntax": "^0.83.1",
     "@lifeart/ember-extract-inline-templates": "2.1.0",
     "ast-types": "^0.14.2",
     "dag-map": "^2.0.2",
diff --git a/src/builtin-addons/core/code-actions/base.ts b/src/builtin-addons/core/code-actions/base.ts
index ff60f0c5..92bdf8fd 100644
--- a/src/builtin-addons/core/code-actions/base.ts
+++ b/src/builtin-addons/core/code-actions/base.ts
@@ -8,6 +8,8 @@ import { searchAndExtractHbs } from '@lifeart/ember-extract-inline-templates';
 import { parseScriptFile } from 'ember-meta-explorer';
 import { toPosition } from '../../../estree-utils';
 import ASTPath from '../../../glimmer-utils';
+import { getFileRanges, RangeWalker } from '../../../utils/glimmer-script';
+import { toHbsSource } from '../../../utils/diagnostic';
 export interface INodeSelectionInfo {
   selection: string | undefined;
   location: SourceLocation;
@@ -42,7 +44,7 @@ function findValidNodeSelection(focusPath: ASTPath): null | INodeSelectionInfo {
   return null;
 }
 
-const extensionsToLint: string[] = ['.hbs', '.js', '.ts'];
+const extensionsToLint: string[] = ['.hbs', '.js', '.ts', '.gts', 'gjs'];
 
 export default class BaseCodeActionProvider implements AddonAPI {
   public server!: Server;
@@ -62,6 +64,27 @@ export default class BaseCodeActionProvider implements AddonAPI {
 
     if (extension === '.hbs') {
       ast = this.server.templateCompletionProvider.getAST(documentContent);
+    } else if (extension === '.gjs' || extension === '.gts') {
+      const ranges = getFileRanges(documentContent);
+
+      const rangeWalker = new RangeWalker(ranges);
+      const templates = rangeWalker.templates();
+
+      if (!templates.length) {
+        return null;
+      }
+
+      const t = templates[0];
+
+      const source = toHbsSource({
+        startLine: t.loc.start.line,
+        startColumn: t.loc.start.character,
+        endColumn: t.loc.end.character,
+        endLine: t.loc.end.line,
+        template: t.content,
+      });
+
+      ast = this.server.templateCompletionProvider.getAST(source);
     } else {
       const templateData = searchAndExtractHbs(documentContent, {
         parse(source: string) {
diff --git a/src/completion-provider/glimmer-script-completion-provider.ts b/src/completion-provider/glimmer-script-completion-provider.ts
new file mode 100644
index 00000000..b2782191
--- /dev/null
+++ b/src/completion-provider/glimmer-script-completion-provider.ts
@@ -0,0 +1,95 @@
+import { CompletionItem, TextDocumentPositionParams } from 'vscode-languageserver/node';
+import Server from '../server';
+import { getFileRanges, RangeWalker, getPlaceholderPathFromAst, getScope } from '../utils/glimmer-script';
+import { parseScriptFile as parse } from 'ember-meta-explorer';
+import { containsPosition, toPosition } from '../estree-utils';
+import { getFocusPath } from '../utils/glimmer-template';
+import { TextDocument } from 'vscode-languageserver-textdocument';
+
+export default class GlimmerScriptCompletionProvider {
+  constructor(private server: Server) {}
+  async provideCompletions(params: TextDocumentPositionParams): Promise<CompletionItem[]> {
+    const document = this.server.documents.get(params.textDocument.uri);
+
+    if (!document) {
+      return [];
+    }
+
+    const rawContent = document.getText();
+
+    const ranges = getFileRanges(rawContent);
+
+    let rangeWalker = new RangeWalker(ranges);
+
+    // strip not needed scopes example
+    rangeWalker = rangeWalker.subtract(rangeWalker.hbsInlineComments(true));
+    rangeWalker = rangeWalker.subtract(rangeWalker.hbsComments(true));
+    rangeWalker = rangeWalker.subtract(rangeWalker.htmlComments(true));
+
+    const templates = rangeWalker.templates(true);
+
+    const cleanScriptWalker = rangeWalker.subtract(templates, true);
+
+    const templateForPosition = templates.find((el) => {
+      return containsPosition(
+        {
+          start: {
+            line: el.loc.start.line,
+            column: el.loc.start.character,
+          },
+          end: {
+            line: el.loc.end.line,
+            column: el.loc.end.character,
+          },
+        },
+        toPosition(params.position)
+      );
+    });
+
+    const ast = parse(cleanScriptWalker.content, {
+      sourceType: 'module',
+    });
+
+    if (templateForPosition) {
+      const placeholder = getPlaceholderPathFromAst(ast, templateForPosition.key);
+
+      if (!placeholder) {
+        return [];
+      }
+
+      const results: CompletionItem[] = [];
+      const scopes = getScope(placeholder.scope);
+
+      scopes.forEach((name) => {
+        results.push({
+          label: name,
+        });
+      });
+
+      const synthDoc = TextDocument.create(document.uri, 'handlebars', document.version, templateForPosition.absoluteContent);
+      const info = getFocusPath(synthDoc, params.position);
+
+      if (!info) {
+        return results;
+      }
+
+      const project = this.server.projectRoots.projectForUri(params.textDocument.uri);
+
+      if (!project) {
+        return results;
+      }
+
+      const legacyResults = await this.server.templateCompletionProvider.provideCompletionsForFocusPath(info, params.textDocument, params.position, project);
+
+      legacyResults.forEach((result) => {
+        results.push(result);
+      });
+
+      return results;
+      // do logic to get more meta from js scope for template position
+      // here we need glimmer logic to collect all available tokens from scope for autocomplete
+    } else {
+      return [];
+    }
+  }
+}
diff --git a/src/completion-provider/script-completion-provider.ts b/src/completion-provider/script-completion-provider.ts
index 68ec966f..a33dfd54 100644
--- a/src/completion-provider/script-completion-provider.ts
+++ b/src/completion-provider/script-completion-provider.ts
@@ -8,16 +8,24 @@ import { parseScriptFile as parse } from 'ember-meta-explorer';
 import { uniqBy } from 'lodash';
 import { getExtension } from '../utils/file-extension';
 import { logDebugInfo } from '../utils/logger';
+import GlimmerScriptCompletionProvider from './glimmer-script-completion-provider';
 
 export default class ScriptCompletionProvider {
   constructor(private server: Server) {}
   async provideCompletions(params: TextDocumentPositionParams): Promise<CompletionItem[]> {
     logDebugInfo('provideCompletions');
 
-    if (!['.js', '.ts'].includes(getExtension(params.textDocument) as string)) {
+    const ext = getExtension(params.textDocument) as string;
+
+    if (!['.js', '.ts', '.gjs', '.gts'].includes(ext)) {
       return [];
     }
 
+    if (ext === '.gts' || ext === '.gjs') {
+      // temporary workaround
+      return new GlimmerScriptCompletionProvider(this.server).provideCompletions(params);
+    }
+
     const uri = params.textDocument.uri;
     const project = this.server.projectRoots.projectForUri(uri);
 
diff --git a/src/completion-provider/template-completion-provider.ts b/src/completion-provider/template-completion-provider.ts
index 7bcedfb1..e3d5ca00 100644
--- a/src/completion-provider/template-completion-provider.ts
+++ b/src/completion-provider/template-completion-provider.ts
@@ -1,26 +1,21 @@
 import { CompletionItem, TextDocumentPositionParams, Position, TextDocumentIdentifier } from 'vscode-languageserver/node';
 import Server from '../server';
 import ASTPath from '../glimmer-utils';
-import { toPosition } from '../estree-utils';
 import { filter } from 'fuzzaldrin';
 import { queryELSAddonsAPIChain } from './../utils/addon-api';
 import { preprocess, ASTv1 } from '@glimmer/syntax';
 import { getExtension } from '../utils/file-extension';
 import { logDebugInfo, logInfo } from '../utils/logger';
-import { searchAndExtractHbs } from '@lifeart/ember-extract-inline-templates';
 import { TextDocument } from 'vscode-languageserver-textdocument';
 import { Position as EsTreePosition } from 'estree';
-import { parseScriptFile } from 'ember-meta-explorer';
-
-const extensionsToProvideTemplateCompletions = ['.hbs', '.js', '.ts'];
-const PLACEHOLDER = 'ELSCompletionDummy';
+import { createFocusPath, extensionsToProvideTemplateCompletions, getFocusPath, getTextForGuessing, PLACEHOLDER } from '../utils/glimmer-template';
+import { Project } from '../project';
 
 export default class TemplateCompletionProvider {
   constructor(private server: Server) {}
   getTextForGuessing(originalText: string, offset: number, PLACEHOLDER: string) {
     // logDebugInfo('getTextForGuessing', originalText, offset, PLACEHOLDER);
-
-    return originalText.slice(0, offset) + PLACEHOLDER + originalText.slice(offset);
+    return getTextForGuessing(originalText, offset, PLACEHOLDER);
   }
   getRoots(doc: TextDocumentIdentifier) {
     const project = this.server.projectRoots.projectForUri(doc.uri);
@@ -35,130 +30,25 @@ export default class TemplateCompletionProvider {
     return preprocess(textContent);
   }
   createFocusPath(ast: any, position: EsTreePosition, validText: string) {
-    return ASTPath.toPosition(ast, position, validText);
+    return createFocusPath(ast, position, validText);
   }
-  getFocusPath(
-    document: TextDocument,
-    position: Position,
-    placeholder = PLACEHOLDER
-  ): null | {
-    focusPath: ASTPath;
-    originalText: string;
-    normalPlaceholder: string;
-    ast: any;
-  } {
-    const documentContent = document.getText();
-    const ext = getExtension(document);
-
-    if (!extensionsToProvideTemplateCompletions.includes(ext as string)) {
-      return null;
-    }
-
-    const originalText =
-      ext === '.hbs'
-        ? documentContent
-        : searchAndExtractHbs(documentContent, {
-            parse(source: string) {
-              return parseScriptFile(source);
-            },
-          });
-
-    logDebugInfo('originalText', originalText);
-
-    if (originalText.trim().length === 0) {
-      logDebugInfo('originalText - empty');
-
-      return null;
-    }
-
-    const offset = document.offsetAt(position);
-    let normalPlaceholder: any = placeholder;
-    let ast: any = {};
-
-    const cases = [
-      PLACEHOLDER + ' />',
-      PLACEHOLDER,
-      PLACEHOLDER + '"',
-      PLACEHOLDER + "'",
-      // block params autocomplete
-      PLACEHOLDER + '| />',
-      PLACEHOLDER + '}} />',
-      PLACEHOLDER + '"}}',
-      PLACEHOLDER + '}}',
-      PLACEHOLDER + '}}{{/' + PLACEHOLDER + '}}',
-      // {{#}} -> {{# + P}}{{/P + }}
-      PLACEHOLDER + '}}{{/' + PLACEHOLDER,
-      PLACEHOLDER + ')}}',
-      PLACEHOLDER + '))}}',
-      PLACEHOLDER + ')))}}',
-    ];
-
-    let validText = '';
-
-    while (cases.length) {
-      normalPlaceholder = cases.shift();
-
-      try {
-        validText = this.getTextForGuessing(originalText, offset, normalPlaceholder);
-        ast = this.getAST(validText);
-        logDebugInfo('validText', validText);
-        break;
-      } catch (e) {
-        // logDebugInfo('parsing-error', this.getTextForGuessing(originalText, offset, normalPlaceholder));
-        ast = null;
-      }
-    }
-
-    if (ast === null) {
-      return null;
-    }
-
-    const focusPath = this.createFocusPath(ast, toPosition(position), validText);
-
-    if (!focusPath) {
-      return null;
-    }
-
-    return {
-      ast,
-      focusPath,
-      originalText,
-      normalPlaceholder,
-    };
+  getFocusPath(document: TextDocument, position: Position, placeholder = PLACEHOLDER) {
+    return getFocusPath(document, position, placeholder);
   }
-  async provideCompletions(params: TextDocumentPositionParams): Promise<CompletionItem[]> {
-    logDebugInfo('template:provideCompletions');
-    const ext = getExtension(params.textDocument);
-
-    if (ext !== null && !extensionsToProvideTemplateCompletions.includes(ext)) {
-      logDebugInfo('template:provideCompletions:unsupportedExtension', ext);
-
-      return [];
-    }
-
-    const position = Object.freeze({ ...params.position });
-    const { project, document } = this.getRoots(params.textDocument);
-
-    if (!project || !document) {
-      logInfo(`No project for file: ${params.textDocument.uri}`);
-
-      return [];
-    }
-
-    const { root } = project;
-    const results = this.getFocusPath(document, position, PLACEHOLDER);
-
-    if (!results) {
-      return [];
-    }
-
+  async provideCompletionsForFocusPath(
+    results: { focusPath: any; originalText: string; normalPlaceholder: string },
+    textDocument: TextDocumentIdentifier,
+    position: Position,
+    project: Project
+  ) {
     const focusPath = results.focusPath;
     const originalText = results.originalText;
     const normalPlaceholder = results.normalPlaceholder;
+    const root = project.root;
 
     const completions: CompletionItem[] = await queryELSAddonsAPIChain(project.builtinProviders.completionProviders, root, {
       focusPath,
-      textDocument: params.textDocument,
+      textDocument,
       position,
       results: [],
       server: this.server,
@@ -168,7 +58,7 @@ export default class TemplateCompletionProvider {
 
     const addonResults = await queryELSAddonsAPIChain(project.providers.completionProviders, root, {
       focusPath,
-      textDocument: params.textDocument,
+      textDocument,
       position,
       results: completions,
       server: this.server,
@@ -210,6 +100,36 @@ export default class TemplateCompletionProvider {
       return el;
     });
   }
+  async provideCompletions(params: TextDocumentPositionParams): Promise<CompletionItem[]> {
+    logDebugInfo('template:provideCompletions');
+    const ext = getExtension(params.textDocument);
+
+    // @to-do cleanup this creepy stuff (streamline autocomplete stuff);
+    const extToHandle = extensionsToProvideTemplateCompletions.filter((e) => e !== '.gts' && e !== '.gjs');
+
+    if (ext !== null && !extToHandle.includes(ext)) {
+      logDebugInfo('template:provideCompletions:unsupportedExtension', ext);
+
+      return [];
+    }
+
+    const position = Object.freeze({ ...params.position });
+    const { project, document } = this.getRoots(params.textDocument);
+
+    if (!project || !document) {
+      logInfo(`No project for file: ${params.textDocument.uri}`);
+
+      return [];
+    }
+
+    const results = this.getFocusPath(document, position, PLACEHOLDER);
+
+    if (!results) {
+      return [];
+    }
+
+    return this.provideCompletionsForFocusPath(results, params.textDocument, position, project);
+  }
 }
 
 function getTextPrefix(astPath: ASTPath, normalPlaceholder: string): string {
diff --git a/src/definition-providers/entry.ts b/src/definition-providers/entry.ts
index 07d55bb3..b0fce03e 100644
--- a/src/definition-providers/entry.ts
+++ b/src/definition-providers/entry.ts
@@ -3,14 +3,16 @@ import Server from './../server';
 import { getExtension } from './../utils/file-extension';
 import TemplateDefinitionProvider from './template';
 import ScriptDefinitionProvider from './script';
-
+import GlimmerScriptDefinitionProvider from './glimmer-script';
 export default class DefinitionProvider {
   public template!: TemplateDefinitionProvider;
   public script!: ScriptDefinitionProvider;
+  public glimmerScript!: GlimmerScriptDefinitionProvider;
 
   constructor(private server: Server) {
     this.template = new TemplateDefinitionProvider(server);
     this.script = new ScriptDefinitionProvider(server);
+    this.glimmerScript = new GlimmerScriptDefinitionProvider(server);
   }
 
   async handle(params: TextDocumentPositionParams): Promise<Definition | null> {
@@ -29,6 +31,8 @@ export default class DefinitionProvider {
         return await this.template.handle(params, project);
       } else if (extension === '.js' || extension === '.ts') {
         return await this.script.handle(params, project);
+      } else if (extension === '.gts' || extension === '.gjs') {
+        return await this.glimmerScript.handle(params, project);
       } else {
         return null;
       }
diff --git a/src/definition-providers/glimmer-script.ts b/src/definition-providers/glimmer-script.ts
new file mode 100644
index 00000000..e966320c
--- /dev/null
+++ b/src/definition-providers/glimmer-script.ts
@@ -0,0 +1,91 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import Server from './../server';
+import ASTPath from './../glimmer-utils';
+import { TextDocumentPositionParams, Definition, Location } from 'vscode-languageserver/node';
+import { parseScriptFile as parse } from 'ember-meta-explorer';
+import { containsPosition, toPosition } from './../estree-utils';
+import { queryELSAddonsAPIChain } from './../utils/addon-api';
+import { Project } from '../project';
+import { getFileRanges, RangeWalker } from '../utils/glimmer-script';
+
+export default class GlimmerScriptDefinitionProvider {
+  constructor(private server: Server) {}
+  async handle(params: TextDocumentPositionParams, project: Project): Promise<Definition | null> {
+    const uri = params.textDocument.uri;
+    const { root } = project;
+    const document = this.server.documents.get(uri);
+
+    if (!document) {
+      return null;
+    }
+
+    const content = document.getText();
+
+    const ranges = getFileRanges(content);
+
+    let rangeWalker = new RangeWalker(ranges);
+
+    // strip not needed scopes example
+    rangeWalker = rangeWalker.subtract([...rangeWalker.hbsInlineComments(true), ...rangeWalker.hbsComments(true)]);
+    rangeWalker = rangeWalker.subtract(rangeWalker.htmlComments(true));
+
+    const templates = rangeWalker.templates(true);
+
+    const cleanScript = rangeWalker.subtract(templates);
+
+    const templateForPosition = templates.find((el) => {
+      return containsPosition(
+        {
+          start: {
+            line: el.loc.start.line,
+            column: el.loc.start.character,
+          },
+          end: {
+            line: el.loc.end.line,
+            column: el.loc.end.character,
+          },
+        },
+        toPosition(params.position)
+      );
+    });
+
+    if (templateForPosition) {
+      // do logic to get more meta from js scope for template position
+      // here we need glimmer logic to collect all available tokens from scope for autocomplete
+    } else {
+      // looks like we could "fix" template and continue in script branch;
+    }
+    // @to-do - figure out how to patch babel ast with hbs
+    // or don't patch it, and just have 2 refs from hbs ast to scope of js ast
+
+    const ast = parse(cleanScript.content, {
+      sourceType: 'module',
+    });
+
+    const astPath = ASTPath.toPosition(ast, toPosition(params.position), content);
+
+    if (!astPath) {
+      return null;
+    }
+
+    const results: Location[] = await queryELSAddonsAPIChain(project.builtinProviders.definitionProviders, root, {
+      focusPath: astPath,
+      type: 'glimmerScript',
+      textDocument: params.textDocument,
+      position: params.position,
+      results: [],
+      server: this.server,
+    });
+
+    const addonResults = await queryELSAddonsAPIChain(project.providers.definitionProviders, root, {
+      focusPath: astPath,
+      type: 'glimmerScript',
+      textDocument: params.textDocument,
+      position: params.position,
+      results,
+      server: this.server,
+    });
+
+    return addonResults;
+  }
+}
diff --git a/src/template-linter.ts b/src/template-linter.ts
index 1f2701b6..3fa9fb62 100644
--- a/src/template-linter.ts
+++ b/src/template-linter.ts
@@ -13,6 +13,7 @@ import { pathToFileURL } from 'url';
 import Server from './server';
 import { Project } from './project';
 import { getRequireSupport } from './utils/layout-helpers';
+import { getFileRanges, RangeWalker } from './utils/glimmer-script';
 
 type LinterVerifyArgs = { source: string; moduleId: string; filePath: string };
 class Linter {
@@ -45,7 +46,7 @@ export interface TemplateLinterError {
   source?: string;
 }
 
-const extensionsToLint: string[] = ['.hbs', '.js', '.ts'];
+const extensionsToLint: string[] = ['.hbs', '.js', '.ts', '.gts', '.gjs'];
 
 function setCwd(cwd: string) {
   try {
@@ -102,6 +103,21 @@ export default class TemplateLinter {
       } else {
         return [documentContent];
       }
+    } else if (ext === '.gjs' || ext === '.gts') {
+      const ranges = getFileRanges(documentContent);
+
+      const rangeWalker = new RangeWalker(ranges);
+      const templates = rangeWalker.templates();
+
+      return templates.map((t) => {
+        return toHbsSource({
+          startLine: t.loc.start.line,
+          startColumn: t.loc.start.character,
+          endColumn: t.loc.end.character,
+          endLine: t.loc.end.line,
+          template: t.content,
+        });
+      });
     } else {
       const nodes = getTemplateNodes(documentContent, {
         parse(source: string) {
diff --git a/src/utils/glimmer-script.ts b/src/utils/glimmer-script.ts
new file mode 100644
index 00000000..ae5b19dc
--- /dev/null
+++ b/src/utils/glimmer-script.ts
@@ -0,0 +1,319 @@
+import { getTemplateLocals, preprocess, ASTv1 } from '@glimmer/syntax';
+import { Range as LSRange } from 'vscode-languageserver/node';
+import { parseScriptFile as parse } from 'ember-meta-explorer';
+import { visit } from 'ast-types';
+
+interface IBabelScope {
+  getBindings(): Record<string, unknown>;
+  parent?: IBabelScope;
+}
+
+export function getPlaceholderPathFromAst(ast: any, key: string): null | { scope: IBabelScope } {
+  let keyPath = null;
+
+  visit(ast, {
+    visitIdentifier(path: {
+      node: { name: string };
+      scope: {
+        bindings: Record<string, unknown>;
+      };
+    }) {
+      const node = path.node;
+
+      if (node.name === key) {
+        keyPath = path;
+
+        return false;
+      }
+
+      this.traverse(path);
+    },
+  });
+
+  return keyPath;
+}
+
+export function getPlaceholderPath(content: string, key: string) {
+  const ast = parse(content, {
+    sourceType: 'module',
+  });
+
+  return getPlaceholderPathFromAst(ast, key);
+}
+
+// getScope(path.scope);
+export function getScope(scope: IBabelScope): string[] {
+  const names: Set<string> = new Set();
+  let resolvedScope: undefined | IBabelScope = scope;
+
+  while (resolvedScope) {
+    for (const binding in scope.getBindings()) {
+      names.add(binding);
+    }
+
+    resolvedScope = resolvedScope.parent;
+  }
+
+  return Array.from(names);
+}
+
+export class TemplateData {
+  loc: LSRange;
+  content: string;
+  constructor(content: string, loc: LSRange = { start: { line: 0, character: 0 }, end: { line: 0, character: 0 } }) {
+    this.loc = loc;
+    this.content = content;
+  }
+  get absoluteContent() {
+    const tpl = new Array(this.loc.start.line).fill('\n').join('') + new Array(this.loc.start.character).fill(' ').join('') + this.content;
+
+    return tpl;
+  }
+  get key() {
+    const pos = `${this.loc.start.line}${this.loc.start.character}${this.loc.end.line}${this.loc.end.character}`;
+
+    const key = parseFloat(`0.${pos}1`).toString(32).split('.')[1];
+
+    return `${this.prefix}${key}`;
+  }
+  get prefix() {
+    return `_GT_`;
+  }
+  get locals() {
+    return getTemplateLocals(this.content);
+  }
+  get ast(): ASTv1.Template {
+    return preprocess(this.content);
+  }
+}
+
+class FileRange {
+  start = 0;
+  columns = 0;
+  line = 0;
+  characters: string[] = [];
+  constructor(start = 0) {
+    this.start = start;
+  }
+  addColumn(character = '') {
+    this.columns++;
+    this.characters.push(character);
+  }
+  get content() {
+    return this.characters.join('');
+  }
+  clone() {
+    const fRange = new FileRange(this.start);
+
+    this.characters.forEach((char) => {
+      fRange.addColumn(char);
+    });
+    fRange.line = this.line;
+
+    return fRange;
+  }
+}
+
+export function getFileRanges(file = '') {
+  const ranges = [new FileRange()];
+
+  let newline = 0;
+
+  for (let i = 0; i < file.length; i++) {
+    if (file.charAt(i) !== '\n') {
+      ranges[ranges.length - 1].addColumn(file.charAt(i));
+    } else {
+      ranges.push(new FileRange(i + newline));
+      newline++;
+    }
+  }
+
+  return ranges.map((e, index) => {
+    e.line = index + 1;
+
+    return e;
+  });
+}
+
+const STATE = {
+  OPEN: 0,
+  CLOSE: 1,
+};
+
+class TPosition {
+  line = 0;
+  character = 0;
+  constructor(line = 0, character = 0) {
+    this.line = line;
+    this.character = character;
+  }
+}
+
+export class RangeWalker {
+  constructor(lines: FileRange[]) {
+    this.lines = lines;
+  }
+  lines: FileRange[] = [];
+  get content() {
+    return this.lines.map((l) => l.content).join('\n');
+  }
+  extractDocumentPart(includeBounds = false, openTag = '', closeTag = '') {
+    const results: TemplateData[] = [];
+    let state = STATE.CLOSE;
+
+    let buffer: string[] = [];
+
+    const params = {
+      start: new TPosition(),
+      end: new TPosition(),
+    };
+
+    const openTemplate = (line: FileRange, offset: number) => {
+      params.start = new TPosition(line.line, offset);
+    };
+
+    const completeTemplate = (line: FileRange, offset: number) => {
+      params.end = new TPosition(line.line, offset);
+      results.push(
+        new TemplateData(buffer.join(''), {
+          start: params.start,
+          end: params.end,
+        })
+      );
+      buffer = [];
+    };
+
+    this.lines.forEach((fileRange) => {
+      let line = fileRange.content;
+      let offset = 0;
+
+      if (state === STATE.OPEN) {
+        buffer.push('\n');
+      }
+
+      while (line.length) {
+        if (state === STATE.CLOSE) {
+          const index = line.indexOf(openTag);
+
+          if (index === -1) {
+            return;
+          } else {
+            if (!includeBounds) {
+              offset = offset + index + openTag.length;
+              line = line.slice(index + openTag.length);
+            } else {
+              offset = offset + index;
+              line = line.slice(index);
+            }
+
+            state = STATE.OPEN;
+            openTemplate(fileRange, offset);
+          }
+        } else if (state === STATE.OPEN) {
+          const index = line.indexOf(closeTag);
+
+          if (index === -1) {
+            buffer.push(line);
+            // buffer.push('\n');
+
+            return;
+          } else {
+            if (!includeBounds) {
+              buffer.push(line.slice(0, index));
+              line = line.slice(index + closeTag.length);
+              offset = offset + index;
+            } else {
+              buffer.push(line.slice(0, index + closeTag.length));
+              line = line.slice(index + closeTag.length);
+              offset = offset + index + closeTag.length;
+            }
+
+            state = STATE.CLOSE;
+            completeTemplate(fileRange, offset);
+          }
+        } else {
+          // OOPS
+        }
+      }
+    });
+
+    return results;
+  }
+  subtract(parts: TemplateData[], addPlaceholders = false): RangeWalker {
+    const ranges = this.lines.map((e) => e.clone());
+
+    ranges.forEach((rangeLine) => {
+      const lineNumber = rangeLine.line;
+      const filteredParts = parts.filter((p) => p.loc.start.line <= lineNumber && p.loc.end.line >= lineNumber);
+
+      filteredParts.forEach((part) => {
+        const charPlaceholder = ' ';
+        let key = part.key;
+
+        const charForPosition = () => {
+          if (!addPlaceholders) {
+            return charPlaceholder;
+          } else {
+            if (key.length) {
+              try {
+                return key.charAt(0);
+              } finally {
+                key = key.slice(1);
+              }
+            } else {
+              return charPlaceholder;
+            }
+          }
+        };
+
+        if (part.loc.start.line !== lineNumber && part.loc.end.line !== lineNumber) {
+          // replace in-range characters with blank lines (dont have better idea for now)
+          rangeLine.characters = rangeLine.characters.map(() => charPlaceholder);
+        } else if (part.loc.start.line === lineNumber && part.loc.end.line === lineNumber) {
+          rangeLine.characters = rangeLine.characters.map((char, index) => {
+            if (index >= part.loc.start.character && index < part.loc.end.character) {
+              return charForPosition();
+            } else {
+              return char;
+            }
+          });
+        } else if (part.loc.start.line === lineNumber) {
+          rangeLine.characters = rangeLine.characters.map((char, index) => {
+            if (index >= part.loc.start.character) {
+              return charForPosition();
+            } else {
+              return char;
+            }
+          });
+        } else if (part.loc.end.line === lineNumber) {
+          rangeLine.characters = rangeLine.characters.map((char, index) => {
+            if (index < part.loc.end.character) {
+              return charPlaceholder;
+            } else {
+              return char;
+            }
+          });
+        } else {
+          // Oops
+        }
+      });
+    });
+
+    return new RangeWalker(ranges);
+  }
+  templates(includeBounds = false) {
+    return this.extractDocumentPart(includeBounds, '<template>', '</template>');
+  }
+  htmlComments(includeBounds = false) {
+    return this.extractDocumentPart(includeBounds, '<!--', '-->');
+  }
+  hbsComments(includeBounds = false) {
+    return this.extractDocumentPart(includeBounds, '{{!--', '--}}');
+  }
+  hbsInlineComments(includeBounds = false) {
+    return this.extractDocumentPart(includeBounds, '{{!', '}}');
+  }
+  styles(includeBounds = false) {
+    return this.extractDocumentPart(includeBounds, '<style>', '</style>');
+  }
+}
diff --git a/src/utils/glimmer-template.ts b/src/utils/glimmer-template.ts
new file mode 100644
index 00000000..af7187d5
--- /dev/null
+++ b/src/utils/glimmer-template.ts
@@ -0,0 +1,114 @@
+import { Position } from 'vscode-languageserver/node';
+import ASTPath from '../glimmer-utils';
+import { toPosition } from '../estree-utils';
+import { getExtension } from '../utils/file-extension';
+import { logDebugInfo } from '../utils/logger';
+import { searchAndExtractHbs } from '@lifeart/ember-extract-inline-templates';
+import { TextDocument } from 'vscode-languageserver-textdocument';
+import { parseScriptFile } from 'ember-meta-explorer';
+import { preprocess, ASTv1 } from '@glimmer/syntax';
+import { Position as EsTreePosition } from 'estree';
+
+export const PLACEHOLDER = 'ELSCompletionDummy';
+export const extensionsToProvideTemplateCompletions = ['.hbs', '.js', '.ts', '.gjs', '.gts'];
+
+export function getTextForGuessing(originalText: string, offset: number, PLACEHOLDER: string) {
+  // logDebugInfo('getTextForGuessing', originalText, offset, PLACEHOLDER);
+
+  return originalText.slice(0, offset) + PLACEHOLDER + originalText.slice(offset);
+}
+
+export function createFocusPath(ast: ASTv1.Template, position: EsTreePosition, validText: string) {
+  return ASTPath.toPosition(ast, position, validText);
+}
+
+export function getFocusPath(
+  document: TextDocument,
+  position: Position,
+  placeholder = PLACEHOLDER
+): null | {
+  focusPath: ASTPath;
+  originalText: string;
+  normalPlaceholder: string;
+  ast: ASTv1.Template;
+} {
+  const documentContent = document.getText();
+  const ext = getExtension(document);
+
+  if (!extensionsToProvideTemplateCompletions.includes(ext as string)) {
+    return null;
+  }
+
+  const isHBS = ext === '.hbs' || document.languageId === 'handlebars';
+
+  const originalText = isHBS
+    ? documentContent
+    : searchAndExtractHbs(documentContent, {
+        parse(source: string) {
+          return parseScriptFile(source);
+        },
+      });
+
+  logDebugInfo('originalText', originalText);
+
+  if (originalText.trim().length === 0) {
+    logDebugInfo('originalText - empty');
+
+    return null;
+  }
+
+  const offset = document.offsetAt(position);
+  let normalPlaceholder: string = placeholder;
+  let ast: ASTv1.Template | null = null;
+
+  const cases = [
+    PLACEHOLDER + ' />',
+    PLACEHOLDER,
+    PLACEHOLDER + '"',
+    PLACEHOLDER + "'",
+    // block params autocomplete
+    PLACEHOLDER + '| />',
+    PLACEHOLDER + '}} />',
+    PLACEHOLDER + '"}}',
+    PLACEHOLDER + '}}',
+    PLACEHOLDER + '}}{{/' + PLACEHOLDER + '}}',
+    // {{#}} -> {{# + P}}{{/P + }}
+    PLACEHOLDER + '}}{{/' + PLACEHOLDER,
+    PLACEHOLDER + ')}}',
+    PLACEHOLDER + '))}}',
+    PLACEHOLDER + ')))}}',
+  ];
+
+  let validText = '';
+
+  while (cases.length) {
+    normalPlaceholder = cases.shift() as string;
+
+    try {
+      validText = getTextForGuessing(originalText, offset, normalPlaceholder);
+      ast = preprocess(validText);
+      logDebugInfo('validText', validText);
+      break;
+    } catch (e) {
+      // logDebugInfo('parsing-error', this.getTextForGuessing(originalText, offset, normalPlaceholder));
+      ast = null;
+    }
+  }
+
+  if (ast === null) {
+    return null;
+  }
+
+  const focusPath = createFocusPath(ast, toPosition(position), validText);
+
+  if (!focusPath) {
+    return null;
+  }
+
+  return {
+    ast,
+    focusPath,
+    originalText,
+    normalPlaceholder,
+  };
+}
diff --git a/src/utils/layout-helpers.ts b/src/utils/layout-helpers.ts
index 96e10b18..6118733e 100644
--- a/src/utils/layout-helpers.ts
+++ b/src/utils/layout-helpers.ts
@@ -371,7 +371,7 @@ export function isScriptPath(filePath: string) {
     return false;
   }
 
-  return filePath.endsWith('.js') || filePath.endsWith('.ts');
+  return filePath.endsWith('.js') || filePath.endsWith('.ts') || filePath.endsWith('.gjs') || filePath.endsWith('.gts');
 }
 
 export function normalizedPath(filePath: string) {
@@ -528,7 +528,7 @@ export async function listComponents(project: BaseProject): Promise<void> {
     }),
     safeWalkAsync(scriptEntry, {
       directories: false,
-      globs: ['**/*.js', '**/*.ts', '**/*.hbs', '**/*.css', '**/*.less', '**/*.scss'],
+      globs: ['**/*.gjs', '**/*.gts', '**/*.js', '**/*.ts', '**/*.hbs', '**/*.css', '**/*.less', '**/*.scss'],
     }),
     safeWalkAsync(templateEntry, {
       directories: false,
@@ -592,11 +592,11 @@ async function findRegistryItemsForProject(project: BaseProject, prefix: string,
 }
 
 export async function findTestsForProject(project: BaseProject) {
-  await findRegistryItemsForProject(project, 'tests', ['**/*.js', '**/*.ts']);
+  await findRegistryItemsForProject(project, 'tests', ['**/*.gjs', '**/*.gts', '**/*.js', '**/*.ts']);
 }
 
 export async function findAppItemsForProject(project: BaseProject) {
-  await findRegistryItemsForProject(project, 'app', ['**/*.js', '**/*.ts', '**/*.css', '**/*.less', '**/*.sass', '**/*.hbs']);
+  await findRegistryItemsForProject(project, 'app', ['**/*.gjs', '**/*.gts', '**/*.js', '**/*.ts', '**/*.css', '**/*.less', '**/*.sass', '**/*.hbs']);
 }
 
 export async function findAddonItemsForProject(project: BaseProject) {
diff --git a/test/__snapshots__/glimmer-utils-test.ts.snap b/test/__snapshots__/glimmer-utils-test.ts.snap
index 3451db24..a26d866e 100644
--- a/test/__snapshots__/glimmer-utils-test.ts.snap
+++ b/test/__snapshots__/glimmer-utils-test.ts.snap
@@ -2,6 +2,7 @@
 
 exports[`glimmer-utils ASTPath works as expected 1`] = `
 PathExpressionImplV1 {
+  "_head": undefined,
   "data": false,
   "loc": Object {
     "end": Object {
@@ -83,6 +84,7 @@ BlockParamDefinition {
                 },
                 "params": Array [],
                 "path": PathExpressionImplV1 {
+                  "_head": undefined,
                   "data": false,
                   "loc": Object {
                     "end": Object {
@@ -204,6 +206,7 @@ BlockParamDefinition {
             },
             "params": Array [],
             "path": PathExpressionImplV1 {
+              "_head": undefined,
               "data": false,
               "loc": Object {
                 "end": Object {
@@ -330,6 +333,7 @@ BlockParamDefinition {
                 },
                 "params": Array [],
                 "path": PathExpressionImplV1 {
+                  "_head": undefined,
                   "data": false,
                   "loc": Object {
                     "end": Object {
@@ -449,6 +453,7 @@ BlockParamDefinition {
             },
             "params": Array [],
             "path": PathExpressionImplV1 {
+              "_head": undefined,
               "data": false,
               "loc": Object {
                 "end": Object {
diff --git a/test/__snapshots__/template-imports-integration-test.ts.snap b/test/__snapshots__/template-imports-integration-test.ts.snap
new file mode 100644
index 00000000..7449d2d9
--- /dev/null
+++ b/test/__snapshots__/template-imports-integration-test.ts.snap
@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`has basic template imports support CompletionRequest inside <template> template imports completion requests working fine support component autocomplete from scope and layout for .gts files 1`] = `
+Object {
+  "addonsMeta": Array [],
+  "registry": Object {
+    "component": Object {
+      "hello": Array [
+        "app/components/hello/index.gts",
+      ],
+      "world": Array [
+        "app/components/world/index.hbs",
+      ],
+    },
+  },
+  "response": Array [
+    Object {
+      "label": "FooBar",
+    },
+    Object {
+      "label": "Foo",
+    },
+  ],
+}
+`;
+
+exports[`has basic template imports support CompletionRequest inside <template> template imports completion requests working fine support component autocomplete from scope for .gjs files 1`] = `
+Object {
+  "addonsMeta": Array [],
+  "registry": Object {
+    "component": Object {
+      "hello": Array [
+        "app/components/hello/index.gjs",
+      ],
+    },
+  },
+  "response": Array [
+    Object {
+      "label": "FooBar",
+    },
+    Object {
+      "label": "Foo",
+    },
+  ],
+}
+`;
+
+exports[`has basic template imports support CompletionRequest inside <template> template imports completion requests working fine support component autocomplete from scope for .gts files 1`] = `
+Object {
+  "addonsMeta": Array [],
+  "registry": Object {
+    "component": Object {
+      "hello": Array [
+        "app/components/hello/index.gts",
+      ],
+    },
+  },
+  "response": Array [
+    Object {
+      "label": "FooBar",
+    },
+    Object {
+      "label": "Foo",
+    },
+  ],
+}
+`;
diff --git a/test/completion-provider/glimmer-script-completion-provider-test.ts b/test/completion-provider/glimmer-script-completion-provider-test.ts
new file mode 100644
index 00000000..d0a6e7c1
--- /dev/null
+++ b/test/completion-provider/glimmer-script-completion-provider-test.ts
@@ -0,0 +1,59 @@
+import { Server } from '../../src';
+import GlimmerScriptCompletionProvider from '../../src/completion-provider/glimmer-script-completion-provider';
+import { Position } from 'vscode-languageserver';
+
+class ProjectMock {}
+class ServerMock {
+  constructor(private content: string, private project: ProjectMock | null) {}
+  get projectRoots() {
+    return {
+      projectForUri: () => {
+        return this.project;
+      },
+    };
+  }
+  get documents() {
+    return {
+      get: () => {
+        return {
+          getText: () => {
+            return this.content;
+          },
+        };
+      },
+    };
+  }
+}
+
+function createServer(content: string, project: ProjectMock | null) {
+  return (new ServerMock(content, project) as unknown) as Server;
+}
+
+describe('GlimmerScriptCompletionProvider', function () {
+  it('works', async function () {
+    const tpl = `var n = 42; class Component { \n<template></template> }`;
+    const project = null;
+    const provider = new GlimmerScriptCompletionProvider(createServer(tpl, project));
+    const results = await provider.provideCompletions({
+      textDocument: {
+        uri: '',
+      },
+      position: Position.create(1, 12),
+    });
+
+    expect(results).toStrictEqual([{ label: 'n' }, { label: 'Component' }]);
+  });
+  it('works with legacy logic', async function () {
+    const tpl = `var n = 42; class Component { \n<template></template> }`;
+    const project = new ProjectMock();
+    const provider = new GlimmerScriptCompletionProvider(createServer(tpl, project));
+    const results = await provider.provideCompletions({
+      textDocument: {
+        uri: '',
+      },
+      position: Position.create(1, 12),
+    });
+
+    expect(results).toStrictEqual([{ label: 'n' }, { label: 'Component' }]);
+  });
+});
diff --git a/test/template-imports-integration-test.ts b/test/template-imports-integration-test.ts
new file mode 100644
index 00000000..661fff71
--- /dev/null
+++ b/test/template-imports-integration-test.ts
@@ -0,0 +1,124 @@
+import { createServer, getResult, ServerBucket } from './test_helpers/public-integration-helpers';
+import { MessageConnection } from 'vscode-jsonrpc/node';
+import { CompletionRequest } from 'vscode-languageserver-protocol/node';
+
+function createPointer(tpl = '') {
+  const findMe = '⚡';
+  const parts = tpl.split('\n');
+  const line = parts.findIndex((e) => e.includes(findMe));
+  const character = parts[line].indexOf(findMe) - 1;
+
+  return {
+    content: tpl.replace(findMe, ''),
+    position: {
+      line,
+      character,
+    },
+  };
+}
+
+describe('has basic template imports support', function () {
+  let instance!: ServerBucket;
+  let connection!: MessageConnection;
+
+  describe('CompletionRequest inside <template>', () => {
+    beforeAll(async () => {
+      instance = await createServer({ asyncFsEnabled: false });
+      connection = instance.connection;
+    });
+
+    afterAll(async () => {
+      await instance.destroy();
+    });
+
+    describe('template imports completion requests working fine', () => {
+      it('support component autocomplete from scope for .gjs files', async () => {
+        const tpl = `
+          import FooBar from './../foo';
+          export default class Foo extends Bar {
+            firstName = "a";
+            lastName = "b";
+            <template><⚡</template>
+          }
+        `;
+        const { content, position } = createPointer(tpl);
+        const result = await getResult(
+          CompletionRequest.method,
+          connection,
+          {
+            app: {
+              components: {
+                hello: {
+                  'index.gjs': content,
+                },
+              },
+            },
+          },
+          'app/components/hello/index.gjs',
+          position
+        );
+
+        expect(result).toMatchSnapshot();
+      });
+      it('support component autocomplete from scope for .gts files', async () => {
+        const tpl = `
+          import FooBar from './../foo';
+          export default class Foo extends Bar {
+            firstName = "a";
+            lastName = "b";
+            <template><⚡</template>
+          }
+        `;
+        const { content, position } = createPointer(tpl);
+        const result = await getResult(
+          CompletionRequest.method,
+          connection,
+          {
+            app: {
+              components: {
+                hello: {
+                  'index.gts': content,
+                },
+              },
+            },
+          },
+          'app/components/hello/index.gts',
+          position
+        );
+
+        expect(result).toMatchSnapshot();
+      });
+      it('support component autocomplete from scope and layout for .gts files', async () => {
+        const tpl = `
+          import FooBar from './../foo';
+          export default class Foo extends Bar {
+            firstName = "a";
+            lastName = "b";
+            <template><⚡</template>
+          }
+        `;
+        const { content, position } = createPointer(tpl);
+        const result = await getResult(
+          CompletionRequest.method,
+          connection,
+          {
+            app: {
+              components: {
+                hello: {
+                  'index.gts': content,
+                },
+                world: {
+                  'index.hbs': '',
+                },
+              },
+            },
+          },
+          'app/components/hello/index.gts',
+          position
+        );
+
+        expect(result).toMatchSnapshot();
+      });
+    });
+  });
+});
diff --git a/test/test_helpers/integration-helpers.ts b/test/test_helpers/integration-helpers.ts
index bcf1f70f..22a75bec 100644
--- a/test/test_helpers/integration-helpers.ts
+++ b/test/test_helpers/integration-helpers.ts
@@ -22,15 +22,24 @@ import { FileStat, FileType, fileTypeFromFsStat } from '../../src/utils/fs-utils
 import { IRegistry } from '../../src/utils/registry-api';
 
 export function startServer(asyncFs = false) {
-  const options: Array<string | undefined> = [
-    '--reporter',
-    'none',
-    'node',
-    './inst/start-server.js',
-    '--stdio',
-    asyncFs ? '--async-fs' : undefined,
-    '--no-clean',
-  ];
+  const params = JSON.parse(process.env.npm_config_argv);
+
+  // {
+  //   remain: [],
+  //   cooked: [ 'run', 'test' ],
+  //   original: [ 'test', 'template-imports-integration' ]
+  // }
+  const command = params.original[0];
+
+  let serverPath = '';
+
+  if (command === 'test') {
+    serverPath = './lib/start-server.js';
+  } else {
+    serverPath = './inst/start-server.js';
+  }
+
+  const options: Array<string | undefined> = ['--reporter', 'none', 'node', serverPath, '--stdio', asyncFs ? '--async-fs' : undefined, '--no-clean'];
 
   return spawn(
     'node_modules/.bin/nyc',
diff --git a/test/utils/glimmer-script-test.ts b/test/utils/glimmer-script-test.ts
new file mode 100644
index 00000000..732be9e6
--- /dev/null
+++ b/test/utils/glimmer-script-test.ts
@@ -0,0 +1,286 @@
+import { getFileRanges, RangeWalker, TemplateData, getScope, getPlaceholderPath } from './../../src/utils/glimmer-script';
+
+function rw(tpl: string) {
+  return new RangeWalker(getFileRanges(tpl));
+}
+
+describe('glimmer-scripts', function () {
+  describe('getScope()', function () {
+    it('able to extract scope symbols from js class file by given path', function () {
+      const tpl = `
+        import foo from 'bar';
+        import { case } from 'ace';
+        var hello = 42;
+        class Boo {
+          n = class Foo {
+            GL
+          }
+        }
+      `;
+      const p = getPlaceholderPath(tpl, 'GL');
+
+      expect(p.node.type).toBe('Identifier');
+
+      const scope = getScope(p.scope);
+
+      expect(scope).toStrictEqual(['foo', 'case', 'hello', 'Boo']);
+    });
+    it('able to extract scope from js variable notation by given path', function () {
+      const tpl = `
+        import boo from 'boo';
+        var n = 12;
+        const tpl = GL
+        const tpl1 = 42;
+        let oop = 'pups';
+      `;
+      const p = getPlaceholderPath(tpl, 'GL');
+
+      expect(p.node.type).toBe('Identifier');
+
+      const scope = getScope(p.scope);
+
+      expect(scope).toStrictEqual(['boo', 'n', 'tpl', 'tpl1', 'oop']);
+    });
+  });
+
+  describe('getFileRanges()', function () {
+    it('support single line file', function () {
+      const tpl = `<template></template>`;
+      const results = getFileRanges(tpl);
+
+      expect(results.length).toBe(1);
+      expect(results[0].content).toBe('<template></template>');
+      expect(results[0].start).toBe(0);
+      expect(results[0].line).toBe(1);
+      expect(results[0].columns).toBe(tpl.length);
+    });
+    it('support two line file', function () {
+      const tpl = `<template>\n</template>`;
+      const results = getFileRanges(tpl);
+
+      expect(results.length).toBe(2);
+      expect(results[0].content).toBe('<template>');
+      expect(results[0].start).toBe(0);
+      expect(results[0].line).toBe(1);
+      expect(results[0].columns).toBe('<template>'.length);
+      expect(results[1].content).toBe('</template>');
+      expect(results[1].start).toBe('<template>'.length);
+      expect(results[1].line).toBe(2);
+      expect(results[1].columns).toBe('</template>'.length);
+    });
+    it('support empty line file', function () {
+      const tpl = `<template>\n\n</template>`;
+      const results = getFileRanges(tpl);
+
+      expect(results.length).toBe(3);
+      expect(results[0].content).toBe('<template>');
+      expect(results[1].content).toBe('');
+      expect(results[2].content).toBe('</template>');
+      expect(results[2].start).toBe('<template>\n\n'.length);
+      expect(results[2].line).toBe(3);
+    });
+  });
+
+  describe('RangeWalker', function () {
+    describe('content getter', function () {
+      it('works just fine', function () {
+        const tpl = `<template>\n<template>\n</template>`;
+        const r = rw(tpl);
+
+        expect(r.content).toBe(tpl);
+      });
+    });
+    describe('subtract', function () {
+      describe('one-line', function () {
+        it('able to remove single line template content from source [with bounds]', function () {
+          const tpl = `<template>42</template>`;
+          const r = rw(tpl);
+
+          expect(r.subtract(r.templates()).content).toStrictEqual('<template>  </template>');
+        });
+        it('able to remove single line template content from source [without bounds]', function () {
+          const tpl = `<template>42</template>`;
+          const r = rw(tpl);
+
+          expect(r.subtract(r.templates(true)).content).toStrictEqual(new Array(tpl.length).fill(' ').join(''));
+        });
+      });
+      describe('multi-line', function () {
+        it('able to remove single line template content from source [with bounds]', function () {
+          const tpl = `<template>\n4\n2\n</template>`;
+          const r = rw(tpl);
+
+          expect(r.subtract(r.templates()).content).toStrictEqual('<template>\n \n \n</template>');
+        });
+        it('able to remove single line template content from source [without bounds]', function () {
+          const tpl = `\n<template>\n4\n2\n</template>\n`;
+          const r = rw(tpl);
+
+          expect(r.subtract(r.templates(true)).content).toStrictEqual('\n          \n \n \n           \n');
+        });
+      });
+      describe('can subtract multiple types', function () {
+        it('able to remove style and template content', function () {
+          const tpl = `<template>42</template><style>42</style>`;
+          const r = rw(tpl);
+
+          expect(r.subtract([...r.templates(), ...r.styles()]).content).toStrictEqual('<template>  </template><style>  </style>');
+        });
+      });
+      describe('can subtract templates with placeholders', function () {
+        it('able to remove style and template content', function () {
+          const hTpl = `<template>42</template>`;
+          const tpl = `class MyGlimmerComponent {
+            ${hTpl}
+            <style>42</style>
+          }`.trim();
+          const r = rw(tpl);
+          const [template] = r.templates(true);
+          const expectedTpl = `class MyGlimmerComponent {
+            ${template.key}${new Array(hTpl.length - template.key.length).fill(' ').join('')}
+            <style>42</style>
+          }
+          `.trim();
+
+          expect(r.subtract([template], true).content.split('\n')).toStrictEqual(expectedTpl.split('\n'));
+        });
+      });
+    });
+    describe('<template></template>', function () {
+      describe('corner cases', function () {
+        it('support open template tag inside open template tag', function () {
+          const tpl = `<template><template></template>`;
+          const r = rw(tpl);
+          const templates = r.templates();
+          const [template] = templates;
+
+          expect(templates.length).toBe(1);
+          expect(template.content).toBe('<template>');
+        });
+        it('support close template tag after close template tag', function () {
+          const tpl = `<template></template></template>`;
+          const r = rw(tpl);
+          const templates = r.templates();
+          const [template] = templates;
+
+          expect(templates.length).toBe(1);
+          expect(template.content).toBe('');
+        });
+        it('support multiple templates', function () {
+          const tpl = `<template>\n1\n</template><template>\n2\n</template>`;
+          const r = rw(tpl);
+          const templates = r.templates();
+          const [templ1, templ2] = templates;
+
+          expect(templates.length).toBe(2);
+          expect(templ1.content).toBe('\n1\n');
+          expect(templ2.content).toBe('\n2\n');
+        });
+      });
+
+      describe('without bounds', function () {
+        it('able to extract template content from single line file', function () {
+          const tpl = `<template>42</template>`;
+          const r = rw(tpl);
+          const templates = r.templates();
+          const [template] = templates;
+
+          expect(templates.length).toBe(1);
+          expect(template.content).toBe('42');
+          expect(template.loc.start.line).toBe(1);
+          expect(template.loc.start.character).toBe(10);
+          expect(template.loc.end.line).toBe(1);
+          expect(template.loc.end.character).toBe(12);
+        });
+
+        it('able to extract template content from multi line file', function () {
+          const content = '\n4\n2\n';
+          const tpl = `<template>${content}</template>`;
+          const r = rw(tpl);
+          const templates = r.templates();
+          const [template] = templates;
+
+          expect(templates.length).toBe(1);
+          expect(template.content.split('\n')).toStrictEqual(content.split('\n'));
+          expect(template.content).toEqual(content);
+          expect(template.loc.start.line).toBe(1);
+          expect(template.loc.start.character).toBe(10);
+          expect(template.loc.end.line).toBe(4);
+          expect(template.loc.end.character).toBe(0);
+        });
+      });
+
+      describe('with bounds', function () {
+        it('able to extract template content from single line file', function () {
+          const tpl = `<template>42</template>`;
+          const r = rw(tpl);
+          const templates = r.templates(true);
+          const [template] = templates;
+
+          expect(templates.length).toBe(1);
+          expect(template.content).toBe(tpl);
+          expect(template.loc.start.line).toBe(1);
+          expect(template.loc.start.character).toBe(0);
+          expect(template.loc.end.line).toBe(1);
+          expect(template.loc.end.character).toBe(tpl.length);
+        });
+
+        it('able to extract template content from multi line file', function () {
+          const content = '\n4\n2\n';
+          const tpl = `<template>${content}</template>`;
+          const r = rw(tpl);
+          const templates = r.templates(true);
+          const [template] = templates;
+
+          expect(templates.length).toBe(1);
+          expect(template.content.split('\n')).toStrictEqual(tpl.split('\n'));
+          expect(template.content).toEqual(tpl);
+          expect(template.loc.start.line).toBe(1);
+          expect(template.loc.start.character).toBe(0);
+          expect(template.loc.end.line).toBe(4);
+          expect(template.loc.end.character).toBe(11);
+        });
+      });
+    });
+  });
+
+  describe('TemplateData', function () {
+    it('return correct absolute content', function () {
+      const tpl = `123\n1\n\n <template>123\n </template>`;
+      const r = rw(tpl);
+      const [template] = r.templates(true);
+
+      expect(template.absoluteContent.split('\n')).toStrictEqual(['', '', '', '', ' <template>123', ' </template>']);
+    });
+    it('return expected list of locals', function () {
+      const tpl = `<div>{{this.foo}}</div>`;
+      const data = new TemplateData(tpl);
+
+      expect(data.locals).toStrictEqual([]);
+    });
+    it('return expected list of locals for helpers', function () {
+      const tpl = `<div>{{foo 42}}</div>`;
+      const data = new TemplateData(tpl);
+
+      expect(data.locals).toStrictEqual(['foo']);
+    });
+    it('return expected list of locals for helpers composition', function () {
+      const tpl = `<div>{{foo (bar 42)}}</div>`;
+      const data = new TemplateData(tpl);
+
+      expect(data.locals).toStrictEqual(['foo', 'bar']);
+    });
+    it('return expected list of locals for modifiers', function () {
+      const tpl = `<div {{foo 42}}></div>`;
+      const data = new TemplateData(tpl);
+
+      expect(data.locals).toStrictEqual(['foo']);
+    });
+    it('return expected list of locals for components', function () {
+      const tpl = `<MyComponent />`;
+      const data = new TemplateData(tpl);
+
+      expect(data.locals).toStrictEqual(['MyComponent']);
+    });
+  });
+});
diff --git a/tsconfig.json b/tsconfig.json
index ee268432..6e2640b9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,7 +6,7 @@
     "allowSyntheticDefaultImports": true,
     "moduleResolution": "node",
     "sourceMap": true,
-    "lib" : [ "es2019", "WebWorker" ],
+    "lib" : [ "es2020", "WebWorker" ],
     "outDir": "./lib",
     "strictNullChecks": true,
     "noImplicitAny": true,
diff --git a/yarn.lock b/yarn.lock
index 0d8e9f74..6f317198 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -536,13 +536,6 @@
   dependencies:
     "@simple-dom/interface" "^1.4.0"
 
-"@glimmer/interfaces@0.73.1":
-  version "0.73.1"
-  resolved "https://registry.yarnpkg.com/@glimmer/interfaces/-/interfaces-0.73.1.tgz#ad1dffb635c19b66230c45894e15f3a34d90e5b0"
-  integrity sha512-MttMIyWGZ+IbiJJpr4q9dwMmn+7eOMdxjMiuaEYeLBN/DXe8T9VePqgapURkSL9CEmKByB/pLvcaVTSYfm0RYg==
-  dependencies:
-    "@simple-dom/interface" "^1.4.0"
-
 "@glimmer/interfaces@0.82.0":
   version "0.82.0"
   resolved "https://registry.yarnpkg.com/@glimmer/interfaces/-/interfaces-0.82.0.tgz#e3f21e51a421b4c1ee34dcb682c719832f4a36f5"
@@ -550,6 +543,13 @@
   dependencies:
     "@simple-dom/interface" "^1.4.0"
 
+"@glimmer/interfaces@0.83.1":
+  version "0.83.1"
+  resolved "https://registry.yarnpkg.com/@glimmer/interfaces/-/interfaces-0.83.1.tgz#fb16f5f683ddc55f130887b6141f58c0751350fe"
+  integrity sha512-rjAztghzX97v8I4rk3+NguM3XGYcFjc/GbJ8qrEj19KF2lUDoDBW1sB7f0tov3BD5HlrGXei/vOh4+DHfjeB5w==
+  dependencies:
+    "@simple-dom/interface" "^1.4.0"
+
 "@glimmer/reference@^0.65.0":
   version "0.65.1"
   resolved "https://registry.yarnpkg.com/@glimmer/reference/-/reference-0.65.1.tgz#44515e7bef58c9ce4ea65c2eb3403caec11a2060"
@@ -581,15 +581,15 @@
     "@handlebars/parser" "^1.1.0"
     simple-html-tokenizer "^0.5.10"
 
-"@glimmer/syntax@^0.73.1":
-  version "0.73.1"
-  resolved "https://registry.yarnpkg.com/@glimmer/syntax/-/syntax-0.73.1.tgz#9e3c898ba91ddb1d4e6f413452b0b84700910c83"
-  integrity sha512-TpTK9yAaoDOzdo+5itoJPRxrVWacYlGuHtJvATi96RJUTAxPz9b9M3AcVm0atcZW7WiA8X8J/weQ2KcIVgAYmw==
+"@glimmer/syntax@^0.83.1":
+  version "0.83.1"
+  resolved "https://registry.yarnpkg.com/@glimmer/syntax/-/syntax-0.83.1.tgz#7e18dd445871c157ba0281f12a4fbf316fa49b41"
+  integrity sha512-n3vEd0GtjtgkOsd2gqkSimp8ecqq5KrHyana/s1XJZvVAPD5rMWT9WvAVWG8XAktns8BxjwLIUoj/vkOfA+eHg==
   dependencies:
-    "@glimmer/interfaces" "0.73.1"
-    "@glimmer/util" "0.73.1"
-    "@handlebars/parser" "^2.0.0"
-    simple-html-tokenizer "^0.5.10"
+    "@glimmer/interfaces" "0.83.1"
+    "@glimmer/util" "0.83.1"
+    "@handlebars/parser" "~2.0.0"
+    simple-html-tokenizer "^0.5.11"
 
 "@glimmer/util@0.65.1":
   version "0.65.1"
@@ -600,15 +600,6 @@
     "@glimmer/interfaces" "0.65.1"
     "@simple-dom/interface" "^1.4.0"
 
-"@glimmer/util@0.73.1":
-  version "0.73.1"
-  resolved "https://registry.yarnpkg.com/@glimmer/util/-/util-0.73.1.tgz#f89bb7adba18315e00fbdb5a7c5a4913bbdebc6e"
-  integrity sha512-zFXY9OgR6wx7Cy4yYJkmgoUsdx3MQYAmZytuEDTghLXJyUoSh5Jcvner+qhFkqLSzj2pvE4btn3yUNnx3QOBtg==
-  dependencies:
-    "@glimmer/env" "0.1.7"
-    "@glimmer/interfaces" "0.73.1"
-    "@simple-dom/interface" "^1.4.0"
-
 "@glimmer/util@0.82.0":
   version "0.82.0"
   resolved "https://registry.yarnpkg.com/@glimmer/util/-/util-0.82.0.tgz#d6ae4985f70343898d4b2297a4b3b1f5feda1934"
@@ -618,6 +609,15 @@
     "@glimmer/interfaces" "0.82.0"
     "@simple-dom/interface" "^1.4.0"
 
+"@glimmer/util@0.83.1":
+  version "0.83.1"
+  resolved "https://registry.yarnpkg.com/@glimmer/util/-/util-0.83.1.tgz#cc7511b03164d658cf6e3262fce5a0fcb82edceb"
+  integrity sha512-amvjtl9dvrkxsoitXAly9W5NUaLIE3A2J2tWhBWIL1Z6DOFotfX7ytIosOIcPhJLZCtiXPHzMutQRv0G/MSMsA==
+  dependencies:
+    "@glimmer/env" "0.1.7"
+    "@glimmer/interfaces" "0.83.1"
+    "@simple-dom/interface" "^1.4.0"
+
 "@glimmer/validator@0.65.1", "@glimmer/validator@^0.65.0":
   version "0.65.1"
   resolved "https://registry.yarnpkg.com/@glimmer/validator/-/validator-0.65.1.tgz#07ebd13952660d341fea8e5b606b512fe1dbc176"
@@ -631,7 +631,7 @@
   resolved "https://registry.yarnpkg.com/@handlebars/parser/-/parser-1.1.0.tgz#d6dbc7574774b238114582410e8fee0dc3532bdf"
   integrity sha512-rR7tJoSwJ2eooOpYGxGGW95sLq6GXUaS1UtWvN7pei6n2/okYvCGld9vsUTvkl2migxbkszsycwtMf/GEc1k1A==
 
-"@handlebars/parser@^2.0.0", "@handlebars/parser@~2.0.0":
+"@handlebars/parser@~2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@handlebars/parser/-/parser-2.0.0.tgz#5e8b7298f31ff8f7b260e6b7363c7e9ceed7d9c5"
   integrity sha512-EP9uEDZv/L5Qh9IWuMUGJRfwhXJ4h1dqKTT4/3+tY0eu7sPis7xh23j61SYUnNF4vqCQvvUXpDo9Bh/+q1zASA==