DEV Community: Alain

Editor Support for ReasonML in VSCode with Melange

Alain — Tue, 31 May 2022 12:22:54 +0000

I have been trying for a long while now to work with ReasonML files in VSCode and get some syntax highlighting. This has been a problem since ReasonML on the frontend has moved on to Rescript. The solution would be using Melange but I could not get the editor highlighting to work. I have a bunch of old ReasonML projects that I still refer to so losing the editor support has been less than ideal. The code still works but you are stuck relying on the terminal output for errors.

I finally got it to work with the help of @zecklar on the ReasonML Discord forum.

Here is the solution that works.

Install OCaml plugin https://marketplace.visualstudio.com/items?itemName=ocamllabs.ocaml-platform
Build your project esy build
Launch VSCode in your esy dev environment esy code .
On the lefthand side, click OCaml extension icon
Click "Select sandbox"
Select "Custom" from the dropdown
Pass the flag, the input box should contain $prog $args --fallback-read-dot-merlin
Voila, at least typehints/navigation etc seem to work

You can try it with this repo.

This isnt working for rescript yet but I will update you if I figure it out.

Many thank, @zecklar.

Using `let.opt` in Rescript with latest Reason/OCaml

Alain — Sun, 11 Jul 2021 10:09:10 +0000

This is your Reason (let.opt) definition.

let (let.opt) = (x, f) =>
  switch (x) {
  | None => None
  | Some(x) => f(x)
  };
let (and.opt) = (a, b) =>
  switch (a, b) {
  | (Some(a), Some(b)) => Some((a, b))
  | _ => None
  };
let z = (a,b)=> {
  let.opt a = a
  and.opt b = b;
  Some(a + b);
};

This is your Rescript file on ocaml@4.12.0:

//Demo.res
let a = Some(10);
let b = Some(3);

Js.log2("using ocaml 4.12 compiled reasonml let.opt in Rescript", Opts.z(a,b));

Here is a gist.

Here is a project you can run:

idkjs / letop-rescript

using (let.opt) style in rescript

Resources: https://github.com/ocaml/ocaml/pull/1947
Melange:https://github.com/melange-re/melange
Rescript:https://rescript-lang.org/
Discord:https://discord.gg/KAJBzYaf

From Reason/React to Rescript/React, Guaranteed Uncurrying

Alain — Mon, 05 Jul 2021 19:54:18 +0000

image credit

Before we get started, please do ping me if you need a ReasonML/Rescript dev on your team.

I love reading old ReasonML code. The devs who took the time write ReasonML projects in the early days really had to know what they were doing and it shows. Its an excellent resource for learning both ReasonML and OCaml. For me, the older the code, the better. When I came across this repo and saw it was four years old, I could not resist. On top of that, its a wonderful little piece of code.

Today's old repo is si-reason by @scottcheng who was dabbling in ReasonML 4 years ago when the compiler was on bs-platform@2.0.0. Except for his React version, his code ran today on Rescript and ReasonML latest. You can see what he built at https://scottcheng.github.io/si-reason/.

As I'm studying this old reason code, I do some clean up, update to latest ReasonML and get it working. Then I decide to switch the syntax to Rescript since that is the new thing and I come across this one line that doesn't work after converting it from ReasonML to Rescript.

Generated Rescript Version

  let (state, dispatch) = React.useReducer((_, action) =>
    switch action {
    | UpdateColumnPositions => {
        columnPositions: emptyColumnPositions 
        |> Array.mapi((x, row) =>
          row |> Array.mapi((y, _) => {
            let rect = ReactDOM.domElementToObj(
              getElementById(BoardBase.markerId(x, y)),
            )["getBoundingClientRect"]()
            (rect["left"], rect["top"])
          })
        ),
      }
    }
  , {columnPositions: emptyColumnPositions})

