feat(AppShell): add runtime parser (#54)

* chore(app-shell): update to typings 1.0.4

* feat(AppShell): add runtime app shell parser

Author: mgechev

.travis.yml

@@ -8,3 +8,4 @@ before_install:
 
 install: ./install.sh
 script: ./test.sh
+

app-shell/angular-cli-build.js

@@ -11,7 +11,8 @@ module.exports = function(defaults) {
       'es6-shim/es6-shim.js',
       'reflect-metadata/*.js',
       'rxjs/**/*.js',
-      '@angular/**/*.js'
+      '@angular/**/*.js',
+      'parse5/**/*.js'
     ]
   });
 };

app-shell/package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser-dynamic": "2.0.0-rc.0",
     "@angular/router": "2.0.0-rc.0",
     "es6-shim": "^0.35.0",
+    "parse5": "https://github.com/mgechev/parse5",
     "reflect-metadata": "0.1.3",
     "rxjs": "5.0.0-beta.6",
     "systemjs": "0.19.26",
@@ -40,6 +41,6 @@
     "ts-node": "^0.5.5",
     "tslint": "^3.6.0",
     "typescript": "^1.8.10",
-    "typings": "^0.8.1"
+    "typings": "^1.0.4"
   }
 }

app-shell/src/app/index.ts

@@ -5,6 +5,7 @@ import { ShellNoRender } from './shell-no-render.directive';
 export * from './is-prerender.service';
 export * from './shell-no-render.directive';
 export * from './shell-render.directive';
