Support multiple properties for JSX.ElementAttributesProperty

[zhiyuanzmj]

🔍 Search Terms

"multiple properties", "JSX", "ElementAttributesProperty"

✅ Viability Checklist

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• This isn't a request to add a new utility type: https://github.com/microsoft/TypeScript/wiki/No-New-Utility-Types
• This feature would agree with the rest of our Design Goals: https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals

⭐ Suggestion

After Vue 3.6, introduce a new Vapor component (Non Virtual DOM) created by defineVaporComponent, it has a props property for JSX.ElementAttributesProperty to detect props.

const VaporComp = defineVaporComponent(() => {
  props: { foo: Number },
  setup: () => {
    return <div />
  }
})

const instance = new VaporComp({ foo: 1 })
instance.props
//       ^^^^^

And Vue also provide a interop mode, so that Vapor Component and Virtual DOM Component can be used together.

But the Virtual DOM Component created by defineComponent has a $props property for JSX.ElementAttributesProperty to detect props.

const VirtualComp = defineComponent({
  props: { foo: Number },
  setup: () => {
    return () => <div />
  }
})
const instance = new VirtualComp({ foo: 1 })
instance.$props
//       ^^^^^^

📃 Motivating Example

Support Vapor Component and Virtual DOM co-usage for Vue.
Or React Class Component and Vue Component co-usage.

💻 Use Cases

1. What do you want to use this for?

• Supports define multiple properties for JSX.ElementAttributesProperty, so that Vapor Component (props) and Virtual DOM Component ($props) can used together.

  declare global {
    namespace JSX {
      interface ElementAttributesProperty { 
        $props;
        props;
      }
    }
  }

2. What shortcomings exist with current approaches?

• JSX.ElementAttributesProperty now only support define one property, if defined two perpoties will be expose a error.

3. What workarounds are you using in the meantime?

• None

This is implementation details: zhiyuanzmj@fcfbd3e

[DanielRosenwasser]

I guess if the types are identical that can work. Still, I wonder if a better approach is just to "lie" in the declaration files? Otherwise, whatever build system puts you into this interop mode will need to conditionally augment Vue's JSX.ElementAttributesProperty anyway.

[zhiyuanzmj]

Thanks for your reply.

Now in vue-jsx-vapor, i used a TS (Volar) plugin to add the $props property for the Vapor Instance. so that vapor component can be used in virtual dom component.

The automatically added $props is a non-runtime property, to prevent user to use it, i add a @deprecated flag. (Not an elegant solution)

https://github.com/vuejs/vue-jsx-vapor/blob/4e38087e9db8a6e8a968610bc394f3447d65eefc/packages/macros/src/volar/define-component.ts#L47

But this is only a macro, if user manual use the defineVaporComponent to define Component that don't have the $props type.

Otherwise, we can only add this fake $props type in the instance of defineVaporComponent.