refactor: wip

[Kompwu]

ts-ify & new boilerplate

Todo:

• [x] new boilerplate
• [x] ts-ify
• [x] fix errors in options.ts
• [x] Remove all Any types to be more specific.
• [x] Parcel vs FuseBox.
• [x] Migrate to Parcel.
• [x] Fix bugs
• [x] Script for packing up the extension.
• [x] Remove ytp-right-controls.
• [x] Fix #5 & #34
• [ ] Backport: https://github.com/Ashish-Bansal/audio-only-youtube/pull/18
• [x] Backport: https://github.com/Ashish-Bansal/audio-only-youtube/issues/20
• [ ] Fix livestreaming #14

I've also added some githooks to automate some shit & lint commit.

@Ashish-Bansal What do you think? 🤔

[Ashish-Bansal]

@Kompwu I don't have any experience with ts. Earlier I only had heard about it. Now I see its various features. Looks good to me! 👍

Sorry for the late reply!

[Ashish-Bansal]

Also I saw you removed yarn.lock. Any specific reason for that ?

[Kompwu]

@Ashish-Bansal I'm gonna add a new one soon. Edit: Can you help me ?

[Ashish-Bansal]

@Ashish-Bansal I'm gonna add a new one soon. Edit: Can you help me ?

@Kompwu Sure, how can I help you out ?

[Kompwu]

@Ashish-Bansal ~~Backport: #18~~ pls :) Edit: I'm sorry i mean #20

[Ashish-Bansal]

@Kompwu

Back porting ? I don't get why we would like to backport something to #18 and which feature ?

Or did you mean porting individual toggle per tab feature to this branch ?

[Kompwu]

@Ashish-Bansal Almost done :) Now... FuseBox or Parcel ?

[Ashish-Bansal]

@Ashish-Bansal Almost done :)

Awesome! :D

Now... FuseBox or Parcel ?

Parcel seems to be more flexible than fusebox and requires less configuration boilerplate code than webpack, providing a nice middle ground. So, I would say let's try out Parcel.

[Kompwu]

@Ashish-Bansal The problem is that with Parcel we can't configure anything, so to manage the manifest.json we'll have to handle it by hand. But, I think with a "hook", we can easily get the hell through. Something like that:

const fs = require('fs');
const manifest = require("./src/manifest.json");
const pkg = require("./package.json");

manifest["name"] = pkg["displayName"]
manifest["version"] = pkg["version"]
manifest['description'] = pkg['description'];
fs.writeFile('dist/manifest.json', JSON.stringify(manifest));

And we run it at the same time as Parcel. ~~But we'll have another problem, no hot reloading on manifest.json... I don't really know how to do this, I guess there must be a library out there to do this easily. I'll see what I can find out.~~ Edit: Okay, we can handle it with fs.watchFile. Time to configure Parcel.

[Ashish-Bansal]

@Kompwu wow, parcel configuration is quite cleaner compared to webpack. Nice 👍

By the way, since we removed crx-webpack-plugin , can you please add npm script for packing up the extension ?

May be https://github.com/oncletom/crx would help.

[Kompwu]

@Ashish-Bansal I'll see what I can do. BTW, can you start backporting #20 ?

[Ashish-Bansal]

Sure.

[Ashish-Bansal]

@Kompwu Did you try loading extension in the browser ? I can see the paths are wrong in the manifest.json due to which it fails to load.

[Kompwu]

@Ashish-Bansal Are you talking about the path for js ? Just change it to ts. I forgot to push the commit to fix that.

[Ashish-Bansal]

@Ashish-Bansal Are you talking about the path for js ?

Yeah. Also, icons doesn't seem to load due to some reason. Though I haven't checked the reason for that yet.

[Kompwu]

@Ashish-Bansal Apart from that, everything works for you?

I've also made some performance improvements ;) Edit: Do you have Discord?

[Ashish-Bansal]

@Kompwu No, it's throwing errors in background script.

Edit: Do you have Discord?

Just did setup. Please share your username.

Edit: Discord Channel link: https://discord.gg/Mm52n3Y

[Kompwu]

@Ashish-Bansal Okay, i'm close. There's definition matching issue on: https://github.com/Kompwu/audio-only-youtube/blob/90dadaf0dfe84fa3a9b9d3946ca3c3c2e36f71f0/src/ts/background.ts#L94 Error in event handler for webRequest.onBeforeRequest/1: Error: Invocation of form webRequestInternal.eventHandled(string, string, string, function) doesn't match definition webRequestInternal.eventHandled(string eventName, string subEventName, string requestId, optional object response) looks like it's passing a function to a function argument that expects an object... I'm so sleepy, I'll keep going after I sleep!

[Kompwu]

@Ashish-Bansal What about #14?