Developing Vue using an equivalent subset of TSX as the template language

[DiamondYuan]

Summary

Choose a subset of TSX syntax as the template language for Vue. This subset has the following constraints:

1. Variables cannot be defined.
2. Functions cannot be declared.
3. Use map and ternary expressions to implement v-for and v-if in Vue templates.

This syntax subset is equivalent to the Vue template language. During Vue compilation, we can first convert TSX into a Vue template, and then compile the template into JavaScript. This way, we can enjoy the performance of Vue and the type hints of TSX.

This approach is more like a syntax sugar for Vue templates, as users can easily convert TSX to Vue templates at any time.

export default ({ name, jobs, hasChildren }) => {
  return (
    <div>
      <span>{name}</span>
      <div>
        {jobs.map((job) => (
          <div>{job.company}</div>
        ))}
      </div>
      <div>{hasChildren ? 'Has Children' : ''}</div>
    </div>
  );
};

<template>
  <div>
    <span>{{ name }}</span>
    <div v-for="job in jobs" :key="job.company">
      <div>{{ job.company }}</div>
    </div>
    <div v-if="hasChildren">Has Children</div>
  </div>
</template>

[jods4]

Vue already supports JSX / TSX ?
https://vuejs.org/guide/extras/render-function.html#jsx-tsx

[leopiccionia]

If I understand the proposal correctly, the intention is to transpile JSX/TSX into optimized helpers instead of raw h calls (akin to Solid and upcoming React Forget, I guess). As Vue templates are not compiled into h calls, they (or an AST-like representation of them) could be an intermediate step.

[leopiccionia]

Said that, it sounds like a task for a TSX/JSX plugin/loader, that doesn't need to live inside Vue core.

[jods4]

Ok, I see.
You'd need a lot of constraints to be able to reliably convert JSX code into a Vue template, as JS code could do arbitrary things.
I feel like going straight from the JSX code to the same optimised calls the template compiler uses instead of h might be a more tractable way -- and less constrained.

[DiamondYuan]

Yes, it's just a syntactic sugar. It's just written that way to enjoy the type hints of tsx.

This syntax is actually designed for mini programs. https://miniprogram.alipay.com/