redweb 0.6.8 → 0.6.9

package/README.md

@@ -28,35 +28,53 @@ const socketServer = new SocketServer();
 
 ### Custom Configuration
 
-#### HTTP Server
+#### HTTP Server with HTMX Rendering
+
+RedWeb now supports dynamic rendering of `.htmx` files using `enableHtmxRendering`.
 
 ```javascript
 const { HttpServer, METHODS } = require('redweb');
 
-const services = [
-    {
-        serviceName: '/submit-form',
-        method: METHODS.POST,
-        function: (req, res) => {
-            const { name, email, message } = req.body;
-            if (!name || !email || !message) {
-                return res.status(400).json({ error: 'All fields are required' });
-            }
-            res.status(200).json({ success: 'Form submitted successfully' });
-        }
-    }
-];
-
 const options = {
     port: 3000,
     publicPaths: ['./public'],
-    encoding: 'urlencoded',
-    services: services
+    enableHtmxRendering: true, // Enable .htmx rendering
+    services: [
+        {
+            serviceName: '/submit-form',
+            method: METHODS.POST,
+            function: (req, res) => {
+                const { name, email, message } = req.body;
+                if (!name || !email || !message) {
+                    return res.status(400).json({ error: 'All fields are required' });
+                }
+                res.status(200).json({ success: 'Form submitted successfully' });
+            }
+        }
+    ]
 };
 
 const app = new HttpServer(options);
 ```
 
