johndoneth / gleam-playground

Try Gleam in your browser!

Gleam Playground

A browser based playground for the Gleam language.

Community: Gleam language Discord channel.

gleam-playground's Issues

Incorrect Layout Resizing

Zooming into the page or resizing the browser window does not re-layout the content as desired; requiring a full page refresh to appear proper.

Examples

Add language-server-protocol support

Once Gleam has a working language server, it should be possible to use it self-contained in the browser to provide completion, documentation viewing, and other nice features.

This could be done by extending the wasm-compiler to provide an entry to spawn an LSP instance then integrating the instance with Monaco.

• monaco-languageclient has a working example here that uses LSP self-contained in the browser.

Mobile page layout improvements

On mobile, the editors are stacked vertically which is usually a good idea. However, the editors intercept touch events making it impossible to scroll the page (not just the editor) by swiping with a finger.

I propose to show a tab bar on mobile instead, with 3 tabs: "Gleam", "Result", "Compiled JS/Erlang". When pressing the "Build & Run" button, the "Result" tab should be opened automatically.

Examples

Having the ability to select from a list of examples could help those trying to learn specific language concepts. A dialog box would be necessary to confirm overwriting the existing code.

Configure logged output

It should be configurable how the output (in the "Result" section) should be presented. I'm thinking about two options:

• Use Gleam syntax instead of JS
• Show prototypes when opening objects

The question is what UI to use for the configuration.

Add text compression

Hello,

share links are very long. But it is very nice that the playground works without any server.

I am proposing to zip it. This is what I came up with:

Case 1

fn tester(flag1, flag2) {
    case #(flag1, flag2) {
        #(True, True) -> True
        #(True, False) -> False
        #(False, True) -> False
        #(False, False) -> False
    }
    case #(flag1, flag2) {
        #(True, True) -> True
        #(True, False) -> False
        #(False, True) -> False
        #(False, False) -> False
    }
    case #(flag1, flag2) {
        #(True, True) -> True
        #(True, False) -> False
        #(False, True) -> False
        #(False, False) -> False
    }
}
pub fn main() {
  tester(True, False)
}

current link:

https://johndoneth.github.io/gleam-playground/?source=Zm4gdGVzdGVyKGZsYWcxLCBmbGFnMikgewogICAgY2FzZSAjKGZsYWcxLCBmbGFnMikgewogICAgICAgICMoVHJ1ZSwgVHJ1ZSkgLT4gVHJ1ZQogICAgICAgICMoVHJ1ZSwgRmFsc2UpIC0%2BIEZhbHNlCiAgICAgICAgIyhGYWxzZSwgVHJ1ZSkgLT4gRmFsc2UKICAgICAgICAjKEZhbHNlLCBGYWxzZSkgLT4gRmFsc2UKICAgIH0KICAgIGNhc2UgIyhmbGFnMSwgZmxhZzIpIHsKICAgICAgICAjKFRydWUsIFRydWUpIC0%2BIFRydWUKICAgICAgICAjKFRydWUsIEZhbHNlKSAtPiBGYWxzZQogICAgICAgICMoRmFsc2UsIFRydWUpIC0%2BIEZhbHNlCiAgICAgICAgIyhGYWxzZSwgRmFsc2UpIC0%2BIEZhbHNlCiAgICB9CiAgICBjYXNlICMoZmxhZzEsIGZsYWcyKSB7CiAgICAgICAgIyhUcnVlLCBUcnVlKSAtPiBUcnVlCiAgICAgICAgIyhUcnVlLCBGYWxzZSkgLT4gRmFsc2UKICAgICAgICAjKEZhbHNlLCBUcnVlKSAtPiBGYWxzZQogICAgICAgICMoRmFsc2UsIEZhbHNlKSAtPiBGYWxzZQogICAgfQp9CnB1YiBmbiBtYWluKCkgewogIHRlc3RlcihUcnVlLCBGYWxzZSkKfQo%3D

new compressed link:

http://localhost:8080/?source=GYOwBALgpgztBOAKYAbAhgcwIwBoyswCYBKMAbwCgxqwBjNGKMAYmXWzwIxPKpv9YAVeAFcoeYWNIBaAHxhJUPv2pDR4sADE0KRjPnbdSlTVaHGE9fq07GylWdsbzUay%2FsBfe%2FUYs2mXHx2HkoTVURFSykwOQV1ewEI9TwXNycE00QXKNcYg3Swv2ybIzSjT28GJlYuQK4QjPDIuOjYxUa%2FZtS8krtCxyMcsr6wgYte3Nj3fi8vAAcRACN8cABbNABLEERSUMhYBCSxFKdiCi8gA

Case 2

Source: https://raw.githubusercontent.com/lpil/nerf/main/src/nerf/websocket.gleam

current link:

