How did you do this?

[RobertSandiford]

Hey-- how did you manage to do this?

I want to be able to convert JSX in Dart (but in the same file).

I can use babel, but I don't get how you made this work, can Babel output dart?

Let me know if you're still around please

[danialdezfouli]

Hey Robert babel JSX can analyze the tsx/jsx code and turn it into a nested object like virtual DOM.

something like this ( checkout its plugin docs to see the output or use console.log)

{
const output = {
  name: "MyComponent",
  props: {
    width: "10px",
    children: [
      {
        name: "ChildA",
        props: {
          children: "Text",
        },
      },
      {
        name: "ChildB",
        props: {
          children: "Text",
        },
      },
    ],
  },
};

then it turns into dart functions and will modify the dart file.

your job is gonna be hard if you want to have it directly (also the ones who are gonna work on the project later)

1. you can create a new language that includes JSX inside Dart, in case you need a heck of IDE highlighters and linters
2. the second way which looks more impossible and even inefficient is to create a dart function that accepts a string of JSX and calls dart functions which probably causes importing files issues. like renderJSX("<Text>Something</Text>")

[RobertSandiford]

@danialdezfouli Hey

The thing I don't get is how you interop with Dart using babel. Are you turning into Dart functions with Babel, or are you doing that another way?

your job is gonna be hard if you want to have it directly (also the ones who are gonna work on the project later)

1. you can create a new language that includes JSX inside Dart, in case you need a heck of IDE highlighters and linters
2. the second way which looks more impossible and even inefficient is to create a dart function that accepts a string of JSX and calls dart functions which probably causes importing files issues. like renderJSX("<Text>Something</Text>")

Yeah I think making a compiler to convert the JSX is OK. But then there is the VS Code language extension that would need to be updated, and linters as you say. I decided to put the project on hold for now : )

I figure that instead, for a web framework, I can just create a set of HTML functions like body() h1() p() and use those to insert those elements instead of JSX.

Cheers

[danialdezfouli]

The thing I don't get is how you interop with Dart using babel. Are you turning into Dart functions with Babel, or are you doing that another way?

I just used babel for converting tsx file to a javascript object, then I manipulated strings to create the dart functions. completely manual, and because of this the output code wasn't well-formated. And used RegEx to put that output string in the dart file.

if you were so much into jsx then just try react-native

[RobertSandiford]

The thing I don't get is how you interop with Dart using babel. Are you turning into Dart functions with Babel, or are you doing that another way?

I just used babel for converting tsx file to a javascript object, then I manipulated strings to create the dart functions. completely manual, and because of this the output code wasn't well-formated. And used RegEx to put that output string in the dart file.

if you were so much into jsx then just try react-native

Thanks.

No I am looking at web apps in Dart. Deact is closest.

I created a framework in JS SXY Framework, but I was coming into some problems with TypeScript and seeing whether I could move it to Dart. I like type safety, but TS has a lot of incorrect behaviour, so I thought I could look at starting with a true type safe language that can compile to JS. Unfortunately as I look into Dart I find it has a lot of shortcomings - it seems a bit like a v0.1 language that doesn't have as many features as others.