fix doc tests

Author: jderochervlk

.gitignore

@@ -14,10 +14,8 @@ index_data/*.json
 _tempFile.cmi
 _tempFile.cmj
 _tempFile.cmt
-
-# these docs are checked in, but we consider them frozen.
-# pages/docs/manual/v8.0.0/
-# pages/docs/manual/v9.0.0/
+_tempFile.res
+temp
 
 .bsb.lock
 .merlin

docs/manual/async-await.mdx

@@ -215,7 +215,7 @@ let fetchData = async () => {
       Console.log("user 2 mail: " ++ user2Mail)
     }
 
-  | exception JsError(err) => Console.log2("Some error occurred", err)
+  | exception JsExn(err) => Console.log2("Some error occurred", err)
   }
 }
 ```

docs/manual/exception.mdx

@@ -97,7 +97,7 @@ You can directly match on exceptions _while_ getting another return value from a
 <CodeTab labels={["ReScript", "JS Output"]}>
 
 ```res prelude
-switch list{1, 2, 3}->List.getExn(4) {
+switch list{1, 2, 3}->List.getOrThrow(4) {
 | item => Console.log(item)
 | exception Not_found => Console.log("No such item found!")
 }

docs/manual/function.mdx

@@ -474,7 +474,7 @@ let somethingThatMightThrow = async () => throw(SomeReScriptException)
 let someAsyncFn = async () => {
   switch await somethingThatMightThrow() {
   | data => Some(data)
-  | exception JsError(_) => None
+  | exception JsExn(_) => None
   | exception SomeReScriptException => None
   }
 }

docs/manual/generalized-algebraic-data-types.mdx

@@ -33,7 +33,8 @@ type timezone =
 
 Using this variant type, we will end up having functions like this:
 
-```res example
+{/* TODO: fix this example, it has an error because it doesn't have access to the previous snippet */}
+```res
 let convertToDaylight = tz => {
   switch tz {
   | EST => EDT
@@ -47,15 +48,17 @@ This function is only valid for a subset of our variant type's constructors but
 
 Let's see if we can find a way for the compiler to help us with normal variants. We could define another variant type to distinguish the two kinds of timezone.
 
-```res example
+{/* TODO: fix this example, it has an error because it doesn't have access to the previous snippet */}
+```res
 type daylightOrStandard =
   | Daylight(timezone)
   | Standard(timezone)
 ```
 
 This has a lot of problems. For one, it's cumbersome and redundant. We would now have to pattern-match twice whenever we deal with a timezone that's wrapped up here. The compiler will force us to check whether we are dealing with daylight or standard time, but notice that there's nothing stopping us from providing invalid timezones to these constructors:
 
-```res example
+{/* TODO: fix this example, it has an error because it doesn't have access to the previous snippet */}
+```res
 let invalidTz1 = Daylight(EST)
 let invalidTz2 = Standard(EDT)
 ```
@@ -78,7 +81,8 @@ type rec timezone<_> =
 We define our type with a type parameter. We manually annotate each constructor, providing it with the correct type parameter indicating whether it is standard or daylight. Each constructor is a `timezone`,
 but we've added another level of specificity using a type parameter. Constructors are now understood to be `standard` or `daylight` at the _type_ level. Now we can fix our function like this:
 
-```res example
+{/* TODO: fix this example, it has an error because it doesn't have access to the previous snippet */}
+```res
 let convertToDaylight = tz => {
   switch tz {
   | EST => EDT
@@ -92,7 +96,8 @@ The compiler can infer correctly that this function should only take `timezone<s
 we try to return a standard timezone from this function. Actually, this seems like it could be a problem,
 we still want to be able to match on all cases of the variant sometimes, and a naive attempt at this will not pass the type checker. A naive example will fail:
 
