Remove glimmer components from tests as telemetry helpers do not report glimmer components

Author: lolmaus

.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
   root: true,
   parserOptions: {
-    ecmaVersion: 2017,
+    ecmaVersion: 'latest',
   },
   env: {
     node: true,

README.md

@@ -193,21 +193,19 @@ If you would like to only convert certain component invocations to use the angle
 
 ### Making helper invocations unambiguous
 
-In order to make helper invocations unambiguous, use this:
+You may want to convert invocations like `{{concat "foo" "bar"}}` into `{{(concat "foo" "bar")}}`, which may be useful as a temporary step when upgrading to strict-mode Embroider.
 
-**config/anglebrackets-codemod-config.json**
+In your **config/anglebrackets-codemod-config.json**, add this:
 
 ```js
 {
   "unambiguousHelpers": true
 }
 ```
 
-This will result in invocations like `{{concat "foo" "bar"}}` to be converted into `{{(concat "foo" "bar")}}`, which may be useful in strict-mode Embroider.
-
-Note that it does not work in non-Embroider Ember, as of January 2024.
+Note that unambiguous helpers do not work in non-Embroider Ember, as of January 2024.
 
-Note that ambiguous invocations, that cannot be statically distinguished between a helper, a property and a component, will not be modified.
+Note that ambiguous invocations that cannot be statically distinguished between a helper, a property and a component — will not be modified.
 
 ## Debugging Workflow
 

test/fixtures/with-telemetry/input/app/templates/application.hbs

@@ -3,38 +3,19 @@
     <h3 class="sr-only">
       Components
     </h3>
-    <BsNav @type="pills" @stacked={{true}} as |nav|>
+    {{#bs-nav type="pills" stacked=true as |nav|}}
       {{#each this.model as |comp|}}
-        <nav.item>
-          <nav.link-to @route={{comp.demoRoute}}>
+        {{#nav.item}}
+          {{#nav.link-to route=comp.demoRoute}}
             {{comp.title}}
-          </nav.link-to>
-        </nav.item>
+          {{/nav.link-to}}
+        {{/nav.item}}
       {{/each}}
-    </BsNav>
+    {{/bs-nav}}
   </div>
   <div class="col-sm-8 col-sm-pull-4 col-md-9 col-md-pull-3">
-    {{utils/bee-bop}}
     {{-wat-wat}}
-    {{utils/-wat-wat}}
-    {{#if this.isDetailPage}}
-      <h1>
-        {{currentComponent.title}}
-      </h1>
-      <p class="lead">
-        {{currentComponent.description}}
-      </p>
-      {{api-reference component=this.currentComponent}}
-    {{/if}}
-    {{outlet}}
-
-    {{#bs-button id="openModal" onClick=(action "addModal")}}Open{{/bs-button}}
-
-    {{#if hasModal}}
-      {{#bs-modal-simple open=modal onHidden=(action "removeModal") title="Dynamic Dialog"}}
-        Hi there
-      {{/bs-modal-simple}}
-    {{/if}}
-    <FileLess @foo={{true}} />
+    {{outlet}}    
+    {{file-less foo=true}}
   </div>
 </div>

test/fixtures/with-telemetry/input/app/templates/components/file-less.hbs

@@ -1,2 +1 @@
 <div>this template has no js </div>
-{{#bs-button type="primary"}}Primary{{/bs-button}}

test/fixtures/with-telemetry/output/app/templates/application.hbs

@@ -14,27 +14,8 @@
     </BsNav>
   </div>
   <div class="col-sm-8 col-sm-pull-4 col-md-9 col-md-pull-3">
-    <Utils::BeeBop />
     {{-wat-wat}}
-    <Utils::-WatWat />
-    {{#if this.isDetailPage}}
-      <h1>
-        {{currentComponent.title}}
-      </h1>
-      <p class="lead">
-        {{currentComponent.description}}
-      </p>
-      <ApiReference @component={{this.currentComponent}} />
-    {{/if}}
-    {{outlet}}
-
-    <BsButton @id="openModal" @onClick={{action "addModal"}}>Open</BsButton>
-
-    {{#if hasModal}}
-      <BsModalSimple @open={{modal}} @onHidden={{action "removeModal"}} @title="Dynamic Dialog">
-        Hi there
-      </BsModalSimple>
-    {{/if}}
+    {{outlet}}    
     <FileLess @foo={{true}} />
   </div>
 </div>

test/fixtures/with-telemetry/output/app/templates/components/file-less.hbs

@@ -1,2 +1 @@
 <div>this template has no js </div>
-<BsButton @type="primary">Primary</BsButton>

transforms/angle-brackets/telemetry/invokable.js

@@ -16,11 +16,6 @@ function invokableName(name, type) {
     invokePath = '/components/';
   }
 
-  console.log({
-    name,
-    invokePath,
-    result: name.substring(name.lastIndexOf(invokePath) + invokePath.length, name.length),
-  });
   return name.substring(name.lastIndexOf(invokePath) + invokePath.length, name.length);
 }
 

transforms/angle-brackets/transform.js

@@ -349,6 +349,11 @@ function isKnownHelper(fullName, config, invokableData) {
       if (isComponent) {
         return false;
       }
+
+      let mergedHelpers = [...KNOWN_HELPERS, ...(helpers || [])];
+      let isHelper = mergedHelpers.includes(name) || config.helpers.includes(name);
+      let strName = `${name}`; // coerce boolean and number to string
+      return isHelper && !strName.includes('.');
     } else {
       let mergedHelpers = [...KNOWN_HELPERS, ...(helpers || [])];
       let isHelper = mergedHelpers.includes(name) || config.helpers.includes(name);

transforms/angle-brackets/transform.test.js

@@ -1382,24 +1382,22 @@ test('unknown helper with args', () => {
     "
         <ApiReference @component={{this.currentComponent}} />
         {{api-reference someArg}}
-        <ApiReference />
+        {{api-reference}}
       "
   `);
 });
 
 test('unambiguousHelpers: true', () => {
   let input = `
-    {{concat}}
-    {{unknown}}
-    {{t "some.string" param="string" another=1}}
+    {{helper-1}}
+    {{nested/helper "some.string" param="string" another=1}}
   `;
 
   expect(runTest('unambiguousHelpers: true', input, { unambiguousHelpers: true }))
     .toMatchInlineSnapshot(`
     "
-        {{(concat)}}
-        {{unknown}}
-        {{(t \\"some.string\\" param=\\"string\\" another=1)}}
+        {{(helper-1)}}
+        {{(nested/helper \\"some.string\\" param=\\"string\\" another=1)}}
       "
   `);
 });