ember.nvp 1.6.0 → 1.7.1

package/test/ember.nvp/base-custom-element.test.ts

@@ -0,0 +1,440 @@
+import { describe, it, beforeAll, afterAll, expect } from "vitest";
+import { generate, listFiles } from "#test-helpers";
+import { tagNameFor } from "#bases/minimal-custom-element";
+import { execa } from "execa";
+import { mkdir, rm, writeFile } from "node:fs/promises";
+import { dirname, join } from "node:path";
+
+import type { Project } from "ember.nvp";
+
+/**
+ * The minimal-custom-element base ships a working pattern:
+ * a counter component wrapped in a custom element.
+ *
+ * So unlike the library base, there is no example source to write in.
+ * These tests:
+ * - build the generated project as-is
+ * - run the element in a real browser, through the vitest layer
+ *   (from source, and from the built dist)
+ */
+
+async function install(project: Project) {
+  let result = await execa("pnpm install", { cwd: project.directory, shell: true });
+  expect(result.exitCode).toBe(0);
+}
+
+async function build(project: Project) {
+  let result = await execa("pnpm build", { cwd: project.directory, shell: true });
+  expect(result.exitCode).toBe(0);
+}
+
+async function emit(project: Project, files: Record<string, string>) {
+  for (let [path, contents] of Object.entries(files)) {
+    let filePath = join(project.directory, path);
+
+    await mkdir(dirname(filePath), { recursive: true });
+    await writeFile(filePath, contents);
+  }
+}
+
+/**
+ * The shared chunk carries a content hash,
+ * which would change with every dependency bump.
+ *
+ * Stable names only.
+ */
+async function listDist(project: Project) {
+  let files = await listFiles(join(project.directory, "dist"));
+
+  return files.map((file) => file.replace(/^src-[\w-]+\.js/, "src-[hash].js"));
+}
+
+/**
+ * The bundled chunk's own imports are hoisted above its first region marker.
+ *
+ * ember-source's doc comments below it also start lines with `import`,
+ * so only that head is inspected.
+ */
+async function chunkImports(project: Project) {
+  let files = await listFiles(join(project.directory, "dist"));
+  let chunk = files.find((file) => /^src-[\w-]+\.js$/.test(file));
+
+  expect(chunk).toBeDefined();
+
+  let code = (await project.read(`dist/${chunk}`)) ?? "";
+  let head = code.split("//#region")[0] ?? "";
+
+  return head.match(/^import .*$/gm) ?? [];
+}
+
+/**
+ * Drives the generated element the way a consumer would:
+ * - import the register entry
+ * - put the tag on the page
+ * - click
+ * - change attributes
+ *
+ * `from` is the module that provides the element:
+ * - `src`: the source
+ * - `dist`: the self-contained output, after a build
+ */
+function elementTests(ext: "ts" | "js", tagName: string, from: "src" | "dist" = "src") {
+  let register = from === "src" ? `../src/register.${ext}` : "../dist/register.js";
+
+  return {
+    [`tests/${from}-element-test.${ext}`]: `import { describe, test, expect, afterEach } from "vitest";
+import { renderSettled } from "@ember/renderer";
+
+import "${register}";
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function mount(attributes${ext === "ts" ? ": Record<string, string>" : ""} = {}) {
+  let element = document.createElement("${tagName}");
+
+  for (let [name, value] of Object.entries(attributes)) {
+    element.setAttribute(name, value);
+  }
+
+  document.body.appendChild(element);
+
+  return element;
+}
+
+describe("<${tagName}>", () => {
+  test("renders the counter with default args", async () => {
+    let element = mount();
+
+    await renderSettled();
+
+    expect(element.querySelector(".label")?.textContent).toBe("Count");
+    expect(element.querySelector("output")?.textContent).toBe("0");
+    expect(element.querySelector("button")?.textContent).toBe("+1");
+  });
+
+  test("counts clicks", async () => {
+    let element = mount();
+
+    await renderSettled();
+
+    element.querySelector("button")?.click();
+    await renderSettled();
+    element.querySelector("button")?.click();
+    await renderSettled();
+
+    expect(element.querySelector("output")?.textContent).toBe("2");
+  });
+
+  test("passes initial attributes as args", async () => {
+    let element = mount({ label: "Clicks", step: "5" });
+
+    await renderSettled();
+
+    expect(element.querySelector(".label")?.textContent).toBe("Clicks");
+    expect(element.querySelector("button")?.textContent).toBe("+5");
+
+    element.querySelector("button")?.click();
+    await renderSettled();
+
+    expect(element.querySelector("output")?.textContent).toBe("5");
+  });
+
+  test("re-renders when attributes change", async () => {
+    let element = mount();
+
+    await renderSettled();
+
+    element.setAttribute("label", "Taps");
+    element.setAttribute("step", "3");
+    await renderSettled();
+
+    expect(element.querySelector(".label")?.textContent).toBe("Taps");
+    expect(element.querySelector("button")?.textContent).toBe("+3");
+
+    element.querySelector("button")?.click();
+    await renderSettled();
+
+    expect(element.querySelector("output")?.textContent).toBe("3");
+  });
+
+  test("renders again after being moved", async () => {
+    let element = mount();
+
+    await renderSettled();
+
+    element.querySelector("button")?.click();
+    await renderSettled();
+
+    element.remove();
+    document.body.appendChild(element);
+    await renderSettled();
+
+    expect(element.querySelector("output")?.textContent).toBe("0");
+  });
+});
+`,
+  };
+}
+
+describe("base: minimal-custom-element", () => {
+  const dirs: string[] = [];
+
+  afterAll(async () => {
+    if (process.env.CI) return;
+
+    for (const dir of dirs) {
+      await rm(dir, { recursive: true, force: true, maxRetries: 3, retryDelay: 100 });
+    }
+  });
+
+  describe("tag name", () => {
+    it("is the package name", () => {
+      expect(tagNameFor("my-counter")).toBe("my-counter");
+    });
+
+    it("drops the scope", () => {
+      expect(tagNameFor("@acme/my-counter")).toBe("my-counter");
+    });
+
+    it("gets a suffix when the name has no hyphen", () => {
+      expect(tagNameFor("counter")).toBe("counter-element");
+      expect(tagNameFor("@acme/counter")).toBe("counter-element");
+    });
+  });
+
+  describe("JavaScript", () => {
+    let project: Project;
+
+    beforeAll(async () => {
+      project = await generate({ type: "custom-element", name: "my-counter", layers: [] });
+      dirs.push(project.directory);
+    });
+
+    it("generates the expected files", async () => {
+      expect(await listFiles(project.directory)).toMatchInlineSnapshot(`
+        [
+          ".gitignore",
+          "README.md",
+          "package.json",
+          "src/components/counter.gjs",
+          "src/element.js",
+          "src/index.js",
+          "src/register.js",
+          "tsdown.config.js",
+        ]
+      `);
+    });
+
+    it("registers the tag under the project name", async () => {
+      expect(await project.read("src/register.js")).toMatchInlineSnapshot(`
+        "import { CounterElement } from "./index.js";
+        if (!customElements.get('my-counter')) {
+          customElements.define('my-counter', CounterElement);
+        }"
+      `);
+      expect(await project.read("README.md")).toContain("<my-counter label=");
+    });
+
+    it("exports the element and the component", async () => {
+      expect(await project.read("src/index.js")).toMatchInlineSnapshot(`
+        "export { CounterElement } from "./element.js";
+        export { default as Counter } from "./components/counter.gjs";"
+      `);
+    });
+
+    it("is publishable", async () => {
+      let manifest = JSON.parse((await project.read("package.json"))!);
+
+      expect(manifest).not.toHaveProperty("private");
+      expect(manifest.exports["./register"]).toEqual({ default: "./dist/register.js" });
+    });
+
+    it("has no TypeScript leftovers", async () => {
+      let manifest = JSON.parse((await project.read("package.json"))!);
+
+      expect(manifest.devDependencies).not.toHaveProperty("typescript");
+      expect(manifest.devDependencies).not.toHaveProperty("@ember/library-tsconfig");
+      expect(JSON.stringify(manifest.exports)).not.toContain("types");
+
+      expect(await project.read("tsdown.config.js")).toMatchInlineSnapshot(`
+        "import { defineConfig } from "tsdown";
+        import { ember } from "@nullvoxpopuli/ember-rolldown";
+
+        export default defineConfig({
+          entry: ["./src/index.js", "./src/register.js"],
+          dts: false,
+          plugins: [ember({ bundle: true })],
+        });
+        "
+      `);
+    });
+
+    it("builds a self-contained package", async () => {
+      await install(project);
+      await build(project);
+
+      expect(await listDist(project)).toMatchInlineSnapshot(`
+        [
+          "index.js",
+          "register.js",
+          "register.js.map",
+          "src-[hash].js",
+          "src-[hash].js.map",
+        ]
+      `);
+
+      let register = await project.read("dist/register.js");
+
+      expect(register).toContain('customElements.define("my-counter"');
+      // Both entries share one chunk holding the element, the component,
+      // and ember itself
+      expect(register).toMatch(/from "\.\/src-[\w-]+\.js"/);
+      expect(await project.read("dist/index.js")).toMatch(/from "\.\/src-[\w-]+\.js"/);
+
+      // Nothing is left for a consumer to resolve
+      expect(await chunkImports(project)).toEqual([]);
+
+      let files = await listFiles(join(project.directory, "dist"));
+      let chunk = (await project.read(`dist/${files.find((file) => file.startsWith("src-"))}`))!;
+
+      // The template ships compiled for the bundled ember-source, so the
+      // page needs no template compiler
+      expect(chunk).not.toContain("precompileTemplate(");
+      expect(chunk).toContain('"block":');
+      expect(chunk).toContain('observedAttributes = ["label", "step"]');
+      expect(chunk).toContain("renderComponent");
+    });
+  });
+
+  describe("TypeScript", () => {
+    let project: Project;
+
+    beforeAll(async () => {
+      project = await generate({ type: "custom-element", name: "counter", layers: ["typescript"] });
+      dirs.push(project.directory);
+    });
+
+    it("generates the expected files", async () => {
+      expect(await listFiles(project.directory)).toMatchInlineSnapshot(`
+        [
+          ".gitignore",
+          "README.md",
+          "package.json",
+          "src/components/counter.gts",
+          "src/element.ts",
+          "src/index.ts",
+          "src/register.ts",
+          "tsconfig.json",
+          "tsdown.config.js",
+        ]
+      `);
+    });
+
+    it("registers the tag with a suffix when the name has no hyphen", async () => {
+      expect(await project.read("src/register.ts")).toMatchInlineSnapshot(`
+        "import { CounterElement } from "./index.ts";
+
+        if (!customElements.get("counter-element")) {
+          customElements.define("counter-element", CounterElement);
+        }
+        "
+      `);
+    });
+
+    it("type checks", async () => {
+      await install(project);
+
+      let types = await execa("pnpm lint:types", { cwd: project.directory, shell: true });
+      expect(types.exitCode).toBe(0);
+    });
+
+    it("builds, including declarations", async () => {
+      await build(project);
+
+      expect(await listDist(project)).toMatchInlineSnapshot(`
+        [
+          "index.d.ts",
+          "index.d.ts.map",
+          "index.js",
+          "register.d.ts",
+          "register.js",
+          "register.js.map",
+          "src-[hash].js",
+          "src-[hash].js.map",
+        ]
+      `);
+
+      expect(await chunkImports(project)).toEqual([]);
+
+      let declarations = (await project.read("dist/index.d.ts"))!;
+
+      expect(declarations).toContain("declare class CounterElement extends HTMLElement");
+      // The component's base class is bundled in, like the runtime.
+      // (ember-source's own types are ambient, so those stay by name)
+      expect(declarations).toContain("declare class Component<");
+      expect(declarations).not.toContain('from "@glimmer/component"');
+      expect(await project.read("dist/register.d.ts")).toMatchInlineSnapshot(`"export {}"`);
+    });
+  });
+
+  describe("in a browser (vitest layer)", () => {
+    describe("TypeScript", () => {
+      let project: Project;
+
+      beforeAll(async () => {
+        project = await generate({
+          type: "custom-element",
+          name: "my-counter",
+          layers: ["typescript", "vitest"],
+        });
+        dirs.push(project.directory);
+      });
+
+      it("renders, counts, and reacts to attributes", { timeout: 300_000 }, async () => {
+        await emit(project, elementTests("ts", "my-counter"));
+        await install(project);
+
+        let test = await execa("pnpm test", { cwd: project.directory, shell: true });
+        expect(test.exitCode).toBe(0);
+      });
+
+      it(
+        "runs from the built package, with no ember on the page",
+        { timeout: 300_000 },
+        async () => {
+          await build(project);
+          // Only the dist spec: the vitest run must not also load the source
+          // copy, or the tag would already be defined by whichever wins
+          await rm(join(project.directory, "tests"), { recursive: true, force: true });
+          await emit(project, elementTests("ts", "my-counter", "dist"));
+
+          let test = await execa("pnpm test", { cwd: project.directory, shell: true });
+          expect(test.exitCode).toBe(0);
+        },
+      );
+    });
+
+    describe("JavaScript", () => {
+      let project: Project;
+
+      beforeAll(async () => {
+        project = await generate({
+          type: "custom-element",
+          name: "my-counter",
+          layers: ["vitest"],
+        });
+        dirs.push(project.directory);
+      });
+
+      it("renders, counts, and reacts to attributes", { timeout: 300_000 }, async () => {
+        await emit(project, elementTests("js", "my-counter"));
+        await install(project);
+
+        let test = await execa("pnpm test", { cwd: project.directory, shell: true });
+        expect(test.exitCode).toBe(0);
+      });
+    });
+  });
+});

