#Stencil-Vue wrapper with JSX

1 messages · Page 1 of 1 (latest)

abstract spruce
#

Hello 👋

We recently configured our Stencil components library to deliver a Vue.js wrapper. Everything works as expected when using Vue templates:

<script setup lang="ts">
import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router'
import type { BqTabGroupCustomEvent } from 'stencil-components'

const route = useRoute();
const router = useRouter()

const onTabChange = (e: BqTabGroupCustomEvent<{ target: HTMLBqTabElement }>) => {
  const activeTab = e.detail.target
  router.push({ path: activeTab.controls })
}
</script>
<template>
  <bq-tab-group @bqChange="onTabChange" :value="route.name">
    <RouterLink to="/" v-slot="{ navigate, isExactActive }" custom>
      <bq-tab tab-id="home" controls="/" @bqClick="navigate" :active="isExactActive">
        Home
      </bq-tab>
    </RouterLink>
    ...
  </bq-tab-group>
</template>

However, if we use our components with Vue and JSX, we notice that the custom events are not emitted.

<script lang="tsx">
export default defineComponent({
  name: 'App',
  setup() {
    const router = useRouter()
    const route = useRoute()

    return { router, route }
  },
  render() {
    return (
      <div class="wrapper">
        <HelloWorld msg="You did it!" />

        <BqTabGroup>
          <RouterLink to="/about" custom>
            <BqTab onBqClick={() => this.router.push('/')} tabId="home" controls="/">
              Home
            </BqTab>
          </RouterLink>
          <RouterLink to="/about" custom>
            <BqTab tabId="about" controls="/about">
              About
            </BqTab>
          </RouterLink>
        </BqTabGroup>
      </div>
    )
  }
})
<script>

Does anyone have an idea why? Thank you 🙏 so much in advance.

#

I don't know if the stencil vue output target makes the components work with Vue and JSX, but FYI, when using JSX with Vue, the stencil components render as expected.

lucid sorrel
#

hm traditionally, vue was bad at dealing with camelCase event handling - so I'm more surprised the template example works tbh 😄

abstract spruce
#

Well, for me works with camelCase while kebab case doesn't when using the Vue template approach. I followed the Stencil Vue documentation to set the wrapper and did nothing special:
https://github.com/Endava/BEEQ/blob/main/packages/beeq/stencil.config.ts#L71
https://github.com/Endava/BEEQ/tree/main/packages/beeq-vue

When the vue output target compiles, I get something like:

export const BqTab = /*@__PURE__*/ defineContainer<JSX.BqTab>('bq-tab', undefined, [
  'active',
  'disabled',
  'size',
  'tabId',
  'controls',
  'bqClick',
  'bqFocus',
  'bqBlur',
  'bqKeyDown'
]);
lucid sorrel
abstract spruce
#

But if I'm getting it working right with camelCase (you can check it out here) do I still need to go kebab?
Sorry @lucid sorrel if it sounds like a newbie question 😕

lucid sorrel
#

I’m not 100% sure. I noticed in your template example, you’re not using the proxied flavour of your component, but in the jsx version you are - what happens if they are the same?

abstract spruce
#

Do you mean if I use in JSX the component as:

<BqTab bqClick={...}

instead of

<BqTab onBqClick={...}

?

Yeh, I tried but it doesn't work either, and TS complained about it 😢

lucid sorrel
#

sorry - no, I meant in your template example you do this:

<bq-tab-group @bqChange="onTabChange" :value="route.name">

(no proxy being used - just native custom element)

#

in the jsx example you showed this:

<BqTab onBqClick={() => this.router.push('/')} tabId="home" controls="/">

(proxy / vue wrapped component being used)

#

I'm wondering what would happen if

  1. you use the proxy / vue component in a <template>
  2. you use the 'pure' custom element in the jsx
    ?
abstract spruce
#

Yep, you were right, when using the proxy/vue component in a <template> the custom events do not work.

<script setup lang="ts">
import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router'
import { BqTabGroup } from "@bee-q/vue";
import type { BqTabGroupCustomEvent } from 'stencil-components'
...
const onTabChange = (e: BqTabGroupCustomEvent<{ target: HTMLBqTabElement }>) => {
  const activeTab = e.detail.target
}
</script>
<template>
  <BqTabGroup @bq-change="onTabChange" :value="route.name">
    ...
  </BqTabGroup>
</template>

do not work either with @bcChange.

lucid sorrel
abstract spruce
#

Yes, two-way bindings with v-model work as expected with the vanilla components, e.g:

<script setup lang="ts">
import { ref } from 'vue'

const name = ref('John Doe');
</script>

<template>
  <bq-input
    name="name"
    placeholder="Please type your name..."
    v-model="name"
    @bqClear="name = ''"
  >
    <label slot="label">Your name</label>
    <bq-icon name="user" slot="prefix"></bq-icon>
  </bq-input>
</template>