@seip/blue-bird 0.2.6 → 0.3.1

package/.env_example

@@ -8,6 +8,6 @@ TITLE="Blue Bird"
 VERSION="1.0.0"
 LANGMETA="en"
 HOST="http://localhost"
-PORT=3001
+PORT=3000
 STATIC_PATH="frontend/public"
 JWT_SECRET="JWT_SECRET"

package/backend/index.js

@@ -1,10 +1,11 @@
 import App from "@seip/blue-bird/core/app.js";
-import routerUsers from "./routes/app.js";
+import routerApiExample from "./routes/api.js";
+import routerFrontendExample from "./routes/frontend.js";
 
 const app = new App({
-    routes: [routerUsers],
+    routes: [routerApiExample, routerFrontendExample],
     cors: [],
-    middlewares: [], 
+    middlewares: [],
     host: "http://localhost"
 })
 

package/backend/routes/api.js

@@ -0,0 +1,34 @@
+import Router from "@seip/blue-bird/core/router.js"
+import Validator from "@seip/blue-bird/core/validate.js"
+
+
+const routerApiExample = new Router("/")
+
+routerApiExample.get("/users", (req, res) => {
+    const users = [
+        {
+            name: "John Doe",
+            email: "john.doe@example.com",
+        },
+        {
+            name: "Jane Doe2",
+            email: "jane.doe2@example.com",
+        },
+    ]
+    res.json(users)
+})
+
+const loginSchema = {
+    email: { required: true, email: true },
+    password: { required: true, min: 6 }
+};
+
+const loginValidator = new Validator(loginSchema, 'es');
+
+routerApiExample.post('/login', loginValidator.middleware(), (req, res) => {
+    res.json({ message: 'Login successful' });
+});
+
+
+
+export default routerApiExample

package/backend/routes/frontend.js

@@ -0,0 +1,51 @@
+import Router from "@seip/blue-bird/core/router.js"
+import Template from "@seip/blue-bird/core/template.js"
+
+const routerFrontendExample = new Router();
+
+const routesFrontend = [
+    {
+        path: "/",
+        component: "Home",
+        meta: { titleMeta: "Home - Blue Bird", descriptionMeta: "Welcome to Blue Bird" },
+        props: { id: 1, name: "Name" }
+
+    },
+    {
+        path: "/about",
+        component: "About",
+        meta: { titleMeta: "About - Blue Bird", descriptionMeta: "About blue bird" },
+        props: { id: 2, name: "Name 2" }
+    },
+
+];
+routesFrontend.forEach(route_ => {
+    routerFrontendExample.get(route_.path, (req, res) => {
+        const dynamicProps = {
+            props: {
+                params: req.params,
+                query: req.query,
+                ...route_.props ?? {}
+            }
+        };
+
+        return Template.renderReact(res, route_.component, dynamicProps, {
+            metaTags: route_.meta,
+            scriptsInBody: [{ src: "https://cdn.tailwindcss.com" }]
+        });
+    });
+});
+
+
+routerFrontendExample.get("*", (req, res) => {
+    const response = Template.renderReact(res, "App", { title: "404 - not found" },
+        {
+            scriptsInBody: [
+                { "src": "https://cdn.tailwindcss.com" }
+            ]
+        }
+    );
+    return response;
+})
+
+export default routerFrontendExample;

package/core/app.js

@@ -9,7 +9,7 @@ import helmet from "helmet"
 import Config from "./config.js"
 import Logger from "./logger.js"
 import Debug from "./debug.js"
-import Swagger from "./swagger.js"
+
 
 const __dirname = Config.dirname()
 const props = Config.props()
