Update deps

README.md

@@ -101,7 +101,8 @@ Examples:
   ngx-translate-extract -i './src/**/*.{ts,tsx,html}' -o strings.json     Extract from ts, tsx and html
   ngx-translate-extract -i './src/**/!(*.spec).{ts,html}' -o              Extract from ts, html, excluding files with ".spec"
   strings.json
+```
 
 ## Note for GetText users
 
-Please pay attention of which version of `gettext-parser` you actually use in your project. For instance, `gettext-parser:1.2.2` does not support HTML tags in translation keys.
+Please pay attention of which version of `gettext-parser` you actually use in your project. For instance, `gettext-parser:1.2.2` does not support HTML tags in translation keys.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@biesbjerg/ngx-translate-extract",
-  "version": "7.0.0",
+  "version": "7.0.3",
   "description": "Extract strings from projects using ngx-translate",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -61,44 +61,44 @@
   },
   "config": {},
   "devDependencies": {
-    "@angular/compiler": "^9.1.9",
+    "@angular/compiler": "^11.2.9",
     "@types/braces": "^3.0.0",
-    "@types/chai": "^4.2.11",
+    "@types/chai": "^4.2.16",
     "@types/flat": "^5.0.1",
     "@types/gettext-parser": "4.0.0",
-    "@types/glob": "^7.1.1",
+    "@types/glob": "^7.1.3",
-    "@types/mkdirp": "^1.0.0",
+    "@types/mkdirp": "^1.0.1",
-    "@types/mocha": "^7.0.2",
+    "@types/mocha": "^8.2.2",
-    "@types/node": "^12.12.42",
+    "@types/node": "^14.14.37",
-    "@types/yargs": "^15.0.5",
+    "@types/yargs": "^16.0.1",
     "braces": "^3.0.2",
-    "chai": "^4.2.0",
+    "chai": "^4.3.4",
-    "husky": "^4.2.5",
+    "husky": "^6.0.0",
-    "lint-staged": "^10.2.6",
+    "lint-staged": "^10.5.4",
-    "mocha": "^7.2.0",
+    "mocha": "^8.3.2",
-    "prettier": "^2.0.5",
+    "prettier": "^2.2.1",
     "rimraf": "^3.0.2",
-    "ts-node": "^8.10.1",
+    "ts-node": "^9.1.1",
-    "tslint": "^6.1.2",
+    "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.18.0",
     "tslint-eslint-rules": "^5.4.0",
-    "tslint-etc": "^1.10.1",
+    "tslint-etc": "^1.13.9",
-    "typescript": "^3.9.3"
+    "typescript": "^4.2.4"
   },
   "peerDependencies": {
-    "@angular/compiler": "^8.0.0 || ^9.0.0",
+    "@angular/compiler": ">=8.0.0",
-    "typescript": "^3.0.0"
+    "typescript": ">=3.0.0"
   },
   "dependencies": {
-    "@phenomnomnominal/tsquery": "^4.1.0",
+    "@phenomnomnominal/tsquery": "^4.1.1",
-    "boxen": "^4.2.0",
+    "boxen": "^5.0.1",
-    "colorette": "^1.2.0",
+    "colorette": "^1.2.2",
-    "flat": "^5.0.0",
+    "flat": "^5.0.2",
-    "gettext-parser": "^4.0.3",
+    "gettext-parser": "^4.0.4",
     "glob": "^7.1.6",
     "mkdirp": "^1.0.4",
     "path": "^0.12.7",
     "terminal-link": "^2.1.1",
-    "yargs": "^15.3.1"
+    "yargs": "^16.2.0"
   }
 }

src/cli/tasks/extract.task.ts

@@ -74,7 +74,7 @@ export class ExtractTask implements TaskInterface {
 			try {
 				let event = 'CREATED';
 				if (fs.existsSync(outputPath)) {
-					this.options.replace ? event = 'REPLACED' : event = 'MERGED';
+					this.options.replace ? (event = 'REPLACED') : (event = 'MERGED');
 				}
 				this.save(outputPath, final);
 				this.out(`%s %s`, dim(`- ${outputPath}`), green(`[${event}]`));

src/parsers/directive.parser.ts

@@ -3,7 +3,18 @@ import {
 	TmplAstNode as Node,
 	TmplAstElement as Element,
 	TmplAstText as Text,
-	TmplAstTemplate as Template
+	TmplAstTemplate as Template,
+	TmplAstTextAttribute as TextAttribute,
+	TmplAstBoundAttribute as BoundAttribute,
+	AST,
+	ASTWithSource,
+	LiteralPrimitive,
+	Conditional,
+	Binary,
+	BindingPipe,
+	Interpolation,
+	LiteralArray,
+	LiteralMap
 } from '@angular/compiler';
 
 import { ParserInterface } from './parser.interface';
@@ -24,13 +35,22 @@ export class DirectiveParser implements ParserInterface {
 		const elements: ElementLike[] = this.getElementsWithTranslateAttribute(nodes);
 
 		elements.forEach((element) => {
-			const attr = this.getAttribute(element, TRANSLATE_ATTR_NAME);
+			const attribute = this.getAttribute(element, TRANSLATE_ATTR_NAME);
-			if (attr) {
+			if (attribute?.value) {
-				collection = collection.add(attr);
+				collection = collection.add(attribute.value);
 				return;
 			}
+
+			const boundAttribute = this.getBoundAttribute(element, TRANSLATE_ATTR_NAME);
+			if (boundAttribute?.value) {
+				this.getLiteralPrimitives(boundAttribute.value).forEach((literalPrimitive) => {
+					collection = collection.add(literalPrimitive.value);
+				});
+				return;
+			}
+
 			const textNodes = this.getTextNodes(element);
-			textNodes.forEach((textNode: Text) => {
+			textNodes.forEach((textNode) => {
 				collection = collection.add(textNode.value.trim());
 			});
 		});
@@ -43,16 +63,18 @@ export class DirectiveParser implements ParserInterface {
 	 */
 	protected getElementsWithTranslateAttribute(nodes: Node[]): ElementLike[] {
 		let elements: ElementLike[] = [];
-		nodes.filter(this.isElementLike)
+		nodes.filter(this.isElementLike).forEach((element) => {
-			.forEach((element) => {
+			if (this.hasAttribute(element, TRANSLATE_ATTR_NAME)) {
-				if (this.hasAttribute(element, TRANSLATE_ATTR_NAME)) {
+				elements = [...elements, element];
-					elements = [...elements, element];
+			}
-				}
+			if (this.hasBoundAttribute(element, TRANSLATE_ATTR_NAME)) {
-				const childElements = this.getElementsWithTranslateAttribute(element.children);
+				elements = [...elements, element];
-				if (childElements.length) {
+			}
-					elements = [...elements, ...childElements];
+			const childElements = this.getElementsWithTranslateAttribute(element.children);
-				}
+			if (childElements.length) {
-			});
+				elements = [...elements, ...childElements];
+			}
+		});
 		return elements;
 	}
 
@@ -76,8 +98,59 @@ export class DirectiveParser implements ParserInterface {
 	 * Get attribute value if present on element
 	 * @param element
 	 */
-	protected getAttribute(element: ElementLike, name: string): string | undefined {
+	protected getAttribute(element: ElementLike, name: string): TextAttribute {
-		return element.attributes.find((attribute) => attribute.name === name)?.value;
+		return element.attributes.find((attribute) => attribute.name === name);
+	}
+
+	/**
+	 * Check if bound attribute is present on element
+	 * @param element
+	 * @param name
+	 */
+	protected hasBoundAttribute(element: ElementLike, name: string): boolean {
+		return this.getBoundAttribute(element, name) !== undefined;
+	}
+
+	/**
+	 * Get bound attribute if present on element
+	 * @param element
+	 * @param name
+	 */
+	protected getBoundAttribute(element: ElementLike, name: string): BoundAttribute {
+		return element.inputs.find((input) => input.name === name);
+	}
+
+	/**
+	 * Get literal primitives from expression
+	 * @param exp
+	 */
+	protected getLiteralPrimitives(exp: AST): LiteralPrimitive[] {
+		if (exp instanceof LiteralPrimitive) {
+			return [exp];
+		}
+
+		let visit: AST[] = [];
+		if (exp instanceof Interpolation) {
+			visit = exp.expressions;
+		} else if (exp instanceof LiteralArray) {
+			visit = exp.expressions;
+		} else if (exp instanceof LiteralMap) {
+			visit = exp.values;
+		} else if (exp instanceof BindingPipe) {
+			visit = [exp.exp];
+		} else if (exp instanceof Conditional) {
+			visit = [exp.trueExp, exp.falseExp];
+		} else if (exp instanceof Binary) {
+			visit = [exp.left, exp.right];
+		} else if (exp instanceof ASTWithSource) {
+			visit = [exp.ast];
+		}
+
+		let results: LiteralPrimitive[] = [];
+		visit.forEach((child) => {
+			results = [...results, ...this.getLiteralPrimitives(child)];
+		});
+		return results;
 	}
 
 	/**
@@ -104,5 +177,4 @@ export class DirectiveParser implements ParserInterface {
 	protected parseTemplate(template: string, path: string): Node[] {
 		return parseTemplate(template, path).nodes;
 	}
-
 }

src/parsers/pipe.parser.ts

@@ -9,7 +9,8 @@ import {
 	Binary,
 	LiteralMap,
 	LiteralArray,
-	Interpolation
+	Interpolation,
+	MethodCall
 } from '@angular/compiler';
 
 import { ParserInterface } from './parser.interface';
@@ -131,11 +132,15 @@ export class PipeParser implements ParserInterface {
 			return this.getTranslatablesFromAsts(ast.expressions);
 		}
 
+		if (ast instanceof MethodCall) {
+			return this.getTranslatablesFromAsts(ast.args);
+		}
+
 		return [];
 	}
 
 	protected getTranslatablesFromAsts(asts: AST[]): BindingPipe[] {
-		return this.flatten(asts.map(ast => this.getTranslatablesFromAst(ast)));
+		return this.flatten(asts.map((ast) => this.getTranslatablesFromAst(ast)));
 	}
 
 	protected flatten<T extends AST>(array: T[][]): T[] {

tests/parsers/directive.parser.spec.ts

@@ -12,6 +12,55 @@ describe('DirectiveParser', () => {
 		parser = new DirectiveParser();
 	});
 
+
+	it('should extract keys when using literal map in bound attribute', () => {
+		const contents = `<div [translate]="{ key1: 'value1' | translate, key2: 'value2' | translate }"></div>`;
+		const keys = parser.extract(contents, templateFilename).keys();
+		expect(keys).to.deep.equal(['value1', 'value2']);
+	});
+
+	it('should extract keys when using literal arrays in bound attribute', () => {
+		const contents = `<div [translate]="[ 'value1' | translate, 'value2' | translate ]"></div>`;
+		const keys = parser.extract(contents, templateFilename).keys();
+		expect(keys).to.deep.equal(['value1', 'value2']);
+	});
+
+	it('should extract keys when using binding pipe in bound attribute', () => {
+		const contents = `<div [translate]="'KEY1' | withPipe"></div>`;
+		const keys = parser.extract(contents, templateFilename).keys();
+		expect(keys).to.deep.equal(['KEY1']);
+	});
+
+	it('should extract keys when using binary expression in bound attribute', () => {
+		const contents = `<div [translate]="keyVar || 'KEY1'"></div>`;
+		const keys = parser.extract(contents, templateFilename).keys();
+		expect(keys).to.deep.equal(['KEY1']);
+	});
+
+	it('should extract keys when using literal primitive in bound attribute', () => {
+		const contents = `<div [translate]="'KEY1'"></div>`;
+		const keys = parser.extract(contents, templateFilename).keys();
+		expect(keys).to.deep.equal(['KEY1']);
+	});
+
+	it('should extract keys when using conditional in bound attribute', () => {
+		const contents = `<div [translate]="condition ? 'KEY1' : 'KEY2'"></div>`;
+		const keys = parser.extract(contents, templateFilename).keys();
+		expect(keys).to.deep.equal(['KEY1', 'KEY2']);
+	});
+
+	it('should extract keys when using nested conditionals in bound attribute', () => {
+		const contents = `<div [translate]="isSunny ? (isWarm ? 'Sunny and warm' : 'Sunny but cold') : 'Not sunny'"></div>`;
+		const keys = parser.extract(contents, templateFilename).keys();
+		expect(keys).to.deep.equal(['Sunny and warm', 'Sunny but cold', 'Not sunny']);
+	});
+
+	it('should extract keys when using interpolation', () => {
+		const contents = `<div translate="{{ 'KEY1' + key2 + 'KEY3' }}"></div>`;
+		const keys = parser.extract(contents, templateFilename).keys();
+		expect(keys).to.deep.equal(['KEY1', 'KEY3']);
+	});
+
 	it('should extract keys keeping proper whitespace', () => {
 		const contents = `
 			<div translate>
@@ -120,4 +169,5 @@ describe('DirectiveParser', () => {
 		const keys = parser.extract(contents, templateFilename).keys();
 		expect(keys).to.deep.equal(['this is an example']);
 	});
+
 });

tests/parsers/pipe.parser.spec.ts

@@ -195,4 +195,10 @@ describe('PipeParser', () => {
 		const keys = parser.extract(contents, templateFilename).keys();
 		expect(keys).to.deep.equal([]);
 	});
+
+	it('should extract strings from piped arguments inside a function calls on templates', () => {
+		const contents = `{{ callMe('Hello' | translate, 'World' | translate ) }}`;
+		const keys = parser.extract(contents, templateFilename).keys();
+		expect(keys).to.deep.equal([`Hello`, `World`]);
+	});
 });