feat: add impure pipe for ordeting inputs, outputs, etc

Replaces keyvalue pipe with new keyvalueimpure pipe to ensure proper reordering update when their order changes dynamically. Users with custom templates need to update | keyvalue: to | keyvalueimpure: in their templates and import the new pipe

Author: Ni55aN

ng16/patch/module.ts

@@ -7,6 +7,7 @@ import { SocketComponent } from './presets/classic/components/socket/socket.comp
 import { ConnectionWrapperComponent } from './presets/classic/components/connection/connection-wrapper.component';
 import { ControlComponent } from './presets/classic/components/control/control.component';
 import { RefDirective } from './ref';
+import { ImpureKeyvaluePipe } from './shared/pipes/impure-keyvalue.pipe';
 
 @NgModule({
   declarations: [
@@ -15,7 +16,8 @@ import { RefDirective } from './ref';
     ConnectionComponent,
     ConnectionWrapperComponent,
     SocketComponent,
-    ControlComponent
+    ControlComponent,
+    ImpureKeyvaluePipe
   ],
   imports: [
     CommonModule
@@ -26,7 +28,8 @@ import { RefDirective } from './ref';
     ConnectionComponent,
     ConnectionWrapperComponent,
     SocketComponent,
-    ControlComponent
+    ControlComponent,
+    ImpureKeyvaluePipe
   ]
 })
 export class ReteModule { }

ng17/patch/module.ts

@@ -7,6 +7,7 @@ import { SocketComponent } from './presets/classic/components/socket/socket.comp
 import { ConnectionWrapperComponent } from './presets/classic/components/connection/connection-wrapper.component';
 import { ControlComponent } from './presets/classic/components/control/control.component';
 import { RefDirective } from './ref';
+import { ImpureKeyvaluePipe } from './shared/pipes/impure-keyvalue.pipe';
 
 @NgModule({
   declarations: [
@@ -15,7 +16,8 @@ import { RefDirective } from './ref';
     ConnectionComponent,
     ConnectionWrapperComponent,
     SocketComponent,
-    ControlComponent
+    ControlComponent,
+    ImpureKeyvaluePipe
   ],
   imports: [
     CommonModule
@@ -26,7 +28,8 @@ import { RefDirective } from './ref';
     ConnectionComponent,
     ConnectionWrapperComponent,
     SocketComponent,
-    ControlComponent
+    ControlComponent,
+    ImpureKeyvaluePipe
   ]
 })
 export class ReteModule { }

ng18/patch/module.ts

@@ -7,6 +7,7 @@ import { SocketComponent } from './presets/classic/components/socket/socket.comp
 import { ConnectionWrapperComponent } from './presets/classic/components/connection/connection-wrapper.component';
 import { ControlComponent } from './presets/classic/components/control/control.component';
 import { RefDirective } from './ref';
+import { ImpureKeyvaluePipe } from './shared/pipes/impure-keyvalue.pipe';
 
 @NgModule({
   declarations: [
@@ -15,7 +16,8 @@ import { RefDirective } from './ref';
     ConnectionComponent,
     ConnectionWrapperComponent,
     SocketComponent,
-    ControlComponent
+    ControlComponent,
+    ImpureKeyvaluePipe
   ],
   imports: [
     CommonModule
@@ -26,7 +28,8 @@ import { RefDirective } from './ref';
     ConnectionComponent,
     ConnectionWrapperComponent,
     SocketComponent,
-    ControlComponent
+    ControlComponent,
+    ImpureKeyvaluePipe
   ]
 })
 export class ReteModule { }

ng19/patch/presets/classic/components/node/.node.component.ts

@@ -1,5 +1,6 @@
 // [imports]
 import { CommonModule } from '@angular/common';
 import { RefDirective } from '../../../../ref';
+import { ImpureKeyvaluePipe } from '../../../../shared/pipes/impure-keyvalue.pipe';
 // [component-directive]
