ngwr 9.1.0 → 10.1.0

package/schematics/icon-set/schema.json

@@ -8,12 +8,17 @@
       "type": "string",
       "default": "icons",
       "description": "Output file name (without extension).",
-      "$default": { "$source": "argv", "index": 0 }
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      }
     },
     "project": {
       "type": "string",
       "description": "Target Angular project. Defaults to the workspace default project.",
-      "$default": { "$source": "projectName" }
+      "$default": {
+        "$source": "projectName"
+      }
     },
     "path": {
       "type": "string",
@@ -27,7 +32,7 @@
     },
     "icons": {
       "type": "string",
-      "description": "Comma-separated list of ngwr icon names (e.g. `plus,trash,checkmark`). Unknown names are flagged but not blocked."
+      "description": "Comma-separated icon names from the curated sets (e.g. `add,trash,checkmark`). Names with no lucide mapping are reported and skipped."
     },
     "exportName": {
       "type": "string",

package/schematics/ng-add/index.js

@@ -10,14 +10,26 @@ const schematics_1 = require("@angular-devkit/schematics");
 const tasks_1 = require("@angular-devkit/schematics/tasks");
 const dependencies_1 = require("@schematics/angular/utility/dependencies");
 const workspace_1 = require("@schematics/angular/utility/workspace");
-/** Base peers, regardless of prompt answers. */
-const BASE_PEERS = [['@angular/cdk', '>=22.0.0']];
+/**
+ * Base peers, regardless of prompt answers.
+ *
+ * `lucide` is here because the bootstrap snippet this schematic prints registers
+ * icons through the lucide adapter — leaving it out made the very first snippet
+ * a consumer pastes fail to resolve.
+ */
+const BASE_PEERS = [
+    ['@angular/cdk', '>=22.0.0'],
+    ['lucide', '>=1.0.0'],
+];
 /** Extra peers contributed by the `dateAdapter` choice. */
 const DATE_ADAPTER_PEERS = {
     none: [],
     native: [],
-    'date-fns': [['date-fns', '>=3.0.0 || >=4.0.0']],
-    luxon: [['luxon', '>=3.0.0']],
+    // Keep these identical to `peerDependencies` in projects/lib/package.json.
+    // They had drifted to `>=` unions, which reduce to an uncapped `>=3.0.0` and
+    // would happily install a future major the library does not support.
+    'date-fns': [['date-fns', '^3.0.0 || ^4.0.0']],
+    luxon: [['luxon', '^3.0.0']],
 };
 /** Adapter classes named in the next-steps snippet for each choice. */
 const DATE_ADAPTER_PROVIDER = {
@@ -121,11 +133,16 @@ function printNextSteps(options, context) {
         const adapter = options.dateAdapter ?? 'none';
         const density = options.density ?? 'none';
         const theme = options.theme ?? 'none';
+        // `ngwr/icon` exports only WrIcon / provideWrIcons / svgIcon — there are no
+        // bare icon exports, so the old `{ plus, trash }` import did not compile.
+        // Icons come from an adapter (lucide / feather) or from svgIcon().
         const imports = [
             "import { provideWrOverlay } from 'ngwr/overlay';",
-            "import { provideWrIcons, plus, trash } from 'ngwr/icon';",
+            "import { provideWrIcons } from 'ngwr/icon';",
+            "import { lucideIcons } from 'ngwr/icon/adapters/lucide';",
+            "import { Plus, Trash2 } from 'lucide';",
         ];
-        const providers = ['provideWrOverlay()', 'provideWrIcons([plus, trash])'];
+        const providers = ['provideWrOverlay()', 'provideWrIcons(lucideIcons({ plus: Plus, trash: Trash2 }))'];
         const adapterCall = DATE_ADAPTER_PROVIDER[adapter];
         if (adapterCall) {
             imports.push("import { provideWrDateAdapter } from 'ngwr/date-adapter';");

package/schematics/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/schematics/page/templates.js

@@ -23,14 +23,14 @@ function renderForm(dashName, pascalName) {
 import { FormsModule } from '@angular/forms';
 
 import { WrButton } from 'ngwr/button';
-import { WrFormField, WrLabel, WrErrorMessage } from 'ngwr/form';
+import { WrFormField } from 'ngwr/form';
 import { WrInput } from 'ngwr/input';
 
 @Component({
   selector: 'app-${dashName}',
   templateUrl: './${dashName}.html',
   styleUrl: './${dashName}.scss',
-  imports: [FormsModule, WrButton, WrFormField, WrLabel, WrErrorMessage, WrInput],
+  imports: [FormsModule, WrButton, WrFormField, WrInput],
 })
 export default class ${pascalName} {
   protected readonly name = signal('');
@@ -53,13 +53,11 @@ export default class ${pascalName} {
     const html = `<form class="${dashName}" (ngSubmit)="onSubmit()">
   <h1>${titleCase(pascalName)}</h1>
 
-  <wr-form-field>
-    <wr-label>Name</wr-label>
+  <wr-form-field label="Name" required>
     <input wrInput [(ngModel)]="name" name="name" required />
   </wr-form-field>
 
-  <wr-form-field>
-    <wr-label>Email</wr-label>
+  <wr-form-field label="Email" required>
     <input wrInput type="email" [(ngModel)]="email" name="email" required />
   </wr-form-field>
 
@@ -83,6 +81,7 @@ function renderTable(dashName, pascalName) {
     const ts = `import { Component, signal } from '@angular/core';
 
 import { WrTable } from 'ngwr/table';
+import type { WrTableColumns } from 'ngwr/table';
 import { WrPagination } from 'ngwr/pagination';
 
 interface Row {
@@ -98,7 +97,11 @@ interface Row {
   imports: [WrTable, WrPagination],
 })
 export default class ${pascalName} {
-  protected readonly columns = ['id', 'name', 'status'] as const;
+  protected readonly columns: WrTableColumns = {
+    id: { title: 'ID' },
+    name: { title: 'Name', sortable: true },
+    status: { title: 'Status' },
+  };
 
   protected readonly rows = signal<readonly Row[]>([
     { id: 1, name: 'Alpha', status: 'active' },
@@ -114,11 +117,11 @@ export default class ${pascalName} {
     const html = `<section class="${dashName}">
   <h1>${titleCase(pascalName)}</h1>
 
-  <wr-table [data]="rows()" [columns]="columns" />
+  <wr-table [columns]="columns" [items]="rows()" />
 
   <wr-pagination
-    [(page)]="page"
-    [pageSize]="pageSize()"
+    [(currentPage)]="page"
+    [(pageSize)]="pageSize"
     [total]="total()"
   />
 </section>
@@ -137,13 +140,12 @@ function renderDashboard(dashName, pascalName) {
 
 import { WrCard } from 'ngwr/card';
 import { WrStatistic } from 'ngwr/statistic';
-import { WrCountUp } from 'ngwr/counter';
 
 @Component({
   selector: 'app-${dashName}',
   templateUrl: './${dashName}.html',
   styleUrl: './${dashName}.scss',
-  imports: [WrCard, WrStatistic, WrCountUp],
+  imports: [WrCard, WrStatistic],
 })
 export default class ${pascalName} {
   protected readonly users = signal(1284);
@@ -156,21 +158,15 @@ export default class ${pascalName} {
 
   <div class="${dashName}__grid">
     <wr-card>
-      <wr-statistic title="Users">
-        <wr-count-up [to]="users()" />
-      </wr-statistic>
+      <wr-statistic label="Users" [value]="users()" />
     </wr-card>
 
     <wr-card>
-      <wr-statistic title="Revenue" prefix="$">
-        <wr-count-up [to]="revenue()" />
-      </wr-statistic>
+      <wr-statistic label="Revenue" prefix="$" [value]="revenue()" />
     </wr-card>
 
     <wr-card>
-      <wr-statistic title="Active">
-        <wr-count-up [to]="active()" />
-      </wr-statistic>
+      <wr-statistic label="Active" [value]="active()" />
     </wr-card>
   </div>
 </section>

package/schematics/provider/index.js

@@ -8,15 +8,30 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const schematics_1 = require("@angular-devkit/schematics");
 const workspace_1 = require("@schematics/angular/utility/workspace");
+// Every entry here has to name a factory that `ngwr` actually exports, with a
+// call that type-checks. `ngwr/loading-bar` and `ngwr/cookie` used to be listed
+// too, but neither ships a provider — they expose the injectable services
+// `WrLoadingBar` / `WrCookie` and need no bootstrap wiring at all, so offering
+// to splice a provider for them only ever produced code that would not compile.
 const PROVIDERS = {
     overlay: { subpath: 'ngwr/overlay', factory: 'provideWrOverlay', call: 'provideWrOverlay()' },
     icons: {
+        // `ngwr/icon` exports only WrIcon / provideWrIcons / svgIcon — there are no
+        // bare icon exports. Icons come from an adapter, exactly as `ng add` wires them.
         subpath: 'ngwr/icon',
         factory: 'provideWrIcons',
-        call: 'provideWrIcons([plus, trash])',
-        extras: [['plus, trash', 'ngwr/icon']],
+        call: 'provideWrIcons(lucideIcons({ plus: Plus, trash: Trash2 }))',
+        extras: [
+            ['lucideIcons', 'ngwr/icon/adapters/lucide'],
+            ['Plus, Trash2', 'lucide'],
+        ],
+    },
+    // `provideWrToastConfig` takes a required config object, so the call cannot be bare.
+    toast: {
+        subpath: 'ngwr/toast',
+        factory: 'provideWrToastConfig',
+        call: 'provideWrToastConfig({})',
     },
-    toast: { subpath: 'ngwr/toast', factory: 'provideWrToast', call: 'provideWrToast()' },
     i18n: { subpath: 'ngwr/i18n', factory: 'provideWrI18n', call: 'provideWrI18n()' },
     'date-adapter': {
         subpath: 'ngwr/date-adapter',
@@ -24,12 +39,6 @@ const PROVIDERS = {
         call: 'provideWrDateAdapter()',
     },
     density: { subpath: 'ngwr/density', factory: 'provideWrDensity', call: 'provideWrDensity()' },
-    'loading-bar': {
-        subpath: 'ngwr/loading-bar',
-        factory: 'provideWrLoadingBar',
-        call: 'provideWrLoadingBar()',
-    },
-    cookie: { subpath: 'ngwr/cookie', factory: 'provideWrCookie', call: 'provideWrCookie()' },
     storage: { subpath: 'ngwr/storage', factory: 'provideWrStorage', call: 'provideWrStorage()' },
     theme: { subpath: 'ngwr/theme', factory: 'provideWrTheme', call: 'provideWrTheme()' },
 };
@@ -46,9 +55,11 @@ function provider(options) {
         const original = tree.readText(filePath);
         let next = original;
         next = ensureImport(next, spec.factory, spec.subpath);
-        if (options.name === 'icons') {
-            next = ensureImport(next, 'plus', 'ngwr/icon');
-            next = ensureImport(next, 'trash', 'ngwr/icon');
+        // Drive the extra imports off `extras` rather than special-casing a provider
+        // name here: the two used to drift apart, and the hard-coded branch was
+        // emitting icon names that `ngwr/icon` has never exported.
+        for (const [symbols, subpath] of spec.extras ?? []) {
+            next = ensureImport(next, symbols, subpath);
         }
         next = ensureProviderCall(next, spec.call);
         if (next === original) {
@@ -113,10 +124,17 @@ function escapeRegExp(value) {
     return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
 function printSnippet(spec) {
+    // This runs when no bootstrap file could be resolved, so the snippet is all the
+    // user gets — it has to include `extras`, or the printed code references symbols
+    // it never imports. That was exactly the gap `extras` was declared to close.
+    const imports = [
+        `  import { ${spec.factory} } from '${spec.subpath}';`,
+        ...(spec.extras ?? []).map(([symbols, subpath]) => `  import { ${symbols} } from '${subpath}';`),
+    ].join('\n');
     return `
 ngwr:provider — copy this into your bootstrap:
 
-  import { ${spec.factory} } from '${spec.subpath}';
+${imports}
 
   bootstrapApplication(AppComponent, {
     providers: [/* …, */ ${spec.call}],

package/schematics/provider/schema.json

@@ -6,34 +6,48 @@
   "properties": {
     "name": {
       "type": "string",
-      "enum": [
-        "overlay",
-        "icons",
-        "toast",
-        "i18n",
-        "date-adapter",
-        "density",
-        "loading-bar",
-        "cookie",
-        "storage",
-        "theme"
-      ],
+      "enum": ["overlay", "icons", "toast", "i18n", "date-adapter", "density", "storage", "theme"],
       "description": "Provider to add.",
-      "$default": { "$source": "argv", "index": 0 },
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
       "x-prompt": {
         "message": "Which provider?",
         "type": "list",
         "items": [
-          { "value": "overlay", "label": "overlay — required for every overlay-backed component" },
-          { "value": "icons", "label": "icons — register a tree-shaken icon set" },
-          { "value": "toast", "label": "toast — global toast service" },
-          { "value": "i18n", "label": "i18n — Transloco-class translation core" },
-          { "value": "date-adapter", "label": "date-adapter — calendar / date-picker plumbing" },
-          { "value": "density", "label": "density — sm / md / lg scale" },
-          { "value": "loading-bar", "label": "loading-bar — router-aware progress bar" },
-          { "value": "cookie", "label": "cookie — wr cookie service" },
-          { "value": "storage", "label": "storage — swappable engine + TTL" },
-          { "value": "theme", "label": "theme — light/dark/auto mode" }
+          {
+            "value": "overlay",
+            "label": "overlay — required for every overlay-backed component"
+          },
+          {
+            "value": "icons",
+            "label": "icons — register a tree-shaken icon set"
+          },
+          {
+            "value": "toast",
+            "label": "toast — global toast service"
+          },
+          {
+            "value": "i18n",
+            "label": "i18n — Transloco-class translation core"
+          },
+          {
+            "value": "date-adapter",
+            "label": "date-adapter — calendar / date-picker plumbing"
+          },
+          {
+            "value": "density",
+            "label": "density — sm / md / lg scale"
+          },
+          {
+            "value": "storage",
+            "label": "storage — swappable engine + TTL"
+          },
+          {
+            "value": "theme",
+            "label": "theme — light/dark/auto mode"
+          }
         ]
       }
     },
@@ -45,7 +59,9 @@
     "project": {
       "type": "string",
       "description": "Target Angular project.",
-      "$default": { "$source": "projectName" }
+      "$default": {
+        "$source": "projectName"
+      }
     }
   },
   "required": ["name"]

package/schematics/use/index.js

@@ -15,7 +15,11 @@ const SYMBOL_MAP = require('./symbol-map.json');
  * Add `import { WrFoo } from 'ngwr/<subpath>';` to the given component
  * file and splice `WrFoo` into the `@Component({ imports: [...] })`
  * array. Saves the subpath-lookup dance for newcomers — `ng g ngwr:use
- * WrButton src/app/my-page.ts`.
+ * WrButton --path src/app/my-page.ts`.
+ *
+ * Only `symbol` is positional (see schema.json); `path` is a named option, so
+ * the bare `ng g ngwr:use WrButton src/app/my-page.ts` form fails with
+ * `Unknown argument`.
  *
  * Regex-based on purpose to avoid pulling in the TS compiler as a runtime
  * dep. Covers the common standalone-component shape; an unusual file

package/schematics/use/schema.json

@@ -7,18 +7,23 @@
     "symbol": {
       "type": "string",
       "description": "Class name to import — e.g. `WrButton`, `WrSelect`, `WrFormField`.",
-      "$default": { "$source": "argv", "index": 0 },
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
       "x-prompt": "Class name to import (e.g. WrButton)?"
     },
     "path": {
       "type": "string",
       "format": "path",
-      "description": "Component file to edit. When omitted, uses the file passed via argv[1] or prompts."
+      "description": "Component file to edit. Named option, not positional. When omitted, the schematic prints a copy-pasteable snippet instead of editing a file."
     },
     "project": {
       "type": "string",
       "description": "Target Angular project. Defaults to the workspace default.",
-      "$default": { "$source": "projectName" }
+      "$default": {
+        "$source": "projectName"
+      }
     }
   },
   "required": ["symbol"]