Vue 3 and TSX

[skyrpex]

Hi there :wave:!

I'm really interested in the future of TSX and Vue, but couldn't find specific information about it. I'm currently using the composition API with TSX (based on this example repo). There's a few pain points:

Spreading props doesn't play well with Typescript's type checks.

Look at this example:

import { createComponent } from "@vue/composition-api";

const Rectangle = createComponent({
    props: {
        width: {
            type: Number,
            required: true,
        },
        height: {
            type: Number,
            required: true,
        },
    },
    setup(props) {
        return () => <div>{props.width}, {props.height}</div>;
    },
});

const App = createComponent({
    setup() {
        return () => (
            <div>
                {/* Passes props correctly: YES. Type checks correctly: YES. */}
                <Rectangle width={640} height={480} />

                {/* Passes props correctly: NO. Type checks correctly: YES. */}
                <Rectangle {...{ width: 640, height: 480 }} />

                {/* Passes props correctly: YES. Type checks correctly: NO. */}
                <Rectangle {...{ props: { width: 640, height: 480 } }} />
            </div>
        );
    },
});

When there's no spreading, it works and passes the type checks <Rectangle width={640} height={480} />. But when it comes to spreading, we are required to do it as follows: <Rectangle {...{ props: { width: 640, height: 480 } }} />. This way doesn't work with Typescript's checks, because the Rectangle component doesn't expect a props prop.

Is this going to change? We can live without typed spreading but certainly it would help a lot.

Events interfere with props, and can't be typed

We can't use props that are named like onWidthChange because this plugin will intercept it and convert it to an event listener :<Rectangle onWidthChange={width => console.log(width)} /> will become something like <Rectangle @widthChange="..." />.

Also, if Typescript users were to use Vue's events, there's no way to use type checks... forcing us to use props instead.

Possible solutions?

It could be possible to have a Babel plugin that ignores the current spreading and event naming behavior and just uses props for everything? In that case, would like to know if someone thought about this already. I'm really interested into fully typecheck my code.

[vertic4l]

If you want fully type checks then stop working with Vue. It's hilarious how Vue is getting hyped, but at the end of the day it totally sucks.

Worst developer experience i ever met.

Vuex for example... multiple Stores are Modules? Are namespaced and you have to call them with magic strings? :D

Go to ReactJS + TSX + MobX ;)

[webistomin]

If you want fully type checks then stop working with Vue. It's hilarious how Vue is getting hyped, but at the end of the day it totally sucks.

Worst developer experience i ever met.

Vuex for example... multiple Stores are Modules? Are namespaced and you have to call them with magic strings? :D

Go to ReactJS + TSX + MobX ;)

Unfortunately, I agree😢

[TestUser8601]

@vertic4l couldn’t agree more. Vue invented their own template that’s sooooo much easier than TSX that it makes me look up its quirks every time I try to do something super simple like passing a render function (need to use scoped slots for that with 10 competing syntax versions). Meanwhile, I learned JSX in 10 minutes or so back when it came out and revolutionized the way templates are written. I was under the impression that React solved this problem forever and that surely nobody would be dumb enough to invent their own templates once again...

So here I am, as an experienced JS dev, being forced to look-up trivial things on a daily basis because vue decided that taking 10 minutes to learn JSX/TSX is too complicated. Oh, and for the pleasure of having to do that, I also get no type checking on the template, no autocomplete support, a buggy VSCode extension that barely helps more than it causes incomprehensible typescript issues (vetur), and no native IDE support. All because "JSX is sooooo complicated". Not to mention the utterly ridiculous declare module "*.vue" because they also invented their own file type to make extra sure that TS will never be able to understand vue. It clearly shows that this framework wasn’t made by a competent dev team, but instead by some random chinese dude copypasting angular 1.

Honestly, if I could delete Vue, I’d do it. I think it causes more pain and suffering than it helps anyone. It just repeated the mistakes of Angular 1 and is now trying to fix it by stealing all the good parts of React (hooks) while also managing to butcher those with hard-to-debug random losses of reactivity with tons of quirks everyone needs to remember. If one person of your team messes one quirk up, you’ll get a random bug that won’t be detected by TSC either.

[skyrpex]

@TestUser8601 starting with Vue 3, the template compiler will be able to optimize a lot, so it may be a good reason to start using it. Regarding type checking and autocomplete, the Vetur extension for VSCode is already working for me, although there's still a long road to improve it.

Regarding hooks, I think Vue adopted a great abstraction and improved it. I personally don't find it hard to use.

On the personal side, you're not being helpful at all with that rant. You could deliver that message in a very different way if you really wanted to.

[vertic4l]

So many down votes on my comment just shows how many beginners are out there. You can use it for you shitty little projects and learn just the wrong way of doing things. But as soon as you are up to build a high level enterprise platform you all are fucked.

:)

[skyrpex]

So many down votes on my comment just shows how many beginners are out there. You can use it for you shitty little projects and learn just the wrong way of doing things. But as soon as you are up to build a high level enterprise platform you all are fucked.

:)

The world is full of beginners, that's OK. What's wrong is saying things the way you do, or being like you are, for obvious reasons. That's why you got downvoted.