An interactive Lustre tutorial on gleamtours

[autumn osprey]

I actually finished implementing my first tutorial quicker than I expected. You can try it here. https://gleamtours.com/lustre-tutorial/introduction/welcome-to-lustre/
It's a walk through creating a web app with Gleam and Lustre. The app is rendered in a separate window because future tours will allow you to implement a client and server and so the sandbox can't just be an element in the tours UI.

[night sparrow]

incredible! 🤩

[golden ether]

Very cool!
Not sure if it's expected but on Firefox (macOS) I'm getting

proxy 

error: TypeError: ServiceWorker script at https://gleamtours.com/proxy.js for scope https://gleamtours.com/ threw an exception during script evaluation.

It works in Chrome, and as far as I can tell Safari although in Safari there is an overflow issue in the layout

[autumn osprey]

@golden ether thanks for the heads up. I should be able to test in firefox, do you get the actual error in the console anywhere?

unfortunetly I don't have safari, so testing that might be a little harder

[golden ether]

Strangely I get no error in the console, and in the Application tab of the FF DevTools it shows that no ServiceWorker has been registered.

I think the Safari layout issue can be fixed by setting an explicit height on the #right panel like so.
But also there I'm getting an error with the popup:

SecurityError: Blocked a frame with origin "https://gleamtours.com" from accessing a cross-origin frame. Protocols, domains, and ports must match.

No idea why, looks to me like the popup is on the same origin

[misty spire]

Wow amazing! I was just reading the Lustre quickstart guide!

[autumn osprey]

@golden ether is it firefox or safari giving you that error?

I have a new exciting error

[night sparrow]

i saw a similar error on safari, seems like your worker is doing something "naughty"?

[autumn osprey]

The original firefox error is for the following https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/serviceWorker not being available.

[golden ether]

On Firefox there is no error in the DevTools for me at all, only on the page itself, in the output area, that one:

error: TypeError: ServiceWorker script at https://gleamtours.com/proxy.js for scope https://gleamtours.com/ threw an exception during script evaluation.

I suspect you are catching it somewhere, pretty printing it to your output box, and not logging it back to the console so there is no trace or anything in the console.

In Safari, there is no error in the console or in the output for me on first load, and I see the compiler warnings in the output.
But when clicking 'Run' this error appears in the console and the popup does not work as can be seen in my video:

SecurityError: Blocked a frame with origin "https://gleamtours.com" from accessing a cross-origin frame. Protocols, domains, and ports must match.

[autumn osprey]

actually firefox doesn't make accessing service worker logs anywhere very easy https://discourse.mozilla.org/t/how-to-enable-console-log-from-service-worker/130394

[autumn osprey]

should an origin include a "/" for the path. I think that there is some inconsistency there and that is the problem

[autumn osprey]

Origin should not include the path.

@muted relic I've opened an issue on stdlib to change the origin fn. https://github.com/gleam-lang/stdlib/issues/623

[autumn osprey]

Fixed and deployed for firefox. thanks for some help @golden ether

[golden ether]

Amazing, and great work on this also!
I haven't really used Service Workers before, seems like magic to me.
Am I understanding correctly that the gleam compiler is running compiled to wasm in the browser? Like there is no backend at all for this?
If so that's super cool

[autumn osprey]

Yep all in browser.

@golden ether do you get the same layout issue on the official https://tour.gleam.run/ page if there are multiple warnings?

[golden ether]

nope, the input / output boxes scroll correctly there.

As mentioned though, setting a fixed height on the #right container like I showed in the video as well makes it behave correctly as far as I can tell

[autumn osprey]

yeah I'll add that. I currently just pull everything from the main gleam tour so wonder how I have broken it 🤔

[golden ether]

ah perhaps not 100% correctly, it looks like some padding is missing, but that could be added in the calc I suppose

[golden ether]

ahh I see, yeah no idea