ember.nvp 1.0.0 → 1.1.0

package/packages/rolldown/src/dts.test.ts

@@ -0,0 +1,166 @@
+import { mkdtemp, mkdir, readdir, readFile, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import path from "node:path";
+import { build } from "tsdown";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { ember } from "../index.ts";
+
+/**
+ * Drives `ember()` through a real tsdown build (the dts pipeline included).
+ * `files` is a map of relative path -> source, written into a temp dir that
+ * becomes the cwd for the build (the externals and isolated-declarations
+ * plugins read package.json / tsconfig.json from cwd, like the tsdown CLI).
+ */
+async function buildFixture(files: Record<string, string>, entry: string[]): Promise<string> {
+  const dir = await mkdtemp(path.join(tmpdir(), "ember-rolldown-dts-"));
+
+  const withDefaults: Record<string, string> = {
+    "package.json": JSON.stringify({
+      name: "fixture",
+      version: "0.0.0",
+      type: "module",
+      exports: { "./*": { types: "./dist/*.d.ts", default: "./dist/*.js" } },
+    }),
+    "tsconfig.json": JSON.stringify({
+      compilerOptions: { isolatedDeclarations: true, declaration: true },
+    }),
+    ...files,
+  };
+
+  for (const [relative, source] of Object.entries(withDefaults)) {
+    const full = path.join(dir, relative);
+    await mkdir(path.dirname(full), { recursive: true });
+    await writeFile(full, source, "utf8");
+  }
+
+  const previousCwd = process.cwd();
+  process.chdir(dir);
+  restoreCwd = () => process.chdir(previousCwd);
+
+  await build({
+    entry,
+    config: false,
+    logLevel: "silent",
+    plugins: [ember()],
+  });
+
+  return dir;
+}
+
+let restoreCwd: (() => void) | undefined;
+
+afterEach(() => {
+  restoreCwd?.();
+  restoreCwd = undefined;
+});
+
+async function listFiles(dir: string): Promise<string[]> {
+  const out: string[] = [];
+  for (const entry of await readdir(dir, { withFileTypes: true, recursive: true })) {
+    if (entry.isFile()) {
+      out.push(path.relative(dir, path.join(entry.parentPath, entry.name)));
+    }
+  }
+  return out.sort();
+}
+
+describe("declarations (full ember() via tsdown)", () => {
+  it("emits .d.ts for an entry that type-imports from a non-entry .gts", async () => {
+    // Mirrors the luna-core shape: the component is in the runtime graph via
+    // the index entry, while a second entry (a service) only *type*-imports
+    // from it. The service's declaration then references the component's
+    // (virtual) .d.ts, which only exists in the bundler's module graph.
+    const dir = await buildFixture(
+      {
+        "src/index.ts": `export { default as Popup } from './popup.gts';`,
+        "src/service.ts": [
+          `import type { PopupBlock } from './popup.gts';`,
+          ``,
+          `export class TooltipService {`,
+          `  registerPopup(context: PopupBlock): void {`,
+          `    void context;`,
+          `  }`,
+          `}`,
+        ].join("\n"),
+        "src/popup.gts": [
+          `import Component from '@glimmer/component';`,
+          ``,
+          `export interface PopupBlock {`,
+          `  open: () => void;`,
+          `}`,
+          ``,
+          `export interface PopupSignature {`,
+          `  Element: HTMLDivElement;`,
+          `  Blocks: { default: [PopupBlock] };`,
+          `}`,
+          ``,
+          `export default class Popup extends Component<PopupSignature> {`,
+          `  <template>popup</template>`,
+          `}`,
+        ].join("\n"),
+      },
+      ["./src/index.ts", "./src/service.ts"],
+    );
+
+    const dist = await listFiles(path.join(dir, "dist"));
+
+    expect(dist).toContain("index.d.ts");
+    expect(dist).toContain("service.d.ts");
+
+    const serviceDts = await readFile(path.join(dir, "dist/service.d.ts"), "utf8");
+
+    // The PopupBlock type must be reachable: either inlined into the bundled
+    // declaration or imported via a specifier that exists in dist.
+    expect(serviceDts).toContain("PopupBlock");
+    expect(serviceDts).not.toContain(".gts");
+  });
+
+  it("bundles co-located CSS (via @tsdown/css) without breaking declarations", async () => {
+    // Ember components routinely import a co-located .css file. Without CSS
+    // handling the build dies on tsdown's css-guard — and because the failing
+    // component module never loads, every declaration that references it
+    // dangles (surfacing as misleading UNLOADABLE_DEPENDENCY errors on
+    // <component>.d.ts). @tsdown/css (this package's peer) makes both work.
+    const dir = await buildFixture(
+      {
+        "src/index.ts": `export { default as Popup } from './popup.gts';`,
+        "src/service.ts": [
+          `import type { PopupBlock } from './popup.gts';`,
+          ``,
+          `export function register(context: PopupBlock): void {`,
+          `  void context;`,
+          `}`,
+        ].join("\n"),
+        "src/popup.css": `.popup { color: red; }`,
+        "src/popup.gts": [
+          `import './popup.css';`,
+          `import Component from '@glimmer/component';`,
+          ``,
+          `export interface PopupBlock {`,
+          `  open: () => void;`,
+          `}`,
+          ``,
+          `export default class Popup extends Component {`,
+          `  <template>popup</template>`,
+          `}`,
+        ].join("\n"),
+      },
+      ["./src/index.ts", "./src/service.ts"],
+    );
+
+    const dist = await listFiles(path.join(dir, "dist"));
+
+    const cssFiles = dist.filter((file) => file.endsWith(".css"));
+    expect(cssFiles).toHaveLength(1);
+
+    const css = await readFile(path.join(dir, "dist", cssFiles[0]!), "utf8");
+    expect(css).toContain(".popup");
+
+    // The cascade regression: the css-importing component's declaration must
+    // still be generated and reachable from the service's declaration.
+    const serviceDts = await readFile(path.join(dir, "dist/service.d.ts"), "utf8");
+    expect(serviceDts).toContain("PopupBlock");
+    expect(serviceDts).not.toContain(".gts");
+  });
+});

package/packages/rolldown/src/transform.test.ts

@@ -0,0 +1,173 @@
+import { mkdtemp, mkdir, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import path from "node:path";
+import { rolldown } from "rolldown";
+import { describe, expect, it } from "vitest";
+
+import { emberTransform } from "./transform.ts";
+
+/**
+ * Drives the plugin through a real rolldown build. `files` is a map of
+ * relative path -> source; the build entry is `index.ts`. Every bare (package)
+ * specifier is marked external so the build only exercises the local
+ * `.gts`/`.gjs`/`.ts` handling and doesn't need real dependencies installed.
+ * Returns the concatenated code of every emitted chunk.
+ */
+async function bundle(files: Record<string, string>): Promise<string> {
+  const dir = await mkdtemp(path.join(tmpdir(), "ember-rolldown-build-"));
+
+  for (const [relative, source] of Object.entries(files)) {
+    const full = path.join(dir, relative);
+    await mkdir(path.dirname(full), { recursive: true });
+    await writeFile(full, source, "utf8");
+  }
+
+  const isLocal = (id: string) => id.startsWith(".") || id.startsWith("/") || path.isAbsolute(id);
+
+  const build = await rolldown({
+    input: path.join(dir, "index.ts"),
+    plugins: [emberTransform()],
+    external: (id) => !isLocal(id),
+    onwarn() {},
+  });
+
+  const { output } = await build.generate({ format: "es" });
+
+  const code = output
+    .filter((chunk): chunk is typeof chunk & { code: string } => "code" in chunk)
+    .map((chunk) => chunk.code)
+    .join("\n");
+
+  // rolldown's `//#region <path>` comments reference the random temp dir;
+  // collapse them to the bare filename so snapshots stay deterministic.
+  return code.replace(/(\/\/#region ).*\/([^/\n]+)$/gm, "$1$2");
+}
+
+describe("emberTransform (full plugin via rolldown)", () => {
+  it("compiles a .gts module's <template> and keeps bare imports external", async () => {
+    const code = await bundle({
+      "index.ts": `export { default as Foo } from './foo.gts';`,
+      "foo.gts": [
+        `import Component from '@glimmer/component';`,
+        `export default class Foo extends Component {`,
+        `  <template>Hello</template>`,
+        `}`,
+      ].join("\n"),
+    });
+
+    // <template> is gone, replaced by a content-tag `template(...)` call.
+    expect(code).not.toContain("<template>");
+    expect(code).toContain("template(");
+    // The bare import survived as an external dependency.
+    expect(code).toContain(`from "@glimmer/component"`);
+    // ...and it pulls in the template-compiler runtime import.
+    expect(code).toContain("@ember/template-compiler");
+
+    expect(code).toMatchInlineSnapshot(`
+      "import { template } from "@ember/template-compiler";
+      import Component from "@glimmer/component";
+      //#region foo.ts
+      var Foo = class extends Component {
+      	static {
+      		template(\`Hello\`, {
+      			component: this,
+      			eval() {
+      				return eval(arguments[0]);
+      			}
+      		});
+      	}
+      };
+      //#endregion
+      export { Foo };
+      "
+    `);
+  });
+
+  it("compiles .gjs alongside .gts and plain .ts in one graph", async () => {
+    const code = await bundle({
+      "index.ts": [
+        `export { default as Foo } from './foo.gts';`,
+        `export { greet } from './util.gjs';`,
+        `export { helper } from './plain.ts';`,
+      ].join("\n"),
+      "foo.gts": `<template>Foo</template>`,
+      "util.gjs": [
+        `export function greet() { return 'hi'; }`,
+        `<template>{{greet}}</template>`,
+      ].join("\n"),
+      "plain.ts": `export function helper() { return 1; }`,
+    });
+
+    expect(code).not.toContain("<template>");
+    expect(code).toContain("function greet()");
+    expect(code).toContain("function helper()");
+    expect(code).toContain("export {");
+
+    expect(code).toMatchInlineSnapshot(`
+      "import { template } from "@ember/template-compiler";
+      //#region foo.ts
+      var foo_default = template(\`Foo\`, { eval() {
+      	return eval(arguments[0]);
+      } });
+      //#endregion
+      //#region util.js
+      function greet() {
+      	return "hi";
+      }
+      var util_default = template(\`{{greet}}\`, { eval() {
+      	return eval(arguments[0]);
+      } });
+      //#endregion
+      //#region plain.ts
+      function helper() {
+      	return 1;
+      }
+      //#endregion
+      export { foo_default as Foo, greet, helper };
+      "
+    `);
+  });
+
+  it("resolves a .gts module that imports another .gts relatively", async () => {
+    const code = await bundle({
+      "index.ts": `export { default as Page } from './page.gts';`,
+      "page.gts": [
+        `import Widget from './widget.gts';`,
+        `export default class Page {`,
+        `  Widget = Widget;`,
+        `  <template><Widget /></template>`,
+        `}`,
+      ].join("\n"),
+      "widget.gts": `<template>widget</template>`,
+    });
+
+    // Both templates compiled, and the relative .gts import resolved (bundled).
+    expect(code).not.toContain("<template>");
+    expect(code).not.toContain(".gts");
+    expect(code).toContain("template(");
+
+    expect(code).toMatchInlineSnapshot(`
+      "import { template } from "@ember/template-compiler";
+      //#region widget.ts
+      var widget_default = template(\`widget\`, { eval() {
+      	return eval(arguments[0]);
+      } });
+      //#endregion
+      //#region page.ts
+      var Page = class {
+      	Widget = widget_default;
+      	static {
+      		template(\`<Widget />\`, {
+      			component: this,
+      			eval() {
+      				return eval(arguments[0]);
+      			}
+      		});
+      	}
+      };
+      //#endregion
+      export { Page };
+      "
+    `);
+  });
+});

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;