How to write a passthrough wrapper component?

[segevfiner]

Due to microsoft/playwright#23435 & microsoft/playwright#23526, and tests that would be difficult doing with just Vitest/JSDOM. I'm trying to write a wrapper passthrough wrapper component to wrap the problem properties that I need to pass along.

<script setup lang="ts">
import { TestServices } from '@/mocks/TestServices';
import Foo from '../../Foo.vue';

const services = new TestServices();

/* TODO Is there a better way to type a wrapper component so it's props and emits are forwarded correctly? */
// defineProps(Foo.props);
// defineEmits(Foo.emits as string[]);
</script>

<template>
  <Foo
    v-bind="($attrs as any)"
    :services="services"
  />
</template>

But then that component doesn't have any types for it's props or emits, trying to define the props or emits as shown leads to props not being included in $attrs and the same for the event handlers which don't seem to be accessible anymore.

What's the proper way to write such a component without manually forwarding each prop and event by name?

[chenxch]

I don't know if provide/inject can solve your problem.

[rudyxu1102]

See vuejs/rfcs#477. Discussion is welcome.