ember.nvp 1.0.0 → 1.2.0

package/src/bases/minimal-extension/index.js

@@ -0,0 +1,142 @@
+import { packageJson } from "ember-apply";
+import { readFile, writeFile } from "node:fs/promises";
+import { join } from "node:path";
+import { getLatest } from "#utils/npm.js";
+import { applyFolderTo } from "#utils/fs.js";
+import { removeConfiguredPlugin } from "#utils/babel.js";
+
+/**
+ * Minimal Extension Base
+ *
+ * Provides the absolute bare minimum for a browser extension (Manifest V3)
+ * whose popup is an Ember app:
+ * - type: "module" in package.json
+ * - public/manifest.json copied verbatim into dist
+ * - index.html popup booting from an external script (extension pages
+ *   forbid inline scripts via CSP)
+ * - No testing framework
+ * - No linting or formatting
+ * - No ember-welcome-page
+ */
+export default {
+  label: "Minimal Extension Base",
+  description: "Bare minimum browser extension structure with an Ember popup",
+
+  /**
+   * 1. Apply files
+   *   a. Remove TS if needed
+   * 2. Remove TS deps/files if needed
+   * 3. Update name(s)
+   * 4. Upgrade in-range dependencies
+   * 5. Update an existing babel config, if any
+   *
+   * @param {import('#utils/project.js').Project} project
+   */
+  async run(project) {
+    await applyFiles(project);
+    await updateName(project);
+    await makeJavaScript(project);
+    await upgradeDependencies(project);
+    await updateBabelConfig(project);
+  },
+};
+
+/**
+ * @param {import('#utils/project.js').Project} project
+ */
+async function updateBabelConfig(project) {
+  if (await project.hasOrWantsLayer("typescript")) return;
+
+  await removeConfiguredPlugin(project, "@babel/plugin-transform-typescript");
+}
+
+/**
+ * @param {import('#utils/project.js').Project} project
+ */
+async function applyFiles(project) {
+  let filePath = join(import.meta.dirname, "files");
+
+  await applyFolderTo(filePath, project);
+}
+
+/**
+ * Operates on known files where the name matters
+ *
+ * @param {import('#utils/project.js').Project} project
+ */
+async function updateName(project) {
+  await packageJson.modify((json) => {
+    json.name = project.desires.name;
+  }, project.directory);
+
+  if (!project.hasFile("public/manifest.json")) return;
+
+  let manifestPath = project.path("public/manifest.json");
+  let manifest = JSON.parse(await readFile(manifestPath, "utf-8"));
+
+  manifest.name = project.desires.name;
+
+  await writeFile(manifestPath, JSON.stringify(manifest, null, 2) + "\n");
+}
+
+/**
+ * @param {import('#utils/project.js').Project} project
+ */
+async function makeJavaScript(project) {
+  if (await project.hasOrWantsLayer("typescript")) return;
+
+  /**
+   * We don't actually remove anything, because we want intellisense for JS
+   *
+   * But perhaps for the sake of minimal, we do remoev it.
+   * And we add a layer later for JSDoc ased TS or something
+   */
+  await packageJson.removeDevDependencies(
+    [
+      "@ember/app-tsconfig",
+      "@glint/ember-tsc",
+      "@glint/template",
+      "@glint/tsserver-plugin",
+      "typescript",
+    ],
+    project.directory,
+  );
+
+  await project.removeFile("tsconfig.json");
+
+  await packageJson.modify((json) => {
+    json.imports ||= {};
+    json.imports["#config"] = "./app/config.js";
+  }, project.directory);
+
+  /**
+   * The import-rewriting pass only handles module files; the popup's
+   * <script src> points at the boot module by path, so it has to follow
+   * the .ts -> .js rename by hand.
+   */
+  if (!project.hasFile("index.html")) return;
+
+  let indexPath = project.path("index.html");
+  let indexHtml = await readFile(indexPath, "utf-8");
+
+  await writeFile(indexPath, indexHtml.replace("./app/boot.ts", "./app/boot.js"));
+}
+
+/**
+ * Bumps in-range only.
+ * Majors will need to go through PR to this repo.
+ *
+ * @param {import('#utils/project.js').Project} project
+ */
+async function upgradeDependencies(project) {
+  let existing = await packageJson.read(project.directory);
+
+  await packageJson.modify(async (json) => {
+    if (json.dependencies) {
+      Object.assign(json.dependencies, await getLatest(existing.dependencies));
+    }
+    if (json.devDependencies) {
+      Object.assign(json.devDependencies, await getLatest(existing.devDependencies));
+    }
+  }, project.directory);
+}