+export * from './shell-parser';
 
 export const APP_SHELL_DIRECTIVES: Type[] = [
   ShellRender,

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

@@ -0,0 +1,12 @@
+export interface ASTAttribute {
+  name: string;
+  value: string;
+}
+
+export interface ASTNode {
+  attrs: ASTAttribute[];
+  childNodes?: ASTNode[];
+  parentNode?: ASTNode;
+  nodeName: string;
+}
+

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

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

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

@@ -0,0 +1,24 @@
+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 = '.shell-no-render';
+const ROUTE_DEFINITIONS: RouteDefinition[] = [];
+
+// TODO(mgechev): use if we decide to include @angular/core
+// export const SHELL_PARSER_CONFIG = new OpaqueToken('ShellRuntimeParserConfig');
+
+export interface ShellParserConfig {
+  APP_SHELL_URL?: string;
+  SHELL_PARSER_CACHE_NAME?: string;
+  NO_RENDER_CSS_SELECTOR?: string;
+  ROUTE_DEFINITIONS?: RouteDefinition[];
+}
+
+export const SHELL_PARSER_DEFAULT_CONFIG: ShellParserConfig = {
+  SHELL_PARSER_CACHE_NAME,
+  APP_SHELL_URL,
+  NO_RENDER_CSS_SELECTOR,
+  ROUTE_DEFINITIONS
+};
+

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

@@ -0,0 +1,25 @@
+export abstract class WorkerScope {
+  abstract fetch(url: string | Request): Promise<Response>;
+  abstract newRequest(input: string | Request, init?: RequestInit): Request;
+  abstract newResponse(body?: BodyInit, init?: ResponseInit): Response;
+  caches: CacheStorage;
+}
+
+export class BrowserWorkerScope {
+  fetch(url: string | Request): Promise<Response> {
+    return fetch(url);
+  }
+
+  get caches() {
+    return caches;
+  }
+
+  newRequest(input: string | Request, init?: RequestInit): Request {
+    return new Request(input, init);
+  }
+
+  newResponse(body?: BodyInit, init?: ResponseInit) {
+    return new Response(body, init);
+  }
+}
+

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

@@ -0,0 +1,11 @@
+import {ShellParser} from './shell-parser';
+import {shellParserFactory} from './shell-parser-factory';
+import {RouteDefinition, ShellParserConfig} from './config';
+
+export {
+  shellParserFactory,
+  ShellParser,
+  RouteDefinition,
+  ShellParserConfig
+};
+

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

@@ -0,0 +1,126 @@
+import {
+  beforeEach,
+  it,
+  describe,
+  expect,
+  inject
+} from '@angular/core/testing';
+import { ASTNode } from '../ast';
+import { CssSelector } from './css-selector';
+import { CssNodeMatcher } from './css-node-matcher';
+
+describe('CssNodeMatcher', () => {
+
+  var node: ASTNode;
+  beforeEach(() => {
+    node = {
+      attrs: [
+        { name: 'foo', value: 'bar' },
+        { name: 'class', value: 'dialog modal--drop' },
+        { name: 'id', value: 'dialog-id' }
+      ],
+      nodeName: 'div',
+      parentNode: null
+    };
+  });
+
+  describe('successful match', () => {
+
+    it('should match any node with empty selector', () => {
+      const emptySelector = CssSelector.parse('');
+      const selector = new CssNodeMatcher(emptySelector);
+      expect(selector.match(node)).toBe(true);
+    });
+
+    it('should match basic element selector', () => {
+      const elementSelector = CssSelector.parse('div');
+      const selector = new CssNodeMatcher(elementSelector);
+      expect(selector.match(node)).toBe(true);
+    });
+
+    it('should match attribute selector', () => {
+      const attrSelector = CssSelector.parse('[foo=bar]');
+      const selector = new CssNodeMatcher(attrSelector);
+      expect(selector.match(node)).toBe(true);
+    });
+
+    it('should match attribute selector when no value is provided', () => {
+      const attrSelector = CssSelector.parse('[foo]');
+      const selector = new CssNodeMatcher(attrSelector);
+      expect(selector.match(node)).toBe(true);
+    });
+
+    it('should match class selector', () => {
+      const classSelector = CssSelector.parse('.dialog');
+      const selector = new CssNodeMatcher(classSelector);
+      expect(selector.match(node)).toBe(true);
+      const complexClassSelector = CssSelector.parse('.dialog.modal--drop');
+      const complexSelector = new CssNodeMatcher(complexClassSelector);
+      expect(complexSelector.match(node)).toBe(true);
+    });
+
+    it('should match element by id', () => {
+      const idSelector = CssSelector.parse('#dialog-id');
+      const selector = new CssNodeMatcher(idSelector);
+      expect(selector.match(node)).toBe(true);
+    });
+
+  });
+
+  describe('unsuccessful match', () => {
+
+    it('should fail when different element is used', () => {
+      const elementSelector = CssSelector.parse('span');
+      const selector = new CssNodeMatcher(elementSelector);
+      expect(selector.match(node)).toBe(false);
+    });
+
+    it('should fail when different attribute selector is provided', () => {
+      const attrSelector = CssSelector.parse('[foo=qux]');
+      const selector = new CssNodeMatcher(attrSelector);
+      expect(selector.match(node)).toBe(false);
+    });
+
+    it('should fail when non-matching class selector is used', () => {
+      const classSelector = CssSelector.parse('.modal');
+      const selector = new CssNodeMatcher(classSelector);
+      expect(selector.match(node)).toBe(false);
+      const complexClassSelector = CssSelector.parse('.dialog.modal-drop');
+      const complexSelector = new CssNodeMatcher(complexClassSelector);
+      expect(complexSelector.match(node)).toBe(false);
+    });
+
+    it('should fail when superset of attributes is used in selector', () => {
+      const cssSelector = CssSelector.parse('[foo=bar][baz=bar]');
+      const selector = new CssNodeMatcher(cssSelector);
+      expect(selector.match(node)).toBe(false);
+    });
+
+    it('should fail when superset of attributes is used in selector', () => {
+      const cssSelector = CssSelector.parse('[no-render]');
+      const selector = new CssNodeMatcher(cssSelector);
+      expect(selector.match(node)).toBe(false);
+    })
+
+    it('should fail match by id when element has no id', () => {
+      const cssSelector = CssSelector.parse('#foo');
+      const selector = new CssNodeMatcher(cssSelector);
+      const node1: ASTNode = {
+        nodeName: 'div',
+        parentNode: null,
+        attrs: []
+      };
+      const node2: ASTNode = {
+        attrs: [
+          { name: 'not-id', value: '' }
+        ],
+        nodeName: 'div',
+        parentNode: null
+      };
+      expect(selector.match(node1)).toBe(false);
+      expect(selector.match(node2)).toBe(false);
+    });
+
+  });
+});
+