zero-query 1.1.1 → 1.2.0
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/LICENSE +21 -21
- package/README.md +2 -0
- package/cli/args.js +33 -33
- package/cli/commands/build-api.js +443 -442
- package/cli/commands/build.js +254 -247
- package/cli/commands/bundle.js +1228 -1224
- package/cli/commands/create.js +137 -121
- package/cli/commands/dev/devtools/index.js +56 -56
- package/cli/commands/dev/devtools/js/components.js +49 -49
- package/cli/commands/dev/devtools/js/core.js +423 -423
- package/cli/commands/dev/devtools/js/elements.js +421 -421
- package/cli/commands/dev/devtools/js/network.js +166 -166
- package/cli/commands/dev/devtools/js/performance.js +73 -73
- package/cli/commands/dev/devtools/js/router.js +105 -105
- package/cli/commands/dev/devtools/js/source.js +132 -132
- package/cli/commands/dev/devtools/js/stats.js +35 -35
- package/cli/commands/dev/devtools/js/tabs.js +79 -79
- package/cli/commands/dev/devtools/panel.html +95 -95
- package/cli/commands/dev/devtools/styles.css +244 -244
- package/cli/commands/dev/index.js +107 -107
- package/cli/commands/dev/logger.js +75 -75
- package/cli/commands/dev/overlay.js +858 -858
- package/cli/commands/dev/server.js +220 -220
- package/cli/commands/dev/validator.js +94 -94
- package/cli/commands/dev/watcher.js +172 -172
- package/cli/help.js +114 -112
- package/cli/index.js +52 -52
- package/cli/scaffold/default/LICENSE +21 -21
- package/cli/scaffold/default/app/app.js +207 -207
- package/cli/scaffold/default/app/components/about.js +201 -201
- package/cli/scaffold/default/app/components/api-demo.js +143 -143
- package/cli/scaffold/default/app/components/contact-card.js +231 -231
- package/cli/scaffold/default/app/components/contacts/contacts.css +706 -706
- package/cli/scaffold/default/app/components/contacts/contacts.html +200 -200
- package/cli/scaffold/default/app/components/contacts/contacts.js +196 -196
- package/cli/scaffold/default/app/components/counter.js +127 -127
- package/cli/scaffold/default/app/components/home.js +249 -249
- package/cli/scaffold/default/app/components/not-found.js +16 -16
- package/cli/scaffold/default/app/components/playground/playground.css +115 -115
- package/cli/scaffold/default/app/components/playground/playground.html +161 -161
- package/cli/scaffold/default/app/components/playground/playground.js +116 -116
- package/cli/scaffold/default/app/components/todos.js +225 -225
- package/cli/scaffold/default/app/components/toolkit/toolkit.css +97 -97
- package/cli/scaffold/default/app/components/toolkit/toolkit.html +146 -146
- package/cli/scaffold/default/app/components/toolkit/toolkit.js +280 -280
- package/cli/scaffold/default/app/routes.js +15 -15
- package/cli/scaffold/default/app/store.js +101 -101
- package/cli/scaffold/default/global.css +552 -552
- package/cli/scaffold/default/index.html +99 -99
- package/cli/scaffold/minimal/app/app.js +85 -85
- package/cli/scaffold/minimal/app/components/about.js +68 -68
- package/cli/scaffold/minimal/app/components/counter.js +122 -122
- package/cli/scaffold/minimal/app/components/home.js +68 -68
- package/cli/scaffold/minimal/app/components/not-found.js +16 -16
- package/cli/scaffold/minimal/app/routes.js +9 -9
- package/cli/scaffold/minimal/app/store.js +36 -36
- package/cli/scaffold/minimal/global.css +300 -300
- package/cli/scaffold/minimal/index.html +44 -44
- package/cli/scaffold/ssr/app/app.js +41 -41
- package/cli/scaffold/ssr/app/components/about.js +55 -55
- package/cli/scaffold/ssr/app/components/blog/index.js +65 -65
- package/cli/scaffold/ssr/app/components/blog/post.js +86 -86
- package/cli/scaffold/ssr/app/components/home.js +37 -37
- package/cli/scaffold/ssr/app/components/not-found.js +15 -15
- package/cli/scaffold/ssr/app/routes.js +8 -8
- package/cli/scaffold/ssr/global.css +228 -228
- package/cli/scaffold/ssr/index.html +37 -37
- package/cli/scaffold/ssr/package.json +8 -8
- package/cli/scaffold/ssr/server/data/posts.js +144 -144
- package/cli/scaffold/ssr/server/index.js +213 -213
- package/cli/scaffold/webrtc/app/app.js +11 -0
- package/cli/scaffold/webrtc/app/components/video-room.js +295 -0
- package/cli/scaffold/webrtc/app/lib/room.js +252 -0
- package/cli/scaffold/webrtc/assets/.gitkeep +0 -0
- package/cli/scaffold/webrtc/global.css +250 -0
- package/cli/scaffold/webrtc/index.html +21 -0
- package/cli/utils.js +305 -287
- package/dist/API.md +661 -0
- package/dist/zquery.dist.zip +0 -0
- package/dist/zquery.js +10313 -6614
- package/dist/zquery.min.js +8 -631
- package/index.d.ts +570 -371
- package/index.js +311 -240
- package/package.json +76 -70
- package/src/component.js +1709 -1691
- package/src/core.js +921 -921
- package/src/diff.js +497 -497
- package/src/errors.js +209 -209
- package/src/expression.js +922 -922
- package/src/http.js +242 -242
- package/src/package.json +1 -1
- package/src/reactive.js +255 -255
- package/src/router.js +843 -843
- package/src/ssr.js +418 -418
- package/src/store.js +318 -318
- package/src/utils.js +515 -515
- package/src/webrtc/e2ee.js +351 -0
- package/src/webrtc/errors.js +116 -0
- package/src/webrtc/ice.js +301 -0
- package/src/webrtc/index.js +131 -0
- package/src/webrtc/joinToken.js +119 -0
- package/src/webrtc/observe.js +172 -0
- package/src/webrtc/peer.js +351 -0
- package/src/webrtc/reactive.js +268 -0
- package/src/webrtc/room.js +625 -0
- package/src/webrtc/sdp.js +302 -0
- package/src/webrtc/sfu/index.js +43 -0
- package/src/webrtc/sfu/livekit.js +131 -0
- package/src/webrtc/sfu/mediasoup.js +150 -0
- package/src/webrtc/signaling.js +373 -0
- package/src/webrtc/turn.js +237 -0
- package/tests/_helpers/webrtcFakes.js +289 -0
- package/tests/audit.test.js +4158 -4158
- package/tests/cli.test.js +1136 -1103
- package/tests/compare.test.js +497 -486
- package/tests/component.test.js +3969 -3938
- package/tests/core.test.js +1910 -1910
- package/tests/dev-server.test.js +489 -489
- package/tests/diff.test.js +1416 -1416
- package/tests/docs.test.js +1664 -1650
- package/tests/electron-features.test.js +864 -864
- package/tests/errors.test.js +619 -619
- package/tests/expression.test.js +1056 -1056
- package/tests/http.test.js +648 -648
- package/tests/reactive.test.js +819 -819
- package/tests/router.test.js +2327 -2327
- package/tests/ssr.test.js +870 -870
- package/tests/store.test.js +830 -830
- package/tests/test-minifier.js +153 -153
- package/tests/test-ssr.js +27 -27
- package/tests/utils.test.js +1377 -1377
- package/tests/webrtc/e2ee.test.js +283 -0
- package/tests/webrtc/ice.test.js +202 -0
- package/tests/webrtc/joinToken.test.js +89 -0
- package/tests/webrtc/observe.test.js +111 -0
- package/tests/webrtc/peer.test.js +373 -0
- package/tests/webrtc/reactive.test.js +235 -0
- package/tests/webrtc/room.test.js +406 -0
- package/tests/webrtc/sdp.test.js +151 -0
- package/tests/webrtc/sfu-livekit.test.js +119 -0
- package/tests/webrtc/sfu.test.js +160 -0
- package/tests/webrtc/signaling.test.js +251 -0
- package/tests/webrtc/turn.test.js +256 -0
- package/types/collection.d.ts +383 -383
- package/types/component.d.ts +186 -186
- package/types/errors.d.ts +135 -135
- package/types/http.d.ts +92 -92
- package/types/misc.d.ts +201 -201
- package/types/reactive.d.ts +98 -98
- package/types/router.d.ts +190 -190
- package/types/ssr.d.ts +102 -102
- package/types/store.d.ts +146 -146
- package/types/utils.d.ts +245 -245
- package/types/webrtc.d.ts +653 -0
|
@@ -1,213 +1,213 @@
|
|
|
1
|
-
// server/index.js - SSR HTTP server
|
|
2
|
-
//
|
|
3
|
-
// Renders routes to HTML with zQuery SSR and serves them over HTTP.
|
|
4
|
-
// Components are imported from app/components/ - the same definitions
|
|
5
|
-
// the client uses.
|
|
6
|
-
//
|
|
7
|
-
// Usage:
|
|
8
|
-
// node server/index.js
|
|
9
|
-
// PORT=8080 node server/index.js
|
|
10
|
-
|
|
11
|
-
import { createServer } from 'node:http';
|
|
12
|
-
import { readFile } from 'node:fs/promises';
|
|
13
|
-
import { join, extname, resolve } from 'node:path';
|
|
14
|
-
import { fileURLToPath } from 'node:url';
|
|
15
|
-
import { createSSRApp, matchRoute } from 'zero-query/ssr';
|
|
16
|
-
|
|
17
|
-
// Shared component definitions - same ones the client registers
|
|
18
|
-
import { homePage } from '../app/components/home.js';
|
|
19
|
-
import { aboutPage } from '../app/components/about.js';
|
|
20
|
-
import { blogList } from '../app/components/blog/index.js';
|
|
21
|
-
import { blogPost } from '../app/components/blog/post.js';
|
|
22
|
-
import { notFound } from '../app/components/not-found.js';
|
|
23
|
-
import { routes } from '../app/routes.js';
|
|
24
|
-
|
|
25
|
-
// Server-side data — simulates a database or CMS
|
|
26
|
-
import { getAllPosts, getPostBySlug } from './data/posts.js';
|
|
27
|
-
|
|
28
|
-
const __dirname = fileURLToPath(new URL('.', import.meta.url));
|
|
29
|
-
const ROOT = join(__dirname, '..');
|
|
30
|
-
const PORT = parseInt(process.env.PORT || '3000', 10);
|
|
31
|
-
|
|
32
|
-
// --- SSR app ----------------------------------------------------------------
|
|
33
|
-
|
|
34
|
-
const app = createSSRApp();
|
|
35
|
-
app.component('home-page', homePage);
|
|
36
|
-
app.component('about-page', aboutPage);
|
|
37
|
-
app.component('blog-list', blogList);
|
|
38
|
-
app.component('blog-post', blogPost);
|
|
39
|
-
app.component('not-found', notFound);
|
|
40
|
-
|
|
41
|
-
// --- Server-side data fetching ----------------------------------------------
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
* Fetch data for a matched route. This is where you'd query a database,
|
|
45
|
-
* call an API, or read from the filesystem in a real application.
|
|
46
|
-
* The returned object is passed as props to the component during SSR.
|
|
47
|
-
*/
|
|
48
|
-
function getPropsForRoute(component, params) {
|
|
49
|
-
switch (component) {
|
|
50
|
-
case 'blog-list':
|
|
51
|
-
return { posts: getAllPosts() };
|
|
52
|
-
case 'blog-post':
|
|
53
|
-
return { post: getPostBySlug(params.slug) || null };
|
|
54
|
-
default:
|
|
55
|
-
return {};
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
// --- SEO metadata per route -------------------------------------------------
|
|
60
|
-
|
|
61
|
-
/**
|
|
62
|
-
* Return page-specific metadata for SEO, social sharing, and browser tabs.
|
|
63
|
-
* The server injects these into the HTML shell's <head> before sending.
|
|
64
|
-
*
|
|
65
|
-
* In a real app you'd pull this from a CMS or database alongside the content.
|
|
66
|
-
* Open Graph tags ensure rich link previews on social media.
|
|
67
|
-
*/
|
|
68
|
-
function getMetaForRoute(component, params, props) {
|
|
69
|
-
const base = {
|
|
70
|
-
title: '{{NAME}}',
|
|
71
|
-
description: 'A zQuery SSR application.',
|
|
72
|
-
ogType: 'website',
|
|
73
|
-
};
|
|
74
|
-
|
|
75
|
-
switch (component) {
|
|
76
|
-
case 'home-page':
|
|
77
|
-
return {
|
|
78
|
-
...base,
|
|
79
|
-
title: '{{NAME}} — Home',
|
|
80
|
-
description: 'A server-rendered application built with zQuery. Fast first paint, SEO-friendly, zero dependencies.',
|
|
81
|
-
};
|
|
82
|
-
|
|
83
|
-
case 'blog-list':
|
|
84
|
-
return {
|
|
85
|
-
...base,
|
|
86
|
-
title: 'Blog — {{NAME}}',
|
|
87
|
-
description: 'Articles on server-side rendering, hydration, shared components, and modern web architecture.',
|
|
88
|
-
};
|
|
89
|
-
|
|
90
|
-
case 'blog-post': {
|
|
91
|
-
const post = props.post;
|
|
92
|
-
if (!post) return { ...base, title: 'Post Not Found — {{NAME}}' };
|
|
93
|
-
return {
|
|
94
|
-
...base,
|
|
95
|
-
title: `${post.title} — {{NAME}}`,
|
|
96
|
-
description: post.summary,
|
|
97
|
-
ogType: 'article',
|
|
98
|
-
};
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
case 'about-page':
|
|
102
|
-
return {
|
|
103
|
-
...base,
|
|
104
|
-
title: 'About — {{NAME}}',
|
|
105
|
-
description: 'Learn about zQuery — a zero-dependency frontend micro-library for reactive components, routing, SSR, and state management.',
|
|
106
|
-
};
|
|
107
|
-
|
|
108
|
-
default:
|
|
109
|
-
return {
|
|
110
|
-
...base,
|
|
111
|
-
title: 'Page Not Found — {{NAME}}',
|
|
112
|
-
description: 'The page you\'re looking for doesn\'t exist.',
|
|
113
|
-
};
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
// --- Render a full HTML page ------------------------------------------------
|
|
118
|
-
|
|
119
|
-
// Read the index.html shell once at startup — it already has z-link nav,
|
|
120
|
-
// client scripts (zquery.min.js + app/app.js), and the <z-outlet> tag.
|
|
121
|
-
// On each request we render the matched component into the shell.
|
|
122
|
-
let shellCache = null;
|
|
123
|
-
async function getShell() {
|
|
124
|
-
if (!shellCache) shellCache = await readFile(join(ROOT, 'index.html'), 'utf-8');
|
|
125
|
-
return shellCache;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
async function render(pathname) {
|
|
129
|
-
const { component, params } = matchRoute(routes, pathname);
|
|
130
|
-
const props = getPropsForRoute(component, params);
|
|
131
|
-
const meta = getMetaForRoute(component, params, props);
|
|
132
|
-
|
|
133
|
-
return app.renderShell(await getShell(), {
|
|
134
|
-
component,
|
|
135
|
-
props,
|
|
136
|
-
title: meta.title,
|
|
137
|
-
description: meta.description,
|
|
138
|
-
og: {
|
|
139
|
-
title: meta.title,
|
|
140
|
-
description: meta.description,
|
|
141
|
-
type: meta.ogType,
|
|
142
|
-
},
|
|
143
|
-
ssrData: { component, params, props, meta },
|
|
144
|
-
});
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
// --- Static files -----------------------------------------------------------
|
|
148
|
-
|
|
149
|
-
const MIME = {
|
|
150
|
-
'.css': 'text/css', '.js': 'text/javascript', '.json': 'application/json',
|
|
151
|
-
'.png': 'image/png', '.jpg': 'image/jpeg', '.svg': 'image/svg+xml',
|
|
152
|
-
'.ico': 'image/x-icon', '.woff2': 'font/woff2',
|
|
153
|
-
};
|
|
154
|
-
|
|
155
|
-
async function serveStatic(res, pathname) {
|
|
156
|
-
const ext = extname(pathname);
|
|
157
|
-
if (!MIME[ext]) return false;
|
|
158
|
-
|
|
159
|
-
const filePath = join(ROOT, pathname);
|
|
160
|
-
if (!resolve(filePath).startsWith(resolve(ROOT))) return false;
|
|
161
|
-
|
|
162
|
-
try {
|
|
163
|
-
const data = await readFile(filePath);
|
|
164
|
-
res.writeHead(200, { 'Content-Type': MIME[ext] });
|
|
165
|
-
res.end(data);
|
|
166
|
-
return true;
|
|
167
|
-
} catch { return false; }
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
// --- HTTP server ------------------------------------------------------------
|
|
171
|
-
|
|
172
|
-
createServer(async (req, res) => {
|
|
173
|
-
const { pathname } = new URL(req.url, `http://localhost:${PORT}`);
|
|
174
|
-
|
|
175
|
-
// Static assets (CSS, images, etc.)
|
|
176
|
-
if (pathname !== '/' && await serveStatic(res, pathname)) return;
|
|
177
|
-
|
|
178
|
-
// --- JSON API for client-side navigation ----------------------------------
|
|
179
|
-
// The client fetches data here when navigating via SPA (after initial SSR).
|
|
180
|
-
// In a real app, these would query a database or external API.
|
|
181
|
-
|
|
182
|
-
if (pathname === '/api/posts') {
|
|
183
|
-
const json = JSON.stringify(getAllPosts());
|
|
184
|
-
res.writeHead(200, { 'Content-Type': 'application/json' });
|
|
185
|
-
res.end(json);
|
|
186
|
-
return;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
const postMatch = /^\/api\/posts\/([^/]+)$/.exec(pathname);
|
|
190
|
-
if (postMatch) {
|
|
191
|
-
const post = getPostBySlug(postMatch[1]) || null;
|
|
192
|
-
res.writeHead(post ? 200 : 404, { 'Content-Type': 'application/json' });
|
|
193
|
-
res.end(JSON.stringify(post));
|
|
194
|
-
return;
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
// SSR route
|
|
198
|
-
try {
|
|
199
|
-
const html = await render(pathname);
|
|
200
|
-
res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
|
|
201
|
-
res.end(html);
|
|
202
|
-
} catch (err) {
|
|
203
|
-
console.error('SSR error:', err);
|
|
204
|
-
if (!res.headersSent) {
|
|
205
|
-
res.writeHead(500, { 'Content-Type': 'text/plain' });
|
|
206
|
-
}
|
|
207
|
-
res.end('Internal Server Error');
|
|
208
|
-
}
|
|
209
|
-
}).listen(PORT, () => {
|
|
210
|
-
console.log(`\n ⚡ SSR server → http://localhost:${PORT}\n`);
|
|
211
|
-
routes.forEach(r => console.log(` ${r.path.padEnd(10)} → ${r.component}`));
|
|
212
|
-
console.log(` * → not-found\n`);
|
|
213
|
-
});
|
|
1
|
+
// server/index.js - SSR HTTP server
|
|
2
|
+
//
|
|
3
|
+
// Renders routes to HTML with zQuery SSR and serves them over HTTP.
|
|
4
|
+
// Components are imported from app/components/ - the same definitions
|
|
5
|
+
// the client uses.
|
|
6
|
+
//
|
|
7
|
+
// Usage:
|
|
8
|
+
// node server/index.js
|
|
9
|
+
// PORT=8080 node server/index.js
|
|
10
|
+
|
|
11
|
+
import { createServer } from 'node:http';
|
|
12
|
+
import { readFile } from 'node:fs/promises';
|
|
13
|
+
import { join, extname, resolve } from 'node:path';
|
|
14
|
+
import { fileURLToPath } from 'node:url';
|
|
15
|
+
import { createSSRApp, matchRoute } from 'zero-query/ssr';
|
|
16
|
+
|
|
17
|
+
// Shared component definitions - same ones the client registers
|
|
18
|
+
import { homePage } from '../app/components/home.js';
|
|
19
|
+
import { aboutPage } from '../app/components/about.js';
|
|
20
|
+
import { blogList } from '../app/components/blog/index.js';
|
|
21
|
+
import { blogPost } from '../app/components/blog/post.js';
|
|
22
|
+
import { notFound } from '../app/components/not-found.js';
|
|
23
|
+
import { routes } from '../app/routes.js';
|
|
24
|
+
|
|
25
|
+
// Server-side data — simulates a database or CMS
|
|
26
|
+
import { getAllPosts, getPostBySlug } from './data/posts.js';
|
|
27
|
+
|
|
28
|
+
const __dirname = fileURLToPath(new URL('.', import.meta.url));
|
|
29
|
+
const ROOT = join(__dirname, '..');
|
|
30
|
+
const PORT = parseInt(process.env.PORT || '3000', 10);
|
|
31
|
+
|
|
32
|
+
// --- SSR app ----------------------------------------------------------------
|
|
33
|
+
|
|
34
|
+
const app = createSSRApp();
|
|
35
|
+
app.component('home-page', homePage);
|
|
36
|
+
app.component('about-page', aboutPage);
|
|
37
|
+
app.component('blog-list', blogList);
|
|
38
|
+
app.component('blog-post', blogPost);
|
|
39
|
+
app.component('not-found', notFound);
|
|
40
|
+
|
|
41
|
+
// --- Server-side data fetching ----------------------------------------------
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* Fetch data for a matched route. This is where you'd query a database,
|
|
45
|
+
* call an API, or read from the filesystem in a real application.
|
|
46
|
+
* The returned object is passed as props to the component during SSR.
|
|
47
|
+
*/
|
|
48
|
+
function getPropsForRoute(component, params) {
|
|
49
|
+
switch (component) {
|
|
50
|
+
case 'blog-list':
|
|
51
|
+
return { posts: getAllPosts() };
|
|
52
|
+
case 'blog-post':
|
|
53
|
+
return { post: getPostBySlug(params.slug) || null };
|
|
54
|
+
default:
|
|
55
|
+
return {};
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
// --- SEO metadata per route -------------------------------------------------
|
|
60
|
+
|
|
61
|
+
/**
|
|
62
|
+
* Return page-specific metadata for SEO, social sharing, and browser tabs.
|
|
63
|
+
* The server injects these into the HTML shell's <head> before sending.
|
|
64
|
+
*
|
|
65
|
+
* In a real app you'd pull this from a CMS or database alongside the content.
|
|
66
|
+
* Open Graph tags ensure rich link previews on social media.
|
|
67
|
+
*/
|
|
68
|
+
function getMetaForRoute(component, params, props) {
|
|
69
|
+
const base = {
|
|
70
|
+
title: '{{NAME}}',
|
|
71
|
+
description: 'A zQuery SSR application.',
|
|
72
|
+
ogType: 'website',
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
switch (component) {
|
|
76
|
+
case 'home-page':
|
|
77
|
+
return {
|
|
78
|
+
...base,
|
|
79
|
+
title: '{{NAME}} — Home',
|
|
80
|
+
description: 'A server-rendered application built with zQuery. Fast first paint, SEO-friendly, zero dependencies.',
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
case 'blog-list':
|
|
84
|
+
return {
|
|
85
|
+
...base,
|
|
86
|
+
title: 'Blog — {{NAME}}',
|
|
87
|
+
description: 'Articles on server-side rendering, hydration, shared components, and modern web architecture.',
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
case 'blog-post': {
|
|
91
|
+
const post = props.post;
|
|
92
|
+
if (!post) return { ...base, title: 'Post Not Found — {{NAME}}' };
|
|
93
|
+
return {
|
|
94
|
+
...base,
|
|
95
|
+
title: `${post.title} — {{NAME}}`,
|
|
96
|
+
description: post.summary,
|
|
97
|
+
ogType: 'article',
|
|
98
|
+
};
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
case 'about-page':
|
|
102
|
+
return {
|
|
103
|
+
...base,
|
|
104
|
+
title: 'About — {{NAME}}',
|
|
105
|
+
description: 'Learn about zQuery — a zero-dependency frontend micro-library for reactive components, routing, SSR, and state management.',
|
|
106
|
+
};
|
|
107
|
+
|
|
108
|
+
default:
|
|
109
|
+
return {
|
|
110
|
+
...base,
|
|
111
|
+
title: 'Page Not Found — {{NAME}}',
|
|
112
|
+
description: 'The page you\'re looking for doesn\'t exist.',
|
|
113
|
+
};
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
// --- Render a full HTML page ------------------------------------------------
|
|
118
|
+
|
|
119
|
+
// Read the index.html shell once at startup — it already has z-link nav,
|
|
120
|
+
// client scripts (zquery.min.js + app/app.js), and the <z-outlet> tag.
|
|
121
|
+
// On each request we render the matched component into the shell.
|
|
122
|
+
let shellCache = null;
|
|
123
|
+
async function getShell() {
|
|
124
|
+
if (!shellCache) shellCache = await readFile(join(ROOT, 'index.html'), 'utf-8');
|
|
125
|
+
return shellCache;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
async function render(pathname) {
|
|
129
|
+
const { component, params } = matchRoute(routes, pathname);
|
|
130
|
+
const props = getPropsForRoute(component, params);
|
|
131
|
+
const meta = getMetaForRoute(component, params, props);
|
|
132
|
+
|
|
133
|
+
return app.renderShell(await getShell(), {
|
|
134
|
+
component,
|
|
135
|
+
props,
|
|
136
|
+
title: meta.title,
|
|
137
|
+
description: meta.description,
|
|
138
|
+
og: {
|
|
139
|
+
title: meta.title,
|
|
140
|
+
description: meta.description,
|
|
141
|
+
type: meta.ogType,
|
|
142
|
+
},
|
|
143
|
+
ssrData: { component, params, props, meta },
|
|
144
|
+
});
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
// --- Static files -----------------------------------------------------------
|
|
148
|
+
|
|
149
|
+
const MIME = {
|
|
150
|
+
'.css': 'text/css', '.js': 'text/javascript', '.json': 'application/json',
|
|
151
|
+
'.png': 'image/png', '.jpg': 'image/jpeg', '.svg': 'image/svg+xml',
|
|
152
|
+
'.ico': 'image/x-icon', '.woff2': 'font/woff2',
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
async function serveStatic(res, pathname) {
|
|
156
|
+
const ext = extname(pathname);
|
|
157
|
+
if (!MIME[ext]) return false;
|
|
158
|
+
|
|
159
|
+
const filePath = join(ROOT, pathname);
|
|
160
|
+
if (!resolve(filePath).startsWith(resolve(ROOT))) return false;
|
|
161
|
+
|
|
162
|
+
try {
|
|
163
|
+
const data = await readFile(filePath);
|
|
164
|
+
res.writeHead(200, { 'Content-Type': MIME[ext] });
|
|
165
|
+
res.end(data);
|
|
166
|
+
return true;
|
|
167
|
+
} catch { return false; }
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
// --- HTTP server ------------------------------------------------------------
|
|
171
|
+
|
|
172
|
+
createServer(async (req, res) => {
|
|
173
|
+
const { pathname } = new URL(req.url, `http://localhost:${PORT}`);
|
|
174
|
+
|
|
175
|
+
// Static assets (CSS, images, etc.)
|
|
176
|
+
if (pathname !== '/' && await serveStatic(res, pathname)) return;
|
|
177
|
+
|
|
178
|
+
// --- JSON API for client-side navigation ----------------------------------
|
|
179
|
+
// The client fetches data here when navigating via SPA (after initial SSR).
|
|
180
|
+
// In a real app, these would query a database or external API.
|
|
181
|
+
|
|
182
|
+
if (pathname === '/api/posts') {
|
|
183
|
+
const json = JSON.stringify(getAllPosts());
|
|
184
|
+
res.writeHead(200, { 'Content-Type': 'application/json' });
|
|
185
|
+
res.end(json);
|
|
186
|
+
return;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
const postMatch = /^\/api\/posts\/([^/]+)$/.exec(pathname);
|
|
190
|
+
if (postMatch) {
|
|
191
|
+
const post = getPostBySlug(postMatch[1]) || null;
|
|
192
|
+
res.writeHead(post ? 200 : 404, { 'Content-Type': 'application/json' });
|
|
193
|
+
res.end(JSON.stringify(post));
|
|
194
|
+
return;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
// SSR route
|
|
198
|
+
try {
|
|
199
|
+
const html = await render(pathname);
|
|
200
|
+
res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
|
|
201
|
+
res.end(html);
|
|
202
|
+
} catch (err) {
|
|
203
|
+
console.error('SSR error:', err);
|
|
204
|
+
if (!res.headersSent) {
|
|
205
|
+
res.writeHead(500, { 'Content-Type': 'text/plain' });
|
|
206
|
+
}
|
|
207
|
+
res.end('Internal Server Error');
|
|
208
|
+
}
|
|
209
|
+
}).listen(PORT, () => {
|
|
210
|
+
console.log(`\n ⚡ SSR server → http://localhost:${PORT}\n`);
|
|
211
|
+
routes.forEach(r => console.log(` ${r.path.padEnd(10)} → ${r.component}`));
|
|
212
|
+
console.log(` * → not-found\n`);
|
|
213
|
+
});
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
// app.js - {{NAME}} WebRTC demo entry point.
|
|
2
|
+
|
|
3
|
+
import './components/video-room.js';
|
|
4
|
+
|
|
5
|
+
$.ready(() => {
|
|
6
|
+
$('#nav-version').text('v' + $.version);
|
|
7
|
+
// Instantiate every registered <component-tag> already in the DOM.
|
|
8
|
+
// (No $.router() is wiring it up for us in this single-page scaffold.)
|
|
9
|
+
$.mountAll();
|
|
10
|
+
console.log('⚡ {{NAME}} - zQuery v' + $.version + ' WebRTC demo');
|
|
11
|
+
});
|