package/src/cli/generator.js

@@ -1,6 +1,7 @@
 import { mkdir, rm } from "node:fs/promises";
 
 import baseApp from "#bases/minimal-app";
+import baseExtension from "#bases/minimal-extension";
 import baseLibrary from "#bases/minimal-library";
 import { consolidateLintingScripts } from "../consolidators/linting.js";
 import { hasGit } from "#utils/git.js";
@@ -24,6 +25,9 @@ export async function generateProject(project, replaceOrUpdate) {
     case "library":
       await baseLibrary.run(project);
       break;
+    case "extension":
+      await baseExtension.run(project);
+      break;
   }
 
   /**

package/src/cli/questions/project-type.js

@@ -3,12 +3,13 @@ import { answers, printArgInUse } from "#args";
 
 /**
  * addon is alias for library
+ * web-extension is alias for extension
  */
-const SUPPORTED = new Set(["app", "library", "addon"]);
+const SUPPORTED = new Set(["app", "library", "addon", "extension", "web-extension"]);
 
 /**
  * @param {string | undefined} selected
- * @returns {selected is "app" | "library" | "addon"}
+ * @returns {selected is "app" | "library" | "addon" | "extension" | "web-extension"}
  */
 function isValid(selected) {
   if (!selected) return false;
@@ -25,6 +26,7 @@ export async function askProjectType() {
     printArgInUse("type", answers.type);
 
     if (answers.type === "addon") return "library";
+    if (answers.type === "web-extension") return "extension";
 
     return answers.type;
   }
@@ -38,6 +40,11 @@ export async function askProjectType() {
         label: "library",
         hint: "sharable code, usable by other libraries and apps alike",
       },
+      {
+        value: "extension",
+        label: "browser extension",
+        hint: "Manifest V3 extension whose popup is an Ember app",
+      },
     ],
   });
 

package/src/layers/renovate/index.js

@@ -14,10 +14,11 @@ export default {
       return;
     }
 
+    // extensions aren't published to npm either, so they follow the app config
     let source =
-      project.type === "app"
-        ? join(import.meta.dirname, "files/app.json5")
-        : join(import.meta.dirname, "files/library.json5");
+      project.type === "library"
+        ? join(import.meta.dirname, "files/library.json5")
+        : join(import.meta.dirname, "files/app.json5");
 
     let destination = join(project.directory, ".github/renovate.json5");
 

package/src/layers/typescript/index.js

