Support generating nested colocated components

README.md

@@ -58,6 +58,7 @@ pnpm gember component --help # for all available options
 # examples:
 pnpm gember component foo
 pnpm gember component foo --class-based # or `--class`
+pnpm gember component foo --nested
 pnpm gember component foo --path="src/-private"
 pnpm gember component foo --typescript # or `--ts`
 ```
@@ -137,6 +138,7 @@ export type Config = {
   generators?: {
     component?: {
       classBased?: boolean;
+      nested?: boolean;
       path?: string;
       typescript?: boolean;
     };

documents/service.md

@@ -13,7 +13,7 @@ export default class {{inputs.name.pascal}} extends Service {}
 {{if inputs.typescript}}
 declare module "@ember/service" {
   interface Registry {
-    "{{inputs.name.path}}": {{inputs.name.pascal}};
+    "{{inputs.name.registryPath}}": {{inputs.name.pascal}};
   }
 }
 {{end}}

src/cli.ts

@@ -28,6 +28,11 @@ yargs(hideBin(process.argv))
           description: "Generate a class-based component",
           type: "boolean",
         })
+        .option("nested", {
+          description:
+            "Generate a nested colocated component, e.g. `foo/bar/index.gjs`",
+          type: "boolean",
+        })
         .option("path", {
           description: "Generate a component at a custom path",
           type: "string",
@@ -45,6 +50,7 @@ yargs(hideBin(process.argv))
           cwd(),
           await applyGemberConfig("component", {
             classBased: options.classBased,
+            nested: options.nested,
             path: options.path,
             typescript: options.typescript,
           }),

src/generate.ts

@@ -17,9 +17,11 @@ export async function generate(
   packagePath: string,
   {
     inputs,
+    nested = false,
     path,
   }: {
     inputs?: GenerateInputs;
+    nested?: boolean;
     path?: string;
   },
 ): Promise<void> {
@@ -47,11 +49,9 @@ export async function generate(
         camel: camelCase(entityName),
         kebab: kebabCase(entityName),
         pascal: pascalCase(entityName),
-        path: entityName
-          .split("/")
-          .map((part) => kebabCase(part))
-          .join("/"),
+        path: pathCase(entityName) + (nested ? "/index" : ""),
         raw: entityName,
+        registryPath: pathCase(entityName),
       },
       signature: pascalCase(entityName) + "Signature",
     },
@@ -116,3 +116,10 @@ export async function resolveGeneratePath(
 
   return join(packagePath, srcDirectory, DOCUMENT_DIRECTORY[documentName]);
 }
+
+function pathCase(entityName: string): string {
+  return entityName
+    .split("/")
+    .map((part) => kebabCase(part))
+    .join("/");
+}

src/generators.ts

@@ -5,16 +5,19 @@ export function generateComponent(
   packagePath: string,
   {
     classBased = false,
+    nested,
     path,
     typescript = false,
   }: {
     classBased?: boolean;
+    nested?: boolean;
     path?: string;
     typescript?: boolean;
   } = {},
 ): Promise<void> {
   return generate("component", name, packagePath, {
     inputs: { classBased, typescript },
+    nested,
     path,
   });
 }

test/__snapshots__/generate-component.test.ts.snap

@@ -28,6 +28,11 @@ export default class Foo extends Component<FooSignature> {
 "
 `;
 
+exports[`generates a nested colocated template-only \`.gjs\` component 1`] = `
+"<template>{{yield}}</template>
+"
+`;
+
 exports[`generates a nested template-only \`.gjs\` component 1`] = `
 "<template>{{yield}}</template>
 "

test/generate-component.test.ts

@@ -81,3 +81,13 @@ it("generates a nested template-only `.gjs` component", async (ctx) => {
 
   ctx.expect(content).toMatchSnapshot();
 });
+
+it("generates a nested colocated template-only `.gjs` component", async (ctx) => {
+  pkg = await Package.create("v2-addon");
+
+  await generateComponent("foo/bar", pkg.path, { nested: true });
+
+  const content = await pkg.readFile("src/components/foo/bar/index.gjs");
+
+  ctx.expect(content).toMatchSnapshot();
+});