ember.nvp 0.1.0 → 0.2.0

package/src/layers/typescript/index.js

@@ -0,0 +1,145 @@
+import { js, 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 libraryBase = join(bases, "minimal-library/files");
+
+const deps = {
+  "@babel/plugin-transform-typescript": "^7.28.5",
+  "@ember/app-tsconfig": "^2.0.0",
+  "@glint/ember-tsc": "^1.0.8",
+  "@glint/template": "^1.7.3",
+  "@glint/tsserver-plugin": "^2.0.8",
+  typescript: "^5.9.3",
+};
+
+/**
+ * @type {import('#types').Layer}
+ */
+export default {
+  label: "TypeScript",
+
+  async run(project) {
+    /**
+     * if jsconfig exists, switch to tsconfig
+     */
+    /**
+     * if tsconfig exists,
+     */
+    await addTSConfig(project);
+    await updatePackageJson(project);
+    await updateBabelConfig(project);
+  },
+
+  /**
+   * @overload
+   * @param {import('#utils/project.js').Project} project
+   * @param {true} explain
+   * @returns {Promise<{ isSetup: boolean; reasons: string[] }>}
+   */
+  /**
+   * @overload
+   * @param {import('#utils/project.js').Project} project
+   * @param {boolean | undefined} [explain]
+   * @returns {Promise<boolean>}
+   */
+  async isSetup(project, explain) {
+    const reasons = [];
+
+    if (!project.hasFile("tsconfig.json")) {
+      if (!explain) return false;
+
+      reasons.push("tsconfig.json is missing");
+    }
+
+    if (!(await hasConfiguredTSBabel(project))) {
+      if (!explain) return false;
+
+      reasons.push(`babel.config is missing @babel/plugin-transform-typescript`);
+    }
+
+    let manifest = await packageJson.read(project.directory);
+
+    if (!manifest.scripts?.["lint:types"]) {
+      if (!explain) return false;
+
+      reasons.push(`package.json is missing the "lint:types" script`);
+    }
+
+    for (let dep of Object.keys(deps)) {
+      if (!manifest.devDependencies?.[dep]) {
+        if (!explain) return false;
+
+        reasons.push(`package.json is missing ${dep} in devDependencies`);
+      }
+    }
+
+    if (explain) {
+      return {
+        isSetup: reasons.length === 0,
+        reasons,
+      };
+    }
+
+    return reasons.length === 0;
+  },
+};
+
+/**
+ * @param {import('#utils/project.js').Project} project
+ */
+async function updatePackageJson(project) {
+  await packageJson.modify(async (json) => {
+    json.scripts ||= {};
+    json.devDependencies ||= {};
+
+    Object.assign(json.scripts, {
+      "lint:types": "ember-tsc --noEmit",
+    });
+    Object.assign(json.devDependencies, await getLatest(deps));
+  }, project.directory);
+}
+
+/**
+ * @param {import('#utils/project.js').Project} project
+ */
+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 === "library") {
+    await cp(join(libraryBase, "tsconfig.json"), project.path("tsconfig.json"));
+  }
+}
+
+/**
+ * @param {import('#utils/project.js').Project} project
+ */
+async function updateBabelConfig(project) {
+  if (await hasConfiguredTSBabel(project)) {
+    return;
+  }
+
+  await prependPlugin(
+    project,
+    `[
+      "@babel/plugin-transform-typescript",
+      {
+        allExtensions: true,
+        onlyRemoveTypeImports: true,
+        allowDeclareFields: true,
+      },
+    ]`,
+  );
+}

package/src/layers/vitest/files/vitest.config.mjs

