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?

[Enter-tainer]

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