@fluffjs/cli 0.3.9 → 0.4.1

package/CodeGenerator.d.ts

@@ -11,6 +11,36 @@ 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;
+/**
+ * Compact Binding Format (Encoder)
+ *
+ * Bindings are serialized as tuples to minimize bundle size. All strings are
+ * interned into a global string table and referenced by index.
+ *
+ * Format: [nameIdx, bindType, deps, id, extras?]
+ *
+ * - nameIdx: Index into global string table for the binding name (e.g., "value", "click")
+ * - bindType: Numeric binding type (0=property, 1=event, 2=two-way, 3=class, 4=style, 5=ref)
+ * - deps: Array of interned dependency chains, or null. Each dep is either:
+ *         - A single index (for simple property like "foo")
+ *         - An array of indices (for nested property chain like ["device", "name"])
+ * - id: Expression ID (for property/two-way/class/style) or Handler ID (for event), or null
+ * - extras: Optional object with additional binding metadata:
+ *           - t: Target property name for two-way bindings
+ *           - s: Subscribe source name
+ *           - p: Pipes array of [pipeNameIdx, argExprIds[]]
+ *
+ * The global string table is passed to FluffBase.__setExpressionTable() as the third argument.
+ * The runtime decodes these compact bindings back to BindingInfo objects.
+ */
+export type CompactDep = number | number[];
+export type CompactBinding = [
+    number,
+    number,
+    CompactDep[] | null,
+    number | null,
+    Record<string, unknown>?
+];
 export declare class CodeGenerator {
     private readonly componentSelectors;
     private readonly componentSelector;
@@ -18,6 +48,8 @@ export declare class CodeGenerator {
     private static globalExprs;
     private static readonly globalHandlerIdsByExpr;
     private static globalHandlers;
+    private static readonly globalStringTable;
+    private static readonly globalStringIndices;
     private markerId;
     private readonly markerConfigs;
     private readonly usedExprIds;
@@ -27,16 +59,18 @@ export declare class CodeGenerator {
     private readonly collectedTemplates;
     constructor(componentSelectors?: Set<string>, componentSelector?: string);
     static resetGlobalState(): void;
+    private static internString;
+    static getStringTable(): string[];
     generateRenderMethod(template: ParsedTemplate, styles?: string): string;
     generateHtml(template: ParsedTemplate): string;
     generateRenderMethodFromHtml(html: string, styles?: string, markerConfigExpr?: t.Expression): string;
     getMarkerConfigExpression(): t.Expression;
     private buildMarkerConfigExpression;
-    private buildMarkerConfigObject;
-    private buildDepsExpression;
-    private buildPropertyChainExpression;
+    private buildMarkerConfigArray;
+    private buildCompactDepsExpression;
+    private buildCompactPropertyChainExpression;
     generateBindingsSetup(): string;
-    getBindingsMap(): Record<string, Record<string, unknown>[]>;
+    getBindingsMap(): Record<string, CompactBinding[]>;
     generateExpressionAssignments(): string;
     static generateGlobalExprTable(): string;
     private static buildExpressionArrowFunction;
@@ -49,6 +83,7 @@ export declare class CodeGenerator {
     private renderTextToParent;
     private isComponentTag;
     private serializeBinding;
+    private internDep;
     private internExpression;
     private internHandler;
     private renderInterpolationToParent;

package/CodeGenerator.js

@@ -5,6 +5,20 @@ import { generate, parseMethodBody } from './BabelHelpers.js';
 import { ExpressionTransformer } from './ExpressionTransformer.js';
 import { Parse5Helpers } from './Parse5Helpers.js';
 const RESTRICTED_ELEMENT_PREFIX = 'x-fluff-el-';
+const BIND_PROPERTY = 0;
+const BIND_EVENT = 1;
+const BIND_TWO_WAY = 2;
+const BIND_CLASS = 3;
+const BIND_STYLE = 4;
+const BIND_REF = 5;
+const BINDING_TYPE_MAP = {
+    'property': BIND_PROPERTY,
+    'event': BIND_EVENT,
+    'two-way': BIND_TWO_WAY,
+    'class': BIND_CLASS,
+    'style': BIND_STYLE,
+    'ref': BIND_REF
+};
 export class CodeGenerator {
     componentSelectors;
     componentSelector;
@@ -12,6 +26,8 @@ export class CodeGenerator {
     static globalExprs = [];
     static globalHandlerIdsByExpr = new Map();
     static globalHandlers = [];
+    static globalStringTable = [];
+    static globalStringIndices = new Map();
     markerId = 0;
     markerConfigs = new Map();
     usedExprIds = [];
@@ -28,6 +44,21 @@ export class CodeGenerator {
         CodeGenerator.globalExprs = [];
         CodeGenerator.globalHandlerIdsByExpr.clear();
         CodeGenerator.globalHandlers = [];
+        CodeGenerator.globalStringTable.length = 0;
+        CodeGenerator.globalStringIndices.clear();
+    }
+    static internString(str) {
+        const existing = CodeGenerator.globalStringIndices.get(str);
+        if (existing !== undefined) {
+            return existing;
+        }
+        const id = CodeGenerator.globalStringTable.length;
+        CodeGenerator.globalStringTable.push(str);
+        CodeGenerator.globalStringIndices.set(str, id);
+        return id;
+    }
+    static getStringTable() {
+        return CodeGenerator.globalStringTable;
     }
     generateRenderMethod(template, styles) {
         this.markerId = 0;
@@ -71,73 +102,81 @@ export class CodeGenerator {
         const entries = Array.from(this.markerConfigs.entries())
             .map(([id, config]) => t.arrayExpression([
             t.numericLiteral(id),
-            this.buildMarkerConfigObject(config)
+            this.buildMarkerConfigArray(config)
         ]));
         return t.arrayExpression(entries);
     }
-    buildMarkerConfigObject(config) {
-        const properties = [
-            t.objectProperty(t.stringLiteral('type'), t.stringLiteral(config.type))
-        ];
+    buildMarkerConfigArray(config) {
+        const MARKER_TYPE_MAP = {
+            'if': 0, 'for': 1, 'text': 2, 'switch': 3, 'break': 4
+        };
+        const typeNum = MARKER_TYPE_MAP[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))))
-                ])))));
-            }
+            const elements = [
+                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()
+            ];
+            return t.arrayExpression(elements);
         }
         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)));
