` in the rendered DOM.
-You can also see in the the JS output that the function we created was directly translated into the pure JS version of a ReactJS component. Note how a `
` transforms into a `React.createElement("div",...)` call in JavaScript.
+You can also see in the the JS output that the function we created was directly translated into the pure JS version of a ReactJS component. Note how a `
` transforms into a `JsxRuntime.jsx("div",...)` call in JavaScript.
## Defining Props
@@ -272,6 +274,69 @@ The best way to approach this kind of issue is by using props instead of childre
**The best use-case for `children` is to pass down `React.element`s without any semantic order or implementation details!**
+## @react decorators
+
+You might've wondered what `@react.component` actually does.
+It's a decorator that tells the ReScript compiler to treat the function as a React component, transforming it at the syntax level.
+
+In JavaScript, a React component is just a function that takes props (an object) and returns JSX. In ReScript, props are typically represented as a record type.
+The `@react.component` decorator automatically generates that record type and wraps the function for you—so you don't have to.
+
+```res
+// Counter.res
+
+@react.component
+let make = (~title, ~count) => {
+
{React.string(title)} {React.int(count)}
+}
+
+// This is equivalent to writing:
+
+type props = {title: string, count: int}
+
+let \"Counter" = ({title, count}: props) => {
+
{React.string(title)} {React.int(count)}
+}
+```
+
+However, writing it manually like this means you lose the `make` function name, which prevents JSX from working as expected when using the component elsewhere.
+
+Having an uppercased function name also helps distinguish React components from regular functions in [React DevTools](https://react.dev/learn/react-developer-tools).
+
+If you prefer defining your own props record, you can use `@react.componentWithProps`. This gives you full control over the props type while still generating a proper uppercased component.
+
+
+
+```res
+// Counter.res
+type props = {title: string, count: int}
+
+@react.componentWithProps
+let make = (props: props) => {
+
+}
+```
+
+```js
+import * as JsxRuntime from "react/jsx-runtime";
+
+function Counter(props) {
+ return JsxRuntime.jsxs("h1", {
+ children: [
+ props.title,
+ props.count
+ ]
+ });
+}
+
+let make = Counter;
+```
+
+
+
## Props & Type Inference
The ReScript type system is really good at inferring the prop types just by looking at its prop usage.
@@ -405,7 +470,7 @@ let content =
## Component Naming
-Because components are actually a pair of functions, they have to belong to a module to be used in JSX. It makes sense to use these modules for identification purposes as well. `@react.component` automatically adds the name for you based on the module you are in.
+Because components are actually a pair of functions, they have to belong to a module to be used in JSX. It makes sense to use these modules for identification purposes as well. `@react.component` or `@react.componentWithProps` automatically adds the name for you based on the module you are in.
```res
diff --git a/pages/docs/react/latest/router.mdx b/pages/docs/react/latest/router.mdx
index 5d95287aa..923efe5ad 100644
--- a/pages/docs/react/latest/router.mdx
+++ b/pages/docs/react/latest/router.mdx
@@ -76,7 +76,7 @@ let make = () => {
let url = RescriptReactRouter.useUrl()
switch url.path {
- | list{"user", id} =>
+ | list{"user", id, ..._} =>
| list{} =>
| _ =>
}
@@ -90,28 +90,28 @@ import * as Home from "./Home.res.js";
import * as NotFound from "./NotFound.res.js";
function App(Props) {
- var url = RescriptReactRouter.useUrl(undefined, undefined);
- var match = url.path;
- if (!match) {
- return React.createElement(Home.make, {});
+ let url = RescriptReactRouter.useUrl(undefined, undefined);
+ let match = url.path;
+ if (match === 0) {
+ return JsxRuntime.jsx(Home, {});
}
- if (match.hd === "user") {
- var match$1 = match.tl;
- if (match$1 && !match$1.tl) {
- return React.createElement(User.make, {
- id: match$1.hd
- });
- }
-
+ if (match.hd !== "user") {
+ return JsxRuntime.jsx(NotFound, {});
+ }
+ let match$1 = match.tl;
+ if (match$1 !== 0 && match$1.tl === 0) {
+ return JsxRuntime.jsx(User, {
+ id: match$1.hd
+ });
+ } else {
+ return JsxRuntime.jsx(NotFound, {});
}
- return React.createElement(NotFound.make, {});
}
var make = App;
export {
- make ,
-
+ make,
}
```
diff --git a/pages/docs/reason-compiler/latest/automatic-interface-generation.mdx b/pages/docs/reason-compiler/latest/automatic-interface-generation.mdx
deleted file mode 100644
index e022f957e..000000000
--- a/pages/docs/reason-compiler/latest/automatic-interface-generation.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
-# Automatic Interface Generation
-
-> Note: this feature currently does not work for new projects!
-
-"Interface files" (`.resi` files) are the "public description" of their corresponding "implementation files" (`.ml`, `.re`), exposed as documentation, and containing nothing but type declarations. Since a file is a module, an interface file is essentially a [module signature](https://reasonml.github.io/docs/en/module.html#signatures).
-
-## Tips & Tricks
-
-You don't have to explicitly write an interface file; by default, one will be inferred from the implementation file (just like how a module's type can be inferred when you hover over it) and **every binding from the file will be exported**. We do encourage that, after you finish iterating on your project:
-
-- Explicitly add interface files to the files meant to be public
-- Add docblock comments on top of each binding to serve as documentation
-- Make some types abstract, and simply don't expose every binding from the interface file
-
-Some types will have to be copy pasted from the implementation file, which gets tedious. This is why we let you **automatically generate interface files**, after which you can tweak whatever you want.
-
-For a file `src/MyUtils.ml`, run:
-
-```sh
-bsc lib/bs/src/MyUtils-MyProject.cmi
-```
-
-Where `MyProject` is your project's namespace. If it's not enabled, it'll be just `MyUtils.cmi`). `.cmi` is the ReScript file that contains some [compiled type info](https://reasonml.github.io/community/faq#compiled-files).
-
-The above command outputs a boilerplate `.mli` interface to stdout (old ml syntax).
-
-_If you don't have `bsc` globally available, use the ones provided locally in `node_modules/bs-platform/lib/bsc.exe`_.
-
-**Note**: the generated boilerplate might contain the strings `"BS-EXTERNAL"` or `"ReScript External"`. This happens when you've used `@bs` externals in your implementation file. It's a temporary flaw; you need to manually turn these `"BS-EXTERNAL"` back into the right `@bs` externals for now. We'll correct this in the future.
diff --git a/pages/docs/reason-compiler/latest/better-data-structures-printing-debug-mode.mdx b/pages/docs/reason-compiler/latest/better-data-structures-printing-debug-mode.mdx
deleted file mode 100644
index dc17bfbc7..000000000
--- a/pages/docs/reason-compiler/latest/better-data-structures-printing-debug-mode.mdx
+++ /dev/null
@@ -1,44 +0,0 @@
-# Better Data Structures Printing Debug Mode
-
-You might have seen that using `Js.log` to print records, variants and others don't print out record field names and variant tags. Record, for example, is compiled into an array (the field names are removed). This is partially for performance, and partially because of [insert excuse here].
-
-To remediate this, we introduce a flag for `bsc` (the BuckleScript compiler), `-bs-g`, that retains record fields names, variant tags, exception names, module names, etc.
-
-
-
Before
After
-
-
-
-
-
-
-
-
-
-
-
-
-**Note**: this is for **debugging only**. Please don't forget to undo this for production.
-
-## Usage
-
-- Add `"bsc-flags": ["-bs-g"]` to your `bsconfig.json`.
-- In the BuckleScript/Reason file you'd like to debug, add `[%%debugger.chrome]` at the top \*.
-- If you're on Node.js, run: `node --inspect-brk MyCompiledFile.js` and open this URL in Chrome: `chrome://inspect`.
-- Make sure you've got [Chrome custom formatter enabled](http://www.mattzeunert.com/2016/02/19/custom-chrome-devtools-object-formatters.html).
-- Click on inspect, then step through code as you would usually:
-
-
-
-This custom formatter is still experimental; feel free to contribute to it [here](https://github.com/BuckleScript/bucklescript/blob/master/jscomp/others/belt_Debug.ml)!
-
-**Note**: you need to restart `node` every time your files changes.
-
-**Note**: don't forget to remove `-bs-g` from your `bsconfig.json` for production!
-
-## Tips & Tricks
-
-[Here are other ways](https://nodejs.org/en/docs/guides/debugging-getting-started/#inspector-clients) to debug using node/Chrome.
-
-\* The extension `[%%debugger.chrome]` conditionally turns on the debugger support. Feel free to keep it on at all time; it will not generate any extra garbage code **unless** you have `-bs-g` flag turned on above.
-
diff --git a/pages/docs/reason-compiler/latest/build-advanced.mdx b/pages/docs/reason-compiler/latest/build-advanced.mdx
deleted file mode 100644
index cabf0dcb8..000000000
--- a/pages/docs/reason-compiler/latest/build-advanced.mdx
+++ /dev/null
@@ -1,48 +0,0 @@
-# Build System: Advanced
-
-## Customize Rules (Generators Support)
-
-You might use some pre-processor to generate boilerplate code during development.
-
-**Note**: pre-processors can be classified as two categories:
-
-- System-dependent, which should be delayed until running on user machines.
-- System-independent: lex, yacc, m4, re2c, etc, which can be executed any time.
-
-BS has built-in support for [conditional compilation](conditional-compilation.md), which satisfies the first point. This section is about the second point.
-
-An example, where bsb uses [ocamlyacc](http://caml.inria.fr/pub/docs/manual-ocaml-4.00/manual026.html):
-
-```json
-{
- "generators": [
- {
- "name": "ocamlyacc",
- "command": "ocamlyacc $in"
- }
- ],
- "sources": {
- "dir": "src",
- "generators": [
- {
- "name": "ocamlyacc",
- "edge": ["test.ml", "test.mli", ":", "test.mly"]
- }
- ]
- }
-}
-```
-
-`ocamlyacc` will generate the artifacts `test.ml` and `test.mli` in the same directory than `test.mly`.
-
-**Note**: we highly recommend you to check in the generated files, since this cuts out dependencies like `ocamlyacc` for the end-users.
-
-When developing a project, `bsb` will track the dependencies between `test.ml` and `test.mly` properly. When released as a package, `bsb` will cut such dependency, so that users will only need the generated `test.ml`. To help test such behavior in development mode, users could set it manually:
-
-```json
-{
- "cut-generators": true
-}
-```
-
-This _prevents_ `bsb` from regenerating `test.ml` whenever `test.mly` changes.
diff --git a/pages/docs/reason-compiler/latest/class.mdx b/pages/docs/reason-compiler/latest/class.mdx
deleted file mode 100644
index f6e5700ac..000000000
--- a/pages/docs/reason-compiler/latest/class.mdx
+++ /dev/null
@@ -1,53 +0,0 @@
-# Class Interop
-
-## `new`
-
-Use `bs.new` to emulate e.g. `new Date()`:
-
-```reason
-type t;
-[@bs.new] external createDate : unit => t = "Date";
-
-let date = createDate();
-```
-
-Output:
-
-```js
-var date = new Date();
-```
-
-You can chain `bs.new` and `bs.module` if the JS module you're importing is itself a class:
-
-```reason
-type t;
-[@bs.new] [@bs.module] external book : unit => t = "Book";
-let bookInstance = book();
-```
-
-Output:
-
-```js
-var Book = require("Book");
-var bookInstance = new Book();
-```
-
-## Bind to JS Classes
-
-JS classes are really just JS objects wired up funnily. **In general**, prefer using the previous object section's features to bind to a JS object.
-
-OCaml having classes really helps with modeling JS classes. Just add a `[@bs]` to a class type to turn them into a `Js.t` class:
-
-```reason
-class type _rect =
- [@bs]
- {
- [@bs.set] pub height: int;
- [@bs.set] pub width: int;
- pub draw: unit => unit
- };
-
-type rect = Js.t(_rect);
-```
-
-For `Js.t` classes, methods with arrow types are treated as real methods (automatically annotated with `[@bs.meth]`) while methods with non-arrow types are treated as properties. Adding `bs.set` to those methods will make them mutable, which enables you to set them using `#=` later. Dropping the `bs.set` attribute makes the method/property immutable. Basically like the object section's features.
diff --git a/pages/docs/reason-compiler/latest/compiler-architecture-principles.mdx b/pages/docs/reason-compiler/latest/compiler-architecture-principles.mdx
deleted file mode 100644
index 4243f87fe..000000000
--- a/pages/docs/reason-compiler/latest/compiler-architecture-principles.mdx
+++ /dev/null
@@ -1,68 +0,0 @@
-# Compiler Architecture
-
-ReScript's high level architecture:
-
-```
-Source Language
- |
- | (Reuse OCaml Parser)
- v
-Surface Syntax Tree
- |
- | (built-in Syntax tree transformation)
- v
-Surface Syntax Tree
- |
- | (Reuse OCaml Type checker)
- v
-Typedtree
- |
- | (Reuse OCaml pattern match compiler and erase types)
- | (Patches to pass more information down to Lambda )
- |
-OCaml Lambda IR
- |
- |
- v
-Buckle Lambda IR ------------------+
- | ^ |
- | | 6 Lambda Passes (lam_* files)
- | | Optimization/inlining/dead code elimination
- | \ |
- | \ --------------------------+
- |
- | Self tail call elimination
- | Constant folding + propagation
- V
-JS IR (J.ml) ---------------------+
- | ^ |
- | | 6 JS Passes (js_* files)
- | | Optimization/inlining/dead code elimination
- | \ |
- | \ -------------------------+
- |
- | Smart printer includes scope analysis
- |
- V
-Javascript Code
-```
-
-## Design Decisions
-
-The design of ReScript follows several high-level principles. While those principles might change in the future, they are enforced today and can explain certain technical limitations BS has.
-
-### Lambda Representation
-
-As pictured in the diagram above, ReScript is primarily based on the Lambda representation of the OCaml compiler. While this representation is quite rich, some information is lost from the upstream representation. The patch to the OCaml compiler tries to enrich this representation in a non-intrusive way (see next section).
-
-### Minimal Patch to the OCaml compiler
-
-ReScript requires patches to the OCaml compiler. One of the main reasons is to enrich the Lambda representation so that the generated code is as nice as possible. A design goal is to keep those patches minimal and useful for the OCaml compiler in general so that they can later be integrated.
-
-### Soundness
-
-ReScript preserves the soundness of the OCaml language. Assuming the FFI is correctly implemented, the type safety is preserved.
-
-### Minimal new symbol creation
-
-In order to make the JavaScript generated code as close as possible to the original OCaml core we thrive to introduce as few new symbols as possible.
diff --git a/pages/docs/reason-compiler/latest/concepts-overview.mdx b/pages/docs/reason-compiler/latest/concepts-overview.mdx
deleted file mode 100644
index 2b2c8defb..000000000
--- a/pages/docs/reason-compiler/latest/concepts-overview.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
-# Concepts Overview
-
-Before starting the next few sections, here are a helpful things to know:
-
-## OCaml
-
-This is the backing of BuckleScript. BuckleScript is a fork of OCaml, specifically `v4.02.3` (upgrade impending!). This doc site assumes basic knowledge of OCaml; you can learn OCaml through [Real World OCaml](https://realworldocaml.org/) or, if you're learning Reason anyway, start with the [Reason Manual](/docs/manual/latest/introduction).
-
-**This documentation site will mostly cover just the extra bits we've added to OCaml to enable good JS interoperability**.
-
-## Reason
-
-An alternative syntax for OCaml that's more familiar to JS programmers and reduces the learning overhead a bit. Reason works with OCaml, since apart from the syntax they share most other things. This also means Reason works with BuckleScript. The latter has some first-class support for some other utilities of Reason.
-
-## OPAM
-
-This is OCaml's official package manager. Since BuckleScript uses NPM and Yarn, you won't need OPAM as a beginner. We will mention it for advanced workflows. If you already know OPAM and want to install OCaml toolchains like merlin, you should install those native tool chains under switch 4.06.1
-
-## External/Interop/FFI
-
-These are all jargon for working with BuckleScript \<-> JavaScript.
-
-External: in the context of BuckleScript, one of the primary ways to use a JS value.
-
-Interop: short for "interoperability".
-
-FFI: Foreign Function Interface. The general term for things like "external", "wrapper" and "interop". Basically means calling a value from the other language. Prefer the first two terms.
diff --git a/pages/docs/reason-compiler/latest/conditional-compilation.mdx b/pages/docs/reason-compiler/latest/conditional-compilation.mdx
deleted file mode 100644
index 49a7f7b61..000000000
--- a/pages/docs/reason-compiler/latest/conditional-compilation.mdx
+++ /dev/null
@@ -1,130 +0,0 @@
-# Conditional Compilation
-
-> This only works with the old OCaml syntax.
-
-Sometimes you want to write code that works with different versions of compilers and libraries.
-
-People used to use preprocessors like [C preprocessor](http://tigcc.ticalc.org/doc/cpp.html) for the C family languages. The OCaml community uses several preprocessors: [cppo](https://github.com/mjambon/cppo), [ocp-pp](https://github.com/OCamlPro/typerex-build/tree/master/tools/ocp-pp), camlp4 IFDEF macros, [optcomp](https://github.com/diml/optcomp) and [ppx optcomp](https://github.com/janestreet/ppx_optcomp).
-
-Instead of a preprocessor, ReScript adds language-level static `if` compilation. It's less powerful than other preprocessors since it only supports static `if` (no `#define`, `#undefine`, `#include`), but there are several advantages.
-
-- It’s tiny (only ~500 lines) and highly efficient. Everything can be done in a **single pass**. It's easy to rebuild the pre-processor into a standalone file, with no dependencies on compiler libs, to back-port it to old OCaml compilers.
-- It’s purely functional and type-safe, and cooperates with editor tooling like Merlin.
-
-## Usage
-
-`lwt_unix.mli`
-
-```ocaml
-type open_flag =
- Unix.open_flag =
- | O_RDONLY
- | O_WRONLY
- | O_RDWR
- | O_NONBLOCK
- | O_APPEND
- | O_CREAT
- | O_TRUNC
- | O_EXCL
- | O_NOCTTY
- | O_DSYNC
- | O_SYNC
- | O_RSYNC
-#if OCAML_VERSION =~ ">=3.13" then
- | O_SHARE_DELETE
-#end
-#if OCAML_VERSION =~ ">=4.01" then
- | O_CLOEXEC
-#end
-```
-
-You don't have to add anything to the build to have these work. The compiler `bsc` understands these already.
-
-## Built-in & Custom Variables
-
-See the output of `bsc.exe -bs-list-conditionals`:
-
-```sh
-> bsc.exe -bs-D CUSTOM_A="ghsigh" -bs-list-conditionals
-OCAML_PATCH "BS"
-BS_VERSION "1.2.1"
-OS_TYPE "Unix"
-BS true
-CUSTOM_A "ghsigh"
-WORD_SIZE 64
-OCAML_VERSION "4.02.3+BS"
-BIG_ENDIAN false
-```
-
-Add your custom variable to the mix with `-bs-D MY_VAR="bla"`:
-
-```sh
-> bsc.exe -bs-D MY_VAR="bla" -bs-list-conditionals
-OCAML_PATCH "BS"
-BS_VERSION "1.2.1"
-OS_TYPE "Unix"
-BS true
-MY_VAR="bla"
-...
-```
-
-## Concrete Syntax
-
-```ocaml
-static-if
-| HASH-IF-BOL conditional-expression THEN //
- tokens
-(HASH-ELIF-BOL conditional-expression THEN) *
-(ELSE-BOL tokens)?
-HASH-END-BOL
-
-conditional-expression
-| conditional-expression && conditional-expression
-| conditional-expression || conditional-expression
-| atom-predicate
-
-atom-predicate
-| atom operator atom
-| defined UIDENT
-| undefined UIDENT
-
-operator
-| (= | < | > | <= | >= | =~ )
-
-atom
-| UIDENT | INT | STRING | FLOAT
-```
-
-- IF-BOL means `#IF` should be in the beginning of a line.
-
-## Typing Rules
-
-- type of INT is `int`
-- type of STRING is `string`
-- type of FLOAT is `float`
-- value of UIDENT comes from either built-in values (with documented types) or an environment variable, if it is literally `true`, `false` then it is `bool`, else if it is parsable by `Belt.Int.fromString` then it is of type int, else if it is parsable by `Belt.Float.fromString` then it is float, otherwise it would be string
-- In `lhs operator rhs`, `lhs` and `rhs` are always the same type and return boolean. `=~` is a semantic version operator which requires both sides to be string.
-
-Evaluation rules are obvious. `=~` respect semantic version, for example, the underlying engine
-
-```ocaml
-semver Location.none "1.2.3" "~1.3.0" = false;;
-semver Location.none "1.2.3" "^1.3.0" = true ;;
-semver Location.none "1.2.3" ">1.3.0" = false ;;
-semver Location.none "1.2.3" ">=1.3.0" = false ;;
-semver Location.none "1.2.3" "<1.3.0" = true ;;
-semver Location.none "1.2.3" "<=1.3.0" = true ;;
-semver Location.none "1.2.3" "1.2.3" = true;;
-```
-
-## Tips & Tricks
-
-This is a very small extension to OCaml. It's backward compatible with OCaml except in the following case:
-
-```ocaml
-let f x =
- x
-#elif //
-```
-
-`#elif` at the beginning of a line is interpreted as static `if`. there is no issue with `#if` or `#end`, since they are already keywords.
diff --git a/pages/docs/reason-compiler/latest/difference-from-native-ocaml.mdx b/pages/docs/reason-compiler/latest/difference-from-native-ocaml.mdx
deleted file mode 100644
index 554dc0a3a..000000000
--- a/pages/docs/reason-compiler/latest/difference-from-native-ocaml.mdx
+++ /dev/null
@@ -1,57 +0,0 @@
-# Difference from Native OCaml
-
-This is particularly important when porting an existing OCaml application to JavaScript.
-
-## Custom Data Type
-
-In OCaml, the C FFI allows the user to define a custom data type and customize `caml_compare`, `caml_hash` behavior, etc. This is not available in our backend (since we have no C FFI).
-
-## Physical (in)equality
-
-In general, only use physical equality as an optimization technique; don't rely on its correctness, since it is tightly coupled with the runtime.
-
-## String Char Range
-
-Currently, BuckleScript assumes that the char range is 0-255. The user should be careful when they pass a JavaScript string to the OCaml side. We are working on a solution for this problem.
-
-## Weak Map
-
-OCaml’s weak map is not available in BuckleScript. The weak pointer is replaced by a strict pointer.
-
-## Integers
-
-OCaml has `int`, `int32`, `nativeint` and `int64` types.
-
-- Both `int32` and `int64` in BuckleScript have the exact same semantics as OCaml.
-- `int` in BuckleScript is the same as `int32` while in OCaml it’s platform dependent.
-- `nativeint` is treated as JavaScript float, except for division. For example, `Nativeint.div a b` will be translated into `a / b | 0`.
-
-**Note**: `Nativeint.shift_right_logical x 0` is different from `Int32.shift_right_local x 0`. The former is literally translated into `x >>> 0` (translated into an unsigned int), while the latter is `x | 0`.
-
-## Printf.printf
-
-The Printf.print implementation in BuckleScript requires a newline (`\n`) to trigger the printing. This behavior is not consistent with the buffered behavior of native OCaml. The only potential problem we foresee is that if the program terminates with no newline character, the text will never be printed.
-
-## Obj Module
-
-We do our best to mimic the native compiler, but we have no guarantee and there are differences.
-
-## Hashtbl Hash Algorithm
-
-BuckleScript uses the same algorithm as native OCaml, but the output is different due to the runtime representation of int/int64/int32 and float.
-
-## Marshall Module
-
-Not supported yet.
-
-## Str Module
-
-[Not supported](https://github.com/BuckleScript/bucklescript/issues/879) as it is implemented in C, which is not portable to BuckleScript. Use the [`Js.String`](/docs/manual/latest/api/js/string) module instead which has bindings to the JavaScript [`String`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) class.
-
-## Sys.argv, Sys.max_array_length, Sys.max_string_length
-
-Command line arguments are always empty. This might be fixed in the future. `Sys.max_array_length` and `Sys.max_string_length` will be the same as `max_int`, but it might be respected.
-
-## Unsupported IO Primitives
-
-Because of the JS environment limitation, `Pervasives.stdin` is not supported but both `Pervasives.stdout` and `Pervasives.stderr` are.
diff --git a/pages/docs/reason-compiler/latest/extended-compiler-options.mdx b/pages/docs/reason-compiler/latest/extended-compiler-options.mdx
deleted file mode 100644
index 3547bac53..000000000
--- a/pages/docs/reason-compiler/latest/extended-compiler-options.mdx
+++ /dev/null
@@ -1,116 +0,0 @@
-# Extended Compiler Options
-
-**Note**: this section is only for people who want roll their own build system instead of using the recommended build system, `bsb`. This also provides some tips for contributors who debug the compiler.
-
-ReScript inherits the command line arguments of the [OCaml compiler](http://caml.inria.fr/pub/docs/manual-ocaml/comp.html). It also adds several BS-specific flags. Run `bsc -help` to see the list.
-
-All these flags can be passed into the `bsc-flags` section of `bsb` (though some of them don't make sense to be passed).
-
-**Note** also that this section isn't kept very up-to-date. Contributions welcome!
-
-## -bs-main (single directory build)
-
-```sh
-bsc -bs-main Main
-```
-
-`bsc` will build module `Main` and all its dependencies. When it finishes, it'll run `node main.js`.
-
-```sh
-bsc -c -bs-main Main
-```
-
-Same as above, but will not run `node`.
-
-## -bs-files
-
-So that you can do
-
-```sh
-bsc -c -bs-files *.ml *.mli
-```
-
-the compiler will sort the order of input files before starting compilation.
-
-ReScript supports two compilation modes: script mode and package mode. In package mode, you have to provide `package.json` on top and set the options `-bs-package-name`, `-bs-package-output`. In script mode, such flags are not needed.
-
-## -bs-package-name
-
-The name of your project. It's recommended to use the same `name` than the one in `package.json`.
-
-## -bs-package-output
-
-Configure the output module system. The format is `module_system:output/path/relative/to/package.json`.
-
-Currently supported systesms are: `commonjs`, `amdjs` and `es6`.
-
-For example, when you want to use the `es6` module system:
-
-```sh
-bsc -bs-package-name your_package -bs-package-output es6:lib/es6 -c xx.ml
-```
-
-**Note**: you can supply multiple `-bs-package-output` at once. For example:
-
-```sh
-bsc -bs-package-name name -bs-package-output commonjs:lib/js -bs-package-output amdjs:lib/amdjs -c x.ml
-```
-
-It'll generate `x.js` in `lib/js` as a commonjs module, `lib/amdjs` as an amdjs module at the same time.
-
-You would then need a bundler for the different module systems: webpack supports `commonjs` and `amdjs`, rollup supports es6, while google closure compiler supports all.
-
-## -bs-no-warn-ffi-type
-
-Turn off warnings on FFI type declarations.
-
-## -bs-eval
-
-Example:
-
-```sh
-> bsc -dparsetree -drawlambda -bs-eval 'Js.log "hello"'
-
-[
- structure_item (//toplevel//[1,0+0]..[1,0+14])
- Pstr_eval
- expression (//toplevel//[1,0+0]..[1,0+14])
- Pexp_apply
- expression (//toplevel//[1,0+0]..[1,0+6])
- Pexp_ident "Js.log" (//toplevel//[1,0+0]..[1,0+6])
- [
-
@@ -305,7 +307,7 @@ let default = (props: props) => {
let valuesAndType = items->Array.map(item => {
switch item {
| Value({name, signature, docstrings, deprecated}) =>
- let code = String.replaceRegExp(signature, %re("/\\n/g"), "\n")
+ let code = String.replaceRegExp(signature, /\\n/g, "\n")
let slugPrefix = "value-" ++ name
<>
{name->React.string}
@@ -314,7 +316,7 @@ let default = (props: props) => {
>
| Type({name, signature, docstrings, deprecated}) =>
- let code = String.replaceRegExp(signature, %re("/\\n/g"), "\n")
+ let code = String.replaceRegExp(signature, /\\n/g, "\n")
let slugPrefix = "type-" ++ name
<>
+ {React.string(
+ "These articles, videos, and resources are created by the amazing ReScript community.",
+ )}
+
+ {React.string("If you have a resource you'd like to share, please feel free to submit a PR!")}
+
+
+
+}
+
+let default = make
diff --git a/src/ConsolePanel.res b/src/ConsolePanel.res
index 04f11d9b8..6c72f86f0 100644
--- a/src/ConsolePanel.res
+++ b/src/ConsolePanel.res
@@ -3,37 +3,40 @@ type logLevel = [
| #warn
| #error
]
+type log = {level: logLevel, content: array}
@react.component
-let make = (~logs, ~setLogs) => {
+let make = (~logs, ~appendLog) => {
React.useEffect(() => {
let cb = e => {
let data = e["data"]
switch data["type"] {
| #...logLevel as logLevel =>
let args: array = data["args"]
- setLogs(previous => previous->Array.concat([(logLevel, args)]))
+ appendLog(logLevel, args)
| _ => ()
}
}
Webapi.Window.addEventListener("message", cb)
Some(() => Webapi.Window.removeEventListener("message", cb))
- }, [])
+ }, [appendLog])
{React.string("Console")}
{switch logs {
| [] =>
- React.string(
- "Add some 'Console.log' to your code and enable 'Auto-run' to see your logs here.",
- )
+
+ {React.string(
+ "Add some 'Console.log' to your code and click 'Run' or enable 'Auto-run' to see your logs here.",
+ )}
+