JSX support

[mbasso]

Use asm-dom with the h function is a little bit verbose, for this reason we have to develop a parser that allows us to write a JSX like syntax in C++:

#include <iostream>
#include "asm-dom.hpp"

int main() {
  VNode* vnode = <span />;
  // translated to:
  // VNode* vnode = asmdom::h(u8"span");
}

At the moment there is a work in progress command line interface (cli) called gccx. However, other ideas and implementations are welcome.
After that we have reached a good point, we have to add a section to asm-dom docs that links the right tool to do this.

[dmattia]

I have been looking into doing this via a C macro, something to the effect of

#define JSX(...) create_jsx_from_string(#__VA_ARGS__)

that would take the line

VNode* vnode = <h1>Hello world!</h1>;

from your gccx library and allow it to look something like

VNode* vnode = JSX(
  <div>
    <h1>Hello world!</h1>
  </div>
)

while still being compiled as C++. This has the benefit of needing one less build step, but would require the compiler to be written in C/C++ itself. This would be something I would be interested in working on.

What are your thoughts?

[mbasso]

Hi @dmattia,
that's definitely an interesting idea! That was also my first thought before writing gccx, as you said, a macro is the right tool to do that without an additional build step, that is the main issue of gccx.
However I think that the problem with this approach is that the parsing is evaluated at runtime, so we might have a performance disadvantage, also, we have to include the parser in the bundle that we'll send to the client.
I think that we can develop both the solutions, gccx and the macro. A compiler written in C/C++ might also be very useful in the future, we'll be able to do a lot of things that are not possible right now.
Please feel free to experiment and contribute! I'm very interested to see the implementation 😄

[lastmjs]

Instead of using a JSX syntax, why not use the template literal syntax of JavaScript, which is already a standard JavaScript syntax, instead of an entirely new and non-standard syntax? Though JSX is very popular with React and its community, other solutions based on template literals are arising:

• lit-html
• hyperHTML

[mbasso]

Hi @lastmjs,
This is certainly an interesting field of study. I've to learn a little bit more about that to understand if it is compatible with asm-dom and how we can do that in C++. I think that I'll read the source code of lit-html as soon as possible and I'll do some research on github (for example I've found this issue). If you have some tips, idea about the implementation, or if you want to contribute please let me know 😄

[ahmad2smile]

For Language format support in VS Code I've put together an extension taking feature from Babel Language extension for JSX like tag formats and C++ Reloaded extension for C++ part.

CPX Language (alpha):
https://marketplace.visualstudio.com/items?itemName=ahmad2smile.cpx-language

Repo:

https://github.com/ahmad2smile/cpx-language

[mbasso]

@ahmad2smile awesome! 😄
I'll try it tonight! Thank you so much for contributing and making asm-dom even better!

[ahmad2smile]

Its not any joy. It doesn't do any formatting just shows colored syntax and allows you to format the document. Working on adding a formatter so vs code auto format can work.

[ahmad2smile]

Ok. I've looked into problem with lang support extension but can't figure out anything. If anyone else would like to take a stab at it let me know, as I don't have time right now I can't be further assistance.

Even if someone would like to replace this with their own work on vs code marketpalce I'll be happy to take down mine.

[webern]

It seems you have this implemented already via gccx.

Just a side note here to let you know about an alternate type of brain using your software.

The first thing I did to get a feel for asm-dom is to eliminate the csx from the boilerplate example

I'm a 'backend' programmer (C++, iOS, Golang, C#, etc) that has struggled to get a foothold in web frontend. For me JSX has always felt like a train wreck of two languages; a bug, not a feature. I tend to prefer verbosity over convenience if it helps me understand what's happening. My goal with a wasm dom integration will be to make the dom disappear from my mind and write, strong statically typed code with a C-based syntax.

The options that seem to be emerging for this, that I am aware of, are Blazor, Rust Yew, and now asm-dom.

Anyway, I imagine I am in the minority, but preserving the ability to write asm-dom code without csx is important for me!

[mbasso]

Hi @webern,
thank you a lot for your feedback!
Yeah, we should definitely preserve the possibility to write asm-dom without cpx. Indeed, gccx represents just an additional step to compile only its syntax to plain C++ code.
Both of them have some advantages and disadvantages, the user should be able to decide freely the right one for his use case 😄