feat(platform): add selectorless compilation support#2292
feat(platform): add selectorless compilation support#2292benpsnyder wants to merge 22 commits intoanalogjs:alphafrom
Conversation
…e test coverage for Angular plugin
…tive inspection
…es for local and GitHub paths
… file overrides for Analog packages
…SR handling in Angular and Nitro plugins
…align Angular runtime/compiler patch set
…oning user config and environments
…o plugins by clarifying HMR behavior and config handling
…d comments do not interfere with directive detection
…SS comment handling for directive detection
… for Tailwind reference detection and improving test case timeout
…mentHostWithResources, enhancing error management in CSS processing
…urn message for better error visibility
…ancing experimental options and test coverage
…th handling and emit affected files support
…and test coverage - Enhanced documentation for the selectorless compilation option in the Angular plugin. - Added tests to ensure top-level selectorless configuration takes precedence over legacy settings. - Updated logic to maintain consistency between top-level and legacy experimental configurations. - Improved handling of selectorless support detection in the live reload plugin.
✅ Deploy Preview for analog-app ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughThis pull request introduces experimental support for selectorless component compilation across the platform and Vite plugin layers. The changes add an Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes The diff introduces significant structural additions across multiple layers: tsconfig graph traversal and caching, auto-detection logic coupling Angular version detection with file globbing, configuration forwarding with precedence handling, and extensive test scenarios covering selectorless defaults and overrides. While individual changes follow consistent patterns (option plumbing, debug scope additions), the logic density is high, particularly around tsconfig expansion and compiler option mapping. The heterogeneous nature of edits—ranging from configuration forwarding to complex graph manipulation to test infrastructure—demands separate reasoning per affected code path. 🚥 Pre-merge checks | ✅ 1 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
bot
added
scope:platform
|
This PR touches multiple package scopes: Please confirm the changes are closely related. |
✅ Deploy Preview for analog-blog ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/platform/src/lib/platform-plugin.spec.ts (1)
144-179: Add one test for the legacy-only selectorless path.These two cases cover the top-level flag and precedence, but they still leave the documented compatibility branch untested when only
vite.experimental.enableSelectorlessis set. A single legacy-only assertion here would pin that fallback behavior too.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/platform/src/lib/platform-plugin.spec.ts` around lines 144 - 179, Add a third unit test that asserts the legacy-only path where only vite.experimental.enableSelectorless is set is handled: call platformPlugin with no top-level experimental but with vite: { experimental: { enableSelectorless: true } }, then assert angularSpy was called with an options object containing experimental.enableSelectorless: true; place this alongside the existing tests that call platformPlugin and check angularSpy so the fallback behavior is pinned.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts`:
- Around line 320-367: The selectorless detection enables routes under
src/app/routes and app/routes via detectSelectorlessRouteUsage but
isLikelyPageOnlyComponent still only treats /pages/ and .page.* as route-like;
update isLikelyPageOnlyComponent to reuse the same route-file predicate
(isSelectorlessRouteFile) or extract the predicate into a shared helper so files
matching '/src/app/routes/' or '/app/routes/' are considered route entries as
well, ensuring components that triggered _enableSelectorless won't then fail the
explicit-selector check.
---
Nitpick comments:
In `@packages/platform/src/lib/platform-plugin.spec.ts`:
- Around line 144-179: Add a third unit test that asserts the legacy-only path
where only vite.experimental.enableSelectorless is set is handled: call
platformPlugin with no top-level experimental but with vite: { experimental: {
enableSelectorless: true } }, then assert angularSpy was called with an options
object containing experimental.enableSelectorless: true; place this alongside
the existing tests that call platformPlugin and check angularSpy so the fallback
behavior is pinned.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 4a7517c2-8896-459d-b4a7-86ae14fcd7d9
📒 Files selected for processing (6)
packages/platform/src/lib/options.tspackages/platform/src/lib/platform-plugin.spec.tspackages/platform/src/lib/platform-plugin.tspackages/vite-plugin-angular/src/lib/angular-vite-plugin-live-reload.spec.tspackages/vite-plugin-angular/src/lib/angular-vite-plugin.tspackages/vite-plugin-angular/src/lib/utils/debug.ts
| function isSelectorlessRouteFile(file: string): boolean { | ||
| const normalized = normalizePath(file); | ||
| return ( | ||
| normalized.endsWith('.page.ts') || | ||
| normalized.includes('/src/app/routes/') || | ||
| normalized.includes('/app/routes/') | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * Infer selectorless support from route/page entry points. | ||
| * | ||
| * This heuristic is intentionally broad because file-based routing commonly | ||
| * relies on selectorless components. The resulting Angular compiler flag is | ||
| * program-wide, not route-scoped, so a matching route-like include can affect | ||
| * every file in the current Angular program. | ||
| */ | ||
| function detectSelectorlessRouteUsage( | ||
| root: string, | ||
| workspaceRoot: string, | ||
| includeGlobs: string[], | ||
| ): { enabled: boolean; routeFileCount: number } { | ||
| const normalizedRoot = normalizePath(resolve(root)); | ||
| const normalizedWorkspaceRoot = normalizePath(resolve(workspaceRoot)); | ||
| const appRouteGlobs = [ | ||
| `${normalizedRoot}/src/app/pages/**/*.page.ts`, | ||
| `${normalizedRoot}/src/app/routes/**/*.ts`, | ||
| `${normalizedRoot}/app/routes/**/*.ts`, | ||
| ]; | ||
| const routeLikeIncludeGlobs = includeGlobs | ||
| .map((glob) => normalizeIncludeGlob(normalizedWorkspaceRoot, glob)) | ||
| .filter( | ||
| (glob) => | ||
| glob.includes('.page.') || | ||
| glob.includes('/pages/') || | ||
| glob.includes('/app/routes/') || | ||
| glob.includes('/src/app/routes/'), | ||
| ); | ||
| const routeFiles = globSync([...appRouteGlobs, ...routeLikeIncludeGlobs], { | ||
| absolute: true, | ||
| dot: true, | ||
| onlyFiles: true, | ||
| }).filter(isSelectorlessRouteFile); | ||
|
|
||
| return { | ||
| enabled: routeFiles.length > 0, | ||
| routeFileCount: routeFiles.length, | ||
| }; |
There was a problem hiding this comment.
Route auto-detection now outruns the selectorless safety gate.
This new heuristic enables selectorless mode for src/app/routes / app/routes, but the later validation path still only exempts /pages/ and .page.* in isLikelyPageOnlyComponent(). A selectorless route entry component will therefore get _enableSelectorless and then still fail with the explicit-selector error. Reuse the same route-file predicate in both places so route entries stay supported.
Possible fix
function isLikelyPageOnlyComponent(id: string): boolean {
return (
+ isSelectorlessRouteFile(id) ||
id.includes('/pages/') ||
/\.page\.[cm]?[jt]sx?$/i.test(id) ||
/\([^/]+\)\.page\.[cm]?[jt]sx?$/i.test(id)
);
}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts` around lines 320
- 367, The selectorless detection enables routes under src/app/routes and
app/routes via detectSelectorlessRouteUsage but isLikelyPageOnlyComponent still
only treats /pages/ and .page.* as route-like; update isLikelyPageOnlyComponent
to reuse the same route-file predicate (isSelectorlessRouteFile) or extract the
predicate into a shared helper so files matching '/src/app/routes/' or
'/app/routes/' are considered route entries as well, ensuring components that
triggered _enableSelectorless won't then fail the explicit-selector check.
…investigation-preserved
benpsnyder
changed the title
1 participant
PR Checklist
Closes #
Affected scope
platformvite-plugin-angularRecommended merge strategy for maintainer [optional]
Commit preservation note [optional]
The branch history is noisy and includes merge/investigation commits, but the net diff is one related feature across
platformandvite-plugin-angular.Squash mergeis the safest maintainer path.What is the new behavior?
experimental.enableSelectorlessoption toanalog()and forwards it to@analogjs/vite-plugin-angular.vite.experimental.enableSelectorlesscompatibility path, with the top-level Analog option taking precedence when both are set.Test plan
nx format:checkpnpm buildpnpm testExecuted for this branch:
pnpm nx test platformpnpm nx test vite-plugin-angularDoes this PR introduce a breaking change?
Other information
This PR intentionally touches both
platformandvite-plugin-angularso the public Analog config surface stays aligned with the lower-level Angular compiler integration.