@@ -7,11 +7,7 @@ export default defineConfig({
     ember(),
     babel({
       babelHelpers: "runtime",
-      extensions: extensions.flatMap((extension) => [
-        extension,
-        ".gts",
-        ".gjs",
-      ]),
+      extensions: extensions.flatMap((extension) => [extension, ".gts", ".gjs"]),
     }),
   ],
   test: {

package/src/layers/vitest/index.js

@@ -1,39 +1,31 @@
+import { getLatest } from "#utils/npm.js";
 import { packageJson, files } from "ember-apply";
-import { dirname, join } from "node:path";
-import { fileURLToPath } from "node:url";
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
+import { join } from "node:path";
 
 /**
- * Vitest Layer
- *
- * Adds Vitest testing support (modern, fast alternative to QUnit)
+ * @type {import('#types').Layer}
  */
 export default {
   label: "Vitest",
-  description: "Testing with Vitest (modern & fast)",
 
-  async run({ targetDir }) {
+  async run(project) {
     // Apply test files
-    await files.applyFolder(join(__dirname, "files"), targetDir);
-
-    // Add dependencies
-    await packageJson.addDependencies(
-      {
-        "@ember/test-helpers": "^4.0.4",
-      },
-      targetDir,
-    );
+    await files.applyFolder(join(import.meta.dirname, "files"), project.directory);
 
     // Add devDependencies
     await packageJson.addDevDependencies(
-      {
-        vitest: "^2.1.8",
-        "@vitest/ui": "^2.1.8",
-        "happy-dom": "^15.11.7",
-        "@ember/test-waiters": "^3.1.0",
-      },
-      targetDir,
+      await getLatest({
+        "@ember/test-helpers": "^5.4.1",
+        "@ember/test-waiters": "^4.1.1",
+        "@testing-library/dom": "^10.4.1",
+        "ember-vitest": "^0.3.3",
+        vitest: "^4.0.0",
+        "@vitest/ui": "^4.0.0",
+        "@vitest/browser": "^4.0.0",
+        "@vitest/browser-webdriverio": "^4.0.0",
+        webdriverio: "^9.23.2",
+      }),
+      project.directory,
     );
 
     // Add scripts
@@ -43,7 +35,32 @@ export default {
         "test:watch": "vitest",
         "test:ui": "vitest --ui",
       },
-      targetDir,
+      project.directory,
     );
   },
+
+  /**
+   * @overload
+   * @param {import('#utils/project.js').Project} project
+   * @param {true} explain
+   * @returns {Promise<{ isSetup: boolean; reasons: string[] }>}
+   */
+  /**
+   * @overload
+   * @param {import('#utils/project.js').Project} project
+   * @param {boolean | undefined} [explain]
+   * @returns {Promise<boolean>}
+   */
+  async isSetup(project, explain) {
+    const reasons = ["Vitest setup detection not implemented"];
+
+    if (explain) {
+      return {
+        isSetup: false,
+        reasons,
+      };
+    }
+
+    return false;
+  },
 };

package/src/utils/babel.js

@@ -0,0 +1,76 @@
+// uses jscodeshift
+import { js } from "ember-apply";
+
+/**
+ * @param {import('./project.js').Project} project
+ */
+export async function hasConfiguredTSBabel(project) {
+  return hasConfiguredPlugin(project, "@babel/plugin-transform-typescript");
+}
+
+/**
+ * @param {import('./project.js').Project} project
+ * @param {string} pluginName
+ */
+export async function hasConfiguredPlugin(project, pluginName) {
+  let hasPlugin = false;
+
+  await js.analyze(project.path("babel.config.js"), async ({ root, j }) => {
+    root
+      .find(j.ArrayExpression, {
+        elements: {
+          0: { value: pluginName },
+        },
+      })
+      .forEach(() => {
+        hasPlugin = true;
+      });
+  });
+
+  return hasPlugin;
+}
+
+/**
+ * @param {import('./project.js').Project} project
+ * @param {string} pluginName
+ */
+export async function removeConfiguredPlugin(project, pluginName) {
+  await js.transform(project.path("babel.config.js"), async ({ root, j }) => {
+    root
+      .find(j.ArrayExpression, {
+        elements: {
+          0: { value: pluginName },
+        },
+      })
+      .forEach(
+        /**
+         * @param {unknown} path
+         */
+        (path) => {
+          j(path).remove();
+        },
+      );
+  });
+}
+
+/**
+ * @param {import('./project.js').Project} project
+ * @param {string} plugin
+ */
+export async function prependPlugin(project, plugin) {
+  await js.transform(project.path("babel.config.js"), async ({ root, j }) => {
+    root
+      .find(j.Property, {
+        key: { name: "plugins" },
+        value: { type: "ArrayExpression" },
+      })
+      .forEach(
+        /**
+         * @param {any} path
+         */
+        (path) => {
+          path.node.value.elements.unshift(plugin);
+        },
+      );
+  });
+}

package/src/utils/buffer.js

@@ -0,0 +1,15 @@
+/**
+ * from https://github.com/ember-cli/ember-cli/blob/8ea5b2e22d37805f5749a4917e0ef25fac3c9cda/lib/models/blueprint.js#L1789
+ *
+ *  Takes a substring of a string based on byte offsets.
+
+ * @param {string} value : The input string.
+ * @param {number} start : The byte index of the substring start.
+ * @param {number} end : The byte index of the substring end.
+ * @return {string} : The substring.
+ */
+export function substringBytes(value, start, end) {
+  const buf = Buffer.from(value);
+
+  return buf.subarray(start, end).toString();
+}

package/src/utils/cli.js

@@ -0,0 +1,45 @@
+import { styleText } from "node:util";
+
+export function isInteractive() {
+  const isTerminalInteractive = process.stdout.isTTY;
+
+  return isTerminalInteractive;
+}
+
+/**
+ * I would like to have selecs look more like a table,
+ * but @clack/prompts makes this a bit hard.
+ *
+ * I tried using padding, but then when it prints your selection,
+ * I don't think there is a way to format just that, so
+ * there are a bunch of goofy spacings in the labels.
+ */
+const PADDING = 10;
+
+/**
+ * @param {string} name
+ * @param {string} [subTitle]
+ */
+export function formatLabel(name, subTitle) {
+  if (!subTitle) {
+    return padToWidth(name, PADDING);
+  }
+
+  return padToWidth(name, PADDING) + styleText("magentaBright", subTitle);
+}
+
+/**
+ * @param {string} input
+ * @param {number} maxWidth
+ * @param {{ side?: 'right' | 'left' }} [options]
+ */
+function padToWidth(input, maxWidth, { side = "right" } = {}) {
+  let str = String(input);
+  let width = Math.max(0, maxWidth | 0);
+
+  if (str.length >= width) return str;
+
+  let spaces = " ".repeat(width - str.length);
+
+  return side === "left" ? spaces + str : str + spaces;
+}

package/src/utils/cwd.js

@@ -0,0 +1 @@
+export const cwd = process.cwd();

package/src/utils/fs.js

@@ -0,0 +1,85 @@
+import { existsSync, lstatSync } from "node:fs";
+import { readFile, glob, mkdir, writeFile } from "node:fs/promises";
+import { join, dirname } from "node:path";
+import { parse as parsePath } from "node:path";
+import { removeTypes } from "./remove-types.js";
+
+/**
+ *
+ * Modified version of applyFolder from ember-apply
+ * where the caller gets to decide the final output filPath and contents - whereas the version from ember-apply only allows similar file paths in source and destination.
+ *
+ * We need customization because we will intake ts and output js
+ *
+ * @param {string} from
+ * @param {{to: import('#utils/project.js').Project, process: (data: { entry: string, contents: string }) => string | Promise<void>}} options sub folder within the target project to copy the contents to
+ */
+export async function applyFolder(from, options) {
+  for await (const entry of glob("**/*", { exclude: ["**/node_modules", "**/dist"], cwd: from })) {
+    let sourcePath = join(from, entry);
+    let targetPath = join(options.to.directory, entry);
+    let directory = dirname(targetPath);
+
+    if (directory) {
+      await mkdir(directory, { recursive: true });
+    }
+
+    let stat = lstatSync(sourcePath);
+
+    if (stat.isDirectory()) {
+      continue;
+    }
+
+    let buffer = await readFile(sourcePath);
+    let contents = buffer.toString();
+
+    await options.process({ entry: targetPath, contents });
+  }
+}
+
+/**
+ * @param {string} from
+ * @param {import('#utils/project.js').Project} project
+ */
+export async function applyFolderTo(from, project) {
+  await applyFolder(from, {
+    to: project,
+    async process({ entry, contents }) {
+      /**
+       * TODO: handle conflicts if files already exists
+       *
+       *       (I believe we can do interactive here)
+       */
+      let pathInfo = parsePath(entry);
+      let ext = pathInfo.ext;
+      if (ext === ".gts" || ext === ".ts") {
+        let wantsTS = await project.hasOrWantsLayer("typescript");
+
+        if (!wantsTS) {
+          let filePath = entry.replace(/\.gts$/, ".gjs").replace(/\.ts$/, ".js");
+
+          if (existsSync(filePath)) {
+            /**
+             * Skipping due to already existing
+             * TODO: need a flag to force overwrite?
+             */
+            return;
+          }
+          let newContents = await removeTypes(ext, contents);
+
+          await writeFile(filePath, newContents);
+          return;
+        }
+      }
+
+      if (existsSync(entry)) {
+        /**
+         * Skipping due to already existing
+         * TODO: need a flag to force overwrite?
+         */
+        return;
+      }
+      await writeFile(entry, contents);
+    },
+  });
+}

package/src/utils/git.js

@@ -0,0 +1,41 @@
+import { execSync } from "node:child_process";
+import { existsSync } from "node:fs";
+import { join } from "node:path";
+import { cwd } from "#utils/cwd.js";
+
+export function isInGit(directory = cwd) {
+  try {
+    const result = execSync("git rev-parse --is-inside-work-tree", {
+      cwd: directory,
+      stdio: ["pipe", "pipe", "pipe"],
+    });
+
+    return result.toString().trim() === "true";
+  } catch {
+    return false;
+  }
+}
+
+/**
+ *
+ * @param {string} directory
+ */
+export function initGit(directory) {
+  try {
+    execSync("git init --initial-branch=main", {
+      cwd: directory,
+      stdio: "pipe",
+    });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ *
+ * @param {string} directory
+ */
+export function hasGit(directory) {
+  return existsSync(join(directory, ".git"));
+}

package/src/utils/git.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest";
+import { isInGit, initGit, hasGit } from "./git.js";
+import { cwd } from "./cwd.js";
+import { mktemp } from "#test-helpers";
+
+describe("isInGit", () => {
+  it("in this repo", async () => {
+    expect(isInGit(cwd)).toBe(true);
+  });
+
+  it("in a temp directory", async () => {
+    let tmp = await mktemp();
+
+    expect(isInGit(tmp)).toBe(false);
+  });
+});
+
+describe("initGit + hasGit", () => {
+  it("creates in non-git directory", async () => {
+    let tmp = await mktemp();
+
+    expect(hasGit(tmp)).toBe(false);
+    initGit(tmp);
+    expect(hasGit(tmp)).toBe(true);
+  });
+
+  it("attempts in pre-existing git repo", async () => {
+    let tmp = await mktemp();
+
+    expect(hasGit(tmp)).toBe(false);
+    initGit(tmp);
+    expect(hasGit(tmp)).toBe(true);
+    initGit(tmp);
+    expect(hasGit(tmp)).toBe(true);
+  });
+});

package/src/utils/manifest.js

@@ -0,0 +1,9 @@
+import { hasAllKeys } from "./object.js";
+
+/**
+ * @param {Record<string, any>} manifest
+ * @param {string[] | Record<string, unknown>} listOrObject
+ */
+export function hasDevDeps(manifest, listOrObject) {
+  return hasAllKeys(manifest.devDependencies ?? {}, listOrObject);
+}

package/src/utils/npm.js

@@ -0,0 +1,29 @@
+import latestVersion from "latest-version";
+
+/**
+ * @type {{ [name: string]: { [version: string]: string } }}
+ */
+const CACHE = {};
+
+/**
+ * @param {{ [name: string]: string }} deps map of dep name to semver range
+ */
+export async function getLatest(deps) {
+  let results = await Promise.all(
+    Object.entries(deps).map(async ([dep, range]) => {
+      let existing = CACHE[dep]?.[range];
+      if (existing) {
+        return [dep, existing];
+      }
+
+      let version = await latestVersion(dep, { version: range });
+
+      CACHE[dep] ||= {};
+      CACHE[dep][range] = version;
+
+      return [dep, version];
+    }),
+  );
+
+  return Object.fromEntries(results);
+}

package/src/utils/object.js

@@ -0,0 +1,10 @@
+/**
+ * @param {Record<string, unknown>} object
+ * @param {string[] | Record<string, unknown>} keysOrObject
+ */
+export function hasAllKeys(object, keysOrObject) {
+  let keysToCheck = Array.isArray(keysOrObject) ? keysOrObject : Object.keys(keysOrObject);
+  let fromObject = new Set(Object.keys(object));
+
+  return keysToCheck.every((key) => fromObject.has(key));
+}