feat: Add glimmer support

packages/import-cost/README.md

@@ -33,7 +33,7 @@ Usage as you can see above is pretty straight forward, `importCost()` gets three
 
 1) `fileName` - This is a `string` representing the full path to the file that is being processed. We need full file path since we need to look inside `node_modules` folder of the file in question
 2) `fileContents` - This is a `string` which contains the actual content of the file. We need it because in IDE extension it is usually much faster to get contents from IDE then reading it from filesystem. Also, obviously changes to the file might not have been saved yet, we want to work on the file as the user types to it.
-3) `language` - This effects which AST parser we will use to lookup the imports in the file. As you can see above, you pass either `Lang.JAVASCRIPT`, `Lang.TYPESCRIPT`, `Lang.VUE` or `Lang.SVELTE` to it. Typically IDE can tell you the language of the file, better use the correct API of your IDE then rely on extensions.
+3) `language` - This effects which AST parser we will use to lookup the imports in the file. As you can see above, you pass either `Lang.JAVASCRIPT`, `Lang.TYPESCRIPT`, `Lang.VUE`, `Lang.SVELTE`, `Lang.GLIMMER_JS`, or `Lang.GLIMMER_TS` to it. Typically IDE can tell you the language of the file, better use the correct API of your IDE then rely on extensions.
 4) `config` (optional) - Object containing the following keys: `maxCallTime` - give up after timeout (in milliseconds) if bundle calculation didn't complete, `concurrent` - boolean representing whether calculation should happen in multiple workers.
 
 In response, `importCost()` returns a standard Node `EventEmitter`. You can read about event emitters in [Node docs](https://nodejs.org/api/events.html#events_class_eventemitter), but typically all you need to know is that you can register a callback for various events we emit using `emitter.on(eventName, callback)`. We also recommend you un-register using `emitter.removeAllListeners()` when the file in question changes, this will help you not be confused with any results that are no longer relevant to that file.

packages/import-cost/src/langs.js

@@ -3,6 +3,8 @@ const Lang = {
   JAVASCRIPT: 'javascript',
   VUE: 'vue',
   SVELTE: 'svelte',
+  GLIMMER_JS: 'glimmer-js',
+  GLIMMER_TS: 'glimmer-ts',
 };
 
 module.exports = {

packages/import-cost/src/parser.js

@@ -23,8 +23,23 @@ function getScriptTagLineNumber(html) {
   return 0;
 }
 
+function stripTemplateTag(source) {
+  // Replace all template tags within an assignment expression or a return to a no-op
+  let sourceStripped = source.replace(
+    /(=|return)\s*?<template>(.|\n)*?<\/template>/g,
+    '$1 () => {}',
+  );
+
+  // Strip all template tags within a class body
+  return sourceStripped.replace(/<template>(.|\n)*?<\/template>/g, '');
+}
+
 function getPackages(fileName, source, language) {
-  if ([Lang.SVELTE, Lang.VUE].some(l => l === language)) {
+  if ([Lang.GLIMMER_JS, Lang.GLIMMER_TS].some(l => l === language)) {
+    const scriptSource = stripTemplateTag(source);
+    const baseLanguage = Lang.GLIMMER_TS ? Lang.TYPESCRIPT : Lang.JAVASCRIPT;
+    return getPackagesFromJS(fileName, scriptSource, baseLanguage);
+  } else if ([Lang.SVELTE, Lang.VUE].some(l => l === language)) {
     const scriptSource = extractScriptFromHtml(source);
     const scriptLine = getScriptTagLineNumber(source);
     return getPackagesFromJS(

packages/import-cost/test/fixtures/glimmer.gjs

@@ -0,0 +1,18 @@
+import { func1 } from 'chai';
+import Component from '@glimmer/component';
+
+const ComponentA = <template>Lorem ipsum 1</template>;
+
+function ComponentB() {
+  return <template>Lorem ipsum 2</template>;
+}
+
+export default class ComponentC extends Component {
+  x = 1;
+
+  <template>
+    {{this.x}}
+
+    <ComponentA />
+  </template>
+}

packages/import-cost/test/fixtures/glimmer.gts

@@ -0,0 +1,19 @@
+import { func1 } from 'chai';
+import Component from '@glimmer/component';
+import { TOC } from '@ember/component/template-only';
+
+const ComponentA: TOC<{ Args: {} }> = <template>Lorem ipsum 1</template>;
+
+function ComponentB(): any {
+  return <template>Lorem ipsum 2</template>;
+}
+
+export default class ComponentC extends Component<{ Args: {} }> {
+  x: number = 1;
+
+  <template>
+    {{this.x}}
+
+    <ComponentA />
+  </template>
+}

packages/import-cost/test/index.spec.js

@@ -33,6 +33,8 @@ const LANGUAGES = {
   jsx: Lang.JAVASCRIPT,
   vue: Lang.VUE,
   svelte: Lang.SVELTE,
+  gjs: Lang.GLIMMER_JS,
+  gts: Lang.GLIMMER_TS,
 };
 
 async function check(fileName, pkg, config = { concurrent: false }) {
@@ -195,6 +197,12 @@ describe('importCost', () => {
     it('calculates size of a svelte script', () => {
       return verify('svelte.svelte');
     });
+    it('calculates size of a glimmer-js script', () => {
+      return verify('glimmer.gjs');
+    });
+    it('calculates size of a glimmer-ts script', () => {
+      return verify('glimmer.gts');
+    });
   });
 
   describe('caching', () => {

packages/vscode-import-cost/package.json

@@ -19,7 +19,9 @@
     "onLanguage:typescript",
     "onLanguage:typescriptreact",
     "onLanguage:vue",
-    "onLanguage:svelte"
+    "onLanguage:svelte",
+    "onLanguage:glimmer-js",
+    "onLanguage:glimmer-ts"
   ],
   "keywords": [
     "import",
@@ -125,6 +127,20 @@
           ],
           "description": "File extensions to be parsed by the Svelte parser"
         },
+        "importCost.glimmerJSExtensions": {
+          "type": "array",
+          "default": [
+            "\\.gjs$"
+          ],
+          "description": "File extensions to be parsed by the Glimmer-JS parser"
+        },
+        "importCost.glimmerTSExtensions": {
+          "type": "array",
+          "default": [
+            "\\.gts$"
+          ],
+          "description": "File extensions to be parsed by the Glimmer-TS parser"
+        },
         "importCost.bundleSizeDecoration": {
           "type": "string",
           "default": "both",

packages/vscode-import-cost/src/extension.js

@@ -76,7 +76,17 @@ function language({ fileName, languageId }) {
   );
   const vueRegex = new RegExp(configuration.vueExtensions.join('|'));
   const svelteRegex = new RegExp(configuration.svelteExtensions.join('|'));
-  if (languageId === 'svelte' || svelteRegex.test(fileName)) {
+  const glimmerJSRegex = new RegExp(
+    configuration.glimmerJSExtensions.join('|'),
+  );
+  const glimmerTSRegex = new RegExp(
+    configuration.glimmerTSExtensions.join('|'),
+  );
+  if (languageId === 'glimmer-js' || glimmerJSRegex.test(fileName)) {
+    return Lang.GLIMMER_JS;
+  } else if (languageId === 'glimmer-ts' || glimmerTSRegex.test(fileName)) {
+    return Lang.GLIMMER_TS;
+  } else if (languageId === 'svelte' || svelteRegex.test(fileName)) {
     return Lang.SVELTE;
   } else if (languageId === 'vue' || vueRegex.test(fileName)) {
     return Lang.VUE;