ember.nvp 1.9.0 → 1.10.0

package/src/utils/typescript.js

@@ -0,0 +1,147 @@
+import { packageJson } from "ember-apply";
+import { join } from "node:path";
+import { cp } from "node:fs/promises";
+import { existsSync } from "node:fs";
+import { hasConfiguredTSBabel, prependPlugin } from "#utils/babel.js";
+import { getLatest } from "#utils/npm.js";
+
+const bases = join(import.meta.dirname, "../bases");
+const appBase = join(bases, "minimal-app/files");
+const extensionBase = join(bases, "minimal-extension/files");
+const libraryBase = join(bases, "minimal-library/files");
+const customElementBase = join(bases, "minimal-custom-element/files");
+
+/**
+ * TypeScript 7 has no JavaScript API.
+ *
+ * typescript-eslint imports `typescript`, so it keeps using TypeScript 6.
+ *
+ * `@typescript/typescript6` is TypeScript 6 with a `tsc6` bin,
+ * so `tsc` stays TypeScript 7.
+ */
+export const TYPESCRIPT_6 = "npm:@typescript/typescript6@^6.0.2";
+
+/**
+ * Content mappers (for .gts and .gjs) need 7.1 or newer.
+ */
+export const TYPESCRIPT_7 = "npm:typescript@^7.1.0-0";
+
+/**
+ * @param {Record<string, any>} manifest
+ * @returns {boolean}
+ */
+export function hasTypeScript6(manifest) {
+  let spec = manifest.devDependencies?.typescript;
+
+  return typeof spec === "string" && spec.startsWith("npm:@typescript/typescript6@");
+}
+
+/**
+ * @param {import('#utils/project.js').Project} project
+ * @returns {boolean}
+ */
+export function wantsTypeScript7(project) {
+  return project.wantsLayer("typescript") && project.getLayerOptions("typescript").version === "7";
+}
+
+/**
+ * Reads the manifest instead of asking the typescript layer.
+ * That layer's isSetup asks about eslint, and the eslint layers ask about TypeScript 7.
+ *
+ * @param {import('#utils/project.js').Project} project
+ * @param {Record<string, any>} manifest
+ * @returns {boolean}
+ */
+export function usesTypeScript7(project, manifest) {
+  return wantsTypeScript7(project) || Boolean(manifest.devDependencies?.["@typescript/native"]);
+}
+
+/**
+ * @param {import('#utils/project.js').Project} project
+ * @param {Record<string, any>} manifest
+ * @returns {boolean}
+ */
+export function needsTypeScript6(project, manifest) {
+  return project.wantsLayer("eslint") || Boolean(manifest.devDependencies?.eslint);
+}
+
+/**
+ * In a TypeScript 7 project:
+ * - keeps `@typescript/typescript6`
+ * - adds it when eslint needs TypeScript 6
+ * - removes any other `typescript`, because it would be a second `tsc`
+ *
+ * @param {import('#utils/project.js').Project} project
+ */
+export async function syncTypeScript6(project) {
+  let manifest = await packageJson.read(project.directory);
+
+  if (!usesTypeScript7(project, manifest)) return;
+  if (hasTypeScript6(manifest)) return;
+
+  if (needsTypeScript6(project, manifest)) {
+    await packageJson.addDevDependencies(
+      await getLatest({ typescript: TYPESCRIPT_6 }),
+      project.directory,
+    );
+    return;
+  }
+
+  await packageJson.removeDevDependencies(["typescript"], project.directory);
+}
+
+/**
+ * Copies the base's tsconfig, unless the project already has one.
+ *
+ * @param {import('#utils/project.js').Project} project
+ */
+export async function addTSConfig(project) {
+  if (existsSync(project.path("tsconfig.json"))) {
+    return;
+  }
+
+  if (project.type === "app") {
+    await cp(join(appBase, "tsconfig.json"), project.path("tsconfig.json"));
+    return;
+  }
+
+  if (project.type === "extension") {
+    await cp(join(extensionBase, "tsconfig.json"), project.path("tsconfig.json"));
+    return;
+  }
+
+  if (project.type === "library") {
+    await cp(join(libraryBase, "tsconfig.json"), project.path("tsconfig.json"));
+    return;
+  }
+
+  if (project.type === "custom-element") {
+    await cp(join(customElementBase, "tsconfig.json"), project.path("tsconfig.json"));
+  }
+}
+
+/**
+ * @param {import('#utils/project.js').Project} project
+ */
+export async function updateBabelConfig(project) {
+  if (!project.hasFile("babel.config.js")) {
+    // Nothing to patch (libraries): ember() strips types.
+    return;
+  }
+
+  if (await hasConfiguredTSBabel(project)) {
+    return;
+  }
+
+  await prependPlugin(
+    project,
+    `[
+      "@babel/plugin-transform-typescript",
+      {
+        allExtensions: true,
+        onlyRemoveTypeImports: true,
+        allowDeclareFields: true,
+      },
+    ]`,
+  );
+}

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

