jbdoderlein / betterocaml Goto Github PK

Hello there @jbdo99,

Thanks for sharing your tool. It seems interesting, thanks!

Could you host it somewhere online, so everybody can try it and use it if they want?

Using GitHub pages, it shouldn't be too hard.
Thanks in advance! -- @Naereen

Summary:

In a indented block of code, making a new line break precedent indentation by replacing tabs with 4 spaces : unindent with 'shift+tab' or 'del' is no more available.

Steps to reproduce:

• write a line of code ; go to next line
• indent then write another line ; go to next line
• try to unindent

Software used:

• ungoogled-chromium (both online and pwa versions)

I used this example and it worked!

For very narrow screens, I suggest the following changes.

• remove the name of file, except if there are already two tab editors (so you win some vertical space) ;
• switch the [ editor | toplevel ] horizontal flex layout to a vertical layout, putting editor on bottom, toplevel on top ;
• move the +/-/:wastebasket: button to vertical stack, and to the right of both editor and toplevel ;
• increase default zoom by

    <meta name="viewport" content="width=device-width, initial-scale=1.75, maximum-scale=1.75">

• add a "launch" button also on the editor pane, for easier access
• if possible (I could find how to do it), change the flex between toplevel/editor from 50%/50% to 40%/60%, to allow a larger editor zone

Demo

I tried everything and it works fine on my local Firefox on Ubuntu, when asking a narrow screen, and it works fine on Firefox on my Android that has a narrow screen too.

Try it

If you want to try the current version, you can do so here.

However, as you can see, it displays poorly on large screens.
My changes are not so smart (yet) about being responsive, and it implements all these changes regardless of the size of the screen (ie, no use of CSS @media screen (max-width 650px), just manual modification of the HTML).

My main problem was that I don't how to dynamically switch from container horizontal to container vertical based on screen width. I'm not a very good CSS designer, sorry!

I'll add below a clean manifest.json file that you can try to include in the index.html page.
The header of the HTML page should contain

    <link rel="manifest" href="manifest.json">

Add continuous integration and deploy with github actions :
This action to setup ocaml and compile the toplevel
and this one to deploy to the FTP server

Move the tab picker up to allow more space for editor.
Add a button for mobile to open a modal to choose the editor

Since last update, some errors (like type errors) writes exc during Lwt.async: "Assert_failure toplevel.ml:293:92" in the console instead of the usual error message.

Here is a screenshot of what I have tried :

It's really hard to adjust the size of the top level on mobile as you can see in this video

Hey if I press the cancel (annuler) button while the intepreter asking for some input like this :

I have to refresh the page because I have an end_of_file error everytime I try to read new data after cancelling once :

Reset the interpreter doesn't work and I have to refresh the page to make it working again... Until I press the cancel button again.

Hi there again,

I just realized that the description was a little bit misleading

An efficient, intuitive and cross-platform Ocaml IDE

Maybe it could be changed to

A small but efficient, intuitive and responsive OCaml IDE right in your browser! Ships OCaml v4.08.1, interpreter by your browser (so it works offline!), compiled with js_of_ocaml.

It's longer, but it makes things clearer:

• "small" : it's a very nice web editor, but calling it a "IDE" when it has just edit/save and run is a bit too much ;

• "responsive": inform users that it should work well on smartphone (note: it's not yet good for me, but I'm finishing a modification of the page and its style to have a better experience on small screens) ;

• "right in your browser": very very important to explain right in the description that it's an in browser IDE;

• "Ships OCaml v4.08": this can help promote the fact that it's recent, when compared to other pages that have older OCaml versions (thinking of mine with OCaml 4.01);

• "interpreter by your browser": it's an awesome feature!

• "(so it works offline!)" : it doesn't work yet on mobile phones I think (or at least, not mine), but it should work fine on modern desktop/laptop browser,

• "compiled with js_of_ocaml": that's not mandatory.

Of course this is a just a suggestion, feel free to pick only some of the items I suggest to add.
But it should at least make these points clear :ok
!

I saw a bunch of websites which offer to do that with "no code", and now that the app is responsive, and offline-ready (using cache and service workers), one of them might work!

• https://appconvert.io/
• https://convertify.app/convert
• https://gonative.io

I'll try them!

When autocompletion is enabled, there is no way to temporarily block the enter key from applying the selected suggestion.
This leads to small object names at the end of a line being autocompleted instead of starting a new line.

This could be fixed with :

• autocompletion of user created object names
• the application of suggestions being done only with the 'tab' key (no more with 'return')
• the 'esc' key temporarily disabling autocompletion (longer than it already does)

