refactor(directive parser) remove cheerio in favor of angular's own compiler

src/cli/cli.ts

@@ -103,8 +103,8 @@ const extractTask = new ExtractTask(cli.input, cli.output, {
 // Parsers
 const parsers: ParserInterface[] = [
 	new PipeParser(),
-	new DirectiveParser(),
-	new ServiceParser()
+	// new DirectiveParser()
+	// new ServiceParser()
 ];
 if (cli.marker) {
 	parsers.push(new FunctionParser({

src/parsers/directive-ast.parser.ts

@@ -0,0 +1,85 @@
+import { ParserInterface } from './parser.interface';
+import { TranslationCollection } from '../utils/translation.collection';
+import { isPathAngularComponent, extractComponentInlineTemplate } from '../utils/utils';
+
+import { parseTemplate, TmplAstNode, TmplAstElement, TmplAstTextAttribute } from '@angular/compiler';
+
+export class DirectiveAstParser implements ParserInterface {
+
+	public extract(template: string, path: string): TranslationCollection {
+		if (path && isPathAngularComponent(path)) {
+			template = extractComponentInlineTemplate(template);
+		}
+
+		let collection: TranslationCollection = new TranslationCollection();
+throw new Error('noåpe');
+		const nodes: TmplAstNode[] = this.parseTemplate(template, path);
+		this.getTranslatableElements(nodes).forEach(element => {
+			const key = this.getElementTranslateAttrValue(element) || this.getElementContents(element);
+			collection = collection.add(key);
+		});
+
+		console.log(collection);
+
+		return collection;
+	}
+
+	protected getTranslatableElements(nodes: TmplAstNode[]): TmplAstElement[] {
+		return nodes
+			.filter(element => this.isElement(element))
+			.reduce((result: TmplAstElement[], element: TmplAstElement) => {
+				return result.concat(this.findChildrenElements(element));
+			}, [])
+			.filter(element => this.isTranslatable(element));
+	}
+
+	protected findChildrenElements(node: TmplAstNode): TmplAstElement[] {
+		if (!this.isElement(node)) {
+			return [];
+		}
+
+		// If element has translate attribute all its contents is translatable
+		// so we don't need to traverse any deeper
+		if (this.isTranslatable(node)) {
+			return [node];
+		}
+
+		return node.children.reduce((result: TmplAstElement[], childNode: TmplAstNode) => {
+			if (this.isElement(childNode)) {
+				const children = this.findChildrenElements(childNode);
+				return result.concat(children);
+			}
+			return result;
+		}, [node]);
+	}
+
+	protected parseTemplate(template: string, path: string): TmplAstNode[] {
+		return parseTemplate(template, path).nodes;
+	}
+
+	protected isElement(node: any): node is TmplAstElement {
+		return node
+			&& node.attributes !== undefined
+			&& node.children !== undefined;
+	}
+
+	protected isTranslatable(node: TmplAstNode): boolean {
+		if (this.isElement(node) && node.attributes.some(attribute => attribute.name === 'translate')) {
+			return true;
+		}
+		return false;
+	}
+
+	protected getElementTranslateAttrValue(element: TmplAstElement): string {
+		const attr: TmplAstTextAttribute = element.attributes.find(attribute => attribute.name === 'translate');
+		return attr && attr.value || '';
+	}
+
+	protected getElementContents(element: TmplAstElement): string {
+		const contents = element.sourceSpan.start.file.content;
+		const start = element.startSourceSpan.end.offset;
+		const end = element.endSourceSpan.start.offset;
+		return contents.substring(start, end).trim();
+	}
+
+}

src/parsers/directive.parser.ts

@@ -2,69 +2,78 @@ import { ParserInterface } from './parser.interface';
 import { TranslationCollection } from '../utils/translation.collection';
 import { isPathAngularComponent, extractComponentInlineTemplate } from '../utils/utils';
 
-import * as cheerio from 'cheerio';
-
-const $ = cheerio.load('', { xmlMode: true });
+import { parseTemplate, TmplAstNode, TmplAstElement, TmplAstTextAttribute } from '@angular/compiler';
 
 export class DirectiveParser implements ParserInterface {
 
-	public extract(contents: string, path?: string): TranslationCollection {
+	public extract(template: string, path: string): TranslationCollection {
 		if (path && isPathAngularComponent(path)) {
-			contents = extractComponentInlineTemplate(contents);
+			template = extractComponentInlineTemplate(template);
 		}
 
-		return this.parseTemplate(contents);
-	}
-
-	protected parseTemplate(template: string): TranslationCollection {
 		let collection: TranslationCollection = new TranslationCollection();
-
-		const selector = '[translate], [ng2-translate]';
-
-		template = this.prepareTemplate(template);
-		$(template)
-			.find(selector)
-			.addBack(selector)
-			.each((i: number, element: CheerioElement) => {
-				const $element = $(element);
-				const attr = $element.attr('translate') || $element.attr('ng2-translate');
-
-				if (attr) {
-					collection = collection.add(attr);
-				} else {
-					$element
-						.contents()
-						.toArray()
-						.filter(node => node.type === 'text')
-						.map(node => node.nodeValue.trim())
-						.filter(text => text.length > 0)
-						.forEach(text => collection = collection.add(text));
-				}
-			});
+		const nodes: TmplAstNode[] = this.parseTemplate(template, path);
+		this.getTranslatableElements(nodes).forEach(element => {
+			const translateAttr = this.getTranslateAttribute(element);
+			const key = translateAttr.value || this.getContents(element);
+			collection = collection.add(key);
+		});
 
 		return collection;
 	}
 
-	protected prepareTemplate(template: string): string {
-		return this.wrapTemplate(
-			this.normalizeTemplateAttributes(template)
-		);
+	protected getTranslatableElements(nodes: TmplAstNode[]): TmplAstElement[] {
+		return nodes
+			.filter(element => this.isElement(element))
+			.reduce((result: TmplAstElement[], element: TmplAstElement) => {
+				return result.concat(this.findChildrenElements(element));
+			}, [])
+			.filter(element => this.hasTranslateAttribute(element));
 	}
 
-	/**
-	 * Angular's `[attr]="'val'"` syntax is not valid HTML,
-	 * so it can't be parsed by standard HTML parsers.
-	 * This method replaces `[attr]="'val'""` with `attr="val"`
-	 */
-	protected normalizeTemplateAttributes(template: string): string {
-		return template.replace(/\[([^\]]+)\]="'([^']*)'"/g, '$1="$2"');
+	protected findChildrenElements(node: TmplAstNode): TmplAstElement[] {
+		// Safe guard, since only elements have children
+		if (!this.isElement(node)) {
+			return [];
+		}
+
+		// If element has translate attribute it means all of its contents
+		// is translatable, so we don't need to go any deeper
+		if (this.hasTranslateAttribute(node)) {
+			return [node];
+		}
+
+		return node.children.reduce((result: TmplAstElement[], childNode: TmplAstNode) => {
+			if (this.isElement(childNode)) {
+				const children = this.findChildrenElements(childNode);
+				return result.concat(children);
+			}
+			return result;
+		}, [node]);
 	}
 
-	/**
-	 * Wraps template in tag
-	 */
-	protected wrapTemplate(template: string, tag: string = 'div'): string {
-		return `<${tag}>${template}</${tag}>`;
+	protected parseTemplate(template: string, path: string): TmplAstNode[] {
+		return parseTemplate(template, path).nodes;
+	}
+
+	protected isElement(node: any): node is TmplAstElement {
+		return node
+			&& node.attributes !== undefined
+			&& node.children !== undefined;
+	}
+
+	protected getContents(element: TmplAstElement): string {
+		const start = element.startSourceSpan.end.offset;
+		const end = element.endSourceSpan.start.offset;
+		return element.sourceSpan.start.file.content.substring(start, end).trim();
+	}
+
+	protected hasTranslateAttribute(element: TmplAstElement): boolean {
+		return !!this.getTranslateAttribute(element);
+	}
+
+	protected getTranslateAttribute(element: TmplAstElement): TmplAstTextAttribute {
+		return element.attributes.find(attribute => attribute.name === 'translate');
 	}
 
 }

src/parsers/function.parser.ts

@@ -15,10 +15,10 @@ export class FunctionParser extends AbstractAstParser implements ParserInterface
 		}
 	}
 
-	public extract(contents: string, path?: string): TranslationCollection {
+	public extract(template: string, path: string): TranslationCollection {
 		let collection: TranslationCollection = new TranslationCollection();
 
-		this.sourceFile = this.createSourceFile(path, contents);
+		this.sourceFile = this.createSourceFile(path, template);
 
 		const callNodes = this.findCallNodes();
 		callNodes.forEach(callNode => {

src/parsers/parser.interface.ts

@@ -2,6 +2,6 @@ import { TranslationCollection } from '../utils/translation.collection';
 
 export interface ParserInterface {
 
-	extract(contents: string, path?: string): TranslationCollection;
+	extract(template: string, path: string): TranslationCollection;
 
 }

src/parsers/pipe.parser.ts

@@ -4,12 +4,12 @@ import { isPathAngularComponent, extractComponentInlineTemplate } from '../utils
 
 export class PipeParser implements ParserInterface {
 
-	public extract(contents: string, path?: string): TranslationCollection {
+	public extract(template: string, path: string): TranslationCollection {
 		if (path && isPathAngularComponent(path)) {
-			contents = extractComponentInlineTemplate(contents);
+			template = extractComponentInlineTemplate(template);
 		}
 
-		return this.parseTemplate(contents);
+		return this.parseTemplate(template);
 	}
 
 	protected parseTemplate(template: string): TranslationCollection {
@@ -21,6 +21,8 @@ export class PipeParser implements ParserInterface {
 			collection = collection.add(matches[2].split('\\\'').join('\''));
 		}
 
+		console.log(collection);
+
 		return collection;
 	}
 

src/parsers/service.parser.ts

@@ -18,10 +18,10 @@ export class ServiceParser extends AbstractAstParser implements ParserInterface
 
 	protected sourceFile: SourceFile;
 
-	public extract(contents: string, path?: string): TranslationCollection {
+	public extract(template: string, path: string): TranslationCollection {
 		let collection: TranslationCollection = new TranslationCollection();
 
-		this.sourceFile = this.createSourceFile(path, contents);
+		this.sourceFile = this.createSourceFile(path, template);
 		const classNodes = this.findClassNodes(this.sourceFile);
 		classNodes.forEach(classNode => {
 			const constructorNode = this.findConstructorNode(classNode);