jtsx-loader 0.1.1 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/example/components/Header.tsx +17 -0
  2. package/example/layouts/Layout.jsx +45 -45
  3. package/example/pages/index.jsx +82 -89
  4. package/example/pages/ru.jsx +187 -0
  5. package/example/server.js +1 -0
  6. package/example/styles/default.css +21 -0
  7. package/example/styles/reset.css +114 -0
  8. package/example/styles/styles.css +1 -0
  9. package/factory/jsxFactory.js +2 -1
  10. package/factory/possibleAttributes.js +0 -2
  11. package/jtsx.config.example.js +6 -0
  12. package/package.json +8 -2
  13. package/example/pages/en.jsx +0 -181
package/example/components/Header.tsx ADDED
@@ -0,0 +1,17 @@
1
+ // @ts-nocheck
2
+ import fs from 'node:fs';
3
+
4
+ // TODO: типы для тайпскрипта
5
+ interface Props {
6
+ children: any
7
+ lang: string
8
+ }
9
+
10
+ export default ({ children, renderCount, lang }: Props) => {
11
+ const { version } = JSON.parse(fs.readFileSync('package.json').toString());
12
+
13
+ return <div class="lang">
14
+ <h1>JTSX Loader <small>v{version}</small></h1>
15
+ <a href="/ru" class={lang === 'ru' && 'is-active'}>Russian</a> / <a href="/" class={lang === 'en' && 'is-active'}>English</a>
16
+ </div>
17
+ }
package/example/layouts/Layout.jsx CHANGED
@@ -1,45 +1,45 @@
1
- // import '@/styles/styles.scss'; // global styles
2
-
3
- const Layout = ({ children, title }) => {
4
- return <html lang="ru">
5
- <head>
6
- <meta charset="UTF-8" />
7
- <meta name="description" content={ title } />
8
- <meta name="viewport" content="width=device-width, initial-scale=1" />
9
- <meta name="mobile-web-app-capable" content="yes" />
10
- <meta name="generator" content='jtsx-loader' />
11
- <title>{ title }</title>
12
-
13
- <link rel="preconnect" href="https://fonts.googleapis.com" />
14
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
15
- <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100..900&display=swap" rel="stylesheet" />
16
- <link rel="stylesheet" href="/styles/styles.css" />
17
- </head>
18
- <body>
19
- <main>
20
- <div className="container">
21
- <div class="logo logo--white">
22
- <div class="logo__visual"></div>
23
- <a href="/" class="logo__link">
24
- <svg class="svg-icon" viewBox="0 0 146 21">
25
- <g id="svg-logo">
26
- <path d="M19.5159 17.6268C19.482 17.7623 19.2279 18.1011 18.7535 18.6432C18.4147 19.0498 17.963 19.4112 17.3983 19.7274C16.8336 20.0324 16.0769 20.2695 15.1282 20.439C14.1908 20.6197 12.9541 20.71 11.4181 20.71C9.37394 20.71 7.62903 20.6027 6.18341 20.3881C4.73779 20.1848 3.55758 19.8686 2.64277 19.4394C1.72797 18.999 1.05598 18.4399 0.626812 17.7623C0.208937 17.0847 0 16.2772 0 15.3398C0 14.3572 0.112939 13.5271 0.338817 12.8495C0.575989 12.1605 0.914806 11.5845 1.35527 11.1215C1.80702 10.6584 2.34913 10.297 2.98159 10.0373C3.61405 9.77751 4.33121 9.57987 5.13308 9.44434C5.94624 9.30881 6.83281 9.22411 7.79279 9.19023C8.75277 9.15635 9.77487 9.13941 10.8591 9.13941C12.4064 9.13941 13.6995 9.20717 14.7385 9.3427C15.7776 9.46693 16.6246 9.63069 17.2797 9.83398C17.946 10.026 18.4486 10.2349 18.7874 10.4608C19.1262 10.6867 19.369 10.8956 19.5159 11.0876C19.5159 9.82269 19.4594 8.74412 19.3465 7.8519C19.2448 6.95968 19.0698 6.21428 18.8213 5.61571C18.5841 5.01713 18.2735 4.54279 17.8895 4.19268C17.5055 3.83127 17.0312 3.56022 16.4665 3.37951C15.9131 3.19881 15.2637 3.08587 14.5183 3.0407C13.7729 2.98423 12.9202 2.95599 11.9602 2.95599C10.4694 2.95599 9.23277 2.99552 8.2502 3.07458C7.26763 3.14234 6.48835 3.28352 5.91236 3.4981C5.33637 3.71268 4.92979 4.01197 4.69262 4.39597C4.45544 4.76866 4.33686 5.25995 4.33686 5.86982H1.08421C1.08421 4.84207 1.26492 3.97244 1.62632 3.26093C1.99902 2.54941 2.60889 1.97342 3.45593 1.53296C4.31427 1.08121 5.43801 0.753682 6.82716 0.550392C8.21631 0.347102 9.92734 0.245456 11.9602 0.245456C13.948 0.245456 15.6308 0.409218 17.0086 0.736741C18.3865 1.06426 19.4989 1.64025 20.346 2.46471C21.2043 3.28916 21.8198 4.40161 22.1925 5.80206C22.5765 7.19121 22.7685 8.95306 22.7685 11.0876V20.3034H19.5159V17.6268ZM11.9602 18.135C13.3946 18.135 14.5917 18.0672 15.5517 17.9317C16.523 17.7962 17.3023 17.5929 17.8895 17.3218C18.4768 17.0508 18.8947 16.712 19.1432 16.3054C19.3916 15.8988 19.5159 15.4245 19.5159 14.8824C19.5159 14.3402 19.369 13.8828 19.0754 13.5101C18.7931 13.1262 18.3131 12.8156 17.6354 12.5784C16.9691 12.3412 16.0825 12.1718 14.9757 12.0702C13.8689 11.9572 12.5023 11.9008 10.876 11.9008C9.24971 11.9008 7.93397 11.929 6.92881 11.9855C5.93495 12.0419 5.16696 12.1718 4.62485 12.3751C4.08275 12.5784 3.71569 12.8777 3.5237 13.273C3.343 13.6683 3.25264 14.2047 3.25264 14.8824C3.25264 15.56 3.34864 16.1134 3.54064 16.5426C3.74393 16.9604 4.15051 17.288 4.76038 17.5251C5.37025 17.7623 6.24553 17.9261 7.38621 18.0164C8.53819 18.0955 10.0629 18.135 11.9602 18.135Z"/>
27
- <path d="M45.2504 20.3034V9.46128C45.2504 8.25283 45.16 7.23638 44.9793 6.41193C44.7986 5.57618 44.4372 4.90419 43.8951 4.39597C43.353 3.88774 42.585 3.52069 41.5911 3.29481C40.5973 3.06893 39.2872 2.95599 37.6609 2.95599C35.899 2.95599 34.4534 3.08587 33.324 3.34563C32.2059 3.60539 31.325 3.97244 30.6812 4.44679C30.0375 4.92113 29.5914 5.49147 29.3429 6.15781C29.1057 6.82415 28.9872 7.56391 28.9872 8.37707V20.3034H25.7345V0.787564H28.9872V4.04021C29.2243 3.48681 29.5631 3.01246 30.0036 2.61718C30.4441 2.2106 30.941 1.86613 31.4944 1.58378C32.0478 1.30144 32.6464 1.07556 33.2901 0.90615C33.9339 0.725447 34.5776 0.589921 35.2214 0.499569C35.8651 0.397924 36.4863 0.330161 37.0849 0.296279C37.6948 0.262397 38.2482 0.245456 38.7451 0.245456C40.1907 0.245456 41.433 0.335808 42.4721 0.51651C43.5224 0.697213 44.409 0.962619 45.1318 1.31273C45.8659 1.66284 46.4532 2.09766 46.8936 2.61718C47.3341 3.1367 47.6729 3.74092 47.9101 4.42985C48.1586 5.10748 48.3223 5.86982 48.4014 6.71686C48.4804 7.55261 48.52 8.46742 48.52 9.46128L48.503 20.3034H45.2504Z"/>
28
- <path d="M50.9439 10.5794C50.9439 9.22411 51.0116 8.02696 51.1471 6.98792C51.2827 5.94888 51.5198 5.04537 51.8587 4.27738C52.2088 3.50939 52.6718 2.87129 53.2478 2.36306C53.8351 1.84354 54.5692 1.42567 55.4501 1.10944C56.3423 0.793211 57.3983 0.567333 58.6181 0.431806C59.8378 0.296279 61.2608 0.228516 62.8872 0.228516C65.0556 0.228516 66.84 0.364042 68.2405 0.635096C69.6409 0.894856 70.7477 1.30144 71.5609 1.85484C72.374 2.39694 72.9387 3.09152 73.255 3.93856C73.5712 4.77431 73.7293 5.77382 73.7293 6.93709H70.4767C70.4767 6.51922 70.4654 6.12958 70.4428 5.76818C70.4202 5.40677 70.3355 5.07925 70.1887 4.78561C70.0531 4.49196 69.8329 4.2322 69.528 4.00633C69.223 3.76915 68.7882 3.57151 68.2235 3.4134C67.6588 3.25528 66.9417 3.1367 66.072 3.05764C65.2137 2.97858 64.1521 2.93905 62.8872 2.93905C61.4415 2.93905 60.2218 2.98987 59.2279 3.09152C58.2454 3.19317 57.4322 3.36257 56.7885 3.59975C56.1447 3.82562 55.6478 4.13621 55.2977 4.53149C54.9475 4.91549 54.6934 5.38983 54.5353 5.95452C54.3772 6.51922 54.2812 7.18556 54.2473 7.95355C54.2247 8.71024 54.2134 9.58551 54.2134 10.5794C54.2134 11.5507 54.2247 12.4146 54.2473 13.1713C54.2812 13.9167 54.3772 14.5718 54.5353 15.1365C54.6934 15.6899 54.9475 16.1586 55.2977 16.5426C55.6478 16.9266 56.1447 17.2371 56.7885 17.4743C57.4322 17.7115 58.2454 17.8809 59.2279 17.9825C60.2218 18.0842 61.4415 18.135 62.8872 18.135C64.1521 18.135 65.2137 18.0898 66.072 17.9995C66.9417 17.9091 67.6588 17.7792 68.2235 17.6098C68.7882 17.4404 69.223 17.2315 69.528 16.983C69.8329 16.7346 70.0531 16.4522 70.1887 16.136C70.3355 15.8085 70.4202 15.4527 70.4428 15.0687C70.4654 14.6734 70.4767 14.2499 70.4767 13.7981H73.7293C73.7293 14.984 73.5712 16.0117 73.255 16.8814C72.9387 17.751 72.374 18.4682 71.5609 19.0329C70.7477 19.5863 69.6409 19.9985 68.2405 20.2695C66.84 20.5406 65.0556 20.6761 62.8872 20.6761C61.2608 20.6761 59.8378 20.6084 58.6181 20.4728C57.3983 20.3373 56.3423 20.1171 55.4501 19.8121C54.5692 19.4959 53.8351 19.0837 53.2478 18.5755C52.6718 18.0672 52.2088 17.4404 51.8587 16.695C51.5198 15.9496 51.2827 15.0744 51.1471 14.0692C51.0116 13.0527 50.9439 11.8895 50.9439 10.5794Z"/>
29
- <path d="M93.5006 7.14038C93.5006 6.32722 93.4385 5.65524 93.3143 5.12442C93.2013 4.58232 92.9246 4.15315 92.4842 3.83692C92.0437 3.50939 91.3887 3.28352 90.519 3.15928C89.6607 3.02376 88.4861 2.95599 86.9953 2.95599C85.5384 2.95599 84.3526 3.08587 83.4378 3.34563C82.523 3.5941 81.8058 3.94986 81.2863 4.41291C80.7668 4.87596 80.411 5.42936 80.219 6.07311C80.0383 6.71686 79.948 7.43403 79.948 8.2246V20.3034H76.6953V0.787564H79.948V3.88774C80.0609 3.53763 80.2698 3.15364 80.5748 2.73576C80.8797 2.30659 81.3428 1.91131 81.9639 1.5499C82.5851 1.1772 83.3869 0.866621 84.3695 0.618155C85.3634 0.369689 86.6001 0.245456 88.0796 0.245456C89.7737 0.245456 91.1515 0.397924 92.2131 0.70286C93.2748 0.996501 94.0992 1.43696 94.6865 2.02425C95.2851 2.60024 95.686 3.3174 95.8893 4.17573C96.1039 5.03407 96.2112 6.02229 96.2112 7.14038H93.5006Z"/>
30
- <path d="M96.4497 10.41C96.4497 8.41095 96.6643 6.75639 97.0935 5.4463C97.5226 4.13621 98.2115 3.09717 99.1602 2.32918C100.109 1.5612 101.34 1.02474 102.853 0.7198C104.367 0.403571 106.208 0.245456 108.376 0.245456C110.544 0.245456 112.385 0.403571 113.899 0.7198C115.412 1.02474 116.643 1.5612 117.592 2.32918C118.541 3.09717 119.229 4.13621 119.659 5.4463C120.088 6.75639 120.302 8.41095 120.302 10.41C120.302 12.409 120.088 14.0692 119.659 15.3906C119.229 16.712 118.541 17.7623 117.592 18.5416C116.643 19.3209 115.412 19.8743 113.899 20.2018C112.385 20.518 110.544 20.6761 108.376 20.6761C106.208 20.6761 104.367 20.518 102.853 20.2018C101.34 19.8743 100.109 19.3209 99.1602 18.5416C98.2115 17.7623 97.5226 16.712 97.0935 15.3906C96.6643 14.0692 96.4497 12.409 96.4497 10.41ZM99.7023 10.41C99.7023 11.4942 99.7419 12.4372 99.8209 13.2391C99.9 14.041 100.047 14.7299 100.261 15.3059C100.487 15.8819 100.798 16.3506 101.193 16.712C101.588 17.0734 102.108 17.3614 102.752 17.576C103.395 17.7905 104.175 17.9374 105.09 18.0164C106.016 18.0955 107.111 18.135 108.376 18.135C109.46 18.135 110.426 18.1124 111.273 18.0672C112.131 18.0108 112.877 17.8922 113.509 17.7115C114.153 17.5308 114.701 17.2767 115.152 16.9491C115.604 16.6103 115.966 16.1529 116.237 15.5769C116.519 15.0009 116.722 14.2951 116.846 13.4593C116.982 12.6123 117.05 11.5958 117.05 10.41C117.05 9.2467 116.982 8.25848 116.846 7.44532C116.722 6.62086 116.519 5.93194 116.237 5.37854C115.966 4.82513 115.604 4.39032 115.152 4.07409C114.701 3.74657 114.153 3.50375 113.509 3.34563C112.877 3.17622 112.131 3.06893 111.273 3.02376C110.426 2.97858 109.46 2.95599 108.376 2.95599C107.292 2.95599 106.321 2.97858 105.462 3.02376C104.615 3.06893 103.87 3.17622 103.226 3.34563C102.594 3.50375 102.051 3.74657 101.6 4.07409C101.148 4.39032 100.781 4.82513 100.499 5.37854C100.228 5.93194 100.024 6.62086 99.8887 7.44532C99.7645 8.25848 99.7023 9.2467 99.7023 10.41Z"/>
31
- <path d="M134.094 11.4095C135.359 11.4095 136.437 11.4321 137.329 11.4772C138.222 11.5111 138.967 11.5789 139.566 11.6805C140.175 11.7709 140.655 11.8895 141.006 12.0363C141.356 12.1831 141.621 12.4033 141.802 12.697C141.982 12.9793 142.095 13.2673 142.141 13.561C142.197 13.8433 142.225 14.1708 142.225 14.5435C142.225 14.9501 142.197 15.3228 142.141 15.6616C142.095 15.9892 141.977 16.2884 141.785 16.5595C141.593 16.8306 141.31 17.0621 140.938 17.2541C140.565 17.4461 140.057 17.6098 139.413 17.7454C138.769 17.8809 137.967 17.9825 137.007 18.0503C136.059 18.1068 134.907 18.135 133.552 18.135C132.061 18.135 130.824 18.0955 129.841 18.0164C128.87 17.9261 128.097 17.7623 127.521 17.5251C126.945 17.288 126.538 16.9604 126.301 16.5426C126.075 16.1134 125.962 15.56 125.962 14.8824H122.709C122.709 15.9101 122.89 16.7797 123.251 17.4912C123.624 18.2028 124.234 18.7844 125.081 19.2362C125.928 19.6766 127.041 19.9985 128.418 20.2018C129.808 20.4051 131.519 20.5067 133.552 20.5067C135.178 20.5067 136.601 20.4559 137.821 20.3543C139.052 20.2639 140.108 20.1227 140.989 19.9307C141.869 19.7274 142.598 19.4677 143.174 19.1515C143.761 18.8239 144.224 18.4399 144.563 17.9995C144.902 17.5477 145.139 17.0338 145.275 16.4579C145.41 15.8706 145.478 15.2099 145.478 14.4758C145.478 13.7417 145.41 13.0979 145.275 12.5445C145.139 11.9798 144.902 11.4942 144.563 11.0876C144.236 10.6697 143.795 10.2857 143.242 9.93563C142.688 9.58551 141.988 9.32575 141.141 9.15635C140.294 8.98694 139.289 8.86835 138.126 8.80059C136.974 8.73282 135.63 8.69894 134.094 8.69894C132.829 8.69894 131.75 8.69894 130.858 8.69894C129.966 8.68765 129.215 8.65377 128.605 8.5973C128.006 8.52953 127.532 8.43354 127.182 8.3093C126.832 8.18507 126.566 8.00437 126.386 7.7672C126.205 7.53002 126.086 7.23074 126.03 6.86933C125.985 6.49663 125.962 6.11829 125.962 5.73429C125.962 5.07925 126.109 4.56537 126.402 4.19268C126.696 3.81998 127.182 3.54328 127.859 3.36257C128.537 3.18187 129.429 3.06893 130.536 3.02376C131.643 2.97858 133.009 2.95599 134.636 2.95599C136.127 2.95599 137.358 3.00117 138.329 3.09152C139.311 3.17058 140.091 3.32305 140.667 3.54892C141.243 3.76351 141.644 4.0628 141.869 4.44679C142.107 4.83078 142.225 5.32771 142.225 5.93758H145.478C145.478 4.95501 145.314 4.10797 144.987 3.39646C144.659 2.68494 144.083 2.09766 143.259 1.63461C142.445 1.16026 141.339 0.810152 139.938 0.584274C138.549 0.358396 136.782 0.245456 134.636 0.245456C132.467 0.245456 130.626 0.341455 129.113 0.533451C127.6 0.725447 126.369 1.04168 125.42 1.48214C124.471 1.91131 123.782 2.476 123.353 3.17622C122.924 3.86515 122.709 4.71784 122.709 5.73429C122.709 6.47969 122.777 7.17427 122.913 7.81802C123.048 8.45048 123.28 8.98694 123.607 9.4274C123.935 9.85657 124.375 10.201 124.929 10.4608C125.493 10.7206 126.194 10.9238 127.029 11.0707C127.876 11.2062 128.882 11.2965 130.045 11.3417C131.208 11.3869 132.558 11.4095 134.094 11.4095Z"/>
32
- </g>
33
- </svg>
34
- </a>
35
- </div>
36
- { children }
37
- </div>
38
- </main>
39
-
40
- {/* <script src="/assets/js/app.js"></script> */ }
41
- </body>
42
- </html>
43
- };
44
-
45
- export default Layout;
1
+ // import '@/styles/styles.scss'; // global styles
2
+
3
+ const Layout = ({ children, title }) => {
4
+ return <html lang="ru">
5
+ <head>
6
+ <meta charset="UTF-8" />
7
+ <meta name="description" content={ title } />
8
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
9
+ <meta name="mobile-web-app-capable" content="yes" />
10
+ <meta name="generator" content='jtsx-loader' />
11
+ <title>{ title }</title>
12
+
13
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
14
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
15
+ <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100..900&display=swap" rel="stylesheet" />
16
+ <link rel="stylesheet" href="/styles/styles.css" />
17
+ </head>
18
+ <body>
19
+ <main>
20
+ <div className="container">
21
+ <div class="logo logo--white">
22
+ <div class="logo__visual"></div>
23
+ <a href="/" class="logo__link">
24
+ <svg class="svg-icon" viewBox="0 0 146 21">
25
+ <g id="svg-logo">
26
+ <path d="M19.5159 17.6268C19.482 17.7623 19.2279 18.1011 18.7535 18.6432C18.4147 19.0498 17.963 19.4112 17.3983 19.7274C16.8336 20.0324 16.0769 20.2695 15.1282 20.439C14.1908 20.6197 12.9541 20.71 11.4181 20.71C9.37394 20.71 7.62903 20.6027 6.18341 20.3881C4.73779 20.1848 3.55758 19.8686 2.64277 19.4394C1.72797 18.999 1.05598 18.4399 0.626812 17.7623C0.208937 17.0847 0 16.2772 0 15.3398C0 14.3572 0.112939 13.5271 0.338817 12.8495C0.575989 12.1605 0.914806 11.5845 1.35527 11.1215C1.80702 10.6584 2.34913 10.297 2.98159 10.0373C3.61405 9.77751 4.33121 9.57987 5.13308 9.44434C5.94624 9.30881 6.83281 9.22411 7.79279 9.19023C8.75277 9.15635 9.77487 9.13941 10.8591 9.13941C12.4064 9.13941 13.6995 9.20717 14.7385 9.3427C15.7776 9.46693 16.6246 9.63069 17.2797 9.83398C17.946 10.026 18.4486 10.2349 18.7874 10.4608C19.1262 10.6867 19.369 10.8956 19.5159 11.0876C19.5159 9.82269 19.4594 8.74412 19.3465 7.8519C19.2448 6.95968 19.0698 6.21428 18.8213 5.61571C18.5841 5.01713 18.2735 4.54279 17.8895 4.19268C17.5055 3.83127 17.0312 3.56022 16.4665 3.37951C15.9131 3.19881 15.2637 3.08587 14.5183 3.0407C13.7729 2.98423 12.9202 2.95599 11.9602 2.95599C10.4694 2.95599 9.23277 2.99552 8.2502 3.07458C7.26763 3.14234 6.48835 3.28352 5.91236 3.4981C5.33637 3.71268 4.92979 4.01197 4.69262 4.39597C4.45544 4.76866 4.33686 5.25995 4.33686 5.86982H1.08421C1.08421 4.84207 1.26492 3.97244 1.62632 3.26093C1.99902 2.54941 2.60889 1.97342 3.45593 1.53296C4.31427 1.08121 5.43801 0.753682 6.82716 0.550392C8.21631 0.347102 9.92734 0.245456 11.9602 0.245456C13.948 0.245456 15.6308 0.409218 17.0086 0.736741C18.3865 1.06426 19.4989 1.64025 20.346 2.46471C21.2043 3.28916 21.8198 4.40161 22.1925 5.80206C22.5765 7.19121 22.7685 8.95306 22.7685 11.0876V20.3034H19.5159V17.6268ZM11.9602 18.135C13.3946 18.135 14.5917 18.0672 15.5517 17.9317C16.523 17.7962 17.3023 17.5929 17.8895 17.3218C18.4768 17.0508 18.8947 16.712 19.1432 16.3054C19.3916 15.8988 19.5159 15.4245 19.5159 14.8824C19.5159 14.3402 19.369 13.8828 19.0754 13.5101C18.7931 13.1262 18.3131 12.8156 17.6354 12.5784C16.9691 12.3412 16.0825 12.1718 14.9757 12.0702C13.8689 11.9572 12.5023 11.9008 10.876 11.9008C9.24971 11.9008 7.93397 11.929 6.92881 11.9855C5.93495 12.0419 5.16696 12.1718 4.62485 12.3751C4.08275 12.5784 3.71569 12.8777 3.5237 13.273C3.343 13.6683 3.25264 14.2047 3.25264 14.8824C3.25264 15.56 3.34864 16.1134 3.54064 16.5426C3.74393 16.9604 4.15051 17.288 4.76038 17.5251C5.37025 17.7623 6.24553 17.9261 7.38621 18.0164C8.53819 18.0955 10.0629 18.135 11.9602 18.135Z"/>
27
+ <path d="M45.2504 20.3034V9.46128C45.2504 8.25283 45.16 7.23638 44.9793 6.41193C44.7986 5.57618 44.4372 4.90419 43.8951 4.39597C43.353 3.88774 42.585 3.52069 41.5911 3.29481C40.5973 3.06893 39.2872 2.95599 37.6609 2.95599C35.899 2.95599 34.4534 3.08587 33.324 3.34563C32.2059 3.60539 31.325 3.97244 30.6812 4.44679C30.0375 4.92113 29.5914 5.49147 29.3429 6.15781C29.1057 6.82415 28.9872 7.56391 28.9872 8.37707V20.3034H25.7345V0.787564H28.9872V4.04021C29.2243 3.48681 29.5631 3.01246 30.0036 2.61718C30.4441 2.2106 30.941 1.86613 31.4944 1.58378C32.0478 1.30144 32.6464 1.07556 33.2901 0.90615C33.9339 0.725447 34.5776 0.589921 35.2214 0.499569C35.8651 0.397924 36.4863 0.330161 37.0849 0.296279C37.6948 0.262397 38.2482 0.245456 38.7451 0.245456C40.1907 0.245456 41.433 0.335808 42.4721 0.51651C43.5224 0.697213 44.409 0.962619 45.1318 1.31273C45.8659 1.66284 46.4532 2.09766 46.8936 2.61718C47.3341 3.1367 47.6729 3.74092 47.9101 4.42985C48.1586 5.10748 48.3223 5.86982 48.4014 6.71686C48.4804 7.55261 48.52 8.46742 48.52 9.46128L48.503 20.3034H45.2504Z"/>
28
+ <path d="M50.9439 10.5794C50.9439 9.22411 51.0116 8.02696 51.1471 6.98792C51.2827 5.94888 51.5198 5.04537 51.8587 4.27738C52.2088 3.50939 52.6718 2.87129 53.2478 2.36306C53.8351 1.84354 54.5692 1.42567 55.4501 1.10944C56.3423 0.793211 57.3983 0.567333 58.6181 0.431806C59.8378 0.296279 61.2608 0.228516 62.8872 0.228516C65.0556 0.228516 66.84 0.364042 68.2405 0.635096C69.6409 0.894856 70.7477 1.30144 71.5609 1.85484C72.374 2.39694 72.9387 3.09152 73.255 3.93856C73.5712 4.77431 73.7293 5.77382 73.7293 6.93709H70.4767C70.4767 6.51922 70.4654 6.12958 70.4428 5.76818C70.4202 5.40677 70.3355 5.07925 70.1887 4.78561C70.0531 4.49196 69.8329 4.2322 69.528 4.00633C69.223 3.76915 68.7882 3.57151 68.2235 3.4134C67.6588 3.25528 66.9417 3.1367 66.072 3.05764C65.2137 2.97858 64.1521 2.93905 62.8872 2.93905C61.4415 2.93905 60.2218 2.98987 59.2279 3.09152C58.2454 3.19317 57.4322 3.36257 56.7885 3.59975C56.1447 3.82562 55.6478 4.13621 55.2977 4.53149C54.9475 4.91549 54.6934 5.38983 54.5353 5.95452C54.3772 6.51922 54.2812 7.18556 54.2473 7.95355C54.2247 8.71024 54.2134 9.58551 54.2134 10.5794C54.2134 11.5507 54.2247 12.4146 54.2473 13.1713C54.2812 13.9167 54.3772 14.5718 54.5353 15.1365C54.6934 15.6899 54.9475 16.1586 55.2977 16.5426C55.6478 16.9266 56.1447 17.2371 56.7885 17.4743C57.4322 17.7115 58.2454 17.8809 59.2279 17.9825C60.2218 18.0842 61.4415 18.135 62.8872 18.135C64.1521 18.135 65.2137 18.0898 66.072 17.9995C66.9417 17.9091 67.6588 17.7792 68.2235 17.6098C68.7882 17.4404 69.223 17.2315 69.528 16.983C69.8329 16.7346 70.0531 16.4522 70.1887 16.136C70.3355 15.8085 70.4202 15.4527 70.4428 15.0687C70.4654 14.6734 70.4767 14.2499 70.4767 13.7981H73.7293C73.7293 14.984 73.5712 16.0117 73.255 16.8814C72.9387 17.751 72.374 18.4682 71.5609 19.0329C70.7477 19.5863 69.6409 19.9985 68.2405 20.2695C66.84 20.5406 65.0556 20.6761 62.8872 20.6761C61.2608 20.6761 59.8378 20.6084 58.6181 20.4728C57.3983 20.3373 56.3423 20.1171 55.4501 19.8121C54.5692 19.4959 53.8351 19.0837 53.2478 18.5755C52.6718 18.0672 52.2088 17.4404 51.8587 16.695C51.5198 15.9496 51.2827 15.0744 51.1471 14.0692C51.0116 13.0527 50.9439 11.8895 50.9439 10.5794Z"/>
29
+ <path d="M93.5006 7.14038C93.5006 6.32722 93.4385 5.65524 93.3143 5.12442C93.2013 4.58232 92.9246 4.15315 92.4842 3.83692C92.0437 3.50939 91.3887 3.28352 90.519 3.15928C89.6607 3.02376 88.4861 2.95599 86.9953 2.95599C85.5384 2.95599 84.3526 3.08587 83.4378 3.34563C82.523 3.5941 81.8058 3.94986 81.2863 4.41291C80.7668 4.87596 80.411 5.42936 80.219 6.07311C80.0383 6.71686 79.948 7.43403 79.948 8.2246V20.3034H76.6953V0.787564H79.948V3.88774C80.0609 3.53763 80.2698 3.15364 80.5748 2.73576C80.8797 2.30659 81.3428 1.91131 81.9639 1.5499C82.5851 1.1772 83.3869 0.866621 84.3695 0.618155C85.3634 0.369689 86.6001 0.245456 88.0796 0.245456C89.7737 0.245456 91.1515 0.397924 92.2131 0.70286C93.2748 0.996501 94.0992 1.43696 94.6865 2.02425C95.2851 2.60024 95.686 3.3174 95.8893 4.17573C96.1039 5.03407 96.2112 6.02229 96.2112 7.14038H93.5006Z"/>
30
+ <path d="M96.4497 10.41C96.4497 8.41095 96.6643 6.75639 97.0935 5.4463C97.5226 4.13621 98.2115 3.09717 99.1602 2.32918C100.109 1.5612 101.34 1.02474 102.853 0.7198C104.367 0.403571 106.208 0.245456 108.376 0.245456C110.544 0.245456 112.385 0.403571 113.899 0.7198C115.412 1.02474 116.643 1.5612 117.592 2.32918C118.541 3.09717 119.229 4.13621 119.659 5.4463C120.088 6.75639 120.302 8.41095 120.302 10.41C120.302 12.409 120.088 14.0692 119.659 15.3906C119.229 16.712 118.541 17.7623 117.592 18.5416C116.643 19.3209 115.412 19.8743 113.899 20.2018C112.385 20.518 110.544 20.6761 108.376 20.6761C106.208 20.6761 104.367 20.518 102.853 20.2018C101.34 19.8743 100.109 19.3209 99.1602 18.5416C98.2115 17.7623 97.5226 16.712 97.0935 15.3906C96.6643 14.0692 96.4497 12.409 96.4497 10.41ZM99.7023 10.41C99.7023 11.4942 99.7419 12.4372 99.8209 13.2391C99.9 14.041 100.047 14.7299 100.261 15.3059C100.487 15.8819 100.798 16.3506 101.193 16.712C101.588 17.0734 102.108 17.3614 102.752 17.576C103.395 17.7905 104.175 17.9374 105.09 18.0164C106.016 18.0955 107.111 18.135 108.376 18.135C109.46 18.135 110.426 18.1124 111.273 18.0672C112.131 18.0108 112.877 17.8922 113.509 17.7115C114.153 17.5308 114.701 17.2767 115.152 16.9491C115.604 16.6103 115.966 16.1529 116.237 15.5769C116.519 15.0009 116.722 14.2951 116.846 13.4593C116.982 12.6123 117.05 11.5958 117.05 10.41C117.05 9.2467 116.982 8.25848 116.846 7.44532C116.722 6.62086 116.519 5.93194 116.237 5.37854C115.966 4.82513 115.604 4.39032 115.152 4.07409C114.701 3.74657 114.153 3.50375 113.509 3.34563C112.877 3.17622 112.131 3.06893 111.273 3.02376C110.426 2.97858 109.46 2.95599 108.376 2.95599C107.292 2.95599 106.321 2.97858 105.462 3.02376C104.615 3.06893 103.87 3.17622 103.226 3.34563C102.594 3.50375 102.051 3.74657 101.6 4.07409C101.148 4.39032 100.781 4.82513 100.499 5.37854C100.228 5.93194 100.024 6.62086 99.8887 7.44532C99.7645 8.25848 99.7023 9.2467 99.7023 10.41Z"/>
31
+ <path d="M134.094 11.4095C135.359 11.4095 136.437 11.4321 137.329 11.4772C138.222 11.5111 138.967 11.5789 139.566 11.6805C140.175 11.7709 140.655 11.8895 141.006 12.0363C141.356 12.1831 141.621 12.4033 141.802 12.697C141.982 12.9793 142.095 13.2673 142.141 13.561C142.197 13.8433 142.225 14.1708 142.225 14.5435C142.225 14.9501 142.197 15.3228 142.141 15.6616C142.095 15.9892 141.977 16.2884 141.785 16.5595C141.593 16.8306 141.31 17.0621 140.938 17.2541C140.565 17.4461 140.057 17.6098 139.413 17.7454C138.769 17.8809 137.967 17.9825 137.007 18.0503C136.059 18.1068 134.907 18.135 133.552 18.135C132.061 18.135 130.824 18.0955 129.841 18.0164C128.87 17.9261 128.097 17.7623 127.521 17.5251C126.945 17.288 126.538 16.9604 126.301 16.5426C126.075 16.1134 125.962 15.56 125.962 14.8824H122.709C122.709 15.9101 122.89 16.7797 123.251 17.4912C123.624 18.2028 124.234 18.7844 125.081 19.2362C125.928 19.6766 127.041 19.9985 128.418 20.2018C129.808 20.4051 131.519 20.5067 133.552 20.5067C135.178 20.5067 136.601 20.4559 137.821 20.3543C139.052 20.2639 140.108 20.1227 140.989 19.9307C141.869 19.7274 142.598 19.4677 143.174 19.1515C143.761 18.8239 144.224 18.4399 144.563 17.9995C144.902 17.5477 145.139 17.0338 145.275 16.4579C145.41 15.8706 145.478 15.2099 145.478 14.4758C145.478 13.7417 145.41 13.0979 145.275 12.5445C145.139 11.9798 144.902 11.4942 144.563 11.0876C144.236 10.6697 143.795 10.2857 143.242 9.93563C142.688 9.58551 141.988 9.32575 141.141 9.15635C140.294 8.98694 139.289 8.86835 138.126 8.80059C136.974 8.73282 135.63 8.69894 134.094 8.69894C132.829 8.69894 131.75 8.69894 130.858 8.69894C129.966 8.68765 129.215 8.65377 128.605 8.5973C128.006 8.52953 127.532 8.43354 127.182 8.3093C126.832 8.18507 126.566 8.00437 126.386 7.7672C126.205 7.53002 126.086 7.23074 126.03 6.86933C125.985 6.49663 125.962 6.11829 125.962 5.73429C125.962 5.07925 126.109 4.56537 126.402 4.19268C126.696 3.81998 127.182 3.54328 127.859 3.36257C128.537 3.18187 129.429 3.06893 130.536 3.02376C131.643 2.97858 133.009 2.95599 134.636 2.95599C136.127 2.95599 137.358 3.00117 138.329 3.09152C139.311 3.17058 140.091 3.32305 140.667 3.54892C141.243 3.76351 141.644 4.0628 141.869 4.44679C142.107 4.83078 142.225 5.32771 142.225 5.93758H145.478C145.478 4.95501 145.314 4.10797 144.987 3.39646C144.659 2.68494 144.083 2.09766 143.259 1.63461C142.445 1.16026 141.339 0.810152 139.938 0.584274C138.549 0.358396 136.782 0.245456 134.636 0.245456C132.467 0.245456 130.626 0.341455 129.113 0.533451C127.6 0.725447 126.369 1.04168 125.42 1.48214C124.471 1.91131 123.782 2.476 123.353 3.17622C122.924 3.86515 122.709 4.71784 122.709 5.73429C122.709 6.47969 122.777 7.17427 122.913 7.81802C123.048 8.45048 123.28 8.98694 123.607 9.4274C123.935 9.85657 124.375 10.201 124.929 10.4608C125.493 10.7206 126.194 10.9238 127.029 11.0707C127.876 11.2062 128.882 11.2965 130.045 11.3417C131.208 11.3869 132.558 11.4095 134.094 11.4095Z"/>
32
+ </g>
33
+ </svg>
34
+ </a>
35
+ </div>
36
+ { children }
37
+ </div>
38
+ </main>
39
+
40
+ {/* <script src="/assets/js/app.js"></script> */ }
41
+ </body>
42
+ </html>
43
+ };
44
+
45
+ export default Layout;
package/example/pages/index.jsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import ComponentInner from '../components/Inner.tsx';
2
2
  import Layout from '../layouts/Layout.jsx';
