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.
- [x] Remove useless imports.

Author: mgechev

app-shell/package.json

@@ -24,7 +24,7 @@
     "@angular/platform-browser-dynamic": "^2.0.0-rc.6",
     "es6-shim": "^0.35.0",
     "reflect-metadata": "0.1.3",
-    "rxjs": "5.0.0-beta.11",
+    "rxjs": "^5.0.0-beta.11",
     "systemjs": "0.19.26",
     "zone.js": "^0.6.17"
   },

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

@@ -0,0 +1,27 @@
+import { Provider} from '@angular/core';
+
+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: Provider[] = [
+  {
+    provide: IS_PRERENDER,
+    useValue: false
+  },
+  {
+    provide: TemplateVisibilityStrategy,
+    useClass: TemplateCommentStrategy
+  }
+];
+
+export const APP_SHELL_BUILD_PROVIDERS: Provider[] = [
+  {
+    provide: IS_PRERENDER,
+    useValue: true
+  },
+  {
+    provide: TemplateVisibilityStrategy,
+    useClass: TemplateCommentStrategy
+  }
+];

app-shell/src/app/index.ts

@@ -1,12 +1,14 @@
 import { Type, NgModule, ModuleWithProviders } from '@angular/core';
 import { ShellRender } from './shell-render.directive';
 import { ShellNoRender } from './shell-no-render.directive';
-import { IS_PRERENDER } from './is-prerender.service';
-import { APP_SHELL_RUNTIME_PROVIDERS, APP_SHELL_BUILD_PROVIDERS } from './is-prerender.service';
+import { APP_SHELL_RUNTIME_PROVIDERS, APP_SHELL_BUILD_PROVIDERS } from './app-shell-providers';
 
-export * from './is-prerender.service';
+export * from './app-shell-providers';
+export * from './template-visibility-strategy';
+export * from './app-shell-providers';
 export * from './shell-no-render.directive';
 export * from './shell-render.directive';
+export * from './is-prerender.service';
 
 const APP_SHELL_DIRECTIVES: Type<any>[] = [
   ShellRender,
@@ -25,4 +27,3 @@ export class AppShellModule {
     };
   }
 }
-

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

@@ -1,17 +1,3 @@
-import { OpaqueToken, Provider } from '@angular/core';
+import { OpaqueToken } 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

@@ -6,11 +6,12 @@ import {
 } from '@angular/core/testing';
 import { Component } from '@angular/core';
 
-import { ShellNoRender } from './shell-no-render.directive';
-import { APP_SHELL_RUNTIME_PROVIDERS, APP_SHELL_BUILD_PROVIDERS } from './is-prerender.service';
 import {
-  AppShellModule
+  AppShellModule,
+  APP_SHELL_RUNTIME_PROVIDERS,
+  APP_SHELL_BUILD_PROVIDERS
 } from './index';
+import { ShellNoRender } from './shell-no-render.directive';
 
 @Component({
   selector: 'test-component',
@@ -24,9 +25,9 @@ describe('ShellNoRender Directive', () => {
 
     beforeEach(() => {
       TestBed.configureTestingModule({
-	imports: [AppShellModule],
-	providers: [APP_SHELL_BUILD_PROVIDERS],
-	declarations: [TestComponent]
+        imports: [AppShellModule],
+        providers: [APP_SHELL_BUILD_PROVIDERS],
+        declarations: [TestComponent]
       });
       TestBed.compileComponents();
     });
@@ -44,9 +45,9 @@ describe('ShellNoRender Directive', () => {
 
     beforeEach(() => {
       TestBed.configureTestingModule({
-	imports: [AppShellModule],
-	providers: [APP_SHELL_RUNTIME_PROVIDERS],
-	declarations: [TestComponent]
+        imports: [AppShellModule],
+        providers: [APP_SHELL_RUNTIME_PROVIDERS],
+        declarations: [TestComponent]
       });
       TestBed.compileComponents();
     });
@@ -58,5 +59,13 @@ describe('ShellNoRender Directive', () => {
       expect(fixture.debugElement.childNodes[0].nativeNode.textContent).toBe('template bindings={}');
       expect(fixture.debugElement.childNodes[1].nativeNode.textContent).toBe('Rendered');
     });
+
+    it('should set "shellNoRender" attribute', () => {
+      const fixture = TestBed.createComponent(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,33 @@
-import { Directive, Inject, OnInit, ViewContainerRef, TemplateRef } from '@angular/core';
+import { Directive, Inject, OnInit, ViewContainerRef, TemplateRef, AfterViewInit } from '@angular/core';
 
+import { TemplateVisibilityStrategy } from './template-visibility-strategy';
 import { IS_PRERENDER } from './is-prerender.service';
 
-@Directive({selector: '[shellNoRender]'})
-export class ShellNoRender implements OnInit {
+const MARKER = 'shellNoRender';
+
+@Directive({
+  selector: `[${MARKER}]`
+})
+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.setRootNodes(MARKER, view.rootNodes.pop());
+  }
+
+  ngAfterViewInit() {
     if (this._isPrerender) {
+      this._templateVisibilityStrategy.hide(MARKER);
       this._viewContainer.clear();
     } else {
-      this._viewContainer.createEmbeddedView(this._templateRef);
+      this._templateVisibilityStrategy.show(MARKER);
     }
   }
 }
+

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

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

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

@@ -1,2 +1 @@
 export * from './ast-node';
-

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-matcher/css-node-matcher.spec.ts

@@ -1,6 +1,3 @@
-import {
-  inject
-} from '@angular/core/testing';
 import { ASTNode } from '../ast';
 import { CssSelector } from './css-selector';
 import { CssNodeMatcher } from './css-node-matcher';