npm - nasse-js - Versions diffs - 1.0.0 - Mend

nasse-js 1.0.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.

Files changed (9) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,75 @@
+# ⚡ Ozone JS
+**The React Framework for Humans.**
+Ozone JS es un framework de React moderno, intuitivo y extremadamente rápido, diseñado para ofrecer la potencia de Next.js con una fracción de la complejidad. Cero configuración, máximo rendimiento.
+## ✨ Características Principales
+- 🚀 **Zero Config**: Empieza a desarrollar al instante. Todo está pre-configurado.
+- 📁 **File-System Routing**: Tu estructura de carpetas en `src/app` define tus rutas automáticamente.
+- 🌐 **Native SSR**: Soporte integrado para Server-Side Rendering mediante funciones `server()` exportadas.
+- 🎨 **Premium UX**: Estética moderna por defecto, optimizada para desarrolladores y usuarios finales.
+- 📦 **NPM Ready**: Andamiaje profesional listo para producción.
+## 🚀 Inicio Rápido
+Para crear un nuevo proyecto de Ozone JS:
+```bash
+npx create-ozone-app mi-proyecto
+cd mi-proyecto
+npm install
+npm run dev
+```
+## 📂 Estructura del Proyecto
+```text
+mi-proyecto/
+├── src/
+│   └── app/
+│       ├── _layout.tsx    # Layout raíz (compartido)
+│       └── index.tsx      # Página de inicio (/)
+├── public/                # Assets estáticos (logos, icons)
+├── ozone.config.mjs       # Configuración del framework
+└── package.json
+```
+## 🛠️ Cómo funciona
+### 1. El Layout Compartido (`_layout.tsx`)
+Define la cáscara HTML de tu aplicación. Es un componente de React estándar que recibe `children`.
+```tsx
+export default function RootLayout({ children }) {
+  return (
+    <html lang="es">
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+### 2. Páginas y Data Fetching (`index.tsx`)
+Puedes exportar una función `server` para cargar datos en el servidor antes de renderizar el componente.
+```tsx
+export const server = async () => {
+  return { message: "Hola desde el servidor" };
+};
+export default function Home({ message }) {
+  return <h1>{message}</h1>;
+}
+```
+## 💻 Comandos del CLI
+- `ozone dev`: Inicia el servidor de desarrollo con HMR.
+- `ozone build`: Prepara la aplicación para producción (Próximamente).
+- `ozone start`: Levanta el servidor de producción.
+---
+Diseñado con ❤️ para millones de desarrolladores. **Ozone JS** es el futuro de la web simple.

package/dist/cli/create.js ADDED Viewed

@@ -0,0 +1,335 @@
+#!/usr/bin/env node
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import chalk from 'chalk';
+import inquirer from 'inquirer';
+import { execSync } from 'child_process';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+async function init() {
+    console.log(`\n  ${chalk.bold.hex('#8b5cf6')('⚡')} ${chalk.bold('OZONE JS')} - The React Framework for Humans\n`);
+    const answers = await inquirer.prompt([
+        {
+            type: 'input',
+            name: 'projectName',
+            message: 'What is your project named?',
+            default: 'my-ozone-app',
+            validate: (input) => {
+                if (/^([A-Za-z\-\_\d])+$/.test(input))
+                    return true;
+                return 'Project name may only include letters, numbers, underscores and dashes.';
+            }
+        },
+        {
+            type: 'confirm',
+            name: 'useTailwind',
+            message: 'Would you like to use Tailwind CSS?',
+            default: true
+        }
+    ]);
+    const targetDir = path.join(process.cwd(), answers.projectName);
+    if (fs.existsSync(targetDir)) {
+        console.error(chalk.red(`\nDirectory ${answers.projectName} already exists. Please choose another name.\n`));
+        process.exit(1);
+    }
+    console.log(`\nCreating a new Ozone app in ${chalk.green(targetDir)}.`);
+    fs.mkdirSync(targetDir, { recursive: true });
+    // Create standard folders
+    fs.mkdirSync(path.join(targetDir, 'app'), { recursive: true });
+    fs.mkdirSync(path.join(targetDir, 'public'), { recursive: true });
+    fs.mkdirSync(path.join(targetDir, 'components'), { recursive: true });
+    fs.mkdirSync(path.join(targetDir, 'assets'), { recursive: true });
+    // --- 1. GENERATE APP FILES ---
+    // app/index.tsx
+    fs.writeFileSync(path.join(targetDir, 'app', 'index.tsx'), `import React from 'react';
+export const meta = {
+  title: "Welcome to Ozone JS",
+  description: "The React framework for humans."
+};
+export const server = async () => {
+  return {
+    message: "Server-side loaded data!"
+  };
+};
+export default function Home({ message }: { message: string }) {
+  return (
+    <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" }}'}>
+      <img src="/logo.svg" alt="Ozone Logo" ${answers.useTailwind ? 'className="w-24 h-24 mb-6"' : 'style={{ width: "96px", marginBottom: "1.5rem" }}'} />
+      <h1 ${answers.useTailwind ? 'className="text-4xl font-bold text-violet-500 mb-4"' : 'style={{ fontSize: "2.5rem", color: "#8b5cf6", margin: "0 0 1rem 0" }}'}>⚡ Ozone JS</h1>
+      <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>
+      <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" }}'}>
+        <strong ${answers.useTailwind ? 'className="text-violet-400"' : 'style={{ color: "#a78bfa" }}'}>Data from server:</strong> {message}
+      </div>
+    </div>
+  );
+}
+`);
+    // app/_layout.tsx
+    const globalCssImport = answers.useTailwind ? `import '../assets/global.css';\n\n` : '';
+    fs.writeFileSync(path.join(targetDir, 'app', '_layout.tsx'), `import React from 'react';\n${globalCssImport}export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </head>
+      <body ${!answers.useTailwind ? 'style={{ margin: 0 }}' : ''}>
+        {children}
+      </body>
+    </html>
+  );
+}
+`);
+    // --- 2. GENERATE PUBLIC ASSETS ---
+    // public/favicon.ico (minimal base64 SVG or just an SVG masquerading as ICO for modern browsers)
+    fs.writeFileSync(path.join(targetDir, 'public', 'favicon.ico'), `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">⚡</text></svg>`);
+    // public/logo.svg
+    fs.writeFileSync(path.join(targetDir, 'public', 'logo.svg'), `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#8b5cf6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>`);
+    // public/globe.svg
+    fs.writeFileSync(path.join(targetDir, 'public', 'globe.svg'), `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>`);
+    // --- 3. GENERATE ROOT CONFIG FILES ---
+    // .gitignore (100% git compatible)
+    fs.writeFileSync(path.join(targetDir, '.gitignore'), `# See https://help.github.com/articles/ignoring-files/
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+# testing
+/coverage
+# ozone
+.ozone
+/dist
+/build
+# misc
+.DS_Store
+*.pem
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+`);
+    // .env.local
+    fs.writeFileSync(path.join(targetDir, '.env.local'), `# Local environment variables
+OZONE_PUBLIC_API_URL=http://localhost:3000/api
+`);
+    // AGENTS.md
+    fs.writeFileSync(path.join(targetDir, 'AGENTS.md'), `# Project Agents Guidelines
+This document provides context for AI agents working on this Ozone JS project.
+## Stack
+- Framework: Ozone JS (React 18+)
+- Language: TypeScript
+- Styling: ${answers.useTailwind ? 'Tailwind CSS' : 'Standard CSS'}
+## Rules
+1. Use \`app/index.tsx\` for the main page.
+2. Server-side logic goes into \`export const server\` within page components.
+3. Components belong in \`/components\`.
+`);
+    // CLAUDE.md
+    fs.writeFileSync(path.join(targetDir, 'CLAUDE.md'), `# Claude Assistant Guidelines
+When assisting with this Ozone JS project, please follow these rules:
+- Prioritize React 18 functional components and hooks.
+- Respect the file-based routing system in the \`app/\` directory.
+- Use \`ozone.config.mjs\` for framework-specific settings.
+`);
+    // jsconfig.json
+    fs.writeFileSync(path.join(targetDir, 'jsconfig.json'), JSON.stringify({
+        compilerOptions: {
+            baseUrl: ".",
+            paths: {
+                "@/*": ["./*"]
+            }
+        }
+    }, null, 2));
+    // eslint.config.mjs
+    fs.writeFileSync(path.join(targetDir, 'eslint.config.mjs'), `import js from "@eslint/js";
+import reactPlugin from "eslint-plugin-react";
+export default [
+  js.configs.recommended,
+  {
+    files: ["**/*.{js,jsx,mjs,cjs,ts,tsx}"],
+    plugins: {
+      react: reactPlugin,
+    },
+    rules: {
+      "react/react-in-jsx-scope": "off",
+    },
+    languageOptions: {
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+  },
+];
+`);
+    // ozone.config.mjs
+    fs.writeFileSync(path.join(targetDir, 'ozone.config.mjs'), `/** @type {import('ozone-js').OzoneConfig} */
+const ozoneConfig = {
+  reactStrictMode: true,
+  // Add Ozone specific configurations here
+};
+export default ozoneConfig;
+`);
+    // ozone-env.d.ts
+    fs.writeFileSync(path.join(targetDir, 'ozone-env.d.ts'), `/// <reference types="ozone-js" />
+/// <reference types="react" />
+/// <reference types="react-dom" />
+// NOTE: This file should not be edited
+`);
+    // README.md
+    fs.writeFileSync(path.join(targetDir, 'README.md'), `# ${answers.projectName}
+This is a modern web application built with [Ozone JS](https://github.com/nasse-ozone).
+## Getting Started
+First, run the development server:
+\`\`\`bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+\`\`\`
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+You can start editing the page by modifying \`app/index.tsx\`. The page auto-updates as you edit the file.
+`);
+    // --- 4. OPTIONAL TAILWIND ---
+    if (answers.useTailwind) {
+        fs.writeFileSync(path.join(targetDir, 'tailwind.config.ts'), `import type { Config } from 'tailwindcss'
+const config: Config = {
+  content: [
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        ozone: '#8b5cf6',
+      },
+    },
+  },
+  plugins: [],
+}
+export default config
+`);
+        fs.writeFileSync(path.join(targetDir, 'postcss.config.mjs'), `export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+`);
+        fs.writeFileSync(path.join(targetDir, 'assets', 'global.css'), `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+:root {
+  color-scheme: dark;
+}
+`);
+    }
+    // --- 5. PACKAGE.JSON & TSCONFIG ---
+    const dependencies = {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+    };
+    const devDependencies = {
+        "@types/react": "^18.2.0",
+        "@types/react-dom": "^18.2.0",
+        "typescript": "^5.2.2",
+        "ozone-js": "file:.."
+    };
+    if (answers.useTailwind) {
+        devDependencies["tailwindcss"] = "^3.4.1";
+        devDependencies["postcss"] = "^8.4.35";
+        devDependencies["autoprefixer"] = "^10.4.17";
+    }
+    const pkgJson = {
+        name: answers.projectName,
+        version: "0.1.0",
+        private: true,
+        type: "module",
+        scripts: {
+            dev: "ozone dev",
+            build: "ozone build",
+            start: "ozone start"
+        },
+        dependencies,
+        devDependencies
+    };
+    fs.writeFileSync(path.join(targetDir, 'package.json'), JSON.stringify(pkgJson, null, 2));
+    const tsconfig = {
+        "compilerOptions": {
+            "target": "ES2022",
+            "lib": ["DOM", "DOM.Iterable", "ES2022"],
+            "allowJs": true,
+            "skipLibCheck": true,
+            "strict": true,
+            "noEmit": true,
+            "esModuleInterop": true,
+            "module": "ESNext",
+            "moduleResolution": "bundler",
+            "resolveJsonModule": true,
+            "isolatedModules": true,
+            "jsx": "preserve",
+            "incremental": true,
+            "plugins": [
+                {
+                    "name": "next"
+                }
+            ],
+            "paths": {
+                "@/*": ["./*"]
+            }
+        },
+        "include": ["ozone-env.d.ts", "**/*.ts", "**/*.tsx", ".ozone/types/**/*.ts"],
+        "exclude": ["node_modules"]
+    };
+    fs.writeFileSync(path.join(targetDir, 'tsconfig.json'), JSON.stringify(tsconfig, null, 2));
+    // --- 6. INITIALIZE GIT ---
+    try {
+        execSync('git init', { cwd: targetDir, stdio: 'ignore' });
+        execSync('git add .', { cwd: targetDir, stdio: 'ignore' });
+        // Don't commit yet to allow user to modify
+    }
+    catch (e) {
+        // Git might not be installed
+    }
+    console.log(`\n${chalk.green('Success!')} Created ${answers.projectName}.`);
+    console.log(`Inside that directory, you can run:\n`);
+    console.log(`  ${chalk.cyan('npm install')}`);
+    console.log(`  ${chalk.cyan('npm run dev')}\n`);
+    console.log(`Happy coding! ⚡\n`);
+}
+init().catch((e) => {
+    console.error(e);
+});

