@fluffjs/fluff 0.4.0 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluffjs/fluff",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "type": "module",
   "main": "./index.js",
   "module": "./index.js",

package/runtime/FluffBase.d.ts

@@ -51,6 +51,7 @@ export type CompactBinding = [
         p?: [number, number[]][];
     }?
 ];
+export type CompactMarkerConfig = [0, ([number | null, CompactDep[] | null] | [])[]] | [1, number, number, boolean, CompactDep[] | null, number | null] | [2, number, CompactDep[] | null, [number, number[]][] | null] | [3, number, CompactDep[] | null, [boolean, boolean, number | null][]] | [4];
 export declare abstract class FluffBase extends HTMLElement {
     static __e: ExpressionFn[];
     static __h: HandlerFn[];
@@ -59,7 +60,10 @@ export declare abstract class FluffBase extends HTMLElement {
     private static __expressionsReady;
     private static readonly __pendingInitCallbacks;
     static __setExpressionTable(expressions: ExpressionFn[], handlers: HandlerFn[], strings?: string[]): void;
-    private static __decodeDep;
+    static __decodeString(idx: number): string;
+    static __decodeDep(dep: number | number[]): string | string[];
+    static __decodeDeps(deps: (number | number[])[] | null): (string | string[])[] | undefined;
+    static __decodeMarkerConfig(compact: CompactMarkerConfig): unknown;
     private static __decodeBinding;
     static __areExpressionsReady(): boolean;
     static __addPendingInit(callback: () => void): void;

package/runtime/FluffBase.js

@@ -1,6 +1,23 @@
 import { Property } from '../utils/Property.js';
 import { Publisher } from '../utils/Publisher.js';
 const BINDING_TYPES = ['property', 'event', 'two-way', 'class', 'style', 'ref'];
+/**
+ * Compact Marker Config Format (Decoder)
+ *
+ * Marker configs use the same string table as bindings. Type is numeric:
+ * 0=if, 1=for, 2=text, 3=switch, 4=break
+ *
+ * Format varies by type:
+ * - if:     [0, branches[]] where branch = [exprId?, deps?]
+ * - for:    [1, iteratorIdx, iterableExprId, hasEmpty, deps?, trackByIdx?]
+ * - text:   [2, exprId, deps?, pipes?]
+ * - switch: [3, expressionExprId, deps?, cases[]]
+ * - break:  [4]
+ *
+ * deps are interned as CompactDep[] (same as bindings)
+ * pipes are [pipeNameIdx, argExprIds[]][]
+ */
+const MARKER_TYPES = ['if', 'for', 'text', 'switch', 'break'];
 export class FluffBase extends HTMLElement {
     static __e = [];
     static __h = [];
@@ -20,12 +37,89 @@ export class FluffBase extends HTMLElement {
             callback();
         }
     }
+    static __decodeString(idx) {
+        return FluffBase.__s[idx];
+    }
     static __decodeDep(dep) {
         if (Array.isArray(dep)) {
             return dep.map(idx => FluffBase.__s[idx]);
         }
         return FluffBase.__s[dep];
     }
+    static __decodeDeps(deps) {
+        if (!deps)
+            return undefined;
+        return deps.map(d => FluffBase.__decodeDep(d));
+    }
+    static __decodeMarkerConfig(compact) {
+        const [typeNum] = compact;
+        const type = MARKER_TYPES[typeNum];
+        switch (typeNum) {
+            case 0: // if
+                {
+                    const [, rawBranches] = compact;
+                    const branches = rawBranches.map(b => {
+                        if (b.length === 0)
+                            return {};
+                        const [branchExprId, branchDeps] = b;
+                        const result = {};
+                        if (branchExprId !== null)
+                            result.exprId = branchExprId;
+                        if (branchDeps)
+                            result.deps = FluffBase.__decodeDeps(branchDeps);
+                        return result;
+                    });
+                    return { type, branches };
+                }
+            case 1: // for
+                {
+                    const [, iteratorIdx, iterableExprId, hasEmpty, deps, trackByIdx] = compact;
+                    const result = {
+                        type,
+                        iterator: FluffBase.__s[iteratorIdx],
+                        iterableExprId,
+                        hasEmpty
+                    };
+                    if (deps)
+                        result.deps = FluffBase.__decodeDeps(deps);
+                    if (trackByIdx !== null)
+                        result.trackBy = FluffBase.__s[trackByIdx];
+                    return result;
+                }
+            case 2: // text
+                {
+                    const [, exprId, deps, pipes] = compact;
+                    const result = { type, exprId };
+                    if (deps)
+                        result.deps = FluffBase.__decodeDeps(deps);
+                    if (pipes) {
+                        result.pipes = pipes.map(([nameIdx, argExprIds]) => ({
+                            name: FluffBase.__s[nameIdx],
+                            argExprIds
+                        }));
+                    }
+                    return result;
+                }
+            case 3: // switch
+                {
+                    const [, expressionExprId, deps, cases] = compact;
+                    const result = { type, expressionExprId };
+                    if (deps)
+                        result.deps = FluffBase.__decodeDeps(deps);
+                    result.cases = cases.map(([isDefault, fallthrough, valueExprId]) => {
+                        const c = { isDefault, fallthrough };
+                        if (valueExprId !== null)
+                            c.valueExprId = valueExprId;
+                        return c;
+                    });
+                    return result;
+                }
+            case 4: // break
+                return { type };
+            default:
+                return { type: 'unknown' };
+        }
+    }
     static __decodeBinding(compact) {
         const [nameIdx, bType, deps, id, extras] = compact;
         const n = FluffBase.__s[nameIdx];

package/runtime/FluffElementImpl.d.ts

@@ -22,7 +22,7 @@ export declare abstract class FluffElement extends FluffBase {
     protected __pipe(name: string, value: unknown, ...args: unknown[]): unknown;
     protected __getPipeFn(name: string): ((value: unknown, ...args: unknown[]) => unknown) | undefined;
     protected __getShadowRoot(): ShadowRoot;
-    protected __createProp<T>(name: string, options: T | {
+    protected __createProp<T>(nameOrIdx: string | number, options: T | {
         initialValue: T;
         [key: string]: unknown;
     }): Property<T>;

package/runtime/FluffElementImpl.js

@@ -101,7 +101,8 @@ export class FluffElement extends FluffBase {
     __getShadowRoot() {
         return this._shadowRoot;
     }
-    __createProp(name, options) {
+    __createProp(nameOrIdx, options) {
+        const name = typeof nameOrIdx === 'number' ? FluffBase.__decodeString(nameOrIdx) : nameOrIdx;
         const prop = new Property(options);
         Object.defineProperty(this, name, {
             get() {

package/runtime/MarkerManager.d.ts

@@ -6,6 +6,9 @@ export declare class MarkerManager {
     private readonly host;
     private readonly shadowRoot;
     constructor(host: HTMLElement, shadowRoot: ShadowRoot);
+    private decodeConfig;
+    private isMarkerConfig;
+    private isCompactMarkerConfig;
     initializeFromConfig(entries: MarkerConfigEntries): void;
     ensureController(id: number, type: string, startMarker: Comment, endMarker: Comment | null): MarkerController | undefined;
     getController(id: number, startMarker: Comment): MarkerController | undefined;

package/runtime/MarkerManager.js

@@ -1,4 +1,5 @@
 import { BreakController } from './BreakController.js';
+import { FluffBase } from './FluffBase.js';
 import { ForController } from './ForController.js';
 import { IfController } from './IfController.js';
 import { MarkerConfigGuards } from './MarkerConfigGuards.js';
@@ -13,12 +14,45 @@ export class MarkerManager {
         this.host = host;
         this.shadowRoot = shadowRoot;
     }
+    decodeConfig(config) {
+        if (this.isCompactMarkerConfig(config)) {
+            const decoded = FluffBase.__decodeMarkerConfig(config);
+            if (this.isMarkerConfig(decoded)) {
+                return decoded;
+            }
+            throw new Error('Decoded marker config is invalid');
+        }
+        if (!Array.isArray(config)) {
+            return config;
+        }
+        throw new Error('Invalid marker config format');
+    }
+    isMarkerConfig(value) {
+        if (typeof value !== 'object' || value === null)
+            return false;
+        if (!('type' in value))
+            return false;
+        const typeVal = value.type;
+        return typeof typeVal === 'string' && ['if', 'for', 'text', 'switch', 'break'].includes(typeVal);
+    }
+    isCompactMarkerConfig(config) {
+        if (!Array.isArray(config))
+            return false;
+        if (config.length === 0)
+            return false;
+        const firstElement = config[0];
+        return typeof firstElement === 'number' && firstElement >= 0 && firstElement <= 4;
+    }
     initializeFromConfig(entries) {
         this.configs.clear();
-        for (const [id, config] of entries) {
+        for (const [id, rawConfig] of entries) {
+            const config = this.decodeConfig(rawConfig);
             this.configs.set(id, config);
         }
-        for (const [id, config] of entries) {
+        for (const [id] of entries) {
+            const config = this.configs.get(id);
+            if (!config)
+                continue;
             const { startMarker, endMarker } = this.findMarkers(id, config.type);
             if (!startMarker) {
                 continue;

package/runtime/MarkerManagerInterface.d.ts

@@ -1,5 +1,6 @@
 import type { MarkerConfig } from '../interfaces/MarkerConfig.js';
-export type MarkerConfigEntries = [number, MarkerConfig][];
+import type { CompactMarkerConfig } from './FluffBase.js';
+export type MarkerConfigEntries = [number, MarkerConfig | CompactMarkerConfig][];
 export interface MarkerManagerInterface {
     initializeFromConfig: (entries: MarkerConfigEntries) => void;
     cleanup: () => void;

package/utils/Property.js

@@ -174,11 +174,11 @@ export class Property {
         if (this.value === undefined)
             return;
         this.onChange.emit(this.value);
-        if (direction == Direction.Outbound) {
+        if (direction === Direction.Outbound) {
             this.onOutboundChange.emit(this.value);
         }
-        if (direction == Direction.Inbound) {
-            this.onOutboundChange.emit(this.value);
+        if (direction === Direction.Inbound) {
+            this.onInboundChange.emit(this.value);
         }
     }
     subscribe(direction, cb) {