Update to use latest Vue.js

[psiinon]

See #1109

The Vuejs libs names have changed.
According to https://vuejs.org/guide/quick-start.html#without-build-tools it looks like the *.esm-browser.js files might be the ones to use but I tried changing the build and html/js files to use them and it still didnt work.
Someone with more JS knowledge than me might be able to solve this much more quickly ;)

[njmulsqb]

I have some questions before starting work on this:

1. What challenges you faced while migrating to the latest version?
2. I can see the vue 2.6.14 is being used, do you want it to the latest VueJS or some specific 3.x version?
3. Can I restructure the project and break it into smaller components if required?
4. What is the go-to directory to start migrating stuff into and which directory does not need any change at all? Some pointers will definitely save time for me.
5. How the newer version has damaged the working of HUD?

Also, when I run gradlew runZap in HUD directory, why it starts to download ZAP zip? I have zap source in the same directory why don't it runs it straightaway? Also I would require some tips on handling JS with ZAP, do I need to build zap-hud each time with the change and deploy it somewhere?

[psiinon]

Some answers 😄

1. I cant honestly remember, other than whats written above, ie all the js libs being renamed and not really knowing which ones to use
2. Latest would be ideal
3. Yes
4. I'd start here: https://github.com/zaproxy/zap-hud/blob/main/package.json#L100-L101
5. I cant honestly remember, but I'm pretty sure it was unusable

You dont have to use runZap if you have zap installed locally. I just use copyZapAddOn ..

[njmulsqb]

Ok. To check my changes in the HUD code base, each time I need to run copyZapAddOn and run ZAP and then browser with HUD enabled? No other easy way? :P

[psiinon]

It depends on what changes you make. If they are just client side then copyHudClientFiles may work ok - you shouldnt have to relaunch ZAP, just launch a new browser. But if you make any java changes you will need to copy the add-on

[njmulsqb]

Hi all,

I spent some time today to learn Vue 3, so that it can help in migrating to the latest version, currently under src/main/zapHomeFiles/hud we have the client side files as follows:

1. display.css
2. display.js
3. display.html

The VueJS code is in .js file, which references to the template being used in .html file and the styles go in .css file. Whereas the latest convention being followed now in Vue 3 is to use a single file component aka SFC with extension of .vue which will contain all three, the html templates, the styles and the vue code.

The display.js file contains multiple components i.e. modal, nav-modal, dialog-modal so if I want to break display.js into a .vue file I should better divide it into smaller SFCs and the structure then may look like:

• zapHomeFiles/hud
  • components
    • display
      • modal.vue
      • nav-modal.vue
      • dialog-modal.vue
      • ...
        It will improve the modularity and code structure a bit, and since we are changing the code structure I have a few more suggestions about changing the directory structure of HUD.

Currently, the java and javascript code is not separated properly, the package files and the gradle files are mixed at same level, how I think the structure roughly should be is as follows

• zap-hud
  • java code
    • buildSrc
    • gradle
    • src
      • file.java
      • file2.java
  • javascript code
    • node_modules
    • package.json
    • src
      • components
        • display
          • file.vue

In this way, we can separate the two languages resulting in better management of the codebase. The above hierarchy is just a rough and can be improved upon.

This task can drag away from the title of this issue i.e. updating VueJS version but since we're updating the HUD so I guess its the right time to make directory structure changes as well.

What do you guys suggest, given your experience how should this be approached? Should we first update VueJs version and then make directory changes to rest of the repo, or should we do it in parallel? In any case, the HUD is going to get broken and we won't be able to test it untill unless we complete the implementation so the decision need to be taken here wisely as lots of time is going to be invested in it.

Lastly, while trying to understand the HUD codebase I am really feeling the need of proper developer comments in each file, like I am unable to understand the working of HUD on code level, shouldn't we introduce comments or maybe have some sort of developer docs which will make the life easier for developers to contribute to HUD and they dont have to read the codebase line by line, and just have a look at comments/docs?

[psiinon]

I'd recommend updating VueJs first.
That will need to work before we can merge the changes, but then the restructuring can be performed over multiple PRs (if that works better).
Comments which explain how the code works are good, as long as they are not of the Adds one to x variety 😁
We have some dev docs in the wiki but they could definitely do with improving / updating.

[njmulsqb]

Thanks @psiinon for feedback.
I will begin with updating Vue first, as for docs, the wiki contains some useful info. Can I somehow update the wiki section? I can try to improve it on the go, but can't find any edit button for it. The fork has no wiki at all as a matter of fact.

[psiinon]

Pick a wiki page and have a look on the right hand side - you should see Clone this wiki locally - you can then update it and submit PRs 😁

[psiinon]

Ugh, my bad - the wikis dont support PRs 😦
How about to migrate the HUD internal docs to the website?
Thats a better option and easier to manage.
Maybe under https://www.zaproxy.org/docs/developer/ ?

[njmulsqb]

How about to migrate the HUD internal docs to the website? Thats a better option and easier to manage. Maybe under https://www.zaproxy.org/docs/developer/ ?

Good idea, how does the process looks like?

[psiinon]

Have you updated the website before?
Pages are pretty easy to create as long as you're not trying to do anything radically new.
Theres an "Edit on GitHub" link on many of them which should give you a good starting point.
Do you think you'll need multiple pages?
If so then you'll need to create a new directory similar to https://github.com/zaproxy/zaproxy-website/tree/master/site/content/docs/developer

[njmulsqb]

I closed my previous PR #1253; direct upgradation to 3 is def gonna produce lots of issues, so it makes sense to go step by step. Opened a new PR #1287 that upgrades to 2.7 which is an Extended LTS version (going out of support by the end of this year).

[njmulsqb]

Opened another PR (#1376 ) that further upgrades vue 2.7 to Vue 3.1 migration build. This can be a solid step forward in our journey to Vue 3. After this PR, we will be on Vue 3 technically, just have to get rid of migration build as a next step.