https://github.com/davesnx/meleange

https://github.com/davesnx/meleange

Last synced: 14 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/davesnx/meleange
• Owner: davesnx
• Created: 2024-06-02T22:42:28.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-07-06T10:26:05.000Z (6 months ago)
• Last Synced: 2024-10-31T17:26:19.465Z (2 months ago)
• Language: OCaml
• Size: 1.22 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# meleange

When using a library like `Belt` or `Js` in an OCaml module, compiled by Melange

```ocaml

let print () =

  let total = Belt.List.reduce [1; 2; 3] 0 (+) in

  Js.Console.log ("Hola! " ^ Int.to_string total)

```

Gets generated as JavaScript, looking like:

```js

// Generated by Melange

import * as Belt__Belt_List from "melange.belt/belt_List.mjs";

import * as Stdlib__Int from "melange/int.mjs";

function print(param) {

  const total = Belt__Belt_List.reduce({

        hd: 1,

        tl: {

          hd: 2,

          tl: {

            hd: 3,

            tl: /* [] */0

          }

        }

      }, 0, (function (prim0, prim1) {

          return prim0 + prim1 | 0;

        }));

  console.log("Hola! " + Stdlib__Int.to_string(total));

}

export {

  print ,

}

/* No side effect */

```

If we load this module with `

  {

    "imports": {

      "melange/": "./../node_modules/melange/",

      "melange.belt/": "./../node_modules/melange.belt/",

      "melange.js/": "./../node_modules/melange.js/"

    }

  }

```

The script loads perfectly.

### How

There's a bit of waterfall, since the browser need to parse the entrypoint (App.mjs), detect the linked modules (imports) and later fetch them.

If we have an entrypoint (App.mjs) which only imports Lib.mjs, the following request graph appears:



  

  



With `modulepreload` (``), you are able to tell the browser that this module is urgent

![](./docs/preload-lib-mjs.png)

#### Resources

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap

https://github.com/WICG/import-maps