+Place `.htmx` files in the specified `publicPaths`, and they will be dynamically rendered.
+
+Example:
+
+**File: `public/index.htmx`**
+```javascript
+const name = 'RedWeb User';
+
+<@>
+    <h1>Hello, {{name}}!</h1>
+<@/>
+```
+
+Accessing `/index.htmx` will render:
+```html
+<h1>Hello, RedWeb User!</h1>
+```
+
 #### HTTPS Server
 
 ```javascript
@@ -68,7 +86,8 @@ const options = {
         key: './path/to/key.pem',
         cert: './path/to/cert.pem'
     },
-    publicPaths: ['./public']
+    publicPaths: ['./public'],
+    enableHtmxRendering: true // Enable .htmx rendering
 };
 
 const app = new HttpsServer(options);
@@ -207,6 +226,7 @@ module.exports = ChatRoute;
 - **listenCallback**: Function to execute once the server starts listening.
 - **encoding**: Encoding type for request bodies (`'json'` or `'urlencoded'`).
 - **ssl**: SSL configuration for HTTPS server (`{ key: './path/to/key.pem', cert: './path/to/cert.pem' }`).
+- **enableHtmxRendering**: Enable dynamic rendering of `.htmx` files (default: `false`).
 
 ### SocketServer Options
 

package/index.d.ts

@@ -32,6 +32,8 @@ declare module 'redweb' {
             key: string;
             cert: string;
         };
+        corsOptions?: import('cors').CorsOptions;
+        enableHtmxRendering?: boolean; // New flag to enable HTMX rendering
     }
 
     /**
@@ -66,61 +68,23 @@ declare module 'redweb' {
      * WebSocket route configuration.
      */
     export interface SocketRouteConfig {
-        path: string; // The WebSocket route path (e.g., "/chat").
-        handlers: Array<new () => BaseHandler>; // Array of handler classes for the route.
+        path: string;
+        handlers: Array<new () => BaseHandler>;
     }
 
     /**
      * Represents a WebSocket route.
      */
     export class SocketRoute {
-        /**
-         * The path for the WebSocket route.
-         */
         path: string;
-
-        /**
-         * Handlers associated with the route.
-         */
         handlers: BaseHandler[];
 
-        /**
-         * Creates a new `SocketRoute` instance.
-         * @param config - Configuration options for the route.
-         */
         constructor(config: SocketRouteConfig);
 
-        /**
-         * Adds a new handler dynamically.
-         * @param HandlerClass - A class extending `BaseHandler`.
-         */
         addHandler(HandlerClass: new () => BaseHandler): void;
-
-        /**
-         * Handles a new WebSocket connection.
-         * @param socket - The WebSocket connection instance.
-         * @param req - The HTTP request associated with the connection.
-         */
         handleConnection(socket: WebSocket, req: import('http').IncomingMessage): void;
-
-        /**
-         * Handles incoming WebSocket messages.
-         * @param socket - The WebSocket connection instance.
-         * @param data - The message data.
-         */
         handleMessage(socket: WebSocket, data: any): void;
-
-        /**
-         * Handles WebSocket disconnections.
-         * @param socket - The WebSocket connection instance.
-         */
         handleClose(socket: WebSocket): void;
-
-        /**
-         * Handles WebSocket errors.
-         * @param socket - The WebSocket connection instance.
-         * @param error - The error object.
-         */
         handleError(socket: WebSocket, error: Error): void;
     }
 
@@ -128,33 +92,11 @@ declare module 'redweb' {
      * Base class for WebSocket handlers.
      */
     export class BaseHandler {
-        /**
-         * The name of the handler (used to identify it in the server).
-         */
         name: string;
-        /**
-         * Creates a new handler instance.
-         * @param name - The name of the handler.
-         */
-        constructor(name: string);
 
-        /**
-         * Handles an incoming message.
-         * @param socket - The WebSocket connection that sent the message.
-         * @param message - The message data.
-         */
+        constructor(name: string);
         onMessage(socket: WebSocket, message: Object): void;
-
-        /**
-         * Called during the first contact with a new WebSocket connection.
-         * @param socket - The WebSocket connection instance.
-         */
         onInitialContact(socket: WebSocket): void;
-
-        /**
-         * Called when a WebSocket connection closes.
-         * @param socket - The WebSocket connection instance.
-         */
         onClose(socket: WebSocket): void;
     }
 
@@ -162,31 +104,11 @@ declare module 'redweb' {
      * Base WebSocket server class.
      */
     export class BaseSocketServer {
-        /**
-         * List of WebSocket routes.
-         */
         routes: SocketRoute[];
 
-        /**
-         * Creates a new `BaseSocketServer`.
-         * @param server - The HTTP server instance.
-         * @param options - Configuration options.
-         */
         constructor(server: HTTPServer | HTTPSServer, options?: SocketServerOptions);
-
-        /**
-         * Handles WebSocket upgrade requests.
-         * @param req - The incoming HTTP upgrade request.
-         * @param socket - The raw network socket.
-         * @param head - The initial data chunk.
-         */
         handleUpgrade(req: import('http').IncomingMessage, socket: import('net').Socket, head: Buffer): void;
-
-        /**
-         * 
-         * @param route 
-         */
-        addRoute(route: new () => SocketRoute);
+        addRoute(route: new () => SocketRoute): void;
     }
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "redweb",
-  "version": "0.6.8",
+  "version": "0.6.9",
   "description": "A way to quickly set up an express server",
   "main": "index.js",
   "scripts": {

package/src/htmx/HtmxRenderer.js

@@ -0,0 +1,65 @@
+const fs = require('fs');
+const vm = require('vm');
+const path = require('path');
+
+class HtmxRenderer {
+    /**
+     * Render an .htmx file as JavaScript with embedded print statements.
+     * @param {string} filePath - Path to the .htmx file.
+     * @returns {string} Rendered HTML string with normalized whitespace.
+     */
+    static render(filePath) {
+        if (!fs.existsSync(filePath)) {
+            throw new Error(`Template file not found: ${filePath}`);
+        }
+
+        let output = '';
+        const templateContent = fs.readFileSync(filePath, 'utf-8');
+
+        // Transform <@ ... @/> blocks into print() calls
+        const transformedTemplate = templateContent.replace(
+            /<@>([\s\S]*?)<@\/>/g,
+            (_, content) => `print(\`${content.replace(/{{\s*(.*?)\s*}}/g, '${$1}')}\`);`
+        );
+
+        // Wrap the script in an IIFE
+        const wrappedScript = `
+        (() => {
+            const print = (html) => output += html;
+            ${transformedTemplate}
+            return output;
+        })();
+        `;
+
+        // Create a custom require function that resolves paths relative to the template
+        const customRequire = (modulePath) => {
+            const absolutePath = path.resolve(path.dirname(filePath), modulePath);
+            return require(absolutePath);
+        };
+
+        // Execute the script in a sandbox
+        const script = new vm.Script(wrappedScript);
+        const sandbox = {
+            output: '',
+            require: customRequire, // Add custom require
+            __dirname: path.dirname(filePath),
+            __filename: filePath,
+        };
+        vm.createContext(sandbox);
+
+        // Get the rendered output
+        let result = script.runInContext(sandbox);
+
+        // Normalize spaces but preserve those in content
+        result = result
+            .replace(/>\s+</g, '><')       // Remove spaces between tags
+            .replace(/\s+/g, ' ')         // Collapse multiple spaces to one
+            .replace(/>\s+/g, '>')        // Remove spaces after tags
+            .replace(/\s+</g, '<')        // Remove spaces before tags
+            .trim();                      // Trim leading and trailing spaces
+
+        return result;
+    }
+}
+
+module.exports = HtmxRenderer;

