Is bonsai_web_ui_codemirror public?

[zeroexcuses]

Quoting https://github.com/janestreet/bonsai/blob/v0.15/examples/codemirror/dune#L1

(executables (names main) (libraries bonsai_web bonsai_web_ui_codemirror)

Where is this bonsai_web_ui_codemirror library ?

I do not see it at: https://github.com/janestreet/bonsai/tree/v0.15/web_ui

Nor do I see it at opam - Packages

Is this package public or is it janestreet internal ?

EDIT: Jane Street · GitHub also brings up nothing

[zeroexcuses]

along the same lines, is bonsai_webui_panels_experimental from bonsai/dune at master · janestreet/bonsai · GitHub also private ?

[askvortsov]

Looking through the Bonsai source code, it doesn’t seem to be. I believe a lot of the examples are only buildable inside Jane Street. One that works for sure is bonsai/examples/open_source/rpc_chat at master · janestreet/bonsai · GitHub. I got it to run locally by copying the 3 folders into a new directory, making the following change: fix: allow open source rpc chat example to compile by askvortsov1 · Pull Request #32 · janestreet/bonsai · GitHub (not sure it’s actually necessary if building the entire repo, maybe the PR is unnecessary).

In the root directory of that new repo, I also added a blank dune file and basic dune-project and rpc_chat.opam so it would build.

If you’re interested in learning Bonsai, you might find Tutorial: Full-Stack Web Dev in OCaml w/ Dream, Bonsai, and GraphQL interesting. I’m also working on several guided Bonsai tutorials that I’m hoping to release soon; if you’re interested in pilot testing those, let me know!

[zeroexcuses]

I have the following running: Counter, Drag/Drop, Hello World, Query Box, Search Bar, Type Ahead.

@askvortsov

I’m also working on several guided Bonsai tutorials that I’m hoping to release soon; if you’re interested in pilot testing those, let me know!

Funny enough, I was just looking at GitHub - askvortsov1/bonsai_tutorials – do you have tutorials in addition to this ?

[askvortsov]

It’ll be the 2 in there; I just have to finish them up. I graduated college 2 weeks ago, so between finals, spending time with friends, and a few big trips, I’ve barely had time to make progress.

That being said, I’m planning to stick to the outline in the README and Chapter 0s of each tutorial. I’ve finished a first version for:

• chapters 0 and 1 of todo_list, which teach you how to run Bonsai (served by a web server), create simple static components (writing virtual_dom and css with ppx_css), and compose Value.t and Computation.ts with the sub and arr operators.
• chapters 0, 1, most of 2, and exercises for 3 of snake_game, which teach you how to use the state machine pattern to build interactive games. The code for all chapters is written, I just need to finish the guide.

All the snake_game stuff is in this PR

What’s left is:

• Finishing up the snake guide
• Updating all code for Bonsai 0.16
• Writing the remaining todo_list chapters, which teach how to implement and communicate with RPC servers, and Bonsai’s tools for forms and routing.
• I also want to cover testing, but I haven’t decided if I want to make that its own chapter, or incorporate it into the tutorials from the start.

I’ll have a few days of free time at the end of the month before I leave for a 6 week trip to Latin America, so I’m really hoping to finish the snake stuff and start the next todo_list chapter before then.

[lambda_foo]

It would be great to gather more bonsai components into one repository. Would anyone be interested in collaborating on a bonsai_components repo? I also ran into the same issue with missing example libraries in janestreet/bonsai as you did @zeroexcuses. It makes it difficult to get started with building an application on top of Bonsai.

As another example GitHub - janestreet/memtrace_viewer: Interactive memory profiler based on Memtrace uses Bonsai and has a small bonsai_simple_table component. It uses async with websockets and some simple visualisations for displaying memory OCaml profiles.

[zeroexcuses]

@lambda_foo

It would be great to gather more bonsai components into one repository. Would anyone be interested in collaborating on a bonsai_components repo? I also ran into the same issue with missing example libraries in janestreet/bonsai as you did @zeroexcuses. It makes it difficult to get started with building an application on top of Bonsai.

I have nothing to contribute at the moment – still acquiring the skills to build bonsai components from scratch; but otherwise, yes, I completely agree with you that a bonsai_components repo would be amazing.

[askvortsov]

Were you thinking of components as examples for learning Bonsai, or as reusable building blocks for other applications?

In the former case, one piece of low hanging fruit could be a 7 GUIs implementation, like @benjamin-thomas has built for fmlib. The aforementioned tutorials and previous article series I wrote should also hopefully be useful.

Cc @TyOverby

@zeroexcuses

still acquiring the skills to build bonsai components from scratch;

I first learned Bonsai about a year and a half ago, before the guide was published by the Bonsai team. I’m hoping that the stuff I’m working on now can help supplement that by having new users write and understand actual Bonsai code, one small piece at a time. I would definitely appreciate any feedback / another perspective on the parts of Bonsai that are most challenging for newcomers.

[lambda_foo]

Were you thinking of components as examples for learning Bonsai, or as reusable building blocks for other applications?

I was thinking of reusable building blocks to help build applications quickly, rather than as examples or tutorials. More applications using Bonsai would be helpful to learning how to use it effectively. Looking through the memtrace_viewer code recently was very helpful.

[zeroexcuses]

@askvortsov

I would definitely appreciate any feedback / another perspective on the parts of Bonsai that are most challenging for newcomers.

Intuitively, what is a Bonsai.Private.path ? I’m studying https://github.com/janestreet/bonsai/blob/master/web_ui/drag_and_drop/src/bonsai_web_ui_drag_and_drop.ml#L265 , and even after goto-def in neovim/lsp, I can’t figure out what this is supposed to match with in JS land (and why we need it in a drag & drop impl).

[benjamin-thomas]

@askvortsov

In the former case, one piece of low hanging fruit could be a 7 GUIs implementation, like @benjamin-thomas has built for fmlib

Just to clarify, I didn’t build anything

The author of fmlib kindly made the effort to add 7GUIs examples to its doc, which I did suggest because I think it’s a great benchmark overall.

@Frederic_Loyer also kindly posted his 7GUIs implementation for the lablgtk3 lib, which I found very valuable too.

Trying the 7GUIs with LablGTK3/OCaml

I have tried to implement the 7GUIs (7GUIs) with LablGTK3/OCaml. The first 6 are done (but would need some polishing). The last one won’t be possible (there are no real Table widget in Gtk… then the gtksheet example is rather big). I have to admit that finding some functions/method was not always easy. For changing the background of a widget, multiple methods exist and only one works. Some methods are hidden in a #misc suffix (drawing#misc#queue_draw…), I had to hack some way to create a GMisc…

I’d love to see a bonsai impl too, as I did have a hard time and failed to learn it a few months ago.

[lambda_foo]

val path is defined in the top level bonsai/bonsai.mli at master · janestreet/bonsai · GitHub The mli for drag and drop talks about Universes and how they are used for designating which nodes are draggable.

Not sure why merlin/ocaml-lsp-server wouldn’t find that definition

[zeroexcuses]

@lambda_foo

Not sure why merlin/ocaml-lsp-server wouldn’t find that definition

Sorry, I should clarify, merlin/lsp did jump me to the definition of Bonsai.Private.path , but I still do not understand what it is.

It jumps me to:

bonsai.ml

module Private = struct
  module Computation = Computation
  module Environment = Environment
  module Apply_action = Apply_action
  module Meta = Meta
  module Snapshot = Snapshot
  module Lifecycle = Lifecycle
  module Value = Value
  module Path = Path
  module Node_path = Node_path
  module Graph_info = Graph_info
  module Instrumentation = Instrumentation
  module Flatten_values = Flatten_values

  let eval = Eval.eval

  include Proc.Private

  let path = Proc.path
end

and jumping on Proc.path jumps me to

// bonsai/proc.ml


let path =
  Computation.T
    {
      t = Computation.Path;
      dynamic_action = Meta.Action.nothing;
      static_action = Meta.Action.nothing;
      apply_static = unusable_static_apply_action;
      model = Meta.Model.unit;
    }

I still have no idea what this is, what it maps to in JS land, and why we need it for drag/drop.

===

@lambda_foo

The mli for drag and drop talks about Universes and how they are used for designating which nodes are draggable.

I previously failed to read https://github.com/janestreet/bonsai/blob/v0.15/web_ui/drag_and_drop/src/bonsai_web_ui_drag_and_drop.mli – which after reading, I do acknowledge was helpful in explaining how universes provides ‘targets’ for the drag/drop.

However, by Ctrl-f, the word ‘path’ does not appear in that page; and I still do not understand what Bonsai.Private.path represents or how it relates to this drag/drop impl.