lustre - nothing is rendering, blank page | The Gleam Programming Language | Page 1

runic hatch Jun 30, 2024, 10:56 PM

#

i'm not sure what i've done wrong this time lol

project structure:

- tissue/
  - src/
    - app.gleam
    - db.gleam
    - error.gleam
    - issue.gleam
    - tissue.gleam

tissue.gleam:

import lustre

import app

pub fn main() {
  let app = lustre.simple(app.init, app.update, app.view)
  let assert Ok(_) = lustre.start(app, "#app", Nil)
}

app.gleam:

import gleam/int
import gleam/list

import db
import issue.{type Issue}

import lustre/attribute
import lustre/element.{type Element}
import lustre/element/html
import lustre/ui

pub type Model {
  AllIssues(issues: List(Issue), failed_count: Int)
  ViewIssue(issues: List(Issue), failed_count: Int, selected: Issue)
}

pub fn init(_flags) -> Model {
  let assert Ok(#(issues, failed)) = db.load_all()

  AllIssues(issues, failed |> list.length)
}

pub opaque type Msg {
  UserClickedAllIssues
  UserClickedViewIssue(issue: Issue)
}

pub fn update(model: Model, msg: Msg) -> Model {
  case msg {
    UserClickedAllIssues -> AllIssues(model.issues, model.failed_count)
    UserClickedViewIssue(issue) ->
      ViewIssue(model.issues, model.failed_count, selected: issue)
  }
}

pub fn view(model: Model) -> Element(Msg) {
  let styles = [#("width", "100vw"), #("height", "100vh"), #("padding", "1rem")]

  ui.centre(
    [attribute.style(styles)],
    html.div([], [
      html.h1([], [element.text("Issues")]),
      ui.stack(
        [],
        model.issues
          |> list.map(fn(a) {
            html.p([], [
              element.text("#" <> a.id |> int.to_string <> " - " <> a.title),
            ])
          }),
      ),
    ]),
  )
}

db.gleam:

import gleam/int
import gleam/list
import gleam/result

import simplifile

import error.{type Error}
import issue.{type Issue, Issue}

pub fn save(this issue: Issue) -> Result(Nil, simplifile.FileError) {
  let directory = "./database/" <> issue.location <> "/"
  let filename =
    "#" <> issue.id |> int.to_string <> " - " <> issue.title <> ".json"

  use _ <- result.try(simplifile.create_directory_all(directory))

  simplifile.write(to: directory <> filename, contents: issue |> issue.to_json)
}

pub fn load(from path: String) -> Result(Issue, Error) {
  simplifile.read(path)
  |> result.map_error(error.File)
  |> result.map(issue.from_json)
  |> result.flatten
}

pub fn load_all() -> Result(#(List(Issue), List(Error)), Error) {
  simplifile.get_files("./database")
  |> result.map(fn(paths) {
    paths |> list.map(load) |> list.reverse |> result.partition
  })
  |> result.map_error(error.File)
}

any idea what's wrong? i doubt error.gleam or issue.gleam are relevant, but i'll post them if needed

analog spire Jun 30, 2024, 10:58 PM

#

might be simplifile trying to load node stuff, check the console

runic hatch Jun 30, 2024, 10:59 PM

#

ooh, so those CORS errors are bad

#

oof lol

#

i was hoping it wasn't that lol

#

alright i guess i'll have to figure that out haha

signal flint Jun 30, 2024, 11:08 PM

#

Seems like you're trying to do file access in the browser? This doesn't work

runic hatch Jun 30, 2024, 11:09 PM

#

i'm still sorta figuring out how lustre works, i was naively hoping that somehow magically it would run that on the backend and pass it to the frontend but i have no idea why i thought that lol

#

i'm just gonna do what i should have done in the first place and have lustre send a GET request to retrieve things

supple lichen Jun 30, 2024, 11:10 PM

#

i think you're mixing frontend constructs with backend constructs a bit yeah

signal flint Jun 30, 2024, 11:10 PM

#

If you mount it as a server c9mponent it might work

supple lichen Jun 30, 2024, 11:10 PM

#

doing it RESTfully is probs the way to go unless you want to go down the server component route

runic hatch Jun 30, 2024, 11:10 PM

#

i have basically no experience in app development lol, i mostly write system stuff

#

so it might take me a bit to get out of the habit of "just ask the machine for the thing you want and it'll get it from the filesystem"

supple lichen Jun 30, 2024, 11:11 PM

#

that's fair :) nobody's judging you for learning it I promise

runic hatch Jun 30, 2024, 11:11 PM

#

lol

supple lichen Jun 30, 2024, 11:11 PM

#

I'm learning in reverse order as a web dev of 10 years trying to get better at systems lol

runic hatch Jun 30, 2024, 11:11 PM

#

haha

#

thanks

#

i think i'm on the right track now using lustre_http to request the data from a real backend

runic hatch Jun 30, 2024, 11:36 PM

#

alright i'm very confused now lol

#

i've completely removed simplifile as a dependency, yet i'm still getting the CORS errors, and still nothing is rendering

#

#

i also tried gleam clean and removing manifest.toml but that didn't do anything either

weary smelt Jun 30, 2024, 11:56 PM

#

how are you serving this?

runic hatch Jun 30, 2024, 11:56 PM

#

lustre dev tools

#

i'll switch to wisp once i have a working frontend lol

weary smelt Jun 30, 2024, 11:58 PM

#

i'm fairly confident simplifile is still getting included in your bundle somehow

supple lichen Jun 30, 2024, 11:59 PM

#

im guessing rm -rf'ing your build dir might help

runic hatch Jul 1, 2024, 12:11 AM

#

isn't that what gleam clean does?

#

tried rm -rf build anyway, same issue

#

although when i ran the dev server it said it was compiling simplifile...

weary smelt Jul 1, 2024, 12:13 AM

#

i think that uses it though, so that's probably not unexpected?

runic hatch Jul 1, 2024, 12:13 AM

#

that's what i thought but now i'm concerned lol

#

what the hell, it is being included in my bundle

#

i found the imports

#

#

the question is why

#

that's the only place simplifile pops up, and none of the things it's importing there are ever used

#

it's kinda just importing things for no reason lol

#

oh what, it somehow got re-added to my gleam.toml

#

what is going on 😂

#

alright i have no idea what's wrong

#

i removed it from my gleam.toml again, removed my manifest.toml, removed my build dir, recompiled, checked again it's not in my gleam.toml, and yet it's still in the bundle

#

i deleted the bundle and let it regenerate, still includes simplifile

#

uhhhh, this has to be a bug at this point right?

#

good news is if i manually delete the imports, my frontend does seem to work correctly lol

dreamy copper Jul 1, 2024, 5:07 AM

#

Show me your gleam.toml

#

gleam caches dependencies so it will still be in build/dev/javascript/simplifile because you built the project with simplifile as a dependency once before you removed it

#

remove simplifile from your gleam.toml, remove your build folder, try again

runic hatch Jul 1, 2024, 1:08 PM

#

i did, multiple times

#

gleam.toml

name = "tissue"
version = "1.0.0"

# Fill out these fields if you intend to generate HTML documentation or publish
# your project to the Hex package manager.
#
# description = ""
# licences = ["Apache-2.0"]
# repository = { type = "github", user = "username", repo = "project" }
# links = [{ title = "Website", href = "https://gleam.run" }]
#
# For a full reference of all the available options, you can have a look at
# https://gleam.run/writing-gleam/gleam-toml/.

[dependencies]
gleam_stdlib = ">= 0.34.0 and < 2.0.0"
gleam_json = "1.0.1"
# simplifile = ">= 1.0.0 and < 2.0.0"
lustre = ">= 4.3.0 and < 5.0.0"
lustre_ui = ">= 0.4.0 and < 1.0.0"
lustre_dev_tools = ">= 1.3.4 and < 2.0.0"

[dev-dependencies]
gleeunit = ">= 1.0.0 and < 2.0.0"

#

then i ran gleam clean, build dir is now removed

dreamy copper Jul 1, 2024, 1:18 PM

#

dev tools is not a dev dependency

runic hatch Jul 1, 2024, 1:19 PM

#

ooh, does that break things?

dreamy copper Jul 1, 2024, 1:19 PM

#

i'd think so

runic hatch Jul 1, 2024, 1:20 PM

#

i'll test!

#

nope, still broken

dreamy copper Jul 1, 2024, 1:25 PM

#

is it open source or something

runic hatch Jul 1, 2024, 1:26 PM

#

it's not published, but i'm sure the director would be fine with it being open source

runic hatch Jul 1, 2024, 4:43 PM

#

I'll publish the current setup on github so you can poke around if you want, i'm totally at a loss

livid mortar Jul 1, 2024, 6:01 PM

#

i guess lustre_dev_tools should be in [dev-dependencies]

runic hatch Jul 1, 2024, 6:22 PM

#

i moved it there but i'm still having the issue

#

and i cleaned my build dir after too

runic hatch Jul 2, 2024, 3:11 AM

#

oml

#

i finally found the bug

#

all i had to do was run the compiler manually and read the error message

#

#

i'm still importing simplifile, even though it's not in my gleam.toml

#

🫠

#

welp, that's what i get for saying i don't think error.gleam is relevant lolsob

supple lichen Jul 2, 2024, 3:59 AM

#

😭 oh no

runic hatch Jul 2, 2024, 3:59 AM

#

okay that was entirely my fault, but man i suddenly really wish transitive imports were a compile error

supple lichen Jul 2, 2024, 4:00 AM

#

i run into these issues a bit and it's pushed me into being the most grep-pilled man in the southern hemisphere. highly recommend

runic hatch Jul 2, 2024, 4:00 AM

#

i spent the last day developing my app by manually deleting the node imports from my bundle every single time i make an edit

#

in hindsight i probably should have used sed or something but eh lolsob

supple lichen Jul 2, 2024, 4:02 AM

#

compiler "unprovided import" might be a helpful issue aye

runic hatch Jul 2, 2024, 4:02 AM

#

if i can work up the courage to admit to louis what i did 😂

supple lichen Jul 2, 2024, 4:03 AM

#

LOL

signal flint Jul 2, 2024, 4:03 AM

#

supple lichen compiler "unprovided import" might be a helpful issue aye

but there already is that?

runic hatch Jul 2, 2024, 4:04 AM

#

well it's a warning

#

probably shouldn't be allowed at all though

supple lichen Jul 2, 2024, 4:05 AM

#

if the module doesn't exist it should be an error

runic hatch Jul 2, 2024, 4:06 AM

#

it's even worse imo, it does exist but it's hidden and i shouldn't have access to it

signal flint Jul 2, 2024, 4:06 AM

#

it do exist its just trans||itive||

runic hatch Jul 2, 2024, 4:07 AM

#

sorry gleam discord, no more trans imports

#lustre - nothing is rendering, blank page