fix doc tests

.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)

docs/react/hooks-ref.mdx

@@ -113,6 +113,7 @@ let make = () => {
   let textInput = React.useRef(Nullable.null)
   let setTextInputRef = element => {
     textInput.current = element;
+    None
   }
 
   let focusTextInput = _ => {

docs/react/refs-and-the-dom.mdx

@@ -202,6 +202,7 @@ let make = () => {
   let textInput = React.useRef(Nullable.null)
   let setTextInputRef = element => {
     textInput.current = element
+    None
   }
 
   let focusTextInput = _ => {
@@ -269,7 +270,10 @@ module CustomTextInput = {
 @react.component
 let make = () => {
   let textInput = React.useRef(Nullable.null)
-  let setInputRef = element => { textInput.current = element}
+  let setInputRef = element => { 
+    textInput.current = element
+    None
+  }
 
   <CustomTextInput setInputRef/>
 }

docs/react/styling.mdx

@@ -18,27 +18,11 @@ If they work in JS then they almost certainly work in ReScript. In the next few
 
 ## Inline Styles
 
-This is the most basic form of styling, coming straight from the 90s. You can apply a `style` attribute to any DOM element with our `ReactDOM.Style.make` API:
+This is the most basic form of styling, coming straight from the 90s. You can apply a `style` attribute to any DOM element using the `style` prop.
 
 ```res example
-<div style={ReactDOM.Style.make(~color="#444444", ~fontSize="68px", ())} />
-```
-
-It's a [labeled](/docs/manual/latest/function#labeled-arguments) (therefore typed) function call that maps to the familiar style object `{color: '#444444', fontSize: '68px'}`. For every CSS attribute in the CSS specfication, there is a camelCased label in our `make` function.
-
-**Note** that `make` returns an opaque `ReactDOM.Style.t` type that you can't read into. We also expose a `ReactDOM.Style.combine` that takes in two `style`s and combine them.
-
-### Escape Hatch: `unsafeAddProp`
-
-The above `Style.make` API will safely type check every style field! However, we might have missed some more esoteric fields. If that's the case, the type system will tell you that the field you're trying to add doesn't exist. To remediate this, we're exposing a `ReactDOM.Style.unsafeAddProp` to dangerously add a field to a style:
-
-```res example
-let style =
-  ReactDOM.Style.make(
-    ~color="red",
-    ~padding="10px",
-    (),
-  )->ReactDOM.Style.unsafeAddProp("-webkit-animation-name", "moveit")
+let make = () =>
+  <div style={{ color: "#444444", fontSize: "68px"}} />
 ```
 
 ## Global CSS
@@ -173,7 +157,7 @@ Please note that this approach will not check for invalid css attribute names. I
 @module("@emotion/css") external css: ReactDOM.Style.t => string = "css"
 
 // Usage is slightly different (and probably less ergonomic)
-let container = ReactDOM.Style.make(~padding="20px", ())->css;
+let container = {padding: "20px"}->css
 
 let app = <div
   className={container}