package/src/htmx/RedWebHtmxComponent.js

@@ -0,0 +1,11 @@
+class RedWebHtmxComponent {
+    constructor(props = {}) {
+        this.props = props;
+    }
+
+    render() {
+        throw new Error('Render method must be implemented in derived components');
+    }
+}
+
+module.exports = RedWebHtmxComponent;

package/src/http/BaseHttpServer.js

@@ -2,6 +2,8 @@ const express = require('express');
 const bodyParser = require('body-parser');
 const path = require('path');
 const cors = require('cors');
+const fs = require('fs');
+const HtmxRenderer = require('../htmx/HtmxRenderer'); // Import the HtmxRenderer module
 
 /**
  * @typedef {'json' | 'urlencoded'} RedWebEncoding
@@ -21,6 +23,7 @@ const cors = require('cors');
  * @property {string} [ssl.cert] - Path to the SSL certificate file.
  * @property {import('express').Application} [server] - Whether to automatically start listening.
  * @property {import('cors').CorsOptions} [corsOptions] - The CORS Options.
+ * @property {boolean} [enableHtmxRendering=false] - Enable dynamic HTMX file rendering.
  */
 
 const ENCODINGS = { json: 'json', urlencoded: 'urlencoded' };
@@ -34,6 +37,7 @@ const HTTP_OPTIONS = {
     ssl: null,
     server: undefined,
     corsOptions: undefined,
+    enableHtmxRendering: false, // New option for HTMX rendering
 };
 
 /**
@@ -52,18 +56,50 @@ function BaseHttpServer(options = {}) {
     } else if (this.encoding === ENCODINGS.urlencoded) {
         this.app.use(bodyParser.urlencoded({ extended: true }));
     }
+
     this.app.use(cors(this.options.corsOptions));
-    this.publicPaths.forEach(public_path => this.app.use(express.static(path.join(process.cwd(), public_path))));
+
+    // Enable HTMX rendering if the flag is set
+    if (this.enableHtmxRendering) {
+        this.app.get('*.htmx', (req, res) => {
+            // Find the file in one of the publicPaths
+            const filePath = this.publicPaths
+                .map(publicPath => path.join(process.cwd(), publicPath, req.path))
+                .find(fullPath => fs.existsSync(fullPath)); // Check if the file exists
+    
+            if (!filePath) {
+                return res.status(404).send(`Error rendering HTMX file: Template file not found: ${req.path}`);
+            }
+    
+            try {
+                const renderedContent = HtmxRenderer.render(filePath);
+                res.type('html').send(renderedContent);
+            } catch (error) {
+                res.status(500).send(`Error rendering HTMX file: ${error.message}`);
+            }
+        });
+    }
+    
+
+    // Serve static files from public paths
+    this.publicPaths.forEach((publicPath) =>
+        this.app.use(express.static(path.join(process.cwd(), publicPath)))
+    );
+
     const catchAll = this.services.find((service) => service.serviceName === '*');
     if (catchAll) this.services.splice(this.services.indexOf(catchAll), 1);
-    this.services.forEach(service => this.app[service.method](service.serviceName, service.function));
+    this.services.forEach((service) =>
+        this.app[service.method](service.serviceName, service.function)
+    );
     if (catchAll) this.app[catchAll.method](catchAll.serviceName, catchAll.function);
+
     return this;
 }
 
+
 module.exports = {
     BaseHttpServer,
     ENCODINGS,
     HTTP_OPTIONS,
-    METHODS: {GET: 'get', POST: 'post', PUT: 'put', DELETE: 'delete'}
+    METHODS: { GET: 'get', POST: 'post', PUT: 'put', DELETE: 'delete' },
 };