@fluffjs/cli 0.1.8 → 0.1.9

package/Cli.js

@@ -7,6 +7,7 @@ import picomatch from 'picomatch';
 import { gzipSync } from 'zlib';
 import { generate } from './BabelHelpers.js';
 import { ComponentCompiler } from './ComponentCompiler.js';
+import { DevServer } from './DevServer.js';
 import { fluffPlugin } from './fluff-esbuild-plugin.js';
 import { Generator } from './Generator.js';
 import { IndexHtmlTransformer } from './IndexHtmlTransformer.js';
@@ -492,6 +493,18 @@ Examples:
         const serveOptions = target.serve ?? {};
         const port = serveOptions.port ?? 3000;
         const host = serveOptions.host ?? 'localhost';
+        const esbuildPort = port + 1;
+        let proxyConfig = undefined;
+        if (serveOptions.proxyConfig) {
+            const proxyConfigPath = path.resolve(projectRoot, serveOptions.proxyConfig);
+            proxyConfig = DevServer.loadProxyConfig(proxyConfigPath);
+            if (proxyConfig) {
+                console.log(`   ✓ Proxy config: ${serveOptions.proxyConfig}`);
+                for (const route of Object.keys(proxyConfig)) {
+                    console.log(`      ${route} -> ${proxyConfig[route].target}`);
+                }
+            }
+        }
         const entryPoint = target.entryPoint
             ? path.join(srcDir, target.entryPoint)
             : this.generateEntryPoint(srcDir, target.components);
@@ -567,13 +580,32 @@ Examples:
         });
         await ctx.watch();
         console.log('   Watching for changes...');
-        const { hosts, port: actualPort } = await ctx.serve({
-            servedir: outDir,
-            port,
-            host
-        });
-        console.log(`   Server running at http://${hosts[0]}:${actualPort}`);
-        console.log('   Press Ctrl+C to stop\n');
+        if (proxyConfig) {
+            await ctx.serve({
+                servedir: outDir,
+                port: esbuildPort,
+                host: '127.0.0.1'
+            });
+            const devServer = new DevServer({
+                port,
+                host,
+                esbuildPort,
+                esbuildHost: '127.0.0.1',
+                proxyConfig
+            });
+            await devServer.start();
+            console.log(`   Server running at http://${host}:${port}`);
+            console.log('   Press Ctrl+C to stop\n');
+        }
+        else {
+            const { hosts, port: actualPort } = await ctx.serve({
+                servedir: outDir,
+                port,
+                host
+            });
+            console.log(`   Server running at http://${hosts[0]}:${actualPort}`);
+            console.log('   Press Ctrl+C to stop\n');
+        }
     }
     generateEntryPoint(srcDir, componentPatterns) {
         const componentFiles = this.findFiles(srcDir, componentPatterns);

package/CodeGenerator.js

@@ -52,7 +52,7 @@ export class CodeGenerator {
             const fragment = parse5.parseFragment(html);
             const styleElement = Parse5Helpers.createElement('style', []);
             Parse5Helpers.appendText(styleElement, styles);
-            fragment.childNodes.unshift(styleElement);
+            fragment.childNodes.push(styleElement);
             styleElement.parentNode = fragment;
             content = parse5.serialize(fragment);
         }

package/ComponentCompiler.js

@@ -51,7 +51,8 @@ export class ComponentCompiler {
                 filename: filePath,
                 presets,
                 plugins,
-                parserOpts
+                parserOpts,
+                cwd: path.dirname(new URL(import.meta.url).pathname)
             });
             return result?.code ?? code;
         }

package/DevServer.d.ts

@@ -0,0 +1,27 @@
+export interface ProxyConfigEntry {
+    target: string;
+    changeOrigin?: boolean;
+}
+export type ProxyConfig = Record<string, ProxyConfigEntry>;
+export interface DevServerOptions {
+    port: number;
+    host: string;
+    esbuildPort: number;
+    esbuildHost: string;
+    proxyConfig?: ProxyConfig;
+}
+export declare class DevServer {
+    private readonly options;
+    private readonly proxy;
+    private server;
+    constructor(options: DevServerOptions);
+    static loadProxyConfig(configPath: string): ProxyConfig | undefined;
+    private static isProxyEntry;
+    start(): Promise<number>;
+    stop(): void;
+    private handleRequest;
+    private findProxyEntry;
+    private proxyRequest;
+    private forwardToEsbuild;
+}
+//# sourceMappingURL=DevServer.d.ts.map