+            const branches = t.arrayExpression(config.branches.map(branch => {
+                if (branch.exprId === undefined && !branch.deps) {
+                    return t.arrayExpression([]);
                 }
-                if (branch.deps) {
-                    branchProps.push(t.objectProperty(t.stringLiteral('deps'), this.buildDepsExpression(branch.deps)));
-                }
-                return t.objectExpression(branchProps);
-            }))));
+                return t.arrayExpression([
+                    branch.exprId !== undefined ? t.numericLiteral(branch.exprId) : t.nullLiteral(),
+                    branch.deps ? this.buildCompactDepsExpression(branch.deps) : t.nullLiteral()
+                ]);
+            }));
+            return t.arrayExpression([t.numericLiteral(typeNum), branches]);
         }
         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)));
-            }
+            return t.arrayExpression([
+                t.numericLiteral(typeNum),
+                t.numericLiteral(CodeGenerator.internString(config.iterator)),
+                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()
+            ]);
         }
         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) {
+            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()
+            ])));
+            return t.arrayExpression([
+                t.numericLiteral(typeNum),
+                t.numericLiteral(config.expressionExprId),
+                config.deps ? this.buildCompactDepsExpression(config.deps) : t.nullLiteral(),
+                cases
+            ]);
+        }
+        else if (config.type === 'break') {
+            return t.arrayExpression([t.numericLiteral(typeNum)]);
+        }
+        return t.arrayExpression([t.numericLiteral(typeNum)]);
+    }
+    buildCompactDepsExpression(deps) {
+        return t.arrayExpression(deps.map(dep => this.buildCompactPropertyChainExpression(dep)));
+    }
+    buildCompactPropertyChainExpression(dep) {
         if (Array.isArray(dep)) {
-            return t.arrayExpression(dep.map(part => t.stringLiteral(part)));
+            return t.arrayExpression(dep.map(part => t.numericLiteral(CodeGenerator.internString(part))));
         }
-        return t.stringLiteral(dep);
+        return t.numericLiteral(CodeGenerator.internString(dep));
     }
     generateBindingsSetup() {
         const statements = [
@@ -179,8 +218,13 @@ export class CodeGenerator {
             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)]));
+        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;
     }
