ember.nvp 1.0.0 → 1.2.0

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

@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+
+import { emberBabel } from "./babel.ts";
+
+describe("emberBabel", () => {
+  it("rejects templateTransforms combined with a config file", () => {
+    expect(() =>
+      emberBabel({ configFile: "./babel.config.js", templateTransforms: ["some-transform"] }),
+    ).toThrow(/pass the transforms/);
+  });
+
+  it("allows templateTransforms when config files are opted out", () => {
+    expect(() =>
+      emberBabel({ configFile: false, templateTransforms: ["some-transform"] }),
+    ).not.toThrow();
+  });
+});

package/packages/rolldown/src/babel.ts

@@ -4,6 +4,7 @@ import templateCompilation from "babel-plugin-ember-template-compilation";
 import decoratorTransforms from "decorator-transforms";
 import { loadPartialConfigSync } from "@babel/core";
 import type { PluginItem } from "@babel/core";
+import type { Transform } from "babel-plugin-ember-template-compilation";
 import type { Plugin } from "rolldown";
 
 export interface BabelOptions {
@@ -24,6 +25,15 @@ export interface BabelOptions {
    * Extra babel plugins to run, appended after the config's plugins.
    */
   plugins?: PluginItem[];
+  /**
+   * Template AST transforms (e.g. ember-scoped-css's `scopedCSS.template()`)
+   * passed to the default `babel-plugin-ember-template-compilation` entry.
+   *
+   * Only valid without a babel config file: with your own config, you list
+   * `babel-plugin-ember-template-compilation` yourself, so its `transforms`
+   * belong there.
+   */
+  templateTransforms?: Transform[];
   /**
    * Opt additional files into babel (see maybeBabel's `filter`). Use this to
    * cover addons that ship code needing babel (e.g. `ember-concurrency`).
@@ -63,7 +73,7 @@ function detectConfigFile(): string | undefined {
  *   consuming app resolves it (the library keeps `decorator-transforms` as
  *   a real dependency).
  */
-function defaultPlugins(): PluginItem[] {
+function defaultPlugins(templateTransforms?: Transform[]): PluginItem[] {
   return [
     [
       transformTypeScript,
@@ -73,7 +83,7 @@ function defaultPlugins(): PluginItem[] {
         allowDeclareFields: true,
       },
     ],
-    [templateCompilation, { targetFormat: "hbs" }],
+    [templateCompilation, { targetFormat: "hbs", transforms: templateTransforms ?? [] }],
     [
       decoratorTransforms,
       {
@@ -118,6 +128,14 @@ export function emberBabel(options: BabelOptions = {}): Plugin {
   };
 
   if (configFile) {
+    if (options.templateTransforms?.length) {
+      throw new Error(
+        `\`babel.templateTransforms\` cannot be combined with a babel config file (found ${configFile}). ` +
+          `Your config lists babel-plugin-ember-template-compilation itself, so pass the transforms ` +
+          `to its \`transforms\` option there instead.`,
+      );
+    }
+
     return maybeBabel({
       ...shared,
       configFile,
@@ -131,6 +149,6 @@ export function emberBabel(options: BabelOptions = {}): Plugin {
     // for one -- we provide the whole plugin list inline.
     configFile: false,
     babelrc: false,
-    plugins: defaultPlugins().concat(options.plugins ?? []),
+    plugins: defaultPlugins(options.templateTransforms).concat(options.plugins ?? []),
   }) as unknown as Plugin;
 }

package/packages/rolldown/src/config.ts

@@ -34,7 +34,7 @@ export function emberConfig(): TsdownPlugin {
     tsdownConfig(config: UserConfig) {
       config.sourcemap ??= true;
       config.clean ??= true;
-      config.dts ??= true;
+      config.dts ??= { sourcemap: true };
       config.outExtensions ??= () => ({ js: ".js", dts: ".d.ts" });
       config.report ??= false;
 

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

@@ -0,0 +1,366 @@
+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";
+
+interface Dist {
+  /** Sorted dist-relative paths of every emitted file. */
+  files: string[];
+  /** dist-relative path -> content, for every emitted .d.ts and .css file. */
+  contents: Record<string, string>;
+}
+
+let restoreCwd: (() => void) | undefined;
+
+afterEach(() => {
+  restoreCwd?.();
+  restoreCwd = undefined;
+});
+
+/**
+ * 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).
+ *
+ * Returns the emitted file list plus the full contents of every declaration
+ * and css file (js output is covered by transform.test.ts).
+ */
+async function buildFixture(files: Record<string, string>, entry: string[]): Promise<Dist> {
+  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()],
+  });
+
+  const distDir = path.join(dir, "dist");
+  const dist: Dist = { files: [], contents: {} };
+
+  for (const entry of await readdir(distDir, { withFileTypes: true, recursive: true })) {
+    if (!entry.isFile()) continue;
+
+    const relative = path.relative(distDir, path.join(entry.parentPath, entry.name));
+    dist.files.push(relative);
+
+    if (relative.endsWith(".d.ts") || relative.endsWith(".css")) {
+      dist.contents[relative] = await readFile(path.join(distDir, relative), "utf8");
+    }
+  }
+
+  dist.files.sort();
+
+  return dist;
+}
+
+/** One printable document of every captured file, for a single snapshot. */
+function printed(dist: Dist): string {
+  return Object.entries(dist.contents)
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([file, content]) => `//=== ${file}\n${content}`)
+    .join("\n");
+}
+
+describe("declarations (full ember() via tsdown)", () => {
+  it("emits .d.ts for an entry that type-imports from a non-entry .gts", async () => {
+    // Mirrors a design-system 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 dist = 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"],
+    );
+
+    expect(dist.files).toMatchInlineSnapshot(`
+      [
+        "index.d.ts",
+        "index.js",
+        "index.js.map",
+        "popup-CjMmUEVb.d.ts",
+        "popup-CjMmUEVb.d.ts.map",
+        "service.d.ts",
+        "service.d.ts.map",
+        "service.js",
+        "service.js.map",
+      ]
+    `);
+
+    expect(printed(dist)).toMatchInlineSnapshot(`
+      "//=== index.d.ts
+      import { t as Popup } from "./popup-CjMmUEVb.js";
+      export { Popup };
+      //=== popup-CjMmUEVb.d.ts
+      import Component from "@glimmer/component";
+      //#region src/popup.d.ts
+      interface PopupBlock {
+        open: () => void;
+      }
+      interface PopupSignature {
+        Element: HTMLDivElement;
+        Blocks: {
+          default: [PopupBlock];
+        };
+      }
+      declare class Popup extends Component<PopupSignature> {}
+      //#endregion
+      export { PopupBlock as n, Popup as t };
+      //# sourceMappingURL=popup-CjMmUEVb.d.ts.map
+      //=== service.d.ts
+      import { n as PopupBlock } from "./popup-CjMmUEVb.js";
+      //#region src/service.d.ts
+      declare class TooltipService {
+        registerPopup(context: PopupBlock): void;
+      }
+      //#endregion
+      export { TooltipService };
+      //# sourceMappingURL=service.d.ts.map"
+    `);
+  });
+
+  it("emits .d.ts when a .gts module is only ever type-imported", async () => {
+    // Nothing value-imports popup.gts, so its virtual module never enters the
+    // runtime graph: the only route to its declaration is the dts resolver
+    // loading it on demand. The declaration pipeline registers modules as
+    // their (virtual) source loads, so the import must resolve to the source
+    // id — a pre-rewritten `.d.ts` id skips that registration and dangles.
+    const dist = await buildFixture(
+      {
+        "src/service.ts": [
+          `import type { PopupBlock } from './components/popup.gts';`,
+          ``,
+          `export class TooltipService {`,
+          `  registerPopup(context: PopupBlock): void {`,
+          `    void context;`,
+          `  }`,
+          `}`,
+        ].join("\n"),
+        "src/components/popup.gts": [
+          `import Component from '@glimmer/component';`,
+          ``,
+          `export interface PopupBlock {`,
+          `  open: () => void;`,
+          `}`,
+          ``,
+          `export default class Popup extends Component {`,
+          `  <template>popup</template>`,
+          `}`,
+        ].join("\n"),
+      },
+      ["./src/service.ts"],
+    );
+
+    expect(dist.files).toMatchInlineSnapshot(`
+      [
+        "service.d.ts",
+        "service.d.ts.map",
+        "service.js",
+        "service.js.map",
+      ]
+    `);
+
+    expect(printed(dist)).toMatchInlineSnapshot(`
+      "//=== service.d.ts
+      import "@glimmer/component";
+      //#region src/components/popup.d.ts
+      interface PopupBlock {
+        open: () => void;
+      }
+      //#endregion
+      //#region src/service.d.ts
+      declare class TooltipService {
+        registerPopup(context: PopupBlock): void;
+      }
+      //#endregion
+      export { TooltipService };
+      //# sourceMappingURL=service.d.ts.map"
+    `);
+  });
+
+  it("emits .d.ts for a .gts that type-imports another (otherwise unimported) .gts", async () => {
+    // A nested component type-imports a sibling from the parent directory;
+    // its declaration then carries a relative source specifier for a module
+    // that exists only in the bundler's graph (never on disk, never in the
+    // runtime graph).
+    const dist = await buildFixture(
+      {
+        "src/index.ts": `export { default as OptionList } from './components/select/option-list.gts';`,
+        "src/components/select/option-list.gts": [
+          `import Component from '@glimmer/component';`,
+          `import type { PopupBlock } from '../popup.gts';`,
+          ``,
+          `export interface OptionListArgs {`,
+          `  registerPopup: (context: PopupBlock) => void;`,
+          `}`,
+          ``,
+          `export default class OptionList extends Component {`,
+          `  <template>options</template>`,
+          `}`,
+        ].join("\n"),
+        "src/components/popup.gts": [
+          `import Component from '@glimmer/component';`,
+          ``,
+          `export interface PopupBlock {`,
+          `  open: () => void;`,
+          `}`,
+          ``,
+          `export default class Popup extends Component {`,
+          `  <template>popup</template>`,
+          `}`,
+        ].join("\n"),
+      },
+      ["./src/index.ts"],
+    );
+
+    expect(dist.files).toMatchInlineSnapshot(`
+      [
+        "index.d.ts",
+        "index.d.ts.map",
+        "index.js",
+        "index.js.map",
+      ]
+    `);
+
+    expect(printed(dist)).toMatchInlineSnapshot(`
+      "//=== index.d.ts
+      import Component from "@glimmer/component";
+      //#region src/components/select/option-list.d.ts
+      declare class OptionList extends Component {}
+      //#endregion
+      export { OptionList };
+      //# sourceMappingURL=index.d.ts.map"
+    `);
+  });
+
+  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 makes both work.
+    const dist = 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"],
+    );
+
+    expect(dist.files).toMatchInlineSnapshot(`
+      [
+        "index.d.ts",
+        "index.js",
+        "index.js.map",
+        "popup-CytznrQX.d.ts",
+        "popup-CytznrQX.d.ts.map",
+        "service.d.ts",
+        "service.d.ts.map",
+        "service.js",
+        "service.js.map",
+        "style.css",
+      ]
+    `);
+
+    expect(printed(dist)).toMatchInlineSnapshot(`
+      "//=== index.d.ts
+      import { t as Popup } from "./popup-CytznrQX.js";
+      export { Popup };
+      //=== popup-CytznrQX.d.ts
+      import Component from "@glimmer/component";
+      //#region src/popup.d.ts
+      interface PopupBlock {
+        open: () => void;
+      }
+      declare class Popup extends Component {}
+      //#endregion
+      export { PopupBlock as n, Popup as t };
+      //# sourceMappingURL=popup-CytznrQX.d.ts.map
+      //=== service.d.ts
+      import { n as PopupBlock } from "./popup-CytznrQX.js";
+      //#region src/service.d.ts
+      declare function register(context: PopupBlock): void;
+      //#endregion
+      export { register };
+      //# sourceMappingURL=service.d.ts.map
+      //=== style.css
+      .popup {
+        color: red;
+      }
+      "
+    `);
+  });
+});

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

@@ -0,0 +1,208 @@
+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 };
+      "
+    `);
+  });
+
+  it("emits sourcemaps for the specifier rewrite (no SOURCEMAP_BROKEN warnings)", async () => {
+    const dir = await mkdtemp(path.join(tmpdir(), "ember-rolldown-map-"));
+
+    const files = {
+      // index.ts contains a `.gts` specifier, so it goes through the rewrite.
+      "index.ts": `export { default as Foo } from './foo.gts';`,
+      "foo.gts": `<template>Foo</template>`,
+    };
+
+    for (const [relative, source] of Object.entries(files)) {
+      await writeFile(path.join(dir, relative), source, "utf8");
+    }
+
+    const warnings: string[] = [];
+    const build = await rolldown({
+      input: path.join(dir, "index.ts"),
+      plugins: [emberTransform()],
+      external: (id) => !(id.startsWith(".") || path.isAbsolute(id)),
+      onwarn(warning) {
+        warnings.push(warning.code ?? String(warning));
+      },
+    });
+
+    const { output } = await build.generate({ format: "es", sourcemap: true });
+
+    expect(warnings.filter((code) => code === "SOURCEMAP_BROKEN")).toEqual([]);
+
+    const chunk = output.find((entry) => entry.type === "chunk" && "map" in entry);
+    expect(chunk).toBeDefined();
+    // The composed map traces through the rewrite back to the original .gts
+    // source (content-tag's map survives the specifier-rewrite pass).
+    const sources = (chunk as { map?: { sources: string[] } }).map?.sources ?? [];
+    expect(sources.some((source) => source.endsWith("foo.gts"))).toBe(true);
+  });
+});