@alepha/react 0.14.2 → 0.14.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.
- package/dist/auth/index.js +2 -2
- package/dist/auth/index.js.map +1 -1
- package/dist/core/index.d.ts +4 -0
- package/dist/core/index.d.ts.map +1 -1
- package/dist/core/index.js +7 -4
- package/dist/core/index.js.map +1 -1
- package/dist/head/index.d.ts +17 -17
- package/dist/head/index.d.ts.map +1 -1
- package/dist/head/index.js +2 -1
- package/dist/head/index.js.map +1 -1
- package/dist/router/index.d.ts.map +1 -1
- package/dist/router/index.js +2 -2
- package/dist/router/index.js.map +1 -1
- package/package.json +3 -3
- package/src/auth/__tests__/$auth.spec.ts +188 -0
- package/src/core/__tests__/Router.spec.tsx +169 -0
- package/src/core/hooks/useAction.browser.spec.tsx +569 -0
- package/src/core/hooks/useAction.ts +11 -0
- package/src/form/hooks/useForm.browser.spec.tsx +366 -0
- package/src/head/__tests__/expandSeo.spec.ts +203 -0
- package/src/head/__tests__/page-head.spec.ts +39 -0
- package/src/head/__tests__/seo-head.spec.ts +121 -0
- package/src/head/hooks/useHead.spec.tsx +288 -0
- package/src/head/index.ts +2 -1
- package/src/head/providers/BrowserHeadProvider.browser.spec.ts +271 -0
- package/src/head/providers/ServerHeadProvider.spec.ts +163 -0
- package/src/i18n/__tests__/integration.spec.tsx +239 -0
- package/src/i18n/components/Localize.spec.tsx +357 -0
- package/src/i18n/hooks/useI18n.browser.spec.tsx +438 -0
- package/src/i18n/providers/I18nProvider.spec.ts +389 -0
- package/src/router/primitives/$page.browser.spec.tsx +702 -0
- package/src/router/primitives/$page.spec.tsx +702 -0
- package/src/router/providers/ReactServerProvider.spec.tsx +316 -0
- package/src/router/providers/ReactServerProvider.ts +4 -3
|
@@ -0,0 +1,316 @@
|
|
|
1
|
+
import { test } from "vitest";
|
|
2
|
+
|
|
3
|
+
// Simple mock for testing template functionality without full Alepha setup
|
|
4
|
+
class MockReactServerProvider {
|
|
5
|
+
protected readonly env = { REACT_ROOT_ID: "root" };
|
|
6
|
+
protected readonly ROOT_DIV_REGEX = new RegExp(
|
|
7
|
+
`<div([^>]*)\\s+id=["']${this.env.REACT_ROOT_ID}["']([^>]*)>(.*?)<\\/div>`,
|
|
8
|
+
"is",
|
|
9
|
+
);
|
|
10
|
+
protected preprocessedTemplate: any = null;
|
|
11
|
+
|
|
12
|
+
public preprocessTemplate(template: string) {
|
|
13
|
+
// Find the body close tag for script injection
|
|
14
|
+
const bodyCloseMatch = template.match(/<\/body>/i);
|
|
15
|
+
const bodyCloseIndex = bodyCloseMatch?.index ?? template.length;
|
|
16
|
+
|
|
17
|
+
const beforeScript = template.substring(0, bodyCloseIndex);
|
|
18
|
+
const afterScript = template.substring(bodyCloseIndex);
|
|
19
|
+
|
|
20
|
+
// Check if there's an existing root div
|
|
21
|
+
const rootDivMatch = beforeScript.match(this.ROOT_DIV_REGEX);
|
|
22
|
+
|
|
23
|
+
if (rootDivMatch) {
|
|
24
|
+
// Split around the existing root div content
|
|
25
|
+
const beforeDiv = beforeScript.substring(0, rootDivMatch.index!);
|
|
26
|
+
const afterDivStart = rootDivMatch.index! + rootDivMatch[0].length;
|
|
27
|
+
const afterDiv = beforeScript.substring(afterDivStart);
|
|
28
|
+
|
|
29
|
+
const beforeApp = `${beforeDiv}<div${rootDivMatch[1]} id="${this.env.REACT_ROOT_ID}"${rootDivMatch[2]}>`;
|
|
30
|
+
const afterApp = `</div>${afterDiv}`;
|
|
31
|
+
|
|
32
|
+
return { beforeApp, afterApp, beforeScript: "", afterScript };
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// No existing root div, find body tag to inject new div
|
|
36
|
+
const bodyMatch = beforeScript.match(/<body([^>]*)>/i);
|
|
37
|
+
if (bodyMatch) {
|
|
38
|
+
const beforeBody = beforeScript.substring(
|
|
39
|
+
0,
|
|
40
|
+
bodyMatch.index! + bodyMatch[0].length,
|
|
41
|
+
);
|
|
42
|
+
const afterBody = beforeScript.substring(
|
|
43
|
+
bodyMatch.index! + bodyMatch[0].length,
|
|
44
|
+
);
|
|
45
|
+
|
|
46
|
+
const beforeApp = `${beforeBody}<div id="${this.env.REACT_ROOT_ID}">`;
|
|
47
|
+
const afterApp = `</div>${afterBody}`;
|
|
48
|
+
|
|
49
|
+
return { beforeApp, afterApp, beforeScript: "", afterScript };
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// Fallback: no body tag found, just wrap everything
|
|
53
|
+
return {
|
|
54
|
+
beforeApp: `<div id="${this.env.REACT_ROOT_ID}">`,
|
|
55
|
+
afterApp: `</div>`,
|
|
56
|
+
beforeScript,
|
|
57
|
+
afterScript,
|
|
58
|
+
};
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
public fillTemplate(response: { html: string }, app: string, script: string) {
|
|
62
|
+
if (!this.preprocessedTemplate) {
|
|
63
|
+
// Fallback to old logic if preprocessing failed
|
|
64
|
+
this.preprocessedTemplate = this.preprocessTemplate(response.html);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
// Pure concatenation - no regex replacements needed
|
|
68
|
+
response.html =
|
|
69
|
+
this.preprocessedTemplate.beforeApp +
|
|
70
|
+
app +
|
|
71
|
+
this.preprocessedTemplate.afterApp +
|
|
72
|
+
script +
|
|
73
|
+
this.preprocessedTemplate.afterScript;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
const setup = (env?: any) => {
|
|
78
|
+
const provider = new MockReactServerProvider();
|
|
79
|
+
if (env?.REACT_ROOT_ID) {
|
|
80
|
+
(provider as any).env.REACT_ROOT_ID = env.REACT_ROOT_ID;
|
|
81
|
+
(provider as any).ROOT_DIV_REGEX = new RegExp(
|
|
82
|
+
`<div([^>]*)\\s+id=["']${env.REACT_ROOT_ID}["']([^>]*)>(.*?)<\\/div>`,
|
|
83
|
+
"is",
|
|
84
|
+
);
|
|
85
|
+
}
|
|
86
|
+
return { provider };
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
test("ReactServerProvider - preprocessTemplate with existing root div", async ({
|
|
90
|
+
expect,
|
|
91
|
+
}) => {
|
|
92
|
+
const { provider } = setup();
|
|
93
|
+
|
|
94
|
+
const template = `<!DOCTYPE html>
|
|
95
|
+
<html>
|
|
96
|
+
<head><title>Test</title></head>
|
|
97
|
+
<body>
|
|
98
|
+
<div id="root">existing content</div>
|
|
99
|
+
</body>
|
|
100
|
+
</html>`;
|
|
101
|
+
|
|
102
|
+
const preprocessed = provider.preprocessTemplate(template);
|
|
103
|
+
|
|
104
|
+
expect(preprocessed.beforeApp).toBe(
|
|
105
|
+
`<!DOCTYPE html>
|
|
106
|
+
<html>
|
|
107
|
+
<head><title>Test</title></head>
|
|
108
|
+
<body>
|
|
109
|
+
<div id="root">`,
|
|
110
|
+
);
|
|
111
|
+
expect(preprocessed.afterApp).toBe(`</div>
|
|
112
|
+
`);
|
|
113
|
+
expect(preprocessed.beforeScript).toBe("");
|
|
114
|
+
expect(preprocessed.afterScript).toBe(`</body>
|
|
115
|
+
</html>`);
|
|
116
|
+
});
|
|
117
|
+
|
|
118
|
+
test("ReactServerProvider - preprocessTemplate without root div", async ({
|
|
119
|
+
expect,
|
|
120
|
+
}) => {
|
|
121
|
+
const { provider } = setup();
|
|
122
|
+
|
|
123
|
+
const template = `<!DOCTYPE html>
|
|
124
|
+
<html>
|
|
125
|
+
<head><title>Test</title></head>
|
|
126
|
+
<body>
|
|
127
|
+
<h1>Welcome</h1>
|
|
128
|
+
</body>
|
|
129
|
+
</html>`;
|
|
130
|
+
|
|
131
|
+
const preprocessed = provider.preprocessTemplate(template);
|
|
132
|
+
|
|
133
|
+
expect(preprocessed.beforeApp).toBe(
|
|
134
|
+
`<!DOCTYPE html>
|
|
135
|
+
<html>
|
|
136
|
+
<head><title>Test</title></head>
|
|
137
|
+
<body><div id="root">`,
|
|
138
|
+
);
|
|
139
|
+
expect(preprocessed.afterApp).toBe(`</div>
|
|
140
|
+
<h1>Welcome</h1>
|
|
141
|
+
`);
|
|
142
|
+
expect(preprocessed.beforeScript).toBe("");
|
|
143
|
+
expect(preprocessed.afterScript).toBe(`</body>
|
|
144
|
+
</html>`);
|
|
145
|
+
});
|
|
146
|
+
|
|
147
|
+
test("ReactServerProvider - preprocessTemplate with custom root ID", async ({
|
|
148
|
+
expect,
|
|
149
|
+
}) => {
|
|
150
|
+
const { provider } = setup({ REACT_ROOT_ID: "app" });
|
|
151
|
+
|
|
152
|
+
const template = `<!DOCTYPE html>
|
|
153
|
+
<html>
|
|
154
|
+
<head><title>Test</title></head>
|
|
155
|
+
<body>
|
|
156
|
+
<div id="app">existing content</div>
|
|
157
|
+
</body>
|
|
158
|
+
</html>`;
|
|
159
|
+
|
|
160
|
+
const preprocessed = provider.preprocessTemplate(template);
|
|
161
|
+
|
|
162
|
+
expect(preprocessed.beforeApp).toBe(
|
|
163
|
+
`<!DOCTYPE html>
|
|
164
|
+
<html>
|
|
165
|
+
<head><title>Test</title></head>
|
|
166
|
+
<body>
|
|
167
|
+
<div id="app">`,
|
|
168
|
+
);
|
|
169
|
+
expect(preprocessed.afterApp).toBe(`</div>
|
|
170
|
+
`);
|
|
171
|
+
});
|
|
172
|
+
|
|
173
|
+
test("ReactServerProvider - preprocessTemplate with root div with attributes", async ({
|
|
174
|
+
expect,
|
|
175
|
+
}) => {
|
|
176
|
+
const { provider } = setup();
|
|
177
|
+
|
|
178
|
+
const template = `<!DOCTYPE html>
|
|
179
|
+
<html>
|
|
180
|
+
<body>
|
|
181
|
+
<div class="container" id="root" data-test="true">existing content</div>
|
|
182
|
+
</body>
|
|
183
|
+
</html>`;
|
|
184
|
+
|
|
185
|
+
const preprocessed = provider.preprocessTemplate(template);
|
|
186
|
+
|
|
187
|
+
expect(preprocessed.beforeApp).toBe(
|
|
188
|
+
`<!DOCTYPE html>
|
|
189
|
+
<html>
|
|
190
|
+
<body>
|
|
191
|
+
<div class="container" id="root" data-test="true">`,
|
|
192
|
+
);
|
|
193
|
+
expect(preprocessed.afterApp).toBe(`</div>
|
|
194
|
+
`);
|
|
195
|
+
});
|
|
196
|
+
|
|
197
|
+
test("ReactServerProvider - preprocessTemplate fallback (no body tag)", async ({
|
|
198
|
+
expect,
|
|
199
|
+
}) => {
|
|
200
|
+
const { provider } = setup();
|
|
201
|
+
|
|
202
|
+
const template = `<html><div>content</div></html>`;
|
|
203
|
+
|
|
204
|
+
const preprocessed = provider.preprocessTemplate(template);
|
|
205
|
+
|
|
206
|
+
expect(preprocessed.beforeApp).toBe(`<div id="root">`);
|
|
207
|
+
expect(preprocessed.afterApp).toBe(`</div>`);
|
|
208
|
+
expect(preprocessed.beforeScript).toBe(`<html><div>content</div></html>`);
|
|
209
|
+
expect(preprocessed.afterScript).toBe(``);
|
|
210
|
+
});
|
|
211
|
+
|
|
212
|
+
test("ReactServerProvider - fillTemplate concatenation", async ({ expect }) => {
|
|
213
|
+
const { provider } = setup();
|
|
214
|
+
|
|
215
|
+
const template = `<!DOCTYPE html>
|
|
216
|
+
<html>
|
|
217
|
+
<head><title>Test</title></head>
|
|
218
|
+
<body>
|
|
219
|
+
<div id="root">existing</div>
|
|
220
|
+
</body>
|
|
221
|
+
</html>`;
|
|
222
|
+
|
|
223
|
+
// Preprocess the template
|
|
224
|
+
const preprocessed = provider.preprocessTemplate(template);
|
|
225
|
+
(provider as any).preprocessedTemplate = preprocessed;
|
|
226
|
+
|
|
227
|
+
const response = { html: "" };
|
|
228
|
+
const app = "<h1>Hello World</h1>";
|
|
229
|
+
const script = '<script>window.__ssr={"test":true}</script>';
|
|
230
|
+
|
|
231
|
+
provider.fillTemplate(response, app, script);
|
|
232
|
+
|
|
233
|
+
const expected = `<!DOCTYPE html>
|
|
234
|
+
<html>
|
|
235
|
+
<head><title>Test</title></head>
|
|
236
|
+
<body>
|
|
237
|
+
<div id="root"><h1>Hello World</h1></div>
|
|
238
|
+
<script>window.__ssr={"test":true}</script></body>
|
|
239
|
+
</html>`;
|
|
240
|
+
|
|
241
|
+
expect(response.html).toBe(expected);
|
|
242
|
+
});
|
|
243
|
+
|
|
244
|
+
test("ReactServerProvider - fillTemplate without preprocessed template (fallback)", async ({
|
|
245
|
+
expect,
|
|
246
|
+
}) => {
|
|
247
|
+
const { provider } = setup();
|
|
248
|
+
|
|
249
|
+
const template = `<!DOCTYPE html>
|
|
250
|
+
<html>
|
|
251
|
+
<body>
|
|
252
|
+
<div id="root">existing</div>
|
|
253
|
+
</body>
|
|
254
|
+
</html>`;
|
|
255
|
+
|
|
256
|
+
const response = { html: template };
|
|
257
|
+
const app = "<h1>Hello World</h1>";
|
|
258
|
+
const script = '<script>window.__ssr={"test":true}</script>';
|
|
259
|
+
|
|
260
|
+
// Don't set preprocessedTemplate to test fallback
|
|
261
|
+
(provider as any).preprocessedTemplate = null;
|
|
262
|
+
|
|
263
|
+
provider.fillTemplate(response, app, script);
|
|
264
|
+
|
|
265
|
+
const expected = `<!DOCTYPE html>
|
|
266
|
+
<html>
|
|
267
|
+
<body>
|
|
268
|
+
<div id="root"><h1>Hello World</h1></div>
|
|
269
|
+
<script>window.__ssr={"test":true}</script></body>
|
|
270
|
+
</html>`;
|
|
271
|
+
|
|
272
|
+
expect(response.html).toBe(expected);
|
|
273
|
+
});
|
|
274
|
+
|
|
275
|
+
test("ReactServerProvider - fillTemplate performance comparison", async ({
|
|
276
|
+
expect,
|
|
277
|
+
}) => {
|
|
278
|
+
const { provider } = setup();
|
|
279
|
+
|
|
280
|
+
const template = `<!DOCTYPE html>
|
|
281
|
+
<html>
|
|
282
|
+
<head><title>Performance Test</title></head>
|
|
283
|
+
<body>
|
|
284
|
+
<div id="root">existing content</div>
|
|
285
|
+
<script>console.log('existing');</script>
|
|
286
|
+
</body>
|
|
287
|
+
</html>`;
|
|
288
|
+
|
|
289
|
+
const app = "<div><h1>Hello World</h1><p>This is a test</p></div>";
|
|
290
|
+
const script = '<script>window.__ssr={"data":"value","count":42}</script>';
|
|
291
|
+
|
|
292
|
+
// Test with preprocessing (should be faster)
|
|
293
|
+
const preprocessed = provider.preprocessTemplate(template);
|
|
294
|
+
(provider as any).preprocessedTemplate = preprocessed;
|
|
295
|
+
|
|
296
|
+
const response1 = { html: "" };
|
|
297
|
+
const start1 = performance.now();
|
|
298
|
+
provider.fillTemplate(response1, app, script);
|
|
299
|
+
const time1 = performance.now() - start1;
|
|
300
|
+
|
|
301
|
+
// Test fallback without preprocessing (should work but potentially slower)
|
|
302
|
+
(provider as any).preprocessedTemplate = null;
|
|
303
|
+
const response2 = { html: template };
|
|
304
|
+
const start2 = performance.now();
|
|
305
|
+
provider.fillTemplate(response2, app, script);
|
|
306
|
+
const time2 = performance.now() - start2;
|
|
307
|
+
|
|
308
|
+
// Both should produce the same result
|
|
309
|
+
expect(response1.html).toBe(response2.html);
|
|
310
|
+
|
|
311
|
+
// The result should contain the app content
|
|
312
|
+
expect(response1.html).toContain("<h1>Hello World</h1>");
|
|
313
|
+
expect(response1.html).toContain(
|
|
314
|
+
'<script>window.__ssr={"data":"value","count":42}</script>',
|
|
315
|
+
);
|
|
316
|
+
});
|
|
@@ -2,7 +2,7 @@ import { existsSync } from "node:fs";
|
|
|
2
2
|
import { join } from "node:path";
|
|
3
3
|
import { $atom, $env, $hook, $inject, $use, Alepha, AlephaError, type Static, t, } from "alepha";
|
|
4
4
|
import { $logger } from "alepha/logger";
|
|
5
|
-
import { type ServerHandler, ServerRouterProvider, ServerTimingProvider, } from "alepha/server";
|
|
5
|
+
import { type ServerHandler, ServerProvider, ServerRouterProvider, ServerTimingProvider, } from "alepha/server";
|
|
6
6
|
import { ServerLinksProvider } from "alepha/server/links";
|
|
7
7
|
import { ServerStaticProvider } from "alepha/server/static";
|
|
8
8
|
import { renderToString } from "react-dom/server";
|
|
@@ -216,9 +216,10 @@ export class ReactServerProvider {
|
|
|
216
216
|
return;
|
|
217
217
|
}
|
|
218
218
|
|
|
219
|
-
this.
|
|
219
|
+
const env = this.alepha.store.get("env") ?? {}
|
|
220
|
+
const url = `http://localhost:${env.SERVER_PORT ?? "5173"}`;
|
|
220
221
|
|
|
221
|
-
|
|
222
|
+
this.log.info("SSR (dev) OK", { url });
|
|
222
223
|
|
|
223
224
|
await this.registerPages(() =>
|
|
224
225
|
fetch(`${url}/index.html`)
|