vanilla JS framework for frontend and refactoring work

[Myriad-Dreamin]

We need a JS framework to deduplicate code like this:

typst-preview/addons/frontend/src/typst-doc.ts

Lines 574 to 597 in e31b29c

   /// Create outer rectangle 
   if (firstPage) { 
     const rectHeight = Math.ceil(newHeight).toString(); 
  
     const outerRect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); 
     outerRect.setAttribute("class", "typst-page-outer"); 
     outerRect.setAttribute("data-page-width", newWidth.toString()); 
     outerRect.setAttribute("data-page-height", rectHeight); 
     outerRect.setAttribute("width", newWidth.toString()); 
     outerRect.setAttribute("height", rectHeight); 
     outerRect.setAttribute("x", "0"); 
     outerRect.setAttribute("y", "0"); 
     // white background 
     outerRect.setAttribute("fill", this.backgroundColor); 
     svg.insertBefore(outerRect, firstRect); 
   } 
  
   /// Update svg width, height information 
   svg.setAttribute("viewBox", `0 0 ${newWidth} ${newHeight}`); 
   svg.setAttribute("width", `${Math.ceil(newWidth)}`); 
   svg.setAttribute("height", `${Math.ceil(newHeight)}`); 
   svg.setAttribute("data-width", `${newWidth}`); 
   svg.setAttribute("data-height", `${newHeight}`); 
 } 

The JS framework should be like vanilla JS, since:

• webview doesn't like too complicated code and framework. For example, there are pain upstream bugs found in vscode-webview-ui-toolkit.
  PS: we also have found some upstream bug of SVG rendering in webview, which hints that we may be better to have fully control of our code. Instead we will come into no idea on solving upstream bugs.
• the JS framework should easily interoperate with vDOM of typst documents.

I personally pick https://github.com/vanjs-org/van with seeing benchmark. It is also the first googled item. But we can check other ones.

The refactoring plan and work needs participation of @Enter-tainer.

It is not quite urgent, and once we have a plan, we can break refactoring into parts and merge them into main branch. The each part of code refactoring should be simple, easy to review. And they should get separated into multiple version publish, so to avoid thrushing the stability of software?

[Wenzhuo Liu]

For the code piece shown in the desciption I think vanjs is OK. I wonder do we need the reactive functionality of it. I guess it might be useful in presentation mode where there are multiple buttons and key bindings