Fix code snippet compile errors

docs/advanced-js-interop.md

@@ -126,15 +126,19 @@ type action =
 
 This will generate a couple of functions with the following types:
 
+<!--#prelude#
+(* type signature *)
+type action
+-->
 ```ocaml
 val actionToJs : action -> int
 
 val actionFromJs : int -> action option
 ```
 ```reasonml
-external actionToJs: action => int = ;
+let actionToJs: action => int;
 
-external actionFromJs: int => option(action) = ;
+let actionFromJs: int => option(action);
 ```
 
 `actionToJs` returns integers from values of `action` type. It will start with 0
@@ -171,15 +175,20 @@ This feature relies on [abstract types](./language-concepts.md#abstract-types)
 to hide the JavaScript runtime representation. It will generate functions with
 the following types:
 
+<!--#prelude#
+(* type signature *)
+type action
+type abs_action
+-->
 ```ocaml
 val actionToJs : action -> abs_action
 
 val actionFromJs : abs_action -> action
 ```
 ```reasonml
-external actionToJs: action => abs_action = ;
+let actionToJs: action => abs_action;
 
-external actionFromJs: abs_action => action = ;
+let actionFromJs: abs_action => action;
 ```
 
 In the case of `actionFromJs`, the return value, unlike the previous case, is
@@ -208,20 +217,28 @@ type action =
 ```
 ```reasonml
 [@deriving jsConverter]
-type action = [ | `Click | [@mel.as "submit"] `Submit | `Cancel];
+type action = [
+  | `Click
+  | [@mel.as "submit"] `Submit
+  | `Cancel
+];
 ```
 
 Akin to the variant example, the following two functions will be generated:
 
+<!--#prelude#
+(* type signature *)
+type action
+-->
 ```ocaml
 val actionToJs : action -> string
 
 val actionFromJs : string -> action option
 ```
 ```reasonml
-external actionToJs: action => string = ;
+let actionToJs: action => string;
 
-external actionFromJs: string => option(action) = ;
+let actionFromJs: string => option(action);
 ```
 
 The `jsConverter { newType }` payload can also be used with polymorphic
@@ -335,12 +352,12 @@ example, the OCaml signature would look like this after preprocessing:
 ```ocaml
 type person
 
-val person : name:string -> ?age:int -> unit -> person
+external person : name:string -> ?age:int -> unit -> person = "person"
 ```
 ```reasonml
 type person;
 
-external person: (~name: string, ~age: int=?, unit) => person = ;
+external person: (~name: string, ~age: int=?, unit) => person = "person";
 ```
 
 The `person` function can be used to create values of `person`. It is the only
@@ -355,7 +372,7 @@ type person = {
   name : string;
   age : int option; [@mel.optional]
 }
-[@@deriving jsDeriving]
+[@@deriving jsProperties]
 -->
 ```ocaml
 let alice = person ~name:"Alice" ~age:20 ()
@@ -529,14 +546,14 @@ type person = {
   name : string;
   mutable age : int;
 }
-[@@deriving getSet]
+[@@deriving jsProperties, getSet]
 
 let alice = person ~name:"Alice" ~age:20
 
 let () = ageSet alice 21
 ```
 ```reasonml
-[@deriving getSet]
+[@deriving (jsProperties, getSet)]
 type person = {
   name: string,
   mutable age: int,

docs/bindings-cookbook.md

@@ -266,7 +266,10 @@ literal directly:
 let person = [%mel.obj { id = 1; name = "Alice" }]
 ```
 ```reasonml
-let person = {"id": 1, "name": "Alice"};
+let person = {
+  "id": 1,
+  "name": "Alice",
+};
 ```
 
 See the [Using `Js.t`
@@ -285,7 +288,10 @@ type person = {
   id: int,
   name: string,
 };
-let person = {id: 1, name: "Alice"};
+let person = {
+  id: 1,
+  name: "Alice",
+};
 ```
 
 See the [Using OCaml
@@ -349,7 +355,10 @@ type person = {
   name: string,
 };
 
-let person = {id: 1, name: "Alice"};
+let person = {
+  id: 1,
+  name: "Alice",
+};
 let {id, name} = person;
 ```
 

docs/build-system.md

@@ -160,6 +160,9 @@ application. In the root folder, create another `dune` file:
   And an <code>app.re</code> file:
 </div>
 
+<!--#prelude#
+module Lib = struct let name = "" end
+-->
 ```ocaml
 let () = Js.log Lib.name
 ```

docs/data-types-and-runtime-rep.md

@@ -212,6 +212,10 @@ JavaScript arrays by Melange.
 
 For example, some code like this:
 
+<!--#prelude#
+let foo, bar = 1, 2
+module React = struct let useEffect2 _ _ = () end
+-->
 ```ocaml
 let () = React.useEffect2 (fun () -> None) (foo, bar)
 ```

docs/dune

@@ -15,6 +15,102 @@
    communicate-with-javascript.md
    communicate-with-javascript.md.processed)))
 
+(rule
+ (deps language-concepts.md)
+ (target language-concepts.md.processed)
+ (action
+  (with-stdout-to
+   %{target}
+   (with-stdin-from
+    %{deps}
+    (run %{bin:process_md})))))
+
+(rule
+ (alias re)
+ (action
+  (diff language-concepts.md language-concepts.md.processed)))
+
+(rule
+ (deps data-types-and-runtime-rep.md)
+ (target data-types-and-runtime-rep.md.processed)
+ (action
+  (with-stdout-to
+   %{target}
+   (with-stdin-from
+    %{deps}
+    (run %{bin:process_md})))))
+
+(rule
+ (alias re)
+ (action
+  (diff
+   data-types-and-runtime-rep.md
+   data-types-and-runtime-rep.md.processed)))
+
+(rule
+ (deps attributes-and-extension-nodes.md)
+ (target attributes-and-extension-nodes.md.processed)
+ (action
+  (with-stdout-to
+   %{target}
+   (with-stdin-from
+    %{deps}
+    (run %{bin:process_md})))))
+
+(rule
+ (alias re)
+ (action
+  (diff
+   attributes-and-extension-nodes.md
+   attributes-and-extension-nodes.md.processed)))
+
+(rule
+ (deps working-with-js-objects-and-values.md)
+ (target working-with-js-objects-and-values.md.processed)
+ (action
+  (with-stdout-to
+   %{target}
+   (with-stdin-from
+    %{deps}
+    (run %{bin:process_md})))))
+
+(rule
+ (alias re)
+ (action
+  (diff
+   working-with-js-objects-and-values.md
+   working-with-js-objects-and-values.md.processed)))
+
+(rule
+ (deps advanced-js-interop.md)
+ (target advanced-js-interop.md.processed)
+ (action
+  (with-stdout-to
+   %{target}
+   (with-stdin-from
+    %{deps}
+    (run %{bin:process_md})))))
+
+(rule
+ (alias re)
+ (action
+  (diff advanced-js-interop.md advanced-js-interop.md.processed)))
+
+(rule
+ (deps bindings-cookbook.md)
+ (target bindings-cookbook.md.processed)
+ (action
+  (with-stdout-to
+   %{target}
+   (with-stdin-from
+    %{deps}
+    (run %{bin:process_md})))))
+
+(rule
+ (alias re)
+ (action
+  (diff bindings-cookbook.md bindings-cookbook.md.processed)))
+
 (rule
  (deps build-system.md)
  (target build-system.md.processed)

docs/language-concepts.md

@@ -300,6 +300,9 @@ let square = x => x * x;
 
 We are using it like:
 
+<!--#prelude#
+let square x = x * x
+-->
 ```ocaml
 let ten = succ (square 3)
 ```
@@ -311,6 +314,9 @@ The pipe operator allows to write the computation for `ten` in left-to-right
 order, as [it has left
 associativity](https://v2.ocaml.org/manual/expr.html#ss:precedence-and-associativity):
 
+<!--#prelude#
+let square x = x * x
+-->
 ```ocaml
 let ten = 3 |> square |> succ
 ```
@@ -322,6 +328,9 @@ When working with functions that can take multiple arguments, the pipe operator
 works best when the functions take the data we are processing as the last
 argument. For example:
 
+<!--#prelude#
+let square x = x * x
+-->
 ```ocaml
 let sum = List.fold_left ( + ) 0
 
@@ -349,6 +358,10 @@ language.
 However, there are some limitations when using data-last when it comes to error
 handling. In the given example, if we mistakenly used the wrong function:
 
+<!--#prelude#
+(* not expected to type check *)
+let sum = List.fold_left ( + ) 0
+-->
 ```ocaml
 let sum_sq =
   [ 1; 2; 3 ]
@@ -402,6 +415,10 @@ with the pipe first operator.
 For example, we can rewrite the example above using `Belt.List.map` and the pipe
 first operator:
 
+<!--#prelude#
+let sum = List.fold_left ( + ) 0
+let square x = x * x
+-->
 ```ocaml
 let sum_sq =
   [ 1; 2; 3 ]
@@ -415,6 +432,11 @@ let sum_sq = [1, 2, 3]->(Belt.List.map(square))->sum;
 We can see the difference on the error we get if the wrong function is passed to
 `Belt.List.map`:
 
+<!--#prelude#
+(* not expected to type check *)
+let sum = List.fold_left ( + ) 0
+let square x = x * x
+-->
 ```ocaml
 let sum_sq =
   [ 1; 2; 3 ]