vanilla JS framework for frontend and refactoring work

We need a JS framework to deduplicate code like this:

https://github.com/Enter-tainer/typst-preview/blob/e31b29cd302262693d7c7fc6c0d2354bf3ed7f81/addons/frontend/src/typst-doc.ts#L574-L597

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](https://github.com/microsoft/vscode-webview-ui-toolkit/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Acreated-asc).
  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](https://krausest.github.io/js-framework-benchmark/2023/table_chrome_117.0.5938.62.html). 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?


	/// 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}`);
	}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

vanilla JS framework for frontend and refactoring work #207

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development