feat: vite, vue 3, pnpm, manifest v3, service_worker, etc

[VividLemon]

feat: update to vue@2.7

feat: use pnpm

feat: add typescript

fix: memory leak of an event listener fixes #187

This does various things.

The update to Vue2.7 is a requirement for Vueuse.

The components were converted to script setup because they needed access to composition api.

The goal of this was to show a beginning of https://github.com/simple-login/browser-extension/issues/186 .

The removal of v-clipboard and its replacement with @vueuse/core useClipboard is a minor change (though it may not seem like it with the script setup change, more on that later). The v-clipboard change is ultimately rather large in terms of it's overall affect. See, the package was included globally whereas useClipboard is imported individually. Meaning that it's treeshakable (It's an ESM package). This affects its overall footprint size. This is why I decided to target v-clipboard first.

TypeScript was included. Though its not actually used during the build process (yet). This was to add some type inferences for my ease of use.

Pnpm is now used instead of npm.

There are two major issues that stand out however.

In the https://github.com/simple-login/browser-extension#contributing-guide , I was never able to get the package to start. Meaning I could not verify if the changes that I made actually worked. I would always receive the error Error: error:0308010C:digital envelope routines::unsupported. This occurred before, and after my changes, regardless on if I used npm or pnpm, with node 20.2.0, or the latest version of 20, I tried 18, and 16 as well.

Three Vue files were affected. Two of them were fairly minimal, but Main.vue was a bit larger in terms of its footprint. Look at it carefully. Particularly the loadAlias was troublesome. contentElem was an odd case, as it used document.querySelector, when it could have been a template ref before :thinking: odd choice imo. So I changed that one.

It looks like loadAlias is a virtual scroller. Which could possibly be replaced with useVirtualList from vueuse as well. But I'd need more time with the lib as a whole.

upgrade function was not marked as async, but used await. I made it async

and I left a TODO note in there as there's a function that's referenced getAliasOptions, that's never defined. This should throw, which is odd because the affect should leave this.loading (now loading.value) in a permanent loading = true state.

The fix mentioned was fairly simple, just added it into a onBeforeUnmount hook

If this gets reviewed, and the issue with starting the dev server gets sorted, expect more to come :hugs:

[nguyenkims]

@VividLemon thanks for making this PR! Currently we are on another project and can only look at the PR next week, will let you know!

[D-Bao]

@VividLemon I had the same error Error: error:0308010C:digital envelope routines::unsupported after running npm start with Node v18, but could run the extension with Node v16.20.2 (aka LTS/gallium) using nvm (Node Version Manager). Could you retry using Node v16.20.2? After installing nvm:

nvm install lts/gallium
nvm use lts/gallium

And thanks for your PR! It may not be fully ready yet as I saw some errors when trying to run it but it looks promising, hope you'll be able to start the extension and verify your changes :)

[VividLemon]

I'm going to work on updating to Vite, but I need to work out on how to actually build a web extension. But among other things, there is an active bug in this code.

[VividLemon]

Still working on this. Since I've never made an extension before, I had to learn a bit about how things work. I think I got everything figured out and what exactly is happening now. So, things should speed up on this

[VividLemon]

Clearly, I've been preoccupied lately. Perhaps at a later time I will attempt to complete this