React + Typescript

[Garrett-Bodley]

tech debt....

[gregsadetsky]

easiest would be to bootstrap a new project with vite with the typescript+react preset. then, just drop the index.js file in, and adjust as necessary. also, small note but in package.json , we can remove the tsc which checks that all code is really fully typescript. otherwise the deployment will fail (if all of the types aren't defined/used)

[Garrett-Bodley]

How would the migration work in terms of CI integration? How do I start rewriting using components/react but not break the live demo? Should I make a new branch and do the work there?

[gregsadetsky]

yeah no all good I'll fix it if it stops working

but it really does work pretty much out of the box.

do you want me to typescript/reactify the thing? I'll just push onto main and make sure deployments still work

[Garrett-Bodley]

Just tried and pushed but it didn't build 😔

Maybe because I did bun install instead of node install ?

[gregsadetsky]

yeah maybe -- it looks like the package installation failed while deploying:

https://github.com/Garrett-Bodley/SHAlala/actions/runs/8516167812/job/23324816515

want to retry?

to create a fresh typescript/react repo with vite:

npm create vite@latest

pick typescript, pick react, then you'll get a bunch of files.

then you'll have to merge which is the annoying bit. overwrite the package.json with the new one you got (from vite), and overwrite most other files. don't forget to remove the "tsc && " from the package.json's build line, then try git pushing again to see if it deploys?

[Garrett-Bodley]

Got it to build! It was a package-lock.json issue that I think was caused by using bun create vite. Fixed by deleting node_modules and package-lock.json and calling node install.

Still unsure of how the process of migrating from the existing code to React components will work. Right now the site is just ignoring the react stuff. Do I need a div#root element? Should I add <script type="module" src="/src/main.tsx"/> to index.html?

[gregsadetsky]

ah yeah congrats on fixing!

yeah re: react -- if you npm create vite@latest into some temporary separate directory, you'll see the react project that it creates. and yeah, it's pretty much that - there's a root element, the <script gets included as a module, and there's an App.tsx (sorta) that bootstraps it all. or like an index.ts that starts react and then react starts in App.tsx

[Garrett-Bodley]

uhhhhhhh, how do I reactify + typescript this

There's a lot of state that I just throw around wherever or just hold in the DOM. Would you use a ContextProvider that has some sort of struct that holds all the state? I feel like I maybe need a hook/context provider for the synths and maybe another one for "use the short hash" boolean?

Or am I overcomplicating and I should just prop drill since things aren't going to get that nested anyway.

It has been a minute since I have done react

[gregsadetsky]

Yeah I'd start small/easy with just props for all of the separate components and the main app containing / managing / owning all of the state using useState vars

I think contextprovider mayy be overkill at this point (since you don't have like ... a login ............. yet (Shalala as a service???? Hahaha))