nasse-js 1.0.1 → 1.0.2

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nasse-js",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "The React framework for humans",
5
5
  "type": "module",
6
6
  "bin": {
@@ -9,13 +9,15 @@
9
9
  },
10
10
  "files": [
11
11
  "dist",
12
+ "src",
12
13
  "public",
13
14
  "package.json",
14
15
  "README.md",
15
16
  "nasse.config.mjs"
16
17
  ],
17
18
  "scripts": {
18
- "build": "tsc"
19
+ "build": "tsc",
20
+ "prepublishOnly": "npm run build"
19
21
  },
20
22
  "dependencies": {
21
23
  "chalk": "^5.3.0",
@@ -0,0 +1,52 @@
1
+ import React from 'react';
2
+
3
+ /**
4
+ * RootLayout defines the HTML shell for all pages.
5
+ * Optimized for performance and SEO.
6
+ */
7
+ export default function RootLayout({ children }: { children: React.ReactNode }) {
8
+ return (
9
+ <html lang="es">
10
+ <head>
11
+ <meta charSet="utf-8" />
12
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
13
+ {/* SVG Favicon - Modern and Lightweight */}
14
+ <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
15
+
16
+ {/* Resource Preloading */}
17
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
18
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
19
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet" />
20
+
21
+ <style>{`
22
+ :root {
23
+ --background: #030303;
24
+ --foreground: #ffffff;
25
+ --accent: #8b5cf6;
26
+ --accent-glow: rgba(139, 92, 246, 0.15);
27
+ }
28
+ body {
29
+ margin: 0;
30
+ padding: 0;
31
+ background-color: var(--background);
32
+ color: var(--foreground);
33
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
34
+ -webkit-font-smoothing: antialiased;
35
+ overflow-x: hidden;
36
+ line-height: 1.5;
37
+ }
38
+ * { box-sizing: border-box; }
39
+
40
+ /* Optimization: Smooth Transitions */
41
+ .nasse-page-enter { opacity: 0; transform: translateY(10px); }
42
+ .nasse-page-enter-active { opacity: 1; transform: translateY(0); transition: opacity 300ms, transform 300ms; }
43
+ `}</style>
44
+ </head>
45
+ <body>
46
+ <div id="nasse-root">
47
+ {children}
48
+ </div>
49
+ </body>
50
+ </html>
51
+ );
52
+ }
@@ -0,0 +1,135 @@
1
+ import React from 'react';
2
+
3
+ /**
4
+ * Metadata for SEO.
5
+ * Nasse JS reads this automatically for server-side meta injection.
6
+ */
7
+ export const meta = {
8
+ title: "Nasse JS | El Framework para Humanos",
9
+ description: "Desarrolla aplicaciones ultra-rápidas con la simplicidad que mereces."
10
+ };
11
+
12
+ /**
13
+ * server() runs only on the backend.
14
+ * Data returned here is injected as props into the Home component.
15
+ */
16
+ export const server = async () => {
17
+ // Simulating database fetch
18
+ return {
19
+ version: "1.0.0",
20
+ status: "Operativo",
21
+ stats: {
22
+ loadTime: "0.4ms",
23
+ bundleSize: "12kb"
24
+ }
25
+ };
26
+ };
27
+
28
+ interface HomeProps {
29
+ version: string;
30
+ status: string;
31
+ stats: {
32
+ loadTime: string;
33
+ bundleSize: string;
34
+ };
35
+ }
36
+
37
+ export default function Home({ version, status, stats }: HomeProps) {
38
+ return (
39
+ <main style={{
40
+ minHeight: '100vh',
41
+ display: 'flex',
42
+ flexDirection: 'column',
43
+ alignItems: 'center',
44
+ justifyContent: 'center',
45
+ padding: '2rem',
46
+ textAlign: 'center',
47
+ position: 'relative'
48
+ }}>
49
+ {/* Background Glow */}
50
+ <div style={{
51
+ position: 'absolute',
52
+ top: '20%',
53
+ left: '50%',
54
+ transform: 'translate(-50%, -50%)',
55
+ width: '400px',
56
+ height: '400px',
57
+ backgroundColor: 'var(--accent)',
58
+ filter: 'blur(120px)',
59
+ opacity: '0.15',
60
+ zIndex: -1,
61
+ borderRadius: '50%'
62
+ }} />
63
+
64
+ <header style={{ marginBottom: '3rem' }}>
65
+ <img src="/logo.svg" alt="Nasse Logo" style={{ width: '120px', height: '120px', marginBottom: '1.5rem' }} />
66
+ <h1 style={{
67
+ fontSize: '4rem',
68
+ fontWeight: 800,
69
+ margin: 0,
70
+ background: 'linear-gradient(to bottom, #fff, #a1a1aa)',
71
+ WebkitBackgroundClip: 'text',
72
+ WebkitTextFillColor: 'transparent',
73
+ letterSpacing: '-0.05em'
74
+ }}>
75
+ Nasse JS
76
+ </h1>
77
+ <p style={{
78
+ fontSize: '1.25rem',
79
+ color: '#a1a1aa',
80
+ maxWidth: '500px',
81
+ margin: '1rem auto 0',
82
+ lineHeight: 1.6
83
+ }}>
84
+ La alternativa intuitiva a Next.js. Menos configuración, más creación.
85
+ </p>
86
+ </header>
87
+
88
+ <section style={{
89
+ display: 'grid',
90
+ gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
91
+ gap: '1.5rem',
92
+ width: '100%',
93
+ maxWidth: '800px',
94
+ marginTop: '2rem'
95
+ }}>
96
+ <div className="card" style={{
97
+ background: 'rgba(255, 255, 255, 0.03)',
98
+ border: '1px solid rgba(255, 255, 255, 0.08)',
99
+ padding: '1.5rem',
100
+ borderRadius: '16px',
101
+ backdropFilter: 'blur(10px)'
102
+ }}>
103
+ <h3 style={{ color: 'var(--accent)', margin: '0 0 0.5rem 0', fontSize: '0.9rem', textTransform: 'uppercase', letterSpacing: '0.1em' }}>Versión</h3>
104
+ <p style={{ fontSize: '1.5rem', fontWeight: 600, margin: 0 }}>v{version}</p>
105
+ </div>
106
+
107
+ <div className="card" style={{
108
+ background: 'rgba(255, 255, 255, 0.03)',
109
+ border: '1px solid rgba(255, 255, 255, 0.08)',
110
+ padding: '1.5rem',
111
+ borderRadius: '16px',
112
+ backdropFilter: 'blur(10px)'
113
+ }}>
114
+ <h3 style={{ color: 'var(--accent)', margin: '0 0 0.5rem 0', fontSize: '0.9rem', textTransform: 'uppercase', letterSpacing: '0.1em' }}>Estado</h3>
115
+ <p style={{ fontSize: '1.5rem', fontWeight: 600, margin: 0 }}>{status}</p>
116
+ </div>
117
+
118
+ <div className="card" style={{
119
+ background: 'rgba(255, 255, 255, 0.03)',
120
+ border: '1px solid rgba(255, 255, 255, 0.08)',
121
+ padding: '1.5rem',
122
+ borderRadius: '16px',
123
+ backdropFilter: 'blur(10px)'
124
+ }}>
125
+ <h3 style={{ color: 'var(--accent)', margin: '0 0 0.5rem 0', fontSize: '0.9rem', textTransform: 'uppercase', letterSpacing: '0.1em' }}>Latencia SSR</h3>
126
+ <p style={{ fontSize: '1.5rem', fontWeight: 600, margin: 0 }}>{stats.loadTime}</p>
127
+ </div>
128
+ </section>
129
+
130
+ <footer style={{ marginTop: '4rem', color: '#52525b', fontSize: '0.9rem' }}>
131
+ Edita <code>src/app/index.tsx</code> para comenzar la aventura.
132
+ </footer>
133
+ </main>
134
+ );
135
+ }
@@ -0,0 +1,369 @@
1
+ #!/usr/bin/env node
2
+
3
+ import fs from 'fs';
4
+ import path from 'path';
5
+ import { fileURLToPath } from 'url';
6
+ import chalk from 'chalk';
7
+ import inquirer from 'inquirer';
8
+ import { execSync } from 'child_process';
9
+
10
+ const __filename = fileURLToPath(import.meta.url);
11
+ const __dirname = path.dirname(__filename);
12
+
13
+ export async function init() {
14
+ console.log(`\n ${chalk.bold.hex('#8b5cf6')('⚡')} ${chalk.bold('NASSE JS')} - The React Framework for Humans\n`);
15
+
16
+ const answers = await inquirer.prompt([
17
+ {
18
+ type: 'input',
19
+ name: 'projectName',
20
+ message: 'What is your project named?',
21
+ default: 'my-nasse-app',
22
+ validate: (input: string) => {
23
+ if (/^([A-Za-z\-\_\d])+$/.test(input)) return true;
24
+ return 'Project name may only include letters, numbers, underscores and dashes.';
25
+ }
26
+ },
27
+ {
28
+ type: 'confirm',
29
+ name: 'useTailwind',
30
+ message: 'Would you like to use Tailwind CSS?',
31
+ default: true
32
+ }
33
+ ]);
34
+
35
+ const targetDir = path.join(process.cwd(), answers.projectName);
36
+
37
+ if (fs.existsSync(targetDir)) {
38
+ console.error(chalk.red(`\nDirectory ${answers.projectName} already exists. Please choose another name.\n`));
39
+ process.exit(1);
40
+ }
41
+
42
+ console.log(`\nCreating a new Nasse app in ${chalk.green(targetDir)}.`);
43
+ fs.mkdirSync(targetDir, { recursive: true });
44
+
45
+ // Create standard folders
46
+ fs.mkdirSync(path.join(targetDir, 'app'), { recursive: true });
47
+ fs.mkdirSync(path.join(targetDir, 'public'), { recursive: true });
48
+ fs.mkdirSync(path.join(targetDir, 'components'), { recursive: true });
49
+ fs.mkdirSync(path.join(targetDir, 'assets'), { recursive: true });
50
+
51
+ // --- 1. GENERATE APP FILES ---
52
+
53
+ // app/index.tsx
54
+ fs.writeFileSync(path.join(targetDir, 'app', 'index.tsx'), `import React from 'react';
55
+
56
+ export const meta = {
57
+ title: "Welcome to Nasse JS",
58
+ description: "The React framework for humans."
59
+ };
60
+
61
+ export const server = async () => {
62
+ return {
63
+ message: "Server-side loaded data!"
64
+ };
65
+ };
66
+
67
+ export default function Home({ message }: { message: string }) {
68
+ return (
69
+ <div ${answers.useTailwind ? 'className="min-h-screen bg-gray-950 text-white flex flex-col items-center justify-center p-8"' : 'style={{ minHeight: "100vh", background: "#09090b", color: "white", padding: "2rem", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", fontFamily: "system-ui" }}'}>
70
+ <img src="/logo.svg" alt="Nasse Logo" ${answers.useTailwind ? 'className="w-24 h-24 mb-6"' : 'style={{ width: "96px", marginBottom: "1.5rem" }}'} />
71
+ <h1 ${answers.useTailwind ? 'className="text-4xl font-bold text-violet-500 mb-4"' : 'style={{ fontSize: "2.5rem", color: "#8b5cf6", margin: "0 0 1rem 0" }}'}>⚡ Nasse JS</h1>
72
+ <p ${answers.useTailwind ? 'className="text-gray-400 mb-8"' : 'style={{ color: "#a1a1aa", marginBottom: "2rem" }}'}>Welcome to your new app. Edit <code>app/index.tsx</code> to get started.</p>
73
+ <div ${answers.useTailwind ? 'className="p-4 bg-gray-900 rounded-lg border border-gray-800"' : 'style={{ padding: "1rem", background: "#18181b", borderRadius: "8px", border: "1px solid #27272a" }}'}>
74
+ <strong ${answers.useTailwind ? 'className="text-violet-400"' : 'style={{ color: "#a78bfa" }}'}>Data from server:</strong> {message}
75
+ </div>
76
+ </div>
77
+ );
78
+ }
79
+ `);
80
+
81
+ // app/_layout.tsx
82
+ const globalCssImport = answers.useTailwind ? `import '../assets/global.css';\n\n` : '';
83
+ fs.writeFileSync(path.join(targetDir, 'app', '_layout.tsx'), `import React from 'react';\n${globalCssImport}export default function RootLayout({ children }: { children: React.ReactNode }) {
84
+ return (
85
+ <html lang="en">
86
+ <head>
87
+ <meta charSet="utf-8" />
88
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
89
+ <link rel="icon" href="/favicon.ico" />
90
+ </head>
91
+ <body ${!answers.useTailwind ? 'style={{ margin: 0 }}' : ''}>
92
+ {children}
93
+ </body>
94
+ </html>
95
+ );
96
+ }
97
+ `);
98
+
99
+ // --- 2. GENERATE PUBLIC ASSETS ---
100
+
101
+ // Generate high-quality original SVGs
102
+ fs.writeFileSync(path.join(targetDir, 'public', 'favicon.svg'), `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 2L8 18H14L11 30L24 13H18L21 2Z" fill="#8b5cf6"/></svg>`);
103
+ fs.writeFileSync(path.join(targetDir, 'public', 'logo.svg'), `<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="boltGradient" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#a78bfa" /><stop offset="100%" stop-color="#8b5cf6" /></linearGradient></defs><path d="M55 5L25 55H45L35 95L75 40H55L65 5Z" fill="url(#boltGradient)"/></svg>`);
104
+ fs.writeFileSync(path.join(targetDir, 'public', 'globe.svg'), `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#52525b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/><path d="M2 12h20"/></svg>`);
105
+
106
+ // --- 3. GENERATE ROOT CONFIG FILES ---
107
+
108
+ // .gitignore (100% git compatible)
109
+ fs.writeFileSync(path.join(targetDir, '.gitignore'), `# See https://help.github.com/articles/ignoring-files/
110
+
111
+ # dependencies
112
+ /node_modules
113
+ /.pnp
114
+ .pnp.js
115
+
116
+ # testing
117
+ /coverage
118
+
119
+ # nasse
120
+ .nasse
121
+ /dist
122
+ /build
123
+
124
+ # misc
125
+ .DS_Store
126
+ *.pem
127
+
128
+ # debug
129
+ npm-debug.log*
130
+ yarn-debug.log*
131
+ yarn-error.log*
132
+
133
+ # local env files
134
+ .env.local
135
+ .env.development.local
136
+ .env.test.local
137
+ .env.production.local
138
+ `);
139
+
140
+ // .env.local
141
+ fs.writeFileSync(path.join(targetDir, '.env.local'), `# Local environment variables
142
+ NASSE_PUBLIC_API_URL=http://localhost:3000/api
143
+ `);
144
+
145
+ // AGENTS.md
146
+ fs.writeFileSync(path.join(targetDir, 'AGENTS.md'), `# Project Agents Guidelines
147
+
148
+ This document provides context for AI agents working on this Nasse JS project.
149
+
150
+ ## Stack
151
+ - Framework: Nasse JS (React 18+)
152
+ - Language: TypeScript
153
+ - Styling: ${answers.useTailwind ? 'Tailwind CSS' : 'Standard CSS'}
154
+
155
+ ## Rules
156
+ 1. Use \`app/index.tsx\` for the main page.
157
+ 2. Server-side logic goes into \`export const server\` within page components.
158
+ 3. Components belong in \`/components\`.
159
+ `);
160
+
161
+ // CLAUDE.md
162
+ fs.writeFileSync(path.join(targetDir, 'CLAUDE.md'), `# Claude Assistant Guidelines
163
+
164
+ When assisting with this Nasse JS project, please follow these rules:
165
+ - Prioritize React 18 functional components and hooks.
166
+ - Respect the file-based routing system in the \`app/\` directory.
167
+ - Use \`nasse.config.mjs\` for framework-specific settings.
168
+ `);
169
+
170
+ // jsconfig.json
171
+ fs.writeFileSync(path.join(targetDir, 'jsconfig.json'), JSON.stringify({
172
+ compilerOptions: {
173
+ baseUrl: ".",
174
+ paths: {
175
+ "@/*": ["./*"]
176
+ }
177
+ }
178
+ }, null, 2));
179
+
180
+ // eslint.config.mjs
181
+ fs.writeFileSync(path.join(targetDir, 'eslint.config.mjs'), `import js from "@eslint/js";
182
+ import reactPlugin from "eslint-plugin-react";
183
+
184
+ export default [
185
+ js.configs.recommended,
186
+ {
187
+ files: ["**/*.{js,jsx,mjs,cjs,ts,tsx}"],
188
+ plugins: {
189
+ react: reactPlugin,
190
+ },
191
+ rules: {
192
+ "react/react-in-jsx-scope": "off",
193
+ },
194
+ languageOptions: {
195
+ parserOptions: {
196
+ ecmaFeatures: {
197
+ jsx: true,
198
+ },
199
+ },
200
+ },
201
+ },
202
+ ];
203
+ `);
204
+
205
+ // nasse.config.mjs
206
+ fs.writeFileSync(path.join(targetDir, 'nasse.config.mjs'), `/** @type {import('nasse-js').NasseConfig} */
207
+ const nasseConfig = {
208
+ reactStrictMode: true,
209
+ // Add Nasse specific configurations here
210
+ };
211
+
212
+ export default nasseConfig;
213
+ `);
214
+
215
+ // nasse-env.d.ts
216
+ fs.writeFileSync(path.join(targetDir, 'nasse-env.d.ts'), `/// <reference types="nasse-js" />
217
+ /// <reference types="react" />
218
+ /// <reference types="react-dom" />
219
+
220
+ // NOTE: This file should not be edited
221
+ `);
222
+
223
+ // README.md
224
+ fs.writeFileSync(path.join(targetDir, 'README.md'), `# ${answers.projectName}
225
+
226
+ This is a modern web application built with [Nasse JS](https://github.com/nasse-nasse).
227
+
228
+ ## Getting Started
229
+
230
+ First, run the development server:
231
+
232
+ \`\`\`bash
233
+ npm run dev
234
+ # or
235
+ yarn dev
236
+ # or
237
+ pnpm dev
238
+ \`\`\`
239
+
240
+ Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
241
+
242
+ You can start editing the page by modifying \`app/index.tsx\`. The page auto-updates as you edit the file.
243
+ `);
244
+
245
+ // --- 4. OPTIONAL TAILWIND ---
246
+ if (answers.useTailwind) {
247
+ fs.writeFileSync(path.join(targetDir, 'tailwind.config.ts'), `import type { Config } from 'tailwindcss'
248
+
249
+ const config: Config = {
250
+ content: [
251
+ './app/**/*.{js,ts,jsx,tsx,mdx}',
252
+ './components/**/*.{js,ts,jsx,tsx,mdx}',
253
+ ],
254
+ theme: {
255
+ extend: {
256
+ colors: {
257
+ nasse: '#8b5cf6',
258
+ },
259
+ },
260
+ },
261
+ plugins: [],
262
+ }
263
+ export default config
264
+ `);
265
+
266
+ fs.writeFileSync(path.join(targetDir, 'postcss.config.mjs'), `export default {
267
+ plugins: {
268
+ tailwindcss: {},
269
+ autoprefixer: {},
270
+ },
271
+ };
272
+ `);
273
+
274
+ fs.writeFileSync(path.join(targetDir, 'assets', 'global.css'), `@tailwind base;
275
+ @tailwind components;
276
+ @tailwind utilities;
277
+
278
+ :root {
279
+ color-scheme: dark;
280
+ }
281
+ `);
282
+ }
283
+
284
+ // --- 5. PACKAGE.JSON & TSCONFIG ---
285
+ const dependencies: Record<string, string> = {
286
+ "react": "^18.2.0",
287
+ "react-dom": "^18.2.0"
288
+ };
289
+
290
+ const devDependencies: Record<string, string> = {
291
+ "@types/react": "^18.2.0",
292
+ "@types/react-dom": "^18.2.0",
293
+ "typescript": "^5.2.2",
294
+ "nasse-js": "^1.0.1"
295
+ };
296
+
297
+ if (answers.useTailwind) {
298
+ devDependencies["tailwindcss"] = "^3.4.1";
299
+ devDependencies["postcss"] = "^8.4.35";
300
+ devDependencies["autoprefixer"] = "^10.4.17";
301
+ }
302
+
303
+ const pkgJson = {
304
+ name: answers.projectName,
305
+ version: "0.1.0",
306
+ private: true,
307
+ type: "module",
308
+ scripts: {
309
+ dev: "nasse dev",
310
+ build: "nasse build",
311
+ start: "nasse start"
312
+ },
313
+ dependencies,
314
+ devDependencies
315
+ };
316
+
317
+ fs.writeFileSync(path.join(targetDir, 'package.json'), JSON.stringify(pkgJson, null, 2));
318
+
319
+ const tsconfig = {
320
+ "compilerOptions": {
321
+ "target": "ES2022",
322
+ "lib": ["DOM", "DOM.Iterable", "ES2022"],
323
+ "allowJs": true,
324
+ "skipLibCheck": true,
325
+ "strict": true,
326
+ "noEmit": true,
327
+ "esModuleInterop": true,
328
+ "module": "ESNext",
329
+ "moduleResolution": "bundler",
330
+ "resolveJsonModule": true,
331
+ "isolatedModules": true,
332
+ "jsx": "preserve",
333
+ "incremental": true,
334
+ "plugins": [
335
+ {
336
+ "name": "next"
337
+ }
338
+ ],
339
+ "paths": {
340
+ "@/*": ["./*"]
341
+ }
342
+ },
343
+ "include": ["nasse-env.d.ts", "**/*.ts", "**/*.tsx", ".nasse/types/**/*.ts"],
344
+ "exclude": ["node_modules"]
345
+ };
346
+
347
+ fs.writeFileSync(path.join(targetDir, 'tsconfig.json'), JSON.stringify(tsconfig, null, 2));
348
+
349
+ // --- 6. INITIALIZE GIT ---
350
+ try {
351
+ execSync('git init', { cwd: targetDir, stdio: 'ignore' });
352
+ execSync('git add .', { cwd: targetDir, stdio: 'ignore' });
353
+ // Don't commit yet to allow user to modify
354
+ } catch (e) {
355
+ // Git might not be installed
356
+ }
357
+
358
+ console.log(`\n${chalk.green('Success!')} Created ${answers.projectName}.`);
359
+ console.log(`Inside that directory, you can run:\n`);
360
+ console.log(` ${chalk.cyan('npm install')}`);
361
+ console.log(` ${chalk.cyan('npm run dev')}\n`);
362
+ console.log(`Happy coding! ⚡\n`);
363
+ }
364
+
365
+ if (process.argv[1] === fileURLToPath(import.meta.url)) {
366
+ init().catch((e) => {
367
+ console.error(e);
368
+ });
369
+ }
@@ -0,0 +1,116 @@
1
+ #!/usr/bin/env node
2
+
3
+ import { Command } from 'commander';
4
+ import chalk from 'chalk';
5
+ import path from 'path';
6
+ import fs from 'fs';
7
+ import { createServer } from 'vite';
8
+ import express from 'express';
9
+ import compression from 'compression';
10
+
11
+ const program = new Command();
12
+
13
+ program
14
+ .name('nasse')
15
+ .description('Nasse JS - The React Framework for Humans')
16
+ .version('1.0.1');
17
+
18
+ program
19
+ .command('dev')
20
+ .description('Start the development server')
21
+ .action(async () => {
22
+ console.log(`\n ${chalk.bold.hex('#8b5cf6')('⚡')} ${chalk.bold('NASSE JS')} v1.0.1\n`);
23
+
24
+ const app = express();
25
+ const root = process.cwd();
26
+
27
+ // Optimization: Compression for faster transfers
28
+ app.use(compression());
29
+
30
+ // Create Vite server in middleware mode
31
+ const vite = await createServer({
32
+ root,
33
+ server: { middlewareMode: true },
34
+ appType: 'custom',
35
+ resolve: {
36
+ alias: {
37
+ '@': path.resolve(root, './src')
38
+ }
39
+ },
40
+ // Optimization: Cache and Build settings
41
+ optimizeDeps: {
42
+ include: ['react', 'react-dom']
43
+ }
44
+ });
45
+
46
+ app.use(vite.middlewares);
47
+
48
+ app.use('*', async (req, res, next) => {
49
+ const url = req.originalUrl;
50
+
51
+ try {
52
+ // Resolve route (File-System Routing)
53
+ let baseDir = fs.existsSync(path.resolve(root, 'src/app')) ? 'src/app' : 'app';
54
+
55
+ let routePath = path.resolve(root, `${baseDir}/index.tsx`);
56
+ if (url !== '/' && url !== '') {
57
+ const potentialPath = path.resolve(root, `${baseDir}${url}.tsx`);
58
+ if (fs.existsSync(potentialPath)) {
59
+ routePath = potentialPath;
60
+ }
61
+ }
62
+
63
+ // Load modules
64
+ const layoutModule = await vite.ssrLoadModule(`/${baseDir}/_layout.tsx`);
65
+ const pageModule = await vite.ssrLoadModule(routePath.replace(root, ''));
66
+
67
+ const pageData = pageModule.server ? await pageModule.server() : {};
68
+ const meta = pageModule.meta || { title: 'Nasse App', description: 'Built with Nasse JS' };
69
+
70
+ const template = `<!DOCTYPE html>
71
+ <html lang="es">
72
+ <head>
73
+ <meta charset="UTF-8" />
74
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
75
+ <title>${meta.title}</title>
76
+ <meta name="description" content="${meta.description}" />
77
+ <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
78
+ </head>
79
+ <body>
80
+ <div id="nasse-root"></div>
81
+ <script type="module">
82
+ window.__NASSE_DATA__ = ${JSON.stringify(pageData)};
83
+ console.log('Nasse JS: Ready for millions.');
84
+ </script>
85
+ </body>
86
+ </html>`;
87
+
88
+ const html = await vite.transformIndexHtml(url, template);
89
+ res.status(200).set({
90
+ 'Content-Type': 'text/html',
91
+ 'Cache-Control': 'no-store' // Dev mode should not cache
92
+ }).end(html);
93
+
94
+ } catch (e: any) {
95
+ vite.ssrFixStacktrace(e);
96
+ next(e);
97
+ }
98
+ });
99
+
100
+ const port = 3000;
101
+ app.listen(port, () => {
102
+ console.log(` ${chalk.green('➜')} Local: ${chalk.cyan(`http://localhost:${port}/`)}`);
103
+ console.log(` ${chalk.green('➜')} Network: ${chalk.dim('use --host to expose')}\n`);
104
+ });
105
+ });
106
+
107
+ program
108
+ .command('create [name]')
109
+ .description('Create a new Nasse JS project')
110
+ .action(async (name) => {
111
+ const { init } = await import('./create.js');
112
+ // If name is provided, we might need to handle it, but for now init() handles its own prompts
113
+ await init();
114
+ });
115
+
116
+ program.parse(process.argv);