@fluffjs/cli 0.1.8 → 0.1.10

package/Cli.d.ts

@@ -23,6 +23,7 @@ export declare class Cli {
     private serve;
     private serveTarget;
     private generateEntryPoint;
+    private findAllTsFiles;
     private findFiles;
     private matchesPatterns;
     private matchGlob;

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';
@@ -195,7 +196,6 @@ Examples:
                     name: targetName,
                     srcDir: `src/${targetName}`,
                     outDir: `dist/${targetName}`,
-                    components: ['**/*.component.ts'],
                     assets: ['**/*.html', '**/*.css']
                 };
                 console.log(`Added target '${targetName}' to fluff.json`);
@@ -213,7 +213,6 @@ Examples:
                         name: targetName,
                         srcDir: 'src',
                         outDir: 'dist',
-                        components: ['**/*.component.ts'],
                         assets: ['**/*.html', '**/*.css']
                     }
                 };
@@ -305,7 +304,7 @@ Examples:
         }
         const entryPoint = target.entryPoint
             ? path.join(srcDir, target.entryPoint)
-            : this.generateEntryPoint(srcDir, target.components);
+            : this.generateEntryPoint(srcDir, target.exclude);
         let inlineStyles = '';
         if (target.styles && target.styles.length > 0) {
             const styleContents = [];
@@ -492,9 +491,21 @@ 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);
+            : this.generateEntryPoint(srcDir, target.exclude);
         let inlineStyles = '';
         if (target.styles && target.styles.length > 0) {
             const styleContents = [];
@@ -567,20 +578,39 @@ 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);
-        for (const f of componentFiles) {
-            console.log(`   ✓ Component: ${path.relative(srcDir, f)}`);
+    generateEntryPoint(srcDir, exclude = []) {
+        const tsFiles = this.findAllTsFiles(srcDir, exclude);
+        for (const f of tsFiles) {
+            console.log(`   ✓ ${path.relative(srcDir, f)}`);
         }
-        const importDecls = componentFiles.map(f => {
+        const importDecls = tsFiles.map(f => {
             const relativePath = './' + path.relative(srcDir, f)
                 .replace(/\\/g, '/');
             return t.importDeclaration([], t.stringLiteral(relativePath));
@@ -591,6 +621,28 @@ Examples:
         fs.writeFileSync(entryPath, entryContent);
         return entryPath;
     }
+    findAllTsFiles(dir, userExclude = []) {
+        const files = [];
+        const excludePatterns = ['*.spec.ts', '*.test.ts', '__generated_entry.ts', ...userExclude];
+        const walk = (currentDir) => {
+            const entries = fs.readdirSync(currentDir, { withFileTypes: true });
+            for (const entry of entries) {
+                const fullPath = path.join(currentDir, entry.name);
+                if (entry.isDirectory()) {
+                    walk(fullPath);
+                }
+                else if (entry.isFile() && entry.name.endsWith('.ts')) {
+                    const relativePath = path.relative(dir, fullPath).replace(/\\/g, '/');
+                    const isExcluded = excludePatterns.some(pattern => this.matchGlob(entry.name, pattern) || this.matchGlob(relativePath, pattern));
+                    if (!isExcluded) {
+                        files.push(fullPath);
+                    }
+                }
+            }
+        };
+        walk(dir);
+        return files;
+    }
     findFiles(dir, patterns) {
         const files = [];
         const walk = (currentDir) => {

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/babel-plugin-reactive.js

@@ -287,7 +287,7 @@ export default function reactivePlugin() {
                     constructorStatements.push(t.expressionStatement(t.unaryExpression('void', t.memberExpression(t.thisExpression(), t.identifier(methodName)))));
                     for (const prop of mProps) {
                         if (reactiveProps.has(prop)) {
-                            constructorStatements.push(t.expressionStatement(t.callExpression(t.memberExpression(t.memberExpression(t.memberExpression(t.thisExpression(), t.identifier(`__${prop}`)), t.identifier('onChange')), t.identifier('subscribe')), [t.arrowFunctionExpression([], t.callExpression(t.memberExpression(t.thisExpression(), t.identifier(methodName)), []))])));
+                            constructorStatements.push(t.expressionStatement(t.callExpression(t.memberExpression(t.memberExpression(t.thisExpression(), t.identifier('__baseSubscriptions')), t.identifier('push')), [t.callExpression(t.memberExpression(t.memberExpression(t.memberExpression(t.thisExpression(), t.identifier(`__${prop}`)), t.identifier('onChange')), t.identifier('subscribe')), [t.arrowFunctionExpression([], t.callExpression(t.memberExpression(t.thisExpression(), t.identifier(methodName)), [t.stringLiteral(prop)]))])])));
                         }
                     }
                 }
@@ -299,7 +299,7 @@ export default function reactivePlugin() {
                     for (const prop of wProps) {
                         if (reactiveProps.has(prop)) {
                             iife.push(t.expressionStatement(t.callExpression(t.memberExpression(t.identifier('__subs'), t.identifier('push')), [
-                                t.callExpression(t.memberExpression(t.memberExpression(t.memberExpression(t.thisExpression(), t.identifier(`__${prop}`)), t.identifier('onChange')), t.identifier('subscribe')), [t.identifier('__cb')])
+                                t.callExpression(t.memberExpression(t.memberExpression(t.memberExpression(t.thisExpression(), t.identifier(`__${prop}`)), t.identifier('onChange')), t.identifier('subscribe')), [t.arrowFunctionExpression([], t.callExpression(t.identifier('__cb'), [t.stringLiteral(prop)]))])
                             ])));
                         }
                     }

package/interfaces/FluffTarget.d.ts

@@ -7,8 +7,8 @@ export interface FluffTarget {
     componentsDir?: string;
     tsConfigPath?: string;
     entryPoint?: string;
+    exclude?: string[];
     indexHtml?: string;
-    components: string[];
     styles?: string[];
     assets?: string[];
     bundle?: BundleOptions;

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.10",
   "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"
   },

package/types/FluffConfig.js

@@ -8,7 +8,6 @@ export const DEFAULT_CONFIG = {
             componentsDir: 'app',
             entryPoint: 'main.ts',
             indexHtml: 'index.html',
-            components: ['**/*.component.ts'],
             assets: ['**/*.html', '**/*.css'],
             bundle: {
                 minify: true,