ember.nvp 1.6.0 → 1.7.1

package/src/bases/minimal-custom-element/files/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "minimal-custom-element",
+  "version": "0.0.0",
+  "private": true,
+  "description": "An Ember component, packaged as a custom element",
+  "license": "MIT",
+  "author": "",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./register": {
+      "types": "./dist/register.d.ts",
+      "default": "./dist/register.js"
+    },
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "default": "./dist/*.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsdown",
+    "prepack": "tsdown",
+    "start": "tsdown --watch"
+  },
+  "devDependencies": {
+    "@ember/library-tsconfig": "^2.0.0",
+    "@glimmer/component": "^2.1.1",
+    "@nullvoxpopuli/ember-rolldown": "workspace:*",
+    "decorator-transforms": "^2.3.2",
+    "ember-source": "~7.2.0",
+    "tsdown": "^0.22.7",
+    "typescript": "^6.0.3"
+  },
+  "engines": {
+    "node": ">= 24"
+  },
+  "ember": {
+    "edition": "octane"
+  }
+}

package/src/bases/minimal-custom-element/files/src/components/counter.gts

@@ -0,0 +1,27 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { on } from "@ember/modifier";
+
+export interface CounterSignature {
+  Element: HTMLDivElement;
+  Args: {
+    label: string;
+    step: number;
+  };
+}
+
+export default class Counter extends Component<CounterSignature> {
+  @tracked count = 0;
+
+  increment = (): void => {
+    this.count += this.args.step;
+  };
+
+  <template>
+    <div ...attributes>
+      <span class="label">{{@label}}</span>:
+      <output>{{this.count}}</output>
+      <button type="button" {{on "click" this.increment}}>+{{@step}}</button>
+    </div>
+  </template>
+}

package/src/bases/minimal-custom-element/files/src/element.ts

@@ -0,0 +1,45 @@
+import { renderComponent } from "@ember/renderer";
+import { trackedObject } from "@ember/reactive/collections";
+
+import Counter from "./components/counter.gts";
+
+/**
+ * Every element renders through one shared owner.
+ *
+ * ember keeps one renderer per owner,
+ * so this is one renderer for the whole library instead of one per element.
+ */
+const owner = {};
+
+export class CounterElement extends HTMLElement {
+  static observedAttributes: string[] = ["label", "step"];
+
+  /**
+   * The rendered component reads its args from this object.
+   *
+   * A write to a property here re-renders the component.
+   */
+  #args = trackedObject({ label: "Count", step: 1 });
+
+  #rendered: ReturnType<typeof renderComponent> | undefined;
+
+  connectedCallback(): void {
+    this.#rendered = renderComponent(Counter, { into: this, owner, args: this.#args });
+  }
+
+  disconnectedCallback(): void {
+    this.#rendered?.destroy();
+    this.#rendered = undefined;
+  }
+
+  attributeChangedCallback(name: string, _previous: string | null, value: string | null): void {
+    switch (name) {
+      case "label":
+        this.#args.label = value ?? "Count";
+        break;
+      case "step":
+        this.#args.step = Number(value ?? 1);
+        break;
+    }
+  }
+}

package/src/bases/minimal-custom-element/files/src/index.ts

@@ -0,0 +1,2 @@
+export { CounterElement } from "./element.ts";
+export { default as Counter, type CounterSignature } from "./components/counter.gts";

package/src/bases/minimal-custom-element/files/src/register.ts

@@ -0,0 +1,5 @@
+import { CounterElement } from "./index.ts";
+
+if (!customElements.get("minimal-custom-element")) {
+  customElements.define("minimal-custom-element", CounterElement);
+}

package/src/bases/minimal-custom-element/files/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@ember/library-tsconfig",
+  "include": ["src"],
+  "compilerOptions": {
+    "rootDir": "./src",
+    "lib": ["esnext", "dom", "dom.iterable"],
+    "isolatedDeclarations": true,
+    "types": ["ember-source/types", "@glint/ember-tsc/types"]
+  }
+}

package/src/bases/minimal-custom-element/files/tsdown.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from "tsdown";
+import { ember } from "@nullvoxpopuli/ember-rolldown";
+
+export default defineConfig({
+  entry: ["./src/index.ts", "./src/register.ts"],
+  plugins: [ember({ bundle: true })],
+});

package/src/bases/minimal-custom-element/index.js

