jtsx-loader 0.1.0 → 0.1.1
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.
- package/README.md +5 -2
- package/example/pages/en.jsx +42 -0
- package/example/pages/index.jsx +29 -0
- package/example/pages/test.jsx +9 -0
- package/example/server.js +3 -3
- package/package.json +9 -2
package/README.md
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
\* Documentation under development
|
|
2
|
+
|
|
2
3
|
JavaScript TypeScript Xml — .jsx and .tsx file loader for Node.js
|
|
3
4
|
|
|
4
5
|
Allows you to write JTSX code and compile it into native HTML
|
|
@@ -15,4 +16,6 @@ The loader allows you to extend the transformation of JTSX files through configu
|
|
|
15
16
|
|
|
16
17
|
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
|
|
17
18
|
|
|
18
|
-
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
|
|
19
|
+
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
|
|
20
|
+
|
|
21
|
+
More info https://jtsx.ancros.dev
|
package/example/pages/en.jsx
CHANGED
|
@@ -38,6 +38,48 @@ export default async ({ data }) => {
|
|
|
38
38
|
<p>The loader allows you to extend the transformation of JTSX files through configurations and self-written functions</p>
|
|
39
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
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>
|
|
41
83
|
</section>
|
|
42
84
|
|
|
43
85
|
<section>
|
package/example/pages/index.jsx
CHANGED
|
@@ -38,6 +38,8 @@ export default async ({ data }) => {
|
|
|
38
38
|
<p>Загрузчик позволяет расширить преобразования JTSX файлов через конфигурации и самостоятельно написанные функции</p>
|
|
39
39
|
<p>Так же загрузчик позволяет предотвратить кеширование при импорте компонентов, что дает возможность комфортно использовать перезагрузку страницы при изменениях и не перезапускать сервер, которые рендерит компонент</p>
|
|
40
40
|
<p>ВАЖНО: Данный загрузчик это НЕ замена React, Vue и их производных. Если вам нужна реактивность и толстые клиенты, то лучше использовать соответствующие инструменты</p>
|
|
41
|
+
|
|
42
|
+
<p><a href="https://github.com/dergachevm/jtsx-loader">Github</a></p>
|
|
41
43
|
</section>
|
|
42
44
|
|
|
43
45
|
<section>
|
|
@@ -49,6 +51,33 @@ export default async ({ data }) => {
|
|
|
49
51
|
<p>Проекты необходимо запускать через команду --import</p>
|
|
50
52
|
<pre>node --import jtsx-loader ./server.js</pre>
|
|
51
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
|
+
|
|
52
81
|
<h3>Требования</h3>
|
|
53
82
|
<p>Минимальная версия Node.js - 20.16.0</p>
|
|
54
83
|
</section>
|
package/example/server.js
CHANGED
|
@@ -34,7 +34,7 @@ const render = async (page) => {
|
|
|
34
34
|
|
|
35
35
|
//INFO: The ?reload parameter is required in development mode to prevent import caching
|
|
36
36
|
const JSXComp = (await import('./pages/' + fileName + '?reload')).default;
|
|
37
|
-
let rendered = await JSXComp({ data: renderCount });
|
|
37
|
+
let rendered = await JSXComp({ data: renderCount, title: 'Hello' });
|
|
38
38
|
/* rendered = rendered + `<style>
|
|
39
39
|
body {
|
|
40
40
|
color: #fff;
|
|
@@ -57,9 +57,9 @@ router.get('/', async (req, res) => {
|
|
|
57
57
|
return res.send(await render());
|
|
58
58
|
});
|
|
59
59
|
|
|
60
|
-
router.get('
|
|
60
|
+
router.get('/:page', async (req, res) => {
|
|
61
61
|
renderCount++;
|
|
62
|
-
return res.send(await render(
|
|
62
|
+
return res.send(await render(req.params.page));
|
|
63
63
|
});
|
|
64
64
|
|
|
65
65
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "jtsx-loader",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"main": "./loader/register.mjs",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"imports": {
|
|
@@ -10,10 +10,17 @@
|
|
|
10
10
|
"start": "node --import ./loader/register.mjs ./example/server.js",
|
|
11
11
|
"dev": "nodemon --import ./loader/register.mjs ./example/server.js"
|
|
12
12
|
},
|
|
13
|
-
"
|
|
13
|
+
"engines": {
|
|
14
|
+
"node": ">=20.16 <21"
|
|
15
|
+
},
|
|
16
|
+
"keywords": ["jsx", "tsx", "loader", "html", "static"],
|
|
14
17
|
"author": "Dergachev Mihail <dergachev.mihail@gmail.com>",
|
|
15
18
|
"license": "MIT",
|
|
16
19
|
"description": "JSX and TSX loader that allows you to compile to static HTML",
|
|
20
|
+
"repository": {
|
|
21
|
+
"type": "git",
|
|
22
|
+
"url": "git+https://github.com/dergachevm/jtsx-loader"
|
|
23
|
+
},
|
|
17
24
|
"dependencies": {
|
|
18
25
|
"esbuild": "^0.23.1"
|
|
19
26
|
},
|