Skip to content

Commit 4e4fabe

Browse files
nojafnojaf
authored
Update preact generic module (#1106)
* Update preact generic module * Add for v11 as well.
1 parent 74951eb commit 4e4fabe

File tree

4 files changed

+87
-24
lines changed

4 files changed

+87
-24
lines changed

‎pages/docs/manual/v11.0.0/jsx.mdx‎

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -353,6 +353,8 @@ Below is a full list of everything you need in a generic JSX transform module, i
353353

354354
> 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.
355355
356+
<CodeTab labels={["ReScript"]}>
357+
356358
```rescript
357359
// Preact.res
358360
/* Below is a number of aliases to the common `Jsx` module */
@@ -362,16 +364,16 @@ type component<'props> = Jsx.component<'props>
362364
363365
type componentLike<'props, 'return> = Jsx.componentLike<'props, 'return>
364366
365-
@module("preact")
367+
@module("preact/jsx-runtime")
366368
external jsx: (component<'props>, 'props) => element = "jsx"
367369
368-
@module("preact")
370+
@module("preact/jsx-runtime")
369371
external jsxKeyed: (component<'props>, 'props, ~key: string=?, @ignore unit) => element = "jsx"
370372
371-
@module("preact")
373+
@module("preact/jsx-runtime")
372374
external jsxs: (component<'props>, 'props) => element = "jsxs"
373375
374-
@module("preact")
376+
@module("preact/jsx-runtime")
375377
external jsxsKeyed: (component<'props>, 'props, ~key: string=?, @ignore unit) => element = "jsxs"
376378
377379
/* These identity functions and static values below are optional, but lets
@@ -383,37 +385,53 @@ external array: array<element> => element = "%identity"
383385
external float: float => element = "%identity"
384386
external int: int => element = "%identity"
385387
external string: string => element = "%identity"
388+
external promise: promise<element> => element = "%identity"
386389
387390
/* These are needed for Fragment (<> </>) support */
388391
type fragmentProps = {children?: element}
389392
390-
@module("preact") external jsxFragment: component<fragmentProps> = "Fragment"
393+
@module("preact/jsx-runtime") external jsxFragment: component<fragmentProps> = "Fragment"
391394
392-
/* The Elements module is the equivalent to the ReactDOM module in React. This holds things relevant to _lowercase_ JSX elements. */
395+
/* The Elements module is the equivalent to the ReactDOM module in Preact. This holds things relevant to _lowercase_ JSX elements. */
393396
module Elements = {
394397
/* Here you can control what props lowercase JSX elements should have.
395398
A base that the React JSX transform uses is provided via JsxDOM.domProps,
396399
but you can make this anything. The editor tooling will support
397400
autocompletion etc for your specific type. */
398401
type props = JsxDOM.domProps
399402
400-
@module("preact")
403+
@module("preact/jsx-runtime")
401404
external jsx: (string, props) => Jsx.element = "jsx"
402405
403-
@module("preact")
406+
@module("preact/jsx-runtime")
404407
external div: (string, props) => Jsx.element = "jsx"
405408
406-
@module("preact")
409+
@module("preact/jsx-runtime")
407410
external jsxKeyed: (string, props, ~key: string=?, @ignore unit) => Jsx.element = "jsx"
408411
409-
@module("preact")
412+
@module("preact/jsx-runtime")
410413
external jsxs: (string, props) => Jsx.element = "jsxs"
411414
412-
@module("preact")
415+
@module("preact/jsx-runtime")
413416
external jsxsKeyed: (string, props, ~key: string=?, @ignore unit) => Jsx.element = "jsxs"
414417
415418
external someElement: element => option<element> = "%identity"
416419
}
417420
```
418421

422+
</CodeTab>
423+
419424
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.
425+
426+
To enable this, you need to configure the `jsx` `module` in your `rescript.json`:
427+
428+
```json
429+
{
430+
"jsx": {
431+
"version": 4,
432+
"module": "Preact"
433+
}
434+
}
435+
```
436+
437+
_value "Preact" is the name of the module that implements the generic JSX transform._

‎pages/docs/manual/v12.0.0/jsx.mdx‎

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -353,6 +353,8 @@ Below is a full list of everything you need in a generic JSX transform module, i
353353

354354
> 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.
355355
356+
<CodeTab labels={["ReScript"]}>
357+
356358
```rescript
357359
// Preact.res
358360
/* Below is a number of aliases to the common `Jsx` module */
@@ -362,16 +364,16 @@ type component<'props> = Jsx.component<'props>
362364
363365
type componentLike<'props, 'return> = Jsx.componentLike<'props, 'return>
364366
365-
@module("preact")
367+
@module("preact/jsx-runtime")
366368
external jsx: (component<'props>, 'props) => element = "jsx"
367369
368-
@module("preact")
370+
@module("preact/jsx-runtime")
369371
external jsxKeyed: (component<'props>, 'props, ~key: string=?, @ignore unit) => element = "jsx"
370372
371-
@module("preact")
373+
@module("preact/jsx-runtime")
372374
external jsxs: (component<'props>, 'props) => element = "jsxs"
373375
374-
@module("preact")
376+
@module("preact/jsx-runtime")
375377
external jsxsKeyed: (component<'props>, 'props, ~key: string=?, @ignore unit) => element = "jsxs"
376378
377379
/* These identity functions and static values below are optional, but lets
@@ -383,37 +385,53 @@ external array: array<element> => element = "%identity"
383385
external float: float => element = "%identity"
384386
external int: int => element = "%identity"
385387
external string: string => element = "%identity"
388+
external promise: promise<element> => element = "%identity"
386389
387390
/* These are needed for Fragment (<> </>) support */
388391
type fragmentProps = {children?: element}
389392
390-
@module("preact") external jsxFragment: component<fragmentProps> = "Fragment"
393+
@module("preact/jsx-runtime") external jsxFragment: component<fragmentProps> = "Fragment"
391394
392-
/* The Elements module is the equivalent to the ReactDOM module in React. This holds things relevant to _lowercase_ JSX elements. */
395+
/* The Elements module is the equivalent to the ReactDOM module in Preact. This holds things relevant to _lowercase_ JSX elements. */
393396
module Elements = {
394397
/* Here you can control what props lowercase JSX elements should have.
395398
A base that the React JSX transform uses is provided via JsxDOM.domProps,
396399
but you can make this anything. The editor tooling will support
397400
autocompletion etc for your specific type. */
398401
type props = JsxDOM.domProps
399402
400-
@module("preact")
403+
@module("preact/jsx-runtime")
401404
external jsx: (string, props) => Jsx.element = "jsx"
402405
403-
@module("preact")
406+
@module("preact/jsx-runtime")
404407
external div: (string, props) => Jsx.element = "jsx"
405408
406-
@module("preact")
409+
@module("preact/jsx-runtime")
407410
external jsxKeyed: (string, props, ~key: string=?, @ignore unit) => Jsx.element = "jsx"
408411
409-
@module("preact")
412+
@module("preact/jsx-runtime")
410413
external jsxs: (string, props) => Jsx.element = "jsxs"
411414
412-
@module("preact")
415+
@module("preact/jsx-runtime")
413416
external jsxsKeyed: (string, props, ~key: string=?, @ignore unit) => Jsx.element = "jsxs"
414417
415418
external someElement: element => option<element> = "%identity"
416419
}
417420
```
418421

422+
</CodeTab>
423+
419424
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.
425+
426+
To enable this, you need to configure the `jsx` `module` in your `rescript.json`:
427+
428+
```json
429+
{
430+
"jsx": {
431+
"version": 4,
432+
"module": "Preact"
433+
}
434+
}
435+
```
436+
437+
_value "Preact" is the name of the module that implements the generic JSX transform._

‎src/components/CodeExample.res‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -104,24 +104,49 @@ module CopyButton = {
104104
}
105105

106106
@react.component
107-
let make = (~highlightedLines=[], ~code: string, ~showLabel=true, ~lang="text") => {
107+
let make = (
108+
~highlightedLines=[],
109+
~code: string,
110+
~showLabel=true,
111+
~lang="text",
112+
~showCopyButton=false,
113+
) => {
108114
let children = HighlightJs.renderHLJS(~highlightedLines, ~code, ~lang, ())
109115

110116
let label = if showLabel {
111117
let label = langShortname(lang)
118+
let rightPosition = if showCopyButton {
119+
"right-8" // Move label left when copy button is present
120+
} else {
121+
"right-1"
122+
}
123+
let topPosition = if showCopyButton {
124+
"top-1"
125+
} else {
126+
"top-0"
127+
}
112128
<div
113-
className="absolute right-1 top-0 p-1 font-sans text-12 font-bold text-gray-30 pointer-events-none">
129+
className={`absolute ${rightPosition} ${topPosition} p-1 font-sans text-12 font-bold text-gray-30 pointer-events-none`}>
114130
{//RES or JS Label
115131
String.toUpperCase(label)->React.string}
116132
</div>
117133
} else {
118134
React.null
119135
}
120136

137+
let copyButton = if showCopyButton {
138+
<div className="absolute right-1 top-0 p-1">
139+
<CopyButton code />
140+
</div>
141+
} else {
142+
React.null
143+
}
144+
121145
<div
122146
//normal code-text without tabs
123147
className="relative w-full flex-col rounded xs:rounded border border-gray-20 bg-gray-10 pt-2 text-gray-80">
124148
label
149+
copyButton
125150
<div className="px-5 text-14 pt-4 pb-4 overflow-x-auto whitespace-pre"> children </div>
126151
</div>
127152
}
@@ -145,6 +170,7 @@ module Toggle = {
145170
code: tab.code,
146171
lang: ?tab.lang,
147172
showLabel: true,
173+
showCopyButton: true,
148174
})
149175
| multiple =>
150176
let numberOfItems = Array.length(multiple)

‎src/components/CodeExample.resi‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ let make: (
44
~code: string,
55
~showLabel: bool=?,
66
~lang: string=?,
7+
~showCopyButton: bool=?,
78
) => React.element
89

910
module Toggle: {

0 commit comments

Comments
 (0)