refactor: migration to output function #53

lekhmanrus · 2025-10-27T19:15:24Z

PR Checklist

Please check if your PR fulfills the following requirements:

Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

What is the current behavior?

@Output() decorator.

What is the new behavior?

Migration to output() function.

Does this PR introduce a breaking change?

Yes
No

Summary by CodeRabbit

Refactor
- Components converted from standalone to module-declared usage.
- EventEmitter-based outputs replaced with new signal-style output APIs.
- Theme picker switched from input/output bindings to a reactive model-backed property.
Tests
- Removed tests covering theme emission and click-driven theme setting.
- Minor test comment cleanup and other non-functional test simplifications.

coderabbitai · 2025-10-27T19:15:34Z

Walkthrough

Migrates several components away from standalone metadata and replaces EventEmitter/Input/Output patterns with Angular signal-style APIs (output() and model.required()); updates a template to call the new theme signal, and removes related tests and a few comment lines in specs.

Changes

Cohort / File(s)	Summary
Spec comment cleanup `projects/ngx-multiple-dates-app/src/app/components/root/root.component.spec.ts`, `projects/ngx-multiple-dates/src/lib/components/multiple-dates/multiple-dates.component.spec.ts`	Removed informational comment lines inside tests; no assertion or behavioral changes.
Remove standalone metadata `projects/ngx-multiple-dates-app/src/app/components/root/root.component.ts`, `projects/ngx-multiple-dates/src/lib/components/multiple-dates/multiple-dates.component.ts`, `projects/ngx-multiple-dates-app/src/app/components/theme-picker/theme-picker.component.ts`	Deleted `standalone: true` from `@Component` decorators.
Theme-picker template updates `projects/ngx-multiple-dates-app/src/app/components/theme-picker/theme-picker.component.html`	Switched from property access (`theme`) to calling the theme signal as a function (`theme()`) in class bindings, focus attribute, click handler, and conditional rendering.
Theme-picker API & implementation `projects/ngx-multiple-dates-app/src/app/components/theme-picker/theme-picker.component.ts`	Replaced `@Input()`/`@Output()` and private `_theme` with `public readonly theme = model.required<string>()`; removed EventEmitter/Input/Output imports and `standalone: true`.
Theme-picker tests reduced `projects/ngx-multiple-dates-app/src/app/components/theme-picker/theme-picker.component.spec.ts`	Removed three tests that asserted theme emission/setting and empty-theme handling; kept hover-related test and added fixture input initialization in beforeEach.
Multiple-dates outputs migrated `projects/ngx-multiple-dates/src/lib/components/multiple-dates/multiple-dates.component.ts`	Replaced `@Output() EventEmitter` declarations for `dateChange` and `remove` with `public readonly ... = output<...>()`; removed EventEmitter/Output imports and `standalone: true`.

Sequence Diagram(s)

sequenceDiagram
  participant Comp as Component (new)
  participant Parent as Parent
  rect rgb(230, 250, 230)
    Note over Comp: Uses signal-style outputs\n(e.g., dateChange = output<T>())
  end
  Comp->>Comp: produce event payload
  Comp-->>Parent: expose signal output (subscribe/read)
  Parent->>Parent: react to signal (handler invoked)

sequenceDiagram
  participant CompOld as Component (old)
  participant Parent as Parent
  rect rgb(250, 230, 230)
    Note over CompOld: Used EventEmitter\n(comp.emit(payload))
  end
  CompOld->>Parent: emit(payload) via EventEmitter
  Parent->>Parent: handler invoked by subscription

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Attention points:
- theme-picker.component.ts — verify model.required<string>() semantics and intended input/consumer usage.
- theme-picker.component.html — ensure all template calls to theme() are correct for change-detection and binding contexts.
- multiple-dates.component.ts — confirm output() usage integrates with existing parent subscriptions and no runtime regressions.
- Tests removed in theme-picker — confirm coverage and intent.

Poem

🐰
I hopped through code with tiny paws,
Swapped bells for signals, skipped old laws.
Standalone wings tucked in a nest,
Modules hum and tests take rest.
Thump—new model, cozy and blessed. 🥕✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The PR title "refactor: migration to output function" directly corresponds to the primary changes in the pull request. The multiple-dates component undergoes a significant refactoring that replaces the @output() decorator and EventEmitter pattern with the output() function, which is the Angular signal-based API for outputs. While the PR also includes related signal-based migrations (such as model() in theme-picker) and removal of standalone flags, the output() migration represents the core refactoring intent. The title is specific, clear, and avoids generic language, making it immediately understandable to teammates reviewing the repository history.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch refactor/no-ref/migration-to-output-function

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8af91aa and 20211e3.

