Registering Components for Type-Checking?

[patakihara]

What's the proper way to register the UI5 Web Components for type-checking in Vue.js when using typescript? I can't find any documentation on the best approach here.

[pskelin]

Since the release of web components 2.6 there is still experimental and private property on every component class called _jsxProps.

This exposes the types of the properties and event handler and can be used to create a function that exposes web components as vue functional components with the correct typing. Here is a full example:

<script setup lang="ts">
import "./scoping-config.js";
import ButtonWC from "@ui5/webcomponents/dist/Button.js";
import TokenWC from "@ui5/webcomponents/dist/Token.js";
import { h, ref } from "vue";
import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
import type { UI5CustomEvent } from "@ui5/webcomponents-base/dist/index.js";
const submits = ref(false);

function createWrapper<T extends typeof UI5Element>(Klass: T) {
  const tagName = Klass.getMetadata().getTag();
  return function FComponent(
    props: Omit<InstanceType<T>["_jsxProps"], "ref">,
    { slots }: {slots: any}
  ) {
    return (
      h(tagName, props, slots.default && slots.default())
    )
  }
}

const Button = createWrapper(ButtonWC);
const Token = createWrapper(TokenWC);
function handleDelete(e: UI5CustomEvent<TokenWC, "delete">) {
  console.log("delete", e.detail?.backSpace);
}
</script>

<template>
    <Button design="Negative" icon="account" :submits="submits">Alabala</Button>
    <Token text="alabala" :selected="true" @delete="handleDelete"></Token>
</template>

The heart is the createWrapper function, and it can be used like this:

const Button = createWrapper(ButtonWC);

This is still not documented because we want to gather feedback, so please provide any thoughts or issues after you give it a try.