lustre-labs / dev-tools Goto Github PK

View Code? Open in Web Editor NEW

38.0 38.0 14.0 141 KB

Lustre's CLI and development tooling: zero-config dev server, bundling, and scaffolding.

JavaScript 0.68% HTML 0.89% Gleam 95.05% Erlang 3.31% CSS 0.07%

dev-tools's People

Contributors

Stargazers

Watchers

Forkers

chrisbirster svaught598 enoonan tanklesxl dch

dev-tools's Issues

Make sure all commands and flags are documented.

Glint gives us really nice auto-generated help text. We should make the most of it and make sure we have helpful descriptions for every command and any of its flags.

Question: Run without Erlang?

Note: originally posted at lustre-labs/lustre#130 (comment)

Hi! Thanks for this library, I just wanted to try it because it looks amazing.

However, when starting out, I ran into a problem:

> gleam run -m lustre/dev start
  Compiling argv
error: Program not found

The program `escript` was not found. Is it installed?
Documentation for installing Erlang can be viewed here:
https://gleam.run/getting-started/installing/

This looks like Erlang is required to run the dev server. Is this assumption true? I have not installed Erlang yet, but I have installed NodeJS. Gleam seems to runs fine up to this point. I don't know if it's an official goal of Gleam, but it would be nice to not require Erlang when running on NodeJS. What do you think?

Would it be a goal of lustre to make the dev server run on pure NodeJS? Would it even be possible?

Update: I have installed Erlang, and manually had to add it to PATH, but now it fails because it seems I also need to install rebar3 just to run the dev-server, not even sure how to do that...?

Websocket connection issues

I'm not sure if this is something that the dev_tools even has any control over, but if you run a project with gleam run -m lustre/dev start, then navigate google chrome to the http://localhost:1234, then force close the devtools with Ctrl-c Ctrl-c, after a couple of moments you get this:

and eventually this:

in which eventually 100% of the cpu is being used.

Is this just a browser issue, or something that dev_tools could address?

Report compiler errors if project fails to build.

At different points we attempt to build the users Gleam project. If this build fails for some reason, we currently error with a message like:

It looks like your project has some compilation errors that need to be addressed
before I can do anything.

This is not particularly helpful! We should take the stderr from the Gleam process and print it out so that users aren't left scratching their heads.

Add warning for Windows users that they need elevated privileges to run dev tools commands.

Some Windows users were reporting problems running anything from our dev tools. They were getting a file I/O error. After a user did some digging it turns out that this is a rebar thing whereby it's creating symlinks for any dep that has a priv/ directory.

Creating symlinks needs elevated privileges so your editor (or terminal) needs to be in admin mode or you will always get an error like:

Error: File input/output error

An error occurred while trying to link this file:

    C:\projects\gleam\lustre\examples\05-http-requests\build\dev\erlang\gleam_package_interface\priv

The error message from the file I/O library was:

    The client does not have the required rights. (operating system error 1314)

This isn't really our problem but we can absolutely warn Windows users ahead of time so they're not scratching their head or thinking we're the ones at fault!

Failed to construct 'WebSocket'

I followed the guide at https://hexdocs.pm/lustre/guide/01-quickstart.html, but I can't get it to work.

MacOS Sonoma 14.4 (Apple M2)
gleam 1.1.0-rc3 (because lustre_dev_tools requires Gleam 1.1.0)

Steps to reproduce

gleam new app && cd app && gleam add lustre
add target = "javascript" to gleam.toml
add "Hello, world!"

import lustre
import lustre/element

pub fn main() {
  lustre.element(element.text("Hello, world!"))
}

gleam add --dev lustre_dev_tools
gleam run -m lustre/dev start

`build` command does not check for reserved words before building.

In gleam it's entirely possible to have modules and functions that use names that would be reserved in javascript. Eg you can have a function called new even though new is a javascript keyword. This is possible because the gleam compiler will actually name the function new$ when emitting js.

Lustre's build tooling doesn't currently take this into account.

✅ Project compiled successfully
✅ Esbuild installed!
❌ Bundling with esbuild

