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

package.json

@@ -45,7 +45,6 @@
   "config": {},
   "devDependencies": {
     "@types/chai": "4.1.7",
-    "@types/cheerio": "0.22.11",
     "@types/flat": "0.0.28",
     "@types/glob": "7.1.1",
     "@types/mkdirp": "0.5.2",
@@ -58,7 +57,7 @@
     "tslint-eslint-rules": "5.4.0"
   },
   "dependencies": {
-    "cheerio": "1.0.0-rc.3",
+    "@angular/compiler": "^8.0.0",
     "colorette": "^1.0.8",
     "flat": "4.1.0",
     "fs": "0.0.1-security",

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 DirectiveParser()
-	new ServiceParser()
+	// 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';
+import { parseTemplate, TmplAstNode, TmplAstElement, TmplAstTextAttribute } from '@angular/compiler';
-
-const $ = cheerio.load('', { xmlMode: true });
 
 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 nodes: TmplAstNode[] = this.parseTemplate(template, path);
-		const selector = '[translate], [ng2-translate]';
+		this.getTranslatableElements(nodes).forEach(element => {
-
+			const translateAttr = this.getTranslateAttribute(element);
-		template = this.prepareTemplate(template);
+			const key = translateAttr.value || this.getContents(element);
-		$(template)
+			collection = collection.add(key);
-			.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));
-				}
 		});
 
 		return collection;
 	}
 
-	protected prepareTemplate(template: string): string {
+	protected getTranslatableElements(nodes: TmplAstNode[]): TmplAstElement[] {
-		return this.wrapTemplate(
+		return nodes
-			this.normalizeTemplateAttributes(template)
+			.filter(element => this.isElement(element))
-		);
+			.reduce((result: TmplAstElement[], element: TmplAstElement) => {
+				return result.concat(this.findChildrenElements(element));
+			}, [])
+			.filter(element => this.hasTranslateAttribute(element));
 	}
 
-	/**
+	protected findChildrenElements(node: TmplAstNode): TmplAstElement[] {
-	 * Angular's `[attr]="'val'"` syntax is not valid HTML,
+		// Safe guard, since only elements have children
-	 * so it can't be parsed by standard HTML parsers.
+		if (!this.isElement(node)) {
-	 * This method replaces `[attr]="'val'""` with `attr="val"`
+			return [];
-	 */
-	protected normalizeTemplateAttributes(template: string): string {
-		return template.replace(/\[([^\]]+)\]="'([^']*)'"/g, '$1="$2"');
 		}
 
-	/**
+		// If element has translate attribute it means all of its contents
-	 * Wraps template in tag
+		// is translatable, so we don't need to go any deeper
-	 */
+		if (this.hasTranslateAttribute(node)) {
-	protected wrapTemplate(template: string, tag: string = 'div'): string {
+			return [node];
-		return `<${tag}>${template}</${tag}>`;
+		}
+
+		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 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);

tests/parsers/directive.parser.spec.ts

@@ -2,78 +2,39 @@ import { expect } from 'chai';
 
 import { DirectiveParser } from '../../src/parsers/directive.parser';
 
