ember.nvp 1.0.0 → 1.2.0

package/packages/rolldown/src/transform.ts

@@ -38,13 +38,32 @@ async function fixDtsExtensionsInDir(dir: string): Promise<void> {
   }
 }
 
+/**
+ * A sourcemap mapping every generated line to the same line of the input.
+ *
+ * `AAAA` is the [0, 0, 0, 0] VLQ segment (first line maps to source 0, line 0,
+ * column 0); `AACA` is [0, 0, +1, 0] (each following line advances the source
+ * line by one). Exact at line granularity, which is all the specifier rewrite
+ * can disturb.
+ */
+function lineIdentityMap(id: string, source: string) {
+  return {
+    version: 3,
+    sources: [id],
+    sourcesContent: [source],
+    names: [],
+    mappings: source
+      .split("\n")
+      .map((_, line) => (line === 0 ? "AAAA" : "AACA"))
+      .join(";"),
+  };
+}
+
 /**
  * Maps `.gts` -> `.ts` and `.gjs` -> `.js` (so rolldown can identify them as
  * ts/js) and preprocesses `<template>` via content-tag.
  */
 export function emberTransform(): Plugin {
-  const virtualFiles = new Set<string>();
-
   return {
     name: "ember:transform",
 
@@ -55,41 +74,39 @@ export function emberTransform(): Plugin {
 
         const fileName = path.join(path.dirname(importer), id);
 
-        if (id.endsWith(".gts") && !importer.endsWith(".d.ts")) {
-          virtualFiles.add(fileName);
+        if (id.endsWith(".gts")) {
           return {
             id: fileName.replace(/\.gts$/, ".ts"),
             meta: { fileName },
           };
         }
 
-        if (id.endsWith(".gjs") && !importer.endsWith(".d.ts")) {
-          virtualFiles.add(fileName);
+        if (id.endsWith(".gjs")) {
           return {
             id: fileName.replace(/\.gjs$/, ".js"),
             meta: { fileName },
           };
         }
 
-        if (id.endsWith(".d.ts") && importer.endsWith(".d.ts")) {
-          const gtsFile = fileName.replace(".d.ts", ".gts");
-          if (virtualFiles.has(gtsFile)) {
-            return fileName;
-          }
-        }
-
-        if (id.endsWith(".ts") && !importer.endsWith(".d.ts")) {
+        // A `.ts`/`.js` specifier whose only backing file is a `.gts`/`.gjs`
+        // resolves to the virtual module. This must also serve `.d.ts`
+        // importers: rolldown-plugin-dts resolves a declaration module's
+        // imports through the plugin pipeline (`this.resolve`), and — when the
+        // resolution is a source file — loads it (registering its declaration)
+        // before mapping the import to the declaration id. Virtual modules
+        // exist nowhere else, so if we don't answer here the import either
+        // fails to resolve (no file on disk) or, worse, resolves to a
+        // declaration id that was never registered.
+        if (id.endsWith(".ts")) {
           const gtsFileName = fileName.replace(/\.ts$/, ".gts");
           if (existsSync(gtsFileName) && !existsSync(fileName)) {
-            virtualFiles.add(gtsFileName);
             return { id: fileName, meta: { fileName: gtsFileName } };
           }
         }
 
-        if (id.endsWith(".js") && !importer.endsWith(".d.ts")) {
+        if (id.endsWith(".js")) {
           const gjsFileName = fileName.replace(/\.js$/, ".gjs");
           if (existsSync(gjsFileName) && !existsSync(fileName)) {
-            virtualFiles.add(gjsFileName);
             return { id: fileName, meta: { fileName: gjsFileName } };
           }
         }
@@ -105,7 +122,18 @@ export function emberTransform(): Plugin {
       },
       async handler(id) {
         const meta = this.getModuleInfo(id)?.meta ?? {};
-        const fileName = meta?.fileName;
+        let fileName = meta?.fileName;
+
+        // A virtual id can be loaded without having passed through our
+        // resolveId (rolldown-plugin-dts calls `this.load({ id })` with just
+        // the id), so no meta is attached: recover the backing file from disk.
+        if (!fileName && !existsSync(id)) {
+          if (id.endsWith(".ts") && existsSync(id.replace(/\.ts$/, ".gts"))) {
+            fileName = id.replace(/\.ts$/, ".gts");
+          } else if (id.endsWith(".js") && existsSync(id.replace(/\.js$/, ".gjs"))) {
+            fileName = id.replace(/\.js$/, ".gjs");
+          }
+        }
 
         if (fileName) {
           this.addWatchFile(fileName);
@@ -132,21 +160,26 @@ export function emberTransform(): Plugin {
         id: /\.(js|ts)$/,
       },
       handler(input, id) {
-        if (input.includes(".gts") && id.endsWith(".d.ts")) {
-          return input.replace(
-            /(['"`])((?:\.\.?\/|\/|@|[A-Za-z0-9_\-])[^'"]*?\.gts)\1/g,
-            (_m, q, p) => `${q}${p.replace(/\.gts$/, ".d.ts")}${q}`,
-          );
-        }
-
-        if (input.includes(".gts") && !id.endsWith(".d.ts")) {
-          return input.replace(
-            /(['"`])((?:\.\.?\/|\/|@|[A-Za-z0-9_\-])[^'"]*?\.gts)\1/g,
-            (_m, q, p) => `${q}${p.replace(/\.gts$/, ".ts")}${q}`,
-          );
+        // Rewrite `.gts` specifiers to `.ts` — the (virtual) source id — in
+        // runtime modules AND declaration modules alike. Declaration modules
+        // must NOT be rewritten to `.d.ts`: rolldown-plugin-dts's resolver
+        // treats a source-file resolution as "load it (registering its
+        // declaration), then map to the declaration id", while a `.d.ts` id is
+        // returned as-is — unloadable when the module isn't registered yet
+        // (e.g. the `.gts` is only ever type-imported).
+        const output = input.replace(
+          /(['"`])((?:\.\.?\/|\/|@|[A-Za-z0-9_\-])[^'"]*?\.gts)\1/g,
+          (_m, q, p) => `${q}${p.replace(/\.gts$/, ".ts")}${q}`,
+        );
+
+        if (output === input) {
+          return null;
         }
 
-        return input;
+        // The rewrite only shortens import specifiers in place, so a
+        // line-identity map is accurate to the line (and to the column for
+        // everything before the first rewritten specifier on a line).
+        return { code: output, map: lineIdentityMap(id, input) };
       },
     },
 

package/src/bases/minimal-extension/extension.test.ts

@@ -0,0 +1,251 @@
+import { beforeAll, describe, it, expect as hardExpect, afterAll } from "vitest";
+import { generate, build, reapply } from "#test-helpers";
+import { packageJson } from "ember-apply";
+
+import type { Project } from "ember.nvp";
+import { readFile, rm } from "node:fs/promises";
+import { globSync } from "node:fs";
+import { join } from "node:path";
+
+const expect = hardExpect.soft;
+
+describe("typescript", () => {
+  let project: Project;
+  beforeAll(async () => {
+    project = await generate({
+      name: "my-extension",
+      type: "extension",
+      layers: ["typescript"],
+    });
+
+    let { exitCode } = await project.install();
+
+    hardExpect(exitCode, "Install succeeds").toBe(0);
+  });
+
+  afterAll(async () => {
+    await rm(project.directory, { recursive: true, force: true });
+  });
+
+  it("project check", () => {
+    expect(project.desires.layers.map((layer) => layer.name)).toMatchInlineSnapshot(`
+      [
+        "typescript",
+      ]
+    `);
+    expect(project.wantsTypeScript).toBe(true);
+    expect(project.type).toBe("extension");
+  });
+
+  it("has the typescript babel plugin", async () => {
+    let content = await project.read("babel.config.js");
+
+    expect(content).toContain("@babel/plugin-transform-typescript");
+  });
+
+  it("named the extension in the manifest", async () => {
+    let manifest = JSON.parse((await project.read("public/manifest.json"))!);
+
+    expect(manifest.name).toBe("my-extension");
+    expect(manifest.manifest_version).toBe(3);
+  });
+
+  it("boots from an external script (extension CSP forbids inline scripts)", async () => {
+    let html = await project.read("index.html");
+
+    expect(html).toContain(`src="./app/boot.ts"`);
+    expect(html).not.toContain("Application.create");
+  });
+
+  it("build for development (testing, etc)", async () => {
+    let { exitCode } = await build(project);
+
+    expect(exitCode).toBe(0);
+  });
+
+  it("build for production", async () => {
+    let { exitCode } = await build(project, "production");
+
+    expect(exitCode).toBe(0);
+  });
+
+  it("dist is loadable as an unpacked extension", async () => {
+    let manifest = JSON.parse(
+      await readFile(join(project.directory, "dist/manifest.json"), "utf-8"),
+    );
+
+    expect(manifest.name).toBe("my-extension");
+    expect(manifest.action.default_popup).toBe("index.html");
+
+    let html = await readFile(join(project.directory, "dist/index.html"), "utf-8");
+
+    expect(html).toContain(`<script type="module"`);
+    expect(html).not.toContain("Application.create");
+  });
+
+  it("has no JS files", async () => {
+    let results = globSync("app/**/*", {
+      exclude: ["node_modules", "dist"],
+      cwd: project.directory,
+    });
+    expect(results).toMatchInlineSnapshot(`
+      [
+        "app/app.ts",
+        "app/boot.ts",
+        "app/config.ts",
+        "app/router.ts",
+        "app/templates",
+        "app/templates/application.gts",
+      ]
+    `);
+  });
+
+  it("when re-applying, it no-ops correctly", async () => {
+    let files = new Set(
+      globSync("**/*", { cwd: project.directory, exclude: ["node_modules", "dist"] }),
+    );
+
+    await reapply(project, []);
+
+    let filesAfter = new Set(
+      globSync("**/*", { cwd: project.directory, exclude: ["node_modules", "dist"] }),
+    );
+
+    expect(filesAfter).toEqual(files);
+    expect(files).toMatchInlineSnapshot(`
+      Set {
+        "README.md",
+        "app",
+        "babel.config.js",
+        "index.html",
+        "package.json",
+        "pnpm-lock.yaml",
+        "public",
+        "tsconfig.json",
+        "vite.config.mjs",
+        "public/manifest.json",
+        "app/app.ts",
+        "app/boot.ts",
+        "app/config.ts",
+        "app/router.ts",
+        "app/templates",
+        "app/templates/application.gts",
+      }
+    `);
+  });
+});
+
+describe("javascript", () => {
+  let project: Project;
+  beforeAll(async () => {
+    project = await generate({
+      name: "my-extension",
+      type: "extension",
+      layers: [],
+    });
+
+    let { exitCode } = await project.install();
+
+    hardExpect(exitCode, "Install succeeds").toBe(0);
+  });
+
+  afterAll(async () => {
+    await rm(project.directory, { recursive: true, force: true });
+  });
+
+  it("project check", () => {
+    expect(project.desires.layers.map((layer) => layer.name)).toMatchInlineSnapshot(`[]`);
+    expect(project.wantsTypeScript).toBe(false);
+    expect(project.type).toBe("extension");
+  });
+
+  it("does not have the typescript babel plugin", async () => {
+    let content = await project.read("babel.config.js");
+
+    expect(content).not.toContain("@babel/plugin-transform-typescript");
+  });
+
+  it("updated the sub-path imports to not have ts extensions", async () => {
+    let manifest = await packageJson.read(project.directory);
+
+    expect(manifest.imports).toMatchInlineSnapshot(`
+      {
+        "#app/*": "./app/*",
+        "#components/*": "./app/components/*",
+        "#config": "./app/config.js",
+        "#services/*": "./app/services/*",
+        "#test-helpers/*": "./tests/helpers/*",
+        "#utils/*": "./app/utils/*",
+      }
+    `);
+  });
+
+  it("the popup points at the renamed boot script", async () => {
+    let html = await project.read("index.html");
+
+    expect(html).toContain(`src="./app/boot.js"`);
+    expect(html).not.toContain("boot.ts");
+  });
+
+  it("build for development (testing, etc)", async () => {
+    let { exitCode } = await build(project);
+
+    expect(exitCode).toBe(0);
+  });
+
+  it("build for production", async () => {
+    let { exitCode } = await build(project, "production");
+
+    expect(exitCode).toBe(0);
+  });
+
+  it("has no TS files", async () => {
+    let results = globSync("app/**/*", {
+      exclude: ["node_modules", "dist"],
+      cwd: project.directory,
+    });
+    expect(results).toMatchInlineSnapshot(`
+      [
+        "app/app.js",
+        "app/boot.js",
+        "app/config.js",
+        "app/router.js",
+        "app/templates",
+        "app/templates/application.gjs",
+      ]
+    `);
+  });
+
+  it("when re-applying, it no-ops correctly", async () => {
+    let files = new Set(
+      globSync("**/*", { cwd: project.directory, exclude: ["node_modules", "dist"] }),
+    );
+
+    await reapply(project, []);
+
+    let filesAfter = new Set(
+      globSync("**/*", { cwd: project.directory, exclude: ["node_modules", "dist"] }),
+    );
+
+    expect(filesAfter).toEqual(files);
+    expect(files).toMatchInlineSnapshot(`
+      Set {
+        "README.md",
+        "app",
+        "babel.config.js",
+        "index.html",
+        "package.json",
+        "pnpm-lock.yaml",
+        "public",
+        "vite.config.mjs",
+        "public/manifest.json",
+        "app/app.js",
+        "app/boot.js",
+        "app/config.js",
+        "app/router.js",
+        "app/templates",
+        "app/templates/application.gjs",
+      }
+    `);
+  });
+});

package/src/bases/minimal-extension/files/.env.development

@@ -0,0 +1,8 @@
+# This file is committed to git and should not contain any secrets.
+# 
+# Vite recommends using .env.local or .env.[mode].local if you need to manage secrets
+# SEE: https://vite.dev/guide/env-and-mode.html#env-files for more information.
+
+
+# Default NODE_ENV with vite build --mode=test is production
+NODE_ENV=development

package/src/bases/minimal-extension/files/README.md

@@ -0,0 +1,36 @@
+# minimal-extension
+
+A [Manifest V3](https://developer.chrome.com/docs/extensions/develop/migrate/what-is-mv3) browser extension whose popup is an Ember app.
+
+## Developing
+
+The popup is a regular web page, so the fastest feedback loop is the vite dev server in a normal browser tab:
+
+```bash
+pnpm dev
+```
+
+To run as an actual extension, build (in watch mode) and load the `dist/` directory as an unpacked extension:
+
+```bash
+pnpm build:watch
+```
+
+- **Chrome / Edge / Brave**: `chrome://extensions` → enable "Developer mode" → "Load unpacked" → select `dist/`
+- **Firefox**: `about:debugging#/runtime/this-firefox` → "Load Temporary Add-on…" → select `dist/manifest.json`
+
+After a rebuild, re-open the popup (or reload the extension) to see changes.
+
+## Anatomy
+
+- `public/manifest.json` — the extension manifest; copied verbatim into `dist/`. Add [`background`](https://developer.chrome.com/docs/extensions/reference/manifest/background), [`content_scripts`](https://developer.chrome.com/docs/extensions/reference/manifest/content-scripts), permissions, and icons here as your extension grows.
+- `index.html` — the popup page (`action.default_popup`). Extension pages are served with a `script-src 'self'` Content-Security-Policy, so the app boots from `app/boot.ts` rather than an inline script.
+- `app/` — a normal Ember app. Routing uses `locationType: "none"`, since extension pages have no URL bar to bind to.
+
+## Building for release
+
+```bash
+pnpm build
+```
+
+Zip the contents of `dist/` and upload it to the extension store(s) of your choosing.

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

@@ -0,0 +1,21 @@
+/**
+ * Looking for services that come from addons?
+ *
+ * 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
+ * - 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
+ */
+import Application from "ember-strict-application-resolver";
+
+export default class App extends Application {
+  modules = {
+    ...import.meta.glob("./router.*", { eager: true }),
+    ...import.meta.glob("./templates/**/*", { eager: true }),
+    ...import.meta.glob("./services/**/*", { eager: true }),
+  };
+}

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

@@ -0,0 +1,8 @@
+/**
+ * Extension pages disallow inline scripts (`script-src 'self'`),
+ * so booting the app lives here instead of in index.html.
+ */
+import Application from "#app/app";
+import environment from "#config";
+
+Application.create(environment.APP);

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

@@ -0,0 +1,22 @@
+interface Config {
+  environment: "development" | "production";
+  locationType: "history" | "hash" | "none" | "auto";
+  rootURL: string;
+  EmberENV?: Record<string, unknown>;
+  APP: Record<string, unknown> & { rootElement?: string; autoboot?: boolean };
+}
+
+const ENV: Config = {
+  environment: import.meta.env.DEV ? "development" : "production",
+  rootURL: "/",
+  /**
+   * Extension pages live at chrome-extension://<id>/index.html (or
+   * moz-extension://), where history-based routing has nothing to bind
+   * to. "none" keeps routing fully programmatic.
+   */
+  locationType: "none",
+  EmberENV: {},
+  APP: {},
+};
+
+export default ENV;

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()],
+});