Start testing component compilation

.github/workflows/ci.yml

@@ -47,6 +47,8 @@ jobs:
         # so we could be sure we don't miss anything
         # and then generate this list from a previous C.I. job
         slow-test:
+          - components
+
           - defaults with npm
           - defaults with yarn
           - defaults with pnpm

tests/.prettierignore

@@ -0,0 +1,3 @@
+# Editors may run prettier per-workspace, which would ignore 
+# the top-level workspaces' prettier config.
+fixtures/

tests/build-tests/components.test.ts

@@ -0,0 +1,106 @@
+import { execa } from 'execa';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { afterEach, beforeEach, describe, it } from 'vitest';
+
+import { AddonFixtureHelper } from '../fixture-helper.js';
+import { createAddon, createTmp, install } from '../utils.js';
+
+let packageManager = 'pnpm';
+
+describe('components (build)', () => {
+  describe('co-located JS', () => {
+    let cwd = '';
+    let tmpDir = '';
+    let addonOnlyJS: AddonFixtureHelper;
+
+    beforeEach(async () => {
+      tmpDir = await createTmp();
+
+      console.debug(`Debug test repo at ${tmpDir}`);
+
+      let { name } = await createAddon({
+        args: [`--pnpm=true`, '--addon-only'],
+        options: { cwd: tmpDir },
+      });
+
+      cwd = path.join(tmpDir, name);
+
+      addonOnlyJS = new AddonFixtureHelper({
+        cwd,
+        packageManager: 'pnpm',
+        scenario: 'addon-only-js',
+      });
+
+      await install({ cwd, packageManager, skipPrepare: true });
+
+      // NOTE: This isn't needed to make the tests pass atm, but it would be
+      // required when consumers try to use these compiled components
+      await execa('pnpm', ['add', '--save-peer', '@glimmer/component'], { cwd });
+    });
+
+    afterEach(async () => {
+      fs.rm(tmpDir, { recursive: true, force: true });
+    });
+
+    it('generates correct files with no template', async () => {
+      await addonOnlyJS.use('src/components/no-template.js');
+      await addonOnlyJS.build();
+      await addonOnlyJS.matches('dist/components/no-template.js');
+    });
+
+    it('generates correct files with a template', async () => {
+      await addonOnlyJS.use('src/components/co-located.js');
+      await addonOnlyJS.use('src/components/co-located.hbs');
+      await addonOnlyJS.build();
+      await addonOnlyJS.matches('dist/components/co-located.js');
+    });
+  });
+
+  describe('co-located TS', () => {
+    let cwd = '';
+    let tmpDir = '';
+    let addonOnlyTS: AddonFixtureHelper;
+
+    beforeEach(async () => {
+      tmpDir = await createTmp();
+
+      console.debug(`Debug test repo at ${tmpDir}`);
+
+      let { name } = await createAddon({
+        args: [`--pnpm=true`, '--addon-only', '--typescript'],
+        options: { cwd: tmpDir },
+      });
+
+      cwd = path.join(tmpDir, name);
+
+      addonOnlyTS = new AddonFixtureHelper({
+        cwd,
+        packageManager: 'pnpm',
+        scenario: 'addon-only-ts',
+      });
+
+      await install({ cwd, packageManager, skipPrepare: true });
+      await execa('pnpm', ['add', '--save-peer', '@glimmer/component'], { cwd });
+    });
+
+    afterEach(async () => {
+      fs.rm(tmpDir, { recursive: true, force: true });
+    });
+
+    it('generates correct files with no template', async () => {
+      await addonOnlyTS.use('src/components/no-template.ts');
+      await addonOnlyTS.build();
+      await addonOnlyTS.matches('dist/components/no-template.js');
+      await addonOnlyTS.matches('declarations/components/no-template.d.ts');
+    });
+
+    it('generates correct files with a template', async () => {
+      await addonOnlyTS.use('src/components/co-located.ts');
+      await addonOnlyTS.use('src/components/co-located.hbs');
+      await addonOnlyTS.build();
+      await addonOnlyTS.matches('dist/components/co-located.js');
+      await addonOnlyTS.matches('declarations/components/co-located.d.ts');
+    });
+  });
+});

tests/fixture-helper.ts