I ran into an error while trying to create a bundle with esbuild:
✘ [ERROR] No matching export in "build/dev/javascript/shared/shared/components/counter.mjs" for import "new"

    build/.lustre/entry.mjs:2:24:
      2 │          import { name, new as component } from '../dev/javascript/...
        │                         ~~~
        ╵                         new$

  Did you mean to import "new$" instead?

    build/dev/javascript/shared/shared/components/counter.mjs:70:16:
      70 │ export function new$() {
         ╵                 ~~~~

1 error

Tailwind: update readme to note that you must include the css file similar to lustre_ui

It might just be me, but when I first read the readme: "Automatic detection and support for TailwindCSS." I made the assumption that after adding tailwind it would just work. But I had to update the index.html file to include the stylesheet, which makes sense. But it wasn't immediately made clear in the installation directions. When comparing that with the lustre_ui package, it has a small section letting you know to include the css files.

A small quality of life improvement could be scanning the index.html file to see if the stylesheet is missing from head and including it after the write_tailwind_config call. Or alternatively mention it in the output of the cli to include the css file after running the add tailwind command.

tailwind-entry flag should be available on lustre/dev start command

currently the --tailwind-entry flag can only be used with the build command and not the start command.

Add `--inpufile` to define a starting point for tailwind

Most users are used to having app.css or something where we do tailwind setup, this also allows for an easy way to add some extra css classes/components with tailwind layers. the example bellow is a bit more involved. but it portrays the point

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@import './components/buttons.css';
@import './components/fields.css';
@import './components/loader.css';
@import './components/modal.css';
@import './components/stack.css';

@layer base {
  html:has(dialog[open]) {
    overflow: hidden;
  }
}

Not sure if this is a use case for the dev tools or not.

Thank you for your awesome work!

Make dev server url clickable.

Lots of modern terminals have support for opening links directly from the terminal, including localhost ones. The way we currently print the dev server message means some terminals don't recognise it at as a link:

✅ Started dev server at localhost:1234...

I suggest we just remove the trailing periods:

✅ Started dev server at localhost:1234

Failure to compile a program when using a JS window API on Linux

I have the same error described in lustre-labs/lustre#56 where it fails for me with the following output:

/tmp/taskmgr/build/dev/erlang/taskmgr/_gleam_artefacts/taskmgr.erl:110:25: function row_show_hide_ani_effect/0 undefined
%  110|                         row_show_hide_ani_effect()};
%     |                         ^

error: Shell command failure

This issue is possibly a bug in Gleam described in gleam-lang/gleam#2820.

Reproduction:

git clone 'https://git.sr.ht/~greenfork/taskmgr'
cd taskmgr
git checkout erlang-bug2
gleam run -m lustre/dev build app

Here is a patch I applied to make sure that I did all the upgrades necessary since the last time I reported the issue. Full code is also available in the repository above.

diff --git a/Makefile b/Makefile
index 6f78b42..fafb092 100644
--- a/Makefile
+++ b/Makefile
@@ -1,6 +1,6 @@
 build:
-	-rm -r build/prod
-	gleam run -m lustre build app
+	# -rm -r build/prod
+	gleam run -m lustre/dev build app
 	cp priv/static/taskmgr.mjs public/
 
 watch:
diff --git a/gleam.toml b/gleam.toml
index 3269fcd..a2fcfa8 100644
--- a/gleam.toml
+++ b/gleam.toml
@@ -15,7 +15,7 @@ version = "1.0.0"
 
 [dependencies]
 gleam_stdlib = "~> 0.34 or ~> 1.0"
-lustre = "4.0.0-rc.2"
+lustre = "~> 4.0.0"
 gleam_json = "~> 1.0"
 lustre_http = "~> 0.5.1"
 lustre_ui = "~> 0.4"
@@ -24,3 +24,4 @@ lustre_animation = "~> 0.3"
 
 [dev-dependencies]
 gleeunit = "~> 1.0"
