wonderful-panda / vue-tsx-support

TSX (JSX for TypeScript) support library for Vue
MIT License
578 stars 40 forks source link

Forced to use props={{}} #48

Open pksorensen opened 4 years ago

pksorensen commented 4 years ago

I am running into a problem that I dont think is how it used to work, but not sure.

Given my component.

import Vue, { VNode } from 'vue';
import * as tsx from "vue-tsx-support";
import { Component, Prop, Watch } from 'vue-property-decorator';

export interface SiHomeSectionTags {
    title: string;
}

@Component
export default class SiHomeSection extends tsx.Component<SiHomeSectionTags>{

    @Prop()
    title!: string;

    render() {

        return [
            <header class="fxs-home-title" aria-label={this.title}>{this.title}</header>,
            <div class="fxs-home-section">
                {this.$slots.default}
            </div>
        ];
    }

}

i cant use title as an attribute, but have to use props= - is that intended?

image

mesqueeb commented 4 years ago

I have the same problem. I'm forced to use props and attrs respectively.

I am forced to write:

<MyComponent {...{props: myProps}} />

But I wish I could write (but this does not work):

<MyComponent {...myProps} />
wonderful-panda commented 4 years ago

image

image

Seems to be working. Can you show me minimal reproducible example ?

pksorensen commented 4 years ago

With the latest versions of stable, or dev, i do not get the experience you have above.

I will try to create a minimal repro with the issue.

pksorensen commented 4 years ago

Just to show it.

image

image

image

pksorensen commented 4 years ago

Here is a repro: https://github.com/pksorensen/tsx-issue

just run npm install and npm run dev and you should see the build errors

@wonderful-panda

wonderful-panda commented 4 years ago

3.0.0-dev.* needs additional configuration.

Downgrade vue-tsx-support to 2.3.3, or add "jsxFactory": "VueTsxSupport" to your tsconfig.json ( see https://github.com/wonderful-panda/vue-tsx-support/tree/beta#installation)

I tested both way, and both worked as expected.

BTW, I don't recommend to use 3.0.0-dev.*, because there is a possibility of some breaking changes until release of 3.0.0.

pksorensen commented 4 years ago

I will try to downgrade- only reason I tried to use 3.0 was that I could not get it working. I will report back

Sent from mobil


From: wonderful-panda notifications@github.com Sent: Monday, January 27, 2020 3:43:37 AM To: wonderful-panda/vue-tsx-support vue-tsx-support@noreply.github.com Cc: Poul Kjeldager Sørensen pks@s-innovations.net; Author author@noreply.github.com Subject: Re: [wonderful-panda/vue-tsx-support] Forced to use props={{}} (#48)

3.0.0-dev.* needs additional configuration.

Downgrade vue-tsx-support to 2.3.3, or add "jsxFactory": "VueTsxSupport" to your tsconfig.json ( see https://github.com/wonderful-panda/vue-tsx-support/tree/beta#installation)

I tested both way, and both worked as expected.

BTW, I don't recommend to use 3.0.0-dev.*, because there is a possibility of some breaking changes until release of 3.0.0.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/wonderful-panda/vue-tsx-support/issues/48?email_source=notifications&email_token=AAUXW7ZNIODTVEDTPVNQ4CDQ7ZC5TA5CNFSM4JLY3QLKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEJ6FRKY#issuecomment-578574507, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AAUXW74NHYAX7RMXPIU32QTQ7ZC5TANCNFSM4JLY3QLA.