[WIP][Top Secret] Working on new version of repl

[MangelMaxime]

This PR is top secret nothing to see here :)

Ok, will stop here my mysterious intro and show you a gif:

As you can guess, now the repl is executing the code inside an iframe. Which mean we now have access to the DOM. This is really a WIP and I need to do lot of clean up and also I want to add more features. I mostly wanted to use this PR to share my progress and avoid being two to work on the next REPL version.

I am basing this PR on the #7 to have a better diff. Will try to keep the branch sync and apply the different patch where they belongs. Fixing architecture of the repo goes to #7 where updating the REPL UX goes here.

Only big thing missing to merge #7 is the autocomplete support as it's a regression. The UglifyJS thing can be solve later as it's not blocking.

PS: Yes, I consider using the React-monaco components but it don't feel ready yet and don't allow us enough flexibility. So no need to add it for now :)

[alfonsogarciacaro]

AMAZING!!! Keep up the awesomeness!

[MangelMaxime]

We now have three editors:

• one for the F# code
• one for the HTML code
• one for the ES2015 output

Next steps are:

• [x] Make the editor support resize
  • [x] Resize via the mouse
  • [x] Collapse/Expand editor area
• [ ] Add access to the FCS calss in an Elmish Cmd style. This should improve the UX because we can have more infos like performance of compilation, is it doing something in the background. And also, we will be able to inform the user during the initial loading time.
• [x] Re-add the auto-complete
• [ ] Add export/import support, via the url like we have for the current repl
• [ ] Add support to load samples.
• [ ] Remove the hardcorded localhost:8080
• [ ] Fix the Emit attributes as mentions in https://github.com/fable-compiler/fable-repl/pull/10#issuecomment-350215106

I really need to find another GIF recorder under linux. This one output really large file and also looks likes it's playing speed x2-3...

[MangelMaxime]

Hello guys,

would it be possible for you to test the current state of the REPL in this PR ? You can see the features added in my previous message.

Idea is to get feedback on the resize/collapse, auto-complete, build/run features.

I will later remove the initial state with No apps compiled yet or make it have a better display is a little rough in current state.

PS: The REPL is build with the latest master branch of the different repos.

[alfonsogarciacaro]

This is amazing @MangelMaxime!!! :clap: :clap: :clap:

I gave it a try but I got an error. I don't have SSH installed, maybe https can be used instead? https://github.com/ncave/FSharp.Compiler.Service.git

Running build with 1 worker
Starting Target: Setup
Can't find FSharp.Compiler.Service_fable at: /Users/alfonsogarciacaronunez/dev/fable-repl/..
Do you want me to setup it for you ? (O/N)
O
Installing FSharp.Compiler.Service_fable for you
git clone git@github.com:ncave/FSharp.Compiler.Service.git FSharp.Compiler.Service_fable
Running build failed.
Error:
System.Exception: Cloning into 'FSharp.Compiler.Service_fable'...
Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

I love that I have to write O for yes ;)

[MangelMaxime]

Grr.. I hate https :D

One thing that surprise me is why is it testing your SSH key when the repo are publics.

But if the script can support it why not yes. And yes, it's possible that O means Oui :D Also you can also do ./build.sh All setup=auto to avoid the questions :)

[alfonsogarciacaro]

I cloned ncave's FCS manually, checked out fable branch and seems to work but I got a StackOverflow exception at the end of the JS compilation. This happened to me before, I'll try on Windows :)

[MangelMaxime]

Strange I don't have any SO since I started this PR. Perhaps something new has been added to the latest version of the fable branch.

[StachuDotNet]

Running into the same issue when executing './build.cmd All setup=auto':

C:\Program Files\Git\cmd\git.exe clone git@github.com:ncave/FSharp.Compiler.Service.git FSharp.Compiler.Servi
ce_fable
Running build failed.
Error:
System.Exception: Cloning into 'FSharp.Compiler.Service_fable'...
Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
   at Fake.Git.CommandHelper.gitCommand(String repositoryDir, String command) in D:\code\FAKE\src\app\FakeLib
\Git\CommandHelper.fs:line 67
   at Fake.Git.Repository.clone(String workingDir, String repoUrl, String toPath) in D:\code\FAKE\src\app\Fak