+lustre_dev_tools = "~> 1.0"
diff --git a/manifest.toml b/manifest.toml
index 0b6f665..400243e 100644
--- a/manifest.toml
+++ b/manifest.toml
@@ -2,30 +2,30 @@
 # You typically do not need to edit this file
 
 packages = [
-  { name = "argv", version = "1.0.1", build_tools = ["gleam"], requirements = [], otp_app = "argv", source = "hex", outer_checksum = "A6E9009E50BBE863EB37D963E4315398D41A3D87D0075480FC244125808F964A" },
-  { name = "birl", version = "1.5.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "ranger"], otp_app = "birl", source = "hex", outer_checksum = "23BFE5AB0D7D9E4ECC5BB89B7ABDDF8E976D98C65D2E173D116E6AAFBF24E633" },
-  { name = "filepath", version = "0.2.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "filepath", source = "hex", outer_checksum = "FC1B1B29438A5BA6C990F8047A011430BEC0C5BA638BFAA62718C4EAEFE00435" },
+  { name = "argv", version = "1.0.2", build_tools = ["gleam"], requirements = [], otp_app = "argv", source = "hex", outer_checksum = "BA1FF0929525DEBA1CE67256E5ADF77A7CDDFE729E3E3F57A5BDCAA031DED09D" },
+  { name = "birl", version = "1.6.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "ranger"], otp_app = "birl", source = "hex", outer_checksum = "0757CFE97DA52F19BC3262AC3DD284D9DAD2718D4C1830888DE483FB147477D4" },
+  { name = "filepath", version = "1.0.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "filepath", source = "hex", outer_checksum = "EFB6FF65C98B2A16378ABC3EE2B14124168C0CE5201553DE652E2644DCFDB594" },
   { name = "gleam_community_ansi", version = "1.4.0", build_tools = ["gleam"], requirements = ["gleam_community_colour", "gleam_stdlib"], otp_app = "gleam_community_ansi", source = "hex", outer_checksum = "FE79E08BF97009729259B6357EC058315B6FBB916FAD1C2FF9355115FEB0D3A4" },
-  { name = "gleam_community_colour", version = "1.3.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_community_colour", source = "hex", outer_checksum = "A49A5E3AE8B637A5ACBA80ECB9B1AFE89FD3D5351FF6410A42B84F666D40D7D5" },
-  { name = "gleam_erlang", version = "0.24.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_erlang", source = "hex", outer_checksum = "26BDB52E61889F56A291CB34167315780EE4AA20961917314446542C90D1C1A0" },
+  { name = "gleam_community_colour", version = "1.4.0", build_tools = ["gleam"], requirements = ["gleam_json", "gleam_stdlib"], otp_app = "gleam_community_colour", source = "hex", outer_checksum = "795964217EBEDB3DA656F5EB8F67D7AD22872EB95182042D3E7AFEF32D3FD2FE" },
+  { name = "gleam_erlang", version = "0.25.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_erlang", source = "hex", outer_checksum = "054D571A7092D2A9727B3E5D183B7507DAB0DA41556EC9133606F09C15497373" },
   { name = "gleam_fetch", version = "0.4.0", build_tools = ["gleam"], requirements = ["gleam_http", "gleam_javascript", "gleam_stdlib"], otp_app = "gleam_fetch", source = "hex", outer_checksum = "7446410A44A1D1328F5BC1FF4FC9CBD1570479EA69349237B3F82E34521CCC10" },
-  { name = "gleam_http", version = "3.5.3", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_http", source = "hex", outer_checksum = "C2FC3322203B16F897C1818D9810F5DEFCE347F0751F3B44421E1261277A7373" },
+  { name = "gleam_http", version = "3.6.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_http", source = "hex", outer_checksum = "8C07DF9DF8CC7F054C650839A51C30A7D3C26482AC241C899C1CEA86B22DBE51" },
   { name = "gleam_javascript", version = "0.8.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_javascript", source = "hex", outer_checksum = "14D5B7E1A70681E0776BF0A0357F575B822167960C844D3D3FA114D3A75F05A8" },
   { name = "gleam_json", version = "1.0.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "thoas"], otp_app = "gleam_json", source = "hex", outer_checksum = "8B197DD5D578EA6AC2C0D4BDC634C71A5BCA8E7DB5F47091C263ECB411A60DF3" },
   { name = "gleam_otp", version = "0.10.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_stdlib"], otp_app = "gleam_otp", source = "hex", outer_checksum = "0B04FE915ACECE539B317F9652CAADBBC0F000184D586AAAF2D94C100945D72B" },
+  { name = "gleam_package_interface", version = "1.0.0", build_tools = ["gleam"], requirements = ["gleam_json", "gleam_stdlib"], otp_app = "gleam_package_interface", source = "hex", outer_checksum = "52A721BCA972C8099BB881195D821AAA64B9F2655BECC102165D5A1097731F01" },
   { name = "gleam_stdlib", version = "0.36.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "C0D14D807FEC6F8A08A7C9EF8DFDE6AE5C10E40E21325B2B29365965D82EB3D4" },
   { name = "glearray", version = "0.2.1", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "glearray", source = "hex", outer_checksum = "908154F695D330E06A37FAB2C04119E8F315D643206F8F32B6A6C14A8709FFF4" },
   { name = "gleeunit", version = "1.0.2", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleeunit", source = "hex", outer_checksum = "D364C87AFEB26BDB4FB8A5ABDE67D635DC9FA52D6AB68416044C35B096C6882D" },
-  { name = "glint", version = "0.16.0", build_tools = ["gleam"], requirements = ["gleam_community_ansi", "gleam_community_colour", "gleam_stdlib", "snag"], otp_app = "glint", source = "hex", outer_checksum = "61B7E85CBB0CCD2FD8A9C7AE06CA97A80BF6537716F34362A39DF9C74967BBBC" },
-  { name = "justin", version = "1.0.1", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "justin", source = "hex", outer_checksum = "7FA0C6DB78640C6DC5FBFD59BF3456009F3F8B485BF6825E97E1EB44E9A1E2CD" },
-  { name = "lustre", version = "4.0.0-rc.2", build_tools = ["gleam"], requirements = ["argv", "filepath", "gleam_community_ansi", "gleam_erlang", "gleam_json", "gleam_otp", "gleam_stdlib", "glint", "justin", "shellout", "simplifile", "spinner", "tom"], otp_app = "lustre", source = "hex", outer_checksum = "3A603D4333E73D481D9F753D6750DA8AD408C84C66082BA6653B3691C8E17A63" },
+  { name = "glint", version = "0.18.0", build_tools = ["gleam"], requirements = ["gleam_community_ansi", "gleam_community_colour", "gleam_stdlib", "snag"], otp_app = "glint", source = "hex", outer_checksum = "BB0F14643CC51C069A5DC6E9082EAFCD9967AFD1C9CC408803D1A40A3FD43B54" },
+  { name = "lustre", version = "4.0.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_json", "gleam_otp", "gleam_stdlib"], otp_app = "lustre", source = "hex", outer_checksum = "1D40C1378279F7015687F8C9DB739D6880BB0B843F4428B85C61EDDA8BF21FC6" },
   { name = "lustre_animation", version = "0.3.2", build_tools = ["gleam"], requirements = ["gleam_stdlib", "lustre"], otp_app = "lustre_animation", source = "hex", outer_checksum = "52823F66C2884AF8D3D616A30EC1D15479552363C19BD7E54006C642941015B8" },
-  { name = "lustre_http", version = "0.5.1", build_tools = ["gleam"], requirements = ["gleam_fetch", "gleam_http", "gleam_javascript", "gleam_json", "gleam_stdlib", "lustre"], otp_app = "lustre_http", source = "hex", outer_checksum = "46CD8863C39DBE738D8BCA1095C1A4496687919E53B913D4AC088FF768AE2AFD" },
-  { name = "lustre_ui", version = "0.4.0", build_tools = ["gleam"], requirements = ["gleam_community_colour", "gleam_stdlib", "lustre"], otp_app = "lustre_ui", source = "hex", outer_checksum = "9FE07E26EABDB13F7CB29F90AD8763618040729BF16E5F451A6ED584C52AA093" },
+  { name = "lustre_dev_tools", version = "1.0.0", build_tools = ["gleam"], requirements = ["argv", "filepath", "gleam_community_ansi", "gleam_erlang", "gleam_json", "gleam_otp", "gleam_package_interface", "gleam_stdlib", "glint", "simplifile", "spinner", "tom"], otp_app = "lustre_dev_tools", source = "hex", outer_checksum = "66142ADDCA3D6C63A89E016CF6C21E07D06D6DC92479325182A07C360BD026D3" },
+  { name = "lustre_http", version = "0.5.2", build_tools = ["gleam"], requirements = ["gleam_fetch", "gleam_http", "gleam_javascript", "gleam_json", "gleam_stdlib", "lustre"], otp_app = "lustre_http", source = "hex", outer_checksum = "FB0478CBFA6B16DBE8ECA326DAE2EC15645E04900595EF2C4F039ABFA0512ABA" },
+  { name = "lustre_ui", version = "0.5.0", build_tools = ["gleam"], requirements = ["gleam_community_colour", "gleam_json", "gleam_stdlib", "lustre"], otp_app = "lustre_ui", source = "hex", outer_checksum = "7ECB5414BE926082401891C62FAAA21221FC0B7A2F0568A492349F48DC2B02A0" },
   { name = "ranger", version = "1.1.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "ranger", source = "hex", outer_checksum = "28E615AE7590ED922AF1510DDF606A2ECBBC2A9609AF36D412EDC925F06DFD20" },
   { name = "repeatedly", version = "2.1.1", build_tools = ["gleam"], requirements = [], otp_app = "repeatedly", source = "hex", outer_checksum = "38808C3EC382B0CD981336D5879C24ECB37FCB9C1D1BD128F7A80B0F74404D79" },
-  { name = "shellout", version = "1.6.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "shellout", source = "hex", outer_checksum = "E2FCD18957F0E9F67E1F497FC9FF57393392F8A9BAEAEA4779541DE7A68DD7E0" },
-  { name = "simplifile", version = "1.5.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "simplifile", source = "hex", outer_checksum = "EB9AA8E65E5C1E3E0FDCFC81BC363FD433CB122D7D062750FFDF24DE4AC40116" },
+  { name = "simplifile", version = "1.6.1", build_tools = ["gleam"], requirements = ["filepath", "gleam_stdlib"], otp_app = "simplifile", source = "hex", outer_checksum = "B75D3C64E526D9D7EDEED5F3BA31DAAF5F2B4D80A4183FE17FDB02ED526E4E96" },
   { name = "snag", version = "0.3.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "snag", source = "hex", outer_checksum = "54D32E16E33655346AA3E66CBA7E191DE0A8793D2C05284E3EFB90AD2CE92BCC" },
   { name = "spinner", version = "1.1.0", build_tools = ["gleam"], requirements = ["gleam_community_ansi", "gleam_erlang", "gleam_stdlib", "glearray", "repeatedly"], otp_app = "spinner", source = "hex", outer_checksum = "200BA3D4A04D468898E63C0D316E23F526E02514BC46454091975CB5BAE41E8F" },
   { name = "thoas", version = "0.4.1", build_tools = ["rebar3"], requirements = [], otp_app = "thoas", source = "hex", outer_checksum = "4918D50026C073C4AB1388437132C77A6F6F7C8AC43C60C13758CC0ADCE2134E" },
@@ -37,7 +37,8 @@ birl = { version = "~> 1.5" }
 gleam_json = { version = "~> 1.0" }
 gleam_stdlib = { version = "~> 0.34 or ~> 1.0" }
 gleeunit = { version = "~> 1.0" }
-lustre = { version = "4.0.0-rc.2" }
-lustre_animation = { version = "~> 0.3"}
+lustre = { version = "~> 4.0.0" }
+lustre_animation = { version = "~> 0.3" }
+lustre_dev_tools = { version = "~> 1.0"}
 lustre_http = { version = "~> 0.5.1" }
 lustre_ui = { version = "~> 0.4" }
diff --git a/src/taskmgr.gleam b/src/taskmgr.gleam
index 3bb5789..9c5b018 100644
--- a/src/taskmgr.gleam
+++ b/src/taskmgr.gleam
@@ -88,7 +88,8 @@ pub fn row_show_hide_ani_attrs(
 
 pub fn row_show_hide_ani_effect() -> Effect(Msg) {
   use dispatch <- effect.from()
-  ffi.request_animation_frame(fn(ts) { dispatch(RowShowHide) })
+  ffi.request_animation_frame(fn(_ts) { dispatch(RowShowHide) })
+  Nil
 }
 
 const task_to_view = Task(
@@ -209,13 +210,13 @@ pub fn task_row_view(
       Ok(height) -> Ok(RequestTaskStatusChange(task, height: height))
       Error(_) -> {
         ffi.error("Cannot decode bounding rect's height")
-        Error(Nil)
+        Error([])
       }
     }
   }
   let status_button = case task.status {
     Open -> html.button([on_status_click], [icon.circle([])])
-    Closed -> html.button([on_status_click], [icon.check_cirlced([])])
+    Closed -> html.button([on_status_click], [icon.check_circled([])])
   }
   html.li(
     [

Gleam not in PATH

Running gleam from an executable that is not in PATH results in the following error:

Adding it to PATH resolves the issue:

CLI mixes stdout output with spawned child processes.

Previously we were using shellout to spawn process for things like the Gleam compiler or esbuild. We ran into some issues with that package related to zombie processes and have since rolled the functionality we need ourselves.

In the process it seems we didn't translate something and now the stdout from these spawned processes is printed to the user's console. This is really distracting and ruins out console output and logging.

Make sure dependencies are fully up to date before publishing.

While testing to make sure everything still worked after moving to a separate repo, I needed to fix some packages to certain versions to match up with the version requirements lustre itself had (from the CLI that is still there in the published package).

Before we publish the dev tools we should make sure all dependencies are up to date (and fix any breaking api changes in the progress).

Trim printed URLs if terminal is too narrow.

We have this bug where if the url is wider than the terminal, the spinner will constantly wrap to a newline and flood the console. I'd like for us to trim the url instead so everything stays on one line.

We can measure the size of the terminal with this package (if a user resizes the terminal while things are running all bets are off I reckon).
Instead of just trimming off the end of the url i'd like for us to insert ... somewhere in the middle so https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.10.tgz might become https://registry.npmjs.org/@esbuild/.../darwin-arm64-0.19.10.tgz for example. I'm not sure what the right heuristic is for working out what bits to drop, maybe splitting by segment and dropping some from the middle?

CLI prints faded text

Most of the times the CLI displays the spinner text as faded:

We never call ansi.faded in the CLI code so my hypothesis is it might be the spinner package's fault here

Prompt users to update their `index.html` after adding tailwind.

Users might not realise they need to still actually <link> to their built CSS file after adding tailwind (see #30). I'd like to at least notify the user that they need to update their index.html to include the css file that will be generated in ./priv/static/app.css.

As a stretch, we could prompt the user the very first time they run lustre/dev start and we detected a tailwind.config.js and ask if they want dev tools to generate tailwind styles. This would close #25. For the prompt we could use this library.
Similarly we could ask the user when we first download tailwind if they want us to update their index.html (using the lib linked above). We could do a simple regex to find the first <link> tag and insert one before it (or the first <script> tag if no links are present).

Add `--no-tailwind` or similar to stop Tailwind detection

Hi, I use glailglind to handle tailwind.
I'd like to be able to tell the dev tools to not worry about tailwind. :)

Socket error: Eafnosupport

Hello Lustre dev team,
I've got an error using Lustre 4.1.8 on a Linux Debian box with Gleam 1.1.0 installed using Nix, it's probably on my side, something missing on my system. Here mycofront.gleam is the third example available in Lustre git of the day. I've added lustre and lustre_ui to my project.

My gleam.toml file:

name = "mycofront"
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"
lustre = ">= 4.1.8 and < 5.0.0"

[dev-dependencies]
gleeunit = ">= 1.0.0 and < 2.0.0"
lustre_dev_tools = ">= 1.2.2 and < 2.0.0"
lustre_ui = ">= 0.6.0 and < 1.0.0"

Then invoking "gleam run -m lustre/dev start" it fails with:

  Compiling lustre_dev_tools
  Compiling lustre_ui
  Compiling mycofront
   Compiled in 18.87s
    Running lustre/dev.main
=ERROR REPORT==== 25-Apr-2024::15:19:54.519824 ===
backend port not found: inotifywait

✅ Project compiled successfully
⠼ Downloading from https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.10.tgz=WARNING REPORT==== 25-Apr-2024::15:20:14.500323 ===
Description: "Server authenticity is not verified since certificate path validation is not enabled"
     Reason: "The option {verify, verify_peer} and one of the options 'cacertfile' or 'cacerts' are required to enable this."

✅ Esbuild installed!
✅ Bundle produced at `./priv/static/mycofront.mjs`
=ERROR REPORT==== 25-Apr-2024::15:20:19.714648 ===
backend port not found: inotifywait


I ran into an error while trying to start the development server. Here's the
error message I got:

    AcceptorFailed(Abnormal("Child failed to start during initialisation: Abnormal(\"Socket error: Eafnosupport\")"))

Please open an issue at https://github.com/lustre-labs/dev-tools/issues/new with
some details about what you were trying to do when you ran into this issue.

What am I missing?

Dependency resolution failed

I'm encountering dependency resolution issue when adding lustre_dev_tools to a new app.

gleam 1.1.0

Steps to reproduce:

gleam new app && cd app && gleam add lustre
target = "javascript"
gleam add --dev lustre_dev_tools

  Resolving versions
error: Dependency resolution failed

An error occurred while determining what dependency packages and
versions should be downloaded.
The error from the version resolver library was:

Because lustre_dev_tools [ 0.0.0, 1.0.1 [  [ 1.0.2, 1.1.0 [  [ 1.1.6, 1.2.0
[  [ 1.2.3, ∞ [ depends on glint 0.18.0 <= v < 1.0.0 and lustre_dev_tools
1.0.1 depends on glint 0.18.0 <= v < 1.0.0, lustre_dev_tools [ 0.0.0, 1.1.0
[  [ 1.1.6, 1.2.0 [  [ 1.2.3, ∞ [ depends on glint 0.18.0 <= v < 1.0.0.
And because lustre_dev_tools 1.1.0 depends on glint 0.18.0 <= v <
1.0.0 and lustre_dev_tools 1.1.1 depends on glint 0.18.0 <= v < 1.0.0,
lustre_dev_tools [ 0.0.0, 1.1.2 [  [ 1.1.6, 1.2.0 [  [ 1.2.3, ∞ [ depends
on glint 0.18.0 <= v < 1.0.0.
And because lustre_dev_tools 1.1.2 depends on glint 0.18.0 <= v <
1.0.0 and lustre_dev_tools 1.1.3 depends on glint 0.18.0 <= v < 1.0.0,
lustre_dev_tools [ 0.0.0, 1.1.4 [  [ 1.1.6, 1.2.0 [  [ 1.2.3, ∞ [ depends
on glint 0.18.0 <= v < 1.0.0.
And because lustre_dev_tools 1.1.4 depends on glint 0.18.0 <= v <
1.0.0 and lustre_dev_tools 1.1.5 depends on glint 0.18.0 <= v < 1.0.0,
lustre_dev_tools [ 0.0.0, 1.2.0 [  [ 1.2.3, ∞ [ depends on glint 0.18.0 <=
v < 1.0.0.
And because lustre_dev_tools 1.2.0 depends on glint 0.18.0 <= v <
1.0.0 and lustre_dev_tools 1.2.1 depends on glint 0.18.0 <= v < 1.0.0,
lustre_dev_tools [ 0.0.0, 1.2.2 [  [ 1.2.3, ∞ [ depends on glint 0.18.0 <=
v < 1.0.0.
And because glint 0.18.0 depends on gleam_stdlib [ 0.36.0, 0.37.0
[  [ 1.0.0, 2.0.0 [ and glint 0.18.1 <= v < 1.0.1 depends on gleam_stdlib
[ 0.36.0, 0.37.0 [  [ 1.0.0, 2.0.0 [, lustre_dev_tools [ 0.0.0, 1.2.2
[  [ 1.2.3, ∞ [ depends on gleam_stdlib [ 0.36.0, 0.37.0 [  [ 1.0.0, 2.0.0
[. (1)

Because glint 0.18.0 depends on gleam_stdlib [ 0.36.0, 0.37.0 [  [ 1.0.0,
2.0.0 [ and glint 0.18.1 <= v < 1.0.1 depends on gleam_stdlib [ 0.36.0,
0.37.0 [  [ 1.0.0, 2.0.0 [, glint 0.18.0 <= v < 1.0.1 depends on
gleam_stdlib [ 0.36.0, 0.37.0 [  [ 1.0.0, 2.0.0 [.
And because lustre_dev_tools 1.2.2 depends on glint 0.18.0 <= v < 1.0.0,
lustre_dev_tools 1.2.2 depends on gleam_stdlib [ 0.36.0, 0.37.0 [  [ 1.0.0,
2.0.0 [.
And because lustre_dev_tools [ 0.0.0, 1.2.2 [  [ 1.2.3, ∞ [ depends on
gleam_stdlib [ 0.36.0, 0.37.0 [  [ 1.0.0, 2.0.0 [ (1), lustre_dev_tools
depends on gleam_stdlib [ 0.36.0, 0.37.0 [  [ 1.0.0, 2.0.0 [.
And because app 0.0.0 depends on lustre_dev_tools and app 0.0.0 depends on
gleam_stdlib 0.37.0, app 0.0.0 is forbidden.

Show compiler errors in the browser when using the watcher / live reloader

As a developer, I should see compiler errors in the browser when using the watcher / live reloader, if the build fails.

The compiler errors should be displayed as a full-screen output listing, ideally with the same color-coding as is used by the terminal.

When the build is successful again, the page should refresh and display the successfully-compiled output.

——

@hayleigh-dot-dev’s notes:

in the live_reload module there's a script to inject the live reloading stuff, you'd probably add an extra case to

      socket.onmessage = (event) => {
        if (event.data === 'reload') {
          window.location.reload();
        }
      };

in the file watcher actor we just discard failing builds:

      case cli.run(script, Nil) {
        Ok(_) -> {
          use _, client <- set.fold(state, Nil)
          process.send(client, Reload)
        }

        Error(_) -> Nil
      }

but you could grab the error and do error.explain to get the error text, wrap it in a div and some stuff

Add file watching to the `start` dev server.

Esbuild has a --watch flag that means it can rebuild the bundle whenever any of its input files change. They also have a guide on how to implement live reloading to automatically refresh the page whenever the bundle changes.

There's an erlang package called fs that seems super robust for setting up file watching. If you look on hex basically every big project is depending on this (eg phoenix use it too) so it's definitely good enough for us. There's a nice Gleam wrapper called filespy – as-is it currently doesn't build on current Gleam versions but I PR'd the fix so hopefully that gets published soon.

What we'd really like to do is implement file watching, detect if any Gleam code has changed, and if so re-build the project to trigger an esbuild live reload.

ESBuild Platform Detection Issue - Windows

Hello! I'm running into an issue during the Detecting Platform step of the ESBuild install. I get this error after running gleam run -m lustre/dev start --use-example-styles.

exception error: construction of binary failed
  in function  lustre_dev_tools@esbuild:explain/1 (c:/Users/Svaug/projects/gleam/example/build/dev/erlang/lustre_dev_tools/_gleam_artefacts/[email protected], line 177)
     *** segment 2 of type 'binary': expected a binary but got: {ok,<<"x64">>}

I'm not super familiar with Erlang, but my after some digging, I think it might be an issue with get_cpu in lustre_dev_tools_ffi.erl. It appears that a result is being returned for windows:

get_cpu() ->
    case erlang:system_info(os_type) of
        {unix, _} ->
            [Arch, _] = string:split(erlang:system_info(system_architecture), "-"),
            list_to_binary(Arch);
        {win32, _} ->
            case erlang:system_info(wordsize) of
                4 -> {ok, <<"ia32">>};
                8 -> {ok, <<"x64">>}
            end
    end.

while the gleam external declaration suggests it should return a bitstring:

@external(erlang, "lustre_dev_tools_ffi", "get_cpu")
fn get_cpu() -> String

If this seems like the right track, I would be more than happy to put up a PR to resolve this!

Add `--outfile` and `--outdir` flags to `build` command.

This would let users control where the build tool places bundled files. We should take some care to consider how to handle additional generated files, for example if a tailwind CSS bundle is produces as well, how would that work with the --outfile flag.

Dev server proxy not working properly

I am trying to use the dev server proxy to proxy a lustre frontend to my rust backend, but the proxy urls don't seem to work properly. I run the dev server with the following
gleam run -m lustre/dev start --proxy-from=api/ --proxy-to=http://127.0.0.1:8080/api
and then doing a gleam_http.post to "api/login", which afaik should route to http://127.0.0.1:8080/api/login, which is a route that works through postman, but with the dev server I just get BadUrl("api/login")

Dev server does not correctly resolve local assets in a custom HTML document.

The start dev server lets users provide their own HTML document to use via the --html flag. This currently gets copied into an internal directory /build/.lustre and then the bundled javascript is injected and esbuild is launched.

Because we copy the document to a new location, any local assets that were being referenced, like CSS, break because the path is incorrect. How should we handle this? One idea would be to correct the paths, but this feels like it could be quite fragile. Another option would be to rework the dev server so that it doesn't need to copy the HTML at all.