JavaScript Loader

#webdev #javascript #maxbox #pascal

Loaders are transformations that are applied to the source code of a module or a script. They allow you to pre-process files or html with javascript inside as you import or “load” them. Thus, loaders are kind of like “tasks” in other build tools and provide a powerful way to handle front-end build steps.
The idea is to download a JS programm and run it native locally in a runtime browser (webview2) with some modifications in it, based on a script you deliver before. I call this a multiple deployment as a fixture:

const
  SINWAVES2URL= 'https://raw.githack.com/maxkleiner/maXbox4/master/assets/sinwavesjs.html';
aMS:= TMemoryStream.Create;
 try
   HttpGet(SINWAVES2URL, amS)
   writeln('urlcontent size: '+itoa((ams.size)));
   aMS.Seek(0, 0);
   memoHTML.lines.loadfromstream(aMs);
   //javascript fixture_
   memoHTML.text:= StringReplace(memoHtml.text,'frequency = 20;','frequency = 30;',[rfReplaceAll]); 
   memoHTML.text:= StringReplace(memoHtml.text,'Sine Wave</h3>','Sine Wave F30</h3>',[rfReplaceAll]); 
   navigatetoString(memoHTML.text);
 finally
   aMS.Free
 end;

For example, you can use loaders to tell a website to load a CSS with javascript file and to modify parameters in JavaScript before you run it in a local browser of webview2.

Loaders can be chained. Each loader in the chain applies transformations to the processed resource for example load the url as a stream in a memo with lines, modify two parameters (frequency and title in our example) an run it with navigatetoString(memoHTML.text); on a browser:

with TEdgeViewForm.create(self) do begin
   PageControl1.ActivePageIndex := 1;
   edit1.text:= SINWAVES2URL;
   aMS:= TMemoryStream.Create;
   try
     HttpGet(SINWAVES2URL, amS)
     writeln('urlcontent size: '+itoa((ams.size)));
     aMS.Seek(0, 0);
     memoHTML.lines.loadfromstream(aMs);
     //javascript fixture_
     memoHTML.text:= StringReplace(memoHtml.text,'frequency = 20;','frequency = 30;',[rfReplaceAll]); 
     memoHTML.text:= StringReplace(memoHtml.text,'Sine Wave</h3>','Sine Wave F30</h3>',[rfReplaceAll]); 
     navigatetoString(memoHTML.text);
   finally
     aMS.Free
   end;    
   showmodal
   free;
 end;

The script is available at:
javascript_execute2_5_script

When distributing your application, there are a few ways you can ensure the WebView2 Runtime is on client machines.
The Bootstrapper evergreen is a tiny installer that downloads the Evergreen Runtime matching device architecture and installs it locally. There is also a Link that allows you to programmatically download the Bootstrapper.

One of the main benefits of using the Edge WebView2 Runtime is its support for a latest web standards such as HTML5, CSS3, and JavaScript ECMAScript 2020. This means that developers can take full advantage of this web technologies to create high-quality user experiences independent from the standard browser.

Unlike Electron and CEF (Chromium Embedded Framework), it’s installed on the OS for use by any app that needs it, so apps no longer need to include it in their installer (but can if you want to). It will become pervasive on Windows through Win 10 updates and inclusion in Win 11.