-imports: [CommonModule, RefDirective],
+imports: [CommonModule, RefDirective, ImpureKeyvaluePipe],

ng20/patch/presets/classic/components/node/.node.component.ts

@@ -1,5 +1,6 @@
 // [imports]
 import { CommonModule } from '@angular/common';
 import { RefDirective } from '../../../../ref';
+import { ImpureKeyvaluePipe } from '../../../../shared/pipes/impure-keyvalue.pipe';
 // [component-directive]
-imports: [CommonModule, RefDirective],
+imports: [CommonModule, RefDirective, ImpureKeyvaluePipe],

src/index.ts

@@ -10,5 +10,6 @@ export * from './presets/classic/components'
 export * from './presets/context-menu/components'
 export * from './presets/minimap/components'
 export * from './presets/reroute/components'
+export * from './shared/pipes'
 export * from './ref'
 export * from './core'

src/module.ts

@@ -7,6 +7,7 @@ import { SocketComponent } from './presets/classic/components/socket/socket.comp
 import { ConnectionWrapperComponent } from './presets/classic/components/connection/connection-wrapper.component';
 import { ControlComponent } from './presets/classic/components/control/control.component';
 import { RefDirective } from './ref';
+import { ImpureKeyvaluePipe } from './shared/pipes/impure-keyvalue.pipe';
 
 @NgModule({
   declarations: [
@@ -15,7 +16,8 @@ import { RefDirective } from './ref';
     ConnectionComponent,
     ConnectionWrapperComponent,
     SocketComponent,
-    ControlComponent
+    ControlComponent,
+    ImpureKeyvaluePipe
   ],
   imports: [
     CommonModule
@@ -26,7 +28,8 @@ import { RefDirective } from './ref';
     ConnectionComponent,
     ConnectionWrapperComponent,
     SocketComponent,
-    ControlComponent
+    ControlComponent,
+    ImpureKeyvaluePipe
   ],
   entryComponents: [
     NodeComponent,

src/presets/classic/components/node/node.component.html

@@ -1,5 +1,5 @@
 <div class="title" data-testid="title">{{data.label}}</div>
-<div class="output" *ngFor="let output of data.outputs | keyvalue: sortByIndex" [attr.data-testid]="'output-'+output.key">
+<div class="output" *ngFor="let output of data.outputs | keyvalueimpure: sortByIndex" [attr.data-testid]="'output-'+output.key">
     <div class="output-title" data-testid="output-title">{{output.value?.label}}</div>
     <div
         class="output-socket"
@@ -11,13 +11,13 @@
 </div>
 <div
     class="control"
-    *ngFor="let control of data.controls | keyvalue: sortByIndex"
+    *ngFor="let control of data.controls | keyvalueimpure: sortByIndex"
     refComponent
     [data]="{type: 'control', payload: control.value }"
     [emit]="emit"
     [attr.data-testid]="'control-'+control.key"
 ></div>
-<div class="input" *ngFor="let input of data.inputs | keyvalue: sortByIndex" [attr.data-testid]="'input-'+input.key">
+<div class="input" *ngFor="let input of data.inputs | keyvalueimpure: sortByIndex" [attr.data-testid]="'input-'+input.key">
     <div
         class="input-socket"
         refComponent

src/shared/index.ts

@@ -0,0 +1,2 @@
+export * from './drag';
+export * from './pipes';

src/shared/pipes/impure-keyvalue.pipe.ts

@@ -0,0 +1,22 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'keyvalueimpure',
+  pure: false
+})
+export class ImpureKeyvaluePipe implements PipeTransform {
+
+  transform(value: {[key: string]: any} | null | undefined, compareFn?: (a: any, b: any) => number): Array<{key: string, value: any}> {
+    if (!value || typeof value !== 'object') {
+      return [];
+    }
+
+    const result = Object.entries(value).map(([key, val]) => ({key, value: val}));
+
+    if (compareFn) {
+      result.sort(compareFn);
+    }
+
+    return result;
+  }
+}