@fluffjs/cli 0.2.4 → 0.3.0

package/Cli.d.ts

@@ -6,6 +6,7 @@ export declare class Cli {
     private readonly noMinify;
     private readonly gzScriptTag;
     constructor(options?: CliOptions);
+    private resolveCwd;
     run(args: string[]): Promise<void>;
     private showHelp;
     private getProjectRoot;
@@ -16,6 +17,7 @@ export declare class Cli {
     private loadConfig;
     private loadConfigFrom;
     private tryResolveNxProject;
+    private findProjectJsonFiles;
     private init;
     private generate;
     private build;

package/Cli.js

@@ -20,12 +20,19 @@ export class Cli {
     noMinify;
     gzScriptTag;
     constructor(options = {}) {
-        this.cwd = options.cwd ?? process.env.INIT_CWD ?? process.cwd();
+        this.cwd = options.cwd ?? this.resolveCwd();
         this.nxPackage = options.nxPackage;
         this.noGzip = options.noGzip ?? false;
         this.noMinify = options.noMinify ?? false;
         this.gzScriptTag = options.gzScriptTag ?? false;
     }
+    resolveCwd() {
+        const processCwd = process.cwd();
+        if (fs.existsSync(path.join(processCwd, 'fluff.json'))) {
+            return processCwd;
+        }
+        return process.env.INIT_CWD ?? processCwd;
+    }
     async run(args) {
         const [command, ...commandArgs] = args;
         switch (command) {
@@ -151,6 +158,17 @@ Examples:
         return parsed;
     }
     tryResolveNxProject(nameOrDir, workspaceRoot) {
+        const projectJsonPaths = this.findProjectJsonFiles(workspaceRoot);
+        for (const projectJsonPath of projectJsonPaths) {
+            const projectDir = path.dirname(projectJsonPath);
+            const projectJsonContent = JSON.parse(fs.readFileSync(projectJsonPath, 'utf-8'));
+            if (typeof projectJsonContent === 'object' && projectJsonContent !== null && 'name' in projectJsonContent) {
+                const projectName = projectJsonContent.name;
+                if (projectName === nameOrDir && fs.existsSync(path.join(projectDir, 'fluff.json'))) {
+                    return projectDir;
+                }
+            }
+        }
         const packagesDir = path.join(workspaceRoot, 'packages');
         const appsDir = path.join(workspaceRoot, 'apps');
         const libsDir = path.join(workspaceRoot, 'libs');
@@ -182,6 +200,26 @@ Examples:
         }
         return null;
     }
+    findProjectJsonFiles(dir, depth = 0) {
+        if (depth > 3)
+            return [];
+        const results = [];
+        const projectJsonPath = path.join(dir, 'project.json');
+        if (fs.existsSync(projectJsonPath)) {
+            results.push(projectJsonPath);
+        }
+        if (depth < 3) {
+            const entries = fs.readdirSync(dir, { withFileTypes: true });
+            for (const entry of entries) {
+                if (!entry.isDirectory())
+                    continue;
+                if (entry.name === 'node_modules' || entry.name === 'dist' || entry.name.startsWith('.'))
+                    continue;
+                results.push(...this.findProjectJsonFiles(path.join(dir, entry.name), depth + 1));
+            }
+        }
+        return results;
+    }
     init(args) {
         const [targetName] = args;
         const configPath = this.getConfigPath();
@@ -645,6 +683,7 @@ Examples:
                 .replace(/\\/g, '/');
             return t.importDeclaration([], t.stringLiteral(relativePath));
         });
+        importDecls.unshift(t.importDeclaration([], t.stringLiteral('@fluff/expr-table')));
         const program = t.program(importDecls);
         const entryContent = generate(program, { compact: false }).code;
         return { contents: entryContent, resolveDir: srcDir };

package/CodeGenerator.d.ts

@@ -1,3 +1,4 @@
+import * as t from '@babel/types';
 import type { BreakMarkerConfig } from './interfaces/BreakMarkerConfig.js';
 import type { ForMarkerConfig } from './interfaces/ForMarkerConfig.js';
 import type { IfMarkerConfig } from './interfaces/IfMarkerConfig.js';
@@ -28,8 +29,12 @@ export declare class CodeGenerator {
     static resetGlobalState(): void;
     generateRenderMethod(template: ParsedTemplate, styles?: string): string;
     generateHtml(template: ParsedTemplate): string;
-    generateRenderMethodFromHtml(html: string, styles?: string, markerConfigJson?: string): string;
-    getMarkerConfigJson(): string;
+    generateRenderMethodFromHtml(html: string, styles?: string, markerConfigExpr?: t.Expression): string;
+    getMarkerConfigExpression(): t.Expression;
+    private buildMarkerConfigExpression;
+    private buildMarkerConfigObject;
+    private buildDepsExpression;
+    private buildPropertyChainExpression;
     generateBindingsSetup(): string;
     getBindingsMap(): Record<string, Record<string, unknown>[]>;
     generateExpressionAssignments(): string;

package/CodeGenerator.js

@@ -33,8 +33,8 @@ export class CodeGenerator {
         this.markerId = 0;
         this.markerConfigs.clear();
         const html = this.generateHtml(template);
-        const configJson = JSON.stringify(Array.from(this.markerConfigs.entries()));
-        return this.generateRenderMethodFromHtml(html, styles, configJson);
+        const markerConfigExpr = this.getMarkerConfigExpression();
+        return this.generateRenderMethodFromHtml(html, styles, markerConfigExpr);
     }
     generateHtml(template) {
         this.rootFragment = parse5.parseFragment('');
@@ -46,7 +46,7 @@ export class CodeGenerator {
         }
         return parse5.serialize(this.rootFragment);
     }
-    generateRenderMethodFromHtml(html, styles, markerConfigJson) {
+    generateRenderMethodFromHtml(html, styles, markerConfigExpr) {
         let content = html;
         if (styles) {
             const fragment = parse5.parseFragment(html);
@@ -58,14 +58,86 @@ export class CodeGenerator {
         }
         const statements = [];
         statements.push(t.expressionStatement(t.assignmentExpression('=', t.memberExpression(t.callExpression(t.memberExpression(t.thisExpression(), t.identifier('__getShadowRoot')), []), t.identifier('innerHTML')), t.stringLiteral(content))));
-        if (markerConfigJson) {
-            statements.push(t.expressionStatement(t.callExpression(t.memberExpression(t.thisExpression(), t.identifier('__setMarkerConfigs')), [t.stringLiteral(markerConfigJson)])));
+        if (markerConfigExpr) {
+            statements.push(t.expressionStatement(t.callExpression(t.memberExpression(t.thisExpression(), t.identifier('__setMarkerConfigs')), [markerConfigExpr])));
         }
         const program = t.program(statements);
         return generate(program, { compact: false }).code;
     }
-    getMarkerConfigJson() {
-        return JSON.stringify(Array.from(this.markerConfigs.entries()));
+    getMarkerConfigExpression() {
+        return this.buildMarkerConfigExpression();
+    }
+    buildMarkerConfigExpression() {
+        const entries = Array.from(this.markerConfigs.entries())
+            .map(([id, config]) => t.arrayExpression([
+            t.numericLiteral(id),
+            this.buildMarkerConfigObject(config)
+        ]));
+        return t.arrayExpression(entries);
+    }
+    buildMarkerConfigObject(config) {
+        const properties = [
+            t.objectProperty(t.stringLiteral('type'), t.stringLiteral(config.type))
+        ];
+        if (config.type === 'text') {
+            properties.push(t.objectProperty(t.stringLiteral('exprId'), t.numericLiteral(config.exprId)));
+            if (config.deps) {
+                properties.push(t.objectProperty(t.stringLiteral('deps'), this.buildDepsExpression(config.deps)));
+            }
+            if (config.pipes && config.pipes.length > 0) {
+                properties.push(t.objectProperty(t.stringLiteral('pipes'), t.arrayExpression(config.pipes.map(pipe => t.objectExpression([
+                    t.objectProperty(t.stringLiteral('name'), t.stringLiteral(pipe.name)),
+                    t.objectProperty(t.stringLiteral('argExprIds'), t.arrayExpression(pipe.argExprIds.map(arg => t.numericLiteral(arg))))
+                ])))));
+            }
+        }
+        else if (config.type === 'if') {
+            properties.push(t.objectProperty(t.stringLiteral('branches'), t.arrayExpression(config.branches.map(branch => {
+                const branchProps = [];
+                if (branch.exprId !== undefined) {
+                    branchProps.push(t.objectProperty(t.stringLiteral('exprId'), t.numericLiteral(branch.exprId)));
+                }
+                if (branch.deps) {
+                    branchProps.push(t.objectProperty(t.stringLiteral('deps'), this.buildDepsExpression(branch.deps)));
+                }
+                return t.objectExpression(branchProps);
+            }))));
+        }
+        else if (config.type === 'for') {
+            properties.push(t.objectProperty(t.stringLiteral('iterator'), t.stringLiteral(config.iterator)), t.objectProperty(t.stringLiteral('iterableExprId'), t.numericLiteral(config.iterableExprId)), t.objectProperty(t.stringLiteral('hasEmpty'), t.booleanLiteral(config.hasEmpty)));
+            if (config.deps) {
+                properties.push(t.objectProperty(t.stringLiteral('deps'), this.buildDepsExpression(config.deps)));
+            }
+            if (config.trackBy !== undefined) {
+                properties.push(t.objectProperty(t.stringLiteral('trackBy'), t.stringLiteral(config.trackBy)));
+            }
+        }
+        else if (config.type === 'switch') {
+            properties.push(t.objectProperty(t.stringLiteral('expressionExprId'), t.numericLiteral(config.expressionExprId)));
+            if (config.deps) {
+                properties.push(t.objectProperty(t.stringLiteral('deps'), this.buildDepsExpression(config.deps)));
+            }
+            properties.push(t.objectProperty(t.stringLiteral('cases'), t.arrayExpression(config.cases.map(caseConfig => {
+                const caseProps = [
+                    t.objectProperty(t.stringLiteral('isDefault'), t.booleanLiteral(caseConfig.isDefault)),
+                    t.objectProperty(t.stringLiteral('fallthrough'), t.booleanLiteral(caseConfig.fallthrough))
+                ];
+                if (caseConfig.valueExprId !== undefined) {
+                    caseProps.push(t.objectProperty(t.stringLiteral('valueExprId'), t.numericLiteral(caseConfig.valueExprId)));
+                }
+                return t.objectExpression(caseProps);
+            }))));
+        }
+        return t.objectExpression(properties);
+    }
+    buildDepsExpression(deps) {
+        return t.arrayExpression(deps.map(dep => this.buildPropertyChainExpression(dep)));
+    }
+    buildPropertyChainExpression(dep) {
+        if (Array.isArray(dep)) {
+            return t.arrayExpression(dep.map(part => t.stringLiteral(part)));
+        }
+        return t.stringLiteral(dep);
     }
     generateBindingsSetup() {
         const statements = [
@@ -107,11 +179,9 @@ export class CodeGenerator {
             const normalizedHandler = CodeGenerator.normalizeCompiledExpr(h);
             return CodeGenerator.buildHandlerArrowFunction(['t', 'l', '__ev'], normalizedHandler);
         });
-        const statements = [
-            t.expressionStatement(t.assignmentExpression('=', t.memberExpression(t.identifier('FluffBase'), t.identifier('__e')), t.arrayExpression(exprElements))),
-            t.expressionStatement(t.assignmentExpression('=', t.memberExpression(t.identifier('FluffBase'), t.identifier('__h')), t.arrayExpression(handlerElements)))
-        ];
-        const program = t.program(statements);
+        const fluffBaseImport = t.importDeclaration([t.importSpecifier(t.identifier('FluffBase'), t.identifier('FluffBase'))], t.stringLiteral('@fluffjs/fluff'));
+        const setExprTableCall = t.expressionStatement(t.callExpression(t.memberExpression(t.identifier('FluffBase'), t.identifier('__setExpressionTable')), [t.arrayExpression(exprElements), t.arrayExpression(handlerElements)]));
+        const program = t.program([fluffBaseImport, setExprTableCall]);
         return generate(program, { compact: false }).code;
     }
     static buildExpressionArrowFunction(params, bodyExpr) {

package/ComponentCompiler.d.ts

@@ -8,18 +8,18 @@ export declare class ComponentCompiler {
     private getReactivePropsForFile;
     protected createTemplateParser(_filePath: string): TemplateParser;
     private runBabelTransform;
-    discoverComponents(dir: string): Promise<void>;
+    discoverComponents(dir: string): Promise<string[]>;
     compileComponentForBundle(filePath: string, minify?: boolean, sourcemap?: boolean, skipDefine?: boolean, production?: boolean): Promise<CompileResult>;
     stripTypeScriptWithSourceMap(code: string, filePath: string, sourcemap?: boolean): Promise<CompileResult>;
     transformImportsForBundle(code: string, filePath: string): Promise<string>;
     transformReactiveProperties(code: string, filePath?: string, production?: boolean): Promise<string>;
+    transformPipeDecorators(code: string, filePath?: string): Promise<string>;
     stripTypeScript(code: string, filePath?: string): Promise<string>;
     extractComponentMetadata(code: string, filePath: string): Promise<ComponentMetadata | null>;
     transformClass(code: string, filePath: string, options: ClassTransformOptions): Promise<string>;
     transformLibraryImports(code: string, filePath: string): Promise<string>;
     private createComponentSourceMap;
     private addFluffImport;
-    private appendCode;
     private addBindingsMap;
     private addCustomElementsDefine;
 }

package/ComponentCompiler.js

@@ -62,20 +62,24 @@ export class ComponentCompiler {
         }
     }
     async discoverComponents(dir) {
+        const componentPaths = [];
         const entries = fs.readdirSync(dir, { withFileTypes: true });
         for (const entry of entries) {
             const fullPath = path.join(dir, entry.name);
             if (entry.isDirectory()) {
-                await this.discoverComponents(fullPath);
+                const subPaths = await this.discoverComponents(fullPath);
+                componentPaths.push(...subPaths);
             }
-            else if (entry.name.endsWith('.component.ts')) {
+            else if (entry.name.endsWith('.ts')) {
                 const content = fs.readFileSync(fullPath, 'utf-8');
                 const metadata = await this.extractComponentMetadata(content, fullPath);
                 if (metadata?.selector) {
                     this.componentSelectors.add(metadata.selector);
+                    componentPaths.push(fullPath);
                 }
             }
         }
+        return componentPaths;
     }
     async compileComponentForBundle(filePath, minify, sourcemap, skipDefine, production) {
         let source = fs.readFileSync(filePath, 'utf-8');
@@ -134,20 +138,15 @@ export class ComponentCompiler {
                 removeEmptyAttributes: true
             });
         }
-        const markerConfigJson = gen.getMarkerConfigJson();
-        const renderMethod = gen.generateRenderMethodFromHtml(generatedHtml, styles, markerConfigJson);
-        const bindingsSetup = gen.generateBindingsSetup();
+        const markerConfigExpr = gen.getMarkerConfigExpression();
+        const renderMethod = gen.generateRenderMethodFromHtml(generatedHtml, styles, markerConfigExpr);
         let result = await this.transformImportsForBundle(source, filePath);
         result = await this.transformClass(result, filePath, {
             className, originalSuperClass: 'HTMLElement', newSuperClass: 'FluffElement', injectMethods: [
-                { name: '__render', body: renderMethod }, { name: '__setupBindings', body: bindingsSetup }
+                { name: '__render', body: renderMethod }
             ]
         });
         result = this.addFluffImport(result);
-        const exprAssignments = gen.generateExpressionAssignments();
-        if (exprAssignments) {
-            result = this.appendCode(result, exprAssignments);
-        }
         const bindingsMap = gen.getBindingsMap();
         if (Object.keys(bindingsMap).length > 0) {
             result = this.addBindingsMap(result, className, bindingsMap);
@@ -207,6 +206,14 @@ export class ComponentCompiler {
             errorContext: 'Babel transform error'
         });
     }
+    async transformPipeDecorators(code, filePath = 'file.ts') {
+        return this.runBabelTransform(code, filePath, {
+            useTypeScriptPreset: true,
+            useDecoratorSyntax: true,
+            plugins: [reactivePlugin],
+            errorContext: 'Pipe decorator transform error'
+        });
+    }
     async stripTypeScript(code, filePath = 'file.ts') {
         try {
             const result = await esbuild.transform(code, {
@@ -284,19 +291,12 @@ export class ComponentCompiler {
         const ast = parse(code, { sourceType: 'module' });
         const importSpecifiers = [
             t.importSpecifier(t.identifier('FluffBase'), t.identifier('FluffBase')),
-            t.importSpecifier(t.identifier('FluffElement'), t.identifier('FluffElement')),
-            t.importSpecifier(t.identifier('MarkerManager'), t.identifier('MarkerManager'))
+            t.importSpecifier(t.identifier('FluffElement'), t.identifier('FluffElement'))
         ];
         const importDecl = t.importDeclaration(importSpecifiers, t.stringLiteral('@fluffjs/fluff'));
         ast.program.body.unshift(importDecl);
         return generate(ast, { compact: false }).code;
     }
-    appendCode(code, additionalCode) {
-        const ast = parse(code, { sourceType: 'module' });
-        const additionalAst = parse(additionalCode, { sourceType: 'module' });
-        ast.program.body.push(...additionalAst.program.body);
-        return generate(ast, { compact: false }).code;
-    }
     addBindingsMap(code, className, bindingsMap) {
         const ast = parse(code, { sourceType: 'module' });
         const jsonStr = JSON.stringify(bindingsMap);

package/babel-plugin-reactive.js

@@ -8,6 +8,7 @@ export default function reactivePlugin() {
             Program: {
                 enter(path, state) {
                     state.needsPropertyImport = false;
+                    state.needsPipeRegistryImport = false;
                     state.reactiveProperties = new Set();
                     state.watchMethods = [];
                 }, exit(path, state) {
@@ -27,6 +28,18 @@ export default function reactivePlugin() {
                             path.node.body.unshift(importDecl);
                         }
                     }
+                    if (state.needsPipeRegistryImport) {
+                        const hasPipeRegistryImport = path.node.body.some(node => {
+                            if (t.isImportDeclaration(node)) {
+                                return node.specifiers.some(spec => t.isImportSpecifier(spec) && t.isIdentifier(spec.imported) && spec.imported.name === 'pipeRegistry');
+                            }
+                            return false;
+                        });
+                        if (!hasPipeRegistryImport) {
+                            const importDecl = t.importDeclaration([t.importSpecifier(t.identifier('pipeRegistry'), t.identifier('pipeRegistry'))], t.stringLiteral('@fluffjs/fluff'));
+                            path.node.body.unshift(importDecl);
+                        }
+                    }
                 }
             },
             ClassBody(path, state) {
@@ -69,6 +82,7 @@ export default function reactivePlugin() {
                 const privateFields = [];
                 const getterHostBindingUpdates = [];
                 const propertyHostBindingInits = [];
+                const classHostBindingDefs = [];
                 const pipeMethods = [];
                 const hostListeners = [];
                 const linkedPropertyMethods = [];
@@ -200,18 +214,26 @@ export default function reactivePlugin() {
                                 const privateName = `__hostBinding_${propName}`;
                                 const initialValue = propNode.value ?? t.identifier('undefined');
                                 const privateField = t.classProperty(t.identifier(privateName), initialValue);
-                                const getter = t.classMethod('get', t.identifier(propName), [], t.blockStatement([
-                                    t.returnStatement(t.memberExpression(t.thisExpression(), t.identifier(privateName)))
-                                ]));
-                                const updateStatement = buildHostBindingUpdateStatement(hostProperty);
-                                const setter = t.classMethod('set', t.identifier(propName), [t.identifier('__v')], t.blockStatement([
-                                    t.expressionStatement(t.assignmentExpression('=', t.memberExpression(t.thisExpression(), t.identifier(privateName)), t.identifier('__v'))),
-                                    updateStatement
-                                ]));
-                                newMembers.push(getter, setter);
-                                propsToRemove.push(memberPath);
-                                propertyHostBindingInits.push({ propName, privateName });
-                                path.unshiftContainer('body', privateField);
+                                if (hostProperty.startsWith('class.')) {
+                                    const className = hostProperty.slice(6);
+                                    propsToRemove.push(memberPath);
+                                    classHostBindingDefs.push({ propName, className, privateName });
+                                    path.unshiftContainer('body', privateField);
+                                }
+                                else {
+                                    const getter = t.classMethod('get', t.identifier(propName), [], t.blockStatement([
+                                        t.returnStatement(t.memberExpression(t.thisExpression(), t.identifier(privateName)))
+                                    ]));
+                                    const updateStatement = buildHostBindingUpdateStatement(hostProperty);
+                                    const setter = t.classMethod('set', t.identifier(propName), [t.identifier('__v')], t.blockStatement([
+                                        t.expressionStatement(t.assignmentExpression('=', t.memberExpression(t.thisExpression(), t.identifier(privateName)), t.identifier('__v'))),
+                                        updateStatement
+                                    ]));
+                                    newMembers.push(getter, setter);
+                                    propsToRemove.push(memberPath);
+                                    propertyHostBindingInits.push({ propName, privateName });
+                                    path.unshiftContainer('body', privateField);
+                                }
                             }
                         }
                         continue;
@@ -234,6 +256,7 @@ export default function reactivePlugin() {
                         continue;
                     }
                     const reactiveDecoratorIndices = [];
+                    const decoratorsSnapshot = [...decorators];
                     for (const [idx, dec] of decorators.entries()) {
                         const name = getDecoratorName(dec);
                         if (name === 'Reactive' || name === 'Input') {
@@ -250,31 +273,67 @@ export default function reactivePlugin() {
                     const propName = propNode.key.name;
                     const privateName = `__${propName}`;
                     const initialValue = propNode.value ?? t.identifier('undefined');
+                    let directionExpr = undefined;
+                    let commitTriggerName = undefined;
                     state.needsPropertyImport = true;
                     state.reactiveProperties?.add(propName);
-                    const isProduction = state.opts?.production ?? false;
-                    const propertyArgs = isProduction
-                        ? [initialValue]
-                        : [
-                            t.objectExpression([
-                                t.objectProperty(t.identifier('initialValue'), initialValue),
-                                t.objectProperty(t.identifier('propertyName'), t.stringLiteral(propName))
-                            ])
-                        ];
-                    const privateField = t.classProperty(t.identifier(privateName), t.newExpression(t.identifier('Property'), propertyArgs));
-                    const getter = t.classMethod('get', t.identifier(propName), [], t.blockStatement([
-                        t.returnStatement(t.callExpression(t.memberExpression(t.memberExpression(t.thisExpression(), t.identifier(privateName)), t.identifier('getValue')), []))
-                    ]));
+                    for (const dec of decoratorsSnapshot) {
+                        const name = getDecoratorName(dec);
+                        if (name !== 'Reactive' && name !== 'Input')
+                            continue;
+                        if (!t.isCallExpression(dec.expression))
+                            continue;
+                        const args = dec.expression.arguments;
+                        if (args.length === 0)
+                            continue;
+                        const [optionsArg] = args;
+                        if (!t.isObjectExpression(optionsArg))
+                            continue;
+                        for (const prop of optionsArg.properties) {
+                            if (!t.isObjectProperty(prop))
+                                continue;
+                            if (prop.computed || !t.isIdentifier(prop.key))
+                                continue;
+                            if (prop.key.name === 'direction' && t.isExpression(prop.value)) {
+                                directionExpr = prop.value;
+                            }
+                            if (prop.key.name === 'commitTrigger' && t.isStringLiteral(prop.value)) {
+                                commitTriggerName = prop.value.value;
+                            }
+                        }
+                    }
                     const linkedMethod = linkedPropertyMethods.find(lp => lp.propertyName === propName);
-                    const setterStatements = [
-                        t.expressionStatement(t.callExpression(t.memberExpression(t.memberExpression(t.thisExpression(), t.identifier(privateName)), t.identifier('setValue')), [t.identifier('__v')]))
-                    ];
-                    if (linkedMethod) {
-                        setterStatements.push(t.ifStatement(t.binaryExpression('instanceof', t.identifier('__v'), t.identifier('Property')), t.expressionStatement(t.callExpression(t.memberExpression(t.thisExpression(), t.identifier(linkedMethod.methodName)), [t.identifier('__v')]))));
+                    const isProduction = state.opts?.production ?? false;
+                    const hasDirection = directionExpr !== undefined;
+                    const hasCommitTrigger = commitTriggerName !== undefined;
+                    const hasLinkedMethod = linkedMethod !== undefined;
+                    const useOptionsObject = !isProduction || hasDirection || hasCommitTrigger || hasLinkedMethod;
+                    const propertyOptions = [];
+                    if (useOptionsObject) {
+                        propertyOptions.push(t.objectProperty(t.identifier('initialValue'), initialValue));
+                        if (!isProduction) {
+                            propertyOptions.push(t.objectProperty(t.identifier('propertyName'), t.stringLiteral(propName)));
+                        }
+                        if (directionExpr) {
+                            propertyOptions.push(t.objectProperty(t.identifier('direction'), directionExpr));
+                        }
+                        if (commitTriggerName) {
+                            propertyOptions.push(t.objectProperty(t.identifier('commitTrigger'), t.memberExpression(t.thisExpression(), t.identifier(`__${commitTriggerName}`))));
+                        }
+                        if (linkedMethod) {
+                            propertyOptions.push(t.objectProperty(t.identifier('linkHandler'), t.arrowFunctionExpression([
+                                t.identifier('__p')
+                            ], t.callExpression(t.memberExpression(t.thisExpression(), t.identifier(linkedMethod.methodName)), [
+                                t.identifier('__p')
+                            ]))));
+                        }
                     }
-                    const setter = t.classMethod('set', t.identifier(propName), [t.identifier('__v')], t.blockStatement(setterStatements));
+                    const propertyArgs = useOptionsObject
+                        ? [t.objectExpression(propertyOptions)]
+                        : [initialValue];
+                    const createPropCall = t.callExpression(t.memberExpression(t.thisExpression(), t.identifier('__createProp')), [t.stringLiteral(propName), ...propertyArgs]);
+                    const privateField = t.classProperty(t.identifier(privateName), createPropCall);
                     propsToRemove.push(memberPath);
-                    newMembers.push(getter, setter);
                     privateFields.push(privateField);
                 }
                 for (const p of propsToRemove) {
@@ -321,6 +380,9 @@ export default function reactivePlugin() {
                 }
                 const reactiveProps = state.reactiveProperties ?? new Set();
                 const constructorStatements = [];
+                for (const { propName, className, privateName } of classHostBindingDefs) {
+                    constructorStatements.push(t.expressionStatement(t.callExpression(t.memberExpression(t.thisExpression(), t.identifier('__defineClassHostBinding')), [t.stringLiteral(propName), t.stringLiteral(className), t.stringLiteral(privateName)])));
+                }
                 for (const updateMethodName of getterHostBindingUpdates) {
                     constructorStatements.push(t.expressionStatement(t.callExpression(t.memberExpression(t.thisExpression(), t.identifier(updateMethodName)), [])));
                 }
@@ -394,6 +456,29 @@ export default function reactivePlugin() {
                         ])));
                     }
                 }
+            },
+            ClassDeclaration(path, state) {
+                const decorators = path.node.decorators ?? [];
+                const pipeDecoratorIndex = findDecoratorIndex(decorators, 'Pipe');
+                if (pipeDecoratorIndex >= 0) {
+                    const pipeDecorator = decorators[pipeDecoratorIndex];
+                    if (t.isCallExpression(pipeDecorator.expression)) {
+                        const args = pipeDecorator.expression.arguments;
+                        if (args.length > 0 && t.isStringLiteral(args[0]) && path.node.id) {
+                            const pipeName = args[0].value;
+                            const className = path.node.id;
+                            state.needsPipeRegistryImport = true;
+                            decorators.splice(pipeDecoratorIndex, 1);
+                            if (decorators.length === 0) {
+                                path.node.decorators = null;
+                            }
+                            path.insertAfter([
+                                t.expressionStatement(t.assignmentExpression('=', t.memberExpression(className, t.identifier('__pipeName')), t.stringLiteral(pipeName))),
+                                t.expressionStatement(t.callExpression(t.memberExpression(t.identifier('pipeRegistry'), t.identifier('set')), [t.stringLiteral(pipeName), className]))
+                            ]);
+                        }
+                    }
+                }
             }
         }
     };

package/fluff-esbuild-plugin.js

@@ -1,8 +1,12 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import { fileURLToPath } from 'url';
+import { parse } from '@babel/parser';
+import * as t from '@babel/types';
+import { generate } from './BabelHelpers.js';
 import { CodeGenerator } from './CodeGenerator.js';
 import { ComponentCompiler } from './ComponentCompiler.js';
+const VIRTUAL_EXPR_TABLE_ID = '@fluff/expr-table';
 function findFluffSourcePath() {
     const thisFile = fileURLToPath(import.meta.url);
     const distDir = path.dirname(thisFile);
@@ -14,28 +18,139 @@ function findFluffSourcePath() {
     }
     return null;
 }
+function getEntryPointPath(build) {
+    const { entryPoints, stdin } = build.initialOptions;
+    if (stdin?.resolveDir) {
+        return null;
+    }
+    if (Array.isArray(entryPoints) && entryPoints.length > 0) {
+        const [first] = entryPoints;
+        return typeof first === 'string' ? first : first.in;
+    }
+    return null;
+}
+function detectDecorators(source) {
+    const result = { hasComponent: false, hasPipe: false };
+    try {
+        const ast = parse(source, {
+            sourceType: 'module',
+            plugins: ['typescript', 'decorators']
+        });
+        for (const node of ast.program.body) {
+            if (t.isClassDeclaration(node) && node.decorators) {
+                for (const decorator of node.decorators) {
+                    if (t.isCallExpression(decorator.expression) && t.isIdentifier(decorator.expression.callee)) {
+                        const { name } = decorator.expression.callee;
+                        if (name === 'Component')
+                            result.hasComponent = true;
+                        if (name === 'Pipe')
+                            result.hasPipe = true;
+                    }
+                }
+            }
+            if (t.isExportNamedDeclaration(node) && t.isClassDeclaration(node.declaration) && node.declaration.decorators) {
+                for (const decorator of node.declaration.decorators) {
+                    if (t.isCallExpression(decorator.expression) && t.isIdentifier(decorator.expression.callee)) {
+                        const { name } = decorator.expression.callee;
+                        if (name === 'Component')
+                            result.hasComponent = true;
+                        if (name === 'Pipe')
+                            result.hasPipe = true;
+                    }
+                }
+            }
+            if (t.isExportDefaultDeclaration(node) && t.isClassDeclaration(node.declaration) && node.declaration.decorators) {
+                for (const decorator of node.declaration.decorators) {
+                    if (t.isCallExpression(decorator.expression) && t.isIdentifier(decorator.expression.callee)) {
+                        const { name } = decorator.expression.callee;
+                        if (name === 'Component')
+                            result.hasComponent = true;
+                        if (name === 'Pipe')
+                            result.hasPipe = true;
+                    }
+                }
+            }
+        }
+    }
+    catch {
+    }
+    return result;
+}
 export function fluffPlugin(options) {
     const compiler = new ComponentCompiler();
-    let componentsDiscovered = false;
     const fluffSrcPath = findFluffSourcePath();
+    const compiledCache = new Map();
+    let entryPointPath = null;
     // noinspection JSUnusedGlobalSymbols
     return {
         name: 'fluff',
         setup(build) {
+            entryPointPath = getEntryPointPath(build);
             build.onStart(async () => {
                 CodeGenerator.resetGlobalState();
-                if (!componentsDiscovered) {
-                    await compiler.discoverComponents(options.srcDir);
-                    componentsDiscovered = true;
+                compiledCache.clear();
+                const componentPaths = await compiler.discoverComponents(options.srcDir);
+                for (const componentPath of componentPaths) {
+                    const result = await compiler.compileComponentForBundle(componentPath, options.minify, options.sourcemap, options.skipDefine, options.production);
+                    compiledCache.set(componentPath, {
+                        code: result.code,
+                        watchFiles: result.watchFiles
+                    });
+                }
+            });
+            build.onLoad({ filter: /\.ts$/ }, async (args) => {
+                const source = fs.readFileSync(args.path, 'utf-8');
+                const decorators = detectDecorators(source);
+                if (decorators.hasComponent) {
+                    const cached = compiledCache.get(args.path);
+                    if (cached) {
+                        return {
+                            contents: cached.code,
+                            loader: 'js',
+                            resolveDir: path.dirname(args.path),
+                            watchFiles: cached.watchFiles
+                        };
+                    }
+                    const result = await compiler.compileComponentForBundle(args.path, options.minify, options.sourcemap, options.skipDefine, options.production);
+                    return {
+                        contents: result.code,
+                        loader: 'js',
+                        resolveDir: path.dirname(args.path),
+                        watchFiles: result.watchFiles
+                    };
+                }
+                if (decorators.hasPipe) {
+                    const transformed = await compiler.transformPipeDecorators(source, args.path);
+                    return {
+                        contents: transformed,
+                        loader: 'ts',
+                        resolveDir: path.dirname(args.path)
+                    };
                 }
+                if (!entryPointPath || args.path !== entryPointPath) {
+                    return null;
+                }
+                const ast = parse(source, {
+                    sourceType: 'module',
+                    plugins: ['typescript', 'decorators']
+                });
+                const exprTableImport = t.importDeclaration([], t.stringLiteral(VIRTUAL_EXPR_TABLE_ID));
+                ast.program.body.push(exprTableImport);
+                const output = generate(ast, { compact: false });
+                return {
+                    contents: output.code,
+                    loader: 'ts',
+                    resolveDir: path.dirname(args.path)
+                };
+            });
+            build.onResolve({ filter: new RegExp(`^${VIRTUAL_EXPR_TABLE_ID.replace('/', '\\/')}$`) }, () => {
+                return { path: VIRTUAL_EXPR_TABLE_ID, namespace: 'fluff-virtual' };
             });
-            build.onLoad({ filter: /\.component\.ts$/ }, async (args) => {
-                const result = await compiler.compileComponentForBundle(args.path, options.minify, options.sourcemap, options.skipDefine, options.production);
+            build.onLoad({ filter: /.*/, namespace: 'fluff-virtual' }, () => {
+                const exprTable = CodeGenerator.generateGlobalExprTable();
                 return {
-                    contents: result.code,
-                    loader: 'js',
-                    resolveDir: path.dirname(args.path),
-                    watchFiles: result.watchFiles
+                    contents: exprTable || '',
+                    loader: 'js'
                 };
             });
             if (fluffSrcPath) {

package/interfaces/BabelPluginReactiveState.d.ts

@@ -3,6 +3,7 @@ import type { BabelPluginReactiveWatchInfo } from './BabelPluginReactiveWatchInf
 export interface BabelPluginReactiveState {
     filename?: string;
     needsPropertyImport?: boolean;
+    needsPipeRegistryImport?: boolean;
     reactiveProperties?: Set<string>;
     watchMethods?: BabelPluginReactiveWatchInfo[];
     watchCalls?: BabelPluginReactiveWatchCallInfo[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluffjs/cli",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "type": "module",
   "main": "./index.js",
   "module": "./index.js",

package/testing/MarkerConfigAstReader.d.ts

@@ -0,0 +1,22 @@
+interface MarkerConfigLiteralRecord {
+    [key: string]: MarkerConfigLiteral;
+}
+interface MarkerConfigLiteralArray extends Array<MarkerConfigLiteral> {
+    readonly __markerConfigArrayBrand?: true;
+}
+type MarkerConfigLiteral = string | number | boolean | null | MarkerConfigLiteralArray | MarkerConfigLiteralRecord;
+type MarkerConfigEntriesLiteral = [number, MarkerConfigLiteral][];
+export declare class MarkerConfigAstReader {
+    static readMarkerConfigEntries(code: string): MarkerConfigEntriesLiteral;
+    static collectDeps(entries: MarkerConfigEntriesLiteral): string[];
+    private static collectDepsFromRecord;
+    private static collectDepsFromIf;
+    private static collectStringsFromDep;
+    private static isMarkerConfigCall;
+    private static evaluateLiteral;
+    private static readObjectKey;
+    private static isEntriesArray;
+    private static isRecord;
+}
+export {};
+//# sourceMappingURL=MarkerConfigAstReader.d.ts.map

package/testing/MarkerConfigAstReader.js

@@ -0,0 +1,162 @@
+import { parse } from '@babel/parser';
+import * as t from '@babel/types';
+import { traverse } from '../BabelHelpers.js';
+export class MarkerConfigAstReader {
+    static readMarkerConfigEntries(code) {
+        const ast = parse(code, {
+            sourceType: 'module',
+            plugins: ['typescript', 'decorators']
+        });
+        let markerConfigArg = null;
+        traverse(ast, {
+            CallExpression(path) {
+                if (MarkerConfigAstReader.isMarkerConfigCall(path.node)) {
+                    const [firstArg] = path.node.arguments;
+                    if (firstArg && t.isExpression(firstArg)) {
+                        markerConfigArg = firstArg;
+                        path.stop();
+                    }
+                }
+            }
+        });
+        if (!markerConfigArg) {
+            throw new Error('Could not find __setMarkerConfigs call');
+        }
+        const literal = MarkerConfigAstReader.evaluateLiteral(markerConfigArg);
+        if (!MarkerConfigAstReader.isEntriesArray(literal)) {
+            throw new Error('Expected marker config entries array');
+        }
+        return literal;
+    }
+    static collectDeps(entries) {
+        const deps = [];
+        for (const [, config] of entries) {
+            if (!MarkerConfigAstReader.isRecord(config)) {
+                continue;
+            }
+            const configRecord = config;
+            const typeValue = configRecord.type;
+            if (typeof typeValue !== 'string') {
+                continue;
+            }
+            switch (typeValue) {
+                case 'text':
+                    MarkerConfigAstReader.collectDepsFromRecord(configRecord, deps);
+                    break;
+                case 'if':
+                    MarkerConfigAstReader.collectDepsFromIf(configRecord, deps);
+                    break;
+                case 'for':
+                    MarkerConfigAstReader.collectDepsFromRecord(configRecord, deps);
+                    break;
+                case 'switch':
+                    MarkerConfigAstReader.collectDepsFromRecord(configRecord, deps);
+                    break;
+            }
+        }
+        return deps;
+    }
+    static collectDepsFromRecord(configRecord, deps) {
+        const configDeps = configRecord.deps;
+        if (Array.isArray(configDeps)) {
+            for (const dep of configDeps) {
+                MarkerConfigAstReader.collectStringsFromDep(dep, deps);
+            }
+        }
+    }
+    static collectDepsFromIf(configRecord, deps) {
+        const { branches } = configRecord;
+        if (!Array.isArray(branches)) {
+            return;
+        }
+        for (const branch of branches) {
+            if (!MarkerConfigAstReader.isRecord(branch)) {
+                continue;
+            }
+            MarkerConfigAstReader.collectDepsFromRecord(branch, deps);
+        }
+    }
+    static collectStringsFromDep(dep, deps) {
+        if (typeof dep === 'string') {
+            deps.push(dep);
+            return;
+        }
+        if (Array.isArray(dep)) {
+            for (const item of dep) {
+                MarkerConfigAstReader.collectStringsFromDep(item, deps);
+            }
+        }
+    }
+    static isMarkerConfigCall(node) {
+        if (!t.isMemberExpression(node.callee)) {
+            return false;
+        }
+        if (!t.isIdentifier(node.callee.property)) {
+            return false;
+        }
+        return node.callee.property.name === '__setMarkerConfigs';
+    }
+    static evaluateLiteral(node) {
+        if (t.isStringLiteral(node)) {
+            return node.value;
+        }
+        if (t.isNumericLiteral(node)) {
+            return node.value;
+        }
+        if (t.isBooleanLiteral(node)) {
+            return node.value;
+        }
+        if (t.isNullLiteral(node)) {
+            return null;
+        }
+        if (t.isArrayExpression(node)) {
+            const items = [];
+            for (const element of node.elements) {
+                if (!element || !t.isExpression(element)) {
+                    throw new Error('Unexpected array element in marker config literal');
+                }
+                items.push(MarkerConfigAstReader.evaluateLiteral(element));
+            }
+            return items;
+        }
+        if (t.isObjectExpression(node)) {
+            const result = {};
+            for (const prop of node.properties) {
+                if (!t.isObjectProperty(prop)) {
+                    throw new Error('Unexpected object property in marker config literal');
+                }
+                const key = MarkerConfigAstReader.readObjectKey(prop.key);
+                if (!t.isExpression(prop.value)) {
+                    throw new Error('Unexpected object property value in marker config literal');
+                }
+                result[key] = MarkerConfigAstReader.evaluateLiteral(prop.value);
+            }
+            return result;
+        }
+        throw new Error('Unsupported marker config literal');
+    }
+    static readObjectKey(key) {
+        if (t.isIdentifier(key)) {
+            return key.name;
+        }
+        if (t.isStringLiteral(key)) {
+            return key.value;
+        }
+        throw new Error('Unsupported object key in marker config literal');
+    }
+    static isEntriesArray(value) {
+        if (!Array.isArray(value)) {
+            return false;
+        }
+        return value.every(entry => {
+            if (!Array.isArray(entry) || entry.length !== 2) {
+                return false;
+            }
+            const [id, config] = entry;
+            return typeof id === 'number' && MarkerConfigAstReader.isRecord(config);
+        });
+    }
+    static isRecord(value) {
+        return typeof value === 'object' && value !== null && !Array.isArray(value);
+    }
+}