tagliatelle 1.0.0-beta.1

package/dist/tagliatelle.js

@@ -0,0 +1,684 @@
+/**
+ * 🍝 <Tag>liatelle.js - The Declarative Backend Framework
+ *
+ * This is the secret sauce that makes JSX work for backend routing.
+ * It transforms your beautiful component tree into a blazing-fast Fastify server.
+ */
+import Fastify from 'fastify';
+import { safeMerge, sanitizeErrorMessage, withTimeout } from './security.js';
+// ═══════════════════════════════════════════════════════════════════════════
+// 🎨 CONSOLE COLORS
+// ═══════════════════════════════════════════════════════════════════════════
+const c = {
+    reset: '\x1b[0m',
+    bold: '\x1b[1m',
+    dim: '\x1b[2m',
+    // Colors
+    red: '\x1b[31m',
+    green: '\x1b[32m',
+    yellow: '\x1b[33m',
+    blue: '\x1b[34m',
+    magenta: '\x1b[35m',
+    cyan: '\x1b[36m',
+    white: '\x1b[37m',
+    gray: '\x1b[90m',
+    // Bright colors
+    brightRed: '\x1b[91m',
+    brightGreen: '\x1b[92m',
+    brightYellow: '\x1b[93m',
+    brightBlue: '\x1b[94m',
+    brightMagenta: '\x1b[95m',
+    brightCyan: '\x1b[96m',
+};
+// Method colors
+const methodColor = (method) => {
+    switch (method) {
+        case 'GET': return c.brightGreen;
+        case 'POST': return c.brightYellow;
+        case 'PUT': return c.brightBlue;
+        case 'PATCH': return c.brightCyan;
+        case 'DELETE': return c.brightRed;
+        default: return c.white;
+    }
+};
+// Status code color
+const statusColor = (code) => {
+    if (code < 200)
+        return c.gray;
+    if (code < 300)
+        return c.green;
+    if (code < 400)
+        return c.cyan;
+    if (code < 500)
+        return c.yellow;
+    return c.red;
+};
+import { COMPONENT_TYPES, } from './types.js';
+import { registerRoutes } from './router.js';
+// Re-export types
+export * from './types.js';
+// ═══════════════════════════════════════════════════════════════════════════
+// 🍝 JSX FACTORY (Classic Runtime)
+// ═══════════════════════════════════════════════════════════════════════════
+/**
+ * JSX factory function - creates virtual elements from JSX
+ * This is called by TypeScript when it transforms JSX
+ */
+export function h(type, props, ...children) {
+    return {
+        type,
+        props: props || {},
+        children: children.flat().filter(Boolean)
+    };
+}
+/**
+ * Fragment support for grouping elements without a wrapper
+ */
+export function Fragment({ children }) {
+    return children || [];
+}
+// ═══════════════════════════════════════════════════════════════════════════
+// 🥣 CONTEXT SYSTEM (Dependency Injection)
+// ═══════════════════════════════════════════════════════════════════════════
+export class Context {
+    values = new Map();
+    set(key, value) {
+        this.values.set(key, value);
+    }
+    get(key) {
+        return this.values.get(key);
+    }
+    clone() {
+        const newContext = new Context();
+        this.values.forEach((value, key) => {
+            newContext.set(key, value);
+        });
+        return newContext;
+    }
+}
+// ═══════════════════════════════════════════════════════════════════════════
+// 🍽️ BUILT-IN COMPONENTS
+// ═══════════════════════════════════════════════════════════════════════════
+export function Server({ port, host, children }) {
+    return {
+        __tagliatelle: COMPONENT_TYPES.SERVER,
+        port: port ?? 3000,
+        host: host ?? '0.0.0.0',
+        children: children ? [children].flat() : []
+    };
+}
+export function Get(props) {
+    return {
+        __tagliatelle: COMPONENT_TYPES.GET,
+        method: 'GET',
+        path: props.path,
+        handler: props.handler,
+        schema: props.schema
+    };
+}
+export function Post(props) {
+    return {
+        __tagliatelle: COMPONENT_TYPES.POST,
+        method: 'POST',
+        path: props.path,
+        handler: props.handler,
+        schema: props.schema
+    };
+}
+export function Put(props) {
+    return {
+        __tagliatelle: COMPONENT_TYPES.PUT,
+        method: 'PUT',
+        path: props.path,
+        handler: props.handler,
+        schema: props.schema
+    };
+}
+export function Delete(props) {
+    return {
+        __tagliatelle: COMPONENT_TYPES.DELETE,
+        method: 'DELETE',
+        path: props.path,
+        handler: props.handler,
+        schema: props.schema
+    };
+}
+export function Patch(props) {
+    return {
+        __tagliatelle: COMPONENT_TYPES.PATCH,
+        method: 'PATCH',
+        path: props.path,
+        handler: props.handler,
+        schema: props.schema
+    };
+}
+export function Middleware({ use, children }) {
+    return {
+        __tagliatelle: COMPONENT_TYPES.MIDDLEWARE,
+        use,
+        children: children ? [children].flat() : []
+    };
+}
+export function DB({ provider, children }) {
+    return {
+        __tagliatelle: COMPONENT_TYPES.DB,
+        provider,
+        children: children ? [children].flat() : []
+    };
+}
+export function Logger({ level }) {
+    return {
+        __tagliatelle: COMPONENT_TYPES.LOGGER,
+        level: level ?? 'info'
+    };
+}
+export function Group({ prefix, children }) {
+    return {
+        __tagliatelle: COMPONENT_TYPES.GROUP,
+        prefix: prefix ?? '',
+        children: children ? [children].flat() : []
+    };
+}
+export function Cors({ origin, methods, children }) {
+    return {
+        __tagliatelle: COMPONENT_TYPES.CORS,
+        origin: origin ?? '*',
+        methods: methods ?? ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'],
+        children: children ? [children].flat() : []
+    };
+}
+export function RateLimiter({ max, timeWindow, children }) {
+    return {
+        __tagliatelle: COMPONENT_TYPES.RATE_LIMITER,
+        max: max ?? 100,
+        timeWindow: timeWindow ?? '1 minute',
+        children: children ? [children].flat() : []
+    };
+}
+/**
+ * File-based routing - Next.js style!
+ * Usage: <Routes dir="./routes" prefix="/api" />
+ */
+export function Routes({ dir, prefix }) {
+    return {
+        __tagliatelle: COMPONENT_TYPES.ROUTES,
+        dir,
+        prefix: prefix ?? ''
+    };
+}
+// ═══════════════════════════════════════════════════════════════════════════
+// 📤 RESPONSE COMPONENTS (for JSX handlers)
+// ═══════════════════════════════════════════════════════════════════════════
+/**
+ * Response wrapper - contains status, headers, and body
+ * Usage: <Response><Status code={201} /><Body data={{...}} /></Response>
+ */
+export function Response({ children }) {
+    return {
+        __tagliatelle: COMPONENT_TYPES.RESPONSE,
+        children: children ? [children].flat() : []
+    };
+}
+/**
+ * Set HTTP status code
+ * Usage: <Status code={201} />
+ */
+export function Status({ code }) {
+    return {
+        __tagliatelle: COMPONENT_TYPES.STATUS,
+        code
+    };
+}
+/**
+ * Set response body (JSON)
+ * Usage: <Body data={{ success: true, data: [...] }} />
+ */
+export function Body({ data }) {
+    return {
+        __tagliatelle: COMPONENT_TYPES.BODY,
+        data
+    };
+}
+/**
+ * Set response headers
+ * Usage: <Headers headers={{ 'X-Custom': 'value' }} />
+ */
+export function Headers({ headers }) {
+    return {
+        __tagliatelle: COMPONENT_TYPES.HEADERS,
+        headers
+    };
+}
+/**
+ * Return an error response
+ * Usage: <Err code={404} message="Not found" />
+ */
+export function Err({ code, message, details }) {
+    return {
+        __tagliatelle: COMPONENT_TYPES.ERR,
+        code: code ?? 500,
+        message,
+        details
+    };
+}
+/**
+ * Augment handler props with additional data (e.g., user from auth)
+ * Usage: <Augment user={{ id: 1, name: "John" }} />
+ */
+export function Augment(props) {
+    return {
+        __tagliatelle: COMPONENT_TYPES.AUGMENT,
+        data: props
+    };
+}
+/**
+ * Halt the middleware chain (optionally with error)
+ * Usage: <Halt /> or <Halt code={401} message="Unauthorized" />
+ */
+export function Halt({ code, message }) {
+    return {
+        __tagliatelle: COMPONENT_TYPES.HALT,
+        code,
+        message
+    };
+}
+/**
+ * Resolves a JSX response tree into a response object
+ */
+function resolveResponse(element) {
+    const response = {
+        statusCode: 200,
+        headers: {},
+        body: undefined,
+        isError: false
+    };
+    function processNode(node) {
+        if (!node)
+            return;
+        // Handle arrays
+        if (Array.isArray(node)) {
+            node.forEach(processNode);
+            return;
+        }
+        // Resolve if it's a JSX element
+        let resolved = node;
+        if (typeof node === 'object' && node !== null && 'type' in node && typeof node.type === 'function') {
+            const el = node;
+            const props = { ...el.props, children: el.children };
+            const componentFn = el.type;
+            resolved = componentFn(props);
+        }
+        // Process TagliatelleComponent
+        if (typeof resolved === 'object' && '__tagliatelle' in resolved) {
+            const component = resolved;
+            switch (component.__tagliatelle) {
+                case COMPONENT_TYPES.RESPONSE:
+                    // Process children
+                    if (component.children) {
+                        component.children.forEach(processNode);
+                    }
+                    break;
+                case COMPONENT_TYPES.STATUS:
+                    response.statusCode = component.code;
+                    break;
+                case COMPONENT_TYPES.BODY:
+                    response.body = component.data;
+                    break;
+                case COMPONENT_TYPES.HEADERS:
+                    Object.assign(response.headers, component.headers);
+                    break;
+                case COMPONENT_TYPES.ERR:
+                    response.isError = true;
+                    response.statusCode = component.code;
+                    const errBody = { error: component.message };
+                    if (component.details) {
+                        errBody.details = component.details;
+                    }
+                    response.body = errBody;
+                    break;
+            }
+        }
+    }
+    processNode(element);
+    return response;
+}
+/**
+ * Check if a value is a JSX response element
+ */
+function isJSXResponse(value) {
+    if (!value || typeof value !== 'object')
+        return false;
+    // Check if it's a TagliatelleComponent with response type
+    if ('__tagliatelle' in value) {
+        const component = value;
+        return [
+            COMPONENT_TYPES.RESPONSE,
+            COMPONENT_TYPES.STATUS,
+            COMPONENT_TYPES.BODY,
+            COMPONENT_TYPES.HEADERS,
+            COMPONENT_TYPES.ERR
+        ].includes(component.__tagliatelle);
+    }
+    // Check if it's a JSX element that resolves to a response
+    if ('type' in value && typeof value.type === 'function') {
+        return true; // We'll resolve and check later
+    }
+    return false;
+}
+// ═══════════════════════════════════════════════════════════════════════════
+// 🚀 THE RENDERER
+// ═══════════════════════════════════════════════════════════════════════════
+/**
+ * Resolves a virtual element into its component output
+ * Recursively resolves until we get an actual Tagliatelle component
+ */
+function resolveElement(element) {
+    if (!element)
+        return null;
+    // If it's already a resolved component object
+    if (typeof element === 'object' && '__tagliatelle' in element) {
+        return element;
+    }
+    // If it's an array, return as-is
+    if (Array.isArray(element)) {
+        return element;
+    }
+    // If it's a JSX element with a function type (component)
+    if (typeof element === 'object' && 'type' in element && typeof element.type === 'function') {
+        const el = element;
+        const props = { ...el.props, children: el.children };
+        const componentFn = el.type;
+        const result = componentFn(props);
+        // Recursively resolve if the result is another element
+        const resolved = resolveElement(result);
+        // If the resolved result is a tagliatelle component and we had children in the JSX,
+        // pass them through
+        if (resolved && !Array.isArray(resolved) && '__tagliatelle' in resolved && el.children.length > 0) {
+            resolved.children = el.children;
+        }
+        return resolved;
+    }
+    return null;
+}
+/**
+ * Wraps a user handler to work with Fastify's request/reply system
+ */
+function wrapHandler(handler, middlewares, context) {
+    return async (request, reply) => {
+        // Use our pretty logger
+        const prettyLog = context.get('prettyLog') || {
+            info: () => { },
+            warn: () => { },
+            error: () => { },
+            debug: () => { },
+        };
+        // Build props from request
+        const props = {
+            params: request.params,
+            query: request.query,
+            body: request.body,
+            headers: request.headers,
+            request,
+            reply,
+            db: context.get('db'),
+            log: prettyLog,
+        };
+        // Middleware timeout (30 seconds max)
+        const MIDDLEWARE_TIMEOUT = 30000;
+        // Execute middleware chain
+        for (const mw of middlewares) {
+            try {
+                // Wrap middleware in timeout to prevent hanging
+                const result = await withTimeout(async () => mw(props, request, reply), MIDDLEWARE_TIMEOUT, 'Middleware timeout');
+                if (result === false) {
+                    return; // Middleware halted the chain
+                }
+                // Middleware can augment props - use safeMerge to prevent prototype pollution
+                if (result && typeof result === 'object') {
+                    safeMerge(props, result);
+                }
+            }
+            catch (error) {
+                const err = error;
+                // Sanitize error message to prevent info leakage
+                reply.status(err.statusCode ?? 500).send({
+                    error: sanitizeErrorMessage(err, 'Middleware error')
+                });
+                return;
+            }
+        }
+        try {
+            // Execute the actual handler
+            const result = await handler(props);
+            // If handler already sent response, don't send again
+            if (reply.sent)
+                return;
+            // Check if result is a JSX response
+            if (result !== undefined) {
+                if (isJSXResponse(result)) {
+                    // Resolve JSX response tree
+                    const response = resolveResponse(result);
+                    // Set headers
+                    for (const [key, value] of Object.entries(response.headers)) {
+                        reply.header(key, value);
+                    }
+                    // Send response with status
+                    reply.status(response.statusCode).send(response.body);
+                }
+                else {
+                    // Plain object response
+                    reply.send(result);
+                }
+            }
+        }
+        catch (error) {
+            if (!reply.sent) {
+                const err = error;
+                // Sanitize error to prevent stack trace and info leakage
+                reply.status(err.statusCode ?? 500).send({
+                    error: sanitizeErrorMessage(err, 'Internal server error')
+                });
+            }
+        }
+    };
+}
+/**
+ * Processes the virtual DOM tree and configures Fastify
+ */
+async function processTree(element, fastify, context, middlewares = [], prefix = '') {
+    const resolved = resolveElement(element);
+    if (!resolved)
+        return;
+    // Handle arrays (fragments)
+    if (Array.isArray(resolved)) {
+        for (const child of resolved) {
+            await processTree(child, fastify, context, middlewares, prefix);
+        }
+        return;
+    }
+    const component = resolved;
+    const type = component.__tagliatelle;
+    switch (type) {
+        case COMPONENT_TYPES.LOGGER:
+            // Fastify has built-in logging, just configure it
+            fastify.log.level = component.level;
+            break;
+        case COMPONENT_TYPES.DB:
+            // Initialize database provider
+            if (component.provider) {
+                try {
+                    const provider = component.provider;
+                    const db = await provider();
+                    context.set('db', db);
+                    console.log(`  ${c.green}✓${c.reset} Database connected`);
+                }
+                catch (error) {
+                    const err = error;
+                    console.error(`  ${c.red}✗${c.reset} Database failed: ${err.message}`);
+                    throw error;
+                }
+            }
+            // Process children with db context
+            if (component.children) {
+                for (const child of component.children) {
+                    await processTree(child, fastify, context, middlewares, prefix);
+                }
+            }
+            break;
+        case COMPONENT_TYPES.CORS:
+            // Configure CORS
+            try {
+                const cors = await import('@fastify/cors');
+                await fastify.register(cors.default, {
+                    origin: component.origin,
+                    methods: component.methods
+                });
+                console.log(`  ${c.green}✓${c.reset} CORS enabled`);
+            }
+            catch {
+                console.warn(`  ${c.yellow}⚠${c.reset} CORS skipped (install @fastify/cors)`);
+            }
+            // Process children
+            if (component.children) {
+                for (const child of component.children) {
+                    await processTree(child, fastify, context, middlewares, prefix);
+                }
+            }
+            break;
+        case COMPONENT_TYPES.MIDDLEWARE:
+            // Add middleware to chain for child routes
+            const newMiddlewares = [...middlewares, component.use];
+            if (component.children) {
+                for (const child of component.children) {
+                    await processTree(child, fastify, context, newMiddlewares, prefix);
+                }
+            }
+            break;
+        case COMPONENT_TYPES.GROUP:
+            // Add prefix to child routes
+            const newPrefix = prefix + (component.prefix ?? '');
+            if (component.children) {
+                for (const child of component.children) {
+                    await processTree(child, fastify, context, middlewares, newPrefix);
+                }
+            }
+            break;
+        case COMPONENT_TYPES.ROUTES:
+            // File-based routing
+            const routesDir = component.dir;
+            const routesPrefix = prefix + (component.prefix ?? '');
+            await registerRoutes(fastify, {
+                routesDir,
+                prefix: routesPrefix,
+                middleware: middlewares
+            }, context);
+            break;
+        case COMPONENT_TYPES.GET:
+        case COMPONENT_TYPES.POST:
+        case COMPONENT_TYPES.PUT:
+        case COMPONENT_TYPES.DELETE:
+        case COMPONENT_TYPES.PATCH:
+            // Register route with Fastify
+            const fullPath = prefix + component.path;
+            const method = component.method;
+            const routeHandler = wrapHandler(component.handler, middlewares, context);
+            if (component.schema) {
+                fastify.route({
+                    method,
+                    url: fullPath,
+                    handler: routeHandler,
+                    schema: component.schema
+                });
+            }
+            else {
+                fastify.route({
+                    method,
+                    url: fullPath,
+                    handler: routeHandler
+                });
+            }
+            const m = component.method;
+            console.log(`  ${c.dim}├${c.reset} ${methodColor(m)}${m.padEnd(6)}${c.reset} ${c.white}${fullPath}${c.reset}`);
+            break;
+        default:
+            // Unknown component, try to process children
+            if (component.children) {
+                for (const child of component.children) {
+                    await processTree(child, fastify, context, middlewares, prefix);
+                }
+            }
+    }
+}
+/**
+ * The main render function - turns your JSX tree into a running server
+ */
+export async function render(element) {
+    const resolved = resolveElement(element);
+    if (!resolved || Array.isArray(resolved) || resolved.__tagliatelle !== COMPONENT_TYPES.SERVER) {
+        throw new Error('<Tag>liatelle: Root element must be a <Server> component!');
+    }
+    const serverComponent = resolved;
+    console.log(`
+${c.yellow}  ╔══════════════════════════════════════════════════════════════╗
+  ║  ${c.reset}${c.bold}🍝 <Tag>liatelle.js${c.reset}${c.yellow}                                         ║
+  ╚══════════════════════════════════════════════════════════════╝${c.reset}
+  `);
+    // Create Fastify instance with disabled logger (we do our own)
+    const fastify = Fastify({
+        logger: false, // Completely disable Fastify's logger
+        disableRequestLogging: true // We do our own request logging
+    });
+    // Create context for dependency injection
+    const context = new Context();
+    // Create our own pretty logger for handlers to use
+    const prettyLog = {
+        info: (msg) => console.log(`  ${c.dim}ℹ${c.reset} ${msg}`),
+        warn: (msg) => console.log(`  ${c.yellow}⚠${c.reset} ${msg}`),
+        error: (msg) => console.log(`  ${c.red}✗${c.reset} ${msg}`),
+        debug: (msg) => console.log(`  ${c.dim}◦${c.reset} ${c.dim}${msg}${c.reset}`),
+    };
+    // Make prettyLog available via context
+    context.set('prettyLog', prettyLog);
+    // Custom request logging hook
+    fastify.addHook('onResponse', (request, reply, done) => {
+        const method = request.method;
+        const url = request.url;
+        const status = reply.statusCode;
+        const time = reply.elapsedTime?.toFixed(0) || '0';
+        const methodStr = `${methodColor(method)}${method.padEnd(6)}${c.reset}`;
+        const urlStr = `${c.white}${url}${c.reset}`;
+        const statusStr = `${statusColor(status)}${status}${c.reset}`;
+        const timeStr = `${c.dim}${time}ms${c.reset}`;
+        console.log(`  ${methodStr} ${urlStr} ${c.dim}→${c.reset} ${statusStr} ${timeStr}`);
+        done();
+    });
+    // Process the tree
+    if (serverComponent.children) {
+        for (const child of serverComponent.children) {
+            await processTree(child, fastify, context, [], '');
+        }
+    }
+    // Start the server
+    const port = serverComponent.port;
+    const host = serverComponent.host;
+    try {
+        await fastify.listen({ port, host });
+        console.log(`  ${c.green}✓${c.reset} ${c.bold}Server ready${c.reset} ${c.dim}→${c.reset} ${c.cyan}http://${host}:${port}${c.reset}
+`);
+    }
+    catch (err) {
+        console.error(`  ${c.red}✗${c.reset} ${c.bold}Failed to start:${c.reset}`, err);
+        process.exit(1);
+    }
+    return fastify;
+}
+// ═══════════════════════════════════════════════════════════════════════════
+// 🎁 DEFAULT EXPORT
+// ═══════════════════════════════════════════════════════════════════════════
+const Tagliatelle = {
+    h,
+    Fragment,
+    render
+};
+export default Tagliatelle;
+//# sourceMappingURL=tagliatelle.js.map