Add bs.inline

Author: chenglou

layouts/ManualDocsLayout.re

@@ -100,6 +100,7 @@ let jsInteropNavs = [|
     href: "/docs/manual/latest/bind-to-global-js-values",
   },
   {name: "JSON", href: "/docs/manual/latest/json"},
+  {name: "Inlining Constants", href: "/docs/manual/latest/inlining-constants"},
   {
     name: "Use Illegal Identifier Names",
     href: "/docs/manual/latest/use-illegal-identifier-names",

pages/docs/manual/latest/inlining-constants.mdx

@@ -0,0 +1,78 @@
+---
+title: "Inlining Constants"
+description: "Inlining constants"
+canonical: "/docs/manual/latest/inlining-constants"
+---
+
+# Inlining Constants
+
+Sometime, in the JavaScript output, you might want a certain value to be forcefully inlined. For example:
+
+```js
+if (process.env.mode === 'development') {
+  console.log("Dev-only code here!")
+}
+```
+
+The reason is that your JavaScript bundler (e.g. Webpack) might turn that into:
+
+```js
+if ('production' === 'development') {
+  console.log("Dev-only code here!")
+}
+```
+
+Then your subsequent Uglifyjs optimization would remove that entire `if` block. This is how projects like ReactJS provide a development mode code with plenty of dev warnings, while ensuring that the uglified (minified) production code is free of those expensive blocks.
+
+So, in ReScript, producing that example `if (process.env.mode === 'development')` output is important. This first try doesn't work:
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res example
+@bs.val external process: 'a = "process"
+
+let mode = "development"
+
+if (process["env"]["mode"] === mode) {
+  Js.log("Dev-only code here!")
+}
+```
+```js
+var mode = "development";
+
+if (process.env.mode === mode) {
+  console.log("Dev-only code here!");
+}
+```
+
+</CodeTab>
+
+The JS output shows `if (process.env.mode === mode)`, which isn't what we wanted. To inline `mode`'s value, use `@bs.inline`:
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res example
+@bs.val external process: 'a = "process"
+
+@bs.inline
+let mode = "development"
+
+if (process["env"]["mode"] === mode) {
+  Js.log("Dev-only code here!")
+}
+```
+```js
+if (process.env.mode === "development") {
+  console.log("Dev-only code here!");
+}
+```
+
+</CodeTab>
+
+Now your resulting JS code can pass through Webpack and Uglifyjs like the rest of your JavaScript code, and that whole `console.log` can be removed.
+
+The inlining currently only works for **string, float and boolean**.
+
+## Tips & Tricks
+
+This is **not** an optimization. This is an edge-case feature for folks who absolutely need particular values inlined for a JavaScript post-processing step, like conditional compilation. Beside the difference in code that the conditional compilation might end up outputting, there's no performance difference between inlining and not inlining simple values in the eyes of a JavaScript engine.