3
+ import Header from '../components/Header.tsx';
3
4
 
4
5
  // const requestOnImport = await fetch(process.env.URL + '/api/401.json').then(r => r.json()).catch(e => e.message);
5
6
  // console.log('Build time request when component imported', requestOnImport);
@@ -10,153 +11,152 @@ export default async ({ data }) => {
10
11
  const inlineRequest = await fetch(process.env.URL + '/api/200.json').then(r => r.json()).catch(e => e.message);
11
12
 
12
13
  return <Layout title="JTSX Loader">
13
- <script __raw={`window.addEventListener('load', () => {
14
+ <script __raw={ `window.addEventListener('load', () => {
14
15
  console.log('LOADED INLINE');
15
16
  });`}>
16
17
  </script>
17
18
 
18
- <script __raw={`
19
+ <script __raw={ `
19
20
  window.addEventListener('load', () => {
20
21
  console.log('Self Closing INLINE');
21
22
  })
22
- `}/>
23
+ `} />
23
24
 
24
25
  <section>
25
- <div class="lang">
26
- <h1>JTSX Loader <small>v0.1.0</small></h1>
27
- <a href="/" class="is-active">Russian</a> / <a href="/en">English</a>
28
- </div>
26
+ <Header lang="en" />
29
27
 
30
- <h5>* Документация в стадии разработки</h5>
28
+ <h5>* Documentation under development</h5>
31
29
 
32
- <p><b>J</b>avaScript <b>T</b>ype<b>S</b>cript <b>X</b>ml — загрузчик <code>.jsx</code> и <code>.tsx</code> файлов для <b>Node.js</b></p>
33
- <p>Позволяет писать <b>JTSX</b> код и компилировать в нативный HTML</p>
34
- <p>Цель разработки данного загрузчика в том, чтобы решить проблему комфортного использования JSX как шаблонизатора, без привязки к React</p>
35
- <p>Транспиляция JTSX файлов происходит с помощью <a href="https://esbuild.github.io/" target="_blank">esbuild</a> - надежный и очень быстрый транспайлер</p>
36
- <p>Всего одна зависимость — esbuild</p>
37
- <p>Для конвертации используется <code>jsxFactory</code> функция, которая преобразует теги, аттрибуты и дочерние элементы в стандартный HTML</p>
38
- <p>Загрузчик позволяет расширить преобразования JTSX файлов через конфигурации и самостоятельно написанные функции</p>
39
- <p>Так же загрузчик позволяет предотвратить кеширование при импорте компонентов, что дает возможность комфортно использовать перезагрузку страницы при изменениях и не перезапускать сервер, которые рендерит компонент</p>
40
- <p>ВАЖНО: Данный загрузчик это НЕ замена React, Vue и их производных. Если вам нужна реактивность и толстые клиенты, то лучше использовать соответствующие инструменты</p>
30
+ <p><b>J</b>avaScript <b>T</b>ype<b>S</b>cript <b>X</b>ml — <code>.jsx</code> and <code>.tsx</code> file loader for <b>Node.js</b></p>
31
+ <p>Allows you to write <b>JTSX</b> code and compile it into native HTML</p>
32
+ <p>The purpose of developing this loader is to solve the problem of comfortable use of JSX as a template engine, without being tied to React</p>
33
+ <p>JTSX files are transpiled using <a href="https://esbuild.github.io/" target="_blank">esbuild</a> — a reliable and very fast transpiler</p>
34
+ <p>Only one dependency — esbuild</p>
35
+ <p>For conversion, the <code>jsxFactory</code> function is used, which converts tag attributes, attributes and child elements into standard HTML</p>
36
+ <p>The loader allows you to extend the transformation of JTSX files through configurations and self-written functions</p>
37
+ <p>The loader also allows you to prevent caching when importing components, which makes it possible to comfortably use page reloading when changes are made and not restart the server that renders the component</p>
38
+ <p>IMPORTANT: This project is NOT a replacement for React, Vue and their derivatives. If you need reactivity and thick clients, it is better to use the appropriate tools</p>
41
39
 
42
40
  <p><a href="https://github.com/dergachevm/jtsx-loader">Github</a></p>
41
+ <p><a href="https://github.com/dergachevm/jtsx-loader/blob/master/jtsx.config.example.js">Config file description</a></p>
43
42
  </section>
44
43
 
45
44
  <section>
46
- <h2>Установка, использование, требования</h2>
47
- <h3>Установка</h3>
45
+ <h2>Installation, usage, requirements</h2>
46
+ <h3>Installation</h3>
48
47
  <pre>npm install jtsx-loader</pre>
49
48
 
50
- <h3>Использование</h3>
51
- <p>Проекты необходимо запускать через команду --import</p>
49
+ <h3>Usage</h3>
50
+ <p>Projects must be run via the --import command</p>
52
51
  <pre>node --import jtsx-loader ./server.js</pre>
53
52
 
54
- <h3>Как отрендерить файл</h3>
55
- <p>Напишем простой компонент страницы index.jsx:</p>
53
+ <h3>How to render a file</h3>
54
+ <p>Let's write a simple index.jsx page component:</p>
56
55
  <pre __escape={`
57
- export default async ({ title }) => <html lang="ru">
56
+ export default async ({ title }) => <html lang="en">
58
57
  <head>
59
58
  <title>{title}</title>
60
59
  </head>
61
60
  <body>
62
61
  <h1>{title}</h1>
63
62
  <p>
64
- Body content with array:
63
+ Body content with array:
65
64
  {[0, 1, 2].map(n => <code>{n}</code>)}
66
65
  </p>
67
66
  </body>
68
67
  </html>;
69
68
  `}></pre>
70
- <p>Импортировать компонент через <code>import()</code>, ?reload параметр опционален, используется для предотвращения кеширования</p>
69
+ <p>Import the component via <code>import()</code>, the ?reload parameter is optional, used to prevent caching</p>
71
70
  <pre>
72
71
  const JSXComp = (await import('./index.jsx?reload')).default;
73
72
  </pre>
74
- <p>Вызвать импортированный компонент как функцию передав объект данных и вывести результат в консоль</p>
73
+ <p>Call the imported component as a function passing the data object and output the result to the console</p>
75
74
  <pre>
76
75
  {`const rendered = await JSXComp({ data: renderCount });\nconsole.log(rendered);`}
77
76
  </pre>
78
77
 
79
- <p>Подробный пример с сохранением результат в файл <a href="https://github.com/dergachevm/jtsx-loader/tree/master/example">здесь</a></p>
78
+ <p>A detailed example with saving the result to a file <a href="https://github.com/dergachevm/jtsx-loader/tree/master/example">here</a></p>
80
79
 
81
- <h3>Требования</h3>
82
- <p>Минимальная версия Node.js - 20.16.0</p>
80
+ <h3>Requirements</h3>
81
+ <p>Minimum Node.js version - 20.16.0</p>
83
82
  </section>
84
83
 
85
84
  <section>
86
- <h2>Базовые примеры</h2>
85
+ <h2>Basic Examples</h2>
87
86
 
88
87
  <div class="examples">
89
88
  <div class="item">
90
- <h3>Нативные HTML аттрибуты</h3>
91
- <p>Допускается использование только нативных HTML аттрибутов</p>
89
+ <h3>Native HTML Attributes</h3>
90
+ <p>Only native HTML attributes are allowed</p>
92
91
 
93
- <p>React аттрибуты и инлайн функции в тегах не поддерживаются по дизайну и никогда не должны использоваться</p>
92
+ <p>React attributes are not supported by design and should never be used</p>
94
93
 
95
- <p>В случае использования React аттрибутов, как например <code>className</code>,<br />
96
- в консоль будет выведено предупреждение, а аттрибут отрендерится как есть</p>
94
+ <p>If you use React attributes, such as <code>className</code>,<br />
95
+ a warning will be printed to the console, and the attribute will be rendered as is</p>
97
96
 
98
- <p>Другие отличия от стандартного JSX:</p>
97
+ <p>Other differences from standard JSX:</p>
99
98
 
100
99
  <ul>
101
- <li>Аттрибут <code>__escape</code>: используется для вывода любого экранированного контента</li>
102
- <li>Аттрибут <code>__raw</code>: рендерит строку в содержимое тега как есть, например полезно для тегов <code>script</code> и <code>style</code></li>
103
- <li>В JTSX файл передается объект <code>_jsxUtils</code>, которая содержит в себе полезные утилиты. Вместо данного объекта можно передать свою любую функцию и использовать ее для расширения стандартного преобразования</li>
100
+ <li><code>__escape</code> attribute: used to output any escaped content</li>
101
+ <li><code>__raw</code> attribute: renders a string into the tag content as is, for example useful for <code>script</code> tags and <code>style</code></li>
102
+ <li>The JTSX file is passed the <code>_jsxUtils</code> object, which contains useful utilities. Instead of this object, you can pass any function you want and use it to extend the standard transformation</li>
104
103
  </ul>
105
104
  </div>
106
105
 
107
106
  <div class="item">
108
- <h3>Доступны все возможности JavaScript, которые используются в обычном JSX</h3>
109
- <p>ВАЖНО: весь код выполняется в среде Node.js, поэтому здесь нет браузерного DOM</p>
110
- <h4>Вычисления</h4>
111
- <pre __escape={'{(1 + 1 + 2 * 2) / 3}'}></pre>
112
- <p>Результат: <code>{(1 + 1 + 2 * 2) / 3}</code></p>
113
-
114
- <h4>Стандартная библиотека Node.js</h4>
115
- <pre __escape={'{Math.pow(9, 2)}'}></pre>
116
- <p>Результат: <code>{Math.pow(9, 2)}</code></p>
117
-
118
- <h4>Тернарные выражения</h4>
119
- <pre __escape={`1 > 2 ? <strong>Больше</strong> : 'Меньше'`}></pre>
120
- <p>Результат: <code>{1 > 2 ? <strong>Больше</strong> : 'Меньше'}</code></p>
121
- <pre __escape={`2 > 1 ? <strong>Больше</strong> : 'Меньше'`}></pre>
122
- <p>Результат: <code>{2 > 1 ? <strong>Больше</strong> : 'Меньше'}</code></p>
123
-
124
- <h4>Манипуляции c массивами и рендеринг компонентов</h4>
125
- <p>Рендерит компоненты/теги с данными из массива</p>
126
- <pre __escape={'[0, 1, 2].map(num => <code>{num}</code>)'}></pre>
127
- <p>Результат: {[0, 1, 2].map(el => <code>{el}</code>)}</p>
107
+ <h3>All JavaScript capabilities that are used in regular JSX are available</h3>
108
+ <p>IMPORTANT: all code is executed in the Node.js environment, so there is no browser DOM</p>
109
+ <h4>Calculations</h4>
110
+ <pre __escape={ '{(1 + 1 + 2 * 2) / 3}' }></pre>
111
+ <p>Result: <code>{ (1 + 1 + 2 * 2) / 3 }</code></p>
112
+
113
+ <h4>Node.js Standard Library</h4>
114
+ <pre __escape={ '{Math.pow(9, 2)}' }></pre>
115
+ <p>Result: <code>{ Math.pow(9, 2) }</code></p>
116
+
117
+ <h4>Ternary expressions</h4>
118
+ <pre __escape={ `1 > 2 ? <strong>Greater</strong> : 'Less'` }></pre>
119
+ <p>Result: <code>{ 1 > 2 ? <strong>Greater</strong> : 'Less' }</code></p>
120
+ <pre __escape={ `2 > 1 ? <strong>Greater</strong> : 'Less'` }></pre>
121
+ <p>Result: <code>{ 2 > 1 ? <strong>Greater</strong> : 'Less' }</code></p>
122
+
123
+ <h4>Array manipulation and component rendering</h4>
124
+ <p>Renders components/tags with array data</p>
125
+ <pre __escape={ '[0, 1, 2].map(num => <code>{num}</code>)' }></pre>
126
+ <p>Result: { [0, 1, 2].map(el => <code>{ el }</code>) }</p>
128
127
 
129
128
  <h4>__escape</h4>
130
- <p>Вывод любого экранированного контента</p>
131
- <pre __escape={'<code __escape={\'<div>escaped</div>\'}></code>'}></pre>
132
- <p>Результат: <code __escape={'<div>escaped</div>'}></code></p>
129
+ <p>Output any escaped content</p>
130
+ <pre __escape={ '<code __escape={\'<div>escaped</div>\'}></code>' }></pre>
131
+ <p>Result: <code __escape={ '<div>escaped</div>' }></code></p>
133
132
  </div>
134
133
 
135
134
  <div class="item">
136
- <h3>Запрос внутри компонента через <code>fetch</code></h3>
137
- <p><code __escape={`const inlineRequest = await fetch(process.env.URL + '/api/200.json').then(r => r.json()).catch(e => e.message);`}></code></p>
138
- <p>Вызывается при каждом рендеринге</p>
139
- <p>Если вызывается внутренний сервер, то он должен быть запущен до запуска рендеринга</p>
135
+ <h3>Request inside the component via <code>fetch</code></h3>
136
+ <p><code __escape={ `const inlineRequest = await fetch(process.env.URL + '/api/200.json').then(r => r.json()).catch(e => e.message);` }></code></p>
137
+ <p>Called on every render</p>
138
+ <p>If the internal server is called, it must be running before the render starts</p>
140
139
  <pre>
141
- Ответ: {JSON.stringify(inlineRequest, null, 4)}
140
+ Response: { JSON.stringify(inlineRequest, null, 4) }
142
141
  </pre>
143
142
  </div>
144
143
 
145
144
  <div class="item">
146
- <h3>Импортированный компонент</h3>
145
+ <h3>Imported component</h3>
147
146
  <p></p>
148
147
  <div class="component-container">
149
- <ComponentInner renderCount={data} >
150
- <p><i special="CHILD 0">Дочерний компонент 0</i></p>
151
- <p><i special="CHILD 1">Дочерний компонент 1</i></p>
148
+ <ComponentInner lang="en" renderCount={ data } >
149
+ <p><i special="CHILD 0">Child component 0</i></p>
150
+ <p><i special="CHILD 1">Child component 1</i></p>
152
151
  </ComponentInner>
153
152
  </div>
154
153
  </div>
155
154
 
156
155
  <div class="item">
157
- <h3>Пользовательские аттрибуты и их обработка</h3>
158
- <p><code>{_jsxUtils.escapeHtml(`<input type="text" ac:custom="input" />`)}</code> трансформируется в <code>data-ac-custom="input"</code></p>
159
- <p>Обработчик пишется в jtsx.config.js</p>
156
+ <h3>Custom attributes and their processing</h3>
157
+ <p>{ _jsxUtils.escapeHtml(`<input type="text" ac:custom="input"`) } is transformed into <code>data-ac-custom="input"</code></p>
158
+ <p>The handler is written in jtsx.config.js</p>
159
+
160
160
  <div>
161
161
  <input type="text" ac:custom="input" value="ac:custom='input'" />
162
162
  </div>
@@ -164,24 +164,17 @@ export default async ({ title }) => <html lang="ru">
164
164
  </div>
165
165
  </section>
166
166
 
167
-
168
167
  <section>
169
- <h2>Авторы</h2>
170
- <p><a href="mailto:dergachev.mihail@gmail.com">Дергачев Михаил</a></p>
171
- <p><a href="https://ancros.dev">https://ancros.dev</a></p>
168
+ <h2>Authors</h2>
169
+ <p><a href="mailto:dergachev.mihail@gmail.com">Dergachev Mikhail</a></p>
170
+ <p><a href="https: //ancros.dev">https://ancros.dev</a></p>
172
171
  </section>
173
-
172
+
174
173
  <section>
175
- <h2>Референсы</h2>
176
- <p><a href="https://esbuild.github.io/api/#jsx-factory">https://esbuild.github.io/api/#jsx-factory</a></p>
177
- <p><a href="https://lwebapp.com/en/post/custom-jsx">https://lwebapp.com/en/post/custom-jsx</a></p>
174
+ <h2>References</h2>
175
+ <p><a href="https://esbuild.github.io/api/#jsx-factory">https://esbuild.github.io/api/# jsx-factory</a></p>
176
+ <p><a href="https://lwebapp.com/en/post/custom-jsx">https://lwebapp.com/en/post/custom- jsx</a></p>
178
177
  <p><a href="https://nakedjsx.org/">https://nakedjsx.org/</a></p>
179
178
  </section>
180
-
181
- {/*
182
- Inline functions not allowed
183
- <form action="/api" onSubmit={async () => {
184
- await console.log('ONSUBMIT');
185
- }} novalidate></form> */}
186
179
  </Layout>
187
180
  }
package/example/pages/ru.jsx ADDED
@@ -0,0 +1,187 @@
1
+ import ComponentInner from '../components/Inner.tsx';
2
+ import Header from '../components/Header.tsx';
3
+ import Layout from '../layouts/Layout.jsx';
4
+ import fs from 'node:fs';
5
+
6
+ // const requestOnImport = await fetch(process.env.URL + '/api/401.json').then(r => r.json()).catch(e => e.message);
7
+ // console.log('Build time request when component imported', requestOnImport);
8
+
9
+ export default async ({ data }) => {
10
+ // inline server request example
11
+ // possible only if current server already running
12
+ const inlineRequest = await fetch(process.env.URL + '/api/200.json').then(r => r.json()).catch(e => e.message);
13
+
14
+ return <Layout title="JTSX Loader">
15
+ <script __raw={`window.addEventListener('load', () => {
16
+ console.log('LOADED INLINE');
17
+ });`}>
18
+ </script>
19
+
20
+ <script __raw={`
21
+ window.addEventListener('load', () => {
22
+ console.log('Self Closing INLINE');
23
+ })
24
+ `}/>
25
+
26
+ <section>
27
+ <Header lang="ru" />
28
+
29
+ <h5>* Документация в стадии разработки</h5>
30
+
31
+ <p><b>J</b>avaScript <b>T</b>ype<b>S</b>cript <b>X</b>ml — загрузчик <code>.jsx</code> и <code>.tsx</code> файлов для <b>Node.js</b></p>
32
+ <p>Позволяет писать <b>JTSX</b> код и компилировать в нативный HTML</p>
33
+ <p>Цель разработки данного загрузчика в том, чтобы решить проблему комфортного использования JSX как шаблонизатора, без привязки к React</p>
34
+ <p>Транспиляция JTSX файлов происходит с помощью <a href="https://esbuild.github.io/" target="_blank">esbuild</a> - надежный и очень быстрый транспайлер</p>
35
+ <p>Всего одна зависимость — esbuild</p>
36
+ <p>Для конвертации используется <code>jsxFactory</code> функция, которая преобразует теги, аттрибуты и дочерние элементы в стандартный HTML</p>
37
+ <p>Загрузчик позволяет расширить преобразования JTSX файлов через конфигурации и самостоятельно написанные функции</p>
38
+ <p>Так же загрузчик позволяет предотвратить кеширование при импорте компонентов, что дает возможность комфортно использовать перезагрузку страницы при изменениях и не перезапускать сервер, которые рендерит компонент</p>
39
+ <p>ВАЖНО: Данный загрузчик это НЕ замена React, Vue и их производных. Если вам нужна реактивность и толстые клиенты, то лучше использовать соответствующие инструменты</p>
40
+
41
+ <p><a href="https://github.com/dergachevm/jtsx-loader">Github</a></p>
42
+ <p><a href="https://github.com/dergachevm/jtsx-loader/blob/master/jtsx.config.example.js">Описание файла конфигурации</a></p>
43
+ </section>
44
+
45
+ <section>
46
+ <h2>Установка, использование, требования</h2>
47
+ <h3>Установка</h3>
48
+ <pre>npm install jtsx-loader</pre>
49
+
50
+ <h3>Использование</h3>
51
+ <p>Проекты необходимо запускать через команду --import</p>
52
+ <pre>node --import jtsx-loader ./server.js</pre>
53
+
54
+ <h3>Как отрендерить файл</h3>
55
+ <p>Напишем простой компонент страницы index.jsx:</p>
56
+ <pre __escape={`
57
+ export default async ({ title }) => <html lang="ru">
58
+ <head>
59
+ <title>{title}</title>
60
+ </head>
61
+ <body>
62
+ <h1>{title}</h1>
63
+ <p>
64
+ Body content with array:
65
+ {[0, 1, 2].map(n => <code>{n}</code>)}
66
+ </p>
67
+ </body>
68
+ </html>;
69
+ `}></pre>
70
+ <p>Импортировать компонент через <code>import()</code>, ?reload параметр опционален, используется для предотвращения кеширования</p>
71
+ <pre>
72
+ const JSXComp = (await import('./index.jsx?reload')).default;
73
+ </pre>
74
+ <p>Вызвать импортированный компонент как функцию передав объект данных и вывести результат в консоль</p>
75
+ <pre>
76
+ {`const rendered = await JSXComp({ data: renderCount });\nconsole.log(rendered);`}
77
+ </pre>
78
+
79
+ <p>Подробный пример с сохранением результат в файл <a href="https://github.com/dergachevm/jtsx-loader/tree/master/example">здесь</a></p>
80
+
81
+ <h3>Требования</h3>
82
+ <p>Минимальная версия Node.js - 20.16.0</p>
83
+ </section>
84
+
85
+ <section>
86
+ <h2>Базовые примеры</h2>
87
+
88
+ <div class="examples">
89
+ <div class="item">
90
+ <h3>Нативные HTML аттрибуты</h3>
91
+ <p>Допускается использование только нативных HTML аттрибутов</p>
92
+
93
+ <p>React аттрибуты и инлайн функции в тегах не поддерживаются по дизайну и никогда не должны использоваться</p>
94
+
95
+ <p>В случае использования React аттрибутов, как например <code>className</code>,<br />
96
+ в консоль будет выведено предупреждение, а аттрибут отрендерится как есть</p>
97
+
98
+ <p>Другие отличия от стандартного JSX:</p>
99
+
100
+ <ul>
101
+ <li>Аттрибут <code>__escape</code>: используется для вывода любого экранированного контента</li>
102
+ <li>Аттрибут <code>__raw</code>: рендерит строку в содержимое тега как есть, например полезно для тегов <code>script</code> и <code>style</code></li>
103
+ <li>В JTSX файл передается объект <code>_jsxUtils</code>, которая содержит в себе полезные утилиты. Вместо данного объекта можно передать свою любую функцию и использовать ее для расширения стандартного преобразования</li>
104
+ </ul>
105
+ </div>
106
+
107
+ <div class="item">
108
+ <h3>Доступны все возможности JavaScript, которые используются в обычном JSX</h3>
109
+ <p>ВАЖНО: весь код выполняется в среде Node.js, поэтому здесь нет браузерного DOM</p>
110
+ <h4>Вычисления</h4>
111
+ <pre __escape={'{(1 + 1 + 2 * 2) / 3}'}></pre>
112
+ <p>Результат: <code>{(1 + 1 + 2 * 2) / 3}</code></p>
113
+
114
+ <h4>Стандартная библиотека Node.js</h4>
115
+ <pre __escape={'{Math.pow(9, 2)}'}></pre>
116
+ <p>Результат: <code>{Math.pow(9, 2)}</code></p>
117
+
118
+ <h4>Тернарные выражения</h4>
119
+ <pre __escape={`1 > 2 ? <strong>Больше</strong> : 'Меньше'`}></pre>
120
+ <p>Результат: <code>{1 > 2 ? <strong>Больше</strong> : 'Меньше'}</code></p>
121
+ <pre __escape={`2 > 1 ? <strong>Больше</strong> : 'Меньше'`}></pre>
122
+ <p>Результат: <code>{2 > 1 ? <strong>Больше</strong> : 'Меньше'}</code></p>
123
+
124
+ <h4>Манипуляции c массивами и рендеринг компонентов</h4>
125
+ <p>Рендерит компоненты/теги с данными из массива</p>
126
+ <pre __escape={'[0, 1, 2].map(num => <code>{num}</code>)'}></pre>
127
+ <p>Результат: {[0, 1, 2].map(el => <code>{el}</code>)}</p>
128
+
129
+ <h4>__escape</h4>
130
+ <p>Вывод любого экранированного контента</p>
131
+ <pre __escape={'<code __escape={\'<div>escaped</div>\'}></code>'}></pre>
132
+ <p>Результат: <code __escape={'<div>escaped</div>'}></code></p>
133
+ </div>
134
+
135
+ <div class="item">
136
+ <h3>Запрос внутри компонента через <code>fetch</code></h3>
137
+ <p><code __escape={`const inlineRequest = await fetch(process.env.URL + '/api/200.json').then(r => r.json()).catch(e => e.message);`}></code></p>
138
+ <p>Вызывается при каждом рендеринге</p>
139
+ <p>Если вызывается внутренний сервер, то он должен быть запущен до запуска рендеринга</p>
140
+ <pre>
141
+ Ответ: {JSON.stringify(inlineRequest, null, 4)}
142
+ </pre>
143
+ </div>
144
+
145
+ <div class="item">
146
+ <h3>Импортированный компонент</h3>
147
+ <p></p>
148
+ <div class="component-container">
149
+ <ComponentInner renderCount={data} >
150
+ <p><i special="CHILD 0">Дочерний компонент 0</i></p>
151
+ <p><i special="CHILD 1">Дочерний компонент 1</i></p>
152
+ </ComponentInner>
153
+ </div>
154
+ </div>
155
+
156
+ <div class="item">
157
+ <h3>Пользовательские аттрибуты и их обработка</h3>
158
+ <p><code>{_jsxUtils.escapeHtml(`<input type="text" ac:custom="input" />`)}</code> трансформируется в <code>data-ac-custom="input"</code></p>
159
+ <p>Обработчик пишется в jtsx.config.js</p>
160
+ <div>
161
+ <input type="text" ac:custom="input" value="ac:custom='input'" />
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </section>
166
+
167
+
168
+ <section>
169
+ <h2>Авторы</h2>
170
+ <p><a href="mailto:dergachev.mihail@gmail.com">Дергачев Михаил</a></p>
171
+ <p><a href="https://ancros.dev">https://ancros.dev</a></p>
172
+ </section>
173
+
174
+ <section>
175
+ <h2>Референсы</h2>
176
+ <p><a href="https://esbuild.github.io/api/#jsx-factory">https://esbuild.github.io/api/#jsx-factory</a></p>
177
+ <p><a href="https://lwebapp.com/en/post/custom-jsx">https://lwebapp.com/en/post/custom-jsx</a></p>
178
+ <p><a href="https://nakedjsx.org/">https://nakedjsx.org/</a></p>
179
+ </section>
180
+
181
+ {/*
182
+ Inline functions not allowed
183
+ <form action="/api" onSubmit={async () => {
184
+ await console.log('ONSUBMIT');
185
+ }} novalidate></form> */}
186
+ </Layout>
187
+ }
package/example/server.js CHANGED
@@ -58,6 +58,7 @@ router.get('/', async (req, res) => {
58
58
  });
59
59
 
60
60
  router.get('/:page', async (req, res) => {
61
+ if (req.params.page.includes('.')) return res.status(404);
61
62
  renderCount++;
62
63
  return res.send(await render(req.params.page));
63
64
  });
package/example/styles/default.css CHANGED
@@ -228,4 +228,25 @@ main {
228
228
  border-top: none;
229
229
  border-bottom: none;
230
230
  border-radius: 8px;
231
+ }
232
+
233
+ @media screen and (max-width: 768px) {
234
+ body {
235
+ padding: 20px;
236
+ }
237
+
238
+ main {
239
+ /* overflow-x: hidden; */
240
+ }
241
+
242
+ pre {
243
+ display: block;
244
+ overflow-x: auto;
245
+ max-width: 90vw;
246
+ padding: 20px;
247
+ }
248
+
249
+ h5 {
250
+ margin-top: 20px;
251
+ }
231
252
  }
package/example/styles/reset.css ADDED
@@ -0,0 +1,114 @@
1
+ /***
2
+ The new CSS reset - version 1.11.2 (last updated 15.11.2023)
3
+ GitHub page: https://github.com/elad2412/the-new-css-reset
4
+ ***/
5
+
6
+ /*
7
+ Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
8
+ - The "symbol *" part is to solve Firefox SVG sprite bug
9
+ - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
10
+ */
11
+ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
12
+ all: unset;
13
+ display: revert;
14
+ }
15
+
16
+ /* Preferred box-sizing value */
17
+ *,
18
+ *::before,
19
+ *::after {
20
+ box-sizing: border-box;
21
+ }
22
+
23
+ /* Fix mobile Safari increase font-size on landscape mode */
24
+ html {
25
+ -moz-text-size-adjust: none;
26
+ -webkit-text-size-adjust: none;
27
+ text-size-adjust: none;
28
+ }
29
+
30
+ /* Reapply the pointer cursor for anchor tags */
31
+ a,
32
+ button {
33
+ cursor: revert;
34
+ }
35
+
36
+ /* Remove list styles (bullets/numbers) */
37
+ ol,
38
+ ul,
39
+ menu,
40
+ summary {
41
+ list-style: none;
42
+ }
43
+
44
+ /* For images to not be able to exceed their container */
45
+ img {
46
+ max-inline-size: 100%;
47
+ max-block-size: 100%;
48
+ }
49
+
50
+ /* removes spacing between cells in tables */
51
+ table {
52
+ border-collapse: collapse;
53
+ }
54
+
55
+ /* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
56
+ input,
57
+ textarea {
58
+ -webkit-user-select: auto;
59
+ }
60
+
61
+ /* revert the 'white-space' property for textarea elements on Safari */
62
+ textarea {
63
+ white-space: revert;
64
+ }
65
+
66
+ /* minimum style to allow to style meter element */
67
+ meter {
68
+ -webkit-appearance: revert;
69
+ appearance: revert;
70
+ }
71
+
72
+ /* preformatted text - use only for this feature */
73
+ :where(pre) {
74
+ all: revert;
75
+ box-sizing: border-box;
76
+ }
77
+
78
+ /* reset default text opacity of input placeholder */
79
+ ::placeholder {
80
+ color: unset;
81
+ }
82
+
83
+ /* fix the feature of 'hidden' attribute.
84
+ display:revert; revert to element instead of attribute */
85
+ :where([hidden]) {
86
+ display: none;
87
+ }
88
+
89
+ /* revert for bug in Chromium browsers
90
+ - fix for the content editable attribute will work properly.
91
+ - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
92
+ :where([contenteditable]:not([contenteditable="false"])) {
93
+ -moz-user-modify: read-write;
94
+ -webkit-user-modify: read-write;
95
+ overflow-wrap: break-word;
96
+ -webkit-line-break: after-white-space;
97
+ -webkit-user-select: auto;
98
+ }
99
+
100
+ /* apply back the draggable feature - exist only in Chromium and Safari */
101
+ :where([draggable="true"]) {
102
+ -webkit-user-drag: element;
103
+ }
104
+
105
+ /* Revert Modal native behavior */
106
+ :where(dialog:modal) {
107
+ all: revert;
108
+ box-sizing: border-box;
109
+ }
110
+
111
+ /* Remove details summary webkit styles */
112
+ ::-webkit-details-marker {
113
+ display: none;
114
+ }
package/example/styles/styles.css CHANGED
@@ -1 +1,2 @@
1
+ @import url('./reset.css');
1
2
  @import url('./default.css');
package/factory/jsxFactory.js CHANGED
@@ -55,7 +55,8 @@ const objectIntoAttrs = (object) => {
55
55
  }
56
56
 
57
57
  if (possibleAttributes[attr] && possibleAttributes[attr] !== attr) {
58
- console.warn(`Warning! Replace "${attr}" with native html property "${possibleAttributes[attr]}"`);
58
+ (config.disableAttrWarnings !== true) && console.warn(`Warning! Replace "${attr}" with native html property "${possibleAttributes[attr]}"`);
59
+ if (config.rewriteReactAttrs === true) attr = possibleAttributes[attr];
59
60
  }
60
61
 
61
62
  if (attr === 'style' && typeof value === 'object') {
package/factory/possibleAttributes.js CHANGED
@@ -64,8 +64,6 @@ const possibleAttributes = {
64
64
  'high': 'high',
65
65
  'href': 'href',
66
66
  'hrefLang': 'hreflang',
67
- 'htmlFor': 'htmlfor',
68
- 'httpEquiv': 'httpequiv',
69
67
  'httpEquiv': 'http-equiv',
70
68
  'icon': 'icon',
71
69
  'id': 'id',
package/jtsx.config.example.js CHANGED
@@ -1,4 +1,10 @@
1
1
  export default {
2
+ // When true disables warnings when uses React camelCase attributes, like htmlFor instead of for xLinkHref instead of xlink:href
3
+ disableAttrWarnings: false,
4
+
5
+ // When true - rewrite react camelCase attributes into default HTML name style
6
+ rewriteReactAttrs: false,
7
+
2
8
  // Esbuild transform config https://esbuild.github.io/api/#transform
3
9
  esbuildTransformConfig: undefined,
4
10
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "jtsx-loader",
3
- "version": "0.1.1",
3
+ "version": "0.1.3",
4
4
  "main": "./loader/register.mjs",
5
5
  "type": "module",
6
6
  "imports": {
@@ -13,7 +13,13 @@
13
13
  "engines": {
14
14
  "node": ">=20.16 <21"
15
15
  },
16
- "keywords": ["jsx", "tsx", "loader", "html", "static"],
16
+ "keywords": [
17
+ "jsx",
18
+ "tsx",
19
+ "loader",
20
+ "html",
21
+ "static"
22
+ ],
17
23
  "author": "Dergachev Mihail <dergachev.mihail@gmail.com>",
18
24
  "license": "MIT",
19
25
  "description": "JSX and TSX loader that allows you to compile to static HTML",
package/example/pages/en.jsx DELETED
@@ -1,181 +0,0 @@
1
- import ComponentInner from '../components/Inner.tsx';
2
- import Layout from '../layouts/Layout.jsx';
3
-
4
- // const requestOnImport = await fetch(process.env.URL + '/api/401.json').then(r => r.json()).catch(e => e.message);
5
- // console.log('Build time request when component imported', requestOnImport);
6
-
7
- export default async ({ data }) => {
8
- // inline server request example
9
- // possible only if current server already running
10
- const inlineRequest = await fetch(process.env.URL + '/api/200.json').then(r => r.json()).catch(e => e.message);
11
-
12
- return <Layout title="JTSX Loader">
13
- <script __raw={ `window.addEventListener('load', () => {
14
- console.log('LOADED INLINE');
15
- });`}>
16
- </script>
17
-
18
- <script __raw={ `
19
- window.addEventListener('load', () => {
20
- console.log('Self Closing INLINE');
21
- })
22
- `} />
23
-
24
- <section>
25
- <div class="lang">
26
- <h1>JTSX Loader <small>v0.1.0</small></h1>
27
- <a href="/">Russian</a> / <a href="/en" class="is-active">English</a>
28
- </div>
29
-
30
- <h5>* Documentation under development</h5>
31
-
32
- <p><b>J</b>avaScript <b>T</b>ype<b>S</b>cript <b>X</b>ml — <code>.jsx</code> and <code>.tsx</code> file loader for <b>Node.js</b></p>
33
- <p>Allows you to write <b>JTSX</b> code and compile it into native HTML</p>
34
- <p>The purpose of developing this loader is to solve the problem of comfortable use of JSX as a template engine, without being tied to React</p>
35
- <p>JTSX files are transpiled using <a href="https://esbuild.github.io/" target="_blank">esbuild</a> — a reliable and very fast transpiler</p>
36
- <p>Only one dependency — esbuild</p>
37
- <p>For conversion, the <code>jsxFactory</code> function is used, which converts tag attributes, attributes and child elements into standard HTML</p>
38
- <p>The loader allows you to extend the transformation of JTSX files through configurations and self-written functions</p>
39
- <p>The loader also allows you to prevent caching when importing components, which makes it possible to comfortably use page reloading when changes are made and not restart the server that renders the component</p>
40
- <p>IMPORTANT: This project is NOT a replacement for React, Vue and their derivatives. If you need reactivity and thick clients, it is better to use the appropriate tools</p>
41
-
42
- <p><a href="https://github.com/dergachevm/jtsx-loader">Github</a></p>
43
- </section>
44
-
45
- <section>
46
- <h2>Installation, usage, requirements</h2>
47
- <h3>Installation</h3>
48
- <pre>npm install jtsx-loader</pre>
49
-
50
- <h3>Usage</h3>
51
- <p>Projects must be run via the --import command</p>
52
- <pre>node --import jtsx-loader ./server.js</pre>
53
-
54
- <h3>How to render a file</h3>
55
- <p>Let's write a simple index.jsx page component:</p>
56
- <pre __escape={`
57
- export default async ({ title }) => <html lang="en">
58
- <head>
59
- <title>{title}</title>
60
- </head>
61
- <body>
62
- <h1>{title}</h1>
63
- <p>
64
- Body content with array:
65
- {[0, 1, 2].map(n => <code>{n}</code>)}
66
- </p>
67
- </body>
68
- </html>;
69
- `}></pre>
70
- <p>Import the component via <code>import()</code>, the ?reload parameter is optional, used to prevent caching</p>
71
- <pre>
72
- const JSXComp = (await import('./index.jsx?reload')).default;
73
- </pre>
74
- <p>Call the imported component as a function passing the data object and output the result to the console</p>
75
- <pre>
76
- {`const rendered = await JSXComp({ data: renderCount });\nconsole.log(rendered);`}
77
- </pre>
78
-
79
- <p>A detailed example with saving the result to a file <a href="https://github.com/dergachevm/jtsx-loader/tree/master/example">here</a></p>
80
-
81
- <h3>Requirements</h3>
82
- <p>Minimum Node.js version - 20.16.0</p>
83
- </section>
84
-
85
- <section>
86
- <h2>Basic Examples</h2>
87
-
88
- <div class="examples">
89
- <div class="item">
90
- <h3>Native HTML Attributes</h3>
91
- <p>Only native HTML attributes are allowed</p>
92
-
93
- <p>React attributes are not supported by design and should never be used</p>
94
-
95
- <p>If you use React attributes, such as <code>className</code>,<br />
96
- a warning will be printed to the console, and the attribute will be rendered as is</p>
97
-
98
- <p>Other differences from standard JSX:</p>
99
-
100
- <ul>
101
- <li><code>__escape</code> attribute: used to output any escaped content</li>
102
- <li><code>__raw</code> attribute: renders a string into the tag content as is, for example useful for <code>script</code> tags and <code>style</code></li>
103
- <li>The JTSX file is passed the <code>_jsxUtils</code> object, which contains useful utilities. Instead of this object, you can pass any function you want and use it to extend the standard transformation</li>
104
- </ul>
105
- </div>
106
-
107
- <div class="item">
108
- <h3>All JavaScript capabilities that are used in regular JSX are available</h3>
109
- <p>IMPORTANT: all code is executed in the Node.js environment, so there is no browser DOM</p>
110
- <h4>Calculations</h4>
111
- <pre __escape={ '{(1 + 1 + 2 * 2) / 3}' }></pre>
112
- <p>Result: <code>{ (1 + 1 + 2 * 2) / 3 }</code></p>
113
-
114
- <h4>Node.js Standard Library</h4>
115
- <pre __escape={ '{Math.pow(9, 2)}' }></pre>
116
- <p>Result: <code>{ Math.pow(9, 2) }</code></p>
117
-
118
- <h4>Ternary expressions</h4>
119
- <pre __escape={ `1 > 2 ? <strong>Greater</strong> : 'Less'` }></pre>
120
- <p>Result: <code>{ 1 > 2 ? <strong>Greater</strong> : 'Less' }</code></p>
121
- <pre __escape={ `2 > 1 ? <strong>Greater</strong> : 'Less'` }></pre>
122
- <p>Result: <code>{ 2 > 1 ? <strong>Greater</strong> : 'Less' }</code></p>
123
-
124
- <h4>Array manipulation and component rendering</h4>
125
- <p>Renders components/tags with array data</p>
126
- <pre __escape={ '[0, 1, 2].map(num => <code>{num}</code>)' }></pre>
127
- <p>Result: { [0, 1, 2].map(el => <code>{ el }</code>) }</p>
128
-
129
- <h4>__escape</h4>
130
- <p>Output any escaped content</p>
131
- <pre __escape={ '<code __escape={\'<div>escaped</div>\'}></code>' }></pre>
132
- <p>Result: <code __escape={ '<div>escaped</div>' }></code></p>
133
- </div>
134
-
135
- <div class="item">
136
- <h3>Request inside the component via <code>fetch</code></h3>
137
- <p><code __escape={ `const inlineRequest = await fetch(process.env.URL + '/api/200.json').then(r => r.json()).catch(e => e.message);` }></code></p>
138
- <p>Called on every render</p>
139
- <p>If the internal server is called, it must be running before the render starts</p>
140
- <pre>
141
- Response: { JSON.stringify(inlineRequest, null, 4) }
142
- </pre>
143
- </div>
144
-
145
- <div class="item">
146
- <h3>Imported component</h3>
147
- <p></p>
148
- <div class="component-container">
149
- <ComponentInner lang="en" renderCount={ data } >
150
- <p><i special="CHILD 0">Child component 0</i></p>
151
- <p><i special="CHILD 1">Child component 1</i></p>
152
- </ComponentInner>
153
- </div>
154
- </div>
155
-
156
- <div class="item">
157
- <h3>Custom attributes and their processing</h3>
158
- <p>{ _jsxUtils.escapeHtml(`<input type="text" ac:custom="input"`) } is transformed into <code>data-ac-custom="input"</code></p>
159
- <p>The handler is written in jtsx.config.js</p>
160
-
161
- <div>
162
- <input type="text" ac:custom="input" value="ac:custom='input'" />
163
- </div>
164
- </div>
165
- </div>
166
- </section>
167
-
168
- <section>
169
- <h2>Authors</h2>
170
- <p><a href="mailto:dergachev.mihail@gmail.com">Dergachev Mikhail</a></p>
171
- <p><a href="https: //ancros.dev">https://ancros.dev</a></p>
172
- </section>
173
-
174
- <section>
175
- <h2>References</h2>
176
- <p><a href="https://esbuild.github.io/api/#jsx-factory">https://esbuild.github.io/api/# jsx-factory</a></p>
177
- <p><a href="https://lwebapp.com/en/post/custom-jsx">https://lwebapp.com/en/post/custom- jsx</a></p>
178
- <p><a href="https://nakedjsx.org/">https://nakedjsx.org/</a></p>
179
- </section>
180
- </Layout>
181
- }