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';

app-shell/src/app/shell-parser/node-matcher/css-selector/css-selector.spec.ts

@@ -1,6 +1,3 @@
-import {
-  inject
-} from '@angular/core/testing';
 import { CssSelector } from './css-selector';
 
 describe('CssSelector', () => {
@@ -52,7 +49,5 @@ describe('CssSelector', () => {
       expect(result.elementId).toBe('baz');
       expect(result.classNames).toEqual(['foo', 'qux']);
     });
-
   });
 });
-

app-shell/src/app/shell-parser/node-matcher/css-selector/index.ts

@@ -1,2 +1 @@
 export * from './css-selector';
-

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

@@ -3,4 +3,3 @@ import {ASTNode} from '../ast';
 export abstract class NodeMatcher {
   abstract match(node: ASTNode): boolean;
 }
-

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/node-visitor.ts

@@ -16,8 +16,6 @@ export abstract class NodeVisitor {
         } else {
           return null;
         }
-      })
+      });
   }
-
 }
-

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

@@ -1,7 +1,3 @@
-import {
-  inject
-} from '@angular/core/testing';
-
 import {ASTNode} from '../../ast';
 import {MockWorkerScope, MockResponse} from '../../testing';
 import {InlineStyleResourceInlineVisitor} from './';

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

@@ -1,8 +1,5 @@
 import {ASTNode, ASTAttribute} from '../../ast';
 import {ResourceInlineVisitor} from './resource-inline-visitor';
-import {WorkerScope} from '../../context';
-
-const URL_REGEXP = /:\s+url\(['"]?(.*?)['"]?\)/gmi;
 
 export class InlineStyleResourceInlineVisitor extends ResourceInlineVisitor {
 

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

@@ -1,4 +1,3 @@
-import {ASTNode} from '../../ast';
 import {NodeVisitor} from '../node-visitor';
 import {WorkerScope} from '../../context';
 
@@ -13,8 +12,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[] {
@@ -55,6 +53,4 @@ export abstract class ResourceInlineVisitor extends NodeVisitor {
           img ? content.replace(new RegExp(urls[idx], 'g'), img) : content, styles);
       });
   }
-
 }
-

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

@@ -1,7 +1,3 @@
-import {
-  inject
-} from '@angular/core/testing';
-
 import {ASTNode} from '../../ast';
 import {MockWorkerScope, MockResponse} from '../../testing';
 import {StylesheetResourceInlineVisitor} from './';
@@ -193,4 +189,3 @@ describe('ResourceInlineVisitor', () => {
   });
 
 });
-

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

@@ -17,6 +17,4 @@ export class StylesheetResourceInlineVisitor extends ResourceInlineVisitor {
     }
     return Promise.resolve(node);
   }
-
 }
-