@@ -204,6 +204,17 @@ describe("base: minimal-library", () => {
         //# sourceMappingURL=index.d.ts.map"
       `);
 
+      // A consumer's "go to definition" opens these, from the published src/
+      let declarationMap = JSON.parse((await project.read("dist/index.d.ts.map"))!);
+
+      expect(declarationMap.sources).toMatchInlineSnapshot(`
+        [
+          "../src/components/badge.gts",
+          "../src/components/greeting.gts",
+          "../src/utils/math.ts",
+        ]
+      `);
+
       expect(await listFiles(join(project.directory, "dist"))).toMatchInlineSnapshot(`
         [
           "index.d.ts",

package/test/ember.nvp/cli.test.ts

@@ -1,5 +1,9 @@
 import { test, expect as hardExpect } from "vitest";
-import { cli } from "#test-helpers";
+import { cli, mktemp } from "#test-helpers";
+import { packageJson } from "ember-apply";
+import { existsSync } from "node:fs";
+import { rm } from "node:fs/promises";
+import { join } from "node:path";
 import { stripVTControlCharacters } from "node:util";
 
 const expect = hardExpect.soft;
@@ -44,6 +48,13 @@ const BASIC_HELP_OUTPUT = `
 
           --write <string>
           Confirm writing changes to disk [choices: "yes", "no"]
+
+    Layer Options:
+          --eslint-bundled.preset <string>
+          Which ESLint config? [choices: "ember", "nvp"] [default: "ember"]
+
+          --typescript.version <string>
+          Which TypeScript version? [choices: "7", "6"] [default: "7"]
     "
   `;
 
@@ -66,3 +77,77 @@ test("cli -h alias works", async () => {
   const outStr = stripVTControlCharacters(res.stdout);
   expect(outStr).toMatchInlineSnapshot(BASIC_HELP_OUTPUT);
 });
+
+test("cli prints a message, not a stack trace, for an unknown flag", async () => {
+  let { execaPromise } = cli(["--bogus"]);
+
+  const res = await execaPromise.catch((error) => error);
+
+  expect(res.exitCode).toBe(1);
+  const outStr = stripVTControlCharacters(`${res.stdout}\n${res.stderr}`);
+  expect(outStr).toContain("Unknown option '--bogus'");
+  expect(outStr).not.toContain("TypeError");
+});
+
+/**
+ * Every question has a flag, so nothing prompts.
+ * The path does not exist yet, so there is no replace-or-update question either.
+ */
+async function eslintProjectArgs(preset: string) {
+  let parent = await mktemp("cli-layer-options");
+  let path = join(parent, "my-app");
+
+  return {
+    parent,
+    path,
+    args: [
+      "--name",
+      "my-app",
+      "--path",
+      path,
+      "--type",
+      "app",
+      "--layers",
+      "eslint-bundled",
+      "--packageManager",
+      "pnpm",
+      "--confirm",
+      "yes",
+      "--eslint-bundled.preset",
+      preset,
+    ],
+  };
+}
+
+test("cli applies a layer option flag", async () => {
+  let { parent, path, args } = await eslintProjectArgs("nvp");
+
+  try {
+    let res = await cli(args).execaPromise;
+
+    expect(res.exitCode).toBe(0);
+
+    let manifest = await packageJson.read(path);
+
+    expect(manifest.devDependencies).toHaveProperty("@nullvoxpopuli/eslint-configs");
+    expect(manifest.devDependencies).not.toHaveProperty("ember-eslint");
+  } finally {
+    await rm(parent, { recursive: true, force: true });
+  }
+});
+
+test("cli exits on an invalid layer option flag, before writing anything", async () => {
+  let { parent, path, args } = await eslintProjectArgs("bogus");
+
+  try {
+    const res = await cli(args).execaPromise.catch((error) => error);
+
+    expect(res.exitCode).toBe(1);
+    expect(stripVTControlCharacters(res.stdout)).toContain(
+      "Invalid CLI argument '--eslint-bundled.preset': Invalid option 'bogus'. Must be one of: ember, nvp",
+    );
+    expect(existsSync(path)).toBe(false);
+  } finally {
+    await rm(parent, { recursive: true, force: true });
+  }
+});

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

@@ -0,0 +1,248 @@
+import { describe, it, expect, vi } from "vitest";
+import { stripVTControlCharacters } from "node:util";
+import { Project } from "#utils/project.js";
+import { coreOptions, parseCliArgs, parseLayerOptionsFromParsedArgs } from "#args";
+import { printHelp } from "../../src/cli/help.js";
+import type { DiscoveredLayer } from "#types";
+
+describe("Layer Options Feature", () => {
+  const fakeKitchenSinkLayer: DiscoveredLayer = {
+    name: "fake-kitchen-sink",
+    label: "Fake Kitchen Sink Layer",
+    hint: "demonstrates options",
+    options: {
+      unitCount: {
+        type: "number",
+        prompt: "How many units do you want?",
+        default: 7,
+        validate: (val: number) => (val > 0 ? undefined : "Must be greater than 0"),
+      },
+      customTitle: {
+        type: "text",
+        prompt: "Enter a custom title",
+        default: "My Kitchen Sink",
+        validate: (input: string) =>
+          input.trim().length > 0 ? undefined : "Title cannot be empty",
+      },
+      flavor: {
+        type: "select",
+        prompt: "Which kitchen sink flavor do you prefer?",
+        default: "standard",
+        options: [
+          { label: "Standard", value: "standard", hint: "Regular kitchen sink setup" },
+          { label: "Deluxe", value: "deluxe", hint: "Includes extra features" },
+        ],
+      },
+      enableLogging: {
+        type: "confirm",
+        prompt: "Enable detailed sink logging?",
+        default: true,
+      },
+      extras: {
+        type: "multiselect",
+        prompt: "Select optional kitchen sink extras",
+        default: ["soap-dispenser"],
+        options: [
+          { label: "Soap Dispenser", value: "soap-dispenser", hint: "Built-in pump" },
+          { label: "Garbage Disposal", value: "garbage-disposal", hint: "Continuous feed" },
+        ],
+        validate: (val: string[]) => (val.length > 0 ? undefined : "Select at least one extra"),
+      },
+    },
+    async run(_project, _options = {}) {
+      // noop
+    },
+    async isSetup(_project?: Project, explain?: boolean): Promise<any> {
+      return explain ? { isSetup: true, reasons: [] } : true;
+    },
+  };
+
+  describe("Project.prototype.getLayerOptions", () => {
+    it("returns default values when no user options are provided", () => {
+      const project = new Project("/tmp/test", {
+        name: "my-app",
+        type: "app",
+        path: "/tmp/test",
+        packageManager: "pnpm",
+        layers: [fakeKitchenSinkLayer],
+      });
+
+      expect(project.getLayerOptions("fake-kitchen-sink")).toEqual({
+        unitCount: 7,
+        customTitle: "My Kitchen Sink",
+        flavor: "standard",
+        enableLogging: true,
+        extras: ["soap-dispenser"],
+      });
+    });
+
+    it("overrides default values with user-supplied options", () => {
+      const project = new Project("/tmp/test", {
+        name: "my-app",
+        type: "app",
+        path: "/tmp/test",
+        packageManager: "pnpm",
+        layers: [fakeKitchenSinkLayer],
+        options: {
+          "fake-kitchen-sink": {
+            unitCount: 12,
+            customTitle: "Custom Sink",
+            flavor: "deluxe",
+            enableLogging: false,
+            extras: ["garbage-disposal"],
+          },
+        },
+      });
+
+      expect(project.getLayerOptions("fake-kitchen-sink")).toEqual({
+        unitCount: 12,
+        customTitle: "Custom Sink",
+        flavor: "deluxe",
+        enableLogging: false,
+        extras: ["garbage-disposal"],
+      });
+    });
+
+    it("returns empty object for layers without options or schemas", () => {
+      const plainLayer: DiscoveredLayer = {
+        name: "plain",
+        label: "Plain Layer",
+        async run() {},
+        async isSetup(_project?: Project, explain?: boolean): Promise<any> {
+          return explain ? { isSetup: true, reasons: [] } : true;
+        },
+      };
+
+      const project = new Project("/tmp/test", {
+        name: "my-app",
+        type: "app",
+        path: "/tmp/test",
+        packageManager: "pnpm",
+        layers: [plainLayer],
+      });
+
+      expect(project.getLayerOptions("plain")).toEqual({});
+    });
+  });
+
+  describe("CLI flags", () => {
+    const layers = [fakeKitchenSinkLayer];
+
+    function parse(args: string[]) {
+      return parseLayerOptionsFromParsedArgs(layers, parseCliArgs(args, layers));
+    }
+
+    it("parses layer options for all option types", () => {
+      expect(
+        parse([
+          "--fake-kitchen-sink.unitCount=15",
+          "--fake-kitchen-sink.customTitle",
+          "CLI Title",
+          "--fake-kitchen-sink.flavor",
+          "deluxe",
+          "--no-fake-kitchen-sink.enableLogging",
+          "--fake-kitchen-sink.extras",
+          "soap-dispenser",
+          "--fake-kitchen-sink.extras",
+          "garbage-disposal",
+        ]),
+      ).toEqual({
+        "fake-kitchen-sink": {
+          unitCount: 15,
+          customTitle: "CLI Title",
+          flavor: "deluxe",
+          enableLogging: false,
+          extras: ["soap-dispenser", "garbage-disposal"],
+        },
+      });
+    });
+
+    it("turns a confirm option on without a value", () => {
+      expect(parse(["--fake-kitchen-sink.enableLogging"])).toEqual({
+        "fake-kitchen-sink": { enableLogging: true },
+      });
+    });
+
+    it("parses multiselect options supplied as comma-separated string", () => {
+      expect(parse(["--fake-kitchen-sink.extras", "soap-dispenser, garbage-disposal"])).toEqual({
+        "fake-kitchen-sink": {
+          extras: ["soap-dispenser", "garbage-disposal"],
+        },
+      });
+    });
+
+    it("leaves out options that were not passed", () => {
+      expect(parse(["--name", "my-app"])).toEqual({});
+    });
+
+    it("ignores flags for layers that were not selected", () => {
+      const values = parseCliArgs(["--fake-kitchen-sink.flavor", "deluxe"], layers);
+
+      expect(parseLayerOptionsFromParsedArgs([], values)).toEqual({});
+    });
+
+    it("throws when a confirm option is given a value", () => {
+      expect(() => parseCliArgs(["--fake-kitchen-sink.enableLogging=false"], layers)).toThrow(
+        "Option '--fake-kitchen-sink.enableLogging' does not take an argument",
+      );
+    });
+
+    it("throws on an unknown option", () => {
+      expect(() => parseCliArgs(["--fake-kitchen-sink.unitcount=3"], layers)).toThrow(
+        "Unknown option '--fake-kitchen-sink.unitcount'",
+      );
+    });
+
+    it.each([
+      ["a value that fails validate", "--fake-kitchen-sink.unitCount=-5"],
+      ["a number in hex", "--fake-kitchen-sink.unitCount=0x10"],
+      ["an unlisted select value", "--fake-kitchen-sink.flavor=ultra"],
+      ["an unlisted multiselect value", "--fake-kitchen-sink.extras=invalid-extra"],
+    ])("exits on %s", (_, arg) => {
+      const exitSpy = vi.spyOn(process, "exit").mockImplementation((() => {
+        throw new Error("process.exit called");
+      }) as any);
+
+      try {
+        expect(() => parse([arg])).toThrow("process.exit called");
+        expect(exitSpy).toHaveBeenCalledWith(1);
+      } finally {
+        exitSpy.mockRestore();
+      }
+    });
+  });
+
+  it("lists layer options in --help", () => {
+    const lines: string[] = [];
+    const logSpy = vi.spyOn(console, "log").mockImplementation((line: string) => {
+      lines.push(stripVTControlCharacters(line));
+    });
+
+    try {
+      printHelp(coreOptions, [fakeKitchenSinkLayer]);
+    } finally {
+      logSpy.mockRestore();
+    }
+
+    const output = lines.join("\n");
+
+    expect(output.slice(output.indexOf("Layer Options:"))).toMatchInlineSnapshot(`
+      "Layer Options:
+            --fake-kitchen-sink.unitCount <number>
+            How many units do you want? [default: 7]
+
+            --fake-kitchen-sink.customTitle <string>
+            Enter a custom title [default: "My Kitchen Sink"]
+
+            --fake-kitchen-sink.flavor <string>
+            Which kitchen sink flavor do you prefer? [choices: "standard", "deluxe"] [default: "standard"]
+
+            --[no-]fake-kitchen-sink.enableLogging <boolean>
+            Enable detailed sink logging? [default: true]
+
+            --fake-kitchen-sink.extras <string>
+            Select optional kitchen sink extras [choices: "soap-dispenser", "garbage-disposal"] [default: ["soap-dispenser"]]
+      "
+    `);
+  });
+});

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

@@ -71,9 +71,11 @@ describe("layer: readme", () => {
 
         ### TypeScript
 
-        This project uses TypeScript and Glint for static type checking.
+        This project uses TypeScript 7 and [ember-content-mapper](https://github.com/NullVoxPopuli/ember-content-mapper) for static type checking.
 
-        - \`pnpm lint:types\` - Typecheck code with Glint/TypeScript
+        - \`pnpm lint:types\` - Typecheck code with TypeScript
+        - Imports of \`.gts\` and \`.gjs\` modules must include the extension
+        - Editor setup: see [ember-content-mapper's editors section](https://github.com/NullVoxPopuli/ember-content-mapper#editors)
         "
       `);
     });