feat(component): add RenderScheduler to the public API (#3516)

Author: markostanimirovic

modules/component/src/core/render-scheduler.ts

@@ -1,13 +1,71 @@
 import { ChangeDetectorRef, inject, Injectable } from '@angular/core';
 import { TickScheduler } from './tick-scheduler';
 
+/**
+ * Provides rendering functionality regardless of whether `zone.js` is present
+ * or not. It must be provided at the component/directive level.
+ *
+ * @usageNotes
+ *
+ * ### Rerender zone-less app on route changes
+ *
+ * ```ts
+ * @Component({
+ *   selector: 'app-root',
+ *   template: '<router-outlet>',
+ *   // 👇 `RenderScheduler` is provided at the component level
+ *   providers: [RenderScheduler],
+ *   changeDetection: ChangeDetectionStrategy.OnPush,
+ * })
+ * export class AppComponent implements OnInit {
+ *   constructor(
+ *     private readonly router: Router,
+ *     private readonly renderScheduler: RenderScheduler
+ *   ) {}
+ *
+ *   ngOnInit(): void {
+ *     this.router.events
+ *       .pipe(filter((e) => e instanceof NavigationEnd))
+ *       .subscribe(() => this.renderScheduler.schedule());
+ *   }
+ * }
+ * ```
+ *
+ * ### Rerender component on interval
+ *
+ * ```ts
+ * @Component({
+ *   selector: 'app-interval',
+ *   template: '{{ elapsedTime }}ms',
+ *   // 👇 `RenderScheduler` is provided at the component level
+ *   providers: [RenderScheduler],
+ *   changeDetection: ChangeDetectionStrategy.OnPush,
+ * })
+ * export class IntervalComponent implements OnInit {
+ *   elapsedTime = 0;
+ *
+ *   constructor(private readonly renderScheduler: RenderScheduler) {}
+ *
+ *   ngOnInit(): void {
+ *     setInterval(() => {
+ *       this.elapsedTime += 1000;
+ *       this.renderScheduler.schedule();
+ *     }, 1000);
+ *   }
+ * }
+ * ```
+ */
 @Injectable()
 export class RenderScheduler {
   constructor(
     private readonly cdRef: ChangeDetectorRef,
     private readonly tickScheduler: TickScheduler
   ) {}
 
+  /**
+   * Marks component and its ancestors as dirty.
+   * It also schedules a new change detection cycle in zone-less mode.
+   */
   schedule(): void {
     this.cdRef.markForCheck();
     this.tickScheduler.schedule();

modules/component/src/index.ts

@@ -1,3 +1,4 @@
+export { RenderScheduler } from './core/render-scheduler';
 export { LetDirective } from './let/let.directive';
 export { LetModule } from './let/let.module';
 export { PushPipe } from './push/push.pipe';