search

dotnet-websharper / core

WebSharper - Full-stack, functional, reactive web apps and microservices in F# and C#
https://websharper.com
Apache License 2.0
600 stars 50 forks source link

Sitelet debug with npm packages STEP 3 #1408

Open Jand42 opened 6 months ago

Jand42 commented 6 months ago

Last piece needed for working with Sitelets using module-based JS. For local debug mode, for readability and quick iteration, it would be best if one-file-per-class readable .js files are used. However, browsers can't handle npm package imports as is, because it's underdefined (the packages-lock.json file and the node_modules folder are not accessible through the localhost server).

We need to provide either an import map or an integration for a localhost prebundler like Vite.

Jand42 commented 2 months ago

Added a Vite helper in #1410

Jand42 commented 2 months ago

A proposal:

In OFPC debug mode, WebSharper unpack would create a viteinfo.txt in the Scripts\WebSharper folder containing the full path of the project for identifying it. Startup would look at launchSettings.json for a setting websharper:ScriptRedirectUrl. (which is the same as ScriptRedirectUrl inside the section websharper) If found, http://localhost:X/Scripts/WebSharper/viteinfo.txt is checked, if replies and it's our current project, nothing is done. Otherwise starting up npx vite --port X, preferably with a console window. But we should somehow get the output too, so if port is blocked by something else, we either raise an error or change websharper:ScriptRedirectUrl. If there is no websharper:ScriptRedirectUrl value found, an random empty port is grabbed (from some range, not to collide with common ports, I'll research this a bit more how ANC does it for example), then this is persisted in launchSettings.json.