@@ -441,6 +441,40 @@ Benefits of using JSX:
441441
442442` Text.tgx ` function accepts a JSX element and returns an instance of ` Text.Tgx ` , which can then be used as a content of a message.
443443
444+ <details >
445+ <summary >How it works?</summary >
446+
447+ JSX is just syntactic sugar transformed by the compiler.
448+ Result of transformation depends on the JSX runtime.
449+ ` effect-tg ` relies on JSX runtime from [ ` @grom.js/tgx ` ] ( https://github.com/grom-dev/tgx ) , which transforms JSX elements to ` TgxElement ` instances.
450+ When ` Send.sendMessage ` encounters an instance of ` Text.Tgx ` , it converts inner ` TgxElement ` s to the parameters for a ` send* ` method.
451+
452+ </details >
453+
454+ <details >
455+ <summary >How to enable?</summary >
456+
457+ To enable JSX support:
458+
459+ 1 . Install ` @grom.js/tgx ` package:
460+
461+ ``` sh
462+ npm install @grom.js/tgx
463+ ```
464+
465+ 2 . Update your ` tsconfig.json ` :
466+
467+ ``` json
468+ {
469+ "compilerOptions" : {
470+ "jsx" : " react-jsx" ,
471+ "jsxImportSource" : " @grom.js/tgx"
472+ }
473+ }
474+ ```
475+
476+ </details >
477+
444478** Example:** Composing reusable messages with JSX.
445479
446480``` tsx
@@ -500,32 +534,3 @@ const publish = Send.message(Content.text(summary)).pipe(
500534 Send .to (Dialog .channel (3011378744 )),
501535)
502536```
503-
504- <details >
505- <summary >How it works?</summary >
506-
507- JSX is just syntactic sugar transformed by the compiler.
508- Result of transformation depends on the JSX runtime.
509- ` effect-tg ` relies on JSX runtime from [ ` @grom.js/tgx ` ] ( https://github.com/grom-dev/tgx ) , which transforms JSX elements to ` TgxElement ` instances.
510- When ` Send.sendMessage ` encounters an instance of ` Text.Tgx ` , it converts inner ` TgxElement ` s to the parameters for a ` send* ` method.
511-
512- </details >
513-
514- To enable JSX support:
515-
516- 1 . Install ` @grom.js/tgx ` package:
517-
518- ``` sh
519- npm install @grom.js/tgx
520- ```
521-
522- 2 . Update your ` tsconfig.json ` :
523-
524- ``` json
525- {
526- "compilerOptions" : {
527- "jsx" : " react-jsx" ,
528- "jsxImportSource" : " @grom.js/tgx"
529- }
530- }
531- ```
0 commit comments