ember.nvp 1.0.0 → 1.2.0

package/test/ember.nvp/permutations/shared.ts

@@ -30,30 +30,73 @@ const NOT_YET_SUPPORTED: Record<ProjectType, Set<string>> = {
   app: new Set(["publint", "are-the-types-wrong"]),
   // libraries have no Application to wire inspector support into
   library: new Set(["inspector-support"]),
+  // publish checks: extensions aren't published (to npm)
+  extension: new Set(["publint", "are-the-types-wrong"]),
 };
 
+const TYPE_FOR_BASE: Record<(typeof bases)[number], ProjectType> = {
+  "minimal-app": "app",
+  "minimal-library": "library",
+  "minimal-extension": "extension",
+};
+
+/**
+ * Layers that only add lint / format / publish checks. They don't affect
+ * the runtime shape of a project, so they permutate among themselves in a
+ * small "checks" matrix instead of multiplying the main one. ("apply anew"
+ * still applies each of them on top of every main permutation, so linear
+ * cross-group coverage remains.)
+ */
+const CHECK_LAYERS = new Set<string>([
+  "eslint-bundled-ember",
+  "eslint-bundled-nvp",
+  "eslint-ejected",
+  "prettier",
+  "publint",
+  "are-the-types-wrong",
+]);
+
+type PermutationGroup = "main" | "checks";
+
 const eachBase = bases.map((base) => {
-  const type: ProjectType = base === "minimal-app" ? "app" : "library";
+  const type = TYPE_FOR_BASE[base]!;
 
   const applicableLayers = layers.filter((layer) => !NOT_YET_SUPPORTED[type].has(layer.name));
 
-  const permutations = permutate(applicableLayers.map((layer) => layer.name));
-  permutations.push([baseline]);
+  const toPermutations = (layerNames: string[], withBaseline: boolean) => {
+    const permutations = permutate(layerNames);
+
+    if (withBaseline) {
+      permutations.push([baseline]);
+    }
 
-  const eachPermutation = permutations
-    .filter((permutation) => {
-      if (INITIAL_ONLY.size > 0 && !permutation.some((x) => INITIAL_ONLY.has(x))) {
-        return;
-      }
+    return permutations
+      .filter((permutation) => {
+        if (INITIAL_ONLY.size > 0 && !permutation.some((x) => INITIAL_ONLY.has(x))) {
+          return;
+        }
 
-      // Not implemented yet
-      if (permutation.some((x) => TODO.has(x))) {
-        return;
-      }
+        // Not implemented yet
+        if (permutation.some((x) => TODO.has(x))) {
+          return;
+        }
 
-      return true;
-    })
-    .map((permutation) => ({ permutation, name: permutation.join(", ") }));
+        return true;
+      })
+      .map((permutation) => ({ permutation, name: permutation.join(", ") }));
+  };
+
+  const applicableNames = applicableLayers.map((layer) => layer.name);
+  const eachPermutation: Record<PermutationGroup, ReturnType<typeof toPermutations>> = {
+    main: toPermutations(
+      applicableNames.filter((name) => !CHECK_LAYERS.has(name)),
+      true,
+    ),
+    checks: toPermutations(
+      applicableNames.filter((name) => CHECK_LAYERS.has(name)),
+      false,
+    ),
+  };
 
   return { name: base, type, applicableLayers, eachPermutation };
 });