https://johndoneth.github.io/gleam-playground/?source=Ly8gRnJvbSBodHRwczovL3Jhdy5naXRodWJ1c2VyY29udGVudC5jb20vbHBpbC9uZXJmL21haW4vc3JjL25lcmYvd2Vic29ja2V0LmdsZWFtCgppbXBvcnQgZ2xlYW0vdXJpLntVcml9CmltcG9ydCBnbGVhbS9odHRwLntIZWFkZXJ9CmltcG9ydCBnbGVhbS9keW5hbWljLntEeW5hbWljfQppbXBvcnQgZ2xlYW0vcmVzdWx0CmltcG9ydCBuZXJmL2d1bi57Q29ubmVjdGlvblBpZCwgU3RyZWFtUmVmZXJlbmNlfQoKcHViIG9wYXF1ZSB0eXBlIENvbm5lY3Rpb24gewogIENvbm5lY3Rpb24ocmVmOiBTdHJlYW1SZWZlcmVuY2UsIHBpZDogQ29ubmVjdGlvblBpZCkKfQoKcHViIHR5cGUgRnJhbWUgewogIENsb3NlCiAgVGV4dChTdHJpbmcpCiAgQmluYXJ5KEJpdFN0cmluZykKfQoKcHViIGZuIGNvbm5lY3QoCiAgaG9zdG5hbWU6IFN0cmluZywKICBwYXRoOiBTdHJpbmcsCiAgb24gcG9ydDogSW50LAogIHdpdGggaGVhZGVyczogTGlzdChIZWFkZXIpLAopIC0%2BIFJlc3VsdChDb25uZWN0aW9uLCBDb25uZWN0RXJyb3IpIHsKICB0cnkgcGlkID0KICAgIGd1bi5vcGVuKGhvc3RuYW1lLCBwb3J0KQogICAgfD4gcmVzdWx0Lm1hcF9lcnJvcihDb25uZWN0aW9uRmFpbGVkKQogIHRyeSBfID0KICAgIGd1bi5hd2FpdF91cChwaWQpCiAgICB8PiByZXN1bHQubWFwX2Vycm9yKENvbm5lY3Rpb25GYWlsZWQpCgogIC8vIFVwZ3JhZGUgdG8gd2Vic29ja2V0cwogIGxldCByZWYgPSBndW4ud3NfdXBncmFkZShwaWQsIHBhdGgsIGhlYWRlcnMpCiAgbGV0IGNvbm4gPSBDb25uZWN0aW9uKHBpZDogcGlkLCByZWY6IHJlZikKICB0cnkgXyA9CiAgICBhd2FpdF91cGdyYWRlKGNvbm4sIDEwMDApCiAgICB8PiByZXN1bHQubWFwX2Vycm9yKENvbm5lY3Rpb25GYWlsZWQpCgogIC8vIFRPRE86IGhhbmRsZSB1cGdyYWRlIGZhaWx1cmUKICAvLyBodHRwczovL25pbmVuaW5lcy5ldS9kb2NzL2VuL2d1bi8yLjAvZ3VpZGUvd2Vic29ja2V0LwogIC8vIGh0dHBzOi8vbmluZW5pbmVzLmV1L2RvY3MvZW4vZ3VuLzEuMi9tYW51YWwvZ3VuX2Vycm9yLwogIC8vIGh0dHBzOi8vbmluZW5pbmVzLmV1L2RvY3MvZW4vZ3VuLzEuMi9tYW51YWwvZ3VuX3Jlc3BvbnNlLwogIE9rKGNvbm4pCn0KCnB1YiBmbiBzZW5kKHRvIGNvbm46IENvbm5lY3Rpb24sIHRoaXMgbWVzc2FnZTogU3RyaW5nKSAtPiBOaWwgewogIGd1bi53c19zZW5kKGNvbm4ucGlkLCBndW4uVGV4dChtZXNzYWdlKSkKfQoKcHViIGV4dGVybmFsIGZuIHJlY2VpdmUoZnJvbTogQ29ubmVjdGlvbiwgd2l0aGluOiBJbnQpIC0%2BIFJlc3VsdChGcmFtZSwgTmlsKSA9CiAgIm5lcmZfZmZpIiAid3NfcmVjZWl2ZSIKCmV4dGVybmFsIGZuIGF3YWl0X3VwZ3JhZGUoZnJvbTogQ29ubmVjdGlvbiwgd2l0aGluOiBJbnQpIC0%2BIFJlc3VsdChOaWwsIER5bmFtaWMpID0KICAibmVyZl9mZmkiICJ3c19hd2FpdF91cGdyYWRlIgoKLy8gVE9ETzogbGlzdGVuIGZvciBjbG9zZSBldmVudHMKcHViIGZuIGNsb3NlKGNvbm46IENvbm5lY3Rpb24pIC0%2BIE5pbCB7CiAgZ3VuLndzX3NlbmQoY29ubi5waWQsIGd1bi5DbG9zZSkKfQoKLy8vIFRoZSBVUkkgb2YgdGhlIHdlYnNvY2tldCBzZXJ2ZXIgdG8gY29ubmVjdCB0bwpwdWIgdHlwZSBDb25uZWN0RXJyb3IgewogIENvbm5lY3Rpb25SZWZ1c2VkKHN0YXR1czogSW50LCBoZWFkZXJzOiBMaXN0KEhlYWRlcikpCiAgQ29ubmVjdGlvbkZhaWxlZChyZWFzb246IER5bmFtaWMpCn0K