A great idea from Naereen, add the possibility to choose the ocaml version with the url (something like this : https://betterocaml.ml/?version=4.07)

Need to add compilation for these versions in GA (see issue #32)

Most modules from the ocaml library are not being shown any functions, neither are being detected as modules.
For example Module List shows with a different color than white, while for example Module Char is not having the same behavior has it does not show available functions nor have a different color.

Hello again,
Could you choose a license and specify if this project is open-source or not?
Unless specified explicitly, a project stays closed-source, even if the files are on GitHub, see this explanation.
Thanks in advance!
Regards, -- @Naereen

Modify the manifest.json so when someone open a .ml file on mobile, there is an option to open this file in betterocaml

If you create a new file named myfile.ml, then run this in the interpreter, you get:

#use "myfile.ml";;
Cannot find file myfile.ml

I'll do it!

Give more explicit name to css class, delete duplicate and redorder the theme files

Hi there,
Using this repository https://github.com/ankurparihar/readme-pagespeed-insights, this badge shows that Google Pagespeed Insights (https://developers.google.com/speed/pagespeed/insights/?url=https://betterocaml.ml/) gives a pretty good summary of the quality of the website and its progressive web app:

The last badge is especially useful, as it advertises about the PWA being ready and installable.
I can add it the README.md if you want.

Hi there @jbdoderlein,
Could you please publish a new release with the latest version of the toplevel?
Having the .zip file containing index.html file ready to be published is very convenient.
Thanks in advance.
Regards 😄
@Naereen.

I'd like something like CTRL + R to search for some strings in my code and being able to replace them.
Maybe include some regex support if it's not too much work (not a must have but definitly a good thing to have when you need it).

Thanks for maintening this IDE,

Clement

Here is a small graphics_example.ml OCaml file to load in BetterOCaml, to check that it supports the Graphics module.

It works perfectly on my Chromium, but not great on Firefox: the canvas open, get filled, but very quickly turn blank again.

(**
 * Basic example of using Graphics module for OCaml
 * Taken from https://caml.inria.fr/pub/docs/oreilly-book/html/book-ora048.html
 *
 * to use it in a toplevel:
 $ ocaml graphics.cma
 # #use "graphics_example.ml";;
 *
 * to use it in BetterOCaml, prefer using Google Chrome or Chromium:
 $ ocaml graphics.cma
 # #use "graphics_example.ml";;
*)

let draw_rect x0 y0 w h = 
   let (a,b) = Graphics.current_point() 
   and x1 = x0+w and y1 = y0+h 
   in
     Graphics.moveto x0 y0; 
     Graphics.lineto x0 y1; Graphics.lineto x1 y1;  
     Graphics.lineto x1 y0; Graphics.lineto x0 y0; 
     Graphics.moveto a b
;;

let draw_poly r =
   let (a,b) = Graphics.current_point () in 
   let (x0,y0) = r.(0) in Graphics.moveto x0 y0; 
     for i = 1 to (Array.length r)-1 do
       let (x,y) = r.(i) in Graphics.lineto x y
     done;
     Graphics.lineto x0 y0;
     Graphics.moveto a b
;;

let pi = 3.1415927;;

let net_points (x,y) l n = 
   let a = 2. *. pi /. (float n) in
   let rec aux (xa,ya) i = 
     if i > n then [] 
     else 
       let na = (float i) *. a in 
       let x1 = xa + (int_of_float ( cos(na) *. l))
       and y1 = ya + (int_of_float ( sin(na) *. l))  in
       let np = (x1,y1) in
         np::(aux np (i+1)) 
   in Array.of_list (aux (x,y) 1)
;;

let draw_net (x,y) l n sc st = 
  let r = net_points (x,y) l n in 
    draw_poly r;
    let draw_machine (x,y) = 
      Graphics.set_color Graphics.background; 
      Graphics.fill_circle x y sc; 
      Graphics.set_color Graphics.foreground; 
      Graphics.draw_circle x y sc
    in 
      Array.iter draw_machine r;
      Graphics.fill_circle x y st
;;

Graphics.open_graph " width=900,height=600";;

draw_net (140,20) 60.0 10 10 3;;

Add PWA File System API and fallback for non compatible browser like firefox.
This ponyfill seems a great solution

The actual version of betterocaml don't work on Safari because of the lookbehind regex used in autocompletion

Fix : Disable this feature for these browser (meh) or rewrite regex (oh no)

Add an autosave feature in localstorage
The document is saved every ~2 minutes and cache is delete when the editor is closed or the file is save

• Maybe a quick save button in a corner of the editor ?

Hello again,
Could you add a README.md file explaining what is this project, how to use it, what software are included etc?
Regards, -- @Naereen

Hello there,

Using Electron and recent technologies, it shouldn't be too hard to bundle this web app as a desktop app!
It could be multi-platform, as it's easy to use electron-packager or electron.build to produce zip files for different platforms.
(There is no need to be on such platforms, see for instance this project where I published apps for all platforms, built on Ubuntu.)

The advantage is that it's then possible to install it as a local desktop app, which can be used without Internet.

What do you think?
I could try to play again with electron.build, if you think this is interesting.)

Thanks in advance! -- @Naereen