Uncaught RangeError: Maximum call stack size exceeded when event handler call.

[jackchoumine]

Is the issue already present in https://github.com/cloudera/hue/issues or discussed in the forum https://discourse.gethue.com?

Describe the bug:

Uncaught RangeError: Maximum call stack size exceeded

Steps to reproduce it?

<template>
  <h1>{{ msg }}</h1>
  <p>count:{{ count }}</p>
  <button @click="add">+10</button>
</template>

<script lang="ts">
import { ref, defineComponent, SetupContext } from 'vue'
export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: {
      type: String,
      required: true,
    },
  },
  emits: ['plus'],
  setup(_, ctx: SetupContext) {
    const count = ref(0)
    function add() {
      count.value += 10
      ctx.emit('plus', count.value)
    }
    return { count, add }
  },
})
</script>

<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>

work well vue component :

<template>
  <div>
    <h1>home</h1>
  <!-- work well -->
    <HelloWorld msg="hello web component" @plus="change" />
    <!-- eslint-disable-next-line vue/attribute-hyphenation --> <!-- Maximum call stack size exceeded -->
    <web-hello-world msg="hello web component" onPlus="console.log('Value is :', event.detail);" />
  </div>
</template>
<script lang="ts" setup>
import HelloWorld from '../components/HelloWorld.vue'
function change(count: number) {
  console.log(count)
}
function change2(event: CustomEvent) {
  console.log(event)
}
</script>

in html

<web-hello-world msg="hello web component" />
<script type="module" src="/src/main.ts"></script>
<script>
  const hello = document.querySelector('web-hello-world')
  hello.addEventListener('plus', (event) => {
    console.log(event.detail)
  })
</script>

the problem exits.

Hue version or source? (e.g. open source 4.5, CDH 5.16, CDP 1.0...). System info (e.g. OS, Browser...).

my major deps:

"dependencies": {
    "vue": "^3.0.5",
    "vue3-webcomponent-wrapper": "^0.1.4"
  },
  "devDependencies": {
    "@typescript-eslint/parser": "^4.33.0",
    "@vitejs/plugin-vue": "^1.1.5",
    "@vue/compiler-sfc": "^3.0.5",
    "eslint-plugin-vue": "^7.19.1",
    "sass": "^1.18.0",
    "sass-loader": "^7.1.0",
    "typescript": "^4.1.3",
    "vite": "^2.1.0",
    "vue-tsc": "^0.0.8"
  }

vite config:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

const webComponent = {
  template: {
    compilerOptions: {
      // treat all tags with a dash as custom elements
      isCustomElement: (tag) => tag.includes('-'),
    },
  },
}
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(webComponent)],
})

[jackchoumine]

Is the issue already present in https://github.com/cloudera/hue/issues or discussed in the forum https://discourse.gethue.com?

Describe the bug:

Uncaught RangeError: Maximum call stack size exceeded

Steps to reproduce it?

<template>
  <h1>{{ msg }}</h1>
  <p>count:{{ count }}</p>
  <button @click="add">+10</button>
</template>

<script lang="ts">
import { ref, defineComponent, SetupContext } from 'vue'
export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: {
      type: String,
      required: true,
    },
  },
  emits: ['plus'],
  setup(_, ctx: SetupContext) {
    const count = ref(0)
    function add() {
      count.value += 10
      ctx.emit('plus', count.value)
    }
    return { count, add }
  },
})
</script>

<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>

work well vue component :

<template>
  <div>
    <h1>home</h1>
  <!-- work well -->
    <HelloWorld msg="hello web component" @plus="change" />
    <!-- eslint-disable-next-line vue/attribute-hyphenation --> <!-- Maximum call stack size exceeded -->
    <web-hello-world msg="hello web component" onPlus="console.log('Value is :', event.detail);" />
  </div>
</template>
<script lang="ts" setup>
import HelloWorld from '../components/HelloWorld.vue'
function change(count: number) {
  console.log(count)
}
function change2(event: CustomEvent) {
  console.log(event)
}
</script>

in html

<web-hello-world msg="hello web component" />
<script type="module" src="/src/main.ts"></script>
<script>
  const hello = document.querySelector('web-hello-world')
  hello.addEventListener('plus', (event) => {
    console.log(event.detail)
  })
</script>

the problem exits.

Hue version or source? (e.g. open source 4.5, CDH 5.16, CDP 1.0...). System info (e.g. OS, Browser...).

my major deps:

"dependencies": {
    "vue": "^3.0.5",
    "vue3-webcomponent-wrapper": "^0.1.4"
  },
  "devDependencies": {
    "@typescript-eslint/parser": "^4.33.0",
    "@vitejs/plugin-vue": "^1.1.5",
    "@vue/compiler-sfc": "^3.0.5",
    "eslint-plugin-vue": "^7.19.1",
    "sass": "^1.18.0",
    "sass-loader": "^7.1.0",
    "typescript": "^4.1.3",
    "vite": "^2.1.0",
    "vue-tsc": "^0.0.8"
  }

vite config:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

const webComponent = {
  template: {
    compilerOptions: {
      // treat all tags with a dash as custom elements
      isCustomElement: (tag) => tag.includes('-'),
    },
  },
}
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(webComponent)],
})

because i DONT use vue syntx in vue component.