@fluffjs/cli 0.0.8 → 0.1.1

package/BabelHelpers.d.ts

@@ -0,0 +1,26 @@
+import _generate from '@babel/generator';
+import _traverse from '@babel/traverse';
+import * as t from '@babel/types';
+export declare const generate: typeof _generate.generate;
+export declare const traverse: {
+    <S>(parent: _traverse.Node, opts: _traverse.TraverseOptions<S>, scope: _traverse.Scope | undefined, state: S, parentPath?: _traverse.NodePath): void;
+    (parent: _traverse.Node, opts?: _traverse.TraverseOptions, scope?: _traverse.Scope, state?: any, parentPath?: _traverse.NodePath): void;
+    visitors: typeof _traverse.visitors;
+    verify: typeof _traverse.visitors.verify;
+    explode: typeof _traverse.visitors.explode;
+    cheap: (node: _traverse.Node, enter: (node: _traverse.Node) => void) => void;
+    node: (node: _traverse.Node, opts: _traverse.TraverseOptions, scope?: _traverse.Scope, state?: any, path?: _traverse.NodePath, skipKeys?: Record<string, boolean>) => void;
+    clearNode: (node: _traverse.Node, opts?: _traverse.RemovePropertiesOptions) => void;
+    removeProperties: (tree: _traverse.Node, opts?: _traverse.RemovePropertiesOptions) => _traverse.Node;
+    hasType: (tree: _traverse.Node, type: _traverse.Node["type"], denylistTypes?: string[]) => boolean;
+    cache: typeof _traverse.cache;
+};
+export declare function findDecoratorIndex(decorators: t.Decorator[], name: string): number;
+export declare function getDecoratorName(decorator: t.Decorator): string | null;
+export interface DecoratedNode {
+    decorators?: t.Decorator[] | null;
+}
+export declare function filterDecoratorsFromNode(node: DecoratedNode, removeDecorators: string[]): void;
+export declare function parseMethodBody(body: string): t.Statement[];
+export declare function buildHostBindingUpdateStatement(hostProperty: string): t.Statement;
+//# sourceMappingURL=BabelHelpers.d.ts.map

package/BabelHelpers.js

@@ -0,0 +1,65 @@
+import _generate from '@babel/generator';
+import { parse } from '@babel/parser';
+import _traverse from '@babel/traverse';
+import * as t from '@babel/types';
+export const generate = _generate.default ?? _generate;
+export const traverse = _traverse.default ?? _traverse;
+export function findDecoratorIndex(decorators, name) {
+    return decorators.findIndex(dec => {
+        if (t.isCallExpression(dec.expression) && t.isIdentifier(dec.expression.callee)) {
+            return dec.expression.callee.name === name;
+        }
+        return false;
+    });
+}
+export function getDecoratorName(decorator) {
+    const expr = decorator.expression;
+    if (t.isCallExpression(expr) && t.isIdentifier(expr.callee)) {
+        return expr.callee.name;
+    }
+    if (t.isIdentifier(expr)) {
+        return expr.name;
+    }
+    return null;
+}
+export function filterDecoratorsFromNode(node, removeDecorators) {
+    const { decorators } = node;
+    if (!decorators)
+        return;
+    node.decorators = decorators.filter(dec => {
+        const name = getDecoratorName(dec);
+        return !name || !removeDecorators.includes(name);
+    });
+}
+export function parseMethodBody(body) {
+    const wrappedCode = `class __Temp__ { __temp__() { ${body} } }`;
+    const ast = parse(wrappedCode, { sourceType: 'module' });
+    const [classDecl] = ast.program.body;
+    if (t.isClassDeclaration(classDecl)) {
+        const [method] = classDecl.body.body;
+        if (t.isClassMethod(method)) {
+            return method.body.body;
+        }
+    }
+    return [];
+}
+export function buildHostBindingUpdateStatement(hostProperty) {
+    if (hostProperty.startsWith('class.')) {
+        const className = hostProperty.slice(6);
+        return t.ifStatement(t.identifier('__v'), t.expressionStatement(t.callExpression(t.memberExpression(t.memberExpression(t.thisExpression(), t.identifier('classList')), t.identifier('add')), [t.stringLiteral(className)])), t.expressionStatement(t.callExpression(t.memberExpression(t.memberExpression(t.thisExpression(), t.identifier('classList')), t.identifier('remove')), [t.stringLiteral(className)])));
+    }
+    else if (hostProperty.startsWith('attr.')) {
+        const attrName = hostProperty.slice(5);
+        return t.ifStatement(t.binaryExpression('!=', t.identifier('__v'), t.nullLiteral()), t.expressionStatement(t.callExpression(t.memberExpression(t.thisExpression(), t.identifier('setAttribute')), [
+            t.stringLiteral(attrName),
+            t.callExpression(t.identifier('String'), [t.identifier('__v')])
+        ])), t.expressionStatement(t.callExpression(t.memberExpression(t.thisExpression(), t.identifier('removeAttribute')), [t.stringLiteral(attrName)])));
+    }
+    else if (hostProperty.startsWith('style.')) {
+        const styleProp = hostProperty.slice(6);
+        return t.expressionStatement(t.assignmentExpression('=', t.memberExpression(t.memberExpression(t.thisExpression(), t.identifier('style')), t.identifier(styleProp)), t.logicalExpression('||', t.identifier('__v'), t.stringLiteral(''))));
+    }
+    else {
+        return t.expressionStatement(t.assignmentExpression('=', t.memberExpression(t.thisExpression(), t.identifier(hostProperty)), t.identifier('__v')));
+    }
+}