@@ -0,0 +1,212 @@
+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";
+
+const TEMPLATE_TAG_NAME = "minimal-custom-element";
+
+/**
+ * Minimal Custom Element Base
+ *
+ * The minimal-library toolchain, around one pattern:
+ * - a `<template>` component (`src/components/counter.gts`)
+ * - a custom element that renders it with `renderComponent`,
+ *   and forwards its observed attributes as reactive args (`src/element.ts`)
+ * - `src/index.ts` exports the element class and the component
+ * - `src/register.ts` defines the tag, for consumers to import as a side effect
+ *
+ * Built in bundle mode: ember ships inside the package.
+ *
+ * Like minimal-library:
+ * - built with tsdown + @nullvoxpopuli/ember-rolldown
+ * - No babel.config.js
+ * - No testing framework
+ * - No linting or formatting
+ *
+ * Testing, linting, formatting, etc. are opt-in via layers.
+ */
+export default {
+  label: "Minimal Custom Element Base",
+  description: "An Ember component packaged as a custom element (web component)",
+
+  /**
+   * 1. Apply files
+   *   a. Remove TS if needed
+   * 2. Update name(s)
+   * 3. Make publishable
+   * 4. Remove TS deps/files/config if needed
+   * 5. Upgrade in-range dependencies
+   * 6. Update an existing babel config, if any
+   *
+   * @param {import('#utils/project.js').Project} project
+   */
+  async run(project) {
+    await applyFiles(project);
+    await updateName(project);
+    await makePublishable(project);
+    await makeJavaScript(project);
+    await upgradeDependencies(project);
+    await updateBabelConfig(project);
+  },
+};
+
+/**
+ * The tag a generated project registers: the package name without its scope.
+ *
+ * A custom element name must contain a hyphen,
+ * so an unhyphenated package name gets an `-element` suffix.
+ *
+ * @param {string} packageName
+ * @returns {string}
+ */
+export function tagNameFor(packageName) {
+  let name = packageName.replace(/^@[^/]+\//, "");
+
+  return name.includes("-") ? name : `${name}-element`;
+}
+
+/**
+ * @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);
+
+  let tagName = tagNameFor(project.desires.name);
+
+  for (let file of ["src/register.ts", "src/register.js", "README.md"]) {
+    await replaceInFile(project, file, TEMPLATE_TAG_NAME, tagName);
+  }
+}
+
+/**
+ * @param {import('#utils/project.js').Project} project
+ * @param {string} relativePath
+ * @param {string} search
+ * @param {string} replacement
+ */
+async function replaceInFile(project, relativePath, search, replacement) {
+  if (!project.hasFile(relativePath)) return;
+
+  let path = project.path(relativePath);
+  let contents = await readFile(path, "utf-8");
+
+  await writeFile(path, contents.replaceAll(search, replacement));
+}
+
+/**
+ * The template's package.json is `private: true` so it can never be
+ * published from this repo; the generated library exists to be published,
+ * so the flag is removed entirely.
+ *
+ * @param {import('#utils/project.js').Project} project
+ */
+async function makePublishable(project) {
+  await packageJson.modify((json) => {
+    delete json.private;
+  }, project.directory);
+}
+
+/**
+ * When the project is JavaScript (no typescript layer):
+ * - remove the TS toolchain
+ * - drop the tsconfig
+ * - point the build at the emitted `.js` entries
+ *   (declarations can't be produced without types)
+ *
+ * @param {import('#utils/project.js').Project} project
+ */
+async function makeJavaScript(project) {
+  if (await project.hasOrWantsLayer("typescript")) return;
+
+  await packageJson.removeDevDependencies(
+    ["@babel/plugin-transform-typescript", "@ember/library-tsconfig", "typescript"],
+    project.directory,
+  );
+
+  await project.removeFile("tsconfig.json");
+
+  await removeTypesExports(project);
+  await pointBuildAtJavaScript(project);
+}
+
+/**
+ * No declarations are emitted for a JavaScript library, so the `types`
+ * export conditions would point at files that never exist.
+ *
+ * @param {import('#utils/project.js').Project} project
+ */
+async function removeTypesExports(project) {
+  await packageJson.modify((json) => {
+    for (let condition of Object.values(json.exports ?? {})) {
+      if (condition && typeof condition === "object") {
+        delete condition.types;
+      }
+    }
+  }, project.directory);
+}
+
+/**
+ * Rewrites the tsdown config so it builds the JavaScript entries and stops
+ * emitting declarations (defineConfig defaults to `dts: true`).
+ *
+ * @param {import('#utils/project.js').Project} project
+ */
+async function pointBuildAtJavaScript(project) {
+  let configPath = project.path("tsdown.config.js");
+  let contents = await readFile(configPath, "utf-8");
+
+  contents = contents.replace(
+    `entry: ["./src/index.ts", "./src/register.ts"],`,
+    `entry: ["./src/index.js", "./src/register.js"],\n  dts: false,`,
+  );
+
+  await writeFile(configPath, contents);
+}
+
+/**
+ * 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);
+}
+
+/**
+ * The base doesn't emit a babel.config.js, but this can run over an
+ * existing project that has one -- and a JavaScript project's config
+ * must not reference the TS plugin.
+ *
+ * @param {import('#utils/project.js').Project} project
+ */
+async function updateBabelConfig(project) {
+  if (await project.hasOrWantsLayer("typescript")) return;
+  if (!project.hasFile("babel.config.js")) return;
+
+  await removeConfiguredPlugin(project, "@babel/plugin-transform-typescript");
+}

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

@@ -4,18 +4,21 @@ A [Manifest V3](https://developer.chrome.com/docs/extensions/develop/migrate/wha
 
 ## Developing
 
-The popup is a regular web page, so the fastest feedback loop is the vite dev server in a normal browser tab:
+The popup is a regular web page.
+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:
+To run it as an extension, build in watch mode:
 
 ```bash
 pnpm build:watch
 ```
 
+Then load the `dist/` directory as an unpacked extension:
+
 - **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`
 
@@ -23,9 +26,14 @@ 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.
+- `public/manifest.json` is the extension manifest. It is 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` is the popup page (`action.default_popup`).
+  Extension pages forbid inline scripts, so the app boots from `app/boot.ts`.
+- `app/` is a normal Ember app.
+  Extension pages have no URL bar, so routing uses `locationType: "none"`.
 
 ## Building for release
 

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

@@ -1,11 +1,10 @@
 /**
  * Looking for services that come from addons?
  *
+ * App-tree merging from libraries is not supported.
  * 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
+ * For services, look 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

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

@@ -10,9 +10,11 @@ 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.
+   * Extension pages live at chrome-extension://<id>/index.html
+   * (or moz-extension://).
+   *
+   * History-based routing has nothing to bind to there.
+   * "none" keeps routing fully programmatic.
    */
   locationType: "none",
   EmberENV: {},

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

@@ -12,8 +12,8 @@ import { removeConfiguredPlugin } from "#utils/babel.js";
  * 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)
+ * - 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
@@ -25,8 +25,8 @@ export default {
   /**
    * 1. Apply files
    *   a. Remove TS if needed
-   * 2. Remove TS deps/files if needed
-   * 3. Update name(s)
+   * 2. Update name(s)
+   * 3. Remove TS deps/files if needed
    * 4. Upgrade in-range dependencies
    * 5. Update an existing babel config, if any
    *
@@ -42,6 +42,8 @@ export default {
 };
 
 /**
+ * A JavaScript project's babel config must not reference the TS plugin.
+ *
  * @param {import('#utils/project.js').Project} project
  */
 async function updateBabelConfig(project) {
@@ -60,7 +62,9 @@ async function applyFiles(project) {
 }
 
 /**
- * Operates on known files where the name matters
+ * Operates on known files where the name matters.
+ *
+ * The extension's display name lives in public/manifest.json.
  *
  * @param {import('#utils/project.js').Project} project
  */
@@ -86,10 +90,10 @@ async function makeJavaScript(project) {
   if (await project.hasOrWantsLayer("typescript")) return;
 
   /**
-   * We don't actually remove anything, because we want intellisense for JS
+   * Intellisense for JS needs some of these,
+   * but minimal means minimal.
    *
-   * But perhaps for the sake of minimal, we do remoev it.
-   * And we add a layer later for JSDoc ased TS or something
+   * A later layer for JSDoc-based TS can add them back.
    */
   await packageJson.removeDevDependencies(
     [
@@ -110,9 +114,10 @@ async function makeJavaScript(project) {
   }, 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.
+   * 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;
 

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

@@ -24,16 +24,17 @@ pnpm start
 
 ## Structure
 
-- `src/` — your library source. Author components in `.gts`/`.gjs`
-  (template-tag) and plain modules in `.ts`/`.js`.
-- `src/index.ts` — the public entry point. Everything a consumer can import
-  must be re-exported from here (or added as an entry in `tsdown.config.js`).
-- `dist/` — the built output that gets published (git-ignored).
+- `src/` is your library source.
+  Author components in `.gts`/`.gjs` (template-tag) and plain modules in `.ts`/`.js`.
+- `src/index.ts` is the public entry point.
+  Everything a consumer can import must be re-exported from here,
+  or added as an entry in `tsdown.config.js`.
+- `dist/` is the built output that gets published (git-ignored).
 
 Declarations are emitted with
 [isolated declarations](https://www.typescriptlang.org/tsconfig/#isolatedDeclarations),
-so every exported value needs an explicit type annotation — in particular,
-annotate exported template-only components with `TOC<...>`.
+so every exported value needs an explicit type annotation.
+In particular, annotate exported template-only components with `TOC<...>`.
 
 ## Publishing
 

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

@@ -11,9 +11,9 @@ import { removeConfiguredPlugin } from "#utils/babel.js";
  * Provides the absolute bare minimum for an Ember v2 library (addon):
  * - type: "module" in package.json
  * - built with tsdown + @nullvoxpopuli/ember-rolldown
- * - a sample `<template>` component and a plain module
- * - No babel.config.js: ember() covers TS stripping, template compilation,
- *   and decorators
+ * - an empty src/ with an index entry
+ * - No babel.config.js
+ *   (ember() covers TS stripping, template compilation, and decorators)
  * - No testing framework
  * - No linting or formatting
  *
@@ -65,8 +65,10 @@ async function updateName(project) {
 }
 
 /**
- * The template's package.json is `private: true` so it can never be
- * published from this repo; the generated library exists to be published,
+ * The template's package.json is `private: true`,
+ * so it can never be published from this repo.
+ *
+ * The generated library exists to be published,
  * so the flag is removed entirely.
  *
  * @param {import('#utils/project.js').Project} project
@@ -78,9 +80,11 @@ async function makePublishable(project) {
 }
 
 /**
- * When the project is JavaScript (no typescript layer), remove the TS
- * toolchain, drop the tsconfig, and point the build at the emitted `.js`
- * entry (declarations can't be produced without types).
+ * When the project is JavaScript (no typescript layer):
+ * - remove the TS toolchain
+ * - drop the tsconfig
+ * - point the build at the emitted `.js` entry
+ *   (declarations can't be produced without types)
  *
  * @param {import('#utils/project.js').Project} project
  */
@@ -99,8 +103,8 @@ async function makeJavaScript(project) {
 }
 
 /**
- * No declarations are emitted for a JavaScript library, so the `types`
- * export conditions would point at files that never exist.
+ * No declarations are emitted for a JavaScript library,
+ * so the `types` export conditions would point at files that never exist.
  *
  * @param {import('#utils/project.js').Project} project
  */
@@ -115,8 +119,9 @@ async function removeTypesExports(project) {
 }
 
 /**
- * Rewrites the tsdown config so it builds the JavaScript entry and stops
- * emitting declarations (defineConfig defaults to `dts: true`).
+ * Rewrites the tsdown config so it:
+ * - builds the JavaScript entry
+ * - stops emitting declarations (defineConfig defaults to `dts: true`)
  *
  * @param {import('#utils/project.js').Project} project
  */
@@ -152,9 +157,10 @@ async function upgradeDependencies(project) {
 }
 
 /**
- * The base doesn't emit a babel.config.js, but this can run over an
- * existing project that has one -- and a JavaScript project's config
- * must not reference the TS plugin.
+ * The base doesn't emit a babel.config.js,
+ * but this can run over an existing project that has one.
+ *
+ * A JavaScript project's babel config must not reference the TS plugin.
  *
  * @param {import('#utils/project.js').Project} project
  */

package/src/cli/args.js

@@ -13,7 +13,7 @@ const { values } = parseArgs({
 
     type: {
       type: "string",
-      choices: ["app", "addon", "library"],
+      choices: ["app", "addon", "library", "extension", "custom-element"],
     },
 
     confirm: {

package/src/cli/generator.js

@@ -3,6 +3,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 baseCustomElement from "#bases/minimal-custom-element";
 import { consolidateLintingScripts } from "../consolidators/linting.js";
 import { hasGit } from "#utils/git.js";
 /**
@@ -28,6 +29,9 @@ export async function generateProject(project, replaceOrUpdate) {
     case "extension":
       await baseExtension.run(project);
       break;
+    case "custom-element":
+      await baseCustomElement.run(project);
+      break;
   }
 
   /**