Skip to content

feat(aio): lazy-load embedded components #18428

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
gkalpak wants to merge 8 commits into from
Closed

feat(aio): lazy-load embedded components #18428

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0924132
feat(aio): lazy-load embedded components
gkalpak Jul 31, 2017
4cc6998
fix(aio): do not show new document until embedded components are ready
gkalpak Nov 23, 2017
7d7750e
feat(aio): animate the leaving/entering documents
gkalpak Nov 23, 2017
d3dcf03
fix(aio): fix embedded ToC and improve ToC, destroying components and…
gkalpak Nov 27, 2017
d6f0a66
build(aio): upgrade to latest `rxjs`
gkalpak Nov 29, 2017
3dbfd32
build(aio): upgrade to latest `@angular/*`
gkalpak Nov 23, 2017
1b774ce
build(aio): upgrade to latest `@angular/material` and `@angular/cdk`
gkalpak Nov 24, 2017
2d6ed50
build(aio): upgrade to latest `@angular/cli`
gkalpak Nov 23, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 16 additions & 16 deletions aio/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,31 +64,31 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^5.0.0",
"@angular/cdk": "^2.0.0-beta.12",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0-rc.9",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/material": "^2.0.0-beta.12",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/platform-server": "^5.0.0",
"@angular/router": "^5.0.0",
"@angular/animations": "^5.1.0-beta.2",
"@angular/cdk": "^5.0.0-rc.1",
"@angular/common": "^5.1.0-beta.2",
"@angular/compiler": "^5.1.0-beta.2",
"@angular/core": "^5.1.0-beta.2",
"@angular/forms": "^5.1.0-beta.2",
"@angular/http": "^5.1.0-beta.2",
"@angular/material": "^5.0.0-rc.1",
"@angular/platform-browser": "^5.1.0-beta.2",
"@angular/platform-browser-dynamic": "^5.1.0-beta.2",
"@angular/platform-server": "^5.1.0-beta.2",
"@angular/router": "^5.1.0-beta.2",
"@angular/service-worker": "^1.0.0-beta.16",
"classlist.js": "^1.1.20150312",
"core-js": "^2.4.1",
"jasmine": "^2.6.0",
"ng-pwa-tools": "^0.0.10",
"rxjs": "^5.5.0",
"rxjs": "^5.5.2",
"tslib": "^1.7.1",
"web-animations-js": "^2.2.5",
"zone.js": "0.8.16"
},
"devDependencies": {
"@angular/cli": "^1.5.0",
"@angular/compiler-cli": "^5.0.0",
"@angular/cli": "^1.6.0-rc.0",
"@angular/compiler-cli": "^5.1.0-beta.2",
"@types/jasmine": "^2.5.52",
"@types/jasminewd2": "^2.0.3",
"@types/node": "~6.0.60",
Expand All @@ -113,7 +113,7 @@
"http-server": "^0.9.0",
"ignore": "^3.3.3",
"image-size": "^0.5.1",
"jasmine-core": "^2.6.4",
"jasmine-core": "^2.8.0",
"jasmine-spec-reporter": "^4.1.0",
"jsdom": "^9.12.0",
"karma": "^1.7.0",
Expand Down
18 changes: 9 additions & 9 deletions aio/scripts/_payload-limits.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@
"aio": {
"master": {
"gzip7": {
"inline": 925,
"main": 119519,
"polyfills": 11863
"inline": 941,
"main": 116124,
"polyfills": 11860
},
"gzip9": {
"inline": 925,
"main": 119301,
"polyfills": 11861
"inline": 941,
"main": 115954,
"polyfills": 11858
},
"uncompressed": {
"inline": 1533,
"main": 486493,
"polyfills": 37068
"inline": 1558,
"main": 456432,
"polyfills": 37070
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion aio/src/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@

<section class="sidenav-content" [id]="pageId" role="content">
<aio-mode-banner [mode]="deployment.mode" [version]="versionInfo"></aio-mode-banner>
<aio-doc-viewer [doc]="currentDocument" (docRendered)="onDocRendered()"></aio-doc-viewer>
<aio-doc-viewer [doc]="currentDocument" (docReady)="onDocReady()" (docRemoved)="onDocRemoved()" (docInserted)="onDocInserted()"></aio-doc-viewer>
<aio-dt [on]="dtOn" [(doc)]="currentDocument"></aio-dt>
</section>

Expand Down
91 changes: 62 additions & 29 deletions aio/src/app/app.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,14 @@ import { HttpClient } from '@angular/common/http';
import { MatProgressBar, MatSidenav } from '@angular/material';
import { By } from '@angular/platform-browser';

import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';

import { AppComponent } from './app.component';
import { AppModule } from './app.module';
import { DocViewerComponent } from 'app/layout/doc-viewer/doc-viewer.component';
import { Deployment } from 'app/shared/deployment.service';
import { EmbedComponentsService } from 'app/embed-components/embed-components.service';
import { GaService } from 'app/shared/ga.service';
import { LocationService } from 'app/shared/location.service';
import { Logger } from 'app/shared/logger.service';
Expand All @@ -24,7 +26,7 @@ import { SearchBoxComponent } from 'app/search/search-box/search-box.component';
import { SearchResultsComponent } from 'app/shared/search-results/search-results.component';
import { SearchService } from 'app/search/search.service';
import { SelectComponent } from 'app/shared/select/select.component';
import { TocComponent } from 'app/embedded/toc/toc.component';
import { TocComponent } from 'app/layout/toc/toc.component';
import { TocItem, TocService } from 'app/shared/toc.service';

const sideBySideBreakPoint = 992;
Expand Down Expand Up @@ -55,13 +57,18 @@ describe('AppComponent', () => {
tocService = de.injector.get(TocService);
};


describe('with proper DocViewer', () => {

beforeEach(() => {
DocViewerComponent.animationsEnabled = false;

createTestingModule('a/b');
initializeTest();
});

afterEach(() => DocViewerComponent.animationsEnabled = true);

it('should create', () => {
expect(component).toBeDefined();
});
Expand Down Expand Up @@ -246,25 +253,25 @@ describe('AppComponent', () => {
const sidenavBackdrop = fixture.debugElement.query(By.css('.mat-drawer-backdrop')).nativeElement;
sidenavBackdrop.click();
fixture.detectChanges();
expect(sidenav.opened).toBe(false);
expect(sidenav.opened).toBe(false);
});

it('should close when nav to another guide page', () => {
locationService.go('guide/bags');
fixture.detectChanges();
expect(sidenav.opened).toBe(false);
expect(sidenav.opened).toBe(false);
});

it('should close when nav to api page', () => {
locationService.go('api');
fixture.detectChanges();
expect(sidenav.opened).toBe(false);
expect(sidenav.opened).toBe(false);
});

it('should close again when nav to market page', () => {
locationService.go('features');
fixture.detectChanges();
expect(sidenav.opened).toBe(false);
expect(sidenav.opened).toBe(false);
});

});
Expand Down Expand Up @@ -375,20 +382,27 @@ describe('AppComponent', () => {
checkHostClass('view', '');
});

it('should set the css class of the host container based on the open/closed state of the side nav', () => {
it('should set the css class of the host container based on the open/closed state of the side nav', async () => {
locationService.go('guide/pipes');
fixture.detectChanges();
checkHostClass('sidenav', 'open');

sidenav.close();
sidenav.onClose.next();
await waitForEmit(sidenav.onClose);
fixture.detectChanges();
checkHostClass('sidenav', 'closed');

sidenav.open();
sidenav.onOpen.next();
await waitForEmit(sidenav.onOpen);
fixture.detectChanges();
checkHostClass('sidenav', 'open');

function waitForEmit(emitter: Observable<void>): Promise<void> {
return new Promise(resolve => {
emitter.subscribe(resolve);
fixture.detectChanges();
});
}
});

it('should set the css class of the host container based on the initial deployment mode', () => {
Expand All @@ -407,7 +421,6 @@ describe('AppComponent', () => {
});

describe('currentDocument', () => {

it('should display a guide page (guide/pipes)', () => {
locationService.go('guide/pipes');
fixture.detectChanges();
Expand Down Expand Up @@ -447,16 +460,19 @@ describe('AppComponent', () => {
const scrollDelay = 500;
let scrollService: ScrollService;
let scrollSpy: jasmine.Spy;
let scrollToTopSpy: jasmine.Spy;

beforeEach(() => {
scrollService = fixture.debugElement.injector.get(ScrollService);
scrollSpy = spyOn(scrollService, 'scroll');
scrollToTopSpy = spyOn(scrollService, 'scrollToTop');
});

it('should not scroll immediately when the docId (path) changes', () => {
locationService.go('guide/pipes');
// deliberately not calling `fixture.detectChanges` because don't want `onDocRendered`
// deliberately not calling `fixture.detectChanges` because don't want `onDocInserted`
expect(scrollSpy).not.toHaveBeenCalled();
expect(scrollToTopSpy).not.toHaveBeenCalled();
});

it('should scroll when just the hash changes (# alone)', () => {
Expand Down Expand Up @@ -486,25 +502,37 @@ describe('AppComponent', () => {
expect(scrollSpy).toHaveBeenCalledTimes(1);
});

it('should scroll when e-nav to the empty path', () => {
it('should scroll when re-nav to the empty path', () => {
locationService.go('');
scrollSpy.calls.reset();

locationService.go('');
expect(scrollSpy).toHaveBeenCalledTimes(1);
});

it('should scroll after a delay when call onDocRendered directly', fakeAsync(() => {
component.onDocRendered();
it('should scroll to top when call `onDocRemoved` directly', () => {
scrollToTopSpy.calls.reset();

component.onDocRemoved();
expect(scrollToTopSpy).toHaveBeenCalled();
});

it('should scroll after a delay when call `onDocInserted` directly', fakeAsync(() => {
component.onDocInserted();
expect(scrollSpy).not.toHaveBeenCalled();

tick(scrollDelay);
expect(scrollSpy).toHaveBeenCalled();
}));

it('should scroll (via onDocRendered) when finish navigating to a new doc', fakeAsync(() => {
it('should scroll (via `onDocInserted`) when finish navigating to a new doc', fakeAsync(() => {
expect(scrollToTopSpy).not.toHaveBeenCalled();

locationService.go('guide/pipes');
fixture.detectChanges(); // triggers the event that calls onDocRendered
fixture.detectChanges(); // triggers the event that calls `onDocInserted`
expect(scrollToTopSpy).toHaveBeenCalled();
expect(scrollSpy).not.toHaveBeenCalled();

tick(scrollDelay);
expect(scrollSpy).toHaveBeenCalled();
}));
Expand Down Expand Up @@ -867,7 +895,7 @@ describe('AppComponent', () => {

describe('with mocked DocViewer', () => {
const getDocViewer = () => fixture.debugElement.query(By.css('aio-doc-viewer'));
const triggerDocRendered = () => getDocViewer().triggerEventHandler('docRendered', {});
const triggerDocReady = () => getDocViewer().triggerEventHandler('docReady', undefined);

beforeEach(() => {
createTestingModule('a/b');
Expand All @@ -879,15 +907,15 @@ describe('AppComponent', () => {
});

describe('initial rendering', () => {
it('should initially add the starting class until the first document is rendered', fakeAsync(() => {
it('should initially add the starting class until the first document is ready', fakeAsync(() => {
const getSidenavContainer = () => fixture.debugElement.query(By.css('mat-sidenav-container'));

initializeTest();

expect(component.isStarting).toBe(true);
expect(getSidenavContainer().classes['starting']).toBe(true);

triggerDocRendered();
triggerDocReady();
fixture.detectChanges();
expect(component.isStarting).toBe(true);
expect(getSidenavContainer().classes['starting']).toBe(true);
Expand All @@ -910,7 +938,7 @@ describe('AppComponent', () => {
const getProgressBar = () => fixture.debugElement.query(By.directive(MatProgressBar));
const initializeAndCompleteNavigation = () => {
initializeTest();
triggerDocRendered();
triggerDocReady();
tick(HIDE_DELAY);
};

Expand Down Expand Up @@ -947,7 +975,7 @@ describe('AppComponent', () => {
it('should not be shown when re-navigating to the empty path', fakeAsync(() => {
initializeAndCompleteNavigation();
locationService.urlSubject.next('');
triggerDocRendered();
triggerDocReady();

locationService.urlSubject.next('');

Expand All @@ -958,12 +986,12 @@ describe('AppComponent', () => {
tick(HIDE_DELAY); // Fire the remaining timer or `fakeAsync()` complains.
}));

it('should not be shown if the doc is rendered quickly', fakeAsync(() => {
it('should not be shown if the doc is prepared quickly', fakeAsync(() => {
initializeAndCompleteNavigation();
locationService.urlSubject.next('c/d');

tick(SHOW_DELAY - 1);
triggerDocRendered();
triggerDocReady();

tick(1);
fixture.detectChanges();
Expand All @@ -972,25 +1000,25 @@ describe('AppComponent', () => {
tick(HIDE_DELAY); // Fire the remaining timer or `fakeAsync()` complains.
}));

it('should be shown if rendering the doc takes too long', fakeAsync(() => {
it('should be shown if preparing the doc takes too long', fakeAsync(() => {
initializeAndCompleteNavigation();
locationService.urlSubject.next('c/d');

tick(SHOW_DELAY);
triggerDocRendered();
triggerDocReady();

fixture.detectChanges();
expect(getProgressBar()).toBeTruthy();

tick(HIDE_DELAY); // Fire the remaining timer or `fakeAsync()` complains.
}));

it('should be hidden (after a delay) once the doc is rendered', fakeAsync(() => {
it('should be hidden (after a delay) once the doc has been prepared', fakeAsync(() => {
initializeAndCompleteNavigation();
locationService.urlSubject.next('c/d');

tick(SHOW_DELAY);
triggerDocRendered();
triggerDocReady();

fixture.detectChanges();
expect(getProgressBar()).toBeTruthy();
Expand All @@ -1007,10 +1035,10 @@ describe('AppComponent', () => {
it('should only take the latest request into account', fakeAsync(() => {
initializeAndCompleteNavigation();
locationService.urlSubject.next('c/d'); // The URL changes.
locationService.urlSubject.next('e/f'); // The URL changes again before `onDocRendered()`.
locationService.urlSubject.next('e/f'); // The URL changes again before `onDocReady()`.

tick(SHOW_DELAY - 1); // `onDocRendered()` is triggered (for the last doc),
triggerDocRendered(); // before the progress bar is shown.
tick(SHOW_DELAY - 1); // `onDocReady()` is triggered (for the last doc),
triggerDocReady(); // before the progress bar is shown.

tick(1);
fixture.detectChanges();
Expand All @@ -1033,6 +1061,7 @@ function createTestingModule(initialUrl: string, mode: string = 'stable') {
imports: [ AppModule ],
providers: [
{ provide: APP_BASE_HREF, useValue: '/' },
{ provide: EmbedComponentsService, useClass: TestEmbedComponentsService },
{ provide: GaService, useClass: TestGaService },
{ provide: HttpClient, useClass: TestHttpClient },
{ provide: LocationService, useFactory: () => mockLocationService },
Expand All @@ -1047,6 +1076,10 @@ function createTestingModule(initialUrl: string, mode: string = 'stable') {
});
}

class TestEmbedComponentsService {
embedInto = jasmine.createSpy('embedInto').and.returnValue(of([]));
}

class TestGaService {
locationChanged = jasmine.createSpy('locationChanged');
}
Expand Down
Loading