vanilla JS framework for frontend and refactoring work #207

Myriad-Dreamin · 2023-12-30T07:26:05Z

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 · 2023-12-30T16:04:27Z

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

vanilla JS framework for frontend and refactoring work #207

vanilla JS framework for frontend and refactoring work #207

Myriad-Dreamin commented Dec 30, 2023 •

edited

Loading

Enter-tainer commented Dec 30, 2023

vanilla JS framework for frontend and refactoring work #207

vanilla JS framework for frontend and refactoring work #207

Comments

Myriad-Dreamin commented Dec 30, 2023 • edited Loading

Enter-tainer commented Dec 30, 2023

Myriad-Dreamin commented Dec 30, 2023 •

edited

Loading