package/dist/cli/ozone.js ADDED Viewed

@@ -0,0 +1,79 @@
+#!/usr/bin/env node
+import { Command } from 'commander';
+import chalk from 'chalk';
+import path from 'path';
+import { createServer } from 'vite';
+import express from 'express';
+const program = new Command();
+program
+    .name('ozone')
+    .description('Ozone JS - The React Framework for Humans')
+    .version('1.0.0');
+program
+    .command('dev')
+    .description('Start the development server')
+    .action(async () => {
+    console.log(`\n  ${chalk.bold.hex('#8b5cf6')('⚡')} ${chalk.bold('OZONE JS')} v1.0.0\n`);
+    const app = express();
+    // Create Vite server in middleware mode
+    const vite = await createServer({
+        server: { middlewareMode: true },
+        appType: 'custom',
+        resolve: {
+            alias: {
+                '@': path.resolve(process.cwd(), './app')
+            }
+        }
+    });
+    // Use vite's connect instance as middleware
+    app.use(vite.middlewares);
+    app.use('*', async (req, res, next) => {
+        const url = req.originalUrl;
+        try {
+            // In a complete implementation, this would map the URL to the file system route,
+            // evaluate the 'server' export, inject it into the HTML, and SSR the component.
+            // For this minimal version, we will serve a basic HTML shell that loads client entry.
+            // This is a placeholder for the actual SSR logic.
+            const template = `<!DOCTYPE html>
+        <html lang="en">
+          <head>
+            <meta charset="UTF-8" />
+            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+            <title>Ozone App</title>
+            <!-- In a real app we'd inject vite client and the entrypoint -->
+          </head>
+          <body>
+            <div id="root"></div>
+            <script type="module">
+              // Import the file system router and mount the app
+              console.log('Ozone JS client mounted!');
+            </script>
+          </body>
+        </html>`;
+            const html = await vite.transformIndexHtml(url, template);
+            res.status(200).set({ 'Content-Type': 'text/html' }).end(html);
+        }
+        catch (e) {
+            vite.ssrFixStacktrace(e);
+            next(e);
+        }
+    });
+    const port = 3000;
+    app.listen(port, () => {
+        console.log(`  ${chalk.green('➜')}  Local:   ${chalk.cyan(`http://localhost:${port}/`)}`);
+        console.log(`  ${chalk.green('➜')}  Network: ${chalk.dim('use --host to expose')}\n`);
+    });
+});
+program
+    .command('build')
+    .description('Build the app for production')
+    .action(() => {
+    console.log(chalk.yellow('\nBuilding for production is not implemented in this minimal prototype.\n'));
+});
+program
+    .command('start')
+    .description('Start the production server')
+    .action(() => {
+    console.log(chalk.yellow('\nProduction server is not implemented in this minimal prototype.\n'));
+});
+program.parse(process.argv);

package/ozone.config.mjs ADDED Viewed

@@ -0,0 +1,9 @@
+/** @type {import('@nasse-ozone/core').OzoneConfig} */
+const ozoneConfig = {
+  reactStrictMode: true,
+  compiler: {
+    styledComponents: true,
+  },
+};
+export default ozoneConfig;

package/package.json ADDED Viewed

@@ -0,0 +1,41 @@
+{
+  "name": "nasse-js",
+  "version": "1.0.0",
+  "description": "The React framework for humans",
+  "type": "module",
+  "bin": {
+    "create-ozone-app": "./dist/cli/create.js",
+    "ozone": "./dist/cli/ozone.js"
+  },
+  "files": [
+    "dist",
+    "public",
+    "package.json",
+    "README.md",
+    "ozone.config.mjs"
+  ],
+  "scripts": {
+    "build": "tsc"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "commander": "^11.1.0",
+    "compression": "^1.8.1",
+    "express": "^4.18.2",
+    "inquirer": "^9.2.12",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.0",
+    "sirv": "^2.0.4",
+    "vite": "^5.1.0"
+  },
+  "devDependencies": {
+    "@types/compression": "^1.8.1",
+    "@types/express": "^4.17.21",
+    "@types/inquirer": "^9.0.9",
+    "@types/node": "^20.11.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "typescript": "^5.3.0"
+  }
+}

package/public/favicon.ico ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">⚡</text></svg>

package/public/favicon.svg ADDED Viewed

@@ -0,0 +1,3 @@
+<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>

package/public/globe.svg ADDED Viewed

@@ -0,0 +1,5 @@
+<svg width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="#52525b" stroke-width="1.5" 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>

package/public/logo.svg ADDED Viewed

@@ -0,0 +1,16 @@
+<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>
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
+      <feMerge>
+        <feMergeNode in="coloredBlur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+  <path d="M55 5L25 55H45L35 95L75 40H55L65 5Z" fill="url(#boltGradient)" filter="url(#glow)"/>
+</svg>