new compressed link:

http://localhost:8080/?source=PTAEDECcHsFtQBYBckAcDOAuEkCGB3AOgHMBLJBAVwCNL0BTSAY2gDsl73CXZgAbVKT7BWjAGbBYuUq2DpmI8cHz1q6aEwDW9JCT71csAFBHSsVNEhJQxfYeCVIpQgG8Aqk4C%2Bp85eu2DXmQ0VwAJAwATRm8zCysbO14IgE9WQ1ImVwARVPSmGN94gPtIenRKPiQfOOtRSAliSlZXAGE2USYkUjYABVIIgBpQAGUkUsMAJXoxRk4mem8jVBpQaFRcAEdKelAkZNQdttYOrrZQFyNQUCOT7tYAClKxTBGxwKmZ0tZ5ocEIl5u9E6dz6EQAlEZFstqLt9jsoIYdhcri0%2BNAGJdQAAVegADyQ91GTlYxAhVwAQjJcJBkvdKUgiTJSZCTNDQGJWKAWMcgQTMQh0Ug0rB6C9GSSBpj1hQxWMmZKrmcai8AJLsBWgfDkBCISKMLCgAAypHQBPCuCikDBkrBoAAtAA%2BUBTcqVe6A4FsIYepAAUUgMCt50xY2SoD%2BoAAvJiro1mmtOPcBabhfRfn4yVdQAAfJ2lV26KSoAD6jED7vavLu4Gk%2BnBIZpoGLUZjNiahAI0iQxcoqHuf0zV1zoHzFULuBLZcsFZ5ntYNaE9HrmJAoDcqGIeCiu2gmtU6i0OnQmP01ieUbbzXw6B7G639H7%2FV%2BuAoQwQesg6Ezp657QvPruR9%2FnDJ8R2mF4nkzUMmxbLNQE7chb03C0H25VghgARgABhwwcczzMox0IItSwDacALYBc6whFcwCxAB5LJ6JeBBcFYCJ9FAXtkO3MRa0cehaMQFAMGwEQZE4CT0EIehKGACINHQYBOGAONgAAJkILDVMofp6GUfcNG0JBgCE4JRJAVgJKs0RpNk%2BTFOU2Q1Iwwh1MkNjKFwYQ41IwNTKuVdzKwSzrKkmS5IUpglJUly3I81gvJ8ppi3zCxWAYALQHozR7jQiEoRWDlQAYdj7iQXc0IBSs5yGCgTVAEV0HQXBiFFV5iVJe0nQAOSEYNY3ba9i1KiI8vaQg%2FiGONCBxfF7ialq2rBArWRWPEOEgNI%2BHZTlSnmUgADcHzEGBYGq2dTnQzVtRkVV2FtR1nUIt0ERFIY%2Br4W1oyuAAiOoxGLMQxFIX7QF%2B4b9voI76F%2BkwNsYbbdvg%2FAuyQ%2B97lOuALtuL0bvq1h7qQR6nRdMd7k%2BoYcmFDJvsxf7xCBkGwYhm8EO7bj7zhoxVwYpiXj4E0OE5MRLC5NEGFAehjvYY82WKpgJdQ9ocarNgSdAT6BsvQhhtG8bjkm0CZtRdF6FWnneffNcJhVVYxF2a2VDUIydBKxhjsgHdf0unclhWPYDmuGq%2FTIr3kWDy67g%2BOgl3uU0XzoIm3w%2FA1jVNe5zUtFbMQo%2Bdazj8Z1EJ0BqbyVagA%3D

I think I will allow old code to live on by naming it zsource...

float 32 isn't allowed by the compiler

    // size cannot be used with float
    match categories {
        SegmentOptionCategories {
            typ: Some(Float { .. }),
            size: Some(opt),
            ..
        } => err(ErrorType::FloatWithSize, opt.location()),
        _ => Ok(categories.segment_type()),
    }

erlang floats: 
expected one of the supported sizes 16, 32, or 64

Add GitHub Actions Workflows

Would be nice to run tests / style linting / code linting / enforce code formatting, etc. with GitHub Actions.

Update for latest Gleam

Hello! It would be cool if folks could use the current version of Gleam with the playground :)

Thanks,
Louis

Rewrite playground in Gleam

As discussed here, @JohnDoneth is already working on porting the playground to Gleam. I'd like to know the current status of this port and how one can contribute.