search

AngelMunoz / Perla

A cross-platform tool for unbundled front-end development that doesn't depend on Node or requires you to install a complex toolchain
https://perla-docs.web.app/
MIT License
131 stars 12 forks source link

Referenced Projects are Missing #124

Closed SchlenkR closed 1 year ago

SchlenkR commented 1 year ago

Good Morning,

I tried to port the "Vide.Fable DevApp" from vite to Perla. The result is here:

https://github.com/RonaldSchlenker/Vide/tree/perla_DevApp_depProjComp/Vide.Fable/src/DevApp.Perla

When the app is requested, it is fable-compiled and served, but some files are missing:

grafik

The missing files are from dotnet project references: The DevApp itself has a project reference to another project: (Vide.Fable):

grafik

...which again has a project reference to Vide.Common:

grafik

I've noticed that the compiled .fs.js files are present - but under the project they belong to, quasi "outside" of any served directory:

grafik

Thank you very much for your work. I'm happy to see Perla evolving!

SchlenkR commented 1 year ago

...or maybe this is not an issue, but just a "I don't know how to..." thing. When I use Vite as dev server, fable compilation is invoked like this:

dotnet fable watch ./src/DevApp.fsproj -s -o ./build

If I knew how to pass args to Fable when running dotnet perla serve - that would propably be the solution.

SchlenkR commented 1 year ago

Please excuse me for polluting your issues with Q&A-style things. Anyway: I managed to specify fable output dir by using fable config section in perla.json. In case anyone is interested, it's right here in the Perla docs: https://perla-docs.web.app/#/v1/docs/reference/perla

The Vide DevApp with Perla config is here: https://github.com/RonaldSchlenker/Vide/tree/af39b8ea3ce414eae6187d49319f320a8b208e2e/Vide.Fable/src/DevApp.Perla

There seems to an issue with the index.css - It's references correctly in index.html, it's served correctly, but it's not applied at all. I guess the reason for it is because it's served as text/javascript in the response header:

grafik

Thank you very much for your help!

AngelMunoz commented 1 year ago

Hello there! I'm glad that you were mable to sourt out the first part, there were two options to "fix" that issue, one would be to add another couple "mounted directories" pointing to the fable sources and the other one, precisely what you did, just let fable know where it should output it's sources.

Please excuse me for polluting your issues with Q&A-style things

No worries be my guest!

There seems to an issue with the index.css - It's references correctly in index.html

Yes, there's a small bug that I haven't fixed there for the meantime you can move all of the local css stylesheets to a javascript import. importSideEffects "../assets/index.css" in your App.fs file

I'll make an issue for that before I forget it is there thanks for the feedback!

AngelMunoz commented 1 year ago

This should be fixed in the beta 21 and also sent a PR to your project and ensure it is working :)

If you have more feedback around perla, feel free to let me know!

SchlenkR commented 1 year ago

one would be to add another couple "mounted directories" pointing to the fable sources

Nice feature - seems so simple, yet powerful! Thanks for making that clear. That could save a lot of mind-twisting issues regarding dev/prod scenarios in the future :)

Yes, there's a small bug that I haven't fixed there for the meantime you can move all of the local css stylesheets to a javascript import.

I'll try that - might anyway be the most common scenario for growing projects.

If you have more feedback around perla, feel free to let me know!

What about sass support out of the box / plugin / etc.?

and also sent a PR to your project

Thank you! That's the first PR I got for Vide! If we'll ever meet somewhere, I owe you a beer, or wine - or a Tequila :)

....and thank you - I appreciate your effort, and I see potential in "supporting super-smooth F# / Fable web dev out-of-the-box".

AngelMunoz commented 1 year ago

I'll try that - might anyway be the most common scenario for growing projects.

Please refer to #126 if you go for this, the ideal is to import things from HTML of course as perla to stick as much as possible to HTML/CSS/JS (the standards) but... there are some cool DX experiences like HMR for CSS which can be enabled with importSideEffects './styles.css?js' courtesy of the underlying esbuild support but beware that if you're choosing to output sources in a different directory from fable sources (outDir option in fable) you might have issues as import statements from fable attempt to resolve the physical paths (which is good and not depending on you 😂) and that breaks mountedDirectories as well as esbuild imports for those cases we're stuck in the normal css linking in html files 😓

What about sass support out of the box / plugin / etc.?

I'd like to add support for that but as it is mostly just me doing the development of this tool I don't have a chance to invest too much in certain areas this is one example, thus why I'm sticking with the HTML/CSS/JS out of the box support first, then I might revisit that. One of the blockers I have with sass at the moment is that it doesn't support compiling files in isolation, and that crashes a little bit with our virtual system support (to enable mountedDirectories) I have a few ideas around that area but nothing concrete yet.

Thank you! That's the first PR I got for Vide! If we'll ever meet somewhere, I owe you a beer, or wine - or a Tequila :)

Hopefully one day 😁 thanks!

....and thank you - I appreciate your effort, and I see potential in "supporting super-smooth F# / Fable web dev out-of-the-box".

It is quite simple yet not so! the web dev community has a ton of helper tooling to allow some cool DX but we're not in the same level in F# :) so I try what I can!