fable-compiler / repl Goto Github PK

Bring some of that awesomeness here.

I publish a new version of the REPL today.

And because I already add the fable folder in my system it publish it with:

Shared.fs

-let [<Literal>] VERSION = "2.0.0-beta-001"
+let [<Literal>] VERSION = "2.0.0-alpha-0032"

I don't think using the local fable repo to detect the version published with the REPL is the right way. Aren't we picking the REPL bundle.js from AppVeyor artifact ?

If yes, then we should detect the version used by the AppVeyor artifact. If needed, by adding a file containing the version in the artifact zip.

PS: I updated my local version of Fable to latest and it pick up the new one. So no need to republish a new one

Monaco font is a rare guest on Windows :) So, (the browser? or who?) chooses Courier New, which is very unreadable:

I suggest to use Consolas as the default font on Windows, and add more popular options, like SF Mono, Menlo on Mac, and IBM Plex Mono, Input Mono, Hack - on all OSes.

It should be possible to add HTML to Elmish support in the REPL should we add it?

The main motivation being, the REPL could be something used in a meetup to teach Fable/Elmish. The benefit being, there is no requirement needed other than having Chrome/Safari installed.

@forki @alfonsogarciacaro

Some of the samples use printfn output. For new users who maybe aren't already experienced JS/web devs, it may not be obvious that they need to open the console to see anything. So their initial "hello world" experience is a blank white page and nothing happening.

Maybe there should be a note or comment somewhere to "please open your browser console to see program output".

Or, maybe the samples should prefer browser document output instead of printfn for primary program output, e.g.:

open Fable.Import.Browser
let addToBody text =
    let textNode = document.createTextNode text
    let divNode = document.createElement_div()
    divNode.appendChild textNode |> ignore
    document.body.appendChild divNode |> ignore

addToBody "Hello World"

The Reset link in the loading page is hard to see.

It's grey over white and when over it's white.

We should customize the loading to use a dark theme like the rest of the REPL.

