jtsx-loader 0.1.9 → 0.1.10

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 (2) hide show
  1. package/README.md +189 -12
  2. package/package.json +11 -9
package/README.md CHANGED
@@ -1,24 +1,201 @@
1
+ # jtsx-loader
1
2
 
2
- \* Documentation under development
3
+ > JavaScript / TypeScript / XML — `.jsx` and `.tsx` file loader for Node.js
3
4
 
4
- JavaScript TypeScript Xml — .jsx and .tsx file loader for Node.js
5
+ `jtsx-loader` allows you to import **JSX / TSX files directly into Node.js** and use them as **async functions**. It is especially useful as a **JSX-based template engine** without React, Vue, or any client-side framework.
5
6
 
6
- Allows you to write JTSX code and compile it into native HTML
7
+ ---
7
8
 
8
- 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
9
+ ## ✨ Features
9
10
 
10
- JTSX files are transpiled using esbuild — a reliable and very fast transpiler
11
+ * Import `.jsx` / `.tsx` files directly in Node.js
12
+ * Use JSX components as **async functions**
13
+ * Full async/await support inside templates
14
+ * Extremely fast transpilation via **esbuild**
15
+ * Minimal footprint — **only one dependency**
16
+ * Optional import cache disabling (great for dev hot-reload)
17
+ * Extensible JSX → HTML transformation pipeline
18
+ * No React, no VDOM, no hydration — just server-side rendering
11
19
 
12
- Only one dependency — esbuild
20
+ ---
13
21
 
14
- For conversion, the jsxFactory function is used, which converts tag attributes, attributes and child elements into standard HTML
22
+ ## ⚙️ Requirements
15
23
 
16
- The loader allows you to extend the transformation of JTSX files through configurations and self-written functions
24
+ * **Node.js v22+**
25
+ * ESM (`"type": "module"`)
17
26
 
18
- Also loader 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
27
+ ---
19
28
 
