@fluffjs/cli 0.4.5 → 0.5.0

package/CodeGenerator.d.ts

@@ -4,7 +4,9 @@ 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 { PluginManager } from './PluginManager.js';
 import type { ParsedTemplate } from './TemplateParser.js';
+import type { Parse5DocumentFragment } from './Typeguards.js';
 export type { BreakMarkerConfig } from './interfaces/BreakMarkerConfig.js';
 export type { ForMarkerConfig } from './interfaces/ForMarkerConfig.js';
 export type { IfMarkerConfig } from './interfaces/IfMarkerConfig.js';
@@ -42,14 +44,15 @@ export type CompactBinding = [
     Record<string, unknown>?
 ];
 export declare class CodeGenerator {
-    private readonly componentSelectors;
-    private readonly componentSelector;
     private static readonly globalExprIdsByExpr;
     private static globalExprs;
     private static readonly globalHandlerIdsByExpr;
     private static globalHandlers;
     private static readonly globalStringTable;
     private static readonly globalStringIndices;
+    private readonly componentSelectors;
+    private readonly directiveSelectors;
+    private readonly componentSelector;
     private markerId;
     private readonly markerConfigs;
     private readonly usedExprIds;
@@ -58,25 +61,29 @@ export declare class CodeGenerator {
     private rootFragment;
     private readonly collectedTemplates;
     private readonly namespaceStack;
-    constructor(componentSelectors?: Set<string>, componentSelector?: string);
+    constructor(componentSelectors?: Set<string>, componentSelector?: string, directiveSelectors?: Set<string>);
     static resetGlobalState(): void;
     static internString(str: string): number;
     static getStringTable(): string[];
+    static internExpression(expr: string): number;
+    static generateGlobalExprTable(pluginManager?: PluginManager): string;
+    private static buildExpressionArrowFunction;
+    private static buildHandlerArrowFunction;
+    private static normalizeCompiledExpr;
     generateRenderMethod(template: ParsedTemplate, styles?: string): string;
     generateHtml(template: ParsedTemplate): string;
     generateRenderMethodFromHtml(html: string, styles?: string, markerConfigExpr?: t.Expression): string;
     getMarkerConfigExpression(): t.Expression;
+    generateBindingsSetup(): string;
+    getBindingsMap(): Record<string, CompactBinding[]>;
+    getBindingsMapRef(): Map<string, CompactBinding[]>;
+    getMarkerConfigsRef(): Map<number, MarkerConfig>;
+    getRootFragment(): Parse5DocumentFragment | null;
+    generateExpressionAssignments(): string;
     private buildMarkerConfigExpression;
     private buildMarkerConfigArray;
     private buildCompactDepsExpression;
     private buildCompactPropertyChainExpression;
-    generateBindingsSetup(): string;
-    getBindingsMap(): Record<string, CompactBinding[]>;
-    generateExpressionAssignments(): string;
-    static generateGlobalExprTable(): string;
-    private static buildExpressionArrowFunction;
-    private static buildHandlerArrowFunction;
-    private static normalizeCompiledExpr;
     private nextMarkerId;
     private renderNodesToParent;
     private renderNodeToParent;
@@ -85,6 +92,8 @@ export declare class CodeGenerator {
     private renderToTemplateWithNamespace;
     private renderTextToParent;
     private isComponentTag;
+    private findMatchingDirectives;
+    private matchesDirectiveSelector;
     private serializeBinding;
     private internDep;
     private internExpression;

package/CodeGenerator.js

@@ -20,14 +20,15 @@ const BINDING_TYPE_MAP = {
     'ref': BIND_REF
 };
 export class CodeGenerator {
-    componentSelectors;
-    componentSelector;
     static globalExprIdsByExpr = new Map();
     static globalExprs = [];
     static globalHandlerIdsByExpr = new Map();
     static globalHandlers = [];
     static globalStringTable = [];
     static globalStringIndices = new Map();
+    componentSelectors;
+    directiveSelectors;
+    componentSelector;
     markerId = 0;
     markerConfigs = new Map();
     usedExprIds = [];
@@ -36,9 +37,10 @@ export class CodeGenerator {
     rootFragment = null;
     collectedTemplates = [];
     namespaceStack = [Parse5Helpers.NS_HTML];
-    constructor(componentSelectors = new Set(), componentSelector = '') {
+    constructor(componentSelectors = new Set(), componentSelector = '', directiveSelectors = new Set()) {
         this.componentSelectors = componentSelectors;
         this.componentSelector = componentSelector;
+        this.directiveSelectors = directiveSelectors;
     }
     static resetGlobalState() {
         CodeGenerator.globalExprIdsByExpr.clear();
@@ -61,6 +63,65 @@ export class CodeGenerator {
     static getStringTable() {
         return CodeGenerator.globalStringTable;
     }
+    static internExpression(expr) {
+        const existing = CodeGenerator.globalExprIdsByExpr.get(expr);
+        if (existing !== undefined) {
+            return existing;
+        }
+        const id = CodeGenerator.globalExprs.length;
+        CodeGenerator.globalExprs.push(expr);
+        CodeGenerator.globalExprIdsByExpr.set(expr, id);
+        return id;
+    }
+    static generateGlobalExprTable(pluginManager) {
+        const exprElements = CodeGenerator.globalExprs.map(e => {
+            const normalizedExpr = CodeGenerator.normalizeCompiledExpr(e);
+            return CodeGenerator.buildExpressionArrowFunction(['t', 'l'], normalizedExpr);
+        });
+        const handlerElements = CodeGenerator.globalHandlers.map(h => {
+            const normalizedHandler = CodeGenerator.normalizeCompiledExpr(h);
+            return CodeGenerator.buildHandlerArrowFunction(['t', 'l', '__ev'], normalizedHandler);
+        });
+        const stringElements = CodeGenerator.globalStringTable.map(s => t.stringLiteral(s));
+        const fluffBaseImport = t.importDeclaration([t.importSpecifier(t.identifier('FluffBase'), t.identifier('FluffBase'))], t.stringLiteral('@fluffjs/fluff'));
+        const tableArgs = [
+            t.arrayExpression(exprElements), t.arrayExpression(handlerElements), t.arrayExpression(stringElements)
+        ];
+        if (pluginManager?.hasPlugins) {
+            const customTables = pluginManager.collectCustomTables();
+            if (customTables.length > 0) {
+                const tablesObject = t.objectExpression(customTables.map(table => t.objectProperty(t.stringLiteral(table.name), t.arrayExpression(table.elements))));
+                tableArgs.push(tablesObject);
+            }
+        }
+        const setExprTableCall = t.expressionStatement(t.callExpression(t.memberExpression(t.identifier('FluffBase'), t.identifier('__setExpressionTable')), tableArgs));
+        const program = t.program([fluffBaseImport, setExprTableCall]);
+        return generate(program, { compact: false }).code;
+    }
+    static buildExpressionArrowFunction(params, bodyExpr) {
+        const paramNodes = params.map(p => t.identifier(p));
+        const exprAst = parse(`(${bodyExpr})`, { sourceType: 'module' });
+        const [exprStmt] = exprAst.program.body;
+        if (t.isExpressionStatement(exprStmt)) {
+            return t.arrowFunctionExpression(paramNodes, exprStmt.expression);
+        }
+        return t.arrowFunctionExpression(paramNodes, t.identifier('undefined'));
+    }
+    static buildHandlerArrowFunction(params, bodyCode) {
+        const paramNodes = params.map(p => t.identifier(p));
+        const bodyStatements = parseMethodBody(bodyCode);
+        return t.arrowFunctionExpression(paramNodes, t.blockStatement(bodyStatements));
+    }
+    static normalizeCompiledExpr(expr) {
+        let result = expr;
+        if (result.includes('this')) {
+            result = ExpressionTransformer.replaceThisExpression(result, 't');
+        }
+        if (result.includes('$event')) {
+            result = ExpressionTransformer.renameVariable(result, '$event', '__ev');
+        }
+        return result;
+    }
     generateRenderMethod(template, styles) {
         this.markerId = 0;
         this.markerConfigs.clear();
@@ -101,11 +162,50 @@ export class CodeGenerator {
     getMarkerConfigExpression() {
         return this.buildMarkerConfigExpression();
     }
+    generateBindingsSetup() {
+        const statements = [
+            t.expressionStatement(t.callExpression(t.memberExpression(t.thisExpression(), t.identifier('__initializeMarkers')), [t.identifier('MarkerManager')])),
+            t.expressionStatement(t.callExpression(t.memberExpression(t.super(), t.identifier('__setupBindings')), []))
+        ];
+        const program = t.program(statements);
+        return generate(program, { compact: false }).code;
+    }
+    getBindingsMap() {
+        return Object.fromEntries(this.bindingsMap.entries());
+    }
+    getBindingsMapRef() {
+        return this.bindingsMap;
+    }
+    getMarkerConfigsRef() {
+        return this.markerConfigs;
+    }
+    getRootFragment() {
+        return this.rootFragment;
+    }
+    generateExpressionAssignments() {
+        const statements = [];
+        for (const id of this.usedExprIds) {
+            const expr = CodeGenerator.globalExprs[id];
+            const normalizedExpr = CodeGenerator.normalizeCompiledExpr(expr);
+            const arrowFunc = CodeGenerator.buildExpressionArrowFunction(['t', 'l'], normalizedExpr);
+            statements.push(t.expressionStatement(t.assignmentExpression('=', t.memberExpression(t.memberExpression(t.identifier('FluffBase'), t.identifier('__e')), t.numericLiteral(id), true), arrowFunc)));
+        }
+        for (const id of this.usedHandlerIds) {
+            const handler = CodeGenerator.globalHandlers[id];
+            const normalizedHandler = CodeGenerator.normalizeCompiledExpr(handler);
+            const arrowFunc = CodeGenerator.buildHandlerArrowFunction(['t', 'l', '__ev'], normalizedHandler);
+            statements.push(t.expressionStatement(t.assignmentExpression('=', t.memberExpression(t.memberExpression(t.identifier('FluffBase'), t.identifier('__h')), t.numericLiteral(id), true), arrowFunc)));
+        }
+        if (statements.length === 0) {
+            return '';
+        }
+        const program = t.program(statements);
+        return generate(program, { compact: false }).code;
+    }
     buildMarkerConfigExpression() {
         const entries = Array.from(this.markerConfigs.entries())
             .map(([id, config]) => t.arrayExpression([
-            t.numericLiteral(id),
-            this.buildMarkerConfigArray(config)
+            t.numericLiteral(id), this.buildMarkerConfigArray(config)
         ]));
         return t.arrayExpression(entries);
     }
@@ -119,12 +219,10 @@ export class CodeGenerator {
                 t.numericLiteral(typeNum),
                 t.numericLiteral(config.exprId),
                 config.deps ? this.buildCompactDepsExpression(config.deps) : t.nullLiteral(),
-                config.pipes && config.pipes.length > 0
-                    ? t.arrayExpression(config.pipes.map(pipe => t.arrayExpression([
-                        t.numericLiteral(CodeGenerator.internString(pipe.name)),
-                        t.arrayExpression(pipe.argExprIds.map(arg => t.numericLiteral(arg)))
-                    ])))
-                    : t.nullLiteral()
+                config.pipes && config.pipes.length > 0 ? t.arrayExpression(config.pipes.map(pipe => t.arrayExpression([
+                    t.numericLiteral(CodeGenerator.internString(pipe.name)),
+                    t.arrayExpression(pipe.argExprIds.map(arg => t.numericLiteral(arg)))
+                ]))) : t.nullLiteral()
             ];
             return t.arrayExpression(elements);
         }
@@ -147,18 +245,14 @@ export class CodeGenerator {
                 t.numericLiteral(config.iterableExprId),
                 t.booleanLiteral(config.hasEmpty),
                 config.deps ? this.buildCompactDepsExpression(config.deps) : t.nullLiteral(),
-                config.trackBy !== undefined
-                    ? t.numericLiteral(CodeGenerator.internString(config.trackBy))
-                    : t.nullLiteral()
+                config.trackBy !== undefined ? t.numericLiteral(CodeGenerator.internString(config.trackBy)) : t.nullLiteral()
             ]);
         }
         else if (config.type === 'switch') {
             const cases = t.arrayExpression(config.cases.map(caseConfig => t.arrayExpression([
                 t.booleanLiteral(caseConfig.isDefault),
                 t.booleanLiteral(caseConfig.fallthrough),
-                caseConfig.valueExprId !== undefined
-                    ? t.numericLiteral(caseConfig.valueExprId)
-                    : t.nullLiteral()
+                caseConfig.valueExprId !== undefined ? t.numericLiteral(caseConfig.valueExprId) : t.nullLiteral()
             ])));
             return t.arrayExpression([
                 t.numericLiteral(typeNum),
@@ -181,80 +275,6 @@ export class CodeGenerator {
         }
         return t.numericLiteral(CodeGenerator.internString(dep));
     }
-    generateBindingsSetup() {
-        const statements = [
-            t.expressionStatement(t.callExpression(t.memberExpression(t.thisExpression(), t.identifier('__initializeMarkers')), [t.identifier('MarkerManager')])),
-            t.expressionStatement(t.callExpression(t.memberExpression(t.super(), t.identifier('__setupBindings')), []))
-        ];
-        const program = t.program(statements);
-        return generate(program, { compact: false }).code;
-    }
-    getBindingsMap() {
-        return Object.fromEntries(this.bindingsMap.entries());
-    }
-    generateExpressionAssignments() {
-        const statements = [];
-        for (const id of this.usedExprIds) {
-            const expr = CodeGenerator.globalExprs[id];
-            const normalizedExpr = CodeGenerator.normalizeCompiledExpr(expr);
-            const arrowFunc = CodeGenerator.buildExpressionArrowFunction(['t', 'l'], normalizedExpr);
-            statements.push(t.expressionStatement(t.assignmentExpression('=', t.memberExpression(t.memberExpression(t.identifier('FluffBase'), t.identifier('__e')), t.numericLiteral(id), true), arrowFunc)));
-        }
-        for (const id of this.usedHandlerIds) {
-            const handler = CodeGenerator.globalHandlers[id];
-            const normalizedHandler = CodeGenerator.normalizeCompiledExpr(handler);
-            const arrowFunc = CodeGenerator.buildHandlerArrowFunction(['t', 'l', '__ev'], normalizedHandler);
-            statements.push(t.expressionStatement(t.assignmentExpression('=', t.memberExpression(t.memberExpression(t.identifier('FluffBase'), t.identifier('__h')), t.numericLiteral(id), true), arrowFunc)));
-        }
-        if (statements.length === 0) {
-            return '';
-        }
-        const program = t.program(statements);
-        return generate(program, { compact: false }).code;
-    }
-    static generateGlobalExprTable() {
-        const exprElements = CodeGenerator.globalExprs.map(e => {
-            const normalizedExpr = CodeGenerator.normalizeCompiledExpr(e);
-            return CodeGenerator.buildExpressionArrowFunction(['t', 'l'], normalizedExpr);
-        });
-        const handlerElements = CodeGenerator.globalHandlers.map(h => {
-            const normalizedHandler = CodeGenerator.normalizeCompiledExpr(h);
-            return CodeGenerator.buildHandlerArrowFunction(['t', 'l', '__ev'], normalizedHandler);
-        });
-        const stringElements = CodeGenerator.globalStringTable.map(s => t.stringLiteral(s));
-        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),
-            t.arrayExpression(stringElements)
-        ]));
-        const program = t.program([fluffBaseImport, setExprTableCall]);
-        return generate(program, { compact: false }).code;
-    }
-    static buildExpressionArrowFunction(params, bodyExpr) {
-        const paramNodes = params.map(p => t.identifier(p));
-        const exprAst = parse(`(${bodyExpr})`, { sourceType: 'module' });
-        const [exprStmt] = exprAst.program.body;
-        if (t.isExpressionStatement(exprStmt)) {
-            return t.arrowFunctionExpression(paramNodes, exprStmt.expression);
-        }
-        return t.arrowFunctionExpression(paramNodes, t.identifier('undefined'));
-    }
-    static buildHandlerArrowFunction(params, bodyCode) {
-        const paramNodes = params.map(p => t.identifier(p));
-        const bodyStatements = parseMethodBody(bodyCode);
-        return t.arrowFunctionExpression(paramNodes, t.blockStatement(bodyStatements));
-    }
-    static normalizeCompiledExpr(expr) {
-        let result = expr;
-        if (result.includes('this')) {
-            result = ExpressionTransformer.replaceThisExpression(result, 't');
-        }
-        if (result.includes('$event')) {
-            result = ExpressionTransformer.renameVariable(result, '$event', '__ev');
-        }
-        return result;
-    }
     nextMarkerId() {
         return this.markerId++;
     }
@@ -296,6 +316,10 @@ export class CodeGenerator {
         if (this.isComponentTag(node.tagName)) {
             attrs.push({ name: 'x-fluff-component', value: '' });
         }
+        const matchedDirectives = this.findMatchingDirectives(node);
+        if (matchedDirectives.length > 0) {
+            attrs.push({ name: 'data-fluff-directives', value: matchedDirectives.join(',') });
+        }
         for (const [name, value] of Object.entries(node.attributes)) {
             attrs.push({ name, value });
         }
@@ -338,7 +362,12 @@ export class CodeGenerator {
         const currentNs = this.getCurrentNamespace();
         if (currentNs !== Parse5Helpers.NS_HTML) {
             const wrapperTag = currentNs === Parse5Helpers.NS_SVG ? 'svg' : 'math';
-            const wrapper = Parse5Helpers.createElement(wrapperTag, [{ name: 'data-fluff-ns-wrapper', value: '' }], currentNs);
+            const wrapper = Parse5Helpers.createElement(wrapperTag, [
+                {
+                    name: 'data-fluff-ns-wrapper',
+                    value: ''
+                }
+            ], currentNs);
             Parse5Helpers.appendChild(tplContent, wrapper);
             this.renderNodesToParent(nodes, wrapper);
         }
@@ -352,20 +381,35 @@ export class CodeGenerator {
         Parse5Helpers.appendText(parent, node.content);
     }
     isComponentTag(tagName) {
-        const resolvedTagName = tagName.startsWith(RESTRICTED_ELEMENT_PREFIX)
-            ? tagName.slice(RESTRICTED_ELEMENT_PREFIX.length)
-            : tagName;
+        const resolvedTagName = tagName.startsWith(RESTRICTED_ELEMENT_PREFIX) ? tagName.slice(RESTRICTED_ELEMENT_PREFIX.length) : tagName;
         return this.componentSelectors.has(resolvedTagName);
     }
+    findMatchingDirectives(node) {
+        const matched = [];
+        for (const selector of this.directiveSelectors) {
+            if (this.matchesDirectiveSelector(node, selector)) {
+                matched.push(selector);
+            }
+        }
+        return matched;
+    }
+    matchesDirectiveSelector(node, selector) {
+        if (selector.startsWith('[') && selector.endsWith(']')) {
+            const attrName = selector.slice(1, -1);
+            const attrNameLower = attrName.toLowerCase();
+            const hasAttr = attrNameLower in node.attributes;
+            const hasBinding = node.bindings.some(b => b.name === attrName);
+            return hasAttr || hasBinding;
+        }
+        return false;
+    }
     serializeBinding(binding) {
         const nameIdx = CodeGenerator.internString(binding.name);
         const bindType = BINDING_TYPE_MAP[binding.binding];
         if (binding.binding === 'ref') {
             return [nameIdx, bindType, null, null];
         }
-        const deps = binding.deps
-            ? binding.deps.map(dep => this.internDep(dep))
-            : null;
+        const deps = binding.deps ? binding.deps.map(dep => this.internDep(dep)) : null;
         let id = null;
         if (binding.binding === 'event') {
             if (!binding.expression) {
@@ -390,8 +434,7 @@ export class CodeGenerator {
         }
         if (binding.pipes && binding.pipes.length > 0) {
             extras.p = binding.pipes.map(pipe => ([
-                CodeGenerator.internString(pipe.name),
-                pipe.args.map(arg => this.internExpression(arg))
+                CodeGenerator.internString(pipe.name), pipe.args.map(arg => this.internExpression(arg))
             ]));
         }
         if (Object.keys(extras).length > 0) {
@@ -440,8 +483,7 @@ export class CodeGenerator {
             exprId: this.internExpression(node.expression),
             deps: node.deps,
             pipes: node.pipes?.map(pipe => ({
-                name: pipe.name,
-                argExprIds: pipe.args.map(arg => this.internExpression(arg))
+                name: pipe.name, argExprIds: pipe.args.map(arg => this.internExpression(arg))
             }))
         };
         this.markerConfigs.set(id, config);
@@ -454,10 +496,8 @@ export class CodeGenerator {
     renderIfToParent(node, parent) {
         const id = this.nextMarkerId();
         const config = {
-            type: 'if',
-            branches: node.branches.map(b => ({
-                exprId: b.condition ? this.internExpression(b.condition) : undefined,
-                deps: b.conditionDeps
+            type: 'if', branches: node.branches.map(b => ({
+                exprId: b.condition ? this.internExpression(b.condition) : undefined, deps: b.conditionDeps
             }))
         };
         this.markerConfigs.set(id, config);

package/ComponentCompiler.d.ts

@@ -1,13 +1,19 @@
 import type { ClassTransformOptions } from './babel-plugin-class-transform.js';
 import type { ComponentMetadata } from './babel-plugin-component.js';
+import type { DirectiveMetadata } from './babel-plugin-directive.js';
 import type { CompileResult } from './interfaces/CompileResult.js';
+import type { PluginManager } from './PluginManager.js';
 import { TemplateParser } from './TemplateParser.js';
 export type { CompileResult } from './interfaces/CompileResult.js';
 export declare class ComponentCompiler {
     private readonly componentSelectors;
-    private getReactivePropsForFile;
-    protected createTemplateParser(_filePath: string): TemplateParser;
-    private runBabelTransform;
+    private readonly directiveSelectors;
+    private readonly directivePaths;
+    private pluginManager;
+    setPluginManager(manager: PluginManager): void;
+    getDirectivePaths(): string[];
+    getComponentMetadata(filePath: string): ComponentMetadata | null;
+    getDirectiveMetadata(filePath: string): DirectiveMetadata | null;
     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>;
@@ -16,8 +22,18 @@ export declare class ComponentCompiler {
     transformPipeDecorators(code: string, filePath?: string): Promise<string>;
     stripTypeScript(code: string, filePath?: string): Promise<string>;
     extractComponentMetadata(code: string, filePath: string): Promise<ComponentMetadata | null>;
+    extractDirectiveMetadata(code: string, filePath: string): Promise<{
+        metadata: DirectiveMetadata;
+        transformedCode: string;
+    } | null>;
+    compileDirectiveForBundle(filePath: string, sourcemap?: boolean, production?: boolean): Promise<CompileResult>;
     transformClass(code: string, filePath: string, options: ClassTransformOptions): Promise<string>;
     transformLibraryImports(code: string, filePath: string): Promise<string>;
+    protected createTemplateParser(_filePath: string): TemplateParser;
+    private getReactivePropsForFile;
+    private runBabelTransform;
+    private addDirectiveRegistration;
+    private addFluffDirectiveImport;
     private createComponentSourceMap;
     private addFluffImport;
     private addBindingsMap;