Typescript

[jaredcat]

With the goal to make the repo easier to maintain and make contributing easier, this PR converts the repo to use typescript and use create-chrome-ext

I tried to do as little changes outside of TS the conversion to keep logic as close as possible to current repo. I did fix anything that seemed like a major issue when highlighted by linters. The big changes here are using the new file structure & the formatting applied by prettier configs that came with CCE.

I also believe development is made easier now with hot reloading provided by Vite. I hope you see the value in this, as it can catch issues easier because of the types and give new contributors more confidence and understanding what values objects contain. Feel free to make any changes needed.

---

Tested in Chrome and Firefox: everything seems to work the same as before!

Issues:

• The css doesn't load in the popup when npm run dev (it does work when built)

Future PRs:

• Try to address any of the TODOs
• Ideally, type anything that is any typed that seems critical
• Revisit when FF supports service workers and clean up makefile
• Add testing
  • jest would probably be good here
• The jq in the makefile is probably pretty bad. Could probably be cleaned up

[kheina]

holy shit

[kheina]

guess I need to finally learn typescript huh

[jaredcat]

guess I need to finally learn typescript huh

Its not so bad! I'm still pretty new myself but it takes the guess work out of what properties objects have. This will help other work on the project too as it's clearer where values come from and what they can use.

Linters also caught some bugs when I was converting this. Example: for the xhr 'load' event listeners, it's notevent.target.status it's xhr.status

[jaredcat]

@DanielleMiu this is working now if you wanted to check it out!

[kheina]

alright, so I'm back from my little hiatus, I think, and working on blue blocker again. this is probably going to be more of a long term goal rather than immediate merge, just because it's going to take me some time to understand all of the changes as well as getting familiar with typescript, new development workflow, and using vite for something other than webdev. I'm also interested in figuring out how extension pages and the popup would work using typescript, but vite probably handles that like it does with vue

idk, this is just a huge change for me and will take me a little bit of time before I'm comfortable with everything in here, even though everything I've seen looks really really good. I'm gonna work on view/edit queue changes and a couple other small things, then pull this into an llb and try to update everything I add in 0.2.6 to ts to match your code here. hopefully that'll get me up to speed with the language

(probably this weekend, btw)

[kheina]

hey, is it possible for you to change your base branch to llb-v0.3.0, I'll merge it and start working on everything from there. that'll be the next major version change and basically only contain the typescript changes

[kheina]

ok, so all I did is update the manifest.ts to use 0.3.0, basically just to match the llb and resolve merge conflicts. I'm going to merge this as-is but an issue I see currently is that firefox needs to keep manifest v2 until at least september (context: https://github.com/kheina-com/Blue-Blocker/issues/39) so I'm going to look into having separate build paths while I update everything I did for 0.2.6 to ts and generally go over everything with a fine-tooth comb

[jaredcat]

@DanielleMiu I handle firefox manifest inside the makefile