diff --git a/pages/docs/manual/v11.0.0/jsx.mdx b/pages/docs/manual/v11.0.0/jsx.mdx
index 9097547bc..ff39ed805 100644
--- a/pages/docs/manual/v11.0.0/jsx.mdx
+++ b/pages/docs/manual/v11.0.0/jsx.mdx
@@ -353,6 +353,8 @@ Below is a full list of everything you need in a generic JSX transform module, i
> You can easily copy-paste-and-adapt this to your needs if you're creating bindings to a JSX framework. Most often, all you'll need to change is what the `@module("") external` points to, so the runtime calls point to the correct JS module.
+
+
```rescript
// Preact.res
/* Below is a number of aliases to the common `Jsx` module */
@@ -362,16 +364,16 @@ type component<'props> = Jsx.component<'props>
type componentLike<'props, 'return> = Jsx.componentLike<'props, 'return>
-@module("preact")
+@module("preact/jsx-runtime")
external jsx: (component<'props>, 'props) => element = "jsx"
-@module("preact")
+@module("preact/jsx-runtime")
external jsxKeyed: (component<'props>, 'props, ~key: string=?, @ignore unit) => element = "jsx"
-@module("preact")
+@module("preact/jsx-runtime")
external jsxs: (component<'props>, 'props) => element = "jsxs"
-@module("preact")
+@module("preact/jsx-runtime")
external jsxsKeyed: (component<'props>, 'props, ~key: string=?, @ignore unit) => element = "jsxs"
/* These identity functions and static values below are optional, but lets
@@ -383,13 +385,14 @@ external array: array => element = "%identity"
external float: float => element = "%identity"
external int: int => element = "%identity"
external string: string => element = "%identity"
+external promise: promise => element = "%identity"
/* These are needed for Fragment (<> ) support */
type fragmentProps = {children?: element}
-@module("preact") external jsxFragment: component = "Fragment"
+@module("preact/jsx-runtime") external jsxFragment: component = "Fragment"
-/* The Elements module is the equivalent to the ReactDOM module in React. This holds things relevant to _lowercase_ JSX elements. */
+/* The Elements module is the equivalent to the ReactDOM module in Preact. This holds things relevant to _lowercase_ JSX elements. */
module Elements = {
/* Here you can control what props lowercase JSX elements should have.
A base that the React JSX transform uses is provided via JsxDOM.domProps,
@@ -397,23 +400,38 @@ module Elements = {
autocompletion etc for your specific type. */
type props = JsxDOM.domProps
- @module("preact")
+ @module("preact/jsx-runtime")
external jsx: (string, props) => Jsx.element = "jsx"
- @module("preact")
+ @module("preact/jsx-runtime")
external div: (string, props) => Jsx.element = "jsx"
- @module("preact")
+ @module("preact/jsx-runtime")
external jsxKeyed: (string, props, ~key: string=?, @ignore unit) => Jsx.element = "jsx"
- @module("preact")
+ @module("preact/jsx-runtime")
external jsxs: (string, props) => Jsx.element = "jsxs"
- @module("preact")
+ @module("preact/jsx-runtime")
external jsxsKeyed: (string, props, ~key: string=?, @ignore unit) => Jsx.element = "jsxs"
external someElement: element => option = "%identity"
}
```
+
+
As you can see, most of the things you'll want to implement will be copy paste from the above. But do note that **everything needs to be there unless explicitly noted** or the transform will fail at compile time.
+
+To enable this, you need to configure the `jsx` `module` in your `rescript.json`:
+
+```json
+{
+ "jsx": {
+ "version": 4,
+ "module": "Preact"
+ }
+}
+```
+
+_value "Preact" is the name of the module that implements the generic JSX transform._
diff --git a/pages/docs/manual/v12.0.0/jsx.mdx b/pages/docs/manual/v12.0.0/jsx.mdx
index 20f522e5a..d01d60e19 100644
--- a/pages/docs/manual/v12.0.0/jsx.mdx
+++ b/pages/docs/manual/v12.0.0/jsx.mdx
@@ -353,6 +353,8 @@ Below is a full list of everything you need in a generic JSX transform module, i
> You can easily copy-paste-and-adapt this to your needs if you're creating bindings to a JSX framework. Most often, all you'll need to change is what the `@module("") external` points to, so the runtime calls point to the correct JS module.
+
+
```rescript
// Preact.res
/* Below is a number of aliases to the common `Jsx` module */
@@ -362,16 +364,16 @@ type component<'props> = Jsx.component<'props>
type componentLike<'props, 'return> = Jsx.componentLike<'props, 'return>
-@module("preact")
+@module("preact/jsx-runtime")
external jsx: (component<'props>, 'props) => element = "jsx"
-@module("preact")
+@module("preact/jsx-runtime")
external jsxKeyed: (component<'props>, 'props, ~key: string=?, @ignore unit) => element = "jsx"
-@module("preact")
+@module("preact/jsx-runtime")
external jsxs: (component<'props>, 'props) => element = "jsxs"
-@module("preact")
+@module("preact/jsx-runtime")
external jsxsKeyed: (component<'props>, 'props, ~key: string=?, @ignore unit) => element = "jsxs"
/* These identity functions and static values below are optional, but lets
@@ -383,13 +385,14 @@ external array: array => element = "%identity"
external float: float => element = "%identity"
external int: int => element = "%identity"
external string: string => element = "%identity"
+external promise: promise => element = "%identity"
/* These are needed for Fragment (<> ) support */
type fragmentProps = {children?: element}
-@module("preact") external jsxFragment: component = "Fragment"
+@module("preact/jsx-runtime") external jsxFragment: component = "Fragment"
-/* The Elements module is the equivalent to the ReactDOM module in React. This holds things relevant to _lowercase_ JSX elements. */
+/* The Elements module is the equivalent to the ReactDOM module in Preact. This holds things relevant to _lowercase_ JSX elements. */
module Elements = {
/* Here you can control what props lowercase JSX elements should have.
A base that the React JSX transform uses is provided via JsxDOM.domProps,
@@ -397,23 +400,38 @@ module Elements = {
autocompletion etc for your specific type. */
type props = JsxDOM.domProps
- @module("preact")
+ @module("preact/jsx-runtime")
external jsx: (string, props) => Jsx.element = "jsx"
- @module("preact")
+ @module("preact/jsx-runtime")
external div: (string, props) => Jsx.element = "jsx"
- @module("preact")
+ @module("preact/jsx-runtime")
external jsxKeyed: (string, props, ~key: string=?, @ignore unit) => Jsx.element = "jsx"
- @module("preact")
+ @module("preact/jsx-runtime")
external jsxs: (string, props) => Jsx.element = "jsxs"
- @module("preact")
+ @module("preact/jsx-runtime")
external jsxsKeyed: (string, props, ~key: string=?, @ignore unit) => Jsx.element = "jsxs"
external someElement: element => option = "%identity"
}
```
+
+
As you can see, most of the things you'll want to implement will be copy paste from the above. But do note that **everything needs to be there unless explicitly noted** or the transform will fail at compile time.
+
+To enable this, you need to configure the `jsx` `module` in your `rescript.json`:
+
+```json
+{
+ "jsx": {
+ "version": 4,
+ "module": "Preact"
+ }
+}
+```
+
+_value "Preact" is the name of the module that implements the generic JSX transform._
diff --git a/src/components/CodeExample.res b/src/components/CodeExample.res
index 3d5d1f934..8ea95f911 100644
--- a/src/components/CodeExample.res
+++ b/src/components/CodeExample.res
@@ -104,13 +104,29 @@ module CopyButton = {
}
@react.component
-let make = (~highlightedLines=[], ~code: string, ~showLabel=true, ~lang="text") => {
+let make = (
+ ~highlightedLines=[],
+ ~code: string,
+ ~showLabel=true,
+ ~lang="text",
+ ~showCopyButton=false,
+) => {
let children = HighlightJs.renderHLJS(~highlightedLines, ~code, ~lang, ())
let label = if showLabel {
let label = langShortname(lang)
+ let rightPosition = if showCopyButton {
+ "right-8" // Move label left when copy button is present
+ } else {
+ "right-1"
+ }
+ let topPosition = if showCopyButton {
+ "top-1"
+ } else {
+ "top-0"
+ }
+ className={`absolute ${rightPosition} ${topPosition} p-1 font-sans text-12 font-bold text-gray-30 pointer-events-none`}>
{//RES or JS Label
String.toUpperCase(label)->React.string}
@@ -118,10 +134,19 @@ let make = (~highlightedLines=[], ~code: string, ~showLabel=true, ~lang="text")
React.null
}
+ let copyButton = if showCopyButton {
+
+
+
+ } else {
+ React.null
+ }
+
label
+ copyButton
children