docs - add js output to module function example

Author: jderochervlk

pages/docs/manual/latest/module-functions.mdx

@@ -6,35 +6,87 @@ canonical: "/docs/manual/latest/module-functions"
 
 # Module Functions
 
-```rescript
-// next.res - bindings for Next
-module type Params = {
-  type t
-}
+<CodeTab labels={["ReScript", "JS Output"]}>
+```res example
+module Next = {
+  // define a module type to use a parameter for out module function
+  module type Params = {
+    type t
+  }
 
-module MakeNavigation = (Params: Params) => {
-  @module("next/navigation")
-  external useNavigation: unit => Params.t = "useNavigation"
+  // define our module function
+  module MakeNavigation = (Params: Params) => {
+    @module("next/navigation")
+    external useNavigation: unit => Params.t = "useNavigation"
+    /* You can use values from the function parameter, such as Params.t */
+  }
 }
 
-// Your React component
-// component.res
-module Params = {
-  type t = {
-    tag: string,
-    item: string,
+module Component: {
+  @react.component
+  let make: unit => Jsx.element
+} = {
+  // Create a module that matches the module type expected by Next.MakeNavigation
+  module Params = {
+    type t = {
+      tag: string,
+      item: string,
+    }
   }
+
+  // Create a new module using the Params module we created and the Next.MakeNavigation module function
+  module Navigation = Next.MakeNavigation(Params)
+
+  @react.component
+  let make = () => {
+    // Use the functions, values, or types created by the module function
+    let params = Navigation.useNavigation()
+    <div>
+      <p>
+        {React.string("Tag: " ++ params.tag /* params is fully typed! */)}
+      </p>
+      <p> {React.string("Item: " ++ params.item)} </p>
+    </div>
+  }
+}
+```
+```js
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as $$Navigation from "next/navigation";
+import * as JsxRuntime from "react/jsx-runtime";
+
+function MakeNavigation(Params) {
+  return {};
 }
 
-module Navigation = Next.MakeNavigation(Params)
+var Next = {
+  MakeNavigation: MakeNavigation
+};
 
-@react.component
-let make = () => {
-  let params = Navigation.useNavigation()
-  <div>
-    <p> {React.string("Tag: " ++ params.tag)} </p>
-    <p> {React.string("Item: " ++ params.item)} </p>
-  </div>
+function Playground$Component(props) {
+  var params = $$Navigation.useNavigation();
+  return JsxRuntime.jsxs("div", {
+              children: [
+                JsxRuntime.jsx("p", {
+                      children: "Tag: " + params.tag
+                    }),
+                JsxRuntime.jsx("p", {
+                      children: "Item: " + params.item
+                    })
+              ]
+            });
 }
+
+var Component = {
+  make: Playground$Component
+};
+
+export {
+  Next ,
+  Component ,
+}
+/* next/navigation Not a pure module */
+
 ```
-import { comma } from "postcss/lib/list"
+</ CodeTab>