search

pavelkomarov / exportify

Export Spotify playlists using the Web API. Analyze them in the Jupyter notebook.
https://exportify.net
MIT License
210 stars 24 forks source link

Modernize code to not use legacy functions #48

Closed pavelkomarov closed 2 months ago

pavelkomarov commented 2 months ago

React.createElement is apparently no longer favored. Given how verbose it makes the code, I'm not surprised, but I don't really know the modern alternative. You can document.createElement, but that's even more verbose because element creation and property/children-setting have to be done on separate lines. You could set inner html directly, making clever use of display=none. Unclear what the best course is, but my formerly minimal, easily-understood code is getting too long for my taste and needs some help.

pavelkomarov commented 2 months ago

https://react.dev/learn/writing-markup-with-jsx

pavelkomarov commented 2 months ago

If somebody out there knows JSX and wants to submit a quick PR, I'd be grateful. Otherwise this is my opportunity to (eventually) try JSX directly.

ChinoUkaegbu commented 2 months ago

Would love to help on this :) Also wondering what formatter you use so the changes are consistent!

pavelkomarov commented 2 months ago

I don't use a particular formatter, and I'm not sure I even know what you mean. I laid out all the code files manually, if that's relevant. I definitely prefer tabs to spaces!

ChinoUkaegbu commented 2 months ago

TLDR: Using React.createElement is fine

While it has in fact been moved to legacy APIs, using React.createElement seems to still be supported. JSX is the preferred format because it is more readable and similar to HTML but in order to use JSX, it has to be transpiled into JS under the hood (since most browsers do not directly understand JSX). This transformation is typically done with some compiler like Babel or Create React App. Previously, these compilers would take our JSX and transform it to JS by manually calling React.createElement under the hood. But now the compilers transform the JSX into some more performance-friendly format but support for React.createElement is still being retained.

Essentially, we could still rewrite the code and use JSX and the compilers and all that, but to me that seems unnecessary since it's not going to be deprecated anyways. Plus if we do set up the compiler, we're going to get a JS file either way after the transformation that would be slightly faster but...idk doesn't really seem worth the hassle. I've rewritten the code in JSX though so if you still want to go ahead with it, I'm on board (it would introduce a couple more dependencies though since we need to install the compiler package with npm or use Create React App which I'm not too familiar with but seems basic enough to set up).

And this just reminded me that I never got round to finishing Silicon Valley, so now I've got something to do over the weekend lol

pavelkomarov commented 2 months ago

I would like to see your JSX version if you've already done it. You keep the javascript file in the repo, or the jsx in the repo, or both?

Does sound like overkill, though. More dependencies isn't better.