feat(AppShell): shellRender and shellNoRender attributes and implement different stripping strategies

- [x] Make the shell-related directives add `shellRender` and `shellNoRender` attributes.
- [x] Encapsulate the "hiding", "showing" element logic into a service which is injected with DI and can its provider can be overridden.
- [x] Add visitor which finds App Shell related comments in templates and processes them.

Author: mgechev

app-shell/src/app/app-shell-providers.ts

@@ -0,0 +1,26 @@
+import { IS_PRERENDER } from './is-prerender.service';
+import { TemplateVisibilityStrategy } from './template-visibility-strategy';
+import { TemplateCommentStrategy } from './template-comment-strategy';
+
+export const APP_SHELL_RUNTIME_PROVIDERS: any[] = [
+  {
+    provide: IS_PRERENDER,
+    useValue: false
+  },
+  {
+    provide: TemplateVisibilityStrategy,
+    useClass: TemplateCommentStrategy
+  }
+];
+
+export const APP_SHELL_BUILD_PROVIDERS: any[] = [
+  {
+    provide: IS_PRERENDER,
+    useValue: true
+  },
+  {
+    provide: TemplateVisibilityStrategy,
+    useClass: TemplateCommentStrategy
+  }
+];
+

app-shell/src/app/index.ts

@@ -2,6 +2,8 @@ import { Type } from '@angular/core';
 import { ShellRender } from './shell-render.directive';
 import { ShellNoRender } from './shell-no-render.directive';
 
+export * from './app-shell-providers';
+export * from './template-visibility-strategy';
 export * from './is-prerender.service';
 export * from './shell-no-render.directive';
 export * from './shell-render.directive';
@@ -11,3 +13,4 @@ export const APP_SHELL_DIRECTIVES: Type[] = [
   ShellRender,
   ShellNoRender
 ];
+

app-shell/src/app/is-prerender.service.spec.ts

@@ -6,11 +6,14 @@ import {
   inject
 } from '@angular/core/testing';
 import {
-  APP_SHELL_BUILD_PROVIDERS,
-  APP_SHELL_RUNTIME_PROVIDERS,
   IS_PRERENDER
 } from './is-prerender.service';
 
+import {
+  APP_SHELL_BUILD_PROVIDERS,
+  APP_SHELL_RUNTIME_PROVIDERS,
+} from './app-shell-providers';
+
 describe('IsPrerender Service', () => {
   describe('prerender', () => {
     beforeEachProviders(() => [APP_SHELL_BUILD_PROVIDERS]);
@@ -31,6 +34,5 @@ describe('IsPrerender Service', () => {
     }));
   });
 
-
-
 });
+

app-shell/src/app/is-prerender.service.ts

@@ -2,14 +2,3 @@ import {OpaqueToken, provide, Provider} from '@angular/core';
 
 export const IS_PRERENDER = new OpaqueToken('IsPrerender');
 
-export const APP_SHELL_RUNTIME_PROVIDERS: Provider[] = [
-  provide(IS_PRERENDER, {
-    useValue: false
-  })
-];
-
-export const APP_SHELL_BUILD_PROVIDERS: Provider[] = [
-  provide(IS_PRERENDER, {
-    useValue: true
-  })
-];

app-shell/src/app/shell-no-render.directive.spec.ts

@@ -12,7 +12,7 @@ import { ShellNoRender } from './shell-no-render.directive';
 import {
   APP_SHELL_BUILD_PROVIDERS,
   APP_SHELL_RUNTIME_PROVIDERS
-} from './is-prerender.service';
+} from './app-shell-providers';
 
 @Component({
   selector: 'test-component',
@@ -28,8 +28,10 @@ describe('ShellNoRender Directive', () => {
     it('should NOT render the element', async(inject([TestComponentBuilder], (tcb:TestComponentBuilder) => {
       return tcb.createAsync(TestComponent).then((fixture: ComponentFixture<TestComponent>) => {
         fixture.detectChanges();
-        expect(fixture.debugElement.childNodes.length).toBe(1);
-        expect(fixture.debugElement.childNodes[0].nativeNode.textContent).toBe('template bindings={}');
+        const childNodes = fixture.debugElement.nativeElement.childNodes;
+        expect(childNodes.length).toBe(2);
+        expect(childNodes[0].textContent).toBe('template bindings={}');
+        expect(childNodes[1].textContent).toBe('shellNoRender(<div>Rendered</div>)');
       });
     })));
   });
@@ -46,5 +48,15 @@ describe('ShellNoRender Directive', () => {
         expect(fixture.debugElement.childNodes[1].nativeNode.textContent).toBe('Rendered');
       });
     })));
