From ee666e5a8e21a45a2767842188927b405addca40 Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Thu, 12 Oct 2023 10:25:41 +0100
Subject: [PATCH] Fix support for nested components in mustache statement

The implementation of `classify()` was converting component invocations like `{{dir/component-name}}` to `<DirComponentName />`. This commit fixes the classify function to replace `/` with `::`.
---
 lib/helpers/string.ts                              |  4 +++-
 .../components/somedir/nested-global-component.hbs |  3 +++
 .../components/somedir/nested-global-component.ts  | 14 ++++++++++++++
 .../integration/plugin/mustache-statement-test.ts  |  5 +++++
 4 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 tests/dummy/app/components/somedir/nested-global-component.hbs
 create mode 100644 tests/dummy/app/components/somedir/nested-global-component.ts

diff --git a/lib/helpers/string.ts b/lib/helpers/string.ts
index fbdb7a9..18c48ec 100644
--- a/lib/helpers/string.ts
+++ b/lib/helpers/string.ts
@@ -19,5 +19,7 @@ export function squish(str: string): string {
 }
 
 export function classify(str: string): string {
-  return upperFirst(camelCase(str));
+  const parts = str.split('/');
+  const classifiedParts = parts.map((p) => upperFirst(camelCase(p)));
+  return classifiedParts.join('::');
 }
diff --git a/tests/dummy/app/components/somedir/nested-global-component.hbs b/tests/dummy/app/components/somedir/nested-global-component.hbs
new file mode 100644
index 0000000..23b3a3b
--- /dev/null
+++ b/tests/dummy/app/components/somedir/nested-global-component.hbs
@@ -0,0 +1,3 @@
+<div ...attributes data-test-global-component>
+  nested-global-component-contents
+</div>
\ No newline at end of file
diff --git a/tests/dummy/app/components/somedir/nested-global-component.ts b/tests/dummy/app/components/somedir/nested-global-component.ts
new file mode 100644
index 0000000..ae6231f
--- /dev/null
+++ b/tests/dummy/app/components/somedir/nested-global-component.ts
@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+
+interface GlobalComponentSignature<Arg = string | undefined> {
+  Element: HTMLDivElement;
+}
+
+// eslint-disable-next-line ember/no-empty-glimmer-component-classes
+export default class NestedGlobalComponent extends Component<GlobalComponentSignature> {}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'somedir/nested-global-component': typeof NestedGlobalComponent;
+  }
+}
diff --git a/tests/integration/plugin/mustache-statement-test.ts b/tests/integration/plugin/mustache-statement-test.ts
index 64abffb..fb39bf6 100644
--- a/tests/integration/plugin/mustache-statement-test.ts
+++ b/tests/integration/plugin/mustache-statement-test.ts
@@ -28,6 +28,11 @@ module('Integration | Plugin | MustacheStatement', function (hooks) {
             assert.dom().hasText('global-component-contents');
           });
 
+          test('handles a nested invocable component', async function (assert) {
+            await render(hbs`{{somedir/nested-global-component}}`);
+            assert.dom().hasText('nested-global-component-contents');
+          });
+
           test('does nothing to an invocable modifier', async function (assert) {
             await render(hbs`<div {{global-modifier}} />`);
             assert.dom().hasText('global-modifier-result');