fix: input and output signals are listed in properties

sonallux · sonallux · commit b07571e1b621 · 2025-02-04T21:50:13.000+01:00
diff --git a/src/app/compiler/angular-dependencies.ts b/src/app/compiler/angular-dependencies.ts
@@ -252,20 +252,14 @@ export class AngularDependencies extends FrameworkDependencies {
         if (IO.constructor && !Configuration.mainData.disableConstructors) {
             deps.constructorObj = IO.constructor;
         }
-        if (IO.inputs) {
-            deps.inputsClass = IO.inputs;
-        }
-        if (IO.outputs) {
-            deps.outputsClass = IO.outputs;
-        }
+        deps.inputsClass = IO.inputs ?? [];
+        deps.outputsClass = IO.outputs ?? [];
         if (IO.properties) {
-            deps.properties = IO.properties;
-            deps.inputsClass = deps.inputsClass
-                ? deps.inputsClass.concat(this.componentHelper.getInputSignals(IO.properties))
-                : this.componentHelper.getInputSignals(IO.properties);
-            deps.outputsClass = deps.outputsClass
-                ? deps.outputsClass.concat(this.componentHelper.getOutputSignals(IO.properties))
-                : this.componentHelper.getOutputSignals(IO.properties);
+            const {inputSignals, outputSignals, properties} = this.componentHelper.getInputOutputSignals(IO.properties);
+
+            deps.inputsClass = deps.inputsClass.concat(inputSignals)
+            deps.outputsClass = deps.outputsClass.concat(outputSignals)
+            deps.propertiesClass = properties;
         }
         if (IO.description) {
             deps.description = IO.description;
diff --git a/src/app/compiler/angular/deps/component-dep.factory.ts b/src/app/compiler/angular/deps/component-dep.factory.ts
@@ -89,12 +89,11 @@ export class ComponentDepFactory {
             componentDep.accessors = IO.accessors;
         }
         if (IO.properties) {
-            componentDep.inputsClass = componentDep.inputsClass.concat(
-                this.helper.getInputSignals(IO.properties)
-            );
-            componentDep.outputsClass = componentDep.outputsClass.concat(
-                this.helper.getOutputSignals(IO.properties)
-            );
+            const {inputSignals, outputSignals, properties} = this.helper.getInputOutputSignals(IO.properties);
+
+            componentDep.inputsClass = componentDep.inputsClass.concat(inputSignals)
+            componentDep.outputsClass = componentDep.outputsClass.concat(outputSignals)
+            componentDep.propertiesClass = properties;
         }
 
         return componentDep;
diff --git a/src/app/compiler/angular/deps/directive-dep.factory.ts b/src/app/compiler/angular/deps/directive-dep.factory.ts
@@ -26,8 +26,8 @@ export class DirectiveDepFactory {
 
             standalone: this.helper.getComponentStandalone(props, srcFile) ? true : false,
 
-            inputsClass: this.helper.getInputSignals(IO.properties).concat(IO.inputs),
-            outputsClass: this.helper.getOutputSignals(IO.properties).concat(IO.outputs),
+            inputsClass: IO.inputs,
+            outputsClass: IO.outputs,
 
             deprecated: IO.deprecated,
             deprecationMessage: IO.deprecationMessage,
@@ -58,6 +58,13 @@ export class DirectiveDepFactory {
         if (IO.accessors) {
             directiveDeps.accessors = IO.accessors;
         }
+        if (IO.properties) {
+            const {inputSignals, outputSignals, properties} = this.helper.getInputOutputSignals(IO.properties);
+
+            directiveDeps.inputsClass = directiveDeps.inputsClass.concat(inputSignals)
+            directiveDeps.outputsClass = directiveDeps.outputsClass.concat(outputSignals)
+            directiveDeps.propertiesClass = properties;
+        }
         return directiveDeps;
     }
 }
diff --git a/src/app/compiler/angular/deps/helpers/component-helper.ts b/src/app/compiler/angular/deps/helpers/component-helper.ts
@@ -135,42 +135,58 @@ export class ComponentHelper {
         return this.symbolHelper.getSymbolDeps(props, 'inputs', srcFile);
     }
 
-    public getInputSignals(props) {
+    public getInputOutputSignals(props) {
         const inputSignals = [];
-        props?.forEach(prop => {
-            const config =
-                this.getSignalConfig('input', prop.defaultValue) ??
-                this.getSignalConfig('model', prop.defaultValue);
-
-            if (config) {
-                const newInput = {
-                    ...prop,
-                    ...config
-                };
+        const outputSignals = [];
+        const properties = [];
 
-                inputSignals.push(newInput);
+        props.forEach(prop => {
+            const inputSignal = this.getInputSignal(prop);
+            if (inputSignal) {
+                inputSignals.push(inputSignal)
             }
-        });
-        return inputSignals;
-    }
 
-    public getOutputSignals(props) {
-        const outputSignals = [];
-        props?.forEach(prop => {
-            const config =
-                this.getSignalConfig('output', prop.defaultValue) ??
-                this.getSignalConfig('model', prop.defaultValue);
-
-            if (config) {
-                const newInput = {
-                    ...prop,
-                    ...config
-                };
+            const outputSignal = this.getOutputSignal(prop);
+            if (outputSignal) {
+                outputSignals.push(outputSignal)
+            }
 
-                outputSignals.push(newInput);
+            if (!inputSignal && !outputSignal) {
+                properties.push(prop)
             }
         });
-        return outputSignals;
+
+        return {inputSignals, outputSignals, properties}
+    }
+
+    public getInputSignal(prop) {
+        const config =
+            this.getSignalConfig('input', prop.defaultValue) ??
+            this.getSignalConfig('model', prop.defaultValue);
+
+        if (config) {
+            return  {
+                ...prop,
+                ...config
+            };
+        }
+
+        return undefined;
+    }
+
+    public getOutputSignal(prop) {
+        const config =
+            this.getSignalConfig('output', prop.defaultValue) ??
+            this.getSignalConfig('model', prop.defaultValue);
+
+        if (config) {
+            return  {
+                ...prop,
+                ...config
+            };
+        }
+
+        return undefined;
     }
 
     private getSignalConfig(type: 'input' | 'output' | 'model', defaultValue: string) {
diff --git a/test/fixtures/sample-files/foo.component.ts b/test/fixtures/sample-files/foo.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, input, Output, output } from '@angular/core';
+import { Component, EventEmitter, Input, input, Output, output, model } from '@angular/core';
 
 /**
  * FooComponent description
@@ -86,6 +86,11 @@ export class FooComponent {
      */
     public readonly aliasedOutputSignal = output(null, { alias: 'aliasedOutSignal' });
 
+    /**
+     * An example model input signal
+     */
+    public readonly modelInputSignal = model(0);
+
     /**
      * constructor description
      * @param  {boolean} myprop description