@@ -62,14 +105,20 @@ const eachBase = bases.map((base) => {
  * The permutation matrix grows exponentially with the layer count, so
  * each base runs from its own test file(s) -- CI runs them as separate,
  * parallel jobs. A base whose matrix outgrows one job's budget runs from
- * several files, each taking a deterministic 1-of-N slice.
+ * several files, each taking a deterministic 1-of-N slice. The "checks"
+ * group (CHECK_LAYERS) runs from its own file(s) the same way.
  *
  * @param base which base's permutations this file runs
- * @param slice which 1-of-N slice of the permutations this file runs
+ * @param options.index / options.total which 1-of-N slice of the permutations this file runs
+ * @param options.group which permutation group this file runs
  */
 export function testPermutations(
   base: (typeof bases)[number],
-  slice: { index: number; total: number } = { index: 0, total: 1 },
+  {
+    index = 0,
+    total = 1,
+    group = "main",
+  }: { index?: number; total?: number; group?: PermutationGroup } = {},
 ) {
   const {
     type,
@@ -77,7 +126,7 @@ export function testPermutations(
     eachPermutation: allPermutations,
   } = eachBase.find((b) => b.name === base)!;
 
-  const eachPermutation = allPermutations.filter((_, i) => i % slice.total === slice.index);
+  const eachPermutation = allPermutations[group].filter((_, i) => i % total === index);
 
   describe(base, () => {
     describe.each(eachPermutation)("layers: $name", ({ permutation }) => {

package/test/ember.nvp/scoped-css-library.test.ts

@@ -0,0 +1,211 @@
+import { describe, it, beforeAll, afterAll, expect } from "vitest";
+import { generate, listFiles } from "#test-helpers";
+import { execa } from "execa";
+import { mkdir, readFile, rm, writeFile } from "node:fs/promises";
+import { dirname, join } from "node:path";
+
+import type { Project } from "ember.nvp";
+
+/**
+ * Integration test for building a library that uses ember-scoped-css through
+ * `@nullvoxpopuli/ember-rolldown` (tsdown):
+ *
+ * - the `scopedCSS()` unplugin (ember-scoped-css/rollup) resolves and rewrites
+ *   the `?scoped=` CSS requests the template transform injects
+ * - the template transform + babel plugin ride along via `ember()`'s
+ *   `babel.templateTransforms` / `babel.plugins` options
+ * - `@tsdown/css` with `css.inject` bundles the scoped CSS into
+ *   `dist/style.css` and keeps the import in `dist/index.js`, so consuming
+ *   apps load the styles through the module graph
+ *
+ * Covers all three authoring modes: co-located `.css`, inline
+ * `<style scoped>`, and the `scopedClass` pseudo-helper in module code.
+ */
+
+const source = {
+  "tsdown.config.js": `import { defineConfig } from "tsdown";
+import { ember } from "@nullvoxpopuli/ember-rolldown";
+import { scopedCSS } from "ember-scoped-css/rollup";
+import { scopedCSS as scopedCssBabel } from "ember-scoped-css/babel";
+
+export default defineConfig({
+  entry: ["./src/index.ts"],
+  css: { inject: true },
+  plugins: [
+    ember({
+      babel: {
+        plugins: [scopedCssBabel()],
+        templateTransforms: [scopedCssBabel.template({})],
+      },
+    }),
+    scopedCSS(),
+  ],
+});
+`,
+  "src/index.ts": `export { Badge, type BadgeSignature } from "./components/badge.gts";
+export { Banner, type BannerSignature } from "./components/banner.gts";
+export { Chip, type ChipSignature, chipClass } from "./components/chip.gts";
+`,
+  // co-located CSS
+  "src/components/badge.gts": `import type { TOC } from "@ember/component/template-only";
+
+export interface BadgeSignature {
+  Element: HTMLSpanElement;
+  Blocks: {
+    default: [];
+  };
+}
+
+export const Badge: TOC<BadgeSignature> = <template>
+  <span class="badge" ...attributes>{{yield}}</span>
+</template>;
+`,
+  "src/components/badge.css": `.badge {
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+}
+`,
+  // inline <style scoped>
+  "src/components/banner.gts": `import type { TOC } from "@ember/component/template-only";
+
+export interface BannerSignature {
+  Element: HTMLDivElement;
+  Blocks: {
+    default: [];
+  };
+}
+
+export const Banner: TOC<BannerSignature> = <template>
+  <style scoped>
+    .banner {
+      border: 1px solid;
+    }
+  </style>
+  <div class="banner" ...attributes>{{yield}}</div>
+</template>;
+`,
+  // scopedClass pseudo-helper in module code
+  "src/components/chip.gts": `import type { TOC } from "@ember/component/template-only";
+import { scopedClass } from "ember-scoped-css";
+
+export const chipClass: string = scopedClass("chip");
+
+export interface ChipSignature {
+  Element: HTMLSpanElement;
+}
+
+export const Chip: TOC<ChipSignature> = <template>
+  <span class="chip" ...attributes></span>
+</template>;
+`,
+  "src/components/chip.css": `.chip {
+  display: inline-flex;
+}
+`,
+};
+
+async function writeSource(project: Project) {
+  for (let [filePath, contents] of Object.entries(source)) {
+    let target = join(project.directory, filePath);
+
+    await mkdir(dirname(target), { recursive: true });
+    await writeFile(target, contents);
+  }
+}
+
+async function addDependencies(project: Project) {
+  let manifestPath = join(project.directory, "package.json");
+  let manifest = JSON.parse(await readFile(manifestPath, "utf8"));
+
+  // @tsdown/css releases in lockstep with tsdown; both ranges track 0.22.x
+  manifest.devDependencies["@tsdown/css"] = "^0.22.13";
+  manifest.devDependencies["ember-scoped-css"] = "^3.1.0";
+
+  await writeFile(manifestPath, JSON.stringify(manifest, null, 2) + "\n");
+}
+
+describe("library with ember-scoped-css", () => {
+  let project: Project;
+
+  beforeAll(async () => {
+    project = await generate({ type: "library", name: "scoped-lib", layers: ["typescript"] });
+
+    await writeSource(project);
+    await addDependencies(project);
+
+    let install = await execa("pnpm install", { cwd: project.directory, shell: true });
+    expect(install.exitCode).toBe(0);
+
+    let build = await execa("pnpm build", { cwd: project.directory, shell: true });
+    expect(build.exitCode).toBe(0);
+  });
+
+  afterAll(async () => {
+    if (process.env.CI) return;
+
+    await rm(project.directory, { recursive: true, force: true, maxRetries: 3, retryDelay: 100 });
+  });
+
+  it("emits the expected files", async () => {
+    expect(await listFiles(join(project.directory, "dist"))).toMatchInlineSnapshot(`
+      [
+        "index.d.ts",
+        "index.d.ts.map",
+        "index.js",
+        "index.js.map",
+        "style.css",
+      ]
+    `);
+  });
+
+  it("scopes classes in the precompiled templates and keeps the CSS import", async () => {
+    let output = await project.read("dist/index.js");
+
+    expect(output).toMatchInlineSnapshot(`
+      "import './style.css';
+      import { precompileTemplate } from "@ember/template-compilation";
+      import { setComponentTemplate } from "@ember/component";
+      import templateOnly from "@ember/component/template-only";
+      //#region src/components/badge.ts
+      const Badge = setComponentTemplate(precompileTemplate("<span class=\\"badge_e1025e732\\" ...attributes>{{yield}}</span>", { strictMode: true }), templateOnly());
+      //#endregion
+      //#region src/components/banner.ts
+      const Banner = setComponentTemplate(precompileTemplate("\\n<div class=\\"banner_e88952290\\" ...attributes>{{yield}}</div>", { strictMode: true }), templateOnly());
+      //#endregion
+      //#region src/components/chip.ts
+      const chipClass = "chip_ec34dd962";
+      const Chip = setComponentTemplate(precompileTemplate("<span class=\\"chip_ec34dd962\\" ...attributes></span>", { strictMode: true }), templateOnly());
+      //#endregion
+      export { Badge, Banner, Chip, chipClass };
+
+      //# sourceMappingURL=index.js.map"
+    `);
+
+    // the scopedClass import is compiled away; nothing of ember-scoped-css
+    // remains at runtime
+    expect(output).not.toContain("ember-scoped-css");
+  });
+
+  it("rewrites and bundles all three CSS sources", async () => {
+    expect(await project.read("dist/style.css")).toMatchInlineSnapshot(`
+      ".badge_e1025e732 {
+        border-radius: .25rem;
+        padding: .25rem .5rem;
+      }
+      .banner_e88952290 {
+        border: 1px solid;
+      }
+      .chip_ec34dd962 {
+        display: inline-flex;
+      }
+      "
+    `);
+  });
+
+  it("emits declarations untouched by scoping", async () => {
+    let declarations = await project.read("dist/index.d.ts");
+
+    expect(declarations).toContain("declare const Badge: TOC<BadgeSignature>");
+    expect(declarations).not.toContain("badge_");
+  });
+});

package/test/test-helpers.ts

@@ -1,18 +1,19 @@
 import { execa } from "execa";
-import { join } from "node:path";
+import { join, relative, sep } from "node:path";
 import { styleText } from "node:util";
 import { Readable, Writable } from "node:stream";
-import { mkdtemp, readFile, writeFile } from "node:fs/promises";
+import { mkdtemp, readdir } from "node:fs/promises";
 import { tmpdir } from "node:os";
 import { generateProject, Project } from "ember.nvp";
 import { discoverLayers } from "#layers";
-import type { DiscoveredLayer } from "#types";
+import type { DiscoveredLayer, ProjectType } from "#types";
 import { expect } from "vitest";
 
 const minimalApp = "minimal-app";
 const minimalAddon = "minimal-library";
+const minimalExtension = "minimal-extension";
 
-export const bases = [minimalApp, minimalAddon];
+export const bases = [minimalApp, minimalAddon, minimalExtension];
 
 export const layers = await discoverLayers();
 
@@ -67,31 +68,6 @@ export async function mktemp(name = "ember.nvp_test-") {
   return await mkdtemp(join(tmpdir(), `${name}-`));
 }
 
-/**
- * Temporary: `rolldown-plugin-dts` (used by tsdown for `.d.ts` generation)
- * imports `walk` from `yuku-parser`, but yuku-parser >= 0.6.6 moved `walk` to
- * `yuku-ast`. Its dependency range still floats to the broken versions, so a
- * fresh install of a generated library crashes when tsdown builds.
- *
- * The yuku toolchain publishes in lockstep on a shared `@yuku-toolchain/types`,
- * so `yuku-parser` and `yuku-codegen` must be pinned together (pinning only one
- * splits the toolchain and the dts/publint pipeline silently bails). Pin the
- * last working set before install -- here in the test harness only, so the
- * generated blueprint stays override-free. Remove once the plugin is fixed:
- * https://github.com/sxzz/rolldown-plugin-dts/issues/277
- */
-export async function pinYukuParser(project: Project): Promise<void> {
-  const manifestPath = join(project.directory, "package.json");
-  const manifest = JSON.parse(await readFile(manifestPath, "utf-8"));
-
-  manifest.pnpm ??= {};
-  manifest.pnpm.overrides ??= {};
-  manifest.pnpm.overrides["yuku-parser"] = "0.6.5";
-  manifest.pnpm.overrides["yuku-codegen"] = "0.6.5";
-
-  await writeFile(manifestPath, JSON.stringify(manifest, null, 2));
-}
-
 export async function reapply(project: Project, layers: string[]) {
   return await generate({
     directory: project.directory,
@@ -112,7 +88,7 @@ export async function generate({
   directory?: string;
   layers?: string[];
   name?: string;
-  type?: "app" | "library";
+  type?: ProjectType;
   packageManager?: "pnpm" | "npm";
 }): Promise<Project> {
   const tempDir = directory ?? (await mktemp(name));
@@ -211,3 +187,22 @@ export async function expectIsSetup(project: Project, layer: DiscoveredLayer) {
 
   expect(result, `${layer.name} is setup`).toBe(true);
 }
+
+/**
+ * List every file under `directory` (recursively) as sorted paths relative
+ * to `directory`. `node_modules` is always excluded; pass
+ * `{ includeDist: false }` to also exclude the `dist/` build output.
+ */
+export async function listFiles(
+  directory: string,
+  { includeDist = true }: { includeDist?: boolean } = {},
+): Promise<string[]> {
+  const entries = await readdir(directory, { withFileTypes: true, recursive: true });
+
+  return entries
+    .filter((entry) => entry.isFile())
+    .map((entry) => relative(directory, join(entry.parentPath, entry.name)))
+    .filter((path) => !path.split(sep).includes("node_modules"))
+    .filter((path) => includeDist || !path.startsWith(`dist${sep}`))
+    .sort();
+}

package/vitest.config.js

@@ -4,6 +4,6 @@ export default defineConfig({
   test: {
     testTimeout: 60_000,
     hookTimeout: 60_000,
-    include: ["test/**/*.test.ts", "src/**/*.test.ts"],
+    include: ["test/**/*.test.ts", "src/**/*.test.ts", "packages/*/src/**/*.test.ts"],
   },
 });