JSX Support in the Code section?


#1

I’m sure you’ve heard this question before, but why not support JSX in the code section if you’re using React? It’s great for prototyping.


#2

Thanks for writing @namuol!
Yep, the question has been asked before = )

tl;dr, I dug through all of the JSX and babel docs, but couldn’t for the life of me figure out how to create the function:

let eval_with_jsx = function(input_prototype_js_source){...}

that returns the render(model) function used to render the prototype.
(Right now, we just use the browser’s native eval.)

Everything that came up in my googling required a bazillion NPM packages or compiler toolchains or whatever.

If you can point me to relevant documentation (or, even better, a gist or codepen link) I’d certainly be open to adding JSX support.


#3

I think you can achieve what you want by using @babel/standalone.

Here’s a proof of concept on codepen: https://codepen.io/namuol/pen/MXJOzy

Here’s the gist stripped down to the bare minimum:

const eval_with_jsx = function(input) {
  const output = Babel.transform(input, { presets: ['react', 'es2015'] }).code;
  eval(output);
};

Lemme know if this helps; thanks! :bowing_man:


#4

@namuol Whoa, this looks great! Thanks for looking into it and coming up with an example so quickly!
I’ll start integrating it into Sketch.systems this week.

If we ever find ourselves in the same city, make sure I buy you a drink!

Edit: This might take a bit longer than I originally thought, since the “minified” version of babel standalone is 2 MB, which is twice the size of Sketch.systems. Will keep this thread updated if I find a reasonable solution.


#5

@namuol I’ve added preliminary JSX support to Sketch.systems. Check out this example sketch.

I don’t actually use JSX at all, so I’d love if you kick the tires and make sure things do what you need 'em to do.

As for the implementation, in case you’re curious: I went into babel with a hacksaw and got the build down to about 1MB. This is still way bigger than I’d like it to be, but I figured ya’ll would rather have the feature at the expense of load time.

If you want to see what I did or try making a smaller build, I have notes in my babel github fork.


#6

Awesome! Seems to be working perfectly, apart from some syntax highlighting kinks. The extra 1MB of JS is peanuts for a tool this powerful, if you ask me, but I applaud your unwavering attention to performance! :clap: