From 0c8eaf7e6bfc3f9867f7aecde701a2078e84fc33 Mon Sep 17 00:00:00 2001 From: Ben Lesh Date: Fri, 27 Oct 2023 15:41:16 -0500 Subject: [PATCH] feat: support web standard modules --- apps/rxjs.dev/src/app/app.module.ts | 24 +- .../announcement-bar.component.spec.ts | 19 +- .../announcement-bar.module.ts | 10 +- .../api/api-list.component.spec.ts | 185 +++++------ .../custom-elements/api/api-list.component.ts | 2 +- .../custom-elements/api/api-list.module.ts | 14 +- .../custom-elements/api/api.service.spec.ts | 53 ++- .../code/code-example.component.spec.ts | 27 +- .../code/code-example.component.ts | 32 +- .../code/code-example.module.ts | 12 +- .../code/code-tabs.component.spec.ts | 8 +- .../code/code-tabs.component.ts | 2 +- .../custom-elements/code/code-tabs.module.ts | 12 +- .../code/code.component.spec.ts | 33 +- .../custom-elements/code/code.component.ts | 4 +- .../app/custom-elements/code/code.module.ts | 14 +- .../contributor-list.component.spec.ts | 24 +- .../contributor/contributor-list.component.ts | 49 ++- .../contributor/contributor-list.module.ts | 8 +- .../contributor/contributor.component.ts | 70 ++-- .../contributor/contributor.service.spec.ts | 38 +-- .../contributor/contributor.service.ts | 39 ++- .../current-location.component.spec.ts | 9 +- .../current-location.module.ts | 8 +- .../custom-elements/custom-elements.module.ts | 16 +- .../custom-elements/elements-loader.spec.ts | 111 ++++--- .../app/custom-elements/elements-loader.ts | 104 +++--- .../expandable-section.module.ts | 8 +- .../lazy-custom-element.component.spec.ts | 16 +- .../lazy-custom-element.component.ts | 8 +- .../live-example.component.spec.ts | 40 ++- .../live-example/live-example.module.ts | 8 +- .../operator-decision-tree/fixtures.ts | 18 +- ...perator-decision-tree-data.service.spec.ts | 16 +- .../operator-decision-tree-data.service.ts | 6 +- .../operator-decision-tree.component.spec.ts | 100 ++---- .../operator-decision-tree.component.ts | 4 +- .../operator-decision-tree.module.spec.ts | 2 +- .../operator-decision-tree.module.ts | 18 +- .../operator-decision-tree.service.spec.ts | 76 ++--- .../operator-decision-tree.service.ts | 57 +--- .../operator-decision-tree/utils.spec.ts | 14 +- .../operator-decision-tree/utils.ts | 6 +- .../resource/resource-list.component.spec.ts | 23 +- .../resource/resource-list.component.ts | 4 +- .../resource/resource-list.module.ts | 12 +- .../resource/resource.service.spec.ts | 126 ++++--- .../resource/resource.service.ts | 60 ++-- .../file-not-found-search.component.spec.ts | 13 +- .../search/file-not-found-search.module.ts | 10 +- .../src/app/custom-elements/toc/toc.module.ts | 8 +- .../app/documents/document.service.spec.ts | 53 ++- .../src/app/documents/document.service.ts | 20 +- .../doc-viewer/doc-viewer.component.spec.ts | 103 +++--- .../nav-item/nav-item.component.spec.ts | 34 +- .../nav-menu/nav-menu.component.spec.ts | 7 +- .../top-menu/top-menu.component.spec.ts | 12 +- .../src/app/navigation/navigation.service.ts | 71 ++-- .../search-box/search-box.component.spec.ts | 37 +-- apps/rxjs.dev/src/app/search/search.worker.ts | 2 +- .../src/app/shared/attribute-utils.spec.ts | 7 +- .../app/shared/custom-icon-registry.spec.ts | 24 +- .../src/app/shared/deployment.service.spec.ts | 7 +- apps/rxjs.dev/src/app/shared/ga.service.ts | 9 +- .../src/app/shared/location.service.spec.ts | 159 +++------ .../src/app/shared/logger.service.spec.ts | 8 +- .../rxjs.dev/src/app/shared/logger.service.ts | 4 +- .../shared/reporting-error-handler.spec.ts | 4 +- .../src/app/shared/reporting-error-handler.ts | 4 +- .../src/app/shared/scroll.service.spec.ts | 138 ++++---- .../search-results.component.spec.ts | 2 +- .../shared/select/select.component.spec.ts | 26 +- apps/rxjs.dev/src/app/shared/shared.module.ts | 18 +- .../src/app/shared/toc.service.spec.ts | 118 +++---- apps/rxjs.dev/src/app/shared/web-worker.ts | 2 +- .../src/app/sw-updates/sw-updates.module.ts | 7 +- .../app/sw-updates/sw-updates.service.spec.ts | 303 +++++++++-------- apps/rxjs.dev/src/main.ts | 4 +- .../src/lib/addUniqueId.spec.ts | 20 +- .../src/lib/addUniqueId.ts | 12 +- .../src/lib/build.spec.ts | 6 +- .../decision-tree-generator/src/lib/build.ts | 10 +- .../src/lib/decisionTreeReducer.spec.ts | 36 +- .../src/lib/decisionTreeReducer.ts | 27 +- .../src/lib/extractInitialSequence.spec.ts | 8 +- .../src/lib/extractInitialSequence.ts | 6 +- .../src/lib/fixtures.ts | 50 +-- .../src/lib/flattenApiList.spec.ts | 8 +- .../src/lib/flattenApiList.ts | 6 +- .../src/lib/generateUniqueId.spec.ts | 2 +- .../src/lib/helpers.spec.ts | 2 +- .../decision-tree-generator/src/lib/index.ts | 14 +- .../src/lib/interfaces.ts | 11 +- packages/rxjs/src/ajax/index.ts | 8 +- packages/rxjs/src/fetch/index.ts | 2 +- packages/rxjs/src/index.ts | 312 +++++++++--------- packages/rxjs/src/internal/AsyncSubject.ts | 4 +- packages/rxjs/src/internal/BehaviorSubject.ts | 6 +- packages/rxjs/src/internal/Notification.ts | 2 +- .../src/internal/NotificationFactories.ts | 2 +- packages/rxjs/src/internal/Observable.ts | 10 +- packages/rxjs/src/internal/Operator.ts | 4 +- packages/rxjs/src/internal/ReplaySubject.ts | 10 +- packages/rxjs/src/internal/Scheduler.ts | 8 +- packages/rxjs/src/internal/Subject.ts | 8 +- packages/rxjs/src/internal/Subscriber.ts | 12 +- packages/rxjs/src/internal/Subscription.ts | 6 +- .../rxjs/src/internal/ajax/AjaxResponse.ts | 2 +- packages/rxjs/src/internal/ajax/ajax.ts | 10 +- packages/rxjs/src/internal/ajax/errors.ts | 2 +- packages/rxjs/src/internal/ajax/types.ts | 2 +- packages/rxjs/src/internal/config.ts | 4 +- packages/rxjs/src/internal/firstValueFrom.ts | 6 +- packages/rxjs/src/internal/lastValueFrom.ts | 4 +- .../src/internal/observable/bindCallback.ts | 6 +- .../observable/bindCallbackInternals.ts | 14 +- .../internal/observable/bindNodeCallback.ts | 6 +- .../src/internal/observable/combineLatest.ts | 18 +- .../rxjs/src/internal/observable/concat.ts | 12 +- .../src/internal/observable/connectable.ts | 10 +- .../rxjs/src/internal/observable/defer.ts | 6 +- .../observable/dom/WebSocketSubject.ts | 12 +- .../observable/dom/animationFrames.ts | 8 +- .../rxjs/src/internal/observable/dom/fetch.ts | 8 +- .../src/internal/observable/dom/webSocket.ts | 2 +- .../rxjs/src/internal/observable/empty.ts | 2 +- .../rxjs/src/internal/observable/forkJoin.ts | 20 +- packages/rxjs/src/internal/observable/from.ts | 26 +- .../rxjs/src/internal/observable/fromEvent.ts | 10 +- .../internal/observable/fromEventPattern.ts | 8 +- .../internal/observable/fromSubscribable.ts | 6 +- .../rxjs/src/internal/observable/generate.ts | 12 +- packages/rxjs/src/internal/observable/iif.ts | 6 +- .../rxjs/src/internal/observable/interval.ts | 8 +- .../rxjs/src/internal/observable/merge.ts | 14 +- .../rxjs/src/internal/observable/never.ts | 4 +- packages/rxjs/src/internal/observable/of.ts | 6 +- .../internal/observable/onErrorResumeNext.ts | 12 +- .../rxjs/src/internal/observable/partition.ts | 10 +- packages/rxjs/src/internal/observable/race.ts | 12 +- .../rxjs/src/internal/observable/range.ts | 6 +- .../src/internal/observable/throwError.ts | 2 +- .../rxjs/src/internal/observable/timer.ts | 10 +- .../rxjs/src/internal/observable/using.ts | 8 +- packages/rxjs/src/internal/observable/zip.ts | 14 +- packages/rxjs/src/internal/operators/audit.ts | 8 +- .../rxjs/src/internal/operators/auditTime.ts | 8 +- .../rxjs/src/internal/operators/buffer.ts | 10 +- .../src/internal/operators/bufferCount.ts | 8 +- .../rxjs/src/internal/operators/bufferTime.ts | 16 +- .../src/internal/operators/bufferToggle.ts | 14 +- .../rxjs/src/internal/operators/bufferWhen.ts | 10 +- .../rxjs/src/internal/operators/catchError.ts | 10 +- .../internal/operators/combineLatestAll.ts | 6 +- .../internal/operators/combineLatestWith.ts | 6 +- .../rxjs/src/internal/operators/concatAll.ts | 4 +- .../rxjs/src/internal/operators/concatMap.ts | 4 +- .../src/internal/operators/concatMapTo.ts | 4 +- .../rxjs/src/internal/operators/concatWith.ts | 8 +- .../rxjs/src/internal/operators/connect.ts | 10 +- packages/rxjs/src/internal/operators/count.ts | 4 +- .../rxjs/src/internal/operators/debounce.ts | 10 +- .../src/internal/operators/debounceTime.ts | 10 +- .../src/internal/operators/defaultIfEmpty.ts | 6 +- packages/rxjs/src/internal/operators/delay.ts | 8 +- .../rxjs/src/internal/operators/delayWhen.ts | 16 +- .../src/internal/operators/dematerialize.ts | 8 +- .../rxjs/src/internal/operators/distinct.ts | 10 +- .../operators/distinctUntilChanged.ts | 8 +- .../operators/distinctUntilKeyChanged.ts | 4 +- .../rxjs/src/internal/operators/elementAt.ts | 14 +- .../rxjs/src/internal/operators/endWith.ts | 8 +- packages/rxjs/src/internal/operators/every.ts | 6 +- .../rxjs/src/internal/operators/exhaustAll.ts | 6 +- .../rxjs/src/internal/operators/exhaustMap.ts | 8 +- .../rxjs/src/internal/operators/expand.ts | 6 +- .../rxjs/src/internal/operators/filter.ts | 6 +- .../rxjs/src/internal/operators/finalize.ts | 4 +- packages/rxjs/src/internal/operators/find.ts | 6 +- .../rxjs/src/internal/operators/findIndex.ts | 6 +- packages/rxjs/src/internal/operators/first.ts | 16 +- .../rxjs/src/internal/operators/groupBy.ts | 10 +- .../src/internal/operators/ignoreElements.ts | 8 +- .../rxjs/src/internal/operators/isEmpty.ts | 6 +- .../internal/operators/joinAllInternals.ts | 14 +- packages/rxjs/src/internal/operators/last.ts | 16 +- packages/rxjs/src/internal/operators/map.ts | 6 +- packages/rxjs/src/internal/operators/mapTo.ts | 4 +- .../src/internal/operators/materialize.ts | 8 +- packages/rxjs/src/internal/operators/max.ts | 6 +- .../rxjs/src/internal/operators/mergeAll.ts | 6 +- .../src/internal/operators/mergeInternals.ts | 10 +- .../rxjs/src/internal/operators/mergeMap.ts | 6 +- .../rxjs/src/internal/operators/mergeMapTo.ts | 4 +- .../rxjs/src/internal/operators/mergeScan.ts | 6 +- .../rxjs/src/internal/operators/mergeWith.ts | 8 +- packages/rxjs/src/internal/operators/min.ts | 6 +- .../rxjs/src/internal/operators/observeOn.ts | 8 +- .../operators/onErrorResumeNextWith.ts | 6 +- .../rxjs/src/internal/operators/pairwise.ts | 6 +- .../rxjs/src/internal/operators/partition.ts | 8 +- .../rxjs/src/internal/operators/raceWith.ts | 8 +- .../rxjs/src/internal/operators/reduce.ts | 6 +- .../rxjs/src/internal/operators/repeat.ts | 14 +- .../rxjs/src/internal/operators/repeatWhen.ts | 12 +- packages/rxjs/src/internal/operators/retry.ts | 14 +- .../rxjs/src/internal/operators/retryWhen.ts | 12 +- .../rxjs/src/internal/operators/sample.ts | 10 +- .../rxjs/src/internal/operators/sampleTime.ts | 8 +- packages/rxjs/src/internal/operators/scan.ts | 6 +- .../src/internal/operators/scanInternals.ts | 4 +- .../src/internal/operators/sequenceEqual.ts | 8 +- packages/rxjs/src/internal/operators/share.ts | 12 +- .../src/internal/operators/shareReplay.ts | 6 +- .../rxjs/src/internal/operators/single.ts | 12 +- packages/rxjs/src/internal/operators/skip.ts | 4 +- .../rxjs/src/internal/operators/skipLast.ts | 8 +- .../rxjs/src/internal/operators/skipUntil.ts | 10 +- .../rxjs/src/internal/operators/skipWhile.ts | 6 +- .../rxjs/src/internal/operators/startWith.ts | 8 +- .../src/internal/operators/subscribeOn.ts | 4 +- .../rxjs/src/internal/operators/switchAll.ts | 6 +- .../rxjs/src/internal/operators/switchMap.ts | 8 +- .../src/internal/operators/switchMapTo.ts | 4 +- .../rxjs/src/internal/operators/switchScan.ts | 8 +- packages/rxjs/src/internal/operators/take.ts | 8 +- .../rxjs/src/internal/operators/takeLast.ts | 8 +- .../rxjs/src/internal/operators/takeUntil.ts | 10 +- .../rxjs/src/internal/operators/takeWhile.ts | 6 +- packages/rxjs/src/internal/operators/tap.ts | 10 +- .../rxjs/src/internal/operators/throttle.ts | 10 +- .../src/internal/operators/throttleTime.ts | 8 +- .../src/internal/operators/throwIfEmpty.ts | 8 +- .../src/internal/operators/timeInterval.ts | 8 +- .../rxjs/src/internal/operators/timeout.ts | 16 +- .../src/internal/operators/timeoutWith.ts | 8 +- .../rxjs/src/internal/operators/timestamp.ts | 6 +- .../rxjs/src/internal/operators/toArray.ts | 6 +- .../rxjs/src/internal/operators/window.ts | 12 +- .../src/internal/operators/windowCount.ts | 8 +- .../rxjs/src/internal/operators/windowTime.ts | 18 +- .../src/internal/operators/windowToggle.ts | 16 +- .../rxjs/src/internal/operators/windowWhen.ts | 12 +- .../src/internal/operators/withLatestFrom.ts | 14 +- .../rxjs/src/internal/operators/zipAll.ts | 6 +- .../rxjs/src/internal/operators/zipWith.ts | 6 +- .../src/internal/scheduled/scheduleArray.ts | 4 +- .../scheduled/scheduleAsyncIterable.ts | 6 +- .../internal/scheduled/scheduleIterable.ts | 10 +- .../internal/scheduled/scheduleObservable.ts | 8 +- .../src/internal/scheduled/schedulePromise.ts | 8 +- .../scheduled/scheduleReadableStreamLike.ts | 8 +- .../rxjs/src/internal/scheduled/scheduled.ts | 30 +- .../rxjs/src/internal/scheduler/Action.ts | 6 +- .../scheduler/AnimationFrameAction.ts | 10 +- .../scheduler/AnimationFrameScheduler.ts | 4 +- .../rxjs/src/internal/scheduler/AsapAction.ts | 10 +- .../src/internal/scheduler/AsapScheduler.ts | 4 +- .../src/internal/scheduler/AsyncAction.ts | 14 +- .../src/internal/scheduler/AsyncScheduler.ts | 8 +- .../src/internal/scheduler/QueueAction.ts | 10 +- .../src/internal/scheduler/QueueScheduler.ts | 5 +- .../scheduler/VirtualTimeScheduler.ts | 10 +- .../src/internal/scheduler/animationFrame.ts | 4 +- .../scheduler/animationFrameProvider.ts | 2 +- packages/rxjs/src/internal/scheduler/asap.ts | 4 +- packages/rxjs/src/internal/scheduler/async.ts | 4 +- .../scheduler/dateTimestampProvider.ts | 2 +- .../internal/scheduler/immediateProvider.ts | 4 +- .../internal/scheduler/intervalProvider.ts | 2 +- .../scheduler/performanceTimestampProvider.ts | 2 +- packages/rxjs/src/internal/scheduler/queue.ts | 4 +- .../src/internal/scheduler/timeoutProvider.ts | 2 +- .../src/internal/testing/ColdObservable.ts | 14 +- .../src/internal/testing/HotObservable.ts | 14 +- .../rxjs/src/internal/testing/TestMessage.ts | 2 +- .../src/internal/testing/TestScheduler.ts | 32 +- packages/rxjs/src/internal/types.ts | 4 +- packages/rxjs/src/internal/util/args.ts | 6 +- .../rxjs/src/internal/util/executeSchedule.ts | 4 +- .../rxjs/src/internal/util/isAsyncIterable.ts | 2 +- .../src/internal/util/isInteropObservable.ts | 6 +- packages/rxjs/src/internal/util/isIterable.ts | 4 +- .../rxjs/src/internal/util/isObservable.ts | 4 +- packages/rxjs/src/internal/util/isPromise.ts | 2 +- .../src/internal/util/isReadableStreamLike.ts | 4 +- .../rxjs/src/internal/util/isScheduler.ts | 4 +- .../src/internal/util/mapOneOrManyArgs.ts | 16 +- packages/rxjs/src/internal/util/pipe.ts | 4 +- .../src/internal/util/reportUnhandledError.ts | 2 +- packages/rxjs/src/internal/util/rx.ts | 8 +- packages/rxjs/src/operators/index.ts | 196 +++++------ packages/rxjs/src/testing/index.ts | 2 +- packages/rxjs/src/webSocket/index.ts | 4 +- 294 files changed, 2399 insertions(+), 2673 deletions(-) diff --git a/apps/rxjs.dev/src/app/app.module.ts b/apps/rxjs.dev/src/app/app.module.ts index 4ff6a8ff82..2cd25b0be9 100644 --- a/apps/rxjs.dev/src/app/app.module.ts +++ b/apps/rxjs.dev/src/app/app.module.ts @@ -41,7 +41,7 @@ import { CustomElementsModule } from 'app/custom-elements/custom-elements.module import { SharedModule } from 'app/shared/shared.module'; import { SwUpdatesModule } from 'app/sw-updates/sw-updates.module'; -import {environment} from '../environments/environment'; +import { environment } from '../environments/environment.js'; // These are the hardcoded inline svg sources to be used by the `` component. // tslint:disable: max-line-length @@ -52,8 +52,8 @@ export const svgIconProviders = [ name: 'close', svgSource: '' + - '' + - '' + + '' + + '' + '', }, multi: true, @@ -64,8 +64,8 @@ export const svgIconProviders = [ name: 'error_outline', svgSource: '' + - '' + - '' + + '' + + '' + '', }, multi: true, @@ -76,8 +76,8 @@ export const svgIconProviders = [ name: 'insert_comment', svgSource: '' + - '' + - '' + + '' + + '' + '', }, multi: true, @@ -88,7 +88,7 @@ export const svgIconProviders = [ name: 'keyboard_arrow_right', svgSource: '' + - '' + + '' + '', }, multi: true, @@ -99,7 +99,7 @@ export const svgIconProviders = [ name: 'menu', svgSource: '' + - '' + + '' + '', }, multi: true, @@ -120,7 +120,7 @@ export const svgIconProviders = [ MatToolbarModule, SwUpdatesModule, SharedModule, - ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production}), + ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }), ], declarations: [ AppComponent, @@ -153,6 +153,6 @@ export const svgIconProviders = [ { provide: CurrentDateToken, useFactory: currentDateProvider }, { provide: WindowToken, useFactory: windowProvider }, ], - bootstrap: [ AppComponent ] + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/apps/rxjs.dev/src/app/custom-elements/announcement-bar/announcement-bar.component.spec.ts b/apps/rxjs.dev/src/app/custom-elements/announcement-bar/announcement-bar.component.spec.ts index 068f792ad3..4564e2f044 100644 --- a/apps/rxjs.dev/src/app/custom-elements/announcement-bar/announcement-bar.component.spec.ts +++ b/apps/rxjs.dev/src/app/custom-elements/announcement-bar/announcement-bar.component.spec.ts @@ -2,7 +2,7 @@ import { HttpClientTestingModule, HttpTestingController } from '@angular/common/ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { Logger } from 'app/shared/logger.service'; import { MockLogger } from 'testing/logger.service'; -import { AnnouncementBarComponent } from './announcement-bar.component'; +import { AnnouncementBarComponent } from './announcement-bar.component.js'; const today = new Date(); const lastWeek = changeDays(today, -7); @@ -11,7 +11,6 @@ const tomorrow = changeDays(today, 1); const nextWeek = changeDays(today, 7); describe('AnnouncementBarComponent', () => { - let element: HTMLElement; let fixture: ComponentFixture; let component: AnnouncementBarComponent; @@ -22,7 +21,7 @@ describe('AnnouncementBarComponent', () => { const injector = TestBed.configureTestingModule({ imports: [HttpClientTestingModule], declarations: [AnnouncementBarComponent], - providers: [{ provide: Logger, useClass: MockLogger }] + providers: [{ provide: Logger, useClass: MockLogger }], }); httpMock = injector.get(HttpTestingController); @@ -49,7 +48,7 @@ describe('AnnouncementBarComponent', () => { { startDate: lastWeek, endDate: yesterday, message: 'Test Announcement 0' }, { startDate: tomorrow, endDate: nextWeek, message: 'Test Announcement 1' }, { startDate: yesterday, endDate: tomorrow, message: 'Test Announcement 2' }, - { startDate: yesterday, endDate: tomorrow, message: 'Test Announcement 3' } + { startDate: yesterday, endDate: tomorrow, message: 'Test Announcement 3' }, ]); expect(component.announcement.message).toEqual('Test Announcement 2'); }); @@ -66,9 +65,7 @@ describe('AnnouncementBarComponent', () => { const request = httpMock.expectOne('generated/announcements.json'); request.flush('some random response'); expect(component.announcement).toBeUndefined(); - expect(mockLogger.output.error).toEqual([ - [jasmine.any(Error)] - ]); + expect(mockLogger.output.error).toEqual([[jasmine.any(Error)]]); expect(mockLogger.output.error[0][0].message).toMatch(/^generated\/announcements\.json contains invalid data:/); }); @@ -77,9 +74,7 @@ describe('AnnouncementBarComponent', () => { const request = httpMock.expectOne('generated/announcements.json'); request.error(new ErrorEvent('404')); expect(component.announcement).toBeUndefined(); - expect(mockLogger.output.error).toEqual([ - [jasmine.any(Error)] - ]); + expect(mockLogger.output.error).toEqual([[jasmine.any(Error)]]); expect(mockLogger.output.error[0][0].message).toMatch(/^generated\/announcements\.json request failed:/); }); }); @@ -91,7 +86,7 @@ describe('AnnouncementBarComponent', () => { linkUrl: 'link/to/website', message: 'this is an important message', endDate: '2018-03-01', - startDate: '2018-02-01' + startDate: '2018-02-01', }; fixture.detectChanges(); }); @@ -111,5 +106,5 @@ describe('AnnouncementBarComponent', () => { }); function changeDays(initial: Date, days: number) { - return (new Date(initial.valueOf()).setDate(initial.getDate() + days)); + return new Date(initial.valueOf()).setDate(initial.getDate() + days); } diff --git a/apps/rxjs.dev/src/app/custom-elements/announcement-bar/announcement-bar.module.ts b/apps/rxjs.dev/src/app/custom-elements/announcement-bar/announcement-bar.module.ts index d03b6fbe7a..979d01201f 100644 --- a/apps/rxjs.dev/src/app/custom-elements/announcement-bar/announcement-bar.module.ts +++ b/apps/rxjs.dev/src/app/custom-elements/announcement-bar/announcement-bar.module.ts @@ -1,13 +1,13 @@ import { NgModule, Type } from '@angular/core'; import { CommonModule } from '@angular/common'; import { HttpClientModule } from '@angular/common/http'; -import { SharedModule } from '../../shared/shared.module'; -import { AnnouncementBarComponent } from './announcement-bar.component'; -import { WithCustomElementComponent } from '../element-registry'; +import { SharedModule } from '../../shared/shared.module.js'; +import { AnnouncementBarComponent } from './announcement-bar.component.js'; +import { WithCustomElementComponent } from '../element-registry.js'; @NgModule({ - imports: [ CommonModule, SharedModule, HttpClientModule ], - declarations: [ AnnouncementBarComponent ] + imports: [CommonModule, SharedModule, HttpClientModule], + declarations: [AnnouncementBarComponent], }) export class AnnouncementBarModule implements WithCustomElementComponent { customElementComponent: Type = AnnouncementBarComponent; diff --git a/apps/rxjs.dev/src/app/custom-elements/api/api-list.component.spec.ts b/apps/rxjs.dev/src/app/custom-elements/api/api-list.component.spec.ts index 6b31361315..2f944d1b07 100644 --- a/apps/rxjs.dev/src/app/custom-elements/api/api-list.component.spec.ts +++ b/apps/rxjs.dev/src/app/custom-elements/api/api-list.component.spec.ts @@ -1,12 +1,12 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { BehaviorSubject } from 'rxjs'; -import { ApiListComponent } from './api-list.component'; -import { ApiItem, ApiSection, ApiService } from './api.service'; +import { ApiListComponent } from './api-list.component.js'; +import { ApiItem, ApiSection, ApiService } from './api.service.js'; import { LocationService } from 'app/shared/location.service'; import { Logger } from 'app/shared/logger.service'; import { MockLogger } from 'testing/logger.service'; -import { ApiListModule } from './api-list.module'; +import { ApiListModule } from './api-list.module.js'; describe('ApiListComponent', () => { let component: ApiListComponent; @@ -15,12 +15,12 @@ describe('ApiListComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ - imports: [ ApiListModule ], + imports: [ApiListModule], providers: [ { provide: ApiService, useClass: TestApiService }, { provide: Logger, useClass: MockLogger }, - { provide: LocationService, useClass: TestLocationService } - ] + { provide: LocationService, useClass: TestLocationService }, + ], }); fixture = TestBed.createComponent(ApiListComponent); @@ -35,70 +35,68 @@ describe('ApiListComponent', () => { * Subscribes to `filteredSections` and performs expectation within subscription callback. */ function expectFilteredResult(label: string, itemTest: (item: ApiItem) => boolean) { - component.filteredSections.subscribe(filtered => { - filtered = filtered.filter(section => section.items); + component.filteredSections.subscribe((filtered) => { + filtered = filtered.filter((section) => section.items); expect(filtered.length).toBeGreaterThan(0, 'expected something'); - expect(filtered.every(section => section.items!.every(itemTest))).toBe(true, label); + expect(filtered.every((section) => section.items!.every(itemTest))).toBe(true, label); }); } - describe('#filteredSections', () => { - beforeEach(() => { fixture.detectChanges(); }); it('should return all complete sections when no criteria', () => { - let filtered: ApiSection[]|undefined; - component.filteredSections.subscribe(f => filtered = f); + let filtered: ApiSection[] | undefined; + component.filteredSections.subscribe((f) => (filtered = f)); expect(filtered).toEqual(sections); }); it('item.show should be true for all queried items', () => { component.setQuery('class'); - expectFilteredResult('query: class', item => /class/.test(item.name)); + expectFilteredResult('query: class', (item) => /class/.test(item.name)); }); it('items should be an array for every item in section when query matches section name', () => { component.setQuery('core'); - component.filteredSections.subscribe(filtered => { - filtered = filtered.filter(section => Array.isArray(section.items)); + component.filteredSections.subscribe((filtered) => { + filtered = filtered.filter((section) => Array.isArray(section.items)); expect(filtered.length).toBe(1, 'only one section'); expect(filtered[0].name).toBe('core'); - expect(filtered[0].items).toEqual(sections.find(section => section.name === 'core')!.items); + expect(filtered[0].items).toEqual(sections.find((section) => section.name === 'core')!.items); }); }); describe('section.items', () => { it('should null if there are no matching items and the section itself does not match', () => { component.setQuery('core'); - component.filteredSections.subscribe(filtered => { - const commonSection = filtered.find(section => section.name === 'common')!; + component.filteredSections.subscribe((filtered) => { + const commonSection = filtered.find((section) => section.name === 'common')!; expect(commonSection.items).toBe(null); }); }); it('should be visible if they have the selected stability status', () => { - component.setStatus({value: 'stable', title: 'Stable'}); - expectFilteredResult('status: stable', item => item.stability === 'stable'); + component.setStatus({ value: 'stable', title: 'Stable' }); + expectFilteredResult('status: stable', (item) => item.stability === 'stable'); }); it('should be visible if they have the selected security status', () => { - component.setStatus({value: 'security-risk', title: 'Security Risk'}); - expectFilteredResult('status: security-risk', item => item.securityRisk); + component.setStatus({ value: 'security-risk', title: 'Security Risk' }); + expectFilteredResult('status: security-risk', (item) => item.securityRisk); }); it('should be visible if they match the selected API type', () => { - component.setType({value: 'class', title: 'Class'}); - expectFilteredResult('type: class', item => item.docType === 'class'); + component.setType({ value: 'class', title: 'Class' }); + expectFilteredResult('type: class', (item) => item.docType === 'class'); }); }); it('should have no sections and no items visible when there is no match', () => { component.setQuery('fizzbuzz'); - component.filteredSections.subscribe(filtered => { - expect(filtered.some(section => !!section.items)).toBeFalsy(); + component.filteredSections.subscribe((filtered) => { + expect(filtered.some((section) => !!section.items)).toBeFalsy(); }); }); }); @@ -113,8 +111,8 @@ describe('ApiListComponent', () => { function expectOneItem(name: string, section: string, type: string, stability: string) { fixture.detectChanges(); - component.filteredSections.subscribe(filtered => { - filtered = filtered.filter(s => s.items); + component.filteredSections.subscribe((filtered) => { + filtered = filtered.filter((s) => s.items); expect(filtered.length).toBe(1, 'sections'); expect(filtered[0].name).toBe(section, 'section name'); const items = filtered[0].items!; @@ -130,27 +128,26 @@ describe('ApiListComponent', () => { } it('should filter as expected for ?query', () => { - locationService.query = {query: '_3'}; + locationService.query = { query: '_3' }; expectOneItem('class_3', 'core', 'class', 'experimental'); }); it('should filter as expected for ?status', () => { - locationService.query = {status: 'deprecated'}; + locationService.query = { status: 'deprecated' }; expectOneItem('function_1', 'core', 'function', 'deprecated'); }); it('should filter as expected when status is security-risk', () => { - locationService.query = {status: 'security-risk'}; + locationService.query = { status: 'security-risk' }; fixture.detectChanges(); - expectFilteredResult('security-risk', item => item.securityRisk); + expectFilteredResult('security-risk', (item) => item.securityRisk); }); - it('should filter as expected for ?query&status&type', () => { locationService.query = { query: 's_1', status: 'experimental', - type: 'class' + type: 'class', }; fixture.detectChanges(); expectOneItem('class_1', 'common', 'class', 'experimental'); @@ -160,7 +157,7 @@ describe('ApiListComponent', () => { locationService.query = { query: 'S_1', status: 'ExperiMental', - type: 'CLASS' + type: 'CLASS', }; fixture.detectChanges(); expectOneItem('class_1', 'common', 'class', 'experimental'); @@ -192,8 +189,8 @@ describe('ApiListComponent', () => { it('should have query, status, and type', () => { component.setQuery('foo'); - component.setStatus({value: 'stable', title: 'Stable'}); - component.setType({value: 'class', title: 'Class'}); + component.setStatus({ value: 'stable', title: 'Stable' }); + component.setType({ value: 'class', title: 'Class' }); const search = locationService.setSearch.calls.mostRecent().args[1]; expect(search.query).toBe('foo'); @@ -206,9 +203,11 @@ describe('ApiListComponent', () => { ////// Helpers //////// class TestLocationService { - query: {[index: string]: string } = {}; + query: { [index: string]: string } = {}; setSearch = jasmine.createSpy('setSearch'); - search() { return this.query; } + search() { + return this.query; + } } class TestApiService { @@ -219,69 +218,71 @@ class TestApiService { // tslint:disable:quotemark const apiSections: ApiSection[] = [ { - "name": "common", - "title": "common", - "path": "api/common", - "deprecated": false, - "items": [ + name: 'common', + title: 'common', + path: 'api/common', + deprecated: false, + items: [ { - "name": "class_1", - "title": "Class 1", - "path": "api/common/class_1", - "docType": "class", - "stability": "experimental", - "securityRisk": false, + name: 'class_1', + title: 'Class 1', + path: 'api/common/class_1', + docType: 'class', + stability: 'experimental', + securityRisk: false, }, { - "name": "class_2", - "title": "Class 2", - "path": "api/common/class_2", - "docType": "class", - "stability": "stable", - "securityRisk": false, + name: 'class_2', + title: 'Class 2', + path: 'api/common/class_2', + docType: 'class', + stability: 'stable', + securityRisk: false, }, { - "name": "directive_1", - "title": "Directive 1", - "path": "api/common/directive_1", - "docType": "directive", - "stability": "stable", - "securityRisk": true, - } - ] + name: 'directive_1', + title: 'Directive 1', + path: 'api/common/directive_1', + docType: 'directive', + stability: 'stable', + securityRisk: true, + }, + ], }, { - "name": "core", - "title": "core", - "path": "api/core", - "deprecated": false, - "items": [ + name: 'core', + title: 'core', + path: 'api/core', + deprecated: false, + items: [ { - "name": "class_3", - "title": "Class 3", - "path": "api/core/class_3", - "docType": "class", - "stability": "experimental", - "securityRisk": false, + name: 'class_3', + title: 'Class 3', + path: 'api/core/class_3', + docType: 'class', + stability: 'experimental', + securityRisk: false, }, { - "name": "function_1", - "title": "Function 1", - "path": "api/core/function 1", - "docType": "function", - "stability": "deprecated", - "securityRisk": true, + name: 'function_1', + title: 'Function 1', + path: 'api/core/function 1', + docType: 'function', + stability: 'deprecated', + securityRisk: true, }, { - "name": "const_1", - "title": "Const 1", - "path": "api/core/const_1", - "docType": "const", - "stability": "stable", - "securityRisk": false, - } - ] - } + name: 'const_1', + title: 'Const 1', + path: 'api/core/const_1', + docType: 'const', + stability: 'stable', + securityRisk: false, + }, + ], + }, ]; -function getApiSections() { return apiSections; } +function getApiSections() { + return apiSections; +} diff --git a/apps/rxjs.dev/src/app/custom-elements/api/api-list.component.ts b/apps/rxjs.dev/src/app/custom-elements/api/api-list.component.ts index d0eb89d3cf..74cfa9da6e 100644 --- a/apps/rxjs.dev/src/app/custom-elements/api/api-list.component.ts +++ b/apps/rxjs.dev/src/app/custom-elements/api/api-list.component.ts @@ -11,7 +11,7 @@ import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; import { combineLatest, Observable, ReplaySubject } from 'rxjs'; import { LocationService } from 'app/shared/location.service'; -import { ApiSection, ApiService } from './api.service'; +import { ApiSection, ApiService } from './api.service.js'; import { Option } from 'app/shared/select/select.component'; import { map } from 'rxjs/operators'; diff --git a/apps/rxjs.dev/src/app/custom-elements/api/api-list.module.ts b/apps/rxjs.dev/src/app/custom-elements/api/api-list.module.ts index aff550f37f..92c93c0e25 100644 --- a/apps/rxjs.dev/src/app/custom-elements/api/api-list.module.ts +++ b/apps/rxjs.dev/src/app/custom-elements/api/api-list.module.ts @@ -1,15 +1,15 @@ import { NgModule, Type } from '@angular/core'; import { CommonModule } from '@angular/common'; import { HttpClientModule } from '@angular/common/http'; -import { SharedModule } from '../../shared/shared.module'; -import { ApiListComponent } from './api-list.component'; -import { ApiService } from './api.service'; -import { WithCustomElementComponent } from '../element-registry'; +import { SharedModule } from '../../shared/shared.module.js'; +import { ApiListComponent } from './api-list.component.js'; +import { ApiService } from './api.service.js'; +import { WithCustomElementComponent } from '../element-registry.js'; @NgModule({ - imports: [ CommonModule, SharedModule, HttpClientModule ], - declarations: [ ApiListComponent ], - providers: [ ApiService ] + imports: [CommonModule, SharedModule, HttpClientModule], + declarations: [ApiListComponent], + providers: [ApiService], }) export class ApiListModule implements WithCustomElementComponent { customElementComponent: Type = ApiListComponent; diff --git a/apps/rxjs.dev/src/app/custom-elements/api/api.service.spec.ts b/apps/rxjs.dev/src/app/custom-elements/api/api.service.spec.ts index a815e0d8a0..7b9431a491 100644 --- a/apps/rxjs.dev/src/app/custom-elements/api/api.service.spec.ts +++ b/apps/rxjs.dev/src/app/custom-elements/api/api.service.spec.ts @@ -4,10 +4,9 @@ import { TestBed } from '@angular/core/testing'; import { Logger } from 'app/shared/logger.service'; -import { ApiService } from './api.service'; +import { ApiService } from './api.service.js'; describe('ApiService', () => { - let injector: Injector; let service: ApiService; let httpMock: HttpTestingController; @@ -15,10 +14,7 @@ describe('ApiService', () => { beforeEach(() => { injector = TestBed.configureTestingModule({ imports: [HttpClientTestingModule], - providers: [ - ApiService, - { provide: Logger, useClass: TestLogger } - ] + providers: [ApiService, { provide: Logger, useClass: TestLogger }], }); service = injector.get(ApiService); @@ -32,30 +28,25 @@ describe('ApiService', () => { }); it('subscribers should be completed/unsubscribed when service destroyed', () => { - let completed = false; + let completed = false; - service.sections.subscribe( - undefined, - undefined, - () => completed = true - ); + service.sections.subscribe(undefined, undefined, () => (completed = true)); - service.ngOnDestroy(); - expect(completed).toBe(true); + service.ngOnDestroy(); + expect(completed).toBe(true); - // Stop `httpMock.verify()` from complaining. - httpMock.expectOne({}); + // Stop `httpMock.verify()` from complaining. + httpMock.expectOne({}); }); describe('#sections', () => { - - it('first subscriber should fetch sections', done => { + it('first subscriber should fetch sections', (done) => { const data = [ - {name: 'a', title: 'A', path: '', items: [], deprecated: false}, - {name: 'b', title: 'B', path: '', items: [], deprecated: false}, + { name: 'a', title: 'A', path: '', items: [], deprecated: false }, + { name: 'b', title: 'B', path: '', items: [], deprecated: false }, ]; - service.sections.subscribe(sections => { + service.sections.subscribe((sections) => { expect(sections).toEqual(data); done(); }); @@ -63,19 +54,19 @@ describe('ApiService', () => { httpMock.expectOne({}).flush(data); }); - it('second subscriber should get previous sections and NOT trigger refetch', done => { + it('second subscriber should get previous sections and NOT trigger refetch', (done) => { const data = [ - {name: 'a', title: 'A', path: '', items: [], deprecated: false}, - {name: 'b', title: 'B', path: '', items: [], deprecated: false}, + { name: 'a', title: 'A', path: '', items: [], deprecated: false }, + { name: 'b', title: 'B', path: '', items: [], deprecated: false }, ]; let subscriptions = 0; - service.sections.subscribe(sections => { + service.sections.subscribe((sections) => { subscriptions++; expect(sections).toEqual(data); }); - service.sections.subscribe(sections => { + service.sections.subscribe((sections) => { subscriptions++; expect(sections).toEqual(data); expect(subscriptions).toBe(2); @@ -87,22 +78,20 @@ describe('ApiService', () => { }); describe('#fetchSections', () => { - it('should connect to the server w/ expected URL', () => { service.fetchSections(); httpMock.expectOne('generated/docs/api/api-list.json'); }); it('should refresh the #sections observable w/ new content on second call', () => { - let call = 0; let data = [ - {name: 'a', title: 'A', path: '', items: [], deprecated: false}, - {name: 'b', title: 'B', path: '', items: [], deprecated: false}, + { name: 'a', title: 'A', path: '', items: [], deprecated: false }, + { name: 'b', title: 'B', path: '', items: [], deprecated: false }, ]; - service.sections.subscribe(sections => { + service.sections.subscribe((sections) => { // called twice during this test // (1) during subscribe // (2) after refresh @@ -112,7 +101,7 @@ describe('ApiService', () => { httpMock.expectOne({}).flush(data); // refresh/refetch - data = [{name: 'c', title: 'C', path: '', items: [], deprecated: false}]; + data = [{ name: 'c', title: 'C', path: '', items: [], deprecated: false }]; service.fetchSections(); httpMock.expectOne({}).flush(data); diff --git a/apps/rxjs.dev/src/app/custom-elements/code/code-example.component.spec.ts b/apps/rxjs.dev/src/app/custom-elements/code/code-example.component.spec.ts index 54431dad80..2e36f72389 100644 --- a/apps/rxjs.dev/src/app/custom-elements/code/code-example.component.spec.ts +++ b/apps/rxjs.dev/src/app/custom-elements/code/code-example.component.spec.ts @@ -1,8 +1,8 @@ import { Component, ViewChild } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { CodeExampleComponent } from './code-example.component'; -import { CodeExampleModule } from './code-example.module'; +import { CodeExampleComponent } from './code-example.component.js'; +import { CodeExampleModule } from './code-example.module.js'; import { Logger } from 'app/shared/logger.service'; import { MockLogger } from 'testing/logger.service'; @@ -13,13 +13,9 @@ describe('CodeExampleComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ - imports: [ CodeExampleModule ], - declarations: [ - HostComponent, - ], - providers: [ - { provide: Logger, useClass: MockLogger }, - ] + imports: [CodeExampleModule], + declarations: [HostComponent], + providers: [{ provide: Logger, useClass: MockLogger }], }); fixture = TestBed.createComponent(HostComponent); @@ -38,7 +34,7 @@ describe('CodeExampleComponent', () => { expect(fixture.nativeElement.querySelector('header')).toBeTruthy(); expect(codeExampleComponent.classes).toEqual({ 'headed-code': true, - 'simple-code': false + 'simple-code': false, }); codeExampleComponent.header = ''; @@ -48,13 +44,12 @@ describe('CodeExampleComponent', () => { expect(fixture.nativeElement.querySelector('header')).toBeFalsy(); expect(codeExampleComponent.classes).toEqual({ 'headed-code': false, - 'simple-code': true + 'simple-code': true, }); }); it('should set avoidFile class if path has .avoid.', () => { - const codeExampleComponentElement: HTMLElement = - fixture.nativeElement.querySelector('code-example'); + const codeExampleComponentElement: HTMLElement = fixture.nativeElement.querySelector('code-example'); expect(codeExampleComponent.path).toBe('code-path'); expect(codeExampleComponentElement.className.indexOf('avoidFile') === -1).toBe(true); @@ -86,9 +81,9 @@ describe('CodeExampleComponent', () => { selector: 'aio-host-comp', template: ` - {{code}} + {{ code }} - ` + `, }) class HostComponent { code = `const foo = "bar";`; @@ -96,5 +91,5 @@ class HostComponent { path = 'code-path'; hidecopy: boolean | string = false; - @ViewChild(CodeExampleComponent, {static: true}) codeExampleComponent: CodeExampleComponent; + @ViewChild(CodeExampleComponent, { static: true }) codeExampleComponent: CodeExampleComponent; } diff --git a/apps/rxjs.dev/src/app/custom-elements/code/code-example.component.ts b/apps/rxjs.dev/src/app/custom-elements/code/code-example.component.ts index 4ef6cb1c39..7a29cbd349 100644 --- a/apps/rxjs.dev/src/app/custom-elements/code/code-example.component.ts +++ b/apps/rxjs.dev/src/app/custom-elements/code/code-example.component.ts @@ -1,6 +1,6 @@ /* tslint:disable component-selector */ import { Component, HostBinding, ElementRef, ViewChild, Input, AfterViewInit } from '@angular/core'; -import { CodeComponent } from './code.component'; +import { CodeComponent } from './code.component.js'; /** * An embeddable code block that displays nicely formatted code. @@ -18,14 +18,16 @@ import { CodeComponent } from './code.component'; template: `
-
{{header}}
- +
{{ header }}
+ `, }) @@ -46,7 +48,9 @@ export class CodeExampleComponent implements AfterViewInit { 'simple-code': !this.header, }; } - get header(): string { return this._header; } + get header(): string { + return this._header; + } private _header: string; @Input() @@ -54,7 +58,9 @@ export class CodeExampleComponent implements AfterViewInit { this._path = path; this.isAvoid = this.path.indexOf('.avoid.') !== -1; } - get path(): string { return this._path; } + get path(): string { + return this._path; + } private _path = ''; @Input() @@ -62,7 +68,9 @@ export class CodeExampleComponent implements AfterViewInit { // Coerce the boolean value. this._hidecopy = hidecopy != null && `${hidecopy}` !== 'false'; } - get hidecopy(): boolean { return this._hidecopy; } + get hidecopy(): boolean { + return this._hidecopy; + } private _hidecopy: boolean; @Input('hide-copy') diff --git a/apps/rxjs.dev/src/app/custom-elements/code/code-example.module.ts b/apps/rxjs.dev/src/app/custom-elements/code/code-example.module.ts index 0829a85c69..8af869c9fc 100644 --- a/apps/rxjs.dev/src/app/custom-elements/code/code-example.module.ts +++ b/apps/rxjs.dev/src/app/custom-elements/code/code-example.module.ts @@ -1,13 +1,13 @@ import { NgModule, Type } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { CodeExampleComponent } from './code-example.component'; -import { CodeModule } from './code.module'; -import { WithCustomElementComponent } from '../element-registry'; +import { CodeExampleComponent } from './code-example.component.js'; +import { CodeModule } from './code.module.js'; +import { WithCustomElementComponent } from '../element-registry.js'; @NgModule({ - imports: [ CommonModule, CodeModule ], - declarations: [ CodeExampleComponent ], - exports: [ CodeExampleComponent ] + imports: [CommonModule, CodeModule], + declarations: [CodeExampleComponent], + exports: [CodeExampleComponent], }) export class CodeExampleModule implements WithCustomElementComponent { customElementComponent: Type = CodeExampleComponent; diff --git a/apps/rxjs.dev/src/app/custom-elements/code/code-tabs.component.spec.ts b/apps/rxjs.dev/src/app/custom-elements/code/code-tabs.component.spec.ts index 5e5a9d3026..be46a57845 100644 --- a/apps/rxjs.dev/src/app/custom-elements/code/code-tabs.component.spec.ts +++ b/apps/rxjs.dev/src/app/custom-elements/code/code-tabs.component.spec.ts @@ -4,8 +4,8 @@ import { Logger } from 'app/shared/logger.service'; import { MockLogger } from 'testing/logger.service'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { CodeTabsComponent } from './code-tabs.component'; -import { CodeTabsModule } from './code-tabs.module'; +import { CodeTabsComponent } from './code-tabs.component.js'; +import { CodeTabsModule } from './code-tabs.module.js'; @Component({ selector: 'aio-host-comp', @@ -14,9 +14,7 @@ import { CodeTabsModule } from './code-tabs.module'; Code example 1 - - Code example 2 - + Code example 2 `, }) diff --git a/apps/rxjs.dev/src/app/custom-elements/code/code-tabs.component.ts b/apps/rxjs.dev/src/app/custom-elements/code/code-tabs.component.ts index cd6801dd29..1afd21759b 100644 --- a/apps/rxjs.dev/src/app/custom-elements/code/code-tabs.component.ts +++ b/apps/rxjs.dev/src/app/custom-elements/code/code-tabs.component.ts @@ -1,6 +1,6 @@ /* tslint:disable component-selector */ import { AfterViewInit, Component, ElementRef, Input, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core'; -import { CodeComponent } from './code.component'; +import { CodeComponent } from './code.component.js'; export interface TabInfo { class: string | null; diff --git a/apps/rxjs.dev/src/app/custom-elements/code/code-tabs.module.ts b/apps/rxjs.dev/src/app/custom-elements/code/code-tabs.module.ts index f9edb67d24..c336109b5f 100644 --- a/apps/rxjs.dev/src/app/custom-elements/code/code-tabs.module.ts +++ b/apps/rxjs.dev/src/app/custom-elements/code/code-tabs.module.ts @@ -1,15 +1,15 @@ import { NgModule, Type } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { CodeTabsComponent } from './code-tabs.component'; +import { CodeTabsComponent } from './code-tabs.component.js'; import { MatCardModule } from '@angular/material/card'; import { MatTabsModule } from '@angular/material/tabs'; -import { CodeModule } from './code.module'; -import { WithCustomElementComponent } from '../element-registry'; +import { CodeModule } from './code.module.js'; +import { WithCustomElementComponent } from '../element-registry.js'; @NgModule({ - imports: [ CommonModule, MatCardModule, MatTabsModule, CodeModule ], - declarations: [ CodeTabsComponent ], - exports: [ CodeTabsComponent ] + imports: [CommonModule, MatCardModule, MatTabsModule, CodeModule], + declarations: [CodeTabsComponent], + exports: [CodeTabsComponent], }) export class CodeTabsModule implements WithCustomElementComponent { customElementComponent: Type = CodeTabsComponent; diff --git a/apps/rxjs.dev/src/app/custom-elements/code/code.component.spec.ts b/apps/rxjs.dev/src/app/custom-elements/code/code.component.spec.ts index a7be5e8f4c..fd193ca59c 100644 --- a/apps/rxjs.dev/src/app/custom-elements/code/code.component.spec.ts +++ b/apps/rxjs.dev/src/app/custom-elements/code/code.component.spec.ts @@ -4,8 +4,8 @@ import { Logger } from 'app/shared/logger.service'; import { MockLogger } from 'testing/logger.service'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { CodeTabsComponent } from './code-tabs.component'; -import { CodeTabsModule } from './code-tabs.module'; +import { CodeTabsComponent } from './code-tabs.component.js'; +import { CodeTabsModule } from './code-tabs.module.js'; describe('CodeTabsComponent', () => { let fixture: ComponentFixture; @@ -14,12 +14,10 @@ describe('CodeTabsComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ HostComponent ], - imports: [ CodeTabsModule, NoopAnimationsModule ], - schemas: [ NO_ERRORS_SCHEMA ], - providers: [ - { provide: Logger, useClass: MockLogger }, - ] + declarations: [HostComponent], + imports: [CodeTabsModule, NoopAnimationsModule], + schemas: [NO_ERRORS_SCHEMA], + providers: [{ provide: Logger, useClass: MockLogger }], }); fixture = TestBed.createComponent(HostComponent); @@ -73,24 +71,13 @@ describe('CodeTabsComponent', () => { selector: 'aio-host-comp', template: ` - + Code example 1 - - Code example 2 - + Code example 2 - ` + `, }) class HostComponent { - @ViewChild(CodeTabsComponent, {static: true}) codeTabsComponent: CodeTabsComponent; + @ViewChild(CodeTabsComponent, { static: true }) codeTabsComponent: CodeTabsComponent; } diff --git a/apps/rxjs.dev/src/app/custom-elements/code/code.component.ts b/apps/rxjs.dev/src/app/custom-elements/code/code.component.ts index a509106681..1f8b7e485d 100644 --- a/apps/rxjs.dev/src/app/custom-elements/code/code.component.ts +++ b/apps/rxjs.dev/src/app/custom-elements/code/code.component.ts @@ -1,11 +1,11 @@ import { Component, ElementRef, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core'; import { Logger } from 'app/shared/logger.service'; -import { PrettyPrinter } from './pretty-printer.service'; +import { PrettyPrinter } from './pretty-printer.service.js'; import { CopierService } from 'app/shared/copier.service'; import { MatSnackBar } from '@angular/material/snack-bar'; import { tap } from 'rxjs/operators'; import { StackblitzService } from 'app/shared/stackblitz.service'; -import version from '../../../../tools/stackblitz/rxjs.version'; +import version from '../../../../tools/stackblitz/rxjs.version.js'; /** * If linenums is not set, this is the default maximum number of lines that diff --git a/apps/rxjs.dev/src/app/custom-elements/code/code.module.ts b/apps/rxjs.dev/src/app/custom-elements/code/code.module.ts index cc272d795a..9f3d1dab0d 100644 --- a/apps/rxjs.dev/src/app/custom-elements/code/code.module.ts +++ b/apps/rxjs.dev/src/app/custom-elements/code/code.module.ts @@ -1,14 +1,14 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { CodeComponent } from './code.component'; +import { CodeComponent } from './code.component.js'; import { MatSnackBarModule } from '@angular/material/snack-bar'; -import { PrettyPrinter } from './pretty-printer.service'; +import { PrettyPrinter } from './pretty-printer.service.js'; import { CopierService } from 'app/shared/copier.service'; @NgModule({ - imports: [ CommonModule, MatSnackBarModule ], - declarations: [ CodeComponent ], - exports: [ CodeComponent ], - providers: [ PrettyPrinter, CopierService ] + imports: [CommonModule, MatSnackBarModule], + declarations: [CodeComponent], + exports: [CodeComponent], + providers: [PrettyPrinter, CopierService], }) -export class CodeModule { } +export class CodeModule {} diff --git a/apps/rxjs.dev/src/app/custom-elements/contributor/contributor-list.component.spec.ts b/apps/rxjs.dev/src/app/custom-elements/contributor/contributor-list.component.spec.ts index 4ecb04612c..5416ea4147 100644 --- a/apps/rxjs.dev/src/app/custom-elements/contributor/contributor-list.component.spec.ts +++ b/apps/rxjs.dev/src/app/custom-elements/contributor/contributor-list.component.spec.ts @@ -2,15 +2,14 @@ import { ReflectiveInjector } from '@angular/core'; import { of } from 'rxjs'; -import { ContributorGroup } from './contributors.model'; -import { ContributorListComponent } from './contributor-list.component'; -import { ContributorService } from './contributor.service'; +import { ContributorGroup } from './contributors.model.js'; +import { ContributorListComponent } from './contributor-list.component.js'; +import { ContributorService } from './contributor.service.js'; import { LocationService } from 'app/shared/location.service'; // Testing the component class behaviors, independent of its template // Let e2e tests verify how it displays. describe('ContributorListComponent', () => { - let component: ContributorListComponent; let injector: ReflectiveInjector; let contributorService: TestContributorService; @@ -20,8 +19,8 @@ describe('ContributorListComponent', () => { beforeEach(() => { injector = ReflectiveInjector.resolveAndCreate([ ContributorListComponent, - {provide: ContributorService, useClass: TestContributorService }, - {provide: LocationService, useClass: TestLocationService } + { provide: ContributorService, useClass: TestContributorService }, + { provide: LocationService, useClass: TestLocationService }, ]); locationService = injector.get(LocationService); @@ -73,21 +72,22 @@ describe('ContributorListComponent', () => { }); //// Test Helpers //// - function getComponent(): ContributorListComponent { + function getComponent(): ContributorListComponent { const comp = injector.get(ContributorListComponent); comp.ngOnInit(); return comp; } - interface SearchResult { [index: string]: string; }; + interface SearchResult { + [index: string]: string; + } class TestLocationService { searchResult: SearchResult = {}; search = jasmine.createSpy('search').and.callFake(() => this.searchResult); - setSearch = jasmine.createSpy('setSearch') - .and.callFake((label: string, result: SearchResult) => { - this.searchResult = result; - }); + setSearch = jasmine.createSpy('setSearch').and.callFake((label: string, result: SearchResult) => { + this.searchResult = result; + }); } class TestContributorService { diff --git a/apps/rxjs.dev/src/app/custom-elements/contributor/contributor-list.component.ts b/apps/rxjs.dev/src/app/custom-elements/contributor/contributor-list.component.ts index cb31a6ea24..2cbaeaf1a6 100644 --- a/apps/rxjs.dev/src/app/custom-elements/contributor/contributor-list.component.ts +++ b/apps/rxjs.dev/src/app/custom-elements/contributor/contributor-list.component.ts @@ -1,46 +1,45 @@ import { Component, OnInit } from '@angular/core'; -import { ContributorGroup } from './contributors.model'; -import { ContributorService } from './contributor.service'; +import { ContributorGroup } from './contributors.model.js'; +import { ContributorService } from './contributor.service.js'; import { LocationService } from 'app/shared/location.service'; @Component({ selector: `aio-contributor-list`, - template: ` -
- {{name}} -
-
-
- + template: `
+ {{ name }}
-
` +
+
+ +
+
`, }) export class ContributorListComponent implements OnInit { private groups: ContributorGroup[]; groupNames: string[]; selectedGroup: ContributorGroup; - constructor( - private contributorService: ContributorService, - private locationService: LocationService) { } + constructor(private contributorService: ContributorService, private locationService: LocationService) {} ngOnInit() { - const groupName = this.locationService.search()['group'] || ''; + const groupName = this.locationService.search()['group'] || ''; // no need to unsubscribe because `contributors` completes - this.contributorService.contributors - .subscribe(grps => { - this.groups = grps; - this.groupNames = grps.map(g => g.name); - this.selectGroup(groupName); - }); + this.contributorService.contributors.subscribe((grps) => { + this.groups = grps; + this.groupNames = grps.map((g) => g.name); + this.selectGroup(groupName); + }); } selectGroup(name: string) { name = name.toLowerCase(); - this.selectedGroup = this.groups.find(g => g.name.toLowerCase() === name) || this.groups[0]; - this.locationService.setSearch('', {group: this.selectedGroup.name}); + this.selectedGroup = this.groups.find((g) => g.name.toLowerCase() === name) || this.groups[0]; + this.locationService.setSearch('', { group: this.selectedGroup.name }); } } diff --git a/apps/rxjs.dev/src/app/custom-elements/contributor/contributor-list.module.ts b/apps/rxjs.dev/src/app/custom-elements/contributor/contributor-list.module.ts index 66cfdfb6ae..dcd450e837 100644 --- a/apps/rxjs.dev/src/app/custom-elements/contributor/contributor-list.module.ts +++ b/apps/rxjs.dev/src/app/custom-elements/contributor/contributor-list.module.ts @@ -1,9 +1,9 @@ import { NgModule, Type } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { ContributorListComponent } from './contributor-list.component'; -import { ContributorService } from './contributor.service'; -import { ContributorComponent } from './contributor.component'; -import { WithCustomElementComponent } from '../element-registry'; +import { ContributorListComponent } from './contributor-list.component.js'; +import { ContributorService } from './contributor.service.js'; +import { ContributorComponent } from './contributor.component.js'; +import { WithCustomElementComponent } from '../element-registry.js'; @NgModule({ imports: [CommonModule], diff --git a/apps/rxjs.dev/src/app/custom-elements/contributor/contributor.component.ts b/apps/rxjs.dev/src/app/custom-elements/contributor/contributor.component.ts index 57f82f1d81..499515b4ff 100644 --- a/apps/rxjs.dev/src/app/custom-elements/contributor/contributor.component.ts +++ b/apps/rxjs.dev/src/app/custom-elements/contributor/contributor.component.ts @@ -1,44 +1,52 @@ import { Component, Input } from '@angular/core'; -import { Contributor } from './contributors.model'; +import { Contributor } from './contributors.model.js'; import { CONTENT_URL_PREFIX } from 'app/documents/document.service'; @Component({ selector: 'aio-contributor', template: ` -
+
+
+

{{ person.name }}

-
-

{{person.name}}

- -
-
- - View Bio - - - - Twitter {{person.name}} - - - - GitHub {{person.name}} - - - - Personal website {{person.name}} - -
-
+
+
+ View Bio + + + Twitter {{ person.name }} + + + + GitHub {{ person.name }} + + + + Personal website {{ person.name }} + +
+
-
-

{{person.name}}

-

{{person.bio}}

-
+
+

{{ person.name }}

+

{{ person.bio }}

+
`, }) diff --git a/apps/rxjs.dev/src/app/custom-elements/contributor/contributor.service.spec.ts b/apps/rxjs.dev/src/app/custom-elements/contributor/contributor.service.spec.ts index 35f54cc087..3d104b3a8f 100644 --- a/apps/rxjs.dev/src/app/custom-elements/contributor/contributor.service.spec.ts +++ b/apps/rxjs.dev/src/app/custom-elements/contributor/contributor.service.spec.ts @@ -2,11 +2,10 @@ import { HttpClientTestingModule, HttpTestingController } from '@angular/common/ import { Injector } from '@angular/core'; import { TestBed } from '@angular/core/testing'; -import { ContributorService } from './contributor.service'; -import { ContributorGroup } from './contributors.model'; +import { ContributorService } from './contributor.service.js'; +import { ContributorGroup } from './contributors.model.js'; describe('ContributorService', () => { - let injector: Injector; let contribService: ContributorService; let httpMock: HttpTestingController; @@ -14,9 +13,7 @@ describe('ContributorService', () => { beforeEach(() => { injector = TestBed.configureTestingModule({ imports: [HttpClientTestingModule], - providers: [ - ContributorService - ] + providers: [ContributorService], }); contribService = injector.get(ContributorService); @@ -31,31 +28,30 @@ describe('ContributorService', () => { }); describe('#contributors', () => { - let contribs: ContributorGroup[]; let testData: any; beforeEach(() => { testData = getTestContribs(); httpMock.expectOne({}).flush(testData); - contribService.contributors.subscribe(results => contribs = results); + contribService.contributors.subscribe((results) => (contribs = results)); }); it('contributors observable should complete', () => { let completed = false; - contribService.contributors.subscribe(undefined, undefined, () => completed = true); + contribService.contributors.subscribe(undefined, undefined, () => (completed = true)); expect(completed).toBe(true, 'observable completed'); }); it('should reshape the contributor json to expected result', () => { - const groupNames = contribs.map(g => g.name).join(','); + const groupNames = contribs.map((g) => g.name).join(','); expect(groupNames).toEqual('Angular,GDE'); }); it('should have expected "GDE" contribs in order', () => { const gde = contribs[1]; - const actualAngularNames = gde.contributors.map(l => l.name).join(','); - const expectedAngularNames = [testData.jeffcross, testData.kapunahelewong].map(l => l.name).join(','); + const actualAngularNames = gde.contributors.map((l) => l.name).join(','); + const expectedAngularNames = [testData.jeffcross, testData.kapunahelewong].map((l) => l.name).join(','); expect(actualAngularNames).toEqual(expectedAngularNames); }); }); @@ -71,7 +67,7 @@ function getTestContribs() { website: 'https://github.com/kapunahelewong', twitter: 'kapunahele', bio: 'Kapunahele is a front-end developer and contributor to angular.io', - group: 'GDE' + group: 'GDE', }, misko: { name: 'Miško Hevery', @@ -79,7 +75,7 @@ function getTestContribs() { twitter: 'mhevery', website: 'http://misko.hevery.com', bio: 'Miško Hevery is the creator of AngularJS framework.', - group: 'Angular' + group: 'Angular', }, igor: { name: 'Igor Minar', @@ -87,7 +83,7 @@ function getTestContribs() { twitter: 'IgorMinar', website: 'https://google.com/+IgorMinar', bio: 'Igor is a software engineer at Angular.', - group: 'Angular' + group: 'Angular', }, kara: { name: 'Kara Erickson', @@ -95,7 +91,7 @@ function getTestContribs() { twitter: 'karaforthewin', website: 'https://github.com/kara', bio: 'Kara is a software engineer on the Angular team at Angular and a co-organizer of the Angular-SF Meetup. ', - group: 'Angular' + group: 'Angular', }, jeffcross: { name: 'Jeff Cross', @@ -103,15 +99,15 @@ function getTestContribs() { twitter: 'jeffbcross', website: 'https://twitter.com/jeffbcross', bio: 'Jeff was one of the earliest core team members on AngularJS.', - group: 'GDE' + group: 'GDE', }, naomi: { name: 'Naomi Black', picture: 'naomi.jpg', twitter: 'naomitraveller', website: 'http://google.com/+NaomiBlack', - bio: 'Naomi is Angular\'s TPM generalist and jack-of-all-trades.', - group: 'Angular' - } - }; + bio: "Naomi is Angular's TPM generalist and jack-of-all-trades.", + group: 'Angular', + }, + }; } diff --git a/apps/rxjs.dev/src/app/custom-elements/contributor/contributor.service.ts b/apps/rxjs.dev/src/app/custom-elements/contributor/contributor.service.ts index 581acdc9e1..7c83862645 100644 --- a/apps/rxjs.dev/src/app/custom-elements/contributor/contributor.service.ts +++ b/apps/rxjs.dev/src/app/custom-elements/contributor/contributor.service.ts @@ -4,7 +4,7 @@ import { HttpClient } from '@angular/common/http'; import { ConnectableObservable, Observable } from 'rxjs'; import { map, publishLast } from 'rxjs/operators'; -import { Contributor, ContributorGroup } from './contributors.model'; +import { Contributor, ContributorGroup } from './contributors.model.js'; // TODO(andrewjs): Look into changing this so that we don't import the service just to get the const import { CONTENT_URL_PREFIX } from 'app/documents/document.service'; @@ -21,11 +21,11 @@ export class ContributorService { } private getContributors() { - const contributors = this.http.get<{[key: string]: Contributor}>(contributorsPath).pipe( + const contributors = this.http.get<{ [key: string]: Contributor }>(contributorsPath).pipe( // Create group map - map(contribs => { - const contribMap: { [name: string]: Contributor[]} = {}; - Object.keys(contribs).forEach(key => { + map((contribs) => { + const contribMap: { [name: string]: Contributor[] } = {}; + Object.keys(contribs).forEach((key) => { const contributor = contribs[key]; const group = contributor.group; const contribGroup = contribMap[group]; @@ -40,19 +40,20 @@ export class ContributorService { }), // Flatten group map into sorted group array of sorted contributors - map(cmap => { - return Object.keys(cmap).map(key => { - const order = knownGroups.indexOf(key); - return { - name: key, - order: order === -1 ? knownGroups.length : order, - contributors: cmap[key].sort(compareContributors) - } as ContributorGroup; - }) - .sort(compareGroups); + map((cmap) => { + return Object.keys(cmap) + .map((key) => { + const order = knownGroups.indexOf(key); + return { + name: key, + order: order === -1 ? knownGroups.length : order, + contributors: cmap[key].sort(compareContributors), + } as ContributorGroup; + }) + .sort(compareGroups); }), - publishLast(), + publishLast() ); (contributors as ConnectableObservable).connect(); @@ -61,11 +62,9 @@ export class ContributorService { } function compareContributors(l: Contributor, r: Contributor) { - return l.name.toUpperCase() > r.name.toUpperCase() ? 1 : -1; + return l.name.toUpperCase() > r.name.toUpperCase() ? 1 : -1; } function compareGroups(l: ContributorGroup, r: ContributorGroup) { - return l.order === r.order ? - (l.name > r.name ? 1 : -1) : - l.order > r.order ? 1 : -1; + return l.order === r.order ? (l.name > r.name ? 1 : -1) : l.order > r.order ? 1 : -1; } diff --git a/apps/rxjs.dev/src/app/custom-elements/current-location/current-location.component.spec.ts b/apps/rxjs.dev/src/app/custom-elements/current-location/current-location.component.spec.ts index 58dac0445f..aa6c5a99f8 100644 --- a/apps/rxjs.dev/src/app/custom-elements/current-location/current-location.component.spec.ts +++ b/apps/rxjs.dev/src/app/custom-elements/current-location/current-location.component.spec.ts @@ -1,8 +1,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { LocationService } from 'app/shared/location.service'; import { MockLocationService } from 'testing/location.service'; -import { CurrentLocationComponent } from './current-location.component'; - +import { CurrentLocationComponent } from './current-location.component.js'; describe('CurrentLocationComponent', () => { let element: HTMLElement; @@ -13,10 +12,8 @@ describe('CurrentLocationComponent', () => { locationService = new MockLocationService('initial/url'); TestBed.configureTestingModule({ - declarations: [ CurrentLocationComponent ], - providers: [ - { provide: LocationService, useValue: locationService } - ] + declarations: [CurrentLocationComponent], + providers: [{ provide: LocationService, useValue: locationService }], }); fixture = TestBed.createComponent(CurrentLocationComponent); diff --git a/apps/rxjs.dev/src/app/custom-elements/current-location/current-location.module.ts b/apps/rxjs.dev/src/app/custom-elements/current-location/current-location.module.ts index 1dc0359621..6d73daef5c 100644 --- a/apps/rxjs.dev/src/app/custom-elements/current-location/current-location.module.ts +++ b/apps/rxjs.dev/src/app/custom-elements/current-location/current-location.module.ts @@ -1,11 +1,11 @@ import { NgModule, Type } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { CurrentLocationComponent } from './current-location.component'; -import { WithCustomElementComponent } from '../element-registry'; +import { CurrentLocationComponent } from './current-location.component.js'; +import { WithCustomElementComponent } from '../element-registry.js'; @NgModule({ - imports: [ CommonModule ], - declarations: [ CurrentLocationComponent ] + imports: [CommonModule], + declarations: [CurrentLocationComponent], }) export class CurrentLocationModule implements WithCustomElementComponent { customElementComponent: Type = CurrentLocationComponent; diff --git a/apps/rxjs.dev/src/app/custom-elements/custom-elements.module.ts b/apps/rxjs.dev/src/app/custom-elements/custom-elements.module.ts index 064dfb8e40..0d64c5cda5 100644 --- a/apps/rxjs.dev/src/app/custom-elements/custom-elements.module.ts +++ b/apps/rxjs.dev/src/app/custom-elements/custom-elements.module.ts @@ -1,16 +1,16 @@ import { NgModule } from '@angular/core'; -import { ROUTES} from '@angular/router'; -import { ElementsLoader } from './elements-loader'; +import { ROUTES } from '@angular/router'; +import { ElementsLoader } from './elements-loader.js'; import { ELEMENT_MODULE_LOAD_CALLBACKS, ELEMENT_MODULE_LOAD_CALLBACKS_AS_ROUTES, - ELEMENT_MODULE_LOAD_CALLBACKS_TOKEN -} from './element-registry'; -import { LazyCustomElementComponent } from './lazy-custom-element.component'; + ELEMENT_MODULE_LOAD_CALLBACKS_TOKEN, +} from './element-registry.js'; +import { LazyCustomElementComponent } from './lazy-custom-element.component.js'; @NgModule({ - declarations: [ LazyCustomElementComponent ], - exports: [ LazyCustomElementComponent ], + declarations: [LazyCustomElementComponent], + exports: [LazyCustomElementComponent], providers: [ ElementsLoader, { provide: ELEMENT_MODULE_LOAD_CALLBACKS_TOKEN, useValue: ELEMENT_MODULE_LOAD_CALLBACKS }, @@ -21,4 +21,4 @@ import { LazyCustomElementComponent } from './lazy-custom-element.component'; { provide: ROUTES, useValue: ELEMENT_MODULE_LOAD_CALLBACKS_AS_ROUTES, multi: true }, ], }) -export class CustomElementsModule { } +export class CustomElementsModule {} diff --git a/apps/rxjs.dev/src/app/custom-elements/elements-loader.spec.ts b/apps/rxjs.dev/src/app/custom-elements/elements-loader.spec.ts index 64d5bbb2fb..beebe06bfa 100644 --- a/apps/rxjs.dev/src/app/custom-elements/elements-loader.spec.ts +++ b/apps/rxjs.dev/src/app/custom-elements/elements-loader.spec.ts @@ -1,15 +1,17 @@ import { Compiler, ComponentFactory, - ComponentFactoryResolver, ComponentRef, Injector, NgModuleFactory, + ComponentFactoryResolver, + ComponentRef, + Injector, + NgModuleFactory, NgModuleRef, Type, } from '@angular/core'; import { TestBed, fakeAsync, flushMicrotasks } from '@angular/core/testing'; -import { ElementsLoader } from './elements-loader'; -import { ELEMENT_MODULE_LOAD_CALLBACKS_TOKEN, WithCustomElementComponent } from './element-registry'; - +import { ElementsLoader } from './elements-loader.js'; +import { ELEMENT_MODULE_LOAD_CALLBACKS_TOKEN, WithCustomElementComponent } from './element-registry.js'; interface Deferred { resolve(): void; @@ -25,14 +27,14 @@ describe('ElementsLoader', () => { providers: [ ElementsLoader, { - provide: ELEMENT_MODULE_LOAD_CALLBACKS_TOKEN, useValue: new Map< - string, () => Promise | Type> - >([ - ['element-a-selector', () => Promise.resolve(new FakeModuleFactory('element-a-module'))], - ['element-b-selector', () => Promise.resolve(new FakeModuleFactory('element-b-module'))], - ['element-c-selector', () => Promise.resolve(FakeCustomElementModule)] - ])}, - ] + provide: ELEMENT_MODULE_LOAD_CALLBACKS_TOKEN, + useValue: new Map Promise | Type>>([ + ['element-a-selector', () => Promise.resolve(new FakeModuleFactory('element-a-module'))], + ['element-b-selector', () => Promise.resolve(new FakeModuleFactory('element-b-module'))], + ['element-c-selector', () => Promise.resolve(FakeCustomElementModule)], + ]), + }, + ], }); elementsLoader = injector.get(ElementsLoader); @@ -42,7 +44,7 @@ describe('ElementsLoader', () => { describe('loadContainedCustomElements()', () => { let loadCustomElementSpy: jasmine.Spy; - beforeEach(() => loadCustomElementSpy = spyOn(elementsLoader, 'loadCustomElement')); + beforeEach(() => (loadCustomElementSpy = spyOn(elementsLoader, 'loadCustomElement'))); it('should attempt to load and register all contained elements', fakeAsync(() => { expect(loadCustomElementSpy).not.toHaveBeenCalled(); @@ -87,9 +89,9 @@ describe('ElementsLoader', () => { const log: any[] = []; elementsLoader.loadContainedCustomElements(hostEl).subscribe( - v => log.push(`emitted: ${v}`), - e => log.push(`errored: ${e}`), - () => log.push('completed'), + (v) => log.push(`emitted: ${v}`), + (e) => log.push(`errored: ${e}`), + () => log.push('completed') ); flushMicrotasks(); @@ -115,9 +117,9 @@ describe('ElementsLoader', () => { const log: any[] = []; elementsLoader.loadContainedCustomElements(hostEl).subscribe( - v => log.push(`emitted: ${v}`), - e => log.push(`errored: ${e}`), - () => log.push('completed'), + (v) => log.push(`emitted: ${v}`), + (e) => log.push(`errored: ${e}`), + () => log.push('completed') ); flushMicrotasks(); @@ -159,7 +161,7 @@ describe('ElementsLoader', () => { it('should wait until the element is defined', fakeAsync(() => { let state = 'pending'; - elementsLoader.loadCustomElement('element-b-selector').then(() => state = 'resolved'); + elementsLoader.loadCustomElement('element-b-selector').then(() => (state = 'resolved')); flushMicrotasks(); expect(state).toBe('pending'); @@ -188,7 +190,7 @@ describe('ElementsLoader', () => { // Once loading/registering is already completed: let state = 'pending'; - elementsLoader.loadCustomElement('element-a-selector').then(() => state = 'resolved'); + elementsLoader.loadCustomElement('element-a-selector').then(() => (state = 'resolved')); flushMicrotasks(); expect(state).toBe('resolved'); expect(definedSpy).not.toHaveBeenCalled(); @@ -196,7 +198,7 @@ describe('ElementsLoader', () => { it('should fail if defining the custom element fails', fakeAsync(() => { let state = 'pending'; - elementsLoader.loadCustomElement('element-b-selector').catch(e => state = `rejected: ${e}`); + elementsLoader.loadCustomElement('element-b-selector').catch((e) => (state = `rejected: ${e}`)); flushMicrotasks(); expect(state).toBe('pending'); @@ -205,33 +207,30 @@ describe('ElementsLoader', () => { expect(state).toBe('rejected: foo'); })); - it('should be able to load and register an element again if previous attempt failed', - fakeAsync(() => { - elementsLoader.loadCustomElement('element-a-selector'); - flushMicrotasks(); - expect(definedSpy).toHaveBeenCalledTimes(1); + it('should be able to load and register an element again if previous attempt failed', fakeAsync(() => { + elementsLoader.loadCustomElement('element-a-selector'); + flushMicrotasks(); + expect(definedSpy).toHaveBeenCalledTimes(1); - definedSpy.calls.reset(); + definedSpy.calls.reset(); - // While loading/registering is still in progress: - elementsLoader.loadCustomElement('element-a-selector').catch(() => undefined); - flushMicrotasks(); - expect(definedSpy).not.toHaveBeenCalled(); + // While loading/registering is still in progress: + elementsLoader.loadCustomElement('element-a-selector').catch(() => undefined); + flushMicrotasks(); + expect(definedSpy).not.toHaveBeenCalled(); - whenDefinedDeferreds[0].reject('foo'); - flushMicrotasks(); - expect(definedSpy).not.toHaveBeenCalled(); + whenDefinedDeferreds[0].reject('foo'); + flushMicrotasks(); + expect(definedSpy).not.toHaveBeenCalled(); - // Once loading/registering has already failed: - elementsLoader.loadCustomElement('element-a-selector'); - flushMicrotasks(); - expect(definedSpy).toHaveBeenCalledTimes(1); - }) - ); + // Once loading/registering has already failed: + elementsLoader.loadCustomElement('element-a-selector'); + flushMicrotasks(); + expect(definedSpy).toHaveBeenCalledTimes(1); + })); it('should be able to load and register an element after compiling its NgModule', fakeAsync(() => { - const compilerSpy = spyOn(compiler, 'compileModuleAsync') - .and.returnValue(Promise.resolve(new FakeModuleFactory('element-c-module'))); + const compilerSpy = spyOn(compiler, 'compileModuleAsync').and.returnValue(Promise.resolve(new FakeModuleFactory('element-c-module'))); elementsLoader.loadCustomElement('element-c-selector'); flushMicrotasks(); @@ -255,21 +254,27 @@ class FakeComponentFactory extends ComponentFactory { selector: string; componentType: Type; ngContentSelectors: string[]; - inputs = [{propName: this.identifyingInput, templateName: this.identifyingInput}]; + inputs = [{ propName: this.identifyingInput, templateName: this.identifyingInput }]; outputs = []; - constructor(private identifyingInput: string) { super(); } + constructor(private identifyingInput: string) { + super(); + } - create(injector: Injector, - projectableNodes?: any[][], - rootSelectorOrNode?: string | any, - ngModule?: NgModuleRef): ComponentRef { + create( + injector: Injector, + projectableNodes?: any[][], + rootSelectorOrNode?: string | any, + ngModule?: NgModuleRef + ): ComponentRef { return jasmine.createSpy('ComponentRef') as any; } } class FakeComponentFactoryResolver extends ComponentFactoryResolver { - constructor(private modulePath: string) { super(); } + constructor(private modulePath: string) { + super(); + } resolveComponentFactory(component: Type): ComponentFactory { return new FakeComponentFactory(this.modulePath); @@ -295,7 +300,9 @@ class FakeModuleFactory extends NgModuleFactory { moduleType: Type; moduleRefToCreate = new FakeModuleRef(this.modulePath); - constructor(private modulePath: string) { super(); } + constructor(private modulePath: string) { + super(); + } create(parentInjector: Injector | null): NgModuleRef { return this.moduleRefToCreate; @@ -304,6 +311,6 @@ class FakeModuleFactory extends NgModuleFactory { function returnPromisesFromSpy(spy: jasmine.Spy): Deferred[] { const deferreds: Deferred[] = []; - spy.and.callFake(() => new Promise((resolve: any, reject) => deferreds.push({resolve, reject}))); + spy.and.callFake(() => new Promise((resolve: any, reject) => deferreds.push({ resolve, reject }))); return deferreds; } diff --git a/apps/rxjs.dev/src/app/custom-elements/elements-loader.ts b/apps/rxjs.dev/src/app/custom-elements/elements-loader.ts index f06894082b..d11c08d4d6 100644 --- a/apps/rxjs.dev/src/app/custom-elements/elements-loader.ts +++ b/apps/rxjs.dev/src/app/custom-elements/elements-loader.ts @@ -1,17 +1,9 @@ -import { - Compiler, - Inject, - Injectable, - NgModuleFactory, - NgModuleRef, - Type, -} from '@angular/core'; -import { ELEMENT_MODULE_LOAD_CALLBACKS_TOKEN, WithCustomElementComponent } from './element-registry'; +import { Compiler, Inject, Injectable, NgModuleFactory, NgModuleRef, Type } from '@angular/core'; +import { ELEMENT_MODULE_LOAD_CALLBACKS_TOKEN, WithCustomElementComponent } from './element-registry.js'; import { from, Observable, of } from 'rxjs'; import { createCustomElement } from '@angular/elements'; import { LoadChildrenCallback } from '@angular/router'; - @Injectable() export class ElementsLoader { /** Map of unregistered custom elements and their respective module paths to load. */ @@ -19,9 +11,11 @@ export class ElementsLoader { /** Map of custom elements that are in the process of being loaded and registered. */ private elementsLoading = new Map>(); - constructor(private moduleRef: NgModuleRef, - @Inject(ELEMENT_MODULE_LOAD_CALLBACKS_TOKEN) elementModulePaths: Map, - private compiler: Compiler) { + constructor( + private moduleRef: NgModuleRef, + @Inject(ELEMENT_MODULE_LOAD_CALLBACKS_TOKEN) elementModulePaths: Map, + private compiler: Compiler + ) { this.elementsToLoad = new Map(elementModulePaths); } @@ -31,13 +25,14 @@ export class ElementsLoader { * elements so that they will not be queried in subsequent calls. */ loadContainedCustomElements(element: HTMLElement): Observable { - const unregisteredSelectors = Array.from(this.elementsToLoad.keys()) - .filter(s => element.querySelector(s)); + const unregisteredSelectors = Array.from(this.elementsToLoad.keys()).filter((s) => element.querySelector(s)); - if (!unregisteredSelectors.length) { return of(undefined); } + if (!unregisteredSelectors.length) { + return of(undefined); + } // Returns observable that completes when all discovered elements have been registered. - const allRegistered = Promise.all(unregisteredSelectors.map(s => this.loadCustomElement(s))); + const allRegistered = Promise.all(unregisteredSelectors.map((s) => this.loadCustomElement(s))); return from(allRegistered.then(() => undefined)); } @@ -51,44 +46,45 @@ export class ElementsLoader { if (this.elementsToLoad.has(selector)) { // Load and register the custom element (for the first time). const modulePathLoader = this.elementsToLoad.get(selector)!; - const loadedAndRegistered = - (modulePathLoader() as Promise | Type>) - .then(elementModuleOrFactory => { - /** - * With View Engine, the NgModule factory is created and provided when loaded. - * With Ivy, only the NgModule class is provided loaded and must be compiled. - * This uses the same mechanism as the deprecated `SystemJsNgModuleLoader` in - * in `packages/core/src/linker/system_js_ng_module_factory_loader.ts` - * to pass on the NgModuleFactory, or compile the NgModule and return its NgModuleFactory. - */ - if (elementModuleOrFactory instanceof NgModuleFactory) { - return elementModuleOrFactory; - } else { - return this.compiler.compileModuleAsync(elementModuleOrFactory); - } - }) - .then(elementModuleFactory => { - const elementModuleRef = elementModuleFactory.create(this.moduleRef.injector); - const injector = elementModuleRef.injector; - const CustomElementComponent = elementModuleRef.instance.customElementComponent; - const CustomElement = createCustomElement(CustomElementComponent, {injector}); + const loadedAndRegistered = ( + modulePathLoader() as Promise | Type> + ) + .then((elementModuleOrFactory) => { + /** + * With View Engine, the NgModule factory is created and provided when loaded. + * With Ivy, only the NgModule class is provided loaded and must be compiled. + * This uses the same mechanism as the deprecated `SystemJsNgModuleLoader` in + * in `packages/core/src/linker/system_js_ng_module_factory_loader.ts` + * to pass on the NgModuleFactory, or compile the NgModule and return its NgModuleFactory. + */ + if (elementModuleOrFactory instanceof NgModuleFactory) { + return elementModuleOrFactory; + } else { + return this.compiler.compileModuleAsync(elementModuleOrFactory); + } + }) + .then((elementModuleFactory) => { + const elementModuleRef = elementModuleFactory.create(this.moduleRef.injector); + const injector = elementModuleRef.injector; + const CustomElementComponent = elementModuleRef.instance.customElementComponent; + const CustomElement = createCustomElement(CustomElementComponent, { injector }); - customElements!.define(selector, CustomElement); - return customElements.whenDefined(selector); - }) - .then(() => { - // The custom element has been successfully loaded and registered. - // Remove from `elementsLoading` and `elementsToLoad`. - this.elementsLoading.delete(selector); - this.elementsToLoad.delete(selector); - }) - .catch(err => { - // The custom element has failed to load and register. - // Remove from `elementsLoading`. - // (Do not remove from `elementsToLoad` in case it was a temporary error.) - this.elementsLoading.delete(selector); - return Promise.reject(err); - }); + customElements!.define(selector, CustomElement); + return customElements.whenDefined(selector); + }) + .then(() => { + // The custom element has been successfully loaded and registered. + // Remove from `elementsLoading` and `elementsToLoad`. + this.elementsLoading.delete(selector); + this.elementsToLoad.delete(selector); + }) + .catch((err) => { + // The custom element has failed to load and register. + // Remove from `elementsLoading`. + // (Do not remove from `elementsToLoad` in case it was a temporary error.) + this.elementsLoading.delete(selector); + return Promise.reject(err); + }); this.elementsLoading.set(selector, loadedAndRegistered); return loadedAndRegistered; diff --git a/apps/rxjs.dev/src/app/custom-elements/expandable-section/expandable-section.module.ts b/apps/rxjs.dev/src/app/custom-elements/expandable-section/expandable-section.module.ts index 4383dc80f7..2f669b2768 100644 --- a/apps/rxjs.dev/src/app/custom-elements/expandable-section/expandable-section.module.ts +++ b/apps/rxjs.dev/src/app/custom-elements/expandable-section/expandable-section.module.ts @@ -1,11 +1,11 @@ import { NgModule, Type } from '@angular/core'; -import { ExpandableSectionComponent } from './expandable-section.component'; -import { WithCustomElementComponent } from '../element-registry'; +import { ExpandableSectionComponent } from './expandable-section.component.js'; +import { WithCustomElementComponent } from '../element-registry.js'; import { MatExpansionModule } from '@angular/material/expansion'; @NgModule({ - imports: [ MatExpansionModule ], - declarations: [ ExpandableSectionComponent, ] + imports: [MatExpansionModule], + declarations: [ExpandableSectionComponent], }) export class ExpandableSectionModule implements WithCustomElementComponent { customElementComponent: Type = ExpandableSectionComponent; diff --git a/apps/rxjs.dev/src/app/custom-elements/lazy-custom-element.component.spec.ts b/apps/rxjs.dev/src/app/custom-elements/lazy-custom-element.component.spec.ts index 5bb0eeefa5..8551f664c1 100644 --- a/apps/rxjs.dev/src/app/custom-elements/lazy-custom-element.component.spec.ts +++ b/apps/rxjs.dev/src/app/custom-elements/lazy-custom-element.component.spec.ts @@ -1,8 +1,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { Logger } from 'app/shared/logger.service'; import { MockLogger } from 'testing/logger.service'; -import { LazyCustomElementComponent } from './lazy-custom-element.component'; -import { ElementsLoader } from './elements-loader'; +import { LazyCustomElementComponent } from './lazy-custom-element.component.js'; +import { ElementsLoader } from './elements-loader.js'; describe('LazyCustomElementComponent', () => { let mockElementsLoader: jasmine.SpyObj; @@ -10,13 +10,10 @@ describe('LazyCustomElementComponent', () => { let fixture: ComponentFixture; beforeEach(() => { - mockElementsLoader = jasmine.createSpyObj('ElementsLoader', [ - 'loadContainedCustomElements', - 'loadCustomElement', - ]); + mockElementsLoader = jasmine.createSpyObj('ElementsLoader', ['loadContainedCustomElements', 'loadCustomElement']); const injector = TestBed.configureTestingModule({ - declarations: [ LazyCustomElementComponent ], + declarations: [LazyCustomElementComponent], providers: [ { provide: ElementsLoader, useValue: mockElementsLoader }, { provide: Logger, useClass: MockLogger }, @@ -52,7 +49,7 @@ describe('LazyCustomElementComponent', () => { expect(mockElementsLoader.loadCustomElement).not.toHaveBeenCalled(); expect(mockLogger.output.error).toEqual([[jasmine.any(Error)]]); - expect(mockLogger.output.error[0][0].message).toBe('Invalid selector for \'aio-lazy-ce\': '); + expect(mockLogger.output.error[0][0].message).toBe("Invalid selector for 'aio-lazy-ce': "); }); it('should log an error (and abort) if the selector is invalid', () => { @@ -61,7 +58,6 @@ describe('LazyCustomElementComponent', () => { expect(mockElementsLoader.loadCustomElement).not.toHaveBeenCalled(); expect(mockLogger.output.error).toEqual([[jasmine.any(Error)]]); - expect(mockLogger.output.error[0][0].message).toBe( - 'Invalid selector for \'aio-lazy-ce\': foo-bar> { @Component({ selector: 'aio-host-comp', - template: `` + template: ``, }) - class HostComponent { } + class HostComponent {} class TestLocation { - path() { return testPath; } + path() { + return testPath; + } } function getAnchors() { - return liveExampleDe.queryAll(By.css('a')).map(de => de.nativeElement as HTMLAnchorElement); + return liveExampleDe.queryAll(By.css('a')).map((de) => de.nativeElement as HTMLAnchorElement); } - function getHrefs() { return getAnchors().map(a => a.href); } + function getHrefs() { + return getAnchors().map((a) => a.href); + } function setHostTemplate(template: string) { - TestBed.overrideComponent(HostComponent, {set: {template}}); + TestBed.overrideComponent(HostComponent, { set: { template } }); } function testComponent(testFn: () => void) { @@ -49,19 +53,19 @@ describe('LiveExampleComponent', () => { //////// tests //////// beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ HostComponent, LiveExampleComponent, EmbeddedStackblitzComponent ], - providers: [ - { provide: Location, useClass: TestLocation } - ] + declarations: [HostComponent, LiveExampleComponent, EmbeddedStackblitzComponent], + providers: [{ provide: Location, useClass: TestLocation }], }) - // Disable the