@@ -35,7 +35,7 @@ class App {
      * @param {boolean|Object} [options.rateLimit=false] - Enable global rate limiting.
      * @param {boolean|Object} [options.helmet=true] - Enable Helmet security headers.
      * @param {boolean} [options.xssClean=true] - Enable XSS body sanitization.
-     * @param {boolean|Object} [options.swagger=true] - Enable swagger
+     * @param {boolean|Object} [options.swagger=false] - Enable swagger
      * @example 
      * const app = new App({
      *     routes: [],
@@ -86,7 +86,7 @@ class App {
         rateLimit: false,
         helmet: false,
         xssClean: true,
-        swagger: true
+        swagger: false
 
     }) {
         this.app = express()
@@ -104,7 +104,7 @@ class App {
         this.rateLimit = options.rateLimit ?? false
         this.helmet = options.helmet ?? true
         this.xssClean = options.xssClean ?? true
-        this.swagger = options.swagger ?? true
+        this.swagger = options.swagger ?? false
         this.dispatch()
 
     }
@@ -207,7 +207,7 @@ class App {
         this.errorHandler();
 
         if (this.swagger) {
-
+            const Swagger = import("./swagger.js")
             const defaultSwaggerOptions = {
                 info: {
                     title: "Blue Bird API",

package/core/cli/init.js

@@ -68,7 +68,8 @@ class ProjectInit {
                 "react": "blue-bird react",
                 "init": "blue-bird",
                 "route": "blue-bird route",
-                "component": "blue-bird component"
+                "component": "blue-bird component",
+                "swagger-install": "blue-bird swagger-install"
             };
 
             let updated = false;
@@ -111,6 +112,7 @@ const command = args[0];
 if (command === "react") import("./react.js");
 else if (command === "route") import("./route.js")
 else if (command === "component") import("./component.js")
+else if (command === "swagger-install") import("./swagger.js")
 else initializer.run();
 
 

package/core/cli/swagger.js

@@ -0,0 +1,40 @@
+import { execSync } from "node:child_process";
+
+class SwaggerCli {
+    install() {
+        const dependencies = this.checkDependencies();
+        if (dependencies.missingDependencies.length > 0) {
+            console.log("Installing dependencies...");
+            console.log(`Installing swagger-jsdoc...`);
+            execSync(`npm install swagger-jsdoc@6.2.8`, { stdio: "inherit" });
+            console.log(`Installing swagger-ui-express...`);
+            execSync(`npm install swagger-ui-express@5.0.1`, { stdio: "inherit" });
+        }
+    }
+    checkDependencies() {
+        const dependencies = [
+            "swagger-jsdoc",
+            "swagger-ui-express"
+        ];
+        const missingDependencies = [];
+        dependencies.forEach(dependency => {
+            if (!this.checkDependency(dependency)) {
+                missingDependencies.push(dependency);
+            }
+        });
+        return {
+            missingDependencies
+        };
+    }
+    checkDependency(dependency) {
+        try {
+            require.resolve(dependency);
+            return true;
+        } catch (error) {
+            return false;
+        }
+    }
+}
+
+const swaggerExecutor = new SwaggerCli();
+swaggerExecutor.install();

package/core/template.js

@@ -127,7 +127,7 @@ class Template {
  */
     static renderReact(res, component = "App", componentProps = {}, options = {}) {
         try {
-            const {
+            let {
                 langHtml = options.langHtml || props.langMeta || "en",
                 classBody = "body",
                 head = [],
@@ -135,20 +135,25 @@ class Template {
                 scriptsInHead = [],
                 scriptsInBody = [],
                 cache = true,
-                metaTags = {
-                    titleMeta: options.metaTags?.titleMeta || props.titleMeta,
-                    descriptionMeta: options.metaTags?.descriptionMeta || props.descriptionMeta,
-                    keywordsMeta: options.metaTags?.keywordsMeta || props.keywordsMeta,
-                    authorMeta: options.metaTags?.authorMeta || props.authorMeta,
-                    langMeta: options.metaTags?.langMeta || props.langMeta,
-                },
+                metaTags
             } = options;
+            const metaTagsDefault = {
+                titleMeta: props.titleMeta,
+                descriptionMeta: props.descriptionMeta,
+                keywordsMeta: props.keywordsMeta,
+                authorMeta: props.authorMeta,
+                langMeta: props.langMeta,
+            }
+            metaTags = {
+                ...metaTagsDefault,
+                ...metaTags
+            }
 
             res.type("text/html");
             res.status(200);
-
-            if (cache && CACHE_TEMPLATE[component]) {
-                return res.send(CACHE_TEMPLATE[component]);
+            const cacheKey = `${component}_${metaTags.titleMeta}`;
+            if (cache && CACHE_TEMPLATE[cacheKey]) {
+                return res.send(CACHE_TEMPLATE[cacheKey]);
             }
 
             const title = this.escapeHtml(metaTags.titleMeta || "");
@@ -190,7 +195,7 @@ class Template {
                 .replace(/__SCRIPTS_BODY__/g, scriptsBodyTags);
 
             html = this.minifyHtml(html);
-            CACHE_TEMPLATE[component] = html;
+            CACHE_TEMPLATE[cacheKey] = html;
             return res.send(html);
 
         } catch (error) {
@@ -280,4 +285,4 @@ window.__vite_plugin_react_preamble_installed__ = true;
     }
 }
 
-export default Template;
+export default Template;

package/frontend/index.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="__LANG__">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -11,10 +12,12 @@
     __HEAD_OPTIONS__
     __LINK_STYLES__
     __SCRIPTS_HEAD__
+    __VITE_ASSETS__
 </head>
+
 <body class="__CLASS_BODY__">
     <div id="root" data-react-component="__COMPONENT__" data-props='__PROPS__'></div>
-    __VITE_ASSETS__
     __SCRIPTS_BODY__
 </body>
+
 </html>

package/frontend/resources/js/App.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
+import Home from './pages/Home';
+import About from './pages/About';
+
+export default function App(_props) {
+  const {
+    component,
+    props
+  } = _props;
+
+  console.log(`Check props and component `)
+  console.log(`Component: ${component}`)
+  console.log(props)
+
+  return (
+    <Router>
+      <div
+        className="bg-white text-gray-900"
+      >
+        <nav
+          className='bg-white text-gray-900 border border-gray-200 px-4 py-4 flex justify-between items-center gap-4 sticky top-0 z-10'
+        >
+          <div className='font-bold text-xl text-blue-600'>
+            Blue Bird
+          </div>
+          <div className='flex justify-between items-center gap-4'>
+            <Link to="/" className='text-gray-500 hover:text-gray-900'>Home</Link>
+            <Link to="/about" className='text-gray-500 hover:text-gray-900'>About</Link>
+          </div>
+        </nav>
+        <main className='max-w-7xl mx-auto'>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/about" element={<About />} />
+          </Routes>
+        </main>
+      </div>
+    </Router>
+  );
+}
+

package/frontend/resources/js/Main.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('[data-react-component]').forEach(el => {
+      const component = {
+        component:el.dataset.reactComponent
+      };
+      const props = JSON.parse(el.dataset.props || '{}'); 
+      const allProps={
+        ...props,
+        ...component
+      }
+        createRoot(el).render(<App {...allProps} />); 
+    });   
+});

package/frontend/resources/js/pages/About.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export default function About() {
+  return (
+    <div className='p-4'>
+      <h1 className='text-xl font-bold text-gray-900 mb-4'>About Blue Bird</h1>
+      <p className='text-gray-500 leading-1.6'>
+        Blue Bird is a modern framework designed to bridge the gap between backend routing and frontend interactivity.
+        It provides a seamless developer experience for building fast, reactive web applications.
+      </p>
+      <p className='text-red-500 text-xl mt-8  '>
+        Check your console JS
+      </p>
+    </div>
+  );
+}

package/frontend/resources/js/pages/Home.jsx

@@ -0,0 +1,68 @@
+import React, { useEffect } from 'react';
+
+export default function Home() {
+  useEffect(() => {
+    // Example API call to the backend
+    fetch("http://localhost:3000/login", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        email: "example@example.com",
+        password: "myPassword123"
+      }),
+    })
+      .then((response) => response.json())
+      .then((data) => console.log('Backend response:', data))
+      .catch((error) => console.error('Error fetching from backend:', error));
+  }, []);
+
+  return (
+    <div className='text-center p-4'>
+      <header className='mb-4'>
+        <h1 className='text-3xl font-bold bg-gradient-to-r from-blue-500 to-blue-600 bg-clip-text text-transparent mb-4'>
+          Welcome to Blue Bird
+        </h1>
+        <p className='text-gray-500 max-w-600px mx-auto'>
+          The elegant, fast, and weightless framework for modern web development.
+        </p>
+      </header>
+
+      <div className='flex gap-4 justify-center mb-8'>
+        <a
+          href="https://seip25.github.io/Blue-bird/en.html"
+          target="_blank"
+          rel="noopener noreferrer"
+          className='bg-blue-600 text-white px-4 py-2 rounded-lg font-semibold transition-colors hover:bg-blue-400'
+        >
+          Documentation (Eng)
+        </a>
+        <a
+          href="https://seip25.github.io/Blue-bird/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className='bg-blue-50 text-blue-500 px-4 py-2 rounded-lg font-semibold transition-colors hover:bg-blue-100  '
+        >
+          Documentación (Esp)
+
+        </a>
+      </div>
+
+      <div className='mt-8 grid grid-cols-1 md:grid-cols-3 gap-4 max-w-1000px mx-auto'>
+        <div className='p-4 rounded-lg bg-gray-50 shadow-sm'>
+          <h3 className='text-blue-500 font-semibold text-xl mb-4'>Lightweight</h3>
+          <p>Built with performance and simplicity in mind.</p>
+        </div>
+        <div className='p-4 rounded-lg bg-gray-50 shadow-sm'>
+          <h3 className='text-blue-500 font-semibold text-xl mb-4'>React Powered</h3>
+          <p>Full React + Vite integration .</p>
+        </div>
+        <div className='p-4 rounded-lg bg-gray-50 shadow-sm'>
+          <h3 className='text-blue-500 font-semibold text-xl mb-4'>Express Backend</h3>
+          <p>Robust and scalable backend architecture.</p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seip/blue-bird",
-  "version": "0.2.6",
+  "version": "0.3.1",
   "description": "Express + React opinionated framework with SPA or API architecture and built-in JWT auth",
   "type": "module",
   "bin": {
@@ -29,7 +29,10 @@
     "react": "node core/cli/react.js",
     "init": "node core/cli/init.js",
     "route": "node core/cli/route.js",
-    "component": "node core/cli/component.js"
+    "component": "node core/cli/component.js",
+    "swagger-install": "node core/cli/swagger.js",
+    "vite:dev": "vite",
+    "vite:build": "vite build"
   },
   "dependencies": {
     "chalk": "^5.6.2",
@@ -40,8 +43,13 @@
     "helmet": "^8.1.0",
     "jsonwebtoken": "^9.0.2",
     "multer": "^2.0.2",
-    "swagger-jsdoc": "^6.2.8",
-    "swagger-ui-express": "^5.0.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router-dom": "7.13.1",
     "xss": "^1.0.15"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.0",
+    "vite": "7.3.1"
   }
 }

package/vite.config.js

@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  root: path.resolve(__dirname, 'frontend/resources/js'), 
+  base: '/build/',
+  build: {
+    outDir: path.resolve(__dirname, 'frontend/public/build'),
+    emptyOutDir: true,
+    manifest: true,
+    rollupOptions: {
+      input: path.resolve(__dirname, 'frontend/resources/js/Main.jsx'),
+    },
+  },
+  server: {
+    origin: 'http://localhost:5173',
+    strictPort: true,
+    cors: true,
+  },
+});

package/backend/routes/app.js

@@ -1,99 +0,0 @@
-import Router from "@seip/blue-bird/core/router.js"
-import Validator from "@seip/blue-bird/core/validate.js"
-import Template from "@seip/blue-bird/core/template.js"
-
-
-const routerUsers = new Router("/")
-
-//Example swagger docs 
-/**
- * @swagger
- * /users:
- *   get:
- *     summary: Get all users
- *     tags: [Users]
- *     responses:
- *       200:
- *         description: List of users
- *        
- */
-routerUsers.get("/users", (req, res) => {
-    const users = [
-        {
-            name: "John Doe",
-            email: "john.doe@example.com",
-        },
-        {
-            name: "Jane Doe2",
-            email: "jane.doe2@example.com",
-        },
-    ]
-    res.json(users)
-})
-
-const loginSchema = {
-    email: { required: true, email: true },
-    password: { required: true, min: 6 }
-};
-
-const loginValidator = new Validator(loginSchema, 'es');
- /**
- * @swagger
- * /login:
- *   post:
- *     summary: Login 
- *     tags: [Users]
- *     description: Login with email and password
- *     requestBody:
- *       required: true
- *       content:
- *         application/json:
- *           schema:
- *             type: object
- *             required:
- *               - email
- *               - password
- *             properties:
- *               email:
- *                 type: string
- *                 format: email
- *                 example: example@email.com
- *               password:
- *                 type: string
- *                 format: password
- *                 example: 123456
- *     responses:
- *       200:
- *         description: Login success
- *         
- *       400:
- *         description: Error  
- *       401:
- *         description: Error in request
- */
- 
-routerUsers.post('/login', loginValidator.middleware(), (req, res) => {
-    res.json({ message: 'Login successful' });
-});
-
-//Example renderReact with customized meta Tags 
-routerUsers.get("/about", (req, res) => {
-    const response = Template.renderReact(res, "About", { title: "About Example title" }, {
-        metaTags: {
-            titleMeta: "About Title",
-            descriptionMeta: "About description",
-            keywordsMeta: "About,express, react, framework",
-            authorMeta: "Blue Bird",
-            langMeta: "es"
-        }
-    });
-    return response;
-})
-
-routerUsers.get("*", (req, res) => {
-    const response = Template.renderReact(res, "App", { title: "Example title" });
-    return response;
-})
-
-
-export default routerUsers