Not sure why but with latest Fable master the REPL hangs when compiling samples (I don't think is this commit because I reverted to the commit before and the problem still happened). I reverted to 2.0.0-beta-004 release commit and everything seems to be working now.

There are not so many commits affecting the code in between, it may have been the upgrade to FCS 25 or Babel 7. I'll investigate more after the presentation.

cc @ncave @MangelMaxime

maybe just put these two directly in the toolbar?

Continuation of fable-compiler/repl-legacy#42

I renamed the repositories. @citymeterio It's probably better if you remove your local copy and clone fable-compiler/repl again.

We should write down a plan to make it easier to embed the REPL in other webs. These are the different parts composing the REPL currently, should all go into the package or only some of them?

• F# compiler + Fable bundle: This is generated in the Fable CI server (AppVeyor)
• Worker: prevents locking the UI and contains some helpers to communicate with the Fable bundle
• Metadata + Fable REPL library: The REPL needs to load several netstandard dlls to compile F# code
• Monaco integration: Tooltip, go to definition, autocompletion... providers
• UI

Requested by @forki on gitter

It's been suggested by @jindraivanek at FableConf to add Fantomas support to the REPL. I think this would be a very nice opt-in (users don't need to use it if they don't need it) and would improve the synergies between projects.

It shouldn't be difficult to add as Fantomas provides an HTTP endpoint for this (@jindraivanek can you confirm the endpoint, whether it supports CORS and the format of the JSON request/response). The main issue as pointed out by @MangelMaxime is when the user modifies the code before we get a response from Fantomas server. Probably the easiest solution to overcome this for now is just to block code edition until we receive a response.

in repl 1 it showed the printf output. I think someone should hook it up in the live html view

Not a serious issue, but just to let you know, apparently now it's necessary to add a module name (e.g. module Sample) at the beginning of the file or the REPL will complain. My guess is this has to do with recent changes in @ncave FCS fork.

Not entirely sure that problem isn't in my own code but I would expect this to work:

module SimpleReact

open Fable.Import
open Fable.Helpers.React

let app =
    div [] [str "👌"]

let element = Browser.document.querySelector "#app"

ReactDom.render(app, element)

In the console I see

Uncaught TypeError: Failed to resolve module specifier "react-dom". Relative references must start with either "/", "./", or "../".

I'm wondering if there can be some kind of "share" action for the JS output, e.g. something that brings up a dialog with a bunch of options including

• copy and paste JS (minified?) for an embedded Iframe or straight JS
• copy and paste a shorter snippet that embeds an iframe referring to server-hosted content

Basically anything that lets you share/embed the thing you've developed rather than the development environment.

Before we add the server for sharing code, it'll be very useful if we add save and load buttons so users can save their work. For simplicity, I guess using the browser local storage should be fine. When saving, the user gives a name to the project, and when loading they get the list of saved projects and load the desired one.

Besides saving in the browser storage, the user should be able to download the files in zip format. Maybe using this library.

would be nixe to have.

/cc @Zaid-Ajaj

Maybe it is just me, but I find that it is too easy for me to move my mouse off of the popup menus and then it disappears and I have to go back to get it again.

I first noticed this when resetting my Repl. I clicked Reset, move my mouse and the confirmation closed - but I could get it back, by going to the menu,

Then again when just browsing the samples I keep losing the popup...

I have feeling that it is the way I move my mouse, it goes this kind of direction:

Leaving and re-entering the menu.

I think most popups these days have a way of having some sort of grace area around them and only hide after the mouse is off them for a period of time. I'm sure you all know this, but I'm a WinForms developer at the moment, and only know how ContextMenu's work 😃

EDIT: it does compile, this seems to only be an issue in the editor

@vasily-kirichenko has requested a light theme for the editor. Given that we already offer options like setting the font, it can be a nice addition to be able to set the theme and hopefully it's not too difficult.

There are several guides to do theming with SASS, this one proposes to use a value dictionary and then a theming mixing to generate multiple rules prefixed with the theme name like:

$themes: (
  light: (
    backgroundColor: #fff,
    textColor: #408bbd,
  ),
  dark: (
    backgroundColor: #222,
    textColor: #ddd,
  ),
);

// Usage

.app-container {
  @include themify($themes) {
    color: themed('textColor');  
    background-color: themed('backgroundColor');  
  }
}

What do you think @MangelMaxime? Should we apply this approach?

When working on my canvas experimentation I had the same Flickering problem with HMR.

For me it was due to event registration using addEventListener because the previous one isn't removed moving the mouse for example still trigger the old one and because the previous Elmish app isn't destroyed there is some kind of a conflict probably and depending on which event take place the App 1 or 2 render.

Edit: I put it here just so we can later take a look at this issue if needed and if we have the time for it.

Using http://fable.io/repl2 (Version: 2.0.0-beta-001) the following code:

type InlineTest() =
    static member inline OverloadedInline(_ : int) : int =
        2

    static member inline OverloadedInline(_ : string) : string =
        "hello"

printfn "%A" (InlineTest.OverloadedInline 1)
printfn "%A" (InlineTest.OverloadedInline "1")

Prints 2 twice instead of printing 2 and "hello".

However, if the Optimize (experimental) option is turned on then it works as expected.

To prevent compiler version mismatches as it happened in #80. This means that Repl.Lib build should be moved to the Fable repo (and maybe we should do the same with the .dll metadata which is duplicated right now). Maybe it's a good idea so we can also bundle the Repl.Lib with the pure-JS fable-compiler and allow people build simple apps with it.

Just so that I don't forget, the code is in elmish-login-flow-validation

The sidebar reset isn't working.

If you click the Sidebar Reset and the Confirm the URL is updated to:

http://localhost:8080/#/reset

but the current session does not reset.

I tried changing this line

https://github.com/fable-compiler/repl2/blob/f2bfb37bb1915140a84539ac98ad53701ec8f89f/src/App/Router.fs#L20

To: "#" + segmentsPart and that creates the URL ending in #reset but it still doesn't reset.

I'm struggling to debug the Repl without the Redux Dev Tools or Console logging of Messages so I can't quite figure what's wrong.

Obviously it's subjective, but I find that the white title bars and menu bar don't fit with the dark scheme and subtract from the experience.
Is it possible to have them changed to grey or textured grey? Like the toolbar color in any of VS Code dark themes, but it doesn't have to be exactly like that, just not white.

/cc @ncave

Add reset button or reset item on the top of the menu to clean up the env (or reset to the initial script).

Hi,

I was playing with the Fable 2 REPL and was very impressed by how easy and intuitive it is for new users. Yet, I have a small nitpick:

It would be nice to add a notification when the compilation complete. For a example a small hovering popup (non modal) that tell that the compilation is either complete with either success or failure would be nice (maybe with a green/red color scheme to easily tell the case without having to read the text). Also, if compilation fail, being able to click on the popup and get details about the compilation errors would be a nice addition. I currently have an error in the dev tool when compilation fail but it isn't ideal to get feedback. Also, the red wavy lines indicating errors seems to disappear after a compilation even if it failed which is not great.

The fountain doesn't start after compiling successfully.
Tested in Chrome and it works fine there.
Am I doing something wrong?

Screenshot

FireFox

Expanded Samples menu pane is not scrollable, so the bottom items cannot be reached:

I am creating this issue to mention I am reworking the sidebar experience to support the incoming features and fix some of the existing one.

Will publish an update when I better know the scope of the changes.

Triggering the auto-complete menu at the end of a line is pushing the left toolbar out (hiding it completely).
The only way to get it back is to switch panes.

Compiled successfully toasts are stacking high when you compile several times in a row.
Not a breaking issue, more of an enhancement, perhaps compile notifications can go to the console pane, now that it's there (or to the problems pane, if we rename that to compile output).

I've gotten the following error in the REPL today (https://fable.io/repl), with no rendered output:

Chrome: Uncaught SyntaxError: The requested module '../../fable-core/Types.js' does not provide an export named 'L'

Firefox: SyntaxError: import not found: L

Sometimes you need to use multiple tabs in the REPL when you're trying different things or opening multiple shared URLs. In those cases, it's a bit tedious to wait the 5-6 seconds every time until being able to use the REPL.

It shouldn't be too difficult to turn the current worker into a shared worker so it can be reused in multiple browser tabs. I'll look into this.

• Let the user save multiple samples with different names in browser storage

• Let users easily share snippets like http://fssnip.net/ (requires a server)

• Enable tutorials that go step by step and change the code in the REPL.

• Make it easy to embed the repl in other sites (so people can make their own tutorials).

This should be already possible with an iframe, and I also made it so the full repl won't be reloaded on hash changes (this could be a way to paste new code in the repl), but I guess we need a query parameter to disable some editors to fit the repl in a smaller size.

I'm struggling with building fable-splitter.
It requires to be comfortable with the stack (npm, yarn, dotnet, webpack, fake, packet) and I'm not yet there.
But if I 'm not mistaken I have noticed once on some video that somebody was running F# script through fable-repl online with the POST request. Is this feasible? If not could you Guys think about such a solution?
I really need the simplest possible "fsx2js for the PoC I'm creating for my team leader/product owner.

The focused version of the compile button is empty.

Would it be better if the Live sample and the generated code be vertically separated, with title bars to shrink/expand them, same way as on the left? Essentially, a four-window scheme, as every other JS playground. I understand that the current design saves one title bar to get more space on the right, so there are pros and cons, what do you think?

Tooltips close to the top are partially obscured, it's like Monaco thinks there is enough space to show them under the header bar. Also tooltips are squashed if too close to the right, instead of showing to the left.

Idk if this is fixable, definitely not something to spend much time on, just posting it in case somebody has a simple solution from the top of their heads.

When the user clicks on the Share button the text in the navbar is updated. We should use a Toast instead

module Registros =

/// Este ejemplo muestra como se define un nuevo registro.  
type Contacto = 
    { Nombre     : string
      Telefono    : string
      Verificado : bool }
          
/// Este ejemplo muestra como se instancia un registro.
let contacto1 = 
    { Nombre = "Alf" 
      Telefono = "(206) 555-0157" 
      Verificado = false }

/// Se puede colocar todo en la misma linea con el separador ';'.
let contactoEnLinea = { Nombre = "Alf"; Telefono = "(206) 555-0157"; Verificado = false }

/// Este ejemplo muestra como usar "copy-and-update" en los valores de un registro. Esto crea 
/// un nuwvo registro de valores de contacto1, pero tiene diferentes valores para los campos 
/// 'Telefono' y 'Verificado'.
///
/// Puede aprender mas visitando: https://docs.microsoft.com/dotnet/fsharp/language-reference/copy-and-update-record-expressions
let contacto2 = 
    { contacto1 with 
        Telefono = "(206) 555-0112"
        Verificado = true }

/// Este ejemplo muestra como escribir una funcion que procese un registro.
/// Esto convierte a 'Contacto' en una cadena de caracteres.
let mostrarContacto (c: Contacto) = 
    c.Nombre + " Telefono: " + c.Telefono + (if not c.Verificado then " (no verificado)" else "")

printfn "Para contactar a Alf: %s" (mostrarContacto contacto1)

/// Este es un ejemplo de un registro con un miembro.
type contactoAlternativo =
    { Nombre     : string
      Telefono    : string
      Domicilio  : string
      Verificado : bool }

    /// Los miembros se pueden implementar como un objeto.
    member this.ImpresionContacto =
        this.Nombre + " Telefono: " + this.Telefono + (if not this.Verificado then " (no verificado)" else "") + this.Domicilio

let contactoAlternativo = 
    { Nombre = "Alf" 
      Telefono = "(206) 555-0157" 
      Verificado = false 
      Domicilio = "111 Alf Street" }

// Los miembros pueden ser accedidos usando el operador '.' en una instancia.
printfn "El contacto alternativo de Alf es %s" contacto1Alternativo.ImpresionContacto