Fix: Multiple Self-closing hooks that directly follow each other are now correctly parsed

Author: MTobisch

CHANGELOG.md

@@ -4,6 +4,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+## [3.1.2] - 2025-02-25
+### Maintenance
+- Fix: Multiple Self-closing hooks that directly follow each other are now correctly parsed
+
 ## [3.1.1] - 2024-10-28
 ### Maintenance
 - Fix: HookValue.elementSnapshot now contains a deep clone of the found element
@@ -153,7 +157,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Added
 - This was the initial release, so everything was added here, really.
 
-[Unreleased]: https://github.com/Angular-Dynamic-Hooks/ngx-dynamic-hooks/compare/v3.1.1...HEAD
+[Unreleased]: https://github.com/Angular-Dynamic-Hooks/ngx-dynamic-hooks/compare/v3.1.2...HEAD
+[3.1.2]: https://github.com/Angular-Dynamic-Hooks/ngx-dynamic-hooks/compare/v3.1.1...v3.1.2
 [3.1.1]: https://github.com/Angular-Dynamic-Hooks/ngx-dynamic-hooks/compare/v3.1.0...v3.1.1
 [3.1.0]: https://github.com/Angular-Dynamic-Hooks/ngx-dynamic-hooks/compare/v3.0.4...v3.1.0
 [3.0.4]: https://github.com/Angular-Dynamic-Hooks/ngx-dynamic-hooks/compare/v3.0.3...v3.0.4

projects/ngx-dynamic-hooks/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-dynamic-hooks",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "description": "Automatically insert live Angular components into a dynamic string of content (based on their selector or any pattern of your choice) and render the result in the DOM.",
   "person": "Marvin Tobisch <[email protected]>",
   "license": "MIT",

projects/ngx-dynamic-hooks/src/lib/services/core/textHookFinder.ts

@@ -258,8 +258,15 @@ export class TextHookFinder {
       }
     }
 
-    // Actually replace hooks with anchors (from the back, so no need to change indexes)
-    selectorReplaceInstructions.sort((a, b) => b.startIndex - a.startIndex);
+    // Finally replace hooks with anchors
+    // Process in backwards order, so no need to change indexes.
+    // Primarily sort by startIndex. If multiple startIndexes are identical (possible with a follow-up hook to a self-closing hook), secondarily sort by endIndex.
+    selectorReplaceInstructions.sort((a, b) => {
+      let sortResult = b.startIndex - a.startIndex;
+      if (sortResult === 0) sortResult = b.endIndex - a.endIndex;
+      return sortResult;
+    });
+
     for (const selectorReplaceInstruction of selectorReplaceInstructions) {
       const textBeforeSelector = content.substring(0, selectorReplaceInstruction.startIndex);
       const textAfterSelector = content.substring(selectorReplaceInstruction.endIndex);

projects/ngx-dynamic-hooks/src/tests/integration/selectorHookParser/selectorHookParserConfig.spec.ts

@@ -383,6 +383,35 @@ describe('SelectorHookParserConfig', () => {
     expect(comp.hookIndex[1].componentRef!.instance.simpleArray).toEqual(['arial', 'calibri']);
   });
 
+  it('#should correctly parse multiple self-closing hooks directly after one another', () => {
+    ({fixture, comp} = prepareTestingModule(() => [
+      provideDynamicHooks({
+        parsers: [{
+          component: MultiTagTestComponent,
+          allowSelfClosing: true,
+          parseWithRegex: true
+        }]
+      })
+    ]));
+
+    const testText = `<p>Some initial text.<multitagtest [simpleArray]="['arial', 'calibri']"/><multitagtest [numberProp]="68135"/>. Some trailing text.</p>`;
+    comp.content = testText;
+    comp.ngOnChanges({content: true} as any);
+
+    expect(fixture.nativeElement.children[0].childNodes[0].textContent).toContain('Some initial text.');
+    expect(fixture.nativeElement.children[0].childNodes[1].tagName).toBe('MULTITAGTEST');
+    expect(fixture.nativeElement.children[0].childNodes[1].querySelector('.multitag-component')).not.toBe(null);
+    expect(fixture.nativeElement.children[0].childNodes[1].querySelector('.multitag-component').innerHTML.trim()).toBe('');
+    expect(fixture.nativeElement.children[0].childNodes[2].tagName).toBe('MULTITAGTEST');
+    expect(fixture.nativeElement.children[0].childNodes[2].querySelector('.multitag-component')).not.toBe(null);
+    expect(fixture.nativeElement.children[0].childNodes[2].querySelector('.multitag-component').innerHTML.trim()).toBe('');
+    expect(fixture.nativeElement.children[0].childNodes[3].textContent).toContain('. Some trailing text.');
+    expect(Object.keys(comp.hookIndex).length).toBe(2);
+    expect(comp.hookIndex[1].componentRef!.instance.constructor.name).toBe('MultiTagTestComponent');
+    expect(comp.hookIndex[1].componentRef!.instance.simpleArray).toEqual(['arial', 'calibri']);
+    expect(comp.hookIndex[2].componentRef!.instance.numberProp).toBe(68135);
+  });
+
   it('#should disallow self-closing hooks, if requested', () => {
     ({fixture, comp} = prepareTestingModule(() => [
       provideDynamicHooks({