@fluffjs/cli 0.3.9 → 0.4.0

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,6 +59,8 @@ 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;
@@ -36,7 +70,7 @@ export declare class CodeGenerator {
     private buildDepsExpression;
     private buildPropertyChainExpression;
     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;
@@ -179,8 +210,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 +320,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.0",
   "type": "module",
   "main": "./index.js",
   "module": "./index.js",