create-frootjs 1.0.15 → 1.0.16
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/addons/testing.js +2 -2
- package/dist/addons/testing.js.map +1 -1
- package/dist/generator.js +1 -1
- package/dist/generator.js.map +1 -1
- package/dist/index.js +1 -7
- package/dist/index.js.map +1 -1
- package/dist/templates/minimal.js +54 -54
- package/dist/templates/modular.js +261 -261
- package/dist/templates/mvc.js +196 -196
- package/dist/templates/openapi.js +168 -168
- package/dist/templates/streaming.js +176 -176
- package/dist/templates/websocket.js +163 -163
- package/dist/ui.d.ts +4 -1
- package/dist/ui.d.ts.map +1 -1
- package/dist/ui.js +106 -34
- package/dist/ui.js.map +1 -1
- package/package.json +2 -2
- package/dist/templates/fullstack.d.ts +0 -7
- package/dist/templates/fullstack.d.ts.map +0 -1
- package/dist/templates/fullstack.js +0 -225
- package/dist/templates/fullstack.js.map +0 -1
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Fullstack JSX & Server-Side Rendering (SSR) Template
|
|
3
|
-
* Native JSX components rendered on the server with zero client JavaScript overhead.
|
|
4
|
-
*/
|
|
5
|
-
import { TemplateDefinition } from './types.js';
|
|
6
|
-
export declare const fullstackTemplate: TemplateDefinition;
|
|
7
|
-
//# sourceMappingURL=fullstack.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"fullstack.d.ts","sourceRoot":"","sources":["../../src/templates/fullstack.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,kBAAkB,EAAsD,MAAM,YAAY,CAAC;AAEpG,eAAO,MAAM,iBAAiB,EAAE,kBAqO/B,CAAC"}
|
|
@@ -1,225 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Fullstack JSX & Server-Side Rendering (SSR) Template
|
|
3
|
-
* Native JSX components rendered on the server with zero client JavaScript overhead.
|
|
4
|
-
*/
|
|
5
|
-
import { COMMON_GITIGNORE, COMMON_TSCONFIG } from './types.js';
|
|
6
|
-
export const fullstackTemplate = {
|
|
7
|
-
id: 'fullstack',
|
|
8
|
-
name: 'Fullstack',
|
|
9
|
-
description: 'Server-rendered JSX views',
|
|
10
|
-
generate: (projectName) => {
|
|
11
|
-
return {
|
|
12
|
-
'package.json': JSON.stringify({
|
|
13
|
-
name: projectName,
|
|
14
|
-
version: '1.0.0',
|
|
15
|
-
type: 'module',
|
|
16
|
-
scripts: {
|
|
17
|
-
dev: 'tsx watch src/server.tsx',
|
|
18
|
-
build: 'tsc',
|
|
19
|
-
start: 'node dist/server.js',
|
|
20
|
-
},
|
|
21
|
-
dependencies: {
|
|
22
|
-
frootjs: '^1.0.2',
|
|
23
|
-
},
|
|
24
|
-
devDependencies: {
|
|
25
|
-
'@types/node': '^22.10.0',
|
|
26
|
-
tsx: '^4.19.0',
|
|
27
|
-
typescript: '^5.8.0',
|
|
28
|
-
},
|
|
29
|
-
}, null, 2) + '\n',
|
|
30
|
-
'tsconfig.json': COMMON_TSCONFIG,
|
|
31
|
-
'.gitignore': COMMON_GITIGNORE,
|
|
32
|
-
'README.md': `# ${projectName}
|
|
33
|
-
|
|
34
|
-
Froot application built with the **Fullstack JSX & Server-Side Rendering (SSR)** pattern.
|
|
35
|
-
|
|
36
|
-
## Features
|
|
37
|
-
|
|
38
|
-
- **Native JSX / TSX**: Pure server-rendered JSX without React runtime baggage
|
|
39
|
-
- **Layout Middleware**: Automatic HTML wrapper layout with \`jsxRenderer()\`
|
|
40
|
-
- **Zero Client JS**: Ultra-fast initial page loads and 100% SEO-friendly markup
|
|
41
|
-
|
|
42
|
-
## Getting Started
|
|
43
|
-
|
|
44
|
-
\`\`\`bash
|
|
45
|
-
# 1. Install dependencies
|
|
46
|
-
pnpm install
|
|
47
|
-
|
|
48
|
-
# 2. Run in development mode
|
|
49
|
-
pnpm run dev
|
|
50
|
-
|
|
51
|
-
# 3. View in browser
|
|
52
|
-
http://localhost:3000
|
|
53
|
-
\`\`\`
|
|
54
|
-
`,
|
|
55
|
-
'src/components/Layout.tsx': `import type { FC, PropsWithChildren } from 'frootjs/jsx';
|
|
56
|
-
|
|
57
|
-
export interface LayoutProps {
|
|
58
|
-
title?: string;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
export const Layout: FC<PropsWithChildren<LayoutProps>> = ({ title = 'Froot JSX App', children }) => {
|
|
62
|
-
return (
|
|
63
|
-
<html lang="en">
|
|
64
|
-
<head>
|
|
65
|
-
<meta charSet="UTF-8" />
|
|
66
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
67
|
-
<title>{title}</title>
|
|
68
|
-
<style>{\`
|
|
69
|
-
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
70
|
-
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #0f172a; color: #f8fafc; line-height: 1.6; }
|
|
71
|
-
header { background: #1e293b; border-bottom: 1px solid #334155; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; }
|
|
72
|
-
.logo { font-size: 1.3rem; font-weight: bold; color: #10b981; text-decoration: none; }
|
|
73
|
-
nav a { color: #94a3b8; text-decoration: none; margin-left: 1.5rem; font-weight: 500; }
|
|
74
|
-
nav a:hover { color: #f8fafc; }
|
|
75
|
-
main { max-width: 900px; margin: 2rem auto; padding: 0 1.5rem; }
|
|
76
|
-
footer { text-align: center; padding: 2rem; color: #64748b; font-size: 0.9rem; border-top: 1px solid #1e293b; margin-top: 4rem; }
|
|
77
|
-
\`}</style>
|
|
78
|
-
</head>
|
|
79
|
-
<body>
|
|
80
|
-
<header>
|
|
81
|
-
<a href="/" className="logo">Froot JSX</a>
|
|
82
|
-
<nav>
|
|
83
|
-
<a href="/">Home</a>
|
|
84
|
-
<a href="/about">About</a>
|
|
85
|
-
<a href="/features">Features</a>
|
|
86
|
-
</nav>
|
|
87
|
-
</header>
|
|
88
|
-
<main>{children}</main>
|
|
89
|
-
<footer>
|
|
90
|
-
<p>Powered by Froot Server-Side Rendering Engine</p>
|
|
91
|
-
</footer>
|
|
92
|
-
</body>
|
|
93
|
-
</html>
|
|
94
|
-
);
|
|
95
|
-
};
|
|
96
|
-
`,
|
|
97
|
-
'src/components/Card.tsx': `import type { FC, PropsWithChildren } from 'frootjs/jsx';
|
|
98
|
-
|
|
99
|
-
export interface CardProps {
|
|
100
|
-
title: string;
|
|
101
|
-
badge?: string;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
export const Card: FC<PropsWithChildren<CardProps>> = ({ title, badge, children }) => {
|
|
105
|
-
return (
|
|
106
|
-
<div style={{
|
|
107
|
-
background: '#1e293b',
|
|
108
|
-
border: '1px solid #334155',
|
|
109
|
-
borderRadius: '8px',
|
|
110
|
-
padding: '1.5rem',
|
|
111
|
-
marginBottom: '1.25rem',
|
|
112
|
-
}}>
|
|
113
|
-
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.75rem' }}>
|
|
114
|
-
<h3 style={{ color: '#38bdf8', fontSize: '1.2rem' }}>{title}</h3>
|
|
115
|
-
{badge ? (
|
|
116
|
-
<span style={{
|
|
117
|
-
background: '#064e3b',
|
|
118
|
-
color: '#34d399',
|
|
119
|
-
fontSize: '0.75rem',
|
|
120
|
-
padding: '0.2rem 0.6rem',
|
|
121
|
-
borderRadius: '9999px',
|
|
122
|
-
fontWeight: 600,
|
|
123
|
-
}}>
|
|
124
|
-
{badge}
|
|
125
|
-
</span>
|
|
126
|
-
) : null}
|
|
127
|
-
</div>
|
|
128
|
-
<div>{children}</div>
|
|
129
|
-
</div>
|
|
130
|
-
);
|
|
131
|
-
};
|
|
132
|
-
`,
|
|
133
|
-
'src/pages/Home.tsx': `import type { FC } from 'frootjs/jsx';
|
|
134
|
-
import { Card } from '../components/Card.js';
|
|
135
|
-
|
|
136
|
-
export const HomePage: FC = () => {
|
|
137
|
-
return (
|
|
138
|
-
<div>
|
|
139
|
-
<div style={{ marginBottom: '2rem' }}>
|
|
140
|
-
<h1 style={{ fontSize: '2.25rem', color: '#10b981', marginBottom: '0.5rem' }}>
|
|
141
|
-
Server-Side Rendered JSX
|
|
142
|
-
</h1>
|
|
143
|
-
<p style={{ color: '#94a3b8', fontSize: '1.1rem' }}>
|
|
144
|
-
Blazing fast HTML generated on the server with TypeScript-native JSX components.
|
|
145
|
-
</p>
|
|
146
|
-
</div>
|
|
147
|
-
|
|
148
|
-
<Card title="Zero Client Runtime" badge="Performance">
|
|
149
|
-
<p>No heavy virtual DOM diffing in the browser. Pure, pre-rendered semantic HTML delivered instantly.</p>
|
|
150
|
-
</Card>
|
|
151
|
-
|
|
152
|
-
<Card title="Type-Safe Views" badge="DX">
|
|
153
|
-
<p>Full TypeScript compiler checking for props, children, styles, and HTML attributes.</p>
|
|
154
|
-
</Card>
|
|
155
|
-
|
|
156
|
-
<Card title="Streaming & Islands Ready" badge="Architecture">
|
|
157
|
-
<p>Seamlessly compose asynchronous server components and stream output as it becomes available.</p>
|
|
158
|
-
</Card>
|
|
159
|
-
</div>
|
|
160
|
-
);
|
|
161
|
-
};
|
|
162
|
-
`,
|
|
163
|
-
'src/pages/About.tsx': `import type { FC } from 'frootjs/jsx';
|
|
164
|
-
|
|
165
|
-
export const AboutPage: FC = () => {
|
|
166
|
-
return (
|
|
167
|
-
<div style={{ background: '#1e293b', padding: '2rem', borderRadius: '8px', border: '1px solid #334155' }}>
|
|
168
|
-
<h1 style={{ color: '#10b981', marginBottom: '1rem' }}>About This Application</h1>
|
|
169
|
-
<p style={{ marginBottom: '1rem' }}>
|
|
170
|
-
This project showcases Froot's built-in JSX rendering pipeline. Unlike traditional React or Next.js setups,
|
|
171
|
-
Froot renders JSX straight to HTML strings without requiring React, ReactDOM, or a Node.js bundling step.
|
|
172
|
-
</p>
|
|
173
|
-
<p style={{ color: '#94a3b8' }}>
|
|
174
|
-
It achieves sub-millisecond page render times while maintaining full component composition.
|
|
175
|
-
</p>
|
|
176
|
-
</div>
|
|
177
|
-
);
|
|
178
|
-
};
|
|
179
|
-
`,
|
|
180
|
-
'src/server.tsx': `import { Froot } from 'frootjs';
|
|
181
|
-
import { jsxRenderer } from 'frootjs/jsx';
|
|
182
|
-
import { Layout } from './components/Layout.js';
|
|
183
|
-
import { HomePage } from './pages/Home.js';
|
|
184
|
-
import { AboutPage } from './pages/About.js';
|
|
185
|
-
|
|
186
|
-
export const app = new Froot();
|
|
187
|
-
|
|
188
|
-
// Wrap all HTML responses in the global Layout shell
|
|
189
|
-
app.use('*', jsxRenderer(({ children }) => {
|
|
190
|
-
return <Layout>{children}</Layout>;
|
|
191
|
-
}));
|
|
192
|
-
|
|
193
|
-
// Route handlers
|
|
194
|
-
app.get('/', (c) => {
|
|
195
|
-
return c.render(<HomePage />);
|
|
196
|
-
});
|
|
197
|
-
|
|
198
|
-
app.get('/about', (c) => {
|
|
199
|
-
return c.render(<AboutPage />);
|
|
200
|
-
});
|
|
201
|
-
|
|
202
|
-
app.get('/features', (c) => {
|
|
203
|
-
return c.render(
|
|
204
|
-
<div>
|
|
205
|
-
<h1 style={{ color: '#10b981', marginBottom: '1rem' }}>Framework Features</h1>
|
|
206
|
-
<ul style={{ paddingLeft: '1.5rem', color: '#cbd5e1' }}>
|
|
207
|
-
<li>RADIX tree router with O(K) lookup</li>
|
|
208
|
-
<li>Auto-generated OpenAPI 3.1 & Scalar docs</li>
|
|
209
|
-
<li>Native JSX & async component support</li>
|
|
210
|
-
<li>Full WebCrypto authentication ecosystem</li>
|
|
211
|
-
<li>Universal WebSockets & pub/sub hub</li>
|
|
212
|
-
</ul>
|
|
213
|
-
</div>
|
|
214
|
-
);
|
|
215
|
-
});
|
|
216
|
-
|
|
217
|
-
const PORT = Number(process.env.PORT) || 3000;
|
|
218
|
-
app.listen(PORT, () => {
|
|
219
|
-
console.log(\`Fullstack JSX server running on http://localhost:\${PORT}\`);
|
|
220
|
-
});
|
|
221
|
-
`,
|
|
222
|
-
};
|
|
223
|
-
},
|
|
224
|
-
};
|
|
225
|
-
//# sourceMappingURL=fullstack.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"fullstack.js","sourceRoot":"","sources":["../../src/templates/fullstack.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAuC,gBAAgB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAEpG,MAAM,CAAC,MAAM,iBAAiB,GAAuB;IACnD,EAAE,EAAE,WAAW;IACf,IAAI,EAAE,WAAW;IACjB,WAAW,EAAE,2BAA2B;IACxC,QAAQ,EAAE,CAAC,WAAmB,EAAmB,EAAE;QACjD,OAAO;YACL,cAAc,EAAE,IAAI,CAAC,SAAS,CAC5B;gBACE,IAAI,EAAE,WAAW;gBACjB,OAAO,EAAE,OAAO;gBAChB,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE;oBACP,GAAG,EAAE,0BAA0B;oBAC/B,KAAK,EAAE,KAAK;oBACZ,KAAK,EAAE,qBAAqB;iBAC7B;gBACD,YAAY,EAAE;oBACZ,OAAO,EAAE,QAAQ;iBAClB;gBACD,eAAe,EAAE;oBACf,aAAa,EAAE,UAAU;oBACzB,GAAG,EAAE,SAAS;oBACd,UAAU,EAAE,QAAQ;iBACrB;aACF,EACD,IAAI,EACJ,CAAC,CACF,GAAG,IAAI;YAER,eAAe,EAAE,eAAe;YAChC,YAAY,EAAE,gBAAgB;YAE9B,WAAW,EAAE,KAAK,WAAW;;;;;;;;;;;;;;;;;;;;;;CAsBlC;YAEK,2BAA2B,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyClC;YAEK,yBAAyB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmChC;YAEK,oBAAoB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6B3B;YAEK,qBAAqB,EAAE;;;;;;;;;;;;;;;;CAgB5B;YAEK,gBAAgB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCvB;SACI,CAAC;IACJ,CAAC;CACF,CAAC"}
|