converts to

  var match = React.useReducer((function (param, action) {
          return {
                  columnPositions: $$Array.mapi((function (x, row) {
                          return $$Array.mapi((function (y, param) {
                                        var rect = document.getElementById(BoardBase$SiReason.markerId(x, y)).getBoundingClientRect();
                                        return [
                                                rect.left,
                                                rect.top
                                              ];
                                      }), row);
                        }), emptyColumnPositions)
                };
        }), {
        columnPositions: emptyColumnPositions
      });

Original ReasonML Version

The same code in ReasonML:

    React.useReducer(
      (_, action) =>
        switch (action) {
        | UpdateColumnPositions => {
            columnPositions:
              emptyColumnPositions
              |> Array.mapi((x, row) =>
                   row
                   |> Array.mapi((y, _) => {
                        let rect =
                          ReactDOM.domElementToObj(
                            getElementById(BoardBase.markerId(x, y)),
                          )##getBoundingClientRect();
                        (rect##left, rect##top);
                      })
                 ),
          }
        },
      {columnPositions: emptyColumnPositions},
    );

converts to:

  var match = React.useReducer((function (param, action) {
          return {
                  columnPositions: $$Array.mapi((function (x, row) {
                          return $$Array.mapi((function (y, param) {
                                        var rect = document.getElementById(BoardBase$SiReason.markerId(x, y)).getBoundingClientRect();
                                        return [
                                                rect.left,
                                                rect.top
                                              ];
                                      }), row);
                        }), emptyColumnPositions)
                };
        }), {
        columnPositions: emptyColumnPositions
      });

That is the code produced by the Rescript compiler. One works, one does not.

If you can't see the difference, let me help you out. Here is a screenshot of the diff.

The files are exactly the same.

I produced this code by runnning npx rescript convert -all which is documented here:

$ npx rescript convert -all 🔥
— ReScript (@rescriptlang) June 30, 2021

This is an excellent script which up until this example, always worked when converting from Reason to Rescript. The conversion is one way though so if you like your Reason code, like I do, be aware of that.

Back to the point. The code that fails was the Rescript code. If you look at the two versions of Javascript, you will notice that they are exactly the same. What happened?

Per the Rescript docs:

In a dynamic language such as JS, currying would be dangerous, since accidentally forgetting to pass an argument doesn't error at compile time

source

So the Rescript docs are telling us that we might expect that using Rescript, your code might compile but then throw an error when its run.

So is the ReasonML code safer in that regard? I image that the above statement can be made about ReasonML as well but that for some reason, the ReasonML code happens to produce correct Javascript while the Rescript compiler does not. Anyone with an idea on why this is happening, please do share. I would love some feedback on it.

In ReasonML, all functions are curried by default. I could tell you about it but @glennsl knows something about OCaml and ReasonML and explains it well here:

answer re: Understanding Js.Promise.resolve(. ) dot syntax in ReasonML

Dec 6 '18

(. ) as used here, in function application, means the function should be called with an uncurried calling convention.

When used in a function type, like the type of resolve here, (. 'a) => unit, it means the function is uncurried.

Ok, so what the hell does that mean…

Open Full Answer

Or let Axel Rauschmayer, @rauschma tell you about on the seminal 2ality blog and twitter feed @2ality;

The fix for the Rescript code is easy is enough. Once you realize that the code might need to be curried by reading this post or through years of experience, well then you can curry the Rescript version and see what happens. You do that as follows:

      let rect = ReactDOM.domElementToObj(
              getElementById(BoardBase.markerId(x, y)),
            )["getBoundingClientRect"](.)
            (rect["left"], rect["top"])

Note the (.) after getBoundingClientRect. That is how you uncurry a function in both ReasonML and Rescript though the ReasonML version does not require it. It happens automatically. I guess this means that Rescript is mostly curried by default. Again, if you need to uncurry a function you need to add the dot as shown.

This kind of silent break down is exactly the reason why I took up ReasonML. I could not take chasing down another silent error in Javascript code.

The Rescript team is aware of this and have a section in the documentation addressing it. See Use Guaranteed Uncurrying in the docs.

Thanks for teaching @scottcheng, @rauschma and @glennsl.

Having just converted and updated the existing repo, I'm thinking that maybe we can avoid this altogether by structuring the function differently. I'll try to do that and update this post.

Show me the code

working reason code
good rescript code
bug reproduction

If you are into this sort of thing, here is a script I use to do a lot of the clean up.

Answer: How to make an tail recursive function and test it in ReasonML?

Alain — Sun, 04 Jul 2021 14:16:31 +0000

How do you test if this reasonml function is tail recursive. The simple version show you the unannottated function and usingTailCall.re show its annotated in reasonml.

Call in terminal with:

ocamlc -annot -o tailCall -pp "refmt -p ml" -impl tailCall.re

You can check where the tail calls are with:

grep call -A1 tailCall.annot

Source: https://stackoverflow.com/a/40401233/2336356
Sketch: https://sketch.sh/s/eBl2Z0Wvd21azKu6SFzb9j/

JavaScript file watching with Reason & Rescript in Dune

Alain — Wed, 12 May 2021 12:44:40 +0000

While banging my head against the wall trying to understand the Dune build system used with OCaml and the Melange project to compile ReasonML and Rescript to js, I came across these great simple videos by @TheEduardoRFS.

Most of below is from his hello intro. Thanks, Eduardo! Checkout his great videos at https://www.youtube.com/c/EduardoRFS.

You don't actually need this for Rescript but this gets you all the extra latest OCaml juice in the editor plus a whole lot more.

Brief

The following is a brief introduction on how to start coding in the mess that is the OCaml ecosystem.

You can call me Eduardo and I will be helping you to setup an OCaml environment ... TODO: joke with trying

Introduction??

What will you need?

To do that, you will need a couple of tools, they're. The OCaml compiler. A build system. And a language server for VSCode, because no one deserves to code without autocomplete. Everything can be installed through a package manager, so you just get the package manager and that should be it.

For this video we will be using esy, an "easy" package manager for OCaml, mostly because it simplifies the life of Windows users a lot.

Windows Warning

Warning, if you're using windows, I'm sorry for you. Ok, seriously, if you're using windows everything here must be executed as admin, because "windows bad", to run VSCode as admin you need to close all VSCode windows and execute it as admin.

Installing esy

To install esy, you're going to need the node package manager and git installed. If you have both, you can just put

npm install --global esy

on your terminal.t should take a couple of seconds. But that's it.

Install project

After that you can just clone my example project on github,

git clone https://github.com/idkjs/coding-ocaml-js-node.git

Enter the folder /hello

cd hello

And call esy

esy

The first time running esy it will install everything that we need, so it will take a couple of minutes, but on subsequent executions everything is cached, so it should be quite fast. On windows it may take a long time and you need to run your VSCode and terminal as an admin.

Add a rule with an alias to the dune file to watch the JavaScript output, note the call to node. I just took a shot in the dark and it worked. I don't know if there are docs on this:

(rule
 (alias run_hello_js)
 (deps Hello.bs.js)
 (action
  (run node ./Hello.bs.js)))

Add a script to esy to watch the js output

    "watch-js": "esy b dune build @run_hello_js -w",

To check if everything is working, you can call

esy watch-js

If you see Tu tu ru~ Mayushii desu!, that means everything is working and we can now setup VSCode.

Works for ReasonML, Rescript and OCaml

Run esy hello-reason and esy hello-rescript

> esy hello-reason

Hello, Reason!

> esy hello-rescript

Hello, Rescript!

VSCode

You should go to your VSCode and install the extension "OCaml Platform". That's it, now you can open the example project on VSCode, open the file Hello.ml and you should have everything working, autocomplete, types when you hover some identifier and in-editor typechecking.

Ending

Yeah, now you can play with OCaml, like a prefessional. If you have any question send a comment below, something something like and subscribe.

Redemon File Watcher

This example use the redemon file watcher.

Add redemon

opam pin add redemon https://github.com/ulrikstrid/redemon

Try the example from the docs.
Run the following them change index.js or create a file and you should see Hello World! in the terminal.

redemon --path=./foo echo "Hello World!"
Hello World!
# after a change
Hello World!

Or pass node index.js as a command and see the output

redemon --path=./foo node foo/index.js
hello
# after editing text
hello again

Hope this helps!

Finite State Machines in ReScript

Alain — Mon, 12 Apr 2021 12:09:38 +0000

Finite State Machines in ReScript

I saw this excellent blog post by @erikras, Finite State Machines in ReScript, but he didn't show the code implementing though he provides a demo on the blog post.

I needed to know how to implement it so I when ahead and did it. Here it is: rescript-state-machine-twitter.

Running

> git clone https://github.com/idkjs/rescript-state-machine-twitter
> cd rescript-state-machine-twitter
> yarn && yarn dev

npx resyntax

Alain — Tue, 16 Mar 2021 13:01:11 +0000

npx resyntax

I mess around with files in many syntaxes. .re files get you better syntax highlighting in vscode so often I program in .re or .ml before converting to Rescript. Sharing in case it helps anyone else. It could be cleaner but it works mostly.

Migrate files between .re .rei .res .resi .ml .mli syntaxes for Ocaml,
ReasonML and Rescript syntaxes.

Doesn't always work so check your output. Especially for conversions from .res to .re or when convertion functors. See https://github.com/rescript-lang/syntax/issues/264;

npx resyntax

Gets you:

Other Tools

npx bsconfig.json

npx resgitignore

npx resattributes

Share on Twitter...

XCode, Opam, PNPM, Node, Esy, Docker, ReactNative on 128GB Mac

Alain — Sat, 23 Jan 2021 15:52:05 +0000

image is borrowed from rietti.com

The Problem

I have hit a hard wall trying to develop with OCaml/ReasonML/Docker/Esy etc. This stack will get you fast app but the build environment is brutally disk space heavy.

I had a bunch of scripts that clean up my computer every night. The scripts deleted every React Native related file, clean the simulator out, deleted all node modules in my working directories and the ~/.esy and ~/.pnpm cache directories on my machine. I could usually get back to about 20-30GB to start my next day of coding.

This worked for a while until I tried to work on a pull request on the esy/esy. Building esy got me down to about 3GB of space which makes it super slow to work on this mac.

Solution (so far)

Get a Samsung Portable SSD T5. After trying to figure out which drive would be best for this purpose, I ended up with this one, basically because @jaapfrolich said so. And if he says so, then it probably right. Luckily, that was enough justification in this case.
Set environmental variables so that the programs eating up the disk space eat up external drive space instead.

You can set the default root directories to something different for all of the above programs. The first thing I did was change the name of my ssd drive to SSD because its easier to type than Samsung Portable SSD T5. I then create an enviromental variable for my external drive using the fish shell.

set -Ux SSD /Volumes/SSD

I then set my roots:

PNPM & NPM

For pnpm, I run:

 [I] ➜ npm config set store-dir $SSD/.pnpm-store
 [I] ➜ npm config set prefix $SSD/.npm

Then test it on a random project to check where the pnpm cache is being generated:

// run ls first to see that there is no `.pnpm-store` directory
 [I] ➜ ls
Containers/       .fnm/        .opam/
Github/           .fseventsd/ .Spotlight-V100/  .npm/        .DS_Store
 [I] ➜ bsb -init test-pnpm-store -theme basic-reason
 [I] ➜ cd test-pnpm-store 
 [I] ➜ pnpm i
 [I] ➜ cd /Volumes/SSD
 [I] ➜ ls
Containers/       .fnm/        .opam/
Github/           .fseventsd/  .pnpm-store/
.Spotlight-V100/  .npm/        .DS_Store

 [I] ➜ /Volumes/SSD

We can see that the .pnpm-store directory was created on our external ssd drive. So that works.

ESY

For ESY__PREFIX

// set root for esy.
/Volumes/SSD
[I] ➜ set -Ux ESY__PREFIX $SSD/.esy
/Volumes/SSD
 [I] ➜ echo $ESY__PREFIX
/Volumes/SSD/.esy

I wanted to use .esyrc because it seems cleaner but I could not get it to work.

OPAM

For OPAMROOT. There are apparently a few ways to do this per the man-pages but I could not get them to work so for now we stick with @etiennemillon's suggestion on discuss.ocaml.org. Thank you @etiennemillon.

Be sure to run opam init after you have set the root.

// set opam root
[I] ➜set -Ux OPAMROOT $SSD/.opam
~/Downloads took 2m 52s 87ms
[I] ➜ echo $OPAMROOT
/Volumes/SSD/.opam
[I] ➜ opam init

FNM

I am using the excellent Schniz/fnm node package manager. Mostly because I was loyal to ReasonML. Now it written in Rust but the support there is still ReasonML level friendly and responsive so, fnm it is.

@galstar, who built fnm, says that I just need to change my fish.config to source the directory where I want the cache to be with

// $HOME/.config/fish/config.fish
fnm env --fnm-dir="$SSD/.fnm" | source

DOCKER

For Docker, make a directory on your ssd for Docker to use to store images and whatever else it stores. Here I have named it Containers because that is what @frankrietta's rietta.com almost right on point blog post says. The blog doesn't use Macos Catalina but its totally worth the read anyway.

/Volumes/SSD
 [I] ➜ mkdir /Volumes/SSD/Containers

Assuming you have already installed Docker, open the dashboard:

Click the settings icon to the left of the upgrade button:

Then the resources tab in the menu:

Then change the disk image location directory to the directory you created above.

After you click apply changes, you should be good to go.

Now lets test it by running some random project that uses all these build tools. For that I'll use @davesnx's reason-in-barcelona/async. I am going to clone it to a folder not on my ssd to see how this goes.

[I] ➜ cd ~/Downloads
[I] ➜ git clone https://github.com/reason-in-barcelona/async.git reason-in-barcelona
 [I] ➜ cd reason-in-barcelona/
direnv: loading ~/Downloads/reason-in-barcelona/.envrc
direnv: export +ASYNC_PG_PORT +DATABASE_URL

The project requires watchexec and direnv so make sure you have those installed.

Now let's run make dev from the Makefile and see if this worked.

[I] ➜ make dev
...
∗ installed core.v0.14.0
Done.
# Run eval (opam env) to update the current shell environment
opam install -y ocaml-lsp-server dune

<><> Synchronising pinned packages ><><><><><><><><><><><><><><><><><><><><>  🐫
[ocaml-lsp-server.dev] no changes from git+https://github.com/ocaml/ocaml-lsp.git#HEAD

[NOTE] Package dune is already installed (current version is 2.8.2).
[NOTE] Package ocaml-lsp-server is already installed (current version is dev).
make install
# Install the dependencies
opam install --deps-only --with-doc --with-test -y .
Nothing to do.
# Run eval (opam env) to update the current shell environment

That looks like it worked, thankfully. Let see what happens when we try to build the local db with docker by running docker-compose -f docker-compose.dev.yml up -d.

docker-compose -f docker-compose.dev.yml up -d
reason-in-barcelona on  main is 📦 v0.1.0 via ⬢ v14.15.4 is 🐳 v20.10.2
 [I] ➜ docker-compose -f docker-compose.dev.yml up -d
Creating network "reason-in-barcelona_default" with the default driver
Creating volume "reason-in-barcelona_db-data" with default driver
Creating volume "reason-in-barcelona_pgadmin-data" with default driver
Pulling db (postgres:12.2)...
12.2: Pulling from library/postgres
54fec2fa59d0: Pull complete
30a95add0890: Pull complete
57bc798d3c84: Pull complete
a41bedb2c5de: Pull complete
589548c3abb4: Pull complete
c4c6b75d5deb: Pull complete
8f8c045a6a99: Pull complete
69f9dd86b24d: Pull complete
45bbaba740ff: Pull complete
1761ca7befa0: Pull complete
57feb34018f4: Pull complete
bede8373accc: Pull complete
6e4c69fbe63b: Pull complete
8a7949704ab2: Pull complete
Digest: sha256:d96835c9032988c8a899cb8a3c54467dae81daaa99485de70e8c9bddd5432d92
Status: Downloaded newer image for postgres:12.2
Pulling pgadmin (dpage/pgadmin4:4.18)...
4.18: Pulling from dpage/pgadmin4
89d9c30c1d48: Pull complete
910c49c00810: Pull complete
7efe415eb85a: Pull complete
7d8d53519b81: Pull complete
519124ac136c: Pull complete
fbfa5cf626f8: Pull complete
f53a64187e16: Pull complete
feae0c230730: Pull complete
87ae2307a1ad: Pull complete
0a609eb1a1ca: Pull complete
b8bb05efc354: Pull complete
bccaa4da228f: Pull complete
084101fb937a: Pull complete
774874c72d7a: Pull complete
45a1fa7f66b7: Pull complete
b19cea40abf6: Pull complete
76e3d6803955: Pull complete
Digest: sha256:1141073018353f91953c1523f170821e139dbd1c2d7808d3804962b2ba7e89e3
Status: Downloaded newer image for dpage/pgadmin4:4.18
Creating reason-in-barcelona_db_1 ... done
Creating reason-in-barcelona_pgadmin_1 ... done

reason-in-barcelona on  main is 📦 v0.1.0 via ⬢ v14.15.4 is 🐳 v20.10.2 took 1m 3s 441ms
 [I] ➜

That also works! And my primary disk space is unaffected. Big win.

Testing Esy

I guess I should have said go get a coffee because the previous steps take so long. You have to pay for the fast and typed end product by taking the time to install your ocaml build env...

As I ran that command I realized that the project doesn't use esy so I am going run the quickstart steps from the esy.sh to test the esy setup.

Since I deleted my .fnm before I started this process I am going I need to reinstall esy.

[I] ➜ npm i -g esy@next
[I] ➜ git clone https://github.com/esy-ocaml/hello-reason.git
[I] ➜ cd hello-reason
hello-reason on  master is 📦 v0.1.0 via ⬢ v14.15.4
 [I] ➜ esy
fish: Unknown command: esy

Running esy does not work. Apparently, my environment does not know that it is there. Anyone know what is going on here? I have posted this in the discussion for esy@next here. I will get back to you all when I figure this out.

Update:

I used my trusty go to debugging method, just trying stuff, which got us esy working. At the very beginning, I got cute and ran npm config set prefix $SSD/.npm which resulted in out $HOME/.npmrc file looking like this:

store-dir=/Volumes/SSD/.pnpm-store
prefix=/Volumes/SSD/.npm

When I read the output from npm i -g @esy@next I saw a bunch of symlinks. I have learned the hard way over the years that symlinks are not always your friend. I removed prefix=/Volumes/SSD/.npm from .npmrc, ran npm i -g esy@next again, then running esy in the hello-reason directory worked.

hello-reason on  master is 📦 v0.1.0 via ⬢ v14.15.4
 [I] ➜ cat package.json | jq '.scripts'
{
  "test": "esy x Hello",
  "format": "esy dune build @fmt --auto-promote",
  "doc": "esy dune build @doc"
}

hello-reason on  master is 📦 v0.1.0 via ⬢ v14.15.4
 [I] ➜ esy test
Running Test Program:
Hello, World!

If your run ls in your external volume, you will see that that esy is using it to cache files.

/Volumes/SSD
 [I] ➜ ls
Containers/  .Spotlight-V100/  .fnm/        .npm/   .pnpm-store/
Github/      .esy/             .fseventsd/  .opam/  .DS_Store

I should probably delete the .npm dir.

Let see if there are any other issues. I find that there is usually some quirk that show up later on so I am sure I will be back.

XCode

XCode is the master of all disk space hoarders. Dealing with XCode and Esy/OCaml's disk space was the point of this excersize and when I went to use this set up, I realized I had forgotten about Xcode.

This is what I did to get this going.

First, read this stackoverflow issue -> https://stackoverflow.com/questions/59159232/can-i-install-xcode-on-an-external-hard-drive-along-with-the-iphone-simulator-ap/65683543#comment116453766_65683543

There are a bunch of good bits in there though the author says he doesnt vouch for it with XCode 12.

Here is how I did it for XCode 12.

Go to https://developer.apple.com/download/more/?q=xcode, sign in if you have to and select the version of XCode you want. I selected the latest stable version which was XCode12.3.

If you have space issue, which is why you are reading this, you will want to download this to your ssd. I set my browser download location to my SSD drive and double clicked on XCode12.3.zip. This takes a while as you know.

I then deleted the old XCode with CleanMyMac. You can do without it from the terminal with:

rm -rf ~/Library/Developer/Xcode
rm -fr /Applications/Xcode.app

Then you want to symlink Xcode from your ssd to your ~/Applications directory.

ln -s /Volumes/SSD/Applications/Xcode.app /Applications/Xcode.app

Set up the simulator by

Important! Double Click XCode to open it so that it prompts you accept the license. If you dont do this, when you have symlinked the simulator it will just silently shutdown.

After you have accepted the license you can close Xcode which will have opened.

Tell XCode which XCode to use:

 [I] ➜ sudo xcode-select --switch /Volumes/SSD/Applications/Xcode.app

Tell XCode which xcode-select to use:

sudo xcode-select -s /Volumes/SSD/Applications/Xcode.app/Contents/Developer

Set up the simulator by aliasing the simulator on your ssd into your applications. I am only using the IPhone simulator so I did the following. Go to the Simulator on your ssd which should be at /Volumes/SSD/Applications/Xcode.app/Contents/Developer/Applications/Simulator.app. Right click it and select Make Alias:

Copy/Drag that to ~/Applications.

Now if you go into some project and run react-native run-ios it should be good to go.

I hope this help you all with limited disk space trying to do too much with your limited tools like I am.

You can also set a custom path for Library/Developer/Xcode/DerivedData and Library/Developer/Xcode/Archives via Xcode -> Preferences -> Locations.

Now download the version you might need via Xcode -> Preferences -> Components or via the Xcode app:

Hopefully these are now being installed in our custom directory on our external SSD.

This also seems to work: https://www.simpleswiftguide.com/how-to-add-missing-iphone-se-simulator-in-xcode-11-with-ios-13-sdks/

Stay tuned.

Other Tips

installing xcode command line tools. Get it from here -> https://developer.apple.com/download/more/
accepting the license in terminal sudo xcodebuild license
great resource: https://wilsonmar.github.io/xcode/#InstallIDE
great resource on installing simulators versions:https://suelan.github.io/2020/02/05/iOS-Simulator-from-the-Command-Line/
fix macos LibreSSL vs openssl xcode react-native issue with https://yasar-yy.medium.com/installing-openssl-library-on-macos-catalina-6777a2e238a6

Beating the Drom

Alain — Sun, 10 Jan 2021 12:42:31 +0000

Learning to use the Drom build system for ocam/reasonml projects.

This is a port of for starting now.ml project to reasonml using drom.

It took nothing at all to compile with reason. Apparently, drom is aware of reason syntax files. This is a really nice addition to the options for building with reason/ocaml and might be my go to option to start a project. Thanks to the folks at OCamlPro.

Examples

$ now minus 1 hour

$ now minus 5 days

From Scratch

[I] ➜ opam install drom
[I] ➜ drom new now
[I] ➜ drom build -y
[I] ➜ ./now
2021-01-10T13:18:18

Installing on your system

[I] ➜ drom install
Warning: drom is not correctly installed in this switch:
/Users/mandalarian/Downloads/now/_opam/share/drom/skeletons is missing
Warning: could not load skeletons from share/drom/skeletons/project
Warning: could not load skeletons from share/drom/skeletons/package
drom: Entering directory '/Users/mandalarian/Downloads/now'
In opam switch /Users/mandalarian/Downloads/now/_opam
Warning: could not load licenses from share/drom/licenses
Calling git submodule update --init --recursive
Calling opam exec -- dune build @install
Done: 65/71 (jobs: 1)Calling opam uninstall -y now
[ERROR] now unknown package
Calling opam uninstall -y now_lib
[ERROR] now_lib unknown package
Calling opam pin -y --no-action -k path .
This will pin the following packages: now_lib, now. Continue?
[Y/n] y
Package now_lib does not exist, create as a NEW package?
[Y/n] y
[now_lib.~dev] synchronised from file:///Users/mandalarian/Downloads/now
[WARNING] Failed checks on now_lib package definition from
          source at file:///Users/mandalarian/Downloads/now:
  warning 35: Missing field 'homepage'
  warning 36: Missing field 'bug-reports'
now_lib is now pinned to file:///Users/mandalarian/Downloads/now (version 0.1.0)
Package now does not exist, create as a NEW package? [Y/n] y
[now.~dev] synchronised from file:///Users/mandalarian/Downloads/now
[WARNING] Failed checks on now package definition from source
          at file:///Users/mandalarian/Downloads/now:
  warning 35: Missing field 'homepage'
  warning 36: Missing field 'bug-reports'
now is now pinned to file:///Users/mandalarian/Downloads/now (version 0.1.0)
Calling opam install -y now now_lib

<><> Synchronising pinned packages ><><><><><><><><><><><>  🐫
[now.0.1.0] synchronised from file:///Users/mandalarian/Downloads/now
[now_lib.0.1.0] synchronised from file:///Users/mandalarian/Downloads/now

The following actions will be performed:
  ∗ install now_lib 0.1.0*
  ∗ install now     0.1.0*
===== ∗ 2 =====

<><> Processing actions <><><><><><><><><><><><><><><><><>  🐫
∗ installed now_lib.0.1.0
∗ installed now.0.1.0
Done.

Installation OK

# open a new terminal and run `which now`
# now is installed at /Users/mandalarian/.local/bin/now
now on  reason [✘!?] via ⬢ v14.4.0
 [I] ➜
 [I] ➜ which now
/Users/mandalarian/.local/bin/now

 [I] ➜ now
2021-01-10T13:28:27

/ 
 [I] ➜ now minus 1 hour
2021-01-10T12:28:28

/ 
 [I] ➜ now minus 5 days
2021-01-05T13:28:39

repo

Fixing `Deprecated: React.Ref.setCurrent`

Alain — Tue, 05 Jan 2021 13:35:23 +0000

I keep finding myself having looking this up so I'm writing this note to myself.

Bad Code

This code throws a warning:

let useIsMounted = () => {
  let ref = React.useRef(false);

  React.useEffect0(() => {
    ref->React.Ref.setCurrent(true);
    Some(() => ref->React.Ref.setCurrent(false));
  });
  ref;
};

Warning

Warning 3: deprecated: React.Ref.setCurrent
Please directly assign to ref.current insteadocamllsp

The Fix

In ReasonML/Reason-React

let useIsMounted = () => {
  let ref = React.useRef(false);

  React.useEffect0(() => {
    ref.current = true;
    Some(() => ref.current = false);
  });
  ref;
};

In Rescript

let useIsMounted = () => {
  let ref = React.useRef(false)

  React.useEffect0(() => {
    ref.current = true
    Some(() => ref.current = false)
  })
  ref
}

Yes, they are the same except for the commas which the compiler will remove for you anyway.

npx bsconfig.json

Alain — Thu, 19 Nov 2020 09:44:15 +0000

bsconfig.json

I've been annoyed by writing or createing new bsconfig.json files for projects that may not have started out as reasonml or ocaml projects, especially when using reason-apollo-client and graphql-ppx projects. So, inspired by the greate @benawad who teaches at youtube/benawad97 and his tsconfig.json project, I created myself this utility. Check it out if you are like me and just want to remove the friction of creating a new bsconfig.json file.

Run npx bsconfig.json.

idkjs/bsconfig.json

Noop in ReasonML

Alain — Fri, 23 Oct 2020 08:21:16 +0000

Note to self on where those explanations where on the purpose of noop functions in ReasonML.

https://discord.com/channels/235176658175262720/235176658175262720/768734335552978959