Skip to content

Commit c7fcb5a

Browse files
aspeddroaspeddro
committed
Merge branch 'master' into update-docs-api-29-06
2 parents 0abd086 + cc5fbee commit c7fcb5a

15 files changed

+490
-9
lines changed

‎data/sidebar_react_latest.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,11 @@
1212
"events",
1313
"refs-and-the-dom",
1414
"context",
15+
"memo",
1516
"styling",
1617
"router",
17-
"lazy-components"
18+
"lazy-components",
19+
"import-export-reactjs"
1820
],
1921
"Hooks & State Management": [
2022
"hooks-overview",

‎misc_docs/syntax/decorator_send_pipe.mdx

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ keywords: ["send", "pipe", "decorator"]
44
name: "@bs.send.pipe"
55
summary: "This is the `@bs.send.pipe` decorator."
66
category: "decorators"
7+
status: "deprecated"
78
---
89

910
> Removed since compiler version 10.0. Use the [@send](https://rescript-lang.org/docs/manual/latest/bind-to-js-function) decorator instead.

‎misc_docs/syntax/language_labeled_argument.mdx

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
id: "labeled-argument"
3+
keywords: ["labeled", "argument"]
4+
name: "~arg"
5+
summary: "This is a `labeled argument`."
6+
category: "languageconstructs"
7+
---
8+
9+
When declaring a function, arguments can be prefixed with `~` which means that they can and need to be called by their name, not the argument position. This is especially useful to differentiate them more easily if they are of the same type.
10+
11+
### Example
12+
13+
<CodeTab labels={["ReScript", "JS Output"]}>
14+
15+
```res prelude
16+
let calculateDistance = (~x1, ~y1, ~x2, ~y2) => {
17+
Math.sqrt((x1 -. x2) ** 2. +. (y1 -. y2) ** 2.)
18+
}
19+
20+
calculateDistance(~x1=6., ~y1=8., ~x2=3., ~y2=4.)
21+
```
22+
23+
```js
24+
function calculateDistance(x1, y1, x2, y2) {
25+
return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
26+
}
27+
28+
calculateDistance(6, 8, 3, 4);
29+
```
30+
31+
</CodeTab>
32+
33+
Labeled arguments can be provided in any order:
34+
35+
<CodeTab labels={["ReScript", "JS Output"]}>
36+
37+
```res example
38+
calculateDistance(~x1=6., ~x2=3., ~y1=8., ~y2=4.)
39+
```
40+
41+
```js
42+
calculateDistance(6, 8, 3, 4);
43+
```
44+
45+
</CodeTab>
46+
47+
This also works together with partial application:
48+
49+
<CodeTab labels={["ReScript", "JS Output"]}>
50+
51+
```res example
52+
let calcY = calculateDistance(~x1=6., ~x2=3., ...)
53+
calcY(~y1=8., ~y2=4.)
54+
```
55+
56+
```js
57+
function calcY(none, extra) {
58+
return calculateDistance(6, none, 3, extra);
59+
}
60+
61+
calcY(8, 4);
62+
```
63+
64+
</CodeTab>
65+
66+
### References
67+
68+
* [Labeled Arguments](/docs/manual/latest/function#labeled-arguments)
69+
* [Function Syntax Cheatsheet](/docs/manual/latest/function#tips--tricks)

‎misc_docs/syntax/language_optional_labeled_argument.mdx

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
id: "optional-labeled-argument"
3+
keywords: ["optional", "labeled", "argument"]
4+
name: "~arg=?"
5+
summary: "This is an `optional labeled argument`."
6+
category: "languageconstructs"
7+
---
8+
9+
Labeled arguments, i.e. arguments that are prefixed with `~`, can be suffixed with `=?` to denote that they are optional. Thus, they can be
10+
omitted when calling the function.
11+
12+
### Example
13+
14+
<CodeTab labels={["ReScript", "JS Output"]}>
15+
16+
```res example
17+
let print = (text, ~logLevel=?) => {
18+
switch logLevel {
19+
| Some(#error) => Console.error(text)
20+
| _ => Console.log(text)
21+
}
22+
}
23+
24+
print("An info")
25+
print("An error", ~logLevel=#error)
26+
```
27+
28+
```js
29+
function print(text, logLevel) {
30+
if (logLevel === "error") {
31+
console.error(text);
32+
} else {
33+
console.log(text);
34+
}
35+
}
36+
37+
print("An info", undefined);
38+
39+
print("An error", "error");
40+
```
41+
42+
</CodeTab>
43+
44+
Optional labeled arguments can also hold a default value.
45+
46+
<CodeTab labels={["ReScript", "JS Output"]}>
47+
48+
```res example
49+
let print = (text, ~logLevel=#info) => {
50+
switch logLevel {
51+
| #error => Console.error(text)
52+
| #warn => Console.warn(text)
53+
| #info => Console.log(text)
54+
}
55+
}
56+
57+
print("An info")
58+
print("A warning", ~logLevel=#warn)
59+
```
60+
61+
```js
62+
function print(text, logLevelOpt) {
63+
var logLevel = logLevelOpt !== undefined ? logLevelOpt : "info";
64+
if (logLevel === "warn") {
65+
console.warn(text);
66+
} else if (logLevel === "error") {
67+
console.error(text);
68+
} else {
69+
console.log(text);
70+
}
71+
}
72+
73+
print("An info", undefined);
74+
75+
print("A warning", "warn");
76+
```
77+
78+
</CodeTab>
79+
80+
### References
81+
82+
* [Labeled Arguments](/docs/manual/latest/function#labeled-arguments)
83+
* [Optional Labeled Arguments](/docs/manual/latest/function#optional-labeled-arguments)
84+
* [Labeled Argument with Default Value](/docs/manual/latest/function#optional-with-default-value)
85+
* [Function Syntax Cheatsheet](/docs/manual/latest/function#tips--tricks)

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

+2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ canonical: "/docs/manual/latest/import-from-export-to-js"
88

99
You've seen how ReScript's idiomatic [Import & Export](import-export.md) works. This section describes how we work with importing stuff from JavaScript and exporting stuff for JavaScript consumption.
1010

11+
If you're looking for react-specific interop guidance, check out the [React JS Interop guide](../../react/latest/import-export-reactjs.mdx).
12+
1113
**Note**: due to JS ecosystem's module compatibility issues, our advice of keeping your ReScript file's compiled JS output open in a tab applies here **more than ever**, as you don't want to subtly output the wrong JS module import/export code, on top of having to deal with Babel/Webpack/Jest/Node's CommonJS \<-> JavaScript module compatibility shims.
1214

1315
In short: **make sure your bindings below output what you'd have manually written in JS**.

‎pages/docs/manual/latest/let-binding.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -181,5 +181,5 @@ Still, `%%private` is useful in the following scenarios:
181181

182182
- **Code generators.** Some code generators want to hide some values but it is sometimes very hard or time consuming for code generators to synthesize the types for public fields.
183183

184-
- **Quick prototyping.** During prototyping, we still want to hide some values, but the interface file is not stable yet, `%%private` provide you such convenience.
184+
- **Quick prototyping.** During prototyping, we still want to hide some values, but the interface file is not stable yet. `%%private` provides you such convenience.
185185

‎pages/docs/manual/latest/overview.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ canonical: "/docs/manual/latest/overview"
127127
const myFun = (x, y) => {
128128
const doubleX = x + x;
129129
const doubleY = y + y;
130-
return doubleX + doubleY
130+
return doubleX + doubleY;
131131
};
132132
```
133133
</td>

‎pages/docs/manual/v10.0.0/let-binding.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -181,5 +181,5 @@ Still, `%%private` is useful in the following scenarios:
181181

182182
- **Code generators.** Some code generators want to hide some values but it is sometimes very hard or time consuming for code generators to synthesize the types for public fields.
183183

184-
- **Quick prototyping.** During prototyping, we still want to hide some values, but the interface file is not stable yet, `%%private` provides you such convenience.
184+
- **Quick prototyping.** During prototyping, we still want to hide some values, but the interface file is not stable yet. `%%private` provides you such convenience.
185185

‎pages/docs/manual/v10.0.0/overview.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ canonical: "/docs/manual/latest/overview"
125125
<pre><code>{`const myFun = (x, y) => {
126126
const doubleX = x + x;
127127
const doubleY = y + y;
128-
return doubleX + doubleY
128+
return doubleX + doubleY;
129129
};`}</code></pre>
130130
</td>
131131
<td>

‎pages/docs/manual/v8.0.0/let-binding.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -217,5 +217,5 @@ Still, `%private` is useful in the following scenarios:
217217

218218
- Code generators. Some code generators want to hide some values but it is sometimes very hard or time consuming for code generators to synthesize the types for public fields.
219219

220-
- Quick prototyping. During prototyping, we still want to hide some values, but the interface file is not stable yet, `%private` provide you such convenience.
220+
- Quick prototyping. During prototyping, we still want to hide some values, but the interface file is not stable yet. `%private` provides you such convenience.
221221

‎pages/docs/manual/v8.0.0/overview.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ canonical: "/docs/manual/latest/overview"
117117
const myFun = (x, y) => {
118118
const doubleX = x + x;
119119
const doubleY = y + y;
120-
return doubleX + doubleY
120+
return doubleX + doubleY;
121121
};
122122
```
123123
</td>

‎pages/docs/manual/v9.0.0/let-binding.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -181,5 +181,5 @@ Still, `%private` is useful in the following scenarios:
181181

182182
- Code generators. Some code generators want to hide some values but it is sometimes very hard or time consuming for code generators to synthesize the types for public fields.
183183

184-
- Quick prototyping. During prototyping, we still want to hide some values, but the interface file is not stable yet, `%private` provide you such convenience.
184+
- Quick prototyping. During prototyping, we still want to hide some values, but the interface file is not stable yet. `%private` provides you such convenience.
185185

‎pages/docs/manual/v9.0.0/overview.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ canonical: "/docs/manual/latest/overview"
115115
const myFun = (x, y) => {
116116
const doubleX = x + x;
117117
const doubleY = y + y;
118-
return doubleX + doubleY
118+
return doubleX + doubleY;
119119
};
120120
```
121121
</td>

0 commit comments

Comments
 (0)