feat: 🎸 Add support for self closing tag and control flow

__tests__/buildTranslationFiles.spec.ts

@@ -66,7 +66,9 @@ type TranslationCategory =
   | 'multi-input'
   | 'scope-mapping'
   | 'comments'
-  | 'remove-extra-keys';
+  | 'remove-extra-keys'
+  | 'self-closing'
+  | 'control-flow';
 
 interface assertTranslationParams extends Pick<Config, 'fileFormat'> {
   type: TranslationCategory;
@@ -238,6 +240,32 @@ describe.each(formats)('buildTranslationFiles in %s', (fileFormat) => {
       });
     });
 
+    describe('Self-closing', () => {
+      const type: TranslationCategory = 'self-closing';
+      const config = gConfig(type);
+
+      beforeEach(() => removeI18nFolder(type));
+
+      it('should work with self-closing component', () => {
+        let expected = generateKeys({ end: 4 });
+        createTranslations(config);
+        assertTranslation({ type, expected, fileFormat });
+      });
+    });
+
+    describe('Control flow', () => {
+      const type: TranslationCategory = 'control-flow';
+      const config = gConfig(type);
+
+      beforeEach(() => removeI18nFolder(type));
+
+      it('should work with control flow', () => {
+        let expected = generateKeys({ end: 26 });
+        createTranslations(config);
+        assertTranslation({ type, expected, fileFormat });
+      });
+    });
+
     describe('read', () => {
       const type: TranslationCategory = 'read';
       const config = gConfig(type);

__tests__/control-flow/1.html

@@ -0,0 +1,79 @@
+<span>{{ '1' | transloco }}</span>
+<span transloco="2"></span>
+<ng-container *transloco="let t">
+  <span>{{ t('3') }}</span>
+</ng-container>
+<ng-template transloco let-t>
+  <span>{{ t('4') }}</span>
+</ng-template>
+
+
+@if (a > b) {
+  <span>{{ '5' | transloco }}</span>
+  <span transloco="6">
+  </span>
+  <ng-container *transloco="let t">
+    <span>{{ t('7') }}</span>
+  </ng-container>
+  <ng-template transloco let-t>
+    <span>{{ t('8') }}</span>
+  </ng-template>
+} @else if (b > a) {
+  <span>{{ '9' | transloco }}</span>
+} @else {
+  <span [innerHtml]="'10' | transloco"></span>
+}
+
+@for (item of items; track item.id) {
+  {{ '11' | transloco }}
+} @empty {
+  <span>{{ '12' | transloco }}</span>
+}
+
+@switch (condition) {
+  @case (caseA) {
+    <span>{{ '13' | transloco }}</span>
+  }
+  @default {
+    <span>{{ '14' | transloco }}</span>
+  }
+}
+
+@defer {
+  <span>{{ '15' | transloco }}</span>
+} @error {
+  <span>{{ '16' | transloco }}</span>
+} @placeholder {
+  <span>{{ '17' | transloco }}</span>
+} @loading {
+  <span>{{ '18' | transloco }}</span>
+}
+
+<ng-container *transloco="let t">
+@if (a > b) {
+  <span>{{ t('19') }}</span>
+} @else if (b > a) {
+  <span [innerHtml]="t('20')"></span>
+} @else {
+  @for (item of items; track item.id) {
+    <span>{{ t('21') }}</span>
+  } @empty {
+    @switch (condition) {
+      @case (caseA) {
+        <span>{{ t('22') }}</span>
+      }
+      @default {
+        @defer {
+          <span>{{ '23' | transloco }}</span>
+        } @error {
+          <span transloco="24"></span>
+        } @placeholder {
+          <span>{{ t('25') }}</span>
+        } @loading {
+          <span>{{ t('26') }}</span>
+        }
+      }
+    }
+  }
+}
+</ng-container>

__tests__/self-closing/1.html

@@ -0,0 +1,8 @@
+<self-closing [value]="'1' | transloco" />
+<self-closing transloco="2" />
+<ng-container *transloco="let t">
+  <self-closing [value]="t('3')" />
+</ng-container>
+<ng-template transloco let-t>
+  <self-closing [value]="t('4')" />
+</ng-template>

src/keys-builder/template/directive.extractor.ts

@@ -12,7 +12,10 @@ import { resolveAliasAndKey } from '../utils/resolvers.utils';
 
 import { TemplateExtractorConfig } from './types';
 import {
+  getChildrendNodesIfBlock,
+  isBlockWithChildren,
   isBoundAttribute,
+  isBoundText,
   isConditionalExpression,
   isElement,
   isInterpolation,
@@ -30,6 +33,12 @@ export function directiveExtractor(config: TemplateExtractorConfig) {
 
 function traverse(nodes: TmplAstNode[], config: ExtractorConfig) {
   for (const node of nodes) {
+    const childrendNodes = getChildrendNodesIfBlock(node);
+    if (childrendNodes.length) {
+      traverse(childrendNodes, config);
+      continue;
+    }
+
     if (!isSupportedNode(node, [isTemplate, isElement])) {
       continue;
     }

src/keys-builder/template/pipe.extractor.ts

@@ -18,6 +18,7 @@ import {
   isPropertyRead,
   isTemplate,
   parseTemplate,
+  getChildrendNodesIfBlock,
 } from './utils';
 
 export function pipeExtractor(config: TemplateExtractorConfig) {
@@ -27,6 +28,12 @@ export function pipeExtractor(config: TemplateExtractorConfig) {
 
 function traverse(nodes: TmplAstNode[], config: ExtractorConfig) {
   for (const node of nodes) {
+    const childrendNodes = getChildrendNodesIfBlock(node);
+    if (childrendNodes.length) {
+      traverse(childrendNodes, config);
+      continue;
+    }
+
     let astTrees: AST[] = [];
 
     if (isElement(node) || isTemplate(node)) {

src/keys-builder/template/structural-directive.extractor.ts

@@ -28,6 +28,7 @@ import {
   isSupportedNode,
   isTemplate,
   parseTemplate,
+  getChildrendNodesIfBlock,
 } from './utils';
 
 interface ContainerMetaData {
@@ -49,6 +50,12 @@ export function traverse(
   config: TemplateExtractorConfig,
 ) {
   for (const node of nodes) {
+    const childrendNodes = getChildrendNodesIfBlock(node);
+    if (childrendNodes.length) {
+      traverse(childrendNodes, containers, config);
+      continue;
+    }
+
     let methodUsages: ContainerMetaData[] = [];
 
     if (isBoundText(node)) {

src/keys-builder/template/utils.ts

@@ -14,6 +14,17 @@ import {
   TmplAstElement,
   TmplAstTemplate,
   TmplAstTextAttribute,
+  TmplAstNode,
+  TmplAstDeferredBlock,
+  TmplAstDeferredBlockError,
+  TmplAstDeferredBlockLoading,
+  TmplAstDeferredBlockPlaceholder,
+  TmplAstForLoopBlock,
+  TmplAstForLoopBlockEmpty,
+  TmplAstIfBlockBranch,
+  TmplAstSwitchBlockCase,
+  TmplAstIfBlock,
+  TmplAstSwitchBlock,
 } from '@angular/compiler';
 
 import { readFile } from '../../utils/file.utils';
@@ -98,3 +109,72 @@ export function isSupportedNode<Predicates extends any[]>(
 ): node is GuardedType<Predicates[number]> {
   return predicates.some((predicate) => predicate(node));
 }
+
+export function isBlockWithChildren(
+  node: unknown,
+): node is { children: TmplAstNode[] } {
+  return (
+    node instanceof TmplAstDeferredBlockError ||
+    node instanceof TmplAstDeferredBlockLoading ||
+    node instanceof TmplAstDeferredBlockPlaceholder ||
+    node instanceof TmplAstForLoopBlockEmpty ||
+    node instanceof TmplAstIfBlockBranch ||
+    node instanceof TmplAstSwitchBlockCase
+  );
+}
+
+export function isTmplAstForLoopBlock(
+  node: unknown,
+): node is TmplAstForLoopBlock {
+  return node instanceof TmplAstForLoopBlock;
+}
+
+export function isTmplAstDeferredBlock(
+  node: unknown,
+): node is TmplAstDeferredBlock {
+  return node instanceof TmplAstDeferredBlock;
+}
+
+export function isTmplAstIfBlock(node: unknown): node is TmplAstIfBlock {
+  return node instanceof TmplAstIfBlock;
+}
+
+export function isTmplAstSwitchBlock(
+  node: unknown,
+): node is TmplAstSwitchBlock {
+  return node instanceof TmplAstSwitchBlock;
+}
+
+function isNotNull<T>(input: T | null): input is T {
+  return input !== null;
+}
+
+/**
+ * Returns children nodes of the given node if it's a block node.
+ */
+export function getChildrendNodesIfBlock(node: TmplAstNode): TmplAstNode[] {
+  if (isTmplAstIfBlock(node)) {
+    return node.branches;
+  }
+
+  if (isTmplAstForLoopBlock(node)) {
+    return [...node.children, ...[node.empty].filter(isNotNull)];
+  }
+
+  if (isTmplAstDeferredBlock(node)) {
+    return [
+      ...node.children,
+      ...[node.loading, node.error, node.placeholder].filter(isNotNull),
+    ];
+  }
+
+  if (isTmplAstSwitchBlock(node)) {
+    return node.cases;
+  }
+
+  if (isBlockWithChildren(node)) {
+    return node.children;
+  }
+
+  return [];
+}