ember.nvp 1.0.0 → 1.1.0

package/src/bases/minimal-extension/files/app/router.ts

@@ -0,0 +1,10 @@
+import EmbroiderRouter from "@embroider/router";
+
+import config from "#config";
+
+export default class Router extends EmbroiderRouter {
+  location = config.locationType;
+  rootURL = config.rootURL;
+}
+
+Router.map(function () {});

package/src/bases/minimal-extension/files/app/templates/application.gts

@@ -0,0 +1,5 @@
+<template>
+  <h1>Welcome to Ember</h1>
+
+  {{outlet}}
+</template>

package/src/bases/minimal-extension/files/babel.config.js

@@ -0,0 +1,49 @@
+import { buildMacros } from "@embroider/macros/babel";
+
+const macros = buildMacros({
+  configure(config) {
+    if (process.env.EMBER_ENV === "test") {
+      config.enableRuntimeMode();
+    }
+  },
+});
+
+export default {
+  plugins: [
+    [
+      "@babel/plugin-transform-typescript",
+      {
+        allExtensions: true,
+        onlyRemoveTypeImports: true,
+        allowDeclareFields: true,
+      },
+    ],
+    [
+      "babel-plugin-ember-template-compilation",
+      {
+        transforms: [...macros.templateMacros],
+      },
+    ],
+    [
+      "module:decorator-transforms",
+      {
+        runtime: {
+          import: import.meta.resolve("decorator-transforms/runtime-esm"),
+        },
+      },
+    ],
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        absoluteRuntime: import.meta.dirname,
+        useESModules: true,
+        regenerator: false,
+      },
+    ],
+    ...macros.babelMacros,
+  ],
+
+  generatorOpts: {
+    compact: false,
+  },
+};

package/src/bases/minimal-extension/files/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Minimal Extension</title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <!--
+      Unlike a web app, this boot script cannot be inlined:
+      extension pages are served with a Content-Security-Policy of
+      `script-src 'self'`, which forbids inline scripts.
+    -->
+    <script type="module" src="./app/boot.ts"></script>
+  </body>
+</html>

package/src/bases/minimal-extension/files/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "minimal-extension",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Your Browser Extension's description here",
+  "repository": "",
+  "license": "MIT",
+  "author": "",
+  "type": "module",
+  "imports": {
+    "#app/*": "./app/*",
+    "#config": "./app/config.ts",
+    "#components/*": "./app/components/*",
+    "#services/*": "./app/services/*",
+    "#test-helpers/*": "./tests/helpers/*",
+    "#utils/*": "./app/utils/*"
+  },
+  "exports": {
+    "./tests/*": "./tests/*",
+    "./*": "./app/*"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build:watch": "vite build --watch --mode development",
+    "dev": "vite",
+    "start": "vite"
+  },
+  "dependencies": {
+    "@embroider/macros": "^1.20.3",
+    "@embroider/router": "^3.0.6",
+    "@glimmer/component": "^2.1.1",
+    "decorator-transforms": "^2.3.2",
+    "ember-source": "~7.0.0",
+    "ember-strict-application-resolver": "^0.1.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.29.7",
+    "@babel/plugin-transform-runtime": "^7.29.7",
+    "@babel/plugin-transform-typescript": "^7.29.7",
+    "@babel/runtime": "^7.29.7",
+    "@ember/app-tsconfig": "^2.0.0",
+    "@embroider/core": "^4.4.2",
+    "@glint/ember-tsc": "^1.7.5",
+    "@glint/template": "^1.7.7",
+    "@glint/tsserver-plugin": "^2.5.5",
+    "@nullvoxpopuli/ember-vite": "workspace:*",
+    "@rollup/plugin-babel": "^7.1.0",
+    "babel-plugin-ember-template-compilation": "^4.0.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.14"
+  },
+  "engines": {
+    "node": ">= 24"
+  },
+  "ember": {
+    "edition": "octane"
+  }
+}

package/src/bases/minimal-extension/files/public/manifest.json

@@ -0,0 +1,9 @@
+{
+  "manifest_version": 3,
+  "name": "minimal-extension",
+  "version": "0.0.0",
+  "description": "Your Browser Extension's description here",
+  "action": {
+    "default_popup": "index.html"
+  }
+}

package/src/bases/minimal-extension/files/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "@ember/app-tsconfig",
+  "compilerOptions": {
+    "allowJs": true,
+    "lib": ["esnext", "dom", "dom.iterable"],
+    "types": [
+      "ember-source/types",
+      "@embroider/core/virtual",
+      "vite/client",
+      "@glint/ember-tsc/types"
+    ]
+  }
+}

package/src/bases/minimal-extension/files/vite.config.mjs

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import { ember } from "@nullvoxpopuli/ember-vite";
+
+export default defineConfig({
+  plugins: [ember()],
+});

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);