[TSX/JSX with Vuejs3.x]How to allow html properties on custom component in tsx?

[mazhewei]

minimal step:

1. use pnpm create vue@latestto create a vuejs project.
   choose: TypeScript / JSX support / Vue Router / Pinia / ESLint.
   dependencies in package.json:

  "dependencies": {
    "pinia": "^2.1.7",
    "vue": "^3.4.29",
    "vue-router": "^4.3.3"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.8.0",
    "@tsconfig/node20": "^20.1.4",
    "@types/node": "^20.14.5",
    "@vitejs/plugin-vue": "^5.0.5",
    "@vitejs/plugin-vue-jsx": "^4.0.0",
    "@vue/eslint-config-typescript": "^13.0.0",
    "@vue/tsconfig": "^0.5.1",
    "eslint": "^8.57.0",
    "eslint-plugin-vue": "^9.23.0",
    "npm-run-all2": "^6.2.0",
    "typescript": "~5.4.0",
    "vite": "^5.3.1",
    "vue-tsc": "^2.0.21"
  }

2. create a component using tsx
   for example: src/component/RenderComponent.ts

import { defineComponent } from "vue"
import type { PropType, VNodeChild } from 'vue'

export default defineComponent({
  name: 'RenderComponent',
  inheritAttrs: false,
  props: {
    render: {
      type: Function as PropType<() => VNodeChild>,
      required: true
    }
  },
  setup(props, _ctx) {
    return props.render
  },
})

3. Go to App.vue template, instead of using template, use tsx

• change script lang from ts to tsx.
• remove HelloWorld component in template.
• import RenderComponent: import RenderComponent from './components/RenderComponent'
• add render function
• add RenderComponent into template

<script setup lang="tsx">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import RenderComponent from './components/RenderComponent'

function render(){
  return (
    <HelloWorld title="this is hello world" msg="You did it!"></HelloWorld>
  )
}
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
    <div class="wrapper">
      <RenderComponent :render="render"></RenderComponent>
      <!-- <HelloWorld msg="You did it!" /> -->
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

<!-- style ignored -->

4. as you can see, vue work well, and move mouse pointer to You did it, html property title affect
   
5. but ts will report a error

Property 'title' does not exist on type 'IntrinsicAttributes & Partial<{}> & Omit<{ readonly msg: string; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<...>, never>'.ts-plugin(2322)

I have searched for a long time and found no perfect solution.

A possible solution is modify env.d.ts file, to let ts known title properties is allow.

/// <reference types="vite/client" />

export { };

declare module 'vue' {
  interface ComponentCustomProps {
    title?: string
  }
}

it works. But when a component do have a props named title, something wrong again.

change HelloWorld component, add a props named title:

<script setup lang="ts">
defineProps<{
  msg: string
  // let's say title can be a function return string.
  title: () => string
}>()
</script>

this time, can not pass a funtion to props.

does anyone know how to implement:
if component define props, defined props first.
if component not define props, and global custom props define, global custom props first.
if none of them defined, allow html properties like title/onClick etc.

relevant issue: #1077

[mazhewei]

PS. minimal step is just a steps to reproduce, I'm using NaiveUI, it use jsx, so i have to use jsx.
relevant issue: #4258