fix: stencil events

.changeset/tidy-ravens-poke.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+[stencil]: Fix issue with `@Event` props not using [`EventEmitter`](https://stenciljs.com/docs/events#event-decorator)

e2e/e2e-app/output/vue/package.json

@@ -25,16 +25,15 @@
     "type-check": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "vue": "^3.2.37"
+    "vue": "^3.5.13"
   },
   "devDependencies": {
     "@builder.io/e2e-app": "workspace:*",
     "@types/node": "^16.11.47",
-    "@vitejs/plugin-vue": "^3.0.1",
-    "@vue/tsconfig": "^0.1.3",
+    "@vitejs/plugin-vue": "^5.2.0",
+    "@vue/tsconfig": "^0.7.0",
     "typescript": "^5.3.2",
-    "vite": "^3.2.2",
-    "vite-plugin-dts": "^1.5.0",
-    "vue-tsc": "^0.39.5"
+    "vite": "^6.2.1",
+    "vue-tsc": "^2.2.8"
   }
 }

e2e/e2e-app/output/vue/tsconfig.config.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "extends": "@vue/tsconfig/tsconfig.json",
   "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
   "compilerOptions": {
     "composite": true,

e2e/e2e-app/output/vue/tsconfig.json

@@ -1,12 +1,9 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "extends": "@vue/tsconfig/tsconfig.json",
   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
   "compilerOptions": {
     "noImplicitAny": false,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
+    "baseUrl": "."
   },
 
   "references": [

e2e/e2e-app/output/vue/vite.config.ts

@@ -1,16 +1,10 @@
 import vue from '@vitejs/plugin-vue';
 import { resolve } from 'path';
 import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-    vue(),
-    dts({ insertTypesEntry: true }),
-    // https://stackoverflow.com/a/72572426
-    // libCss(),
-  ],
+  plugins: [vue()],
   build: {
     lib: {
       entry: resolve(__dirname, 'src/index.ts'),

e2e/e2e-app/src/component-paths.ts

@@ -8,4 +8,5 @@ export const COMPONENT_PATHS = [
   '/signals/',
   '/disabled-input/',
   '/component-on-update/',
+  '/component-with-outside-types/',
 ];

e2e/e2e-app/src/components/component-with-types.lite.tsx → e2e/e2e-app/src/components/types/component-with-inside-types.lite.tsx

@@ -6,6 +6,6 @@ const DEFAULT_VALUES: Props = {
   name: 'Sami',
 };
 
-export default function ComponentWithTypes(props: Props) {
+export default function ComponentWithInsideTypes(props: Props) {
   return <div> Hello {props.name || DEFAULT_VALUES.name}</div>;
 }

e2e/e2e-app/src/components/types/component-with-outside-types.lite.tsx

@@ -0,0 +1,19 @@
+import { useStore } from '@builder.io/mitosis';
+import type { OutsideProps, OutsideState } from './data';
+
+export default function ComponentWithOutsideTypes(props: OutsideProps) {
+  const state = useStore<OutsideState>({
+    _text: undefined,
+    handleClick: () => {
+      if (props.onGetClicked) {
+        props.onGetClicked();
+      }
+      if (props.onEnter) {
+        props.onEnter();
+        state._text = 'After';
+      }
+    },
+  });
+
+  return <button onClick={() => state.handleClick()}>{state._text ?? props.text}</button>;
+}

e2e/e2e-app/src/components/types/data.ts

@@ -0,0 +1,14 @@
+export type OutsideProps = {
+  text: string;
+  onGetClicked?: () => void;
+  onEnter?: () => void;
+
+  // any type is a workaround for qwik
+  onGetClicked$?: any;
+  onEnter$?: any;
+};
+
+export type OutsideState = {
+  _text?: string;
+  handleClick: () => void;
+};

e2e/e2e-app/src/homepage.lite.tsx

@@ -1,18 +1,22 @@
 import { For, onMount, Show, useStore } from '@builder.io/mitosis';
 import { COMPONENT_PATHS } from './component-paths';
 import ComponentOnUpdate from './components/component-on-update.lite';
-import ComponentWithTypes from './components/component-with-types.lite';
 import DefaultProps from './components/default-props/use-default-props.lite';
 import DisabledInput from './components/disabled-input/disabled-input.lite';
 import NestedParent from './components/nested/nested-parent.lite';
 import OneComponent from './components/one-component.lite';
 import ShowForComponent from './components/show-for-component.lite';
 import SignalParent from './components/signals/signal-parent.lite';
 import SpecialTags from './components/special-tags.lite';
+import ComponentWithInsideTypes from './components/types/component-with-inside-types.lite';
+import ComponentWithOutsideTypes from './components/types/component-with-outside-types.lite';
 
 export default function Homepage(props: { pathname?: string }) {
   const state = useStore({
     pathToUse: '',
+    log: () => {
+      console.log('logging');
+    },
   });
 
   onMount(() => {
@@ -49,7 +53,7 @@ export default function Homepage(props: { pathname?: string }) {
       </Show>
 
       <Show when={state.pathToUse.startsWith('/types')}>
-        <ComponentWithTypes name="Lorem ipsum" />
+        <ComponentWithInsideTypes name="Lorem ipsum" />
       </Show>
 
       <Show when={state.pathToUse.startsWith('/show-for-component')}>
@@ -71,6 +75,14 @@ export default function Homepage(props: { pathname?: string }) {
       <Show when={state.pathToUse.startsWith('/component-on-update')}>
         <ComponentOnUpdate />
       </Show>
+
+      <Show when={state.pathToUse.startsWith('/component-with-outside-types')}>
+        <ComponentWithOutsideTypes
+          text="Before"
+          onGetClicked={() => state.log()}
+          onEnter={() => state.log()}
+        />
+      </Show>
     </div>
   );
 }

e2e/e2e-app/tests/main.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test as playwrightTest } from '@playwright/test';
+import { expect, Locator, test as playwrightTest } from '@playwright/test';
 import { PackageName } from '../src/testConfig';
 
 const test = playwrightTest.extend<{ packageName: PackageName | 'DEFAULT' }>({
@@ -133,4 +133,17 @@ test.describe('e2e', () => {
     const labelAfter = await container.getAttribute('aria-label');
     expect(labelAfter).toEqual('Label: 1');
   });
+
+  test('component with outside types', async ({ page, packageName }) => {
+    if (['e2e-qwik'].includes(packageName)) {
+      // Qwik: Events are not working as properties
+      test.skip();
+    }
+    await page.goto('/component-with-outside-types/');
+
+    const button: Locator = page.locator('button');
+    await expect(button).toContainText('Before');
+    await button.click();
+    await expect(button).toContainText('After');
+  });
 });

e2e/e2e-vue3/src/App.vue

@@ -2,14 +2,6 @@
 import { E2eApp } from '@e2e-app/vue/vue3';
 </script>
 
-<script>
-export default {
-  components: {
-    E2eApp,
-  },
-};
-</script>
-
 <template>
   <E2eApp></E2eApp>
 </template>

packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap

@@ -1975,6 +1975,26 @@ exports[`Alpine.js > jsx > Javascript Test > eventInputAndChange 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > eventProps 1`] = `
+"<button x-data=\\"eventPropsComponent()\\" x-on:click=\\"handleClick()\\">Test</button>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"eventPropsComponent\\", () => ({
+      handleClick() {
+        if (props.onGetVoid) {
+          props.onGetVoid();
+        }
+
+        if (props.onEnter) {
+          console.log(props.onEnter());
+        }
+      },
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Javascript Test > expressionState 1`] = `
 "<div x-data=\\"myComponent()\\"><span x-html=\\"refToUse\\"></span></div>
 <script>
@@ -5242,6 +5262,26 @@ exports[`Alpine.js > jsx > Typescript Test > eventInputAndChange 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > eventProps 1`] = `
+"<button x-data=\\"eventPropsComponent()\\" x-on:click=\\"handleClick()\\">Test</button>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"eventPropsComponent\\", () => ({
+      handleClick() {
+        if (props.onGetVoid) {
+          props.onGetVoid();
+        }
+
+        if (props.onEnter) {
+          console.log(props.onEnter());
+        }
+      },
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Typescript Test > expressionState 1`] = `
 "<div x-data=\\"myComponent()\\"><span x-html=\\"refToUse\\"></span></div>
 <script>

packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap

@@ -4750,6 +4750,49 @@ export class EventInputAndChangeModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > eventProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Output, EventEmitter, Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"event-props-component\\",
+  template: \`
+    <button (click)=\\"handleClick()\\">Test</button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class EventPropsComponent {
+  @Output() onGetVoid = new EventEmitter();
+  @Output() onEnter = new EventEmitter();
+
+  handleClick() {
+    if (this.onGetVoid) {
+      this.onGetVoid.emit();
+    }
+
+    if (this.onEnter) {
+      console.log(this.onEnter.emit());
+    }
+  }
+}
+
+@NgModule({
+  declarations: [EventPropsComponent],
+  imports: [CommonModule],
+  exports: [EventPropsComponent],
+})
+export class EventPropsComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > expressionState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -13086,6 +13129,51 @@ export class EventInputAndChangeModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > eventProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Output, EventEmitter, Component } from \\"@angular/core\\";
+
+import { EventProps, EventState } from \\"./event-props.type\\";
+
+@Component({
+  selector: \\"event-props-component\\",
+  template: \`
+    <button (click)=\\"handleClick()\\">Test</button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class EventPropsComponent {
+  @Output() onGetVoid = new EventEmitter();
+  @Output() onEnter = new EventEmitter();
+
+  handleClick(): ReturnType<EventState[\\"handleClick\\"]> {
+    if (this.onGetVoid) {
+      this.onGetVoid.emit();
+    }
+
+    if (this.onEnter) {
+      console.log(this.onEnter.emit());
+    }
+  }
+}
+
+@NgModule({
+  declarations: [EventPropsComponent],
+  imports: [CommonModule],
+  exports: [EventPropsComponent],
+})
+export class EventPropsComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > expressionState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";