Skip to content

Commit 75ffacd

Browse files
committed
refactor: remove hmr compatibility alias and streamline live-reload configuration across Angular and Storybook integrations
1 parent 94c2f5b commit 75ffacd

17 files changed

Lines changed: 231 additions & 97 deletions

File tree

MAINTAINER.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Contributing (Maintainer)
22

3+
## Debugging
4+
5+
Repo-local debugging guidance for Analog package development lives in [docs/debugging.md](docs/debugging.md).
6+
37
## Adding and updating an package
48

59
Adding or updating a package requires some extra step if its part of `dependencies` or `devDependencies`.

apps/docs-app/docs/guides/debugging.md

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ sidebar_position: 4
44

55
# Debugging
66

7-
Analog includes structured debug logging powered by [obug](https://www.npmjs.com/package/obug). Debug output can be enabled through the `debug` option in your Vite config or via the `DEBUG` environment variable.
7+
Analog includes structured debug logging powered by [obug](https://www.npmjs.com/package/obug). You can enable debug output through the `debug` option in your Vite config or via the `DEBUG` environment variable.
8+
9+
The examples below use `npm`, but the same `DEBUG` values work with any package manager.
810

911
## Enabling Debug Output
1012

@@ -91,20 +93,20 @@ analog({
9193
});
9294
```
9395

94-
You can mix immediate and deferred entries — entries without `mode` enable immediately for both commands:
96+
You can mix immediate and deferred entries. Entries without `mode` enable immediately for both commands:
9597

9698
```ts
9799
analog({
98100
debug: [
99-
{ scopes: ['analog:platform'] }, // both commands
100-
{ scopes: ['analog:angular:hmr'], mode: 'dev' }, // dev only
101-
{ scopes: ['analog:platform:typed-router'], mode: 'build' }, // build only
101+
{ scopes: ['analog:platform'] },
102+
{ scopes: ['analog:angular:hmr'], mode: 'dev' },
103+
{ scopes: ['analog:platform:typed-router'], mode: 'build' },
102104
],
103105
});
104106
```
105107

106108
:::tip
107-
To enable debug output for **both** build and dev, simply omit `mode`. Any form without `mode``true`, a `string[]`, or `{ scopes }` outputs in both commands.
109+
To enable debug output for both build and dev, omit `mode`. Any form without `mode` outputs in both commands.
108110
:::
109111

110112
### Environment variable
@@ -113,13 +115,13 @@ The `DEBUG` environment variable works independently of the config option and is
113115

114116
```bash
115117
# All Analog scopes
116-
DEBUG=analog:* pnpm dev
118+
DEBUG=analog:* npm run dev
117119

118120
# Specific scopes
119-
DEBUG=analog:platform:routes,analog:angular:compiler pnpm build
121+
DEBUG=analog:platform:routes,analog:angular:compiler npm run build
120122

121123
# All platform scopes
122-
DEBUG=analog:platform:* pnpm dev
124+
DEBUG=analog:platform:* npm run dev
123125
```
124126

125127
## Configuration Reference
@@ -178,7 +180,7 @@ import angular from '@analogjs/vite-plugin-angular';
178180
export default defineConfig({
179181
plugins: [
180182
angular({
181-
debug: true, // enables analog:angular:* scopes
183+
debug: true,
182184
}),
183185
],
184186
});

apps/docs-app/docs/guides/migrating-v2-to-v3.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -158,4 +158,4 @@ Keep automated migration tooling focused on the breaking changes above:
158158
- rewrite only the legacy `@analogjs/vite-plugin-angular/setup-vitest` setup import
159159
- flag `@analogjs/trpc` as a removed package that needs a manual migration plan
160160
- flag `experimental.useAnalogCompiler`, `analogCompilationMode`, and `@analogjs/angular-compiler` as unsupported on the current v3 alpha line rather than removed outright
161-
- treat optional helpers such as `withTypedRouter`, `withRouteContext`, `withLoaderCaching`, `withDebugRoutes`, and compatibility aliases such as `hmr` as opt-in rather than mandatory rewrites
161+
- treat optional helpers such as `withTypedRouter`, `withRouteContext`, `withLoaderCaching`, `withDebugRoutes`, and `liveReload` as opt-in rather than mandatory rewrites

apps/docs-app/docs/guides/migrating.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -192,9 +192,9 @@ export default defineConfig(({ mode }) => ({
192192

193193
Angular supports HMR where in most cases components can be updated without a full page reload. In Analog, use `liveReload` to control the Angular live-reload pipeline.
194194

195-
This is separate from Vite's `server.hmr` option, which configures the HMR websocket transport. You can use `server.hmr` together with `liveReload` when you need custom host, port, or path settings. `hmr` is still accepted as a compatibility alias for `liveReload`.
195+
This is separate from Vite's `server.hmr` option, which configures the HMR websocket transport. You can use `server.hmr` together with `liveReload` when you need custom host, port, or path settings.
196196

197-
Analog requires Angular v19 or newer for `liveReload` / `hmr` to work. On Angular v17-v18, `liveReload` and its `hmr` alias are forcibly disabled at runtime with a console warning, so HMR is unavailable on those versions.
197+
Analog requires Angular v19 or newer for `liveReload` to work. On Angular v17-v18, `liveReload` is forcibly disabled at runtime with a console warning, so HMR is unavailable on those versions.
198198

199199
```ts
200200
/// <reference types="vitest" />

apps/docs-app/docs/integrations/storybook/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export default config;
9393

9494
For current Analog projects, use `framework.options.liveReload` to control Analog's Angular live-reload behavior.
9595

96-
This is separate from Vite's `server.hmr` option, which configures the HMR websocket transport. You can use `server.hmr` together with `framework.options.liveReload` when Storybook needs custom host, port, or path settings. `framework.options.hmr` is still accepted as a compatibility alias.
96+
This is separate from Vite's `server.hmr` option, which configures the HMR websocket transport. You can use `server.hmr` together with `framework.options.liveReload` when Storybook needs custom host, port, or path settings.
9797

9898
Remove the existing `webpackFinal` config function if present.
9999

apps/docs-app/docs/integrations/tailwind/index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -124,9 +124,9 @@ Without `prefixes`, Analog falls back to its default Tailwind usage detection fo
124124

125125
Use `liveReload` when you need to configure Analog's Angular live-reload behavior explicitly.
126126

127-
Vite's `server.hmr` option is separate. It controls the HMR websocket transport, so you can use `server.hmr` together with `liveReload` when your dev server needs custom host, port, or path settings. `hmr` is still accepted as a compatibility alias for `liveReload`.
127+
Vite's `server.hmr` option is separate. It controls the HMR websocket transport, so you can use `server.hmr` together with `liveReload` when your dev server needs custom host, port, or path settings.
128128

129-
Angular HMR requires Angular v19 or newer. On Angular v17-v18, `liveReload` and its `hmr` alias are intentionally disabled at runtime and emit a console warning, so HMR is unavailable on those versions. For broader migration guidance, see the [migration guide](/docs/guides/migrating).
129+
Angular HMR requires Angular v19 or newer. On Angular v17-v18, `liveReload` is intentionally disabled at runtime and emits a console warning, so HMR is unavailable on those versions. For broader migration guidance, see the [migration guide](/docs/guides/migrating).
130130

131131
Tailwind support does not require you to enable HMR manually. The stylesheet pipeline is handled independently from whether Angular can produce a hot component update for a given edit.
132132

docs/debugging.md

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
# Debugging
2+
3+
This document is for maintainers and contributors working inside the Analog monorepo.
4+
5+
For consumer-facing debug flags and scope reference, see the public guide in `apps/docs-app/docs/guides/debugging.md`.
6+
7+
This repo-local file covers the monorepo-specific workflow that does not belong in the public docs site.
8+
9+
## Repo Root Commands
10+
11+
From this workspace, the common debug flow is to run commands from the repo root with `pnpm` or `pnpm nx`.
12+
13+
```bash
14+
# Serve the default dev app with all Analog scopes
15+
DEBUG=analog:* pnpm dev
16+
17+
# Build from the repo root with selected scopes
18+
DEBUG=analog:platform:routes,analog:angular:compiler pnpm build
19+
20+
# Serve a specific app target through Nx
21+
DEBUG=analog:platform:* pnpm nx serve docs-app
22+
```
23+
24+
## Package Development
25+
26+
When debugging package changes in this monorepo, prefer the project-level Nx targets so you stay on the same workspace graph and dependency layout as CI:
27+
28+
```bash
29+
# Focus on Angular plugin HMR/style behavior
30+
DEBUG=analog:angular:hmr,analog:angular:styles pnpm nx test vite-plugin-angular
31+
32+
# Focus on platform routing output
33+
DEBUG=analog:platform:routes pnpm nx build platform
34+
35+
# Focus on the style-pipeline integration seam in a served app
36+
DEBUG=analog:platform:style-pipeline,analog:angular:style-pipeline pnpm nx serve your-app
37+
```
38+
39+
## Debugging a local Analog checkout from another pnpm workspace
40+
41+
If you want to debug this checkout while serving a different app on your machine,
42+
point that consumer workspace at the built Analog package outputs under
43+
`/path/to/analog/packages/*/dist`.
44+
45+
Use the built `dist` directories, not the raw package roots. Build the packages
46+
first so each `dist` folder contains its generated `package.json`. The source
47+
package manifests still contain `catalog:` and `workspace:*` references that are
48+
only rewritten during Analog's release-style build pipeline.
49+
50+
### Local checkout example
51+
52+
`pnpm-workspace.yaml`
53+
54+
```yaml
55+
packages:
56+
- 'apps/*'
57+
- 'libs/**'
58+
59+
overrides:
60+
'@analogjs/platform': file:/path/to/analog/packages/platform/dist
61+
'@analogjs/router': file:/path/to/analog/packages/router/dist
62+
'@analogjs/vite-plugin-angular': file:/path/to/analog/packages/vite-plugin-angular/dist
63+
'@analogjs/vite-plugin-nitro': file:/path/to/analog/packages/vite-plugin-nitro/dist
64+
'@analogjs/vitest-angular': file:/path/to/analog/packages/vitest-angular/dist
65+
```
66+
67+
Root `package.json`
68+
69+
```json
70+
{
71+
"dependencies": {
72+
"@analogjs/platform": "file:/path/to/analog/packages/platform/dist"
73+
},
74+
"overrides": {
75+
"@analogjs/platform": "file:/path/to/analog/packages/platform/dist",
76+
"@analogjs/router": "file:/path/to/analog/packages/router/dist",
77+
"@analogjs/vite-plugin-angular": "file:/path/to/analog/packages/vite-plugin-angular/dist",
78+
"@analogjs/vite-plugin-nitro": "file:/path/to/analog/packages/vite-plugin-nitro/dist",
79+
"@analogjs/vitest-angular": "file:/path/to/analog/packages/vitest-angular/dist"
80+
}
81+
}
82+
```
83+
84+
:::important
85+
Keep the overrides in both places. If you only pin `@analogjs/platform`, pnpm
86+
can still resolve transitive packages like `@analogjs/vite-plugin-angular` and
87+
`@analogjs/vite-plugin-nitro` from npm instead of your local checkout.
88+
:::
89+
90+
:::note
91+
pnpm currently does not allow `file:` entries in `catalog`, so local checkout
92+
wiring needs direct `file:` overrides instead of `catalog:` indirection.
93+
:::
94+
95+
If your app also uses other published Analog packages such as
96+
`@analogjs/content` or `@analogjs/storybook-angular`, pin those the same way.
97+
98+
### GitHub branch example
99+
100+
If you want the same pattern from a GitHub branch instead of a local path, pnpm
101+
supports Git subdirectory specs via `#branch&path:...`.
102+
103+
`pnpm-workspace.yaml`
104+
105+
```yaml
106+
catalog:
107+
'@analogjs/platform': github:your-user/analog#your-branch&path:packages/platform/dist
108+
'@analogjs/router': github:your-user/analog#your-branch&path:packages/router/dist
109+
'@analogjs/vite-plugin-angular': github:your-user/analog#your-branch&path:packages/vite-plugin-angular/dist
110+
'@analogjs/vite-plugin-nitro': github:your-user/analog#your-branch&path:packages/vite-plugin-nitro/dist
111+
'@analogjs/vitest-angular': github:your-user/analog#your-branch&path:packages/vitest-angular/dist
112+
```
113+
114+
Root `package.json`
115+
116+
```json
117+
{
118+
"dependencies": {
119+
"@analogjs/platform": "catalog:"
120+
},
121+
"overrides": {
122+
"@analogjs/platform": "$@analogjs/platform",
123+
"@analogjs/router": "$@analogjs/router",
124+
"@analogjs/vite-plugin-angular": "$@analogjs/vite-plugin-angular",
125+
"@analogjs/vite-plugin-nitro": "$@analogjs/vite-plugin-nitro",
126+
"@analogjs/vitest-angular": "$@analogjs/vitest-angular"
127+
}
128+
}
129+
```
130+
131+
:::caution
132+
For Analog, the GitHub form only works when the branch exposes release-ready
133+
`dist/package.json` files at those paths. Pointing pnpm at
134+
`path:packages/platform` or any other raw source package path will fail because
135+
those manifests still contain unresolved `catalog:` and `workspace:*`
136+
specifiers.
137+
:::
138+
139+
## Notes
140+
141+
- Use the repo root unless you have a specific reason to run inside a package subdirectory.
142+
- Prefer `pnpm nx <target>` when you want task-graph behavior that matches CI.
143+
- The scope names themselves are documented in the public guide so consumer and maintainer docs stay aligned.

packages/platform/src/lib/options.ts

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export interface Options {
9898
*
9999
* When `false`, the following top-level options are ignored because they
100100
* are only forwarded to the internal Angular plugin: `jit`,
101-
* `disableTypeChecking`, `liveReload`, `hmr`, `inlineStylesExtension`,
101+
* `disableTypeChecking`, `liveReload`, `inlineStylesExtension`,
102102
* `fileReplacements`, and `include`.
103103
*
104104
* Use this to configure the embedded Angular integration itself, not as the
@@ -124,10 +124,6 @@ export interface Options {
124124
* Defaults to `true` for watch mode.
125125
*/
126126
liveReload?: boolean;
127-
/**
128-
* Compatibility alias for `liveReload`.
129-
*/
130-
hmr?: boolean;
131127
/**
132128
* Enable debug logging for specific scopes.
133129
*

packages/platform/src/lib/platform-plugin.ts

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,11 @@ export function platformPlugin(opts: Options = {}): Plugin[] {
3030

3131
const isTest = process.env['NODE_ENV'] === 'test' || !!process.env['VITEST'];
3232
const viteOptions = opts?.vite === false ? undefined : opts?.vite;
33+
const {
34+
experimental: viteExperimental,
35+
hmr: _removedViteHmrOption,
36+
...forwardedViteOptions
37+
} = viteOptions ?? {};
3338
const { ...platformOptions } = {
3439
ssr: true,
3540
...opts,
@@ -56,7 +61,7 @@ export function platformPlugin(opts: Options = {}): Plugin[] {
5661

5762
const useAngularCompilationAPI =
5863
platformOptions.experimental?.useAngularCompilationAPI ??
59-
viteOptions?.experimental?.useAngularCompilationAPI;
64+
viteExperimental?.useAngularCompilationAPI;
6065
debugPlatform('experimental options resolved', {
6166
useAngularCompilationAPI: !!useAngularCompilationAPI,
6267
typedRouter: platformOptions.experimental?.typedRouter,
@@ -112,7 +117,6 @@ export function platformPlugin(opts: Options = {}): Plugin[] {
112117
),
113118
],
114119
additionalContentDirs: platformOptions.additionalContentDirs,
115-
hmr: platformOptions.hmr,
116120
liveReload: platformOptions.liveReload,
117121
inlineStylesExtension: platformOptions.inlineStylesExtension,
118122
fileReplacements: platformOptions.fileReplacements,
@@ -124,9 +128,9 @@ export function platformPlugin(opts: Options = {}): Plugin[] {
124128
platformOptions.experimental.stylePipeline.angularPlugins,
125129
}
126130
: undefined,
127-
...(viteOptions ?? {}),
131+
...forwardedViteOptions,
128132
experimental: {
129-
...(viteOptions?.experimental ?? {}),
133+
...(viteExperimental ?? {}),
130134
useAngularCompilationAPI,
131135
},
132136
}),

packages/storybook-angular/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ Storybook does not automatically infer the Tailwind plugin from your app's `vite
125125

126126
Angular reload behavior is controlled with `framework.options.liveReload`.
127127

128-
This is separate from Vite's `server.hmr` option, which configures the HMR websocket transport. You can use `server.hmr` together with `framework.options.liveReload` when Storybook needs custom host, port, or path settings. `framework.options.hmr` is still accepted as a compatibility alias.
128+
This is separate from Vite's `server.hmr` option, which configures the HMR websocket transport. You can use `server.hmr` together with `framework.options.liveReload` when Storybook needs custom host, port, or path settings.
129129

130130
## Enabling Zoneless Change Detection
131131

0 commit comments

Comments
 (0)