-```res example
+{/* TODO: fix this example, it has an error because it doesn't have access to the previous snippet */}
+```res
 let convertToDaylight = tz =>
   switch tz {
   | EST => EDT
@@ -104,7 +109,8 @@ let convertToDaylight = tz =>
 
 This will complain that `daylight` and `standard` are incompatible. To fix this, we need to explicitly annotate to tell the compiler to accept both:
 
-```res example
+{/* TODO: fix this example, it has an error because it doesn't have access to the previous snippet */}
+```res
 let convertToDaylight : type a. timezone<a> => timezone<daylight> =  // ...
 ```
 
@@ -117,7 +123,8 @@ Sometimes, a function should have a different return type based on what you give
 
 [^1]: In ReScript v12, the built-in operators are already generic, but we use them in this example for simplicity.
 
-```res example
+{/* this example purposefully has an error so it is not marked as an example */}
+```res
 type rec number<_> = Int(int): number<int> | Float(float): number<float>
 
 let add = (type a, x: number<a>, y: number<a>): a =>
@@ -204,7 +211,8 @@ This API has a method for binding event handlers, `on`. This takes an event and
 depending on which event we are binding to. A naive implementation might look similar to this, defining a
 separate method for each stream event to wrap the unsafe version of `on`.
 
-```res example
+{/* TODO: fix this example, it has an error */}
+```res
 module Stream = {
     type t
 
@@ -233,7 +241,8 @@ The real magic happens in the signature of `on`. Read it carefully, and then loo
 follow how the type variables are getting filled in, write it out on paper what each type variable is equal
 to if you need and it will soon become clear.
 
-```res example
+{/* TODO: fix this example, it has an error */}
+```res
 
 module Stream = {
   type t<'a>

docs/manual/module-functions.mdx

@@ -36,32 +36,33 @@ module Next = {
 }
 
 module Component: {
-@react.component
-let make: unit => Jsx.element
+  @react.component
+  let make: unit => Jsx.element
 } = {
 // Create a module that matches the module type expected by Next.MakeParams
 module P = {
-type t = {
-tag: string,
-item: string,
-}
+  type t = {
+    tag: string,
+    item: string,
+  }
 }
 
 // Create a new module using the Params module we created and the Next.MakeParams module function
 module Params = Next.MakeParams(P)
 
 @react.component
 let make = () => {
+
 // Use the functions, values, or types created by the module function
 let params = Params.useParams()
 
-<div>
-<p>
-{React.string("Tag: " ++ params.tag /_ params is fully typed! _/)}
-</p>
-<p> {React.string("Item: " ++ params.item)} </p>
-</div>
-}
+  <div>
+    <p>
+      {React.string("Tag: " ++ params.tag /* params is fully typed! */)}
+    </p>
+    <p> {React.string("Item: " ++ params.item)} </p>
+  </div>
+  }
 }
 
 ````

docs/manual/record.mdx

@@ -36,7 +36,7 @@ You can also nest definitions of records.
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res prelude
+```res example
 type person = {
   age: int,
   name: string,
@@ -81,7 +81,7 @@ So if we in the example above ended up needing to refer to `person.notificationS
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res prelude
+```res example
 type personNotificationSettings = {
   sendEmails: bool,
   allowPasswordLogin: bool,

docs/react/hooks-context.mdx

@@ -49,9 +49,9 @@ module ThemedButton = {
     | "light" | _ => ("#000000", "#eeeeee")
     }
 
-    let style = ReactDOMStyle.make(~color, ~backgroundColor, ())
-
-    <button style> {React.string("I am a styled button!")} </button>
+    <button style={{color, backgroundColor}}>
+      {React.string("I am a styled button!")}
+    </button>
   }
 }
 

docs/react/hooks-custom.mdx

@@ -22,7 +22,8 @@ Let's go back to a previous example from our [React.useEffect section](./hooks-e
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res example {16-31}
+{/* TODO: fix this example */}
+```res {16-31}
 // FriendStatus.res
 
 module ChatAPI = {
@@ -153,7 +154,7 @@ let make = (~friend: friend) => {
     | Loading => "grey"
   }
 
-  <li style={ReactDOMStyle.make(~color,())}>
+  <li style={{ color }}>
       {React.string(friend.name)}
   </li>
 }
@@ -371,7 +372,7 @@ let make = (~friend: friend) => {
     | Loading => "grey"
   }
 
-  <li style={ReactDOMStyle.make(~color,())}>
+  <li style={{ color }}>
       {React.string(friend.name)}
   </li>
 }

docs/react/hooks-effect.mdx

@@ -184,7 +184,8 @@ type state = Offline | Loading | Online
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res example
+{/* TODO: fix this example */}
+```res
 // FriendStatus.res
 @react.component
 let make = (~friendId: string) => {
@@ -281,7 +282,8 @@ When we render with count updated to 6, React will compare the items in the `[5]
 
 This also works for effects that have a cleanup phase:
 
-```res example
+{/* TODO fix this example */}
+```res
 @react.component
 let make = (~friendId: string) => {
   let (state, setState) = React.useState(_ => Offline)