@@ -284,46 +328,52 @@ export class CodeGenerator {
         return this.componentSelectors.has(resolvedTagName);
     }
     serializeBinding(binding) {
-        const result = {
-            n: binding.name,
-            b: binding.binding
-        };
+        const nameIdx = CodeGenerator.internString(binding.name);
+        const bindType = BINDING_TYPE_MAP[binding.binding];
         if (binding.binding === 'ref') {
-            return result;
-        }
-        if (binding.deps) {
-            result.d = binding.deps;
-        }
-        if (binding.subscribe) {
-            result.s = binding.subscribe;
+            return [nameIdx, bindType, null, null];
         }
+        const deps = binding.deps
+            ? binding.deps.map(dep => this.internDep(dep))
+            : null;
+        let id = null;
         if (binding.binding === 'event') {
             if (!binding.expression) {
                 throw new Error(`Event binding for ${binding.name} is missing expression`);
             }
-            result.h = this.internHandler(binding.expression);
-            return result;
+            id = this.internHandler(binding.expression);
+            return [nameIdx, bindType, deps, id];
         }
+        if (!binding.expression) {
+            throw new Error(`Binding for ${binding.name} is missing expression`);
+        }
+        id = this.internExpression(binding.expression);
+        const extras = {};
         if (binding.binding === 'two-way') {
-            if (!binding.expression) {
-                throw new Error(`Two-way binding for ${binding.name} is missing expression`);
-            }
             if (!binding.expression.startsWith('this.')) {
                 throw new Error(`Two-way binding for ${binding.name} must target a component property`);
             }
-            result.t = binding.expression.slice('this.'.length);
+            extras.t = binding.expression.slice('this.'.length);
         }
-        if (!binding.expression) {
-            throw new Error(`Binding for ${binding.name} is missing expression`);
+        if (binding.subscribe) {
+            extras.s = binding.subscribe;
         }
-        result.e = this.internExpression(binding.expression);
         if (binding.pipes && binding.pipes.length > 0) {
-            result.p = binding.pipes.map(pipe => ({
-                n: pipe.name,
-                a: pipe.args.map(arg => this.internExpression(arg))
-            }));
+            extras.p = binding.pipes.map(pipe => ([
+                CodeGenerator.internString(pipe.name),
+                pipe.args.map(arg => this.internExpression(arg))
+            ]));
         }
-        return result;
+        if (Object.keys(extras).length > 0) {
+            return [nameIdx, bindType, deps, id, extras];
+        }
+        return [nameIdx, bindType, deps, id];
+    }
+    internDep(dep) {
+        if (Array.isArray(dep)) {
+            return dep.map(s => CodeGenerator.internString(s));
+        }
+        return CodeGenerator.internString(dep);
     }
     internExpression(expr) {
         const existing = CodeGenerator.globalExprIdsByExpr.get(expr);

package/package.json

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

package/testing/MarkerConfigAstReader.d.ts

@@ -9,6 +9,9 @@ type MarkerConfigEntriesLiteral = [number, MarkerConfigLiteral][];
 export declare class MarkerConfigAstReader {
     static readMarkerConfigEntries(code: string): MarkerConfigEntriesLiteral;
     static collectDeps(entries: MarkerConfigEntriesLiteral): string[];
+    private static collectDepsFromCompactConfig;
+    private static collectNumberDeps;
+    static collectCompactDeps(entries: MarkerConfigEntriesLiteral): number[][];
     private static collectDepsFromRecord;
     private static collectDepsFromIf;
     private static collectStringsFromDep;

package/testing/MarkerConfigAstReader.js

@@ -31,6 +31,9 @@ export class MarkerConfigAstReader {
     static collectDeps(entries) {
         const deps = [];
         for (const [, config] of entries) {
+            if (Array.isArray(config)) {
+                continue;
+            }
             if (!MarkerConfigAstReader.isRecord(config)) {
                 continue;
             }
@@ -56,6 +59,72 @@ export class MarkerConfigAstReader {
         }
         return deps;
     }
+    static collectDepsFromCompactConfig(config, deps) {
+        const [typeNum] = config;
+        if (typeof typeNum !== 'number')
+            return;
+        switch (typeNum) {
+            case 0: // if
+                {
+                    const [, branches] = config;
+                    if (Array.isArray(branches)) {
+                        for (const branch of branches) {
+                            if (Array.isArray(branch) && branch.length >= 2) {
+                                const [, branchDeps] = branch;
+                                if (Array.isArray(branchDeps)) {
+                                    MarkerConfigAstReader.collectNumberDeps(branchDeps, deps);
+                                }
+                            }
+                        }
+                    }
+                    break;
+                }
+            case 1: // for
+                {
+                    const [, , , , forDeps] = config;
+                    if (Array.isArray(forDeps)) {
+                        MarkerConfigAstReader.collectNumberDeps(forDeps, deps);
+                    }
+                    break;
+                }
+            case 2: // text
+                {
+                    const [, , textDeps] = config;
+                    if (Array.isArray(textDeps)) {
+                        MarkerConfigAstReader.collectNumberDeps(textDeps, deps);
+                    }
+                    break;
+                }
+            case 3: // switch
+                {
+                    const [, , switchDeps] = config;
+                    if (Array.isArray(switchDeps)) {
+                        MarkerConfigAstReader.collectNumberDeps(switchDeps, deps);
+                    }
+                    break;
+                }
+        }
+    }
+    static collectNumberDeps(compactDeps, deps) {
+        for (const dep of compactDeps) {
+            if (typeof dep === 'number') {
+                deps.push([dep]);
+            }
+            else if (Array.isArray(dep)) {
+                const numDeps = dep.filter((d) => typeof d === 'number');
+                deps.push(numDeps);
+            }
+        }
+    }
+    static collectCompactDeps(entries) {
+        const deps = [];
+        for (const [, config] of entries) {
+            if (Array.isArray(config)) {
+                MarkerConfigAstReader.collectDepsFromCompactConfig(config, deps);
+            }
+        }
+        return deps;
+    }
     static collectDepsFromRecord(configRecord, deps) {
         const configDeps = configRecord.deps;
         if (Array.isArray(configDeps)) {
@@ -153,7 +222,7 @@ export class MarkerConfigAstReader {
                 return false;
             }
             const [id, config] = entry;
-            return typeof id === 'number' && MarkerConfigAstReader.isRecord(config);
+            return typeof id === 'number' && (MarkerConfigAstReader.isRecord(config) || Array.isArray(config));
         });
     }
     static isRecord(value) {