From 74d0deb23cd7cac3ac91dec0746c9373e748228f Mon Sep 17 00:00:00 2001
From: Sebastian Weiss <7667003+bastiW@users.noreply.github.com>
Date: Thu, 26 Sep 2024 21:10:14 +0200
Subject: [PATCH] fix event emitters

---
 packages/core/src/generators/angular/index.ts | 26 +++++++++++++++----
 packages/core/src/generators/react/blocks.ts  |  2 +-
 .../src/helpers/strip-state-and-props-refs.ts |  5 ++--
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/packages/core/src/generators/angular/index.ts b/packages/core/src/generators/angular/index.ts
index 7d95f85b22..21b991459e 100644
--- a/packages/core/src/generators/angular/index.ts
+++ b/packages/core/src/generators/angular/index.ts
@@ -239,6 +239,22 @@ const stringifyBinding =
     }
   };
 
+export const replaceOutputEmits = (code?: string, outputEventEmitters?: string[]): string => {
+  let newCode = code || '';
+
+  if (!outputEventEmitters?.length) {
+    return newCode;
+  }
+
+  outputEventEmitters?.forEach((_var) => {
+    const regexp = '(^|\\s|;|\\()(props\\.?)' + _var + '\\(';
+    const replacer = '$1this.' + removeOnFromAngularOutputEvent(_var) + '.emit(';
+    newCode = newCode.replace(new RegExp(regexp, 'g'), replacer);
+  });
+
+  return newCode;
+};
+
 const handleNgOutletBindings = (node: MitosisNode, options: ToAngularOptions) => {
   let allProps = '';
   for (const key in node.properties) {
@@ -558,9 +574,9 @@ const processAngularCode =
       DO_NOT_USE_VARS_TRANSFORMS(code, {
         contextVars,
         domRefs,
-        outputVars,
         stateVars,
       }),
+      (newCode) => replaceOutputEmits(newCode, outputVars),
       (newCode) => stripStateAndPropsRefs(newCode, { replaceWith }),
     );
 
@@ -869,11 +885,11 @@ export const componentToAngular: TranspilerGenerator<ToAngularOptions> =
       props.delete(variableName);
     });
 
-    const outputs = outputVars.map((outputName) => {
+    // Building the @Output() EventEmitters
+    const outputEvents = outputVars.map((outputName) => {
       if (options?.experimental?.outputs) {
         return options?.experimental?.outputs(json, outputName);
       }
-
       return `@Output() ${removeOnFromAngularOutputEvent(outputName)} = new EventEmitter()`;
     });
 
@@ -997,7 +1013,7 @@ export const componentToAngular: TranspilerGenerator<ToAngularOptions> =
       Boolean(injectables.length) || dynamicComponents.size || refsForObjSpread.size;
 
     const angularCoreImports = [
-      ...(outputs.length ? ['Output', 'EventEmitter'] : []),
+      ...(outputEvents.length ? ['Output', 'EventEmitter'] : []),
       ...(options?.experimental?.inject ? ['Inject', 'forwardRef'] : []),
       'Component',
       ...(domRefs.size || dynamicComponents.size || refsForObjSpread.size
@@ -1046,7 +1062,7 @@ export const componentToAngular: TranspilerGenerator<ToAngularOptions> =
         })
         .join('\n')}
 
-      ${outputs.join('\n')}
+      ${outputEvents.join('\n')}
 
       ${Array.from(domRefs)
         .map(
diff --git a/packages/core/src/generators/react/blocks.ts b/packages/core/src/generators/react/blocks.ts
index e31205a0ac..9dd8471f85 100644
--- a/packages/core/src/generators/react/blocks.ts
+++ b/packages/core/src/generators/react/blocks.ts
@@ -290,7 +290,7 @@ export const blockToReact = (
     if (json.bindings[key]?.type === 'spread') {
       str += ` {...(${value})} `;
     } else if (key.startsWith('on')) {
-      const { arguments: cusArgs = ['event'] } = json.bindings[key]!;
+      const { arguments: cusArgs = [] } = json.bindings[key]!;
       const eventName = options.type === 'native' ? NATIVE_EVENT_MAPPER[key] || key : key;
       str += ` ${eventName}={(${cusArgs.join(',')}) => ${updateStateSettersInCode(
         useBindingValue,
diff --git a/packages/core/src/helpers/strip-state-and-props-refs.ts b/packages/core/src/helpers/strip-state-and-props-refs.ts
index 4122f887fc..f831ddce0b 100644
--- a/packages/core/src/helpers/strip-state-and-props-refs.ts
+++ b/packages/core/src/helpers/strip-state-and-props-refs.ts
@@ -1,4 +1,3 @@
-import { removeOnFromAngularOutputEvent } from '@/generators/angular';
 import { replacePropsIdentifier, replaceStateIdentifier } from './replace-identifiers';
 
 export type StripStateAndPropsRefsOptions = {
@@ -50,7 +49,7 @@ export type DO_NOT_USE_ARGS = {
  * Do not use these anywhere. We are migrating to AST transforms and should avoid Regex String.replace() as they are
  * very brittle.
  *
- * If you need to re-use a part of this, re-create it as an AST tranform first.
+ * If you need to re-use a part of this, re-create it as an AST transform first.
  */
 export const DO_NOT_USE_VARS_TRANSFORMS = (
   newCode: string,
@@ -61,7 +60,7 @@ export const DO_NOT_USE_VARS_TRANSFORMS = (
   outputVars?.forEach((_var) => {
     // determine expression edge cases onMessage( to this.onMessage.emit(
     const regexp = '(^|\\s|;|\\()(props\\.?)' + _var + '\\(';
-    const replacer = '$1' + context + removeOnFromAngularOutputEvent(_var) + '.emit(';
+    const replacer = '$1' + context + _var + '.emit(';
     newCode = newCode.replace(new RegExp(regexp, 'g'), replacer);
   });