migrate from lit-html to vue components

[amk-dev]

Currently hoppscotch extension uses lit-html to write the UI part of it. but we are planning to migrate it to vue. to make it more easier to work with and to follow the general stack used over hoppscotch.

[The-x-35]

I would like to work on this issue under foss hack. Can I be assigned for this? I have a little experience working with vue previously.

[amk-dev]

Hey @The-x-35

you can work on this. can you write up a brief doc ( add as a reply to this ) on how you're going to tackle this. you'll also want to look into #301. both of these issues goes hand in hand.

[The-x-35]

Hi @amk-dev I saw #301 and here is the brief doc on how will i solve both #300 and #301 . For #300

• Identify the parts of the project using lit-html.
• For each lit-html component, Create a corresponding Vue component.
• Ensure the functionality remains the same.
• Verify that the new Vue components are functioning correctly.

For #301 1st approach: Replace the build and bundling tool Parcel with Vite. 2nd approach: Instead of changing the build script with vite and making it difficult, because I may miss some script or path, I would just create a simple project in vite and recreate all the components of this project in that by copy pasting.

Please guide if I should mend the plan anyway. Also can you please guide me on how to setup the development environment, I could build the project by following the instructions but couldn't find instructions for the dev environment, would I have to build it each time?

[amk-dev]

Hey, you can proceed with your plans. we'll iterate on the output if needed. I would lean towards replacing the parcel bits piece by piece. there are places where we use parcel specific features, you'll have to figure out the equivalents on vite. if you need any help please feel free to comment here.

Also can you please guide me on how to setup the development environment, I could build the project by following the instructions but couldn't find instructions for the dev environment, would I have to build it each time?

yes. make changes -> reload the extension from the browser will be the workflow.

[The-x-35]

Hi @amk-dev sir, I solved this issue. I replaced popup-script.ts with a .vue file and reimplemented all the functionalities and designs exactly in vue. I have tested it and it works same as before. Is this approach correct? About the issue #301 , I am not sure how to proceed with that and what all files to change, if you could guide me a little and assign that issue to me, I would be grateful.