Implement inlining svg -> use[xlink:href] to resolve issues related to absolute SVG paths (eg http://localhost/foo#svgId)

Author: clbond

examples/cli/package.json

@@ -11,19 +11,19 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "4.0.0",
+    "@angular/animations": "4.2.2",
     "@angular/cli": ">=1.0.0",
-    "@angular/common": "4.0.0",
-    "@angular/compiler": "4.0.0",
-    "@angular/compiler-cli": "4.0.0",
-    "@angular/core": "4.0.0",
-    "@angular/forms": "4.0.0",
-    "@angular/http": "4.0.0",
+    "@angular/common": "4.2.2",
+    "@angular/compiler": "4.2.2",
+    "@angular/compiler-cli": "4.2.2",
+    "@angular/core": "4.2.2",
+    "@angular/forms": "4.2.2",
+    "@angular/http": "4.2.2",
     "@angular/material": "2.0.0-beta.3",
-    "@angular/platform-browser": "4.0.0",
-    "@angular/platform-browser-dynamic": "4.0.0",
-    "@angular/router": "4.0.0",
-    "@angular/tsc-wrapped": "4.0.0",
+    "@angular/platform-browser": "4.2.2",
+    "@angular/platform-browser-dynamic": "4.2.2",
+    "@angular/router": "4.2.2",
+    "@angular/tsc-wrapped": "4.2.2",
     "angular-ssr": "latest",
     "classlist.js": "^1.1.20150312",
     "core-js": "^2.4.1",

examples/demand-express/package.json

@@ -18,19 +18,19 @@
   },
   "license": "BSD-2-Clause",
   "dependencies": {
-    "@angular/animations": ">=4.0.0 <5.0.0",
+    "@angular/animations": ">=4.2.2 <5.0.0",
     "@angular/cli": ">=1.0.0",
-    "@angular/common": ">=4.0.0 <5.0.0",
-    "@angular/compiler": ">=4.0.0 <5.0.0",
-    "@angular/compiler-cli": ">=4.0.0 <5.0.0",
-    "@angular/core": ">=4.0.0 <5.0.0",
-    "@angular/forms": ">=4.0.0 <5.0.0",
-    "@angular/http": ">=4.0.0 <5.0.0",
+    "@angular/common": ">=4.2.2 <5.0.0",
+    "@angular/compiler": ">=4.2.2 <5.0.0",
+    "@angular/compiler-cli": ">=4.2.2 <5.0.0",
+    "@angular/core": ">=4.2.2 <5.0.0",
+    "@angular/forms": ">=4.2.2 <5.0.0",
+    "@angular/http": ">=4.2.2 <5.0.0",
     "@angular/material": "2.0.0-beta.3",
-    "@angular/platform-browser": ">=4.0.0 <5.0.0",
-    "@angular/platform-browser-dynamic": ">=4.0.0 <5.0.0",
-    "@angular/router": ">=4.0.0 <5.0.0",
-    "@angular/tsc-wrapped": ">=4.0.0 <5.0.0",
+    "@angular/platform-browser": ">=4.2.2 <5.0.0",
+    "@angular/platform-browser-dynamic": ">=4.2.2 <5.0.0",
+    "@angular/router": ">=4.2.2 <5.0.0",
+    "@angular/tsc-wrapped": ">=4.2.2 <5.0.0",
     "@types/cookie-parser": "^1.3.30",
     "@types/express": "^4.0.35",
     "@types/node-fetch": "^1.6.7",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-ssr",
-  "version": "0.10.14",
+  "version": "0.10.16",
   "description": "Angular server-side rendering implementation",
   "main": "build/index.js",
   "typings": "build/index.d.ts",
@@ -55,15 +55,15 @@
   },
   "peerDependencies": {
     "@angular/cli": ">=1.1.0",
-    "@angular/common": ">=4.2.0 <5.0.0",
-    "@angular/compiler": ">=4.2.0 <5.0.0",
-    "@angular/compiler-cli": ">=4.2.0 <5.0.0",
-    "@angular/core": ">=4.2.0 <5.0.0",
-    "@angular/forms": ">=4.2.0 <5.0.0",
-    "@angular/http": ">=4.2.0 <5.0.0",
-    "@angular/platform-browser": ">=4.2.0 <5.0.0",
-    "@angular/router": ">=4.2.0 <5.0.0",
-    "@angular/tsc-wrapped": ">=4.2.0 <5.0.0",
+    "@angular/common": ">=4.2.2 <5.0.0",
+    "@angular/compiler": ">=4.2.2 <5.0.0",
+    "@angular/compiler-cli": ">=4.2.2 <5.0.0",
+    "@angular/core": ">=4.2.2 <5.0.0",
+    "@angular/forms": ">=4.2.2 <5.0.0",
+    "@angular/http": ">=4.2.2 <5.0.0",
+    "@angular/platform-browser": ">=4.2.2 <5.0.0",
+    "@angular/router": ">=4.2.2 <5.0.0",
+    "@angular/tsc-wrapped": ">=4.2.2 <5.0.0",
     "@angular/service-worker": ">=1.0.0 || >=1.0.0-beta.8",
     "reflect-metadata": ">=0.1.10",
     "rxjs": ">=5.0.1",

source/bin/options/parse.ts

@@ -16,6 +16,7 @@ import {
   PathReference,
   PrebootConfiguration,
   Project,
+  OutputOptions,
   OutputProducer,
   absoluteFile,
   fileFromString,
@@ -91,19 +92,15 @@ export const parseCommandLineOptions = (): CommandLineOptions => {
 let enablePreboot: boolean = false;
 
 // Inline CSS resources in the compiled HTML output
-let enableInline: boolean = true;
+let inlineStylesheets: boolean = true;
+
+// Inline SVG <use xlink:href> instances to deal with absolute paths that wrongly include localhost
+let inlineVectorGraphics: boolean = false;
 
 // Enable 'blacklist by default' route rendering behaviour (each route you wish to render must be marked with `server: true')
 let blacklist: boolean = false;
 
-const createOutput = (options): OutputProducer =>
-  options['ipc']
-    ? createInterprocessOutput(options)
-    : createHtmlOutput(options);
-
-const createInterprocessOutput = (options): OutputProducer => new InterprocessOutput();
-
-const createHtmlOutput = (options): OutputProducer => {
+const renderOptions = (options): OutputOptions => {
   let outputString = options['output'];
 
   if (/^(\\|\/)/.test(outputString) === false) {
@@ -112,9 +109,18 @@ const createHtmlOutput = (options): OutputProducer => {
 
   const output = pathFromString(outputString);
 
-  return new HtmlOutput(output, enableInline);
+  return {output, inlineStylesheets, inlineVectorGraphics};
 };
 
+const createOutput = (options): OutputProducer =>
+  options['ipc']
+    ? createInterprocessOutput(renderOptions(options))
+    : createHtmlOutput(renderOptions(options));
+
+const createInterprocessOutput = (options: OutputOptions): OutputProducer => new InterprocessOutput(options);
+
+const createHtmlOutput = (options: OutputOptions): OutputProducer => new HtmlOutput(options);
+
 const parseCommandLine = () => {
   const options = commander
     .version(version)
@@ -130,14 +136,21 @@ const parseCommandLine = () => {
     .option('-a, --application <applicationID>', 'Optional application ID if your CLI configuration contains multiple apps')
     .option('-P, --preboot [boolean | json-file | json-text]', 'Enable or disable preboot with optional configuration file or JSON text (otherwise automatically find the root element and use defaults)')
     .option('-i, --inline [boolean]', 'Inline of resources referenced in links')
+    .option('-S, --inline-svg [boolean]', 'Inline SVG <use xlink:href> instances (to resolve issues with absolute URI SVG identifiers eg http://localhost/#foo')
     .option('-I, --ipc', 'Send rendered documents to parent process through IPC instead of writing them to disk', false)
     .option('-b, --blacklist [boolean]', 'Blacklist all routes by default such that all routes which should be rendered must be specially marked with "server: true" in the route definition', false)
 
-  options.on('preboot', value => enablePreboot = value == null ? true : value);
+  options.on('preboot',
+    value => enablePreboot = value == null ? true : value);
+
+  options.on('inline',
+    value => inlineStylesheets = value == null ? true : value);
 
-  options.on('inline', value => enableInline = value == null ? true : value);
+  options.on('inline-svg',
+    value => inlineVectorGraphics = value == null ? true : value);
 
-  options.on('blacklist', value => blacklist = value == null ? true : value);
+  options.on('blacklist',
+    value => blacklist = value == null ? true : value);
 
   return options.parse(process.argv);
 };

source/output/html.ts

@@ -3,35 +3,32 @@ import chalk = require('chalk');
 import {join} from 'path';
 
 import {Files} from '../static';
+import {OutputOptions} from './options';
 import {OutputProducer} from './producer';
 import {OutputException} from '../exception';
-import {PathReference, fileFromString, pathFromString} from '../filesystem';
+import {fileFromString, pathFromString} from '../filesystem';
 import {Snapshot} from '../snapshot';
-import {inlineResources} from './inline';
 import {log} from './log';
 import {pathFromUri} from '../route';
+import {transformInplace} from './transform';
 
 export class HtmlOutput implements OutputProducer {
-  private path: PathReference;
-
-  constructor(path: PathReference | string, private inline: boolean) {
-    this.path = pathFromString(path);
-  }
+  constructor(private options: OutputOptions) {}
 
   initialize() {
-    if (this.path == null) {
+    if (this.options.output == null) {
       throw new OutputException('HTML output writer needs a path to write to');
     }
 
-    if (this.path.exists() === false) {
+    if (this.options.output.exists() === false) {
       try {
-        this.path.mkdir();
+        this.options.output.mkdir();
       }
       catch (exception) {
-        throw new OutputException(`Cannot create output folder: ${this.path}`, exception);
+        throw new OutputException(`Cannot create output folder: ${this.options.output.toString()}`, exception);
       }
 
-      log.info(`Created output path: ${this.path}`);
+      log.info(`Created output path: ${this.options.output.toString()}`);
     }
 
     return Promise.resolve();
@@ -40,17 +37,11 @@ export class HtmlOutput implements OutputProducer {
   async write<V>(snapshot: Snapshot<V>): Promise<void> {
     const file = fileFromString(join(this.routedPathFromSnapshot(snapshot).toString(), Files.index));
 
-    let rendered = this.inline === true
-      ? inlineResources(file.parent(), snapshot.renderedDocument)
-      : snapshot.renderedDocument;
-
-    if (/^<\!DOCTYPE html>/i.test(rendered) === false) { // ensure result has a doctype
-      rendered = `<!DOCTYPE html>${rendered}`;
-    }
+    transformInplace(file.parent(), snapshot, this.options);
 
     log.info(`Rendered route ${pathFromUri(snapshot.uri)} to ${file}`);
 
-    file.create(rendered);
+    file.create(snapshot.renderedDocument);
 
     return Promise.resolve(void 0);
   }
@@ -62,7 +53,7 @@ export class HtmlOutput implements OutputProducer {
   }
 
   private routedPathFromSnapshot<V>(snapshot: Snapshot<V>) {
-    const routedPath = pathFromString(join(this.path.toString(), pathFromUri(snapshot.uri)));
+    const routedPath = pathFromString(join(this.options.output.toString(), pathFromUri(snapshot.uri)));
 
     routedPath.mkdir();
 

source/output/index.ts

@@ -1,5 +1,5 @@
 export * from './html';
-export * from './inline';
 export * from './interprocess';
 export * from './log';
+export * from './options';
 export * from './producer';

source/output/interprocess.ts

@@ -1,11 +1,12 @@
 import {connected} from 'process';
 
 import {RuntimeException} from '../exception';
+import {OutputOptions} from './options';
 import {OutputProducer} from './producer';
 import {Snapshot} from '../snapshot';
 
 export class InterprocessOutput implements OutputProducer {
-  constructor() {}
+  constructor(options: OutputOptions) {}
 
   initialize() {
     if (connected === false) {

source/output/options.ts

@@ -0,0 +1,11 @@
+import {PathReference} from '../filesystem/contracts';
+
+export interface OutputOptions {
+  output: PathReference;
+
+  // Inline CSS stylesheets into the output
+  inlineStylesheets: boolean;
+
+  // Inline SVG <use xlink:href> references to get around absolute path issues
+  inlineVectorGraphics: boolean;
+}

source/output/inline.ts renamed to source/output/stylesheets.ts

@@ -1,35 +1,26 @@
 import {join} from 'path';
 
-import {ApplicationFallbackOptions} from '../static';
 import {PathReference, fileFromString} from '../filesystem';
+
 import {RuntimeException} from '../exception';
-import {createModernWindow} from '../runtime/browser-emulation/create';
 
-export const inlineResources = (path: PathReference, rendered: string): string => {
+export const inlineStylesheets = (path: PathReference, document: Document): string => {
   try {
-    const uri = ApplicationFallbackOptions.fallbackUri;
-
-    const window = createModernWindow(rendered, uri);
-    try {
-      const links = Array.from(window.document.querySelectorAll('link[rel="stylesheet"]'));
-
-      for (const link of links) {
-        const resource = readResource(window.document, path, link as HTMLLinkElement);
-        if (resource == null) {
-          continue;
-        }
+    const links = Array.from(document.querySelectorAll('link[rel="stylesheet"]'));
 
-        link.parentElement.replaceChild(resource, link);
+    for (const link of links) {
+      const resource = readResource(window.document, path, link as HTMLLinkElement);
+      if (resource == null) {
+        continue;
       }
 
-      return window.document.documentElement.outerHTML;
-    }
-    finally {
-      window.close();
+      link.parentElement.replaceChild(resource, link);
     }
+
+    return window.document.documentElement.outerHTML;
   }
   catch (exception) {
-    throw new RuntimeException('Failed to inline resources', exception);
+    throw new RuntimeException('Failed to inline stylesheet resources', exception);
   }
 };
 

source/output/svg.ts

@@ -0,0 +1,29 @@
+const getVectorDefinitions = (document: Document): Map<string, Element> => {
+  const map = new Map<string, Element>();
+
+  for (const definition of Array.from(document.querySelectorAll(`svg > defs > *[id!='']`))) {
+    const identifier = definition.getAttribute('id');
+    if (identifier) {
+      map.set(identifier, definition);
+    }
+  }
+
+  return map;
+};
+
+export const inlineVectorGraphics = (document: Document): void => {
+  const definitions = getVectorDefinitions(document);
+
+  const links = Array.from(document.querySelectorAll('svg > use'));
+
+  for (const link of links) {
+    const identifier = link.getAttribute('xlink:href');
+
+    const matchingDefinition = definitions.get(identifier.split(/[#\/]/g).pop());
+    if (matchingDefinition == null) {
+      throw new Error(`Cannot find matching SVG definition for ${identifier}`);
+    }
+
+    link.parentElement.replaceChild(matchingDefinition.cloneNode(true), link);
+  }
+};

source/output/transform.ts

@@ -0,0 +1,35 @@
+import {ApplicationFallbackOptions} from '../static';
+import {OutputOptions} from './options';
+import {PathReference} from '../filesystem/contracts';
+import {Snapshot} from '../snapshot/snapshot';
+
+import {createModernWindow} from '../runtime/browser-emulation/create';
+import {inlineStylesheets} from './stylesheets';
+import {inlineVectorGraphics} from './svg';
+
+export const transformInplace = <V>(path: PathReference, snapshot: Snapshot<V>, options: OutputOptions): void => {
+  if (options.inlineStylesheets || options.inlineVectorGraphics) {
+    const uri = ApplicationFallbackOptions.fallbackUri;
+
+    const window = createModernWindow(snapshot.renderedDocument, uri);
+
+    try {
+      if (options.inlineStylesheets) {
+        inlineStylesheets(path, window.document);
+      }
+
+      if (options.inlineVectorGraphics) {
+        inlineVectorGraphics(window.document);
+      }
+
+      snapshot.renderedDocument = document.documentElement.outerHTML;
+    }
+    finally {
+      window.close();
+    }
+  }
+
+  if (/^<\!DOCTYPE html>/i.test(snapshot.renderedDocument) === false) { // ensure result has a doctype
+    snapshot.renderedDocument = `<!DOCTYPE html>${snapshot.renderedDocument}`;
+  }
+};