@@ -0,0 +1,30 @@
+import { matchesFixture } from './assertions.js';
+import { copyFixture, runScript } from './utils.js';
+
+export class AddonFixtureHelper {
+  #cwd: string;
+  #scenario: string;
+  #packageManager: 'npm' | 'pnpm' | 'yarn';
+
+  constructor(options: {
+    cwd: string;
+    scenario?: string;
+    packageManager: 'pnpm' | 'npm' | 'yarn';
+  }) {
+    this.#cwd = options.cwd;
+    this.#scenario = options.scenario || 'default';
+    this.#packageManager = options.packageManager;
+  }
+
+  async use(file: string) {
+    await copyFixture(file, { scenario: this.#scenario, cwd: this.#cwd });
+  }
+
+  async build() {
+    await runScript({ cwd: this.#cwd, script: 'build', packageManager: this.#packageManager });
+  }
+
+  async matches(outputFile: string) {
+    await matchesFixture(outputFile, { scenario: this.#scenario, cwd: this.#cwd });
+  }
+}

tests/fixtures/addon-only-js/src/components/co-located.hbs

@@ -0,0 +1 @@
+{{this.someGetter}}

tests/fixtures/addon-only-js/src/components/co-located.js

@@ -0,0 +1,7 @@
+import Component from '@glimmer/component';
+
+export class CoLocated extends Component {
+  get someGetter() {
+    return 'someGetter';
+  }
+}

tests/fixtures/addon-only-js/src/components/no-template.js

@@ -0,0 +1,7 @@
+import Component from '@glimmer/component';
+
+export class NoTemplate extends Component {
+  get someGetter() {
+    return 'someGetter';
+  }
+}

tests/fixtures/addon-only-ts/declarations/components/co-located.d.ts

@@ -0,0 +1,12 @@
+import Component from '@glimmer/component';
+interface Signature {
+    Args: {};
+    Blocks: {
+        default: [];
+    };
+}
+export default class CoLocated extends Component<Signature> {
+    get someGetter(): string;
+}
+export {};
+//# sourceMappingURL=co-located.d.ts.map

tests/fixtures/addon-only-ts/declarations/components/no-template.d.ts

@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+interface Signature {
+    Args: {};
+    Blocks: {};
+}
+export declare class NoTemplate extends Component<Signature> {
+    get someGetter(): string;
+}
+export {};
+//# sourceMappingURL=no-template.d.ts.map

tests/fixtures/addon-only-ts/src/components/co-located.hbs

@@ -0,0 +1,3 @@
+{{this.someGetter}}
+
+{{yield}}

tests/fixtures/addon-only-ts/src/components/co-located.ts

@@ -0,0 +1,12 @@
+import Component from '@glimmer/component';
+
+interface Signature {
+  Args: {},
+  Blocks: { default: [] } 
+}
+
+export default class CoLocated extends Component<Signature> {
+  get someGetter() {
+    return 'someGetter';
+  }
+}

tests/fixtures/addon-only-ts/src/components/no-template.ts

@@ -0,0 +1,12 @@
+import Component from '@glimmer/component';
+
+interface Signature {
+  Args: {},
+  Blocks: {} 
+}
+
+export class NoTemplate extends Component<Signature> {
+  get someGetter() {
+    return 'someGetter';
+  }
+}

tests/tsconfig.json

@@ -7,5 +7,6 @@
 
     // Vite's internal types aren't relevant to us
     "skipLibCheck": true
-  }
+  },
+  "exclude": ["fixtures/"]
 }

tests/utils.ts

@@ -13,6 +13,43 @@ const fixturesPath = path.join(__dirname, 'fixtures');
 
 export const SUPPORTED_PACKAGE_MANAGERS = ['npm', 'yarn', 'pnpm'] as const;
 
+export async function copyFixture(
+  /**
+   * Which file within the fixture-set / scenario to copy
+   */
+  newFile: string,
+  options?: {
+    /**
+     * Which fixture set to use
+     */
+    scenario?: string;
+    /**
+     * By default, the file used will be the same as the testFilePath, but
+     * in the fixtures directory under the (maybe) specified scenario.
+     * this can be overridden, if needed.
+     * (like if you're testFilePath is deep with in an existing monorepo, and wouldn't
+     *   inherently match our default-project structure used in the fixtures)
+     */
+    file?: string;
+    /**
+     * The working directory to use for the relative paths. Defaults to process.cwd() (node default)
+     */
+    cwd?: string;
+  }
+) {
+  let scenario = options?.scenario ?? 'default';
+  let fixtureFile = options?.file ?? newFile;
+
+  if (options?.cwd) {
+    newFile = path.join(options.cwd, newFile);
+  }
+
+  let fixtureContents = await fixture(fixtureFile, { scenario });
+
+  await fse.mkdir(path.dirname(newFile), { recursive: true });
+  await fs.writeFile(newFile, fixtureContents);
+}
+
 export async function fixture(
   /**
    * Which file within in the fixture-set / scenario to read