Compile-step frontend frameworks and rescript

,
1

I’ve read in this forum and on reddit that frameworks like vue and svelte are challenging to work with using rescript due to their build step, but have not found an in-depth explanation.

Does anyone know and can explain the essence of that limitation or challenge?

Thanks

2

It’s not really an issue with them being compiled frameworks, the issue is that they have unique file formats and structures (.svelte and .vue). These files are a mix of JS, HTML, and CSS. The JS in these files has to be JS, so you can’t just drop in ReScript.

What you can do is use ReScript for external JS that is imported into these unique files.

3

It is an issue. Unlike Svelte or Vue, SolidJS is vanilla JS[X], syntax-wise, yet it’s compiled and uses a Babel plugin. Rescript compiles both regular code and JSX by itself, so instead of Babel plugin ideally it would need a ppx, which of course the framework authors won’t provide, so it would have to come from the ReScript community. (The types are going to have to come from the community too.)

There was also talks about letting Rescript emit JSX as is (meaning it could be further transformed by Babel), and there’s work on generic JSX transform. Not sure if the latter is enough to let Solid compiler track reactive context etc.

4

Yeah, we should eventually be able to support solid.js, but I don’t think we’ll ever be able to handle .vue or .svelte files.

5

Will eliminating Vue SFCs allow seasmless integration? Vue components can be written like this:

import { ref, h } from 'vue'

export default {
  props: {
    /* ... */
  },
  setup(props) {
    const count = ref(1)

    // return the render function
    return () => h('div', props.msg + count.value)
  }
}
6

Vue integration is actually possible, since the lang attribute of <script> tag in SFC can receive anything. Therefore if we create a Vite plugin to transform ReScript files on demand, it would be possible to be used with Vue SFC.

see also: https://github.com/vitejs/vite-plugin-vue/blob/2050ad3dc568b4d051d19611aad34693e9a917ec/packages/plugin-vue/src/main.ts#L366-L372

3 Likes