@@ -7,6 +7,7 @@ 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 sharedDeps = {
@@ -149,6 +150,11 @@ async function addTSConfig(project) {
     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"));
   }

package/src/utils/types.ts

@@ -1,6 +1,6 @@
 import { Project } from "./project.js";
 export type PackageManager = "pnpm" | "npm";
-export type ProjectType = "app" | "library";
+export type ProjectType = "app" | "library" | "extension";
 
 export interface Layer {
   /**

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

@@ -1,9 +1,9 @@
 import { describe, it, beforeAll, afterAll, expect } from "vitest";
-import { generate, mktemp, pinYukuParser } from "#test-helpers";
+import { generate, listFiles, mktemp } from "#test-helpers";
 import { writeLibrarySource } from "./library-src-fixtures.ts";
 import { execa } from "execa";
-import { mkdir, readdir, readFile, rm, writeFile } from "node:fs/promises";
-import { join, relative, sep } from "node:path";
+import { mkdir, readFile, rm, writeFile } from "node:fs/promises";
+import { join } from "node:path";
 
 import type { Project } from "ember.nvp";
 
@@ -14,23 +14,7 @@ import type { Project } from "ember.nvp";
  * them.
  */
 
-async function listFiles(directory: string): 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"))
-    .sort();
-}
-
-async function read(project: Project, filePath: string): Promise<string> {
-  return readFile(join(project.directory, filePath), "utf-8");
-}
-
 async function installAndBuild(project: Project) {
-  await pinYukuParser(project);
-
   let install = await execa("pnpm install", { cwd: project.directory, shell: true });
   expect(install.exitCode).toBe(0);
 
@@ -68,11 +52,11 @@ describe("base: minimal-library", () => {
         ]
       `);
 
-      expect(await read(project, "src/index.js")).toBe("");
+      expect(await project.read("src/index.js")).toBe("");
     });
 
     it("is publishable", async () => {
-      let manifest = JSON.parse(await read(project, "package.json"));
+      let manifest = JSON.parse((await project.read("package.json"))!);
 
       // The template is private (it lives in a workspace); the generated
       // library must not be
@@ -80,14 +64,14 @@ describe("base: minimal-library", () => {
     });
 
     it("has no TypeScript leftovers", async () => {
-      let manifest = JSON.parse(await read(project, "package.json"));
+      let manifest = JSON.parse((await project.read("package.json"))!);
 
       expect(manifest.devDependencies).not.toHaveProperty("typescript");
       expect(manifest.devDependencies).not.toHaveProperty("@ember/library-tsconfig");
       // No declarations are emitted without types
       expect(JSON.stringify(manifest.exports)).not.toContain("types");
 
-      expect(await read(project, "tsdown.config.js")).toMatchInlineSnapshot(`
+      expect(await project.read("tsdown.config.js")).toMatchInlineSnapshot(`
         "import { defineConfig } from "tsdown";
         import { ember } from "@nullvoxpopuli/ember-rolldown";
 
@@ -131,7 +115,7 @@ describe("base: minimal-library", () => {
       await writeLibrarySource(project, "javascript");
       await installAndBuild(project);
 
-      let output = await read(project, "dist/index.js");
+      let output = await project.read("dist/index.js");
 
       // Published libraries ship precompileTemplate (the consuming app does
       // the final compile), never wire format
@@ -167,12 +151,11 @@ describe("base: minimal-library", () => {
         ]
       `);
 
-      expect(await read(project, "src/index.ts")).toBe("");
+      expect(await project.read("src/index.ts")).toBe("");
     });
 
     it("type checks", async () => {
       await writeLibrarySource(project, "typescript");
-      await pinYukuParser(project);
 
       let install = await execa("pnpm install", { cwd: project.directory, shell: true });
       expect(install.exitCode).toBe(0);
@@ -184,16 +167,40 @@ describe("base: minimal-library", () => {
     it("builds, including declarations", async () => {
       await installAndBuild(project);
 
-      let output = await read(project, "dist/index.js");
+      let output = await project.read("dist/index.js");
 
       expect(output).toContain("precompileTemplate");
       expect(output).not.toContain("createTemplateFactory");
 
-      let declarations = await read(project, "dist/index.d.ts");
-
-      expect(declarations).toContain("declare class Greeting extends Component<GreetingSignature>");
-      expect(declarations).toContain("declare const Badge: TOC<BadgeSignature>");
-      expect(declarations).toContain("declare function add(a: number, b: number): number");
+      let declarations = await project.read("dist/index.d.ts");
+
+      expect(declarations).toMatchInlineSnapshot(`
+        "import { TOC } from "@ember/component/template-only";
+        import Component from "@glimmer/component";
+        //#region src/components/badge.d.ts
+        interface BadgeSignature {
+          Element: HTMLSpanElement;
+          Blocks: {
+            default: [];
+          };
+        }
+        declare const Badge: TOC<BadgeSignature>;
+        //#endregion
+        //#region src/components/greeting.d.ts
+        interface GreetingSignature {
+          Element: HTMLParagraphElement;
+          Args: {
+            name: string;
+          };
+        }
+        declare class Greeting extends Component<GreetingSignature> {}
+        //#endregion
+        //#region src/utils/math.d.ts
+        declare function add(a: number, b: number): number;
+        //#endregion
+        export { Badge, type BadgeSignature, Greeting, type GreetingSignature, add };
+        //# sourceMappingURL=index.d.ts.map"
+      `);
 
       expect(await listFiles(join(project.directory, "dist"))).toMatchInlineSnapshot(`
         [

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

@@ -1,8 +1,7 @@
 import { describe, it, beforeAll, afterAll, expect } from "vitest";
-import { generate, pinYukuParser } from "#test-helpers";
+import { generate } from "#test-helpers";
 import { execa } from "execa";
-import { readFile, rm } from "node:fs/promises";
-import { join } from "node:path";
+import { rm } from "node:fs/promises";
 
 import type { Project } from "ember.nvp";
 
@@ -12,10 +11,6 @@ import type { Project } from "ember.nvp";
  * output.
  */
 
-async function read(project: Project, filePath: string): Promise<string> {
-  return readFile(join(project.directory, filePath), "utf-8");
-}
-
 describe("layers: publint + are-the-types-wrong", () => {
   const dirs: string[] = [];
 
@@ -40,7 +35,7 @@ describe("layers: publint + are-the-types-wrong", () => {
     });
 
     it("wires both checks into the build", async () => {
-      expect(await read(project, "tsdown.config.js")).toMatchInlineSnapshot(`
+      expect(await project.read("tsdown.config.js")).toMatchInlineSnapshot(`
         "import { defineConfig } from "tsdown";
         import { ember } from "@nullvoxpopuli/ember-rolldown";
         export default defineConfig({ entry: ["./src/index.ts"], plugins: [ember()], attw: { profile: "esm-only" }, publint: true })"
@@ -48,8 +43,6 @@ describe("layers: publint + are-the-types-wrong", () => {
     });
 
     it("both checks run and pass in the build", async () => {
-      await pinYukuParser(project);
-
       let install = await execa("pnpm install", { cwd: project.directory, shell: true });
       expect(install.exitCode).toBe(0);
 
@@ -80,7 +73,7 @@ describe("layers: publint + are-the-types-wrong", () => {
     });
 
     it("wires publint only (no declarations to check)", async () => {
-      expect(await read(project, "tsdown.config.js")).toMatchInlineSnapshot(`
+      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"], dts: false, plugins: [ember()], publint: true })"
@@ -88,8 +81,6 @@ describe("layers: publint + are-the-types-wrong", () => {
     });
 
     it("publint runs and passes in the build", async () => {
-      await pinYukuParser(project);
-
       let install = await execa("pnpm install", { cwd: project.directory, shell: true });
       expect(install.exitCode).toBe(0);
 

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

@@ -1,30 +1,13 @@
 import { describe, it, beforeAll, afterAll, expect } from "vitest";
-import { generate, pinYukuParser } from "#test-helpers";
+import { generate, listFiles } from "#test-helpers";
 import { writeLibrarySource } from "./library-src-fixtures.ts";
 import { execa } from "execa";
-import { mkdir, readdir, readFile, rm, writeFile } from "node:fs/promises";
-import { dirname, join, relative, sep } from "node:path";
+import { mkdir, rm, writeFile } from "node:fs/promises";
+import { dirname, join } from "node:path";
 
 import type { Project } from "ember.nvp";
 
-async function listFiles(directory: string): 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) => !path.startsWith(`dist${sep}`))
-    .sort();
-}
-
-async function read(project: Project, filePath: string): Promise<string> {
-  return readFile(join(project.directory, filePath), "utf-8");
-}
-
 async function installAndTest(project: Project) {
-  await pinYukuParser(project);
-
   let install = await execa("pnpm install", { cwd: project.directory, shell: true });
   expect(install.exitCode).toBe(0);
 
@@ -169,7 +152,7 @@ describe("layer: qunit", () => {
     });
 
     it("generates the expected files, without any index.html", async () => {
-      let files = await listFiles(project.directory);
+      let files = await listFiles(project.directory, { includeDist: false });
 
       expect(files.some((file) => file.endsWith("index.html"))).toBe(false);
       expect(files).toMatchInlineSnapshot(`
@@ -191,7 +174,7 @@ describe("layer: qunit", () => {
     });
 
     it("generates the test build config", async () => {
-      expect(await read(project, "vite.config.mjs")).toMatchInlineSnapshot(`
+      expect(await project.read("vite.config.mjs")).toMatchInlineSnapshot(`
         "import { defineConfig } from "vite";
         import { ember } from "@nullvoxpopuli/ember-vite";
 
@@ -200,7 +183,7 @@ describe("layer: qunit", () => {
         });
         "
       `);
-      expect(await read(project, "config/test/babel.config.js")).toMatchInlineSnapshot(`
+      expect(await project.read("config/test/babel.config.js")).toMatchInlineSnapshot(`
         "import { buildMacros } from "@embroider/macros/babel";
 
         const macros = buildMacros({
@@ -244,7 +227,7 @@ describe("layer: qunit", () => {
         };
         "
       `);
-      expect(await read(project, "config/test/testem.cjs")).toMatchInlineSnapshot(`
+      expect(await project.read("config/test/testem.cjs")).toMatchInlineSnapshot(`
         ""use strict";
 
         if (typeof module !== "undefined") {
@@ -276,7 +259,7 @@ describe("layer: qunit", () => {
     });
 
     it("leaves the publish build config alone", async () => {
-      expect(await read(project, "tsdown.config.js")).toMatchInlineSnapshot(`
+      expect(await project.read("tsdown.config.js")).toMatchInlineSnapshot(`
         "import { defineConfig } from "tsdown";
         import { ember } from "@nullvoxpopuli/ember-rolldown";
 
@@ -298,7 +281,7 @@ describe("layer: qunit", () => {
       let build = await execa("pnpm build", { cwd: project.directory, shell: true });
       expect(build.exitCode).toBe(0);
 
-      let output = await read(project, "dist/index.js");
+      let output = await project.read("dist/index.js");
 
       expect(output).toContain("precompileTemplate");
       expect(output).not.toContain("createTemplateFactory");
@@ -314,7 +297,7 @@ describe("layer: qunit", () => {
     });
 
     it("generates the expected files, without any index.html", async () => {
-      let files = await listFiles(project.directory);
+      let files = await listFiles(project.directory, { includeDist: false });
 
       expect(files.some((file) => file.endsWith("index.html"))).toBe(false);
       expect(files).toMatchInlineSnapshot(`
@@ -335,7 +318,7 @@ describe("layer: qunit", () => {
     });
 
     it("has no TypeScript leftovers in the test build config", async () => {
-      expect(await read(project, "config/test/babel.config.js")).toMatchInlineSnapshot(`
+      expect(await project.read("config/test/babel.config.js")).toMatchInlineSnapshot(`
         "import { buildMacros } from "@embroider/macros/babel";
 
         const macros = buildMacros({
@@ -367,7 +350,7 @@ describe("layer: qunit", () => {
         };
         "
       `);
-      expect(await read(project, "tsdown.config.js")).toMatchInlineSnapshot(`
+      expect(await project.read("tsdown.config.js")).toMatchInlineSnapshot(`
         "import { defineConfig } from "tsdown";
         import { ember } from "@nullvoxpopuli/ember-rolldown";
 
@@ -390,7 +373,7 @@ describe("layer: qunit", () => {
       let build = await execa("pnpm build", { cwd: project.directory, shell: true });
       expect(build.exitCode).toBe(0);
 
-      let output = await read(project, "dist/index.js");
+      let output = await project.read("dist/index.js");
 
       expect(output).toContain("precompileTemplate");
       expect(output).not.toContain("createTemplateFactory");

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

@@ -1,9 +1,9 @@
 import { describe, it, beforeAll, afterAll, expect } from "vitest";
-import { generate } from "#test-helpers";
+import { generate, listFiles } from "#test-helpers";
 import { writeLibrarySource } from "./library-src-fixtures.ts";
 import { execa } from "execa";
-import { mkdir, readdir, readFile, rm, writeFile } from "node:fs/promises";
-import { dirname, join, relative, sep } from "node:path";
+import { mkdir, rm, writeFile } from "node:fs/promises";
+import { dirname, join } from "node:path";
 
 import type { Project } from "ember.nvp";
 
@@ -14,20 +14,6 @@ import type { Project } from "ember.nvp";
  * headless-browser mode), asserting the specs genuinely run and pass.
  */
 
-async function listFiles(directory: string): 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"))
-    .sort();
-}
-
-async function read(project: Project, filePath: string): Promise<string> {
-  return readFile(join(project.directory, filePath), "utf-8");
-}
-
 async function emit(project: Project, files: Record<string, string>) {
   for (let [path, contents] of Object.entries(files)) {
     let filePath = join(project.directory, path);
@@ -200,7 +186,7 @@ describe("layer: vitest", () => {
     });
 
     it("generates the vitest config", async () => {
-      expect(await read(project, "vitest.config.mjs")).toMatchInlineSnapshot(`
+      expect(await project.read("vitest.config.mjs")).toMatchInlineSnapshot(`
         "import { ember } from "@nullvoxpopuli/ember-vite";
         import { webdriverio } from "@vitest/browser-webdriverio";
         import { defineConfig } from "vitest/config";

package/test/ember.nvp/permutations/app-checks.test.ts

@@ -0,0 +1,3 @@
+import { testPermutations } from "./shared.ts";
+
+testPermutations("minimal-app", { group: "checks" });

package/test/ember.nvp/permutations/extension-1.test.ts

@@ -0,0 +1,3 @@
+import { testPermutations } from "./shared.ts";
+
+testPermutations("minimal-extension", { index: 0, total: 2 });

package/test/ember.nvp/permutations/extension-2.test.ts

@@ -0,0 +1,3 @@
+import { testPermutations } from "./shared.ts";
+
+testPermutations("minimal-extension", { index: 1, total: 2 });

package/test/ember.nvp/permutations/extension-checks.test.ts

@@ -0,0 +1,3 @@
+import { testPermutations } from "./shared.ts";
+
+testPermutations("minimal-extension", { group: "checks" });

package/test/ember.nvp/permutations/library-checks.test.ts

@@ -0,0 +1,3 @@
+import { testPermutations } from "./shared.ts";
+
+testPermutations("minimal-library", { group: "checks" });