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,32 @@
-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 {
+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,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[] {

app-shell/src/app/shell-parser/node-visitor/template-recover-visitor.spec.ts

@@ -0,0 +1,120 @@
+import {
+  beforeEach,
+  it,
+  describe,
+  expect,
+  inject
+} from '@angular/core/testing';
+
+import {ASTNode} from '../ast';
+import {TemplateRecoverVisitor} from './';
+import {Parse5TemplateParser} from '../template-parser';
+
+describe('TemplateRecoverVisitor', () => {
+
+  let astRoot: ASTNode;
+  let nestedNode: ASTNode;
+  let differentComments: ASTNode;
+
+  beforeEach(() => {
+    astRoot = {
+      nodeName: '#comment',
+      attrs: null,
+      data: 'shellRender(<div>Hello world!</div>)'
+    };
+    const comment2: ASTNode = {
+      nodeName: '#comment',
+      attrs: null,
+      data: 'shellRender(<div>)<span>Test</span></div>)'
+    };
+    const span: ASTNode = {
+      nodeName: 'span',
+      attrs: null,
+      childNodes: [comment2]
+    };
+    comment2.parentNode = span;
+    const section: ASTNode = {
+      nodeName: 'section',
+      attrs: null
+    };
+    const comment1: ASTNode = {
+      nodeName: '#comment',
+      attrs: null,
+      data: 'shellRender(bar)'
+    };
+    nestedNode = {
+      childNodes: [span, section, comment1],
+      attrs: null,
+      nodeName: 'div'
+    };
+    span.parentNode = nestedNode;
+    comment1.parentNode = nestedNode;
+    section.parentNode = nestedNode;
+
+    const nonMatchingComment1: ASTNode = {
+      nodeName: '#comment',
+      attrs: null,
+      data: 'bindings {}'
+    };
+    const nonMatchingComment2: ASTNode = {
+      nodeName: '#comment',
+      attrs: null,
+      data: 'shellRender(test)'
+    };
+    const matchingComment: ASTNode = {
+      nodeName: '#comment',
+      attrs: null,
+      data: 'shellNoRender(<div></div>)'
+    };
+    differentComments = {
+      nodeName: 'div',
+      attrs: null,
+      childNodes: [nonMatchingComment1, matchingComment, nonMatchingComment2]
+    };
+    nonMatchingComment1.parentNode = differentComments;
+    nonMatchingComment2.parentNode = differentComments;
+    matchingComment.parentNode = differentComments;
+  });
+
+  it('should process top-level comments', (done: any) => {
+    const visitor = new TemplateRecoverVisitor('shellRender', new Parse5TemplateParser());
+    visitor.visit(astRoot)
+      .then((node: ASTNode) => {
+        expect(node.nodeName).toBe('div');
+        expect(node.childNodes.length).toBe(1);
+        expect(node.childNodes[0].value).toBe('Hello world!');
+        done();
+      });
+  });
+
+  it('should process nested nodes', (done: any) => {
+    const visitor = new TemplateRecoverVisitor('shellRender', new Parse5TemplateParser());
+    visitor.visit(nestedNode)
+      .then((node: ASTNode) => {
+        const span = nestedNode.childNodes[0];
+        expect(span.childNodes.length).toBe(1);
+        expect(span.childNodes[0].nodeName).toBe('div');
+        expect(span.childNodes[0].childNodes.length).toBe(2);
+        expect(span.childNodes[0].childNodes[0].value).toBe(')');
+        expect(span.childNodes[0].childNodes[1].nodeName).toBe('span');
+        expect(node.childNodes[2].nodeName).toBe('#text');
+        expect(node.childNodes[2].value).toBe('bar');
+        done();
+      });
+  });
+
+  it('should process only nodes with appropriate marker', (done: any) => {
+    const visitor = new TemplateRecoverVisitor('shellNoRender', new Parse5TemplateParser());
+    visitor.visit(differentComments)
+      .then((node: ASTNode) => {
+        expect(node.childNodes[0].nodeName).toBe('#comment');
+        expect(node.childNodes[0].data).toBe('bindings {}');
+        expect(node.childNodes[1].nodeName).toBe('div');
+        expect(node.childNodes[2].nodeName).toBe('#comment');
+        expect(node.childNodes[2].data).toBe('shellRender(test)');
+        done();
+      });
+  });
+
+});
+

app-shell/src/app/shell-parser/node-visitor/template-recover-visitor.ts

@@ -0,0 +1,32 @@
+import {ASTNode} from '../ast';
+import {TemplateParser} from '../template-parser';
+import {NodeVisitor} from './node-visitor';
+import {WorkerScope} from '../context';
+import {CssNodeMatcher} from '../node-matcher';
+
+export class TemplateRecoverVisitor extends NodeVisitor {
+
+  constructor(private marker: string, private parser: TemplateParser) {
+    super();
+  }
+
+  process(node: ASTNode) {
+    const regexp = new RegExp(`^${this.marker}\\(\\s*([\\s\\S]*)\\)$`);
+    if (node.nodeName === '#comment' && regexp.test(node.data)) {
+      const template = node.data.match(regexp)[1];
+      // Returns a #document-fragment node with multiple childs.
+      // The regular expression above should strip all the whitespace before
+      // the HTML fragment so once the parser parses the HTML fragment,
+      // the first should should be our target node.
+      const replacement = this.parser.parseFragment(template).childNodes.shift();
+      if (node.parentNode) {
+        const commentIdx = node.parentNode.childNodes.indexOf(node);
+        node.parentNode.childNodes[commentIdx] = replacement;
+      }
+      return Promise.resolve(replacement);
+    }
+    return Promise.resolve(node);
+  }
+
+}
+

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

@@ -1,7 +1,13 @@
 import {Parse5TemplateParser} from './template-parser';
 import {ShellParserImpl} from './shell-parser';
 import {cssNodeMatcherFactory} from './node-matcher';
-import {StylesheetResourceInlineVisitor, InlineStyleResourceInlineVisitor, TemplateStripVisitor, NodeVisitor} from './node-visitor';
+import {
+  StylesheetResourceInlineVisitor,
+  InlineStyleResourceInlineVisitor,
+  TemplateStripVisitor,
+  NodeVisitor,
+  TemplateRecoverVisitor
+} from './node-visitor';
 import {BrowserWorkerScope} from './context';
 import {ShellParserConfig, SHELL_PARSER_DEFAULT_CONFIG} from './config';
 
@@ -13,8 +19,9 @@ export const shellParserFactory = (config: ShellParserConfig = {}) => {
   const parserConfig = normalizeConfig(config);
   const scope = new BrowserWorkerScope();
   const visitors: NodeVisitor[] = [];
+  visitors.push(new TemplateRecoverVisitor(parserConfig.RENDER_MARKER, new Parse5TemplateParser()));
+  visitors.push(new TemplateStripVisitor(cssNodeMatcherFactory(parserConfig.NO_RENDER_CSS_SELECTOR)));
   if (config.INLINE_IMAGES) {
-    visitors.push(new TemplateStripVisitor(cssNodeMatcherFactory(parserConfig.NO_RENDER_CSS_SELECTOR)));
     visitors.push(new StylesheetResourceInlineVisitor(scope, config.INLINE_IMAGES));
     visitors.push(new InlineStyleResourceInlineVisitor(scope, config.INLINE_IMAGES));
   }