Render Component Lifecycles

Learning where you have to use specific reactive features differently in React, compared to SolidJS, since their lifecycles are a bit different in a few aspects.

This does allow the demo to work!

I still have to figure out how to append to an existing component, for the temporary FormatOptions form element handling.

https://stackoverflow.com/questions/38256332/in-react-whats-the-difference-between-onchange-and-oninput
https://react.dev/reference/react-dom/client/createRoot
https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key
https://stackoverflow.com/questions/38192552/react-jsx-append-html-react-object-after-initialization

Solid-CodeMirror

CodeMirror still seems to be a big heck of a hassle to set up, what the heck? I wish it was just simple to put together. The styling for it just doesn't respect the CSS I'm trying to apply to it, and just aagh. It's most certainly me that's the issue in setting it up, it just seems to never go quite right when I set it up.

This is the setup I used just for this demo.
https://github.com/nimeshnayaju/solid-codemirror
https://github.com/Team-Lodestone/codemirror-lang-snbt (I wanted to set this up as well, but it doesn't use regular JS files for the syntax spec, so it needs an additional build step just to work. That's the kind of thing that bugs me about this. Why not use regular language-supported things? Once again, I'm likely the one confused here)

Did some deep dive searching about implementing CodeMirror a few weeks ago, been meaning to document all of the articles I found for it.

https://davidmyers.dev/blog/how-to-build-a-code-editor-with-codemirror-6-and-typescript/introduction
https://www.adamcollier.co.uk/posts/adding-codemirror-6-to-a-react-project
https://codemirror.net/examples/styling/#themes
https://www.bayanbennett.com/posts/failing-to-add-codemirror-6-and-then-succeeding-devlog-004/
https://www.reddit.com/r/swift/comments/r8206e/is_anyone_working_on_a_port_of_codemirror_6_to/
https://github.com/khoi/codemirror-swift
https://github.com/riccardoperra/solid-codemirror
https://github.com/nimeshnayaju/solid-codemirror
https://solid-codemirror.vercel.app/
https://www.youtube.com/watch?v=juKv1aHEikI
https://www.youtube.com/watch?v=5I4ZkmMS4-0&pp=ygUYemlnIHByb2dyYW1taW5nIGxhbmd1YWdl
https://www.youtube.com/watch?v=zVyfRTckDqA (PDF fillable form possible solution!)

Been trying to record more music lately, even when I don't quite feel like it. The goal is again to try making things to see what they sound like, rather than trying to make a specific thing. It doesn't have to be good, it doesn't have to be bad. It just has to be, I guess.

Checking out Svelte Again

I want to better understand how to use Svelte, so I'm coming back to this project again to try things out, because I have had the most progress so far in this one.

I want to redo STE too now that I think about it. It might be nice to restart STE with Svelte as a base!

Svelte Testing

Started looking into Svelte yesterday! It seems really cool, I like it's vibes (I don't know what I'm doing here yet though, haha). Got interested after watching the 'Rich Harris Teaches The Primeagen Svelte' video. It's neat that pretty much all of it's features are built around the compile step, so you don't have to ship nearly as much JS to get it set up in your project (only the parts that your code relies on). Coming back to commit these changes though, I'm not quite sold on the dev setup for it, as it relies on a lot of tooling you have to rely on more separate tooling to set your project up for it. I like TypeScript in that you use it for everything, and what it builds out is what you run, and it doesn't look too much different from the source, because of the 'all JS is valid TS' correlation. I guess for some aspects of Svelte this is also the case (going between HTML, CSS, and JS (TS)), but I'm not sure how I feel now about actually coupling all of those together into a single file, which is solely for the build step to handle. I guess TypeScript is the exact same way, but I'd say less so because of the mostly-symmetrical nature it has. For Svelte components, the syntax 'looks' a lot like the other languages, but it does a lot more behind-the-scenes work to your initial source, so what you get out likely isn't as close to the original source (This is good for the performance enhancements I mentioned earlier, but this way of building things is still a bit foreign to me, at least to know how to structure things myself).

Got help from making a demo project off to the side of this one, which helped with figuring out what ways to set up Svelte are. `npm create vite@latest`

pnpm testing

It seems really neat! Saw it in some videos that were talking about TypeScript.

I don't like having another place to use YAML though, arrrgh. It definitely seems harder to read for me. Not sure if I'll use it, but I thought I'd document trying it out at least in this testing branch.

It's just too much to try and add all of this together at once. All of these new technologies and a new document syntax. Lots of things flying about in my head! And pnpm has a different CLI appearance too, and I am only just now used to using npm as my daily driver for the past year or so. I don't want to change out my dev setup if it's gonna slow me down, just for the sake of trying something new.