fix: rename generated example module

Rename the temp example source from _tempFile to Example so derived JS output no longer leaks the temp filename.

Refresh the JSX preserved-output docs that are in scope for the new three-tab ReScript CodeTab flow.

Author: jderochervlk

markdown-pages/docs/manual/tagged-templates.mdx

@@ -98,7 +98,7 @@ function s(strings, parameters) {
 
 Now that you have defined your tag function, you can use it this way:
 
-<CodeTab labels={["ReScript", "JS Output"]}>
+<CodeTab labels={["ReScript", "JS Output", "JSX Preserved Output"]}>
 
 ```res
 module Greetings = {
@@ -137,7 +137,7 @@ function s(strings, parameters) {
   );
 }
 
-function _tempFile$Greetings(props) {
+function Example$Greetings(props) {
   return JsxRuntime.jsx("div", {
     children: s(
       [`hello `, ` you're `, ` year old!`],
@@ -156,7 +156,62 @@ function _tempFile$Greetings(props) {
 }
 
 let Greetings = {
-  make: _tempFile$Greetings,
+  make: Example$Greetings,
+};
+
+export { s, Greetings };
+```
+
+```jsx
+import * as Stdlib_Array from "@rescript/runtime/lib/es6/Stdlib_Array.js";
+import * as JsxRuntime from "react/jsx-runtime";
+
+function s(strings, parameters) {
+  return Stdlib_Array.reduceWithIndex(
+    parameters,
+    strings[0],
+    (acc, param, i) => {
+      let s = strings[(i + 1) | 0];
+      let p;
+      switch (param.TAG) {
+        case "I":
+        case "F":
+          p = param._0.toString();
+          break;
+        case "S":
+          p = param._0;
+          break;
+        case "Bool":
+          p = param._0 ? "true" : "false";
+          break;
+      }
+      return acc + p + s;
+    },
+  );
+}
+
+function Example$Greetings(props) {
+  return (
+    <div>
+      {s(
+        [`hello `, ` you're `, ` year old!`],
+        [
+          {
+            TAG: "S",
+            _0: props.name,
+          },
+          {
+            TAG: "I",
+            _0: props.age,
+          },
+        ],
+      )}
+    </div>
+  );
+}
+
+let Greetings = {
+  make: Example$Greetings,
 };
 
 export { s, Greetings };

markdown-pages/docs/react/arrays-and-keys.mdx

@@ -18,7 +18,7 @@ Whenever we are transforming data into an array of elements and put it in our Re
 
 Arrays require a special function `React.array` to convert an `array<Jsx.element>` to render as `Jsx.element`.
 
-<CodeTab labels={["ReScript", "JS Output"]}>
+<CodeTab labels={["ReScript", "JS Output", "JSX Preserved Output"]}>
 
 ```res
 type todo = {id: string, text: string}
@@ -38,7 +38,7 @@ let make = () => {
 ```js
 import * as JsxRuntime from "react/jsx-runtime";
 
-function _tempFile(props) {
+function Example(props) {
   let todos = [
     {
       id: "todo1",
@@ -63,7 +63,30 @@ function _tempFile(props) {
   });
 }
 
-let make = _tempFile;
+let make = Example;
+
+export { make };
+```
+
+```jsx
+import * as JsxRuntime from "react/jsx-runtime";
+
+function Example(props) {
+  let todos = [
+    {
+      id: "todo1",
+      text: "Todo 1",
+    },
+    {
+      id: "todo2",
+      text: "Todo 2",
+    },
+  ];
+  let items = todos.map((todo) => <li key={todo.id}>{todo.text}</li>);
+  return <ul>{items}</ul>;
+}
+
+let make = Example;
 
 export { make };
 ```
@@ -74,7 +97,7 @@ export { make };
 
 Keys help React identify which elements have been changed, added, or removed throughout each render. Keys should be given to elements inside the array to give the elements a stable identity:
 
-<CodeTab labels={["ReScript", "JS Output"]}>
+<CodeTab labels={["ReScript", "JS Output", "JSX Preserved Output"]}>
 
 ```res
 let numbers = [1, 2, 3, 4, 5]
@@ -102,6 +125,16 @@ let items = numbers.map((number) =>
 export { numbers, items };
 ```
 
+```jsx
+import * as JsxRuntime from "react/jsx-runtime";
+
+let numbers = [1, 2, 3, 4, 5];
+
+let items = numbers.map((number) => <li key={number.toString()}>{number}</li>);
+
+export { numbers, items };
+```
+
 </CodeTab>
 
 The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys:
@@ -148,7 +181,7 @@ var items = todos.map(function (todo) {
 
 If you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort:
 
-<CodeTab labels={["ReScript", "JS Output"]}>
+<CodeTab labels={["ReScript", "JS Output", "JSX Preserved Output"]}>
 
 ```res {1..3}
 let items = Array.mapWithIndex(todos, (todo, i) => {
@@ -196,13 +229,34 @@ let items = todos.map((todo, i) =>
 export { todos, items };
 ```
 
+```jsx
+import * as JsxRuntime from "react/jsx-runtime";
+
+let todos = [
+  {
+    id: "todo1",
+    text: "Todo 1",
+  },
+  {
+    id: "todo2",
+    text: "Todo 2",
+  },
+];
+
+todos.map((todo) => <li key={todo.id}>{todo.text}</li>);
+
+let items = todos.map((todo, i) => <li key={i.toString()}>{todo.text}</li>);
+
+export { todos, items };
+```
+
 </CodeTab>
 
 ### Keys Must Only Be Unique Among Siblings
 
 Keys used within arrays should be unique among their siblings. However they don’t need to be globally unique. We can use the same keys when we produce two different arrays:
 
-<CodeTab labels={["ReScript", "JS Output"]}>
+<CodeTab labels={["ReScript", "JS Output", "JSX Preserved Output"]}>
 
 ```res {6,10,17,18,25,27}
 type post = {id: string, title: string, content: string}
@@ -272,7 +326,7 @@ let items = todos.map((todo) =>
   ),
 );
 
-function _tempFile$Blog(props) {
+function Example$Blog(props) {
   let posts = props.posts;
   let sidebar = JsxRuntime.jsx("ul", {
     children: posts.map((post) =>
@@ -307,7 +361,7 @@ function _tempFile$Blog(props) {
 }
 
 let Blog = {
-  make: _tempFile$Blog,
+  make: Example$Blog,
 };
 
 let posts = [
@@ -323,20 +377,82 @@ let posts = [
   },
 ];
 
-let blog = JsxRuntime.jsx(_tempFile$Blog, {
+let blog = JsxRuntime.jsx(Example$Blog, {
   posts: posts,
 });
 
 export { todos, items, Blog, posts, blog };
 ```
 
+```jsx
+import * as JsxRuntime from "react/jsx-runtime";
+
+let todos = [
+  {
+    id: "todo1",
+    text: "Todo 1",
+  },
+  {
+    id: "todo2",
+    text: "Todo 2",
+  },
+];
+
+let items = todos.map((todo) => <li key={todo.id}>{todo.text}</li>);
+
+function Example$Blog(props) {
+  let posts = props.posts;
+  let sidebar = (
+    <ul>
+      {posts.map((post) => (
+        <li key={post.id}>{post.title}</li>
+      ))}
+    </ul>
+  );
+  let content = posts.map((post) => (
+    <div key={post.id}>
+      <h3>{post.title}</h3>
+      <p>{post.content}</p>
+    </div>
+  ));
+  return (
+    <div>
+      {sidebar}
+      <hr />
+      {content}
+    </div>
+  );
+}
+
+let Blog = {
+  make: Example$Blog,
+};
+
+let posts = [
+  {
+    id: "1",
+    title: "Hello World",
+    content: "Welcome to learning ReScript & React!",
+  },
+  {
+    id: "2",
+    title: "Installation",
+    content: "You can install reason-react from npm.",
+  },
+];
+
+let blog = <Blog.make posts={posts} />;
+
+export { todos, items, Blog, posts, blog };
+```
+
 </CodeTab>
 
 ## Rendering `list` Values
 
 In case you ever want to render a `list` of items, you can do something like this:
 
-<CodeTab labels={["ReScript", "JS Output"]}>
+<CodeTab labels={["ReScript", "JS Output", "JSX Preserved Output"]}>
 
 ```res
 @react.component
@@ -383,7 +499,7 @@ let items = todos.map((todo) =>
   ),
 );
 
-function _tempFile(props) {
+function Example(props) {
   let items = Stdlib_List.toArray({
     hd: {
       id: "todo1",
@@ -410,7 +526,46 @@ function _tempFile(props) {
   });
 }
 
-let make = _tempFile;
+let make = Example;
+
+export { todos, items, make };
+```
+
+```jsx
+import * as Stdlib_List from "@rescript/runtime/lib/es6/Stdlib_List.js";
+import * as JsxRuntime from "react/jsx-runtime";
+
+let todos = [
+  {
+    id: "todo1",
+    text: "Todo 1",
+  },
+  {
+    id: "todo2",
+    text: "Todo 2",
+  },
+];
+
+let items = todos.map((todo) => <li key={todo.id}>{todo.text}</li>);
+
+function Example(props) {
+  let items = Stdlib_List.toArray({
+    hd: {
+      id: "todo1",
+      text: "Todo 1",
+    },
+    tl: {
+      hd: {
+        id: "todo2",
+        text: "Todo 2",
+      },
+      tl: /* [] */ 0,
+    },
+  }).map((todo) => <li key={todo.id}>{todo.text}</li>);
+  return <div>{items}</div>;
+}
+
+let make = Example;
 
 export { todos, items, make };
 ```