eLib\Git\Repository.fs:line 15
   at FSI_0005.Build.ensureRepoSetup(RepoSetupInfo info)
   at FSI_0005.Build.clo@95.Invoke(Unit _arg1)
   at Fake.TargetHelper.runSingleTarget(TargetTemplate`1 target) in D:\code\FAKE\src\app\FakeLib\TargetHelper
.fs:line 626

---------------------------------------------------------------------
Build Time Report
---------------------------------------------------------------------
Target     Duration
------     --------
Setup      Failure
---------------------------------------------------------------------
Status:    Failure

[alfonsogarciacaro]

After some tries I finally managed to complete the build (on Windows and using Fable development version) but I may be missing something because I get errors when running the REPL 🤔

[MangelMaxime]

@alfonsogarciacaro In general, to run the repl I do: ./build.sh Build.FCS and then yarn run start-app

This should be enough, when you have the folders already setup. I just upgraded the paket version to use Fable 1.3.4 because a replacement was missing for me.

And indeed, seems like something change on the FCS or Fable side. Probably the FCS side as it's the one related to type checking, etc.

Also, for me Fable is generated the right code and the sample is running fine:

I edited, the code to force a re-evaluation of the file. Perhaps, @ncave will have more infos about the bugs we have now.

Edit:

To complete this part:

And indeed, seems like something change on the FCS or Fable side. Probably the FCS side as it's the one related to type checking, etc.

What's strange is the FCS branch has not changed since my last check and only the Fable repo and Repl repo have new commits in it...

[MangelMaxime]

Is the current layout good enough ? Or should I already add support to something like shown in @mike-morr comments ?

[alfonsogarciacaro]

I think the layout is great! When we get it working the next step probably is to offer a way to save and share snippets, and later add a file explorer if we support multiple files.

[alfonsogarciacaro]

@MangelMaxime I think we should merge this, keep working on master and publish a beta version of the REPL for this repository so people can try it and give feedback. If you still want to be able to keep pushing comments you can be in charge of master and the rest of us use PRs :+1:

BTW, as @ncave suggested I confirmed that the performance when using net45 assemblies is better so maybe we should be using those for now. I'm also planning to move the checker to a worker so it doesn't freeze the UI. I'll send a PR :)

[MangelMaxime]

@alfonsogarciacaro Yes, we can merge this PR into master directly I think and close #7 too.

And, I will use issues + PR to keep tracks of what we are working on. So it should be easier than having a list of task into a single PR :).

I just don't know how to generate the net45 assemblies would you be able to update this PR with them ? And after that we merge this PR.

[ncave]

@MangelMaxime

I just don't know how to generate the net45 assemblies

You already have them here, these should be good enough for now.

[MangelMaxime]

Ah yes that's true :) thanks you @ncave

[MangelMaxime]

For info, I am working on the last WIP feature before merging this PR.

And for me, speaking from a pure user experience point of view, I don't see a lot of differences between the old/new binaries. I didn't make any time performance measure yet.

[ncave]

@MangelMaxime If you use a bigger file, you'll see it right away, they scale differently with size.

[MangelMaxime]

@alfonsogarciacaro I can't make ExportDefault works...

I commented it in this commit: https://github.com/fable-compiler/fable-repl/pull/8/commits/951996c1634816660f4da1e8c117bd30af76d529#diff-b5ce1565c2555faa5e0618ae5c1fcd3d

When, I try to do:

let editor : Fable.Editor.Interfaces.IExports = importDefault "editor"
console.log editor

I got undefined, can you please help me :) ?

[alfonsogarciacaro]

@MangelMaxime Sorry, I don't understand. In the commit, ExportDefault is commented out.

[alfonsogarciacaro]

@MangelMaxime You use ExportDefault as in here (well, in that sample you could also put the attribute directly on top of defaultManager) then you import it as in here. Note the path must follow the rules for JS importing. In this case, if you want to use an alias instead of a relative path, you have to declare the alias in the webpack config (note in this example the fable-repl is exposed as a global variable as it is loaded directly by index.html).

[MangelMaxime]

@alfonsogarciacaro I will create a branch with the code uncommented. Because, i think I did what you said.

[ncave]

@MangelMaxime @alfonsogarciacaro Just in time for the holidays, some performance improvements for the netcore binaries.

Happy Holidays and best wishes to you and your families!

[MangelMaxime]

Awesome @ncave , just in time for me to make the next version of the repl public :) Doing some clean up :)

Happy holidays and best wishes to you too. 🎅 🎁

[alfonsogarciacaro]

Fantastic @ncave :clap: 🥇 :clap:

Thanks a lot for all your work with Fable. I wish you a great and well-deserved holidays! Let's get new energies to make 2018 a great year for Fable! 💪

[MangelMaxime]

Here is my Christmas gift:

🎉 🍾 🎁 http://fable.io/fable-repl/ 🎁 🍾 🎉

Thank to both of you for the help :) Still a lot of thing to do, but I will stop here for now :) I will create issue to track the next task I have in mind and so we will be able to keep track of it and work together when needed.

@alfonsogarciacaro If this is working for you too, I will let you make an public announcement with FableCompiler twitter if we want to make it public :) (Someone already liked the WIP PR ^^)

[ncave]

@MangelMaxime Awesome, thanks for merging into master. If any of the stale branches are no longer needed, they can be cleaned up.

[alfonsogarciacaro]

Absolutely awesome @MangelMaxime! ⭐️ ⭐️ You're a Fable superstar!! ⭐️ ⭐️

It's a bit late now so we better make the announcement tomorrow. Totally agreed, let's keep separated issues for minor improvements :+1:

[alfonsogarciacaro]

And this is for you @ncave!

[MangelMaxime]

@alfonsogarciacaro Yes, totally agree doing an announcement at 1 AM don't work well in general :)