📒 Files selected for processing (7)

projects/ngx-multiple-dates-app/src/app/components/root/root.component.spec.ts (0 hunks)
projects/ngx-multiple-dates-app/src/app/components/root/root.component.ts (0 hunks)
projects/ngx-multiple-dates-app/src/app/components/theme-picker/theme-picker.component.html (1 hunks)
projects/ngx-multiple-dates-app/src/app/components/theme-picker/theme-picker.component.spec.ts (1 hunks)
projects/ngx-multiple-dates-app/src/app/components/theme-picker/theme-picker.component.ts (2 hunks)
projects/ngx-multiple-dates/src/lib/components/multiple-dates/multiple-dates.component.spec.ts (0 hunks)
projects/ngx-multiple-dates/src/lib/components/multiple-dates/multiple-dates.component.ts (2 hunks)

💤 Files with no reviewable changes (3)

projects/ngx-multiple-dates-app/src/app/components/root/root.component.spec.ts
projects/ngx-multiple-dates/src/lib/components/multiple-dates/multiple-dates.component.spec.ts
projects/ngx-multiple-dates-app/src/app/components/root/root.component.ts

🚧 Files skipped from review as they are similar to previous changes (1)

projects/ngx-multiple-dates/src/lib/components/multiple-dates/multiple-dates.component.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: test

🔇 Additional comments (5)

projects/ngx-multiple-dates-app/src/app/components/theme-picker/theme-picker.component.html (1)

4-8: Migration to model API looks correct.

The template correctly uses theme() for reading the signal value and theme.set() for updating it, which aligns with the Angular model API.
projects/ngx-multiple-dates-app/src/app/components/theme-picker/theme-picker.component.ts (3)
1-1: Correct import changes for model API migration.

The imports have been correctly updated to include model and remove EventEmitter, Input, and Output.

21-21: Correct migration to model API.

The use of model.required<string>() is the appropriate way to replace the previous @Input()/@Output() two-way binding pattern. This creates a writable signal that parent components can bind to.

6-12: Incorrect review comment - diagnosis and solution do not match actual codebase state.

The component does not currently have standalone: true declared, and it has never been removed (no evidence in codebase history or current state). The component already correctly contains the imports array, which is appropriate for this standalone-based architecture used throughout the project.

The actual issue: Both ThemePickerComponent and its parent RootComponent lack explicit standalone: true declarations in their decorators, despite using the standalone imports pattern. The proper fix is to add standalone: true to ThemePickerComponent (line 6), not to remove the imports array.

Correct application:
@Component({
  selector: 'app-theme-picker',
  templateUrl: './theme-picker.component.html',
  styleUrls: [ './theme-picker.component.scss' ],
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [CommonModule, MatButtonModule, MatIconModule]
})
The provided diff is also malformed—it incorrectly removes changeDetection along with imports. Do not apply the suggested diff.

Likely an incorrect or invalid review comment.
projects/ngx-multiple-dates-app/src/app/components/theme-picker/theme-picker.component.spec.ts (1)

20-20: Correct initialization for model-based input.

Using fixture.componentRef.setInput('theme', '') is the correct way to initialize model-based inputs in tests.

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

codecov · 2025-10-27T19:26:30Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 71.65%. Comparing base (c3b4f67) to head (20211e3).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master      #53      +/-   ##
==========================================
- Coverage   72.18%   71.65%   -0.54%     
==========================================
  Files           4        4              
  Lines         320      314       -6     
  Branches       54       54              
==========================================
- Hits          231      225       -6     
  Misses         79       79              
  Partials       10       10

Flag	Coverage Δ
unittests	`71.65% <100.00%> (-0.54%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

refactor: migration to output function

20211e3

lekhmanrus force-pushed the refactor/no-ref/migration-to-output-function branch from 8af91aa to 20211e3 Compare October 27, 2025 19:24

lekhmanrus merged commit 2a3dc98 into master Oct 27, 2025
6 of 7 checks passed

lekhmanrus deleted the refactor/no-ref/migration-to-output-function branch November 5, 2025 17:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor: migration to output function #53

refactor: migration to output function #53

Uh oh!

lekhmanrus commented Oct 27, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Oct 27, 2025 •

edited

Loading

Uh oh!

codecov bot commented Oct 27, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

refactor: migration to output function #53

refactor: migration to output function #53

Uh oh!

Conversation

lekhmanrus commented Oct 27, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Oct 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Poem

Pre-merge checks and finishing touches

Uh oh!

codecov bot commented Oct 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

lekhmanrus commented Oct 27, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Oct 27, 2025 •

edited

Loading

codecov bot commented Oct 27, 2025 •

edited

Loading