package/Cli.d.ts

@@ -1,12 +1,10 @@
-interface CliOptions {
-    cwd?: string;
-    nxPackage?: string;
-    noGzip?: boolean;
-}
+import type { CliOptions } from './interfaces/CliOptions.js';
 export declare class Cli {
     private readonly cwd;
     private readonly nxPackage;
     private readonly noGzip;
+    private readonly noMinify;
+    private readonly gzScriptTag;
     constructor(options?: CliOptions);
     run(args: string[]): Promise<void>;
     private showHelp;
@@ -28,10 +26,9 @@ export declare class Cli {
     private findFiles;
     private matchesPatterns;
     private matchGlob;
+    static parseArgs(argv: string[]): {
+        options: CliOptions;
+        args: string[];
+    };
 }
-export declare function parseArgs(argv: string[]): {
-    options: CliOptions;
-    args: string[];
-};
-export {};
 //# sourceMappingURL=Cli.d.ts.map

package/Cli.js

@@ -1,20 +1,28 @@
+import * as t from '@babel/types';
+import { randomUUID } from 'crypto';
 import * as esbuild from 'esbuild';
 import * as fs from 'fs';
 import * as path from 'path';
+import picomatch from 'picomatch';
 import { gzipSync } from 'zlib';
+import { generate } from './BabelHelpers.js';
 import { ComponentCompiler } from './ComponentCompiler.js';
 import { fluffPlugin } from './fluff-esbuild-plugin.js';
-import { transformIndexHtml } from './IndexHtmlTransformer.js';
-import { DEFAULT_CONFIG } from './types/FluffConfig.js';
 import { Generator } from './Generator.js';
+import { IndexHtmlTransformer } from './IndexHtmlTransformer.js';
+import { DEFAULT_CONFIG } from './types/FluffConfig.js';
 export class Cli {
     cwd;
     nxPackage;
     noGzip;
+    noMinify;
+    gzScriptTag;
     constructor(options = {}) {
         this.cwd = options.cwd ?? process.env.INIT_CWD ?? process.cwd();
         this.nxPackage = options.nxPackage;
         this.noGzip = options.noGzip ?? false;
+        this.noMinify = options.noMinify ?? false;
+        this.gzScriptTag = options.gzScriptTag ?? false;
     }
     async run(args) {
         const [command, ...commandArgs] = args;
@@ -292,9 +300,33 @@ Examples:
         if (this.noGzip) {
             bundleOptions.gzip = false;
         }
+        if (this.noMinify) {
+            bundleOptions.minify = false;
+        }
         const entryPoint = target.entryPoint
             ? path.join(srcDir, target.entryPoint)
             : this.generateEntryPoint(srcDir, target.components);
+        let inlineStyles = '';
+        if (target.styles && target.styles.length > 0) {
+            const styleContents = [];
+            for (const styleGlob of target.styles) {
+                const styleFiles = this.findFiles(srcDir, [styleGlob]);
+                for (const styleFile of styleFiles) {
+                    styleContents.push(fs.readFileSync(styleFile, 'utf-8'));
+                }
+            }
+            if (styleContents.length > 0) {
+                inlineStyles = styleContents.join('\n');
+                if (bundleOptions.minify) {
+                    const cssResult = await esbuild.transform(inlineStyles, {
+                        loader: 'css',
+                        minify: true
+                    });
+                    inlineStyles = cssResult.code;
+                }
+                console.log('   ✓ Bundled global styles');
+            }
+        }
         console.log('   Building with esbuild...');
         const result = await esbuild.build({
             entryPoints: [entryPoint],
@@ -307,7 +339,15 @@ Examples:
             splitting: bundleOptions.splitting ?? false,
             treeShaking: true,
             metafile: true,
-            plugins: [fluffPlugin({ srcDir: appDir, minify: bundleOptions.minify ?? true })],
+            plugins: [
+                fluffPlugin({
+                    srcDir: appDir,
+                    outDir,
+                    minify: bundleOptions.minify ?? true,
+                    skipDefine: false,
+                    production: true
+                })
+            ],
             external: bundleOptions.external ?? [],
             logLevel: 'warning',
             tsconfigRaw: '{}'
@@ -319,8 +359,8 @@ Examples:
             const jsBundleName = path.basename(jsBundle);
             const jsPath = path.join(outDir, jsBundleName);
             if (bundleOptions.gzip) {
-                const jsContent = fs.readFileSync(jsPath);
-                const gzipped = gzipSync(jsContent, { level: 9 });
+                const gzipContent = fs.readFileSync(jsPath);
+                const gzipped = gzipSync(gzipContent, { level: 9 });
                 fs.writeFileSync(`${jsPath}.gz`, gzipped);
                 fs.unlinkSync(jsPath);
                 console.log(`   ✓ Created ${jsBundleName}.gz (${gzipped.length} bytes)`);
@@ -347,10 +387,12 @@ Examples:
             const indexHtmlPath = path.join(srcDir, target.indexHtml);
             if (fs.existsSync(indexHtmlPath)) {
                 const indexHtml = fs.readFileSync(indexHtmlPath, 'utf-8');
-                const transformed = await transformIndexHtml(indexHtml, {
+                const transformed = await IndexHtmlTransformer.transform(indexHtml, {
                     jsBundle: jsBundle ? path.basename(jsBundle) : 'main.js',
                     cssBundle: cssBundle ? path.basename(cssBundle) : undefined,
+                    inlineStyles: inlineStyles || undefined,
                     gzip: bundleOptions.gzip,
+                    gzScriptTag: bundleOptions.gzScriptTag ?? this.gzScriptTag,
                     minify: bundleOptions.minify
                 });
                 fs.writeFileSync(path.join(outDir, 'index.html'), transformed);
@@ -436,26 +478,58 @@ Examples:
     async serveTarget(target, projectRoot, workspaceRoot, projectRelativePath) {
         const srcDir = path.resolve(projectRoot, target.srcDir);
         const appDir = path.join(srcDir, 'app');
-        const outDir = (workspaceRoot && projectRelativePath)
-            ? path.join(workspaceRoot, 'dist', projectRelativePath)
-            : path.resolve(projectRoot, target.outDir);
+        const fluffDir = path.join(this.cwd, '.fluff');
+        const serveId = randomUUID();
+        const outDir = path.join(fluffDir, serveId);
         if (!fs.existsSync(outDir)) {
             fs.mkdirSync(outDir, { recursive: true });
         }
+        const cleanup = () => {
+            try {
+                if (fs.existsSync(outDir)) {
+                    fs.rmSync(outDir, { recursive: true, force: true });
+                }
+            }
+            catch {
+            }
+        };
+        process.on('exit', cleanup);
+        process.on('SIGINT', () => {
+            cleanup();
+            process.exit(0);
+        });
+        process.on('SIGTERM', () => {
+            cleanup();
+            process.exit(0);
+        });
         const serveOptions = target.serve ?? {};
         const port = serveOptions.port ?? 3000;
         const host = serveOptions.host ?? 'localhost';
         const entryPoint = target.entryPoint
             ? path.join(srcDir, target.entryPoint)
             : this.generateEntryPoint(srcDir, target.components);
+        let inlineStyles = '';
+        if (target.styles && target.styles.length > 0) {
+            const styleContents = [];
+            for (const styleGlob of target.styles) {
+                const styleFiles = this.findFiles(srcDir, [styleGlob]);
+                for (const styleFile of styleFiles) {
+                    styleContents.push(fs.readFileSync(styleFile, 'utf-8'));
+                }
+            }
+            if (styleContents.length > 0) {
+                inlineStyles = styleContents.join('\n');
+            }
+        }
         if (target.indexHtml) {
             const indexHtmlPath = path.join(srcDir, target.indexHtml);
             if (fs.existsSync(indexHtmlPath)) {
                 const indexHtml = fs.readFileSync(indexHtmlPath, 'utf-8');
-                const transformed = await transformIndexHtml(indexHtml, {
+                const transformed = await IndexHtmlTransformer.transform(indexHtml, {
                     jsBundle: path.basename(entryPoint)
                         .replace('.ts', '.js'),
                     cssBundle: undefined,
+                    inlineStyles: inlineStyles || undefined,
                     gzip: false,
                     minify: false,
                     liveReload: true
@@ -496,7 +570,16 @@ Examples:
             minify: false,
             treeShaking: true,
             sourcemap: true,
-            plugins: [fluffPlugin({ srcDir: appDir, minify: false, sourcemap: true })],
+            plugins: [
+                fluffPlugin({
+                    srcDir: appDir,
+                    outDir,
+                    minify: false,
+                    sourcemap: true,
+                    skipDefine: false,
+                    production: false
+                })
+            ],
             logLevel: 'info'
         });
         await ctx.watch();
@@ -511,12 +594,13 @@ Examples:
     }
     generateEntryPoint(srcDir, componentPatterns) {
         const componentFiles = this.findFiles(srcDir, componentPatterns);
-        const imports = componentFiles.map(f => {
+        const importDecls = componentFiles.map(f => {
             const relativePath = './' + path.relative(srcDir, f)
                 .replace(/\\/g, '/');
-            return `import '${relativePath}';`;
+            return t.importDeclaration([], t.stringLiteral(relativePath));
         });
-        const entryContent = imports.join('\n');
+        const program = t.program(importDecls);
+        const entryContent = generate(program, { compact: false }).code;
         const entryPath = path.join(srcDir, '__generated_entry.ts');
         fs.writeFileSync(entryPath, entryContent);
         return entryPath;
@@ -550,45 +634,48 @@ Examples:
         return false;
     }
     matchGlob(filePath, pattern) {
-        const regexPattern = pattern
-            .replace(/\./g, '\\.')
-            .replace(/\*\*/g, '{{GLOBSTAR}}')
-            .replace(/\*/g, '[^/]*')
-            .replace(/\{\{GLOBSTAR}}\//g, '(.*\\/)?')
-            .replace(/\{\{GLOBSTAR}}/g, '.*');
-        const regex = new RegExp(`^${regexPattern}$`);
-        return regex.test(filePath);
+        const normalizedPath = filePath.replace(/\\/g, '/');
+        const isMatch = picomatch(pattern, { dot: false });
+        return isMatch(normalizedPath);
     }
-}
-export function parseArgs(argv) {
-    const options = {};
-    const args = [];
-    let i = 0;
-    while (i < argv.length) {
-        const arg = argv[i];
-        if (arg === '--nx' && argv[i + 1]) {
-            options.nxPackage = argv[i + 1];
-            i += 2;
-        }
-        else if (arg === '--cwd' && argv[i + 1]) {
-            options.cwd = argv[i + 1];
-            i += 2;
-        }
-        else if (arg === '--no-gzip') {
-            options.noGzip = true;
-            i++;
-        }
-        else if (arg?.startsWith('--')) {
-            console.error(`Unknown option: ${arg}`);
-            process.exit(1);
-        }
-        else if (arg) {
-            args.push(arg);
-            i++;
-        }
-        else {
-            i++;
+    static parseArgs(argv) {
+        const options = {};
+        const args = [];
+        let i = 0;
+        while (i < argv.length) {
+            const arg = argv[i];
+            if (arg === '--nx' && argv[i + 1]) {
+                options.nxPackage = argv[i + 1];
+                i += 2;
+            }
+            else if (arg === '--cwd' && argv[i + 1]) {
+                options.cwd = argv[i + 1];
+                i += 2;
+            }
+            else if (arg === '--no-gzip') {
+                options.noGzip = true;
+                i++;
+            }
+            else if (arg === '--no-minify') {
+                options.noMinify = true;
+                i++;
+            }
+            else if (arg === '--gz-script-tag') {
+                options.gzScriptTag = true;
+                i++;
+            }
+            else if (arg?.startsWith('--')) {
+                console.error(`Unknown option: ${arg}`);
+                process.exit(1);
+            }
+            else if (arg) {
+                args.push(arg);
+                i++;
+            }
+            else {
+                i++;
+            }
         }
+        return { options, args };
     }
-    return { options, args };
 }

package/CodeGenerator.d.ts

@@ -1,42 +1,56 @@
-import type { ControlFlow, TemplateBinding } from './types.js';
+import type { BreakMarkerConfig } from './interfaces/BreakMarkerConfig.js';
+import type { ForMarkerConfig } from './interfaces/ForMarkerConfig.js';
+import type { IfMarkerConfig } from './interfaces/IfMarkerConfig.js';
+import type { SwitchMarkerConfig } from './interfaces/SwitchMarkerConfig.js';
+import type { TextMarkerConfig } from './interfaces/TextMarkerConfig.js';
+import type { ParsedTemplate } from './TemplateParser.js';
+export type { BreakMarkerConfig } from './interfaces/BreakMarkerConfig.js';
+export type { ForMarkerConfig } from './interfaces/ForMarkerConfig.js';
+export type { IfMarkerConfig } from './interfaces/IfMarkerConfig.js';
+export type { SwitchMarkerConfig } from './interfaces/SwitchMarkerConfig.js';
+export type { TextMarkerConfig } from './interfaces/TextMarkerConfig.js';
+export type MarkerConfig = IfMarkerConfig | ForMarkerConfig | SwitchMarkerConfig | TextMarkerConfig | BreakMarkerConfig;
 export declare class CodeGenerator {
-    private reactiveProperties;
-    private templateRefs;
-    setReactiveProperties(props: Set<string>): void;
-    setTemplateRefs(refs: string[]): void;
-    generateRenderMethod(html: string, styles?: string): string;
-    generateBindingsSetup(bindings: TemplateBinding[], controlFlows: ControlFlow[]): string;
-    private getPropertyRef;
-    private extractBaseProp;
-    private escapeForTemplateLiteral;
-    private escapeForTemplateLiteralPreservingExpressions;
-    private dotsToDashes;
-    private removeIndexSuffix;
-    private generateBindingCode;
-    private generateTextBinding;
-    private generatePropertyBinding;
-    private generateEventBinding;
-    private generateRefLookups;
-    private generateClassBinding;
-    private generateStyleBinding;
-    private generateControlFlowCode;
-    private processContentBindings;
-    private walkAndTransformBindings;
-    private isParse5Element;
-    private processAndGenerateBindings;
-    private transformInterpolationsInContent;
-    private generateBindingSetupCode;
-    private extractPropertyBindings;
-    private generateUnifiedRender;
-    private generateIfCode;
-    private generateForCode;
-    private generateForBindingSetup;
-    private extractEventBindings;
-    private walkAndExtractEventBindings;
-    private generateSwitchCode;
-    private kebabToCamel;
-    private extractTextBindings;
-    private walkAndExtractTextBindings;
-    private walkAndExtractPropertyBindings;
+    private readonly componentSelectors;
+    private readonly componentSelector;
+    private static readonly globalExprIdsByExpr;
+    private static globalExprs;
+    private static readonly globalHandlerIdsByExpr;
+    private static globalHandlers;
+    private markerId;
+    private readonly markerConfigs;
+    private readonly usedExprIds;
+    private readonly usedHandlerIds;
+    private readonly bindingsMap;
+    private rootFragment;
+    private readonly collectedTemplates;
+    constructor(componentSelectors?: Set<string>, componentSelector?: string);
+    static resetGlobalState(): void;
+    generateRenderMethod(template: ParsedTemplate, styles?: string): string;
+    generateHtml(template: ParsedTemplate): string;
+    generateRenderMethodFromHtml(html: string, styles?: string, markerConfigJson?: string): string;
+    getMarkerConfigJson(): string;
+    generateBindingsSetup(): string;
+    getBindingsMap(): Record<string, Record<string, unknown>[]>;
+    generateExpressionAssignments(): string;
+    static generateGlobalExprTable(): string;
+    private static buildExpressionArrowFunction;
+    private static buildHandlerArrowFunction;
+    private static normalizeCompiledExpr;
+    private nextMarkerId;
+    private renderNodesToParent;
+    private renderNodeToParent;
+    private renderElementToParent;
+    private renderTextToParent;
+    private isComponentTag;
+    private serializeBinding;
+    private internExpression;
+    private internHandler;
+    private renderInterpolationToParent;
+    private renderCommentToParent;
+    private renderIfToParent;
+    private renderForToParent;
+    private renderSwitchToParent;
+    private renderBreakToParent;
 }
 //# sourceMappingURL=CodeGenerator.d.ts.map