+
+    it('should set "shellNoRender" attribute', async(inject([TestComponentBuilder], (tcb:TestComponentBuilder) => {
+      return tcb.createAsync(TestComponent).then((fixture: ComponentFixture<TestComponent>) => {
+        fixture.detectChanges();
+        expect(fixture.debugElement.childNodes.length).toBe(2);
+        expect(fixture.debugElement.childNodes[1].nativeNode.getAttribute('shellNoRender')).toBe('');
+      });
+    })));
+
   });
 });
+

app-shell/src/app/shell-no-render.directive.ts

@@ -1,20 +1,30 @@
-import { Directive, Inject, OnInit, ViewContainerRef, TemplateRef } from '@angular/core';
+import { Directive, Inject, OnInit, ViewContainerRef, TemplateRef, Renderer, AfterViewInit } from '@angular/core';
+import { getDOM } from '@angular/platform-browser/src/dom/dom_adapter';
 
-import {IS_PRERENDER} from './is-prerender.service';
+import { TemplateVisibilityStrategy } from './template-visibility-strategy';
+import { IS_PRERENDER } from './is-prerender.service';
 
 @Directive({selector: '[shellNoRender]'})
-export class ShellNoRender implements OnInit {
+export class ShellNoRender implements OnInit, AfterViewInit {
   constructor(
     private _viewContainer: ViewContainerRef,
     private _templateRef: TemplateRef<Object>,
+    private _templateVisibilityStrategy: TemplateVisibilityStrategy,
     @Inject(IS_PRERENDER) private _isPrerender: boolean) {
   }
 
   ngOnInit () {
+    const view = this._viewContainer.createEmbeddedView(this._templateRef);
+    this._templateVisibilityStrategy.initialize(view.rootNodes.pop(), 'shellNoRender');
+  }
+
+  ngAfterViewInit() {
     if (this._isPrerender) {
+      this._templateVisibilityStrategy.hide();
       this._viewContainer.clear();
     } else {
-      this._viewContainer.createEmbeddedView(this._templateRef);
+      this._templateVisibilityStrategy.show();
     }
   }
 }
+

app-shell/src/app/shell-parser/ast/ast-node.ts

@@ -9,5 +9,6 @@ export interface ASTNode {
   parentNode?: ASTNode;
   nodeName: string;
   value?: string;
+  data?: string;
 }
 

app-shell/src/app/shell-parser/config.ts

@@ -3,6 +3,7 @@ export type RouteDefinition = string;
 const SHELL_PARSER_CACHE_NAME = 'mobile-toolkit:app-shell';
 const APP_SHELL_URL = './app_shell.html';
 const NO_RENDER_CSS_SELECTOR = '[shellNoRender]';
+const RENDER_MARKER = 'shellRender';
 const ROUTE_DEFINITIONS: RouteDefinition[] = [];
 const INLINE_IMAGES: string[] = ['png', 'svg', 'jpg'];
 
@@ -13,6 +14,7 @@ export interface ShellParserConfig {
   APP_SHELL_URL?: string;
   SHELL_PARSER_CACHE_NAME?: string;
   NO_RENDER_CSS_SELECTOR?: string;
+  RENDER_MARKER?: string;
   ROUTE_DEFINITIONS?: RouteDefinition[];
   INLINE_IMAGES?: string[];
 }
@@ -21,6 +23,7 @@ export const SHELL_PARSER_DEFAULT_CONFIG: ShellParserConfig = {
   SHELL_PARSER_CACHE_NAME,
   APP_SHELL_URL,
   NO_RENDER_CSS_SELECTOR,
+  RENDER_MARKER,
   ROUTE_DEFINITIONS,
   INLINE_IMAGES
 };

app-shell/src/app/shell-parser/node-visitor/index.ts

@@ -1,4 +1,5 @@
 export * from './node-visitor';
 export * from './resource-inline';
 export * from './template-strip-visitor';
+export * from './template-recover-visitor';
 

app-shell/src/app/shell-parser/node-visitor/resource-inline/resource-inline-visitor.ts

@@ -13,8 +13,7 @@ export abstract class ResourceInlineVisitor extends NodeVisitor {
   inlineAssets(style: string) {
     let urls = this.getImagesUrls(style);
     urls = urls.filter((url: string, idx: number) => urls.indexOf(url) === idx);
-    return this.processInline(urls, style)
-      .then((content: string) => content);
+    return this.processInline(urls, style);
   }
 
   protected getImagesUrls(styles: string): string[] {