Skip to content

Dynamic imports docs #741

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 3, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 59 additions & 0 deletions pages/docs/manual/latest/import-from-export-to-js.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,65 @@ var studentName = Student;

</CodeTab>

## Dynamic Import
Leveraging JavaScript's [dynamic `import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) to reduce bundle size and lazy load code as needed is easy in ReScript. It's also a little bit more convenient than in regular JavaScript because you don't need to keep track of file paths manually with ReScript's module system.

### Dynamically Importing Parts of a Module
Use the `Js.import` function to dynamically import a specific part of a module. Put whatever `let` binding you want to import in there, and you'll get a `promise` back resolving to that specific binding.

Let's look at an example. Imagine the following file `MathUtils.res`:

```rescript
let add = (a, b) => a + b
let sub = (a, b) => a - b
```

Now let's dynamically import the add function in another module, e.g. `App.res`:

<CodeTab labels={["ReScript", "JS Output (ES6)"]}>
```rescript
// App.res
let main = async () => {
let add = await Js.import(MathUtils.add)
let onePlusOne = add(1, 1)

Console.log(onePlusOne)
}
```
```javascript
async function main() {
var add = await import("./MathUtils.mjs").then(function(m) {
return m.add;
});

var onePlusOne = add(1, 1);
console.log(onePlusOne);
}
```
</CodeTab>

### Dynamically Importing an Entire Module
The syntax for importing a whole module looks a little different, since we are operating on the module syntax level; instead of using `Js.import`, you may simply `await` the module itself:
<CodeTab labels={["ReScript", "JS Output (ES6)"]}>
```rescript
// App.res
let main = async () => {
module Utils = await MathUtils

let twoPlusTwo = Utils.add(2, 2)
Console.log(twoPlusTwo)
}
```
```javascript
async function main() {
var Utils = await import("./MathUtils.mjs");

var twoPlusTwo = Utils.add(2, 2);
console.log(twoPlusTwo);
}
```
</CodeTab>

## Export To JavaScript

### Export a Named Value
Expand Down