feat(AppShell): add resource inline functionality (#78)

1. Allow visitors to process the AST produced by the template before serialization.
2. Implement inlining of external resources in stylesheets and style attributes.
3. Refactor the node stripping to use the visitors API.

Author: mgechev

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

@@ -8,5 +8,6 @@ export interface ASTNode {
   childNodes?: ASTNode[];
   parentNode?: ASTNode;
   nodeName: string;
+  value?: string;
 }
 

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

@@ -4,6 +4,7 @@ const SHELL_PARSER_CACHE_NAME = 'mobile-toolkit:app-shell';
 const APP_SHELL_URL = './app_shell.html';
 const NO_RENDER_CSS_SELECTOR = '[shellNoRender]';
 const ROUTE_DEFINITIONS: RouteDefinition[] = [];
+const INLINE_IMAGES: string[] = ['png', 'svg', 'jpg'];
 
 // TODO(mgechev): use if we decide to include @angular/core
 // export const SHELL_PARSER_CONFIG = new OpaqueToken('ShellRuntimeParserConfig');
@@ -13,12 +14,14 @@ export interface ShellParserConfig {
   SHELL_PARSER_CACHE_NAME?: string;
   NO_RENDER_CSS_SELECTOR?: string;
   ROUTE_DEFINITIONS?: RouteDefinition[];
+  INLINE_IMAGES?: string[];
 }
 
 export const SHELL_PARSER_DEFAULT_CONFIG: ShellParserConfig = {
   SHELL_PARSER_CACHE_NAME,
   APP_SHELL_URL,
   NO_RENDER_CSS_SELECTOR,
-  ROUTE_DEFINITIONS
+  ROUTE_DEFINITIONS,
+  INLINE_IMAGES
 };
 

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

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

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

@@ -0,0 +1,23 @@
+import {ASTNode} from '../ast';
+
+export abstract class NodeVisitor {
+
+  abstract process(node: ASTNode): Promise<ASTNode>;
+
+  visit(currentNode: ASTNode): Promise<ASTNode> {
+    return this.process(currentNode)
+      .then((node: ASTNode) => {
+        if (node) {
+          return Promise
+            .all((node.childNodes || [])
+              .slice()
+              .map(this.visit.bind(this)))
+            .then(() => node);
+        } else {
+          return null;
+        }
+      })
+  }
+
+}
+

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

@@ -0,0 +1,4 @@
+export * from './resource-inline-visitor';
+export * from './stylesheet-resource-inline-visitor';
+export * from './inline-style-resource-inline-visitor';
+

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

@@ -0,0 +1,127 @@
+import {
+  beforeEach,
+  it,
+  describe,
+  expect,
+  inject
+} from '@angular/core/testing';
+
+import {ASTNode} from '../../ast';
+import {MockWorkerScope, MockResponse} from '../../testing';
+import {InlineStyleResourceInlineVisitor} from './';
+
+const createResponseHelper = (body: string, contentType: string) => {
+  const response = new MockResponse(body);
+  response.headers = {
+    get(name: string) {
+      if (name === 'content-type') {
+        return contentType;
+      }
+    }
+  };
+  return response;
+};
+
+describe('ResourceInlineVisitor', () => {
+
+  let simpleNode: ASTNode;
+  let nestedAst: ASTNode;
+  let multiStyles: ASTNode;
+  let jpgInlineVisitor: InlineStyleResourceInlineVisitor;
+  let pngJpgInlineVisitor: InlineStyleResourceInlineVisitor;
+  let scope: MockWorkerScope;
+
+  beforeEach(() => {
+    scope = new MockWorkerScope();
+    jpgInlineVisitor = new InlineStyleResourceInlineVisitor(scope, ['jpg']);
+    pngJpgInlineVisitor = new InlineStyleResourceInlineVisitor(scope, ['png', 'jpg']);
+    simpleNode = {
+      attrs: [{
+        name: 'style',
+        value: 'color: #fff; background-image: url(bar.jpg);'
+      }],
+      nodeName: 'div',
+    };
+    multiStyles = {
+      attrs: [{
+        name: 'style',
+        value: 'color: #fff; background-image: url(bar.jpg);'
+      }, {
+        name: 'style',
+        value: 'color: #fff; background-image: url(baz.jpg);'
+      }],
+      nodeName: 'div',
+    };
+    nestedAst = {
+      nodeName: 'body',
+      attrs: null,
+      childNodes: [
+        {
+          nodeName: 'div',
+          attrs: null,
+          childNodes: [
+            {
+              nodeName: 'p',
+              attrs: null,
+              childNodes: [
+                {
+                  nodeName: 'span',
+                  attrs: [{
+                    name: 'style',
+                    value: 'color: #fff; background-image: url(bar.jpg);'
+                  }],
+                }
+              ]
+            }
+          ]
+        },
+        {
+          nodeName: 'section',
+          attrs: null,
+          childNodes: [
+            {
+              nodeName: 'span',
+              attrs: [{
+                name: 'style',
+                value: 'font-size: 42px; background-image: url(bar.png);'
+              }]
+            }
+          ]
+        }
+      ]
+    };
+  });
+
+  it('should inline assets in style attribute', (done: any) => {
+    scope.mockResponses['bar.jpg'] = createResponseHelper('bar', 'image/jpg');
+    jpgInlineVisitor.visit(simpleNode)
+      .then(() => {
+        expect(simpleNode.attrs[0].value).toBe('color: #fff; background-image: url(data:image/jpg;base64,YgBhAHIA);');
+        done();
+      });
+  });
+
+  it('should work with nested elements', (done: any) => {
+    scope.mockResponses['bar.jpg'] = createResponseHelper('bar', 'image/jpg');
+    scope.mockResponses['bar.png'] = createResponseHelper('bar', 'image/png');
+    pngJpgInlineVisitor.visit(nestedAst)
+      .then(() => {
+        expect(nestedAst.childNodes[0].childNodes[0].childNodes[0].attrs[0].value).toBe('color: #fff; background-image: url(data:image/jpg;base64,YgBhAHIA);');
+        expect(nestedAst.childNodes[1].childNodes[0].attrs[0].value).toBe('font-size: 42px; background-image: url(data:image/png;base64,YgBhAHIA);');
+        done();
+      });
+  });
+
+  it('should always pick the last occurence of the style attribute', (done: any) => {
+    scope.mockResponses['bar.jpg'] = createResponseHelper('bar', 'image/jpg');
+    scope.mockResponses['baz.jpg'] = createResponseHelper('baz', 'image/jpg');
+    jpgInlineVisitor.visit(multiStyles)
+      .then(() => {
+        expect(multiStyles.attrs[0].value).toBe('color: #fff; background-image: url(bar.jpg);');
+        expect(multiStyles.attrs[1].value).toBe('color: #fff; background-image: url(data:image/jpg;base64,YgBhAHoA);');
+        done();
+      });
+  });
+
+});
+

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

@@ -0,0 +1,24 @@
+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 {
+
+  process(node: ASTNode): Promise<ASTNode> {
+    const styleAttr = (node.attrs || [])
+      .filter((a: ASTAttribute) => a.name === 'style')
+      .pop();
+    if (styleAttr) {
+      return this.inlineAssets(styleAttr.value)
+        .then((content: string) => {
+          styleAttr.value = content;
+          return node;
+        });
+    }
+    return Promise.resolve(node);
+  }
+
+}
+

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

@@ -0,0 +1,59 @@
+import {ASTNode} from '../../ast';
+import {NodeVisitor} from '../node-visitor';
+import {WorkerScope} from '../../context';
+
+const URL_REGEXP = /:\s+url\(['"]?(.*?)['"]?\)/gmi;
+
+export abstract class ResourceInlineVisitor extends NodeVisitor {
+
+  constructor(private scope: WorkerScope, private inlineExtensions: string[]) {
+    super();
+  }
+
+  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);
+  }
+
+  protected getImagesUrls(styles: string): string[] {
+    URL_REGEXP.lastIndex = 0;
+    let match: string[];
+    const result: string[] = [];
+    while ((match = URL_REGEXP.exec(styles)) !== null) {
+      const url = match[1];
+      if (this.supportedExtension(url)) {
+        result.push(url);
+      }
+    }
+    return result;
+  }
+
+  private supportedExtension(url: string) {
+    return this.inlineExtensions.some((ext: string) => new RegExp(`${ext}$`).test(url));
+  }
+
+  protected processInline(urls: string[], styles: string): Promise<string> {
+    const processResponse = (response: Response): Promise<string[]> => {
+      if (response && response.ok) {
+        return response.arrayBuffer()
+          .then((arr: ArrayBuffer) => [
+            btoa(String.fromCharCode.apply(null, new Uint8Array(arr))),
+            response.headers.get('content-type')
+          ]);
+      } else {
+        return null;
+      }
+    };
+    return Promise.all(urls.map((url: string) => this.scope.fetch(url).catch(() => null)))
+      .then((responses: any[]) => <any>Promise.all(responses.map(processResponse)))
+      .then((images: string[][]) => {
+        return images.map((img: string[]) => img ? `data:${img[1]};base64,${img[0]}` : null)
+        .reduce((content: string, img: string, idx: number) =>
+          img ? content.replace(new RegExp(urls[idx], 'g'), img) : content, styles);
+      });
+  }
+
+}
+