package/test/ember.nvp/base-library.test.ts

@@ -8,10 +8,12 @@ import { join } from "node:path";
 import type { Project } from "ember.nvp";
 
 /**
- * The minimal-library base has to produce a *buildable* library: these tests
- * generate both flavors (JavaScript and TypeScript), snapshot the interesting
- * generated files, and run the real `pnpm build` (tsdown + rolldown) against
- * them.
+ * The minimal-library base has to produce a *buildable* library.
+ *
+ * These tests:
+ * - generate both flavors (JavaScript and TypeScript)
+ * - snapshot the interesting generated files
+ * - run the real `pnpm build` (tsdown + rolldown) against them
  */
 
 async function installAndBuild(project: Project) {

package/test/ember.nvp/generator-replace-or-update.test.ts

@@ -7,10 +7,12 @@ import { join } from "node:path";
 
 /**
  * The replace-or-update question only matters when a project already exists
- * at the target path. These tests generate a project, assert the baseline
- * state, then regenerate over it the way the CLI does once the user has
- * answered the question, and assert the resulting project output is correct
- * for each answer.
+ * at the target path.
+ *
+ * These tests:
+ * - generate a project and assert the baseline state
+ * - regenerate over it, the way the CLI does once the user has answered
+ * - assert the resulting project is correct for each answer
  */
 describe("generating over an existing project", () => {
   const prettier = layers.find((layer) => layer.name === "prettier")!;

package/test/ember.nvp/inspector-support.test.ts

@@ -3,9 +3,10 @@ import { describe, it, expect } from "vitest";
 import { hasInspectorSupport, wireInspectorSupport } from "#utils/inspector-support.js";
 
 /**
- * The Application definition is found structurally, so every shape an app
- * author may have refactored their app file into gets wired the same way
- * the freshly generated shape does.
+ * The Application definition is found structurally.
+ *
+ * So every shape an app author has refactored their app file into
+ * gets wired the same way the freshly generated shape does.
  */
 describe("wireInspectorSupport", () => {
   it("wires the generated shape (export default class extends Application)", () => {

package/test/ember.nvp/layer-inspector-support.test.ts

@@ -43,11 +43,10 @@ describe("layer: inspector-support", () => {
       "/**
        * Looking for services that come from addons?
        *
+       * App-tree merging from libraries is not supported.
        * See: https://github.com/embroider-build/embroider/issues/2659
        *
-       * We currently don't support app-tree merging from libraries.
-       *
-       * For services, I highly recommend looking in to either of
+       * For services, look in to either of:
        * - https://github.com/chancancode/ember-polaris-service-
        * - https://ember-primitives.pages.dev/6-utils/createService.md
        *   - https://ember-primitives.pages.dev/6-utils/createAsyncService.md

package/test/ember.nvp/layer-publish-checks.test.ts

@@ -6,9 +6,8 @@ import { rm } from "node:fs/promises";
 import type { Project } from "ember.nvp";
 
 /**
- * publint and are-the-types-wrong run inside the library's own build
- * (tsdown), so the real assertion is their report lines in `pnpm build`
- * output.
+ * publint and are-the-types-wrong run inside the library's own build (tsdown),
+ * so the real assertion is their report lines in `pnpm build` output.
  */
 
 describe("layers: publint + are-the-types-wrong", () => {

package/test/ember.nvp/layer-qunit.test.ts

@@ -16,8 +16,8 @@ async function installAndTest(project: Project) {
 }
 
 /**
- * The layer ships testing infrastructure only; the tests exercising the
- * base's example exports are generated here, in both flavors.
+ * The layer ships testing infrastructure only.
+ * The tests exercising the base's example exports are generated here, in both flavors.
  */
 const exampleTests = {
   typescript: {

package/test/ember.nvp/layer-readme.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeAll, afterAll } from "vitest";
-import { generate } from "#test-helpers";
+import { generate, mktemp } from "#test-helpers";
 import { rm } from "node:fs/promises";
 import type { Project } from "ember.nvp";
 
@@ -168,13 +168,13 @@ describe("layer: readme", () => {
 
         ### Building
 
-        To build the library:
+        To build the extension:
 
         \`\`\`sh
         pnpm build
         \`\`\`
 
-        or
+        or, to rebuild on change:
 
         \`\`\`sh
         pnpm build:watch
@@ -192,4 +192,64 @@ describe("layer: readme", () => {
       `);
     });
   });
+
+  describe("Custom element project README generation", () => {
+    let project: Project;
+
+    beforeAll(async () => {
+      project = await generate({
+        directory: await mktemp("acme-counter"),
+        type: "custom-element",
+        name: "@acme/counter",
+        packageManager: "npm",
+        layers: ["readme"],
+      });
+      dirs.push(project.directory);
+    });
+
+    it("generates README.md with the registered tag name", async () => {
+      expect(await project.read("README.md")).toMatchInlineSnapshot(`
+        "# @acme/counter
+
+        An Ember component, packaged as a custom element, created with \`ember.nvp\`.
+        The built package contains ember, so the page that uses the element needs nothing else.
+
+        ## Usage
+
+        Import the \`register\` entry once. It defines the \`<counter-element>\` tag.
+
+        \`\`\`js
+        import "@acme/counter/register";
+        \`\`\`
+
+        \`\`\`html
+        <counter-element label="Clicks" step="2"></counter-element>
+        \`\`\`
+
+        To choose your own tag name, import the class and define it yourself:
+
+        \`\`\`js
+        import { CounterElement } from "@acme/counter";
+
+        customElements.define("my-counter", CounterElement);
+        \`\`\`
+
+        ## Getting Started
+
+        ### Prerequisites
+
+        - Node.js >= 24
+        - npm
+
+        ### Development & Building
+
+        To build the package:
+
+        \`\`\`sh
+        npm run build
+        \`\`\`
+        "
+      `);
+    });
+  });
 });

package/test/ember.nvp/layer-vitest.test.ts

@@ -9,9 +9,12 @@ import type { Project } from "ember.nvp";
 
 /**
  * The vitest layer ships infrastructure only (config, deps, scripts).
- * These tests generate projects with the layer, emit specs that exercise
- * each project's real exports, and run the real `pnpm test` (vitest in
- * headless-browser mode), asserting the specs genuinely run and pass.
+ *
+ * These tests:
+ * - generate projects with the layer
+ * - emit specs that exercise each project's real exports
+ * - run the real `pnpm test` (vitest in headless-browser mode),
+ *   and assert the specs run and pass
  */
 
 async function emit(project: Project, files: Record<string, string>) {
@@ -32,9 +35,11 @@ async function installAndTest(project: Project) {
 }
 
 /**
- * Specs against the library base's real exports, in the flavor matching
- * the generated project (these files are emitted by this test, not
- * shipped by the layer, so no automatic conversion applies).
+ * Specs against the library base's real exports,
+ * in the flavor matching the generated project.
+ *
+ * These files are emitted by this test, not shipped by the layer,
+ * so no automatic conversion applies.
  */
 function libraryTests(ext: "ts" | "js") {
   return {
@@ -82,9 +87,11 @@ describe("add", () => {
 }
 
 /**
- * Specs against the app base's real modules: boots an app made from the
- * app's own router class (pointed at a test-friendly location) and
- * application template, and visits its application route.
+ * Specs against the app base's real modules.
+ *
+ * Boots an app made from the app's own router class
+ * (pointed at a test-friendly location) and application template,
+ * then visits its application route.
  */
 function appTests(ext: "ts" | "js") {
   return {

package/test/ember.nvp/layers-load.test.ts

@@ -0,0 +1,26 @@
+import { test, expect } from "vitest";
+import { execa } from "execa";
+import { join } from "node:path";
+
+const root = join(import.meta.dirname, "../..");
+
+/**
+ * vitest runs modules through its own loader,
+ * so it does not see import cycles the way Node does.
+ *
+ * `#layers` awaits a dynamic import of each layer at the top level.
+ * If a layer imports a module that imports `#layers` back,
+ * the top-level await never settles and Node exits with code 13.
+ *
+ * Node's loader is the only thing that catches that,
+ * so load the module in a child process.
+ */
+test("the layers module loads in a plain node process", async () => {
+  const result = await execa(process.execPath, ["src/layers/index.js"], {
+    cwd: root,
+    reject: false,
+  });
+
+  expect(result.stderr).not.toContain("unsettled top-level await");
+  expect(result.exitCode).toBe(0);
+});