search

lastmjs / zwitterion

A web dev server that lets you import anything*
MIT License
581 stars 14 forks source link

Vue #290

Open lastmjs opened 4 years ago

lastmjs commented 4 years ago

Should we include support for .vue files in Zwitterion core, or should it be a third-party plugin?

koresar commented 4 years ago

Hi mate. Thanks for the tool!

Questions. What are the technical difficulties of adding .vue if any? Are there much differences between JSX and VUE files? Anything else stopping from adding VUE files support?

lastmjs commented 4 years ago

Hey, you're welcome. To add .Vue files to Zwitterion core, we just need to create a new internal plugin and implement all of the fields and functions. Each language supported so far is implemented as an internal plugin here: https://github.com/lastmjs/zwitterion/tree/master/src/languages

The hardest thing for .vue will be implementing the transformer, which is the function that takes the source file contents and returns the modified contents to the browser. I'm not yet familiar with exactly how Vue single file components work, but I believe we can use this tool or one similar to do the transformation: https://www.npmjs.com/package/vue-template-compiler

As I dig into Vue, I'm afraid I'll start finding out technical complications in this process. It could be pretty simply to get basic support though.

In what ways are JSX and Vue similar? Do you mean the actual languages or the Zwitterion implementation? JSX and TSX are very simple, as they use the TypeScript compiler with just one extra flag and are easily compiled to JavaScript, everything being self-contained in one file. Vue might be more complex, as there is the style, template, script, imports and exports to deal with (though the script, imports, and exports might work without much complication).

The biggest question I have is whether Vue should be supported natively by Zwitterion, or if Vue support should be put into a separate plugin that is installed separately. I want to come up with criteria for what should and should not be included in Zwitterion. If we don't have good guidelines, Zwitterion could get bloated to install and maintain. Right now I'm thinking languages that have a very high demand and chance of existing in high demand for the next few years should be supported.

koresar commented 4 years ago

Answering the questions.

JSX is like Vue template+style combined. Vue <template> is fully HTML compatible. In fact, it is the HTML. So, technically, it is even simpler than JSX because .vue files are actually .html-compatible files. But, for JS-bundling, it is compiled to the same as React h() nested functions call tree by the vue-template-compiler.

However, what can get things complicated is the <template lang="pug"> and <script lang="ts"> and <style lang="stylus"> language compilations (which make the .vue files not .html-compatible). But these are quite rare, so okay to be not supported.

Separate note about <style>. There are two: <style scoped> (default and widely recommended) and <style> (adds to styles). I have no idea how they work internally though.

My recommendation is to look at this chart and decide: image

lastmjs commented 4 years ago

Good recommendation. I think I will add Vue support to Zwitterion core. If we're supporting React, we might as well support Vue. The popularity of Vue would probably help Zwitterion gain notoriety. Even if adding an extension does end up bloating core, I think it would be relatively simple to split out plugins into third-party packages later on, might as well make it as convenient as possible for a lot of people. Svelte will probably be next after Vue