20
- If you find a bug or want to suggest improvements to the loader, create an issue on [github](https://github.com/dergachevm/jtsx-loader/issues)
29
+ ## 🚀 Quick Start
21
30
 
22
- 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
31
+ ### 1. Initialize project
23
32
 
24
- [Detailed documentation with examples](https://jtsx.ancros.dev)
33
+ ```bash
34
+ npm init -y
35
+ ```
36
+
37
+ ### 2. Install dependencies
38
+
39
+ ```bash
40
+ npm i jtsx-loader express nodemon
41
+ ```
42
+
43
+ ### 3. Configure `package.json`
44
+
45
+ Enable ESM and add scripts:
46
+
47
+ ```json
48
+ {
49
+ "type": "module",
50
+ "scripts": {
51
+ "start": "node --import jtsx-loader app.js",
52
+ "dev": "nodemon --watch ./*.* --import jtsx-loader app.js"
53
+ }
54
+ }
55
+ ```
56
+
57
+ Example full `package.json`:
58
+
59
+ ```json
60
+ {
61
+ "name": "test",
62
+ "version": "1.0.0",
63
+ "type": "module",
64
+ "scripts": {
65
+ "start": "node --import jtsx-loader app.js",
66
+ "dev": "nodemon --watch ./*.* --import jtsx-loader app.js"
67
+ },
68
+ "dependencies": {
69
+ "express": "^5.2.1",
70
+ "jtsx-loader": "^0.1.9",
71
+ "nodemon": "^3.1.11"
72
+ }
73
+ }
74
+ ```
75
+
76
+ ---
77
+
78
+ ## 🧠 Example
79
+
80
+ ### `app.js`
81
+
82
+ ```js
83
+ import express from 'express';
84
+ import Component from './Component.jsx';
85
+
86
+ const app = express();
87
+ const port = 3000;
88
+
89
+ app.use('/', async (req, res) => {
90
+ if (!req.get('Accept')?.includes('text/html')) {
91
+ return res.status(404).end();
92
+ }
93
+
94
+ const html = await Component({ message: 'Hello JSX' });
95
+ return res.send(`<!DOCTYPE html>${html}`);
96
+ });
97
+
98
+ app.listen(port, () => {
99
+ console.log(`SERVER: http://localhost:${port}`);
100
+ });
101
+ ```
102
+
103
+ ---
104
+
105
+ ### `Component.jsx`
106
+
107
+ ```jsx
108
+ const Component = async ({ message }) => {
109
+ const exampleObject = { example: 'object' };
110
+
111
+ return (
112
+ <>
113
+ <html>
114
+ <head>
115
+ <title>{message}</title>
116
+ </head>
117
+ <body>
118
+ <h2>{message}</h2>
119
+
120
+ <pre>{JSON.stringify(exampleObject, null, 2)}</pre>
121
+
122
+ <script>{`
123
+ window.serverObject = ${JSON.stringify(exampleObject)};
124
+ console.log(window.serverObject);
125
+ `}</script>
126
+ </body>
127
+ </html>
128
+ </>
129
+ );
130
+ };
131
+
132
+ export default Component;
133
+ ```
134
+
135
+ ---
136
+
137
+ ### 4. Run dev server
138
+
139
+ ```bash
140
+ npm run dev
141
+ ```
142
+
143
+ Open: **[http://localhost:3000/](http://localhost:3000/)**
144
+
145
+ ---
146
+
147
+ ## 🧩 How It Works
148
+
149
+ * `.jsx` / `.tsx` files are transpiled using **esbuild**
150
+ * JSX is converted to HTML via a configurable `jsxFactory`
151
+ * Components are regular async functions returning strings
152
+ * No virtual DOM, no runtime client JS required
153
+
154
+ ---
155
+
156
+ ## 🔌 Extensibility
157
+
158
+ `jtsx-loader` supports:
159
+
160
+ * Custom JSX factories
161
+ * Transformation hooks
162
+ * Import cache control (useful for live reload in dev mode)
163
+
164
+ This makes it suitable for:
165
+
166
+ * SSR HTML rendering
167
+ * Email templates
168
+ * Static page generation
169
+ * Lightweight CMS or admin panels
170
+
171
+ ---
172
+
173
+ ## ❗ Important Notes
174
+
175
+ > **This is NOT a replacement for React, Vue, or similar frameworks.**
176
+
177
+ If you need:
178
+
179
+ * reactivity
180
+ * stateful UI
181
+ * client-side hydration
182
+
183
+ use a proper frontend framework.
184
+
185
+ `jtsx-loader` is designed for **simple, fast, server-side rendering**.
186
+
187
+ ---
188
+
189
+ ## 🐞 Issues & Feedback
190
+
191
+ Found a bug or have an idea?
192
+
193
+ 👉 [https://github.com/dergachevm/jtsx-loader/issues](https://github.com/dergachevm/jtsx-loader/issues)
194
+
195
+ ---
196
+
197
+ ## 📚 More Documentation
198
+
199
+ Extended documentation and examples:
200
+
201
+ 👉 [https://jtsx.ancros.dev](https://jtsx.ancros.dev)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "jtsx-loader",
3
- "version": "0.1.9",
3
+ "version": "0.1.10",
4
4
  "main": "./loader/register.mjs",
5
5
  "type": "module",
6
6
  "imports": {
@@ -12,28 +12,30 @@
12
12
  "patch": "npm version patch && npm publish"
13
13
  },
14
14
  "engines": {
15
- "node": ">=20.16 <23"
15
+ "node": ">=20.16 <25"
16
16
  },
17
17
  "keywords": [
18
18
  "jsx",
19
19
  "tsx",
20
20
  "loader",
21
21
  "html",
22
- "static"
22
+ "static",
23
+ "node",
24
+ "template engine"
23
25
  ],
24
26
  "author": "Dergachev Mihail <dergachev.mihail@gmail.com>",
25
27
  "license": "MIT",
26
- "description": "JSX and TSX loader that allows you to compile to static HTML",
28
+ "description": "Loader for node.js that allows you to load JSX and TSX files and use it as functions",
27
29
  "repository": {
28
30
  "type": "git",
29
- "url": "git+https://github.com/dergachevm/jtsx-loader"
31
+ "url": "git+https://github.com/dergachevm/jtsx-loader.git"
30
32
  },
31
33
  "dependencies": {
32
- "esbuild": "^0.25.5"
34
+ "esbuild": "^0.27.1"
33
35
  },
34
36
  "devDependencies": {
35
- "express": "^5.1.0",
36
- "htmlfy": "^0.7.5",
37
- "nodemon": "^3.1.10"
37
+ "express": "^5.2.1",
38
+ "htmlfy": "^1.0.1",
39
+ "nodemon": "^3.1.11"
38
40
  }
39
41
  }