package/DevServer.js

@@ -0,0 +1,109 @@
+import * as http from 'node:http';
+import * as fs from 'node:fs';
+import httpProxy from 'http-proxy';
+export class DevServer {
+    options;
+    proxy;
+    server = null;
+    constructor(options) {
+        this.options = options;
+        this.proxy = httpProxy.createProxyServer({});
+        this.proxy.on('error', (err, req, res) => {
+            console.error('Proxy error:', err.message);
+            if (res instanceof http.ServerResponse && !res.headersSent) {
+                res.writeHead(502, { 'Content-Type': 'text/plain' });
+                res.end('Proxy error: ' + err.message);
+            }
+        });
+    }
+    static loadProxyConfig(configPath) {
+        if (!fs.existsSync(configPath)) {
+            console.warn(`Proxy config not found: ${configPath}`);
+            return undefined;
+        }
+        try {
+            const content = fs.readFileSync(configPath, 'utf-8');
+            const config = JSON.parse(content);
+            if (typeof config === 'object' && config !== null && !Array.isArray(config)) {
+                const result = {};
+                for (const [key, value] of Object.entries(config)) {
+                    if (DevServer.isProxyEntry(value)) {
+                        result[key] = {
+                            target: value.target,
+                            changeOrigin: typeof value.changeOrigin === 'boolean' ? value.changeOrigin : undefined
+                        };
+                    }
+                }
+                return result;
+            }
+            return undefined;
+        }
+        catch (err) {
+            console.error('Failed to parse proxy config:', err);
+            return undefined;
+        }
+    }
+    static isProxyEntry(value) {
+        return typeof value === 'object' &&
+            value !== null &&
+            'target' in value &&
+            typeof value.target === 'string';
+    }
+    async start() {
+        return new Promise((resolve, reject) => {
+            this.server = http.createServer((req, res) => {
+                this.handleRequest(req, res);
+            });
+            this.server.on('error', (err) => {
+                reject(err);
+            });
+            this.server.listen(this.options.port, () => {
+                const address = this.server?.address();
+                const port = typeof address === 'object' && address ? address.port : this.options.port;
+                resolve(port);
+            });
+        });
+    }
+    stop() {
+        if (this.server) {
+            this.server.close();
+            this.server = null;
+        }
+        this.proxy.close();
+    }
+    handleRequest(req, res) {
+        const url = req.url ?? '/';
+        const [pathname] = url.split('?');
+        const proxyEntry = this.findProxyEntry(pathname);
+        if (proxyEntry) {
+            this.proxyRequest(req, res, proxyEntry);
+        }
+        else {
+            this.forwardToEsbuild(req, res);
+        }
+    }
+    findProxyEntry(pathname) {
+        if (!this.options.proxyConfig) {
+            return undefined;
+        }
+        for (const [pattern, entry] of Object.entries(this.options.proxyConfig)) {
+            if (pathname === pattern || pathname.startsWith(pattern + '/') || pathname.startsWith(pattern + '?')) {
+                return entry;
+            }
+        }
+        return undefined;
+    }
+    proxyRequest(req, res, entry) {
+        const options = {
+            target: entry.target,
+            changeOrigin: entry.changeOrigin ?? false
+        };
+        this.proxy.web(req, res, options);
+    }
+    forwardToEsbuild(req, res) {
+        const options = {
+            target: `http://${this.options.esbuildHost}:${this.options.esbuildPort}`
+        };
+        this.proxy.web(req, res, options);
+    }
+}

package/interfaces/ServeOptions.d.ts

@@ -1,5 +1,6 @@
 export interface ServeOptions {
     port?: number;
     host?: string;
+    proxyConfig?: string;
 }
 //# sourceMappingURL=ServeOptions.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluffjs/cli",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "type": "module",
   "main": "./index.js",
   "module": "./index.js",
@@ -32,6 +32,7 @@
     "esbuild": "^0.27.2",
     "he": "^1.2.0",
     "html-minifier-terser": "^7.2.0",
+    "http-proxy": "^1.18.1",
     "picomatch": "^4.0.2",
     "parse5": "^8.0.0",
     "parse5-sax-parser": "^8.0.0",
@@ -40,6 +41,7 @@
   },
   "devDependencies": {
     "@types/he": "^1.2.3",
+    "@types/http-proxy": "^1.17.16",
     "@types/jsesc": "^3.0.3",
     "jsesc": "^3.1.0"
   },