search

mohebifar / vidact

A compiler that converts React-compatible codes to VanillaJS with no Virtual DOM
https://mohebifar.github.io/vidact/
MIT License
786 stars 9 forks source link

Join forces with Svelte.dev #4

Open lukaszpolowczyk opened 4 years ago

lukaszpolowczyk commented 4 years ago

Svelte.dev has a similar idea. It has the only other source files. vidact - JSX to Precision DOM svelte.dev - svelte file to Precision DOM

What do you think?

I assume that in theory they should have a lot in common. If they don't have it yet, it probably results only from not working out some ideas.

robsonsilv4 commented 4 years ago

Svelte with JSX style? I liked this idea :)

mohebifar commented 4 years ago

Are you suggesting using Svelte's code and building Vidact on top of that? Or merging the projects? The latter is almost impossible as I cannot decide on behalf of Svelte's maintainers. Also, even though the ideas sounds similar, Svelte has taken a fundamentally different approach, and I think React-like source codes cannot be easily mapped to the kind of JS output that Svelte has.

lukaszpolowczyk commented 4 years ago

@mohebifar Actually, it would be great to use JSX Components in Svelte.

With your result code it seems to make more sense.

So it's about the ability to communicate vidact Precision DOM with Svelte Precision DOM.

I don't really know if this is possible. I know that there are differences, but the common ground as if to pull it might succeed?

ryansolid commented 4 years ago

@mohebifar is correct that React's semantics are incompatible with Svelte's approach. It isn't that Svelte couldn't support JSX DSL. It 100% could. But that something compatible with React's Component model would not output similar code. Even if Svelte masks it a bit, it's reactive system is still very present it how it approaches updates. Similar looking code would have completely different meaning. For instance, consider Svelte's $ operator compared to React's useEffect.

Svelte uses that operator to indicate an update path so it can separate it so only it gets evaluated when the component updates. Basically the outside initialization code of a component never need run again. However, in React the whole component re-executes and it's actually the dependency list that decides if the Hook runs again. Basic in React everything always runs unless you blacklist it in a Hook, and in Svelte nothing runs unless you white list it in a derivation.

Now nothing says JSX cannot have these reactive semantics (you do not have to look very far to find solid libraries that do precisely that), but it is a completely different thing to what is being accomplished here. This as far as I know hasn't been completely successful so far. There was a previous library that tried to do something similar Rawact that is all but dead. So I look forward to see how this progresses. I think this is a very interesting space to work through. I admittedly tried my hand here myself a couple years ago but ended up landing somewhere else. So I'd love to see someone take this all the way.