feat(app): outputs signal supports

vogloblinsky · vogloblinsky · commit 2e36d956dba3 · 2024-03-18T17:25:49.000+01:00
fix #1443 fix #1439
diff --git a/src/app/compiler/angular-dependencies.ts b/src/app/compiler/angular-dependencies.ts
@@ -248,12 +248,20 @@ export class AngularDependencies extends FrameworkDependencies {
         if (IO.constructor && !Configuration.mainData.disableConstructors) {
             deps.constructorObj = IO.constructor;
         }
-       if (IO.inputs) {
+        if (IO.inputs) {
             deps.inputsClass = IO.inputs;
         }
+        if (IO.outputs) {
+            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.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);
         }
         if (IO.description) {
             deps.description = IO.description;
@@ -276,9 +284,7 @@ export class AngularDependencies extends FrameworkDependencies {
         if (IO.accessors) {
             deps.accessors = IO.accessors;
         }
-        if (IO.outputs) {
-            deps.outputsClass = IO.outputs;
-        }
+
         if (IO.hostBindings) {
             deps.hostBindings = IO.hostBindings;
         }
diff --git a/src/app/compiler/angular/deps/component-dep.factory.ts b/src/app/compiler/angular/deps/component-dep.factory.ts
@@ -89,7 +89,12 @@ export class ComponentDepFactory {
             componentDep.accessors = IO.accessors;
         }
         if (IO.properties) {
-            componentDep.inputsClass = componentDep.inputsClass.concat(this.helper.getInputSignals(IO.properties));
+            componentDep.inputsClass = componentDep.inputsClass.concat(
+                this.helper.getInputSignals(IO.properties)
+            );
+            componentDep.outputsClass = componentDep.outputsClass.concat(
+                this.helper.getOutputSignals(IO.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
@@ -27,7 +27,7 @@ export class DirectiveDepFactory {
             standalone: this.helper.getComponentStandalone(props, srcFile) ? true : false,
 
             inputsClass: this.helper.getInputSignals(IO.properties).concat(IO.inputs),
-            outputsClass: IO.outputs,
+            outputsClass: this.helper.getInputSignals(IO.properties).concat(IO.outputs),
 
             deprecated: IO.deprecated,
             deprecationMessage: IO.deprecationMessage,
diff --git a/src/app/compiler/angular/deps/helpers/component-helper.ts b/src/app/compiler/angular/deps/helpers/component-helper.ts
@@ -150,6 +150,21 @@ export class ComponentHelper {
         return inputSignals;
     }
 
+    public getOutputSignals(props) {
+        let outputSignals = [];
+        props?.forEach((prop, i) => {
+            const regexp = /output(?:\.(required))?(?:<([\w-]+)>)?\(([\w-]+)?\)/;
+            const res = regexp.exec(prop.defaultValue);
+            if (res) {
+                const newOutput = prop;
+                newOutput.defaultValue = res[res.length - 1];
+                newOutput.required = res[0]?.includes('.required') ?? false;
+                outputSignals.push(newOutput);
+            }
+        });
+        return outputSignals;
+    }
+
     public getComponentStandalone(
         props: ReadonlyArray<ts.ObjectLiteralElementLike>,
         srcFile: ts.SourceFile
diff --git a/test/fixtures/todomvc-ng2/src/app/shared/components/dumb-parent-component.ts b/test/fixtures/todomvc-ng2/src/app/shared/components/dumb-parent-component.ts
@@ -1,13 +1,17 @@
-import { Input, Output, HostBinding, HostListener } from '@angular/core';
+import { Input, Output, output, input } from '@angular/core';
 
 /**
  * Empty parent component for inheritance demo
  */
 export class DumbParentComponent {
     @Input() public parentInput: string;
 
+    label = input.required<string>();
+
     @Output() public parentoutput;
 
+    currentChange = output<number>();
+
     public parentProperty;
 
     /**
diff --git a/test/src/cli/cli-generation-big-app.spec.ts b/test/src/cli/cli-generation-big-app.spec.ts
@@ -973,4 +973,10 @@ describe('CLI simple generation - big app', () => {
         );
         expect(file).to.contain('<div><i>&nbsp;Inputs</i> : color&nbsp;</div>');
     });
+
+    it('should support inputs and outputs signals', () => {
+        const file = read(distFolder + '/classes/DumbParentComponent.html');
+        expect(file).to.contain('<a href="#label" >label</a>');
+        expect(file).to.contain('<a href="#currentChange" >currentChange</a>');
+    });
 });

Original file line number	Diff line number	Diff line change
`@@ -89,7 +89,12 @@ export class ComponentDepFactory {`
`89`	`89`	`componentDep.accessors = IO.accessors;`
`90`	`90`	`}`
`91`	`91`	`if (IO.properties) {`
`92`		`- componentDep.inputsClass = componentDep.inputsClass.concat(this.helper.getInputSignals(IO.properties));`
	`92`	`+ componentDep.inputsClass = componentDep.inputsClass.concat(`
	`93`	`+ this.helper.getInputSignals(IO.properties)`
	`94`	`+ );`
	`95`	`+ componentDep.outputsClass = componentDep.outputsClass.concat(`
	`96`	`+ this.helper.getOutputSignals(IO.properties)`
	`97`	`+ );`
`93`	`98`	`}`
`94`	`99`
`95`	`100`	`return componentDep;`