Skip to content

Commit 9a59bd4

Browse files
authored
Import attributes (rescript-lang#811)
* document how to use import attributes * fix link
1 parent 83f8cff commit 9a59bd4

File tree

2 files changed

+58
-0
lines changed

2 files changed

+58
-0
lines changed

misc_docs/syntax/decorator_module.mdx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,31 @@ var root = Path.dirname("/User/github");
2727

2828
</CodeTab>
2929

30+
### Import Attributes
31+
32+
**Since 11.1**
33+
34+
`@module` also supports [import attributes](https://github.com/tc39/proposal-import-attributes). It looks like this:
35+
36+
<CodeTab labels={["ReScript", "JS Output (ES6)"]}>
37+
```rescript
38+
@module({from: "./myJson.json", with: {type_: "json", \"some-exotic-identifier": "someValue"}})
39+
external myJson: Js.Json.t = "default"
40+
41+
Console.log(myJson)
42+
```
43+
44+
```javascript
45+
import MyJsonJson from "./myJson.json" with {"type": "json", "some-exotic-identifier": "someValue"};
46+
47+
var myJson = MyJsonJson;
48+
49+
console.log(myJson);
50+
```
51+
</CodeTab>
52+
53+
More information [in the dedicated documentation for import attributes](/docs/manual/latest/import-from-export-to-js#use-import-attributes).
54+
3055
### References
3156

3257
* [Import from JavaScript](/docs/manual/latest/import-from-export-to-js#import-from-javascript)

pages/docs/manual/latest/import-from-export-to-js.mdx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,39 @@ var studentName = Student;
9393

9494
</CodeTab>
9595

96+
### Use Import Attributes
97+
98+
**Since 11.1**
99+
100+
[Import attributes](https://github.com/tc39/proposal-import-attributes) can be used in ReScript, as long as ReScript is configured to output ES6. You do that by passing configuration to the `@module` attribute:
101+
102+
<CodeTab labels={["ReScript", "JS Output (ES6)"]}>
103+
```rescript
104+
@module({from: "./myJson.json", with: {type_: "json", \"some-exotic-identifier": "someValue"}})
105+
external myJson: Js.Json.t = "default"
106+
107+
Console.log(myJson)
108+
```
109+
110+
```javascript
111+
import MyJsonJson from "./myJson.json" with {"type": "json", "some-exotic-identifier": "someValue"};
112+
113+
var myJson = MyJsonJson;
114+
115+
console.log(myJson);
116+
```
117+
</CodeTab>
118+
119+
This above imports the local `./myJson.json` file, adding import attributes.
120+
121+
This is how it works:
122+
1. Instead of passing a string or tuple to `@module`, pass a record.
123+
2. This record should have a `from` key. The value of that is where you want the module to be imported from (just like the regular string to `@module` is).
124+
3. It should also have a `with` key, with another record where you put all the import attributes you want emitted.
125+
126+
Notice `\"some-exotic-identifier"` - you'll need to escape any key that's not a valid ReScript record key.
127+
Also notice `type_`. Since `type` is a reserved keyword in ReScript, you can use `type_` instead. It will be output as `type` in the JavaScript code.
128+
96129
## Dynamic Import
97130
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.
98131

0 commit comments

Comments
 (0)