-class TestDirectiveParser extends DirectiveParser {
-
-	public normalizeTemplateAttributes(template: string): string {
-		return super.normalizeTemplateAttributes(template);
-	}
-
-}
-
 describe('DirectiveParser', () => {
 
 	const templateFilename: string = 'test.template.html';
 	const componentFilename: string = 'test.component.ts';
 
-	let parser: TestDirectiveParser;
+	let parser: DirectiveParser;
 
 	beforeEach(() => {
-		parser = new TestDirectiveParser();
+		parser = new DirectiveParser();
 	});
 
-	it('should extract contents when no translate attribute value is provided', () => {
+	it('should not choke when no html is present in template', () => {
+		const contents = 'Hello World';
+		const keys = parser.extract(contents, templateFilename).keys();
+		expect(keys).to.deep.equal([]);
+	});
+
+	it('should use contents as key when there is no translate attribute value provided', () => {
 		const contents = '<div translate>Hello World</div>';
 		const keys = parser.extract(contents, templateFilename).keys();
 		expect(keys).to.deep.equal(['Hello World']);
 	});
 
-	it('should extract translate attribute if provided', () => {
+	it('should use translate attribute value as key when provided', () => {
-		const contents = '<div translate="KEY">Hello World<div>';
+		const contents = '<div translate="MY_KEY">Hello World<div>';
 		const keys = parser.extract(contents, templateFilename).keys();
-		expect(keys).to.deep.equal(['KEY']);
+		expect(keys).to.deep.equal(['MY_KEY']);
 	});
 
-	it('should extract bound translate attribute as key if provided', () => {
+	it('should not process children when translate attribute is present', () => {
-		const contents = `<div [translate]="'KEY'">Hello World<div>`;
+		const contents = `<div translate>Hello <strong translate>World</strong></div>`;
 		const keys = parser.extract(contents, templateFilename).keys();
-		expect(keys).to.deep.equal(['KEY']);
+		expect(keys).to.deep.equal(['Hello <strong translate>World</strong>']);
-	});
-
-	it('should extract direct text nodes when no translate attribute value is provided', () => {
-		const contents = `
-			<div translate>
-				<span>&#10003;</span>
-				Hello <strong>World</strong>
-				Hi <em>there</em>
-			</div>
-		`;
-		const keys = parser.extract(contents, templateFilename).keys();
-		expect(keys).to.deep.equal(['Hello', 'Hi']);
-	});
-
-	it('should extract direct text nodes of tags with a translate attribute', () => {
-		const contents = `
-			<div translate>
-				<span>&#10003;</span>
-				Hello World
-				<div translate>Hi there</div>
-			</div>
-		`;
-		const keys = parser.extract(contents, templateFilename).keys();
-		expect(keys).to.deep.equal(['Hello World', 'Hi there']);
-	});
-
-	it('should extract translate attribute if provided or direct text nodes if not', () => {
-		const contents = `
-			<div translate="KEY">
-				<span>&#10003;</span>
-				Hello World
-				<p translate>Hi there</p>
-				<p [translate]="'OTHER_KEY'">Lorem Ipsum</p>
-			</div>
-		`;
-		const keys = parser.extract(contents, templateFilename).keys();
-		expect(keys).to.deep.equal(['KEY', 'Hi there', 'OTHER_KEY']);
 	});
 
 	it('should extract and parse inline template', () => {
@@ -88,20 +49,14 @@ describe('DirectiveParser', () => {
 		expect(keys).to.deep.equal(['Hello World']);
 	});
 
-	it('should extract contents when no ng2-translate attribute value is provided', () => {
+	it('should extract contents when no translate attribute value is provided', () => {
-		const contents = '<div ng2-translate>Hello World</div>';
+		const contents = '<div translate>Hello World</div>';
 		const keys = parser.extract(contents, templateFilename).keys();
 		expect(keys).to.deep.equal(['Hello World']);
 	});
 
-	it('should extract ng2-translate attribute if provided', () => {
+	it('should extract translate attribute value if provided', () => {
-		const contents = '<div ng2-translate="KEY">Hello World<div>';
+		const contents = '<div translate="KEY">Hello World<div>';
-		const keys = parser.extract(contents, templateFilename).keys();
-		expect(keys).to.deep.equal(['KEY']);
-	});
-
-	it('should extract bound ng2-translate attribute as key if provided', () => {
-		const contents = `<div [ng2-translate]="'KEY'">Hello World<div>`;
 		const keys = parser.extract(contents, templateFilename).keys();
 		expect(keys).to.deep.equal(['KEY']);
 	});
@@ -112,12 +67,6 @@ describe('DirectiveParser', () => {
 		expect(collection.values).to.deep.equal({});
 	});
 
-	it('should normalize bound attributes', () => {
-		const contents = `<p [translate]="'KEY'">Hello World</p>`;
-		const template = parser.normalizeTemplateAttributes(contents);
-		expect(template).to.equal('<p translate="KEY">Hello World</p>');
-	});
-
 	it('should extract contents from within custom tags', () => {
 		const contents = `<custom-table><tbody><tr><td translate>Hello World</td></tr></tbody></custom-table>`;
 		const keys = parser.extract(contents, templateFilename).keys();