@fluffjs/fluff 0.4.4 → 0.5.0

package/runtime/FluffBase.js

@@ -1,23 +1,5 @@
 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 = [];
@@ -37,9 +19,6 @@ 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]);
@@ -51,107 +30,6 @@ export class FluffBase extends HTMLElement {
             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];
-        const b = BINDING_TYPES[bType];
-        const result = { n, b };
-        if (deps) {
-            result.d = deps.map(d => FluffBase.__decodeDep(d));
-        }
-        if (b === 'event') {
-            if (id !== null) {
-                result.h = id;
-            }
-        }
-        else if (id !== null) {
-            result.e = id;
-        }
-        if (extras) {
-            if (extras.t) {
-                result.t = extras.t;
-            }
-            if (extras.s) {
-                result.s = extras.s;
-            }
-            if (extras.p) {
-                result.p = extras.p.map(([pipeNameIdx, args]) => ({
-                    n: FluffBase.__s[pipeNameIdx],
-                    a: args
-                }));
-            }
-        }
-        return result;
-    }
     static __areExpressionsReady() {
         return FluffBase.__expressionsReady;
     }
@@ -185,13 +63,14 @@ export class FluffBase extends HTMLElement {
         if (result instanceof Property) {
             result = result.getValue();
         }
-        for (const pipe of pipes) {
-            const pipeFn = this.__getPipeFn(pipe.name);
+        for (const [nameIdx, argExprIds] of pipes) {
+            const name = FluffBase.__s[nameIdx];
+            const pipeFn = this.__getPipeFn(name);
             if (!pipeFn) {
-                console.warn(`Pipe "${pipe.name}" not found`);
+                console.warn(`Pipe "${name}" not found`);
                 continue;
             }
-            const args = pipe.argExprIds.map(id => this.__getCompiledExprFn(id)(this, locals));
+            const args = argExprIds.map(id => this.__getCompiledExprFn(id)(this, locals));
             result = pipeFn(result, ...args);
         }
         return result;
@@ -211,42 +90,37 @@ export class FluffBase extends HTMLElement {
         const ctor = this.constructor;
         if (typeof ctor === 'function') {
             const bindings = Reflect.get(ctor, '__bindings');
-            if (this.__isBindingsMap(bindings)) {
+            if (this.__isRecord(bindings) && lid in bindings) {
                 const lidBindings = bindings[lid];
-                if (lidBindings) {
-                    return lidBindings.map(b => FluffBase.__decodeBindingAny(b));
+                if (this.__isCompactBindingArray(lidBindings)) {
+                    return lidBindings;
                 }
             }
         }
         return undefined;
     }
-    static __decodeBindingAny(binding) {
-        if (Array.isArray(binding)) {
-            return FluffBase.__decodeBinding(binding);
-        }
-        return binding;
-    }
-    __isBindingsMap(value) {
-        return !(!value || typeof value !== 'object');
+    __isCompactBindingArray(value) {
+        return Array.isArray(value);
     }
+    // CompactBinding[1] type dispatch: 0=property, 1=event, 2=two-way, 3=class, 4=style, 5=ref
     __applyBindingWithScope(el, binding, scope, subscriptions) {
-        switch (binding.b) {
-            case 'property':
+        switch (binding[1]) {
+            case 0:
                 this.__applyPropertyBindingWithScope(el, binding, scope, subscriptions);
                 break;
-            case 'event':
+            case 1:
                 this.__applyEventBindingWithScope(el, binding, scope);
                 break;
-            case 'two-way':
+            case 2:
                 this.__applyTwoWayBindingWithScope(el, binding, scope, subscriptions);
                 break;
-            case 'class':
+            case 3:
                 this.__applyClassBindingWithScope(el, binding, scope, subscriptions);
                 break;
-            case 'style':
+            case 4:
                 this.__applyStyleBindingWithScope(el, binding, scope, subscriptions);
                 break;
-            case 'ref':
+            case 5:
                 break;
         }
     }
@@ -264,9 +138,6 @@ export class FluffBase extends HTMLElement {
         }
         return fn;
     }
-    __applyPipes(value, pipes, locals) {
-        return this.__applyPipesForController(value, pipes.map(p => ({ name: p.n, argExprIds: p.a })), locals);
-    }
     __getPipeFn(_name) {
         return undefined;
     }
@@ -302,34 +173,7 @@ export class FluffBase extends HTMLElement {
         const [first, ...rest] = chain;
         const reactiveProp = this.__getReactivePropFromScope(first, scope);
         if (reactiveProp) {
-            if (rest.length === 0) {
-                addSub(reactiveProp.onChange.subscribe(callback));
-            }
-            else {
-                let nestedSubs = [];
-                const resubscribeNested = () => {
-                    for (const sub of nestedSubs) {
-                        sub.unsubscribe();
-                    }
-                    nestedSubs = [];
-                    const currentValue = reactiveProp.getValue();
-                    if (currentValue !== null && currentValue !== undefined) {
-                        this.__subscribeToNestedChain(currentValue, rest, callback, (sub) => {
-                            nestedSubs.push(sub);
-                            addSub(sub);
-                        });
-                    }
-                    callback();
-                };
-                addSub(reactiveProp.onChange.subscribe(resubscribeNested));
-                const currentValue = reactiveProp.getValue();
-                if (currentValue !== null && currentValue !== undefined) {
-                    this.__subscribeToNestedChain(currentValue, rest, callback, (sub) => {
-                        nestedSubs.push(sub);
-                        addSub(sub);
-                    });
-                }
-            }
+            this.__subscribeToProp(reactiveProp, rest, callback, addSub);
         }
         else if (first in scope.locals) {
             const localValue = scope.locals[first];
@@ -341,40 +185,42 @@ export class FluffBase extends HTMLElement {
             console.warn(`Binding dependency "${first}" not found on component ${scope.host.constructor.name}`);
         }
     }
+    __subscribeToProp(prop, rest, callback, addSub) {
+        if (rest.length === 0) {
+            addSub(prop.onChange.subscribe(callback));
+            return;
+        }
+        let nestedSubs = [];
+        const resubscribeNested = () => {
+            for (const sub of nestedSubs) {
+                sub.unsubscribe();
+            }
+            nestedSubs = [];
+            const currentValue = prop.getValue();
+            if (currentValue !== null && currentValue !== undefined) {
+                this.__subscribeToNestedChain(currentValue, rest, callback, (sub) => {
+                    nestedSubs.push(sub);
+                    addSub(sub);
+                });
+            }
+            callback();
+        };
+        addSub(prop.onChange.subscribe(resubscribeNested));
+        const currentValue = prop.getValue();
+        if (currentValue !== null && currentValue !== undefined) {
+            this.__subscribeToNestedChain(currentValue, rest, callback, (sub) => {
+                nestedSubs.push(sub);
+                addSub(sub);
+            });
+        }
+    }
     __subscribeToNestedChain(obj, chain, callback, addSub) {
         if (chain.length === 0 || obj === null || obj === undefined)
             return;
         const [first, ...rest] = chain;
         const prop = Reflect.get(obj, first);
         if (prop instanceof Property) {
-            if (rest.length === 0) {
-                addSub(prop.onChange.subscribe(callback));
-            }
-            else {
-                let nestedSubs = [];
-                const resubscribeNested = () => {
-                    for (const sub of nestedSubs) {
-                        sub.unsubscribe();
-                    }
-                    nestedSubs = [];
-                    const currentValue = prop.getValue();
-                    if (currentValue !== null && currentValue !== undefined) {
-                        this.__subscribeToNestedChain(currentValue, rest, callback, (sub) => {
-                            nestedSubs.push(sub);
-                            addSub(sub);
-                        });
-                    }
-                    callback();
-                };
-                addSub(prop.onChange.subscribe(resubscribeNested));
-                const currentValue = prop.getValue();
-                if (currentValue !== null && currentValue !== undefined) {
-                    this.__subscribeToNestedChain(currentValue, rest, callback, (sub) => {
-                        nestedSubs.push(sub);
-                        addSub(sub);
-                    });
-                }
-            }
+            this.__subscribeToProp(prop, rest, callback, addSub);
         }
         else if (rest.length > 0 && prop !== null && prop !== undefined) {
             this.__subscribeToNestedChain(prop, rest, callback, addSub);
@@ -417,28 +263,32 @@ export class FluffBase extends HTMLElement {
         }
         return value;
     }
+    // CompactBinding: [nameIdx, type, deps, exprId, extras?]
     __applyPropertyBindingWithScope(el, binding, scope, subscriptions) {
+        const [nameIdx, , compactDeps, exprId, extras] = binding;
+        const name = FluffBase.__s[nameIdx];
+        const deps = FluffBase.__decodeDeps(compactDeps);
         const tagName = el.tagName.toLowerCase();
         const isCustomElement = customElements.get(tagName) !== undefined;
         const update = () => {
             try {
-                if (typeof binding.e !== 'number') {
-                    throw new Error(`Binding for ${binding.n} is missing exprId`);
+                if (typeof exprId !== 'number') {
+                    throw new Error(`Binding for ${name} is missing exprId`);
                 }
-                const fn = this.__getCompiledExprFn(binding.e);
+                const fn = this.__getCompiledExprFn(exprId);
                 let value = fn(this, scope.locals);
-                if (binding.p && binding.p.length > 0) {
-                    value = this.__applyPipes(value, binding.p, scope.locals);
+                if (extras?.p && extras.p.length > 0) {
+                    value = this.__applyPipesForController(value, extras.p, scope.locals);
                 }
-                this.__setChildProperty(el, binding.n, value);
+                this.__setChildProperty(el, name, value);
             }
             catch (e) {
                 console.error('Property binding error:', e);
             }
         };
-        this.__subscribeToExpressionInScope(binding.d, scope, update, subscriptions);
-        if (binding.s) {
-            this.__subscribeToExpressionInScope([binding.s], scope, update, subscriptions);
+        this.__subscribeToExpressionInScope(deps, scope, update, subscriptions);
+        if (extras?.s) {
+            this.__subscribeToExpressionInScope([extras.s], scope, update, subscriptions);
         }
         if (isCustomElement) {
             if (el instanceof FluffBase) {
@@ -450,7 +300,7 @@ export class FluffBase extends HTMLElement {
                         update();
                     }
                     else {
-                        console.warn(`Element <${tagName}> is not a FluffBase instance after whenDefined - binding for "${binding.n}" skipped`);
+                        console.warn(`Element <${tagName}> is not a FluffBase instance after whenDefined - binding for "${name}" skipped`);
                     }
                 });
             }
@@ -459,20 +309,24 @@ export class FluffBase extends HTMLElement {
             update();
         }
     }
+    // CompactBinding: [nameIdx, type, deps, handlerId, extras?]
     __applyEventBindingWithScope(el, binding, scope) {
-        const boundKey = `__fluff_event_${binding.n}`;
+        const [nameIdx, , , handlerId] = binding;
+        const name = FluffBase.__s[nameIdx];
+        const boundKey = `__fluff_event_${name}`;
         if (Reflect.has(el, boundKey))
             return;
         Reflect.set(el, boundKey, true);
-        if (typeof binding.h !== 'number') {
-            throw new Error(`Event binding for ${binding.n} is missing handlerId`);
+        if (typeof handlerId !== 'number') {
+            throw new Error(`Event binding for ${name} is missing handlerId`);
         }
-        const handlerFn = this.__getCompiledHandlerFn(binding.h);
-        if (el.hasAttribute('x-fluff-component')) {
-            this.__applyOutputBinding(el, binding.n, handlerFn, scope);
+        const handlerFn = this.__getCompiledHandlerFn(handlerId);
+        const hasDirectives = el.hasAttribute('data-fluff-directives');
+        if (el.hasAttribute('x-fluff-component') || hasDirectives) {
+            this.__applyOutputBinding(el, name, handlerFn, scope);
         }
         else {
-            el.addEventListener(binding.n, (event) => {
+            el.addEventListener(name, (event) => {
                 try {
                     handlerFn(this, scope.locals, event);
                 }
@@ -483,8 +337,7 @@ export class FluffBase extends HTMLElement {
         }
     }
     __applyOutputBinding(el, outputName, handlerFn, scope) {
-        const trySubscribe = () => {
-            const publisher = Reflect.get(el, outputName);
+        const subscribeToPublisher = (publisher) => {
             if (publisher instanceof Publisher) {
                 const sub = publisher.subscribe((value) => {
                     try {
@@ -499,25 +352,48 @@ export class FluffBase extends HTMLElement {
             }
             return false;
         };
-        if (trySubscribe()) {
-            return;
+        const subscribeToElement = () => {
+            const publisher = Reflect.get(el, outputName);
+            return subscribeToPublisher(publisher);
+        };
+        const subscribeToDirectives = () => {
+            let subscribed = false;
+            const directives = el.__fluffDirectives;
+            if (directives) {
+                for (const directive of directives) {
+                    const directivePublisher = Reflect.get(directive, outputName);
+                    if (subscribeToPublisher(directivePublisher)) {
+                        subscribed = true;
+                    }
+                }
+            }
+            return subscribed;
+        };
+        subscribeToDirectives();
+        if (!subscribeToElement()) {
+            const tagName = el.tagName.toLowerCase();
+            if (tagName.includes('-')) {
+                this.__whenDefined(tagName, () => {
+                    subscribeToElement();
+                });
+            }
         }
-        this.__whenDefined(el.tagName.toLowerCase(), () => {
-            trySubscribe();
-        });
     }
     __whenDefined(tagName, callback) {
         customElements.whenDefined(tagName)
             .then(callback)
             .catch(console.error);
     }
+    // CompactBinding: [nameIdx, type, deps, exprId, extras?] — extras.t = targetProp for two-way
     __applyTwoWayBindingWithScope(el, binding, scope, subscriptions) {
         this.__applyPropertyBindingWithScope(el, binding, scope, subscriptions);
-        if (typeof binding.t !== 'string' || binding.t.length === 0) {
-            throw new Error(`Two-way binding for ${binding.n} is missing targetProp`);
+        const name = FluffBase.__s[binding[0]];
+        const targetProp = binding[4]?.t;
+        if (typeof targetProp !== 'string' || targetProp.length === 0) {
+            throw new Error(`Two-way binding for ${name} is missing targetProp`);
         }
-        const reactiveProp = this.__getReactivePropFromScope(binding.t, scope);
-        const childPropCandidate = Reflect.get(el, binding.n);
+        const reactiveProp = this.__getReactivePropFromScope(targetProp, scope);
+        const childPropCandidate = Reflect.get(el, name);
         if (reactiveProp && childPropCandidate instanceof Property) {
             const sub = childPropCandidate.onChange.subscribe((val) => {
                 reactiveProp.setValue(val, true);
@@ -530,48 +406,115 @@ export class FluffBase extends HTMLElement {
             }
         }
     }
+    // CompactBinding: [nameIdx, type, deps, exprId]
     __applyClassBindingWithScope(el, binding, scope, subscriptions) {
+        const [nameIdx, , compactDeps, exprId] = binding;
+        const name = FluffBase.__s[nameIdx];
+        const deps = FluffBase.__decodeDeps(compactDeps);
         const update = () => {
             try {
-                if (typeof binding.e !== 'number') {
-                    throw new Error(`Class binding for ${binding.n} is missing exprId`);
+                if (typeof exprId !== 'number') {
+                    throw new Error(`Class binding for ${name} is missing exprId`);
                 }
-                const fn = this.__getCompiledExprFn(binding.e);
+                const fn = this.__getCompiledExprFn(exprId);
                 const value = this.__unwrap(fn(this, scope.locals));
                 if (value) {
-                    el.classList.add(binding.n);
+                    el.classList.add(name);
                 }
                 else {
-                    el.classList.remove(binding.n);
+                    el.classList.remove(name);
                 }
             }
             catch (e) {
                 console.error('Class binding error:', e);
             }
         };
-        this.__subscribeToExpressionInScope(binding.d, scope, update, subscriptions);
+        this.__subscribeToExpressionInScope(deps, scope, update, subscriptions);
         update();
     }
+    // CompactBinding: [nameIdx, type, deps, exprId]
     __applyStyleBindingWithScope(el, binding, scope, subscriptions) {
+        const [nameIdx, , compactDeps, exprId] = binding;
+        const name = FluffBase.__s[nameIdx];
+        const deps = FluffBase.__decodeDeps(compactDeps);
         const update = () => {
             try {
-                if (typeof binding.e !== 'number') {
-                    throw new Error(`Style binding for ${binding.n} is missing exprId`);
+                if (typeof exprId !== 'number') {
+                    throw new Error(`Style binding for ${name} is missing exprId`);
                 }
-                const fn = this.__getCompiledExprFn(binding.e);
+                const fn = this.__getCompiledExprFn(exprId);
                 const value = this.__unwrap(fn(this, scope.locals));
                 if (this.__hasStyle(el)) {
-                    el.style.setProperty(binding.n, String(value));
+                    el.style.setProperty(name, String(value));
                 }
             }
             catch (e) {
                 console.error('Style binding error:', e);
             }
         };
-        this.__subscribeToExpressionInScope(binding.d, scope, update, subscriptions);
+        this.__subscribeToExpressionInScope(deps, scope, update, subscriptions);
         update();
     }
     __hasStyle(el) {
         return 'style' in el;
     }
+    __createProp(nameOrIdx, options) {
+        const name = typeof nameOrIdx === 'number' ? FluffBase.__s[nameOrIdx] : nameOrIdx;
+        const prop = new Property(options);
+        Object.defineProperty(this, name, {
+            get() {
+                return prop.getValue();
+            },
+            set(v) {
+                prop.setValue(v);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        return prop;
+    }
+    __defineClassHostBinding(name, className, privateName) {
+        const host = this.__getHostElement();
+        Object.defineProperty(this, name, {
+            get: () => Boolean(Reflect.get(this, privateName)),
+            set: (v) => {
+                Reflect.set(this, privateName, v);
+                if (v) {
+                    host.classList.add(className);
+                }
+                else {
+                    host.classList.remove(className);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+    }
+    __applyPendingProps() {
+        const existing = Reflect.get(this, '__pendingProps');
+        if (!this.__isRecord(existing)) {
+            return;
+        }
+        for (const [propName, value] of Object.entries(existing)) {
+            const key = `__${propName}`;
+            if (key in this) {
+                const prop = Reflect.get(this, key);
+                if (prop instanceof Property) {
+                    prop.setValue(value, true);
+                }
+            }
+            else if (propName in this) {
+                Reflect.set(this, propName, value);
+            }
+        }
+        Reflect.deleteProperty(this, '__pendingProps');
+    }
+    __isRecord(value) {
+        return value !== null && typeof value === 'object' && !Array.isArray(value);
+    }
+    __getHostElement() {
+        return this;
+    }
+    __initHostBindings() {
+    }
 }

package/runtime/FluffDirective.d.ts

@@ -0,0 +1,9 @@
+import { FluffBase } from './FluffBase.js';
+export declare class FluffDirective extends FluffBase {
+    private _hostElement;
+    private _initialized;
+    __setHostElement(hostElement: HTMLElement): void;
+    initialize(): void;
+    destroy(): void;
+    protected __getHostElement(): HTMLElement;
+}

package/runtime/FluffDirective.js

@@ -0,0 +1,36 @@
+import { FluffBase } from './FluffBase.js';
+export class FluffDirective extends FluffBase {
+    _hostElement = null;
+    _initialized = false;
+    __setHostElement(hostElement) {
+        this._hostElement = hostElement;
+        if ('__assignHostElementProps' in this && typeof this.__assignHostElementProps === 'function') {
+            this.__assignHostElementProps(hostElement);
+        }
+    }
+    initialize() {
+        if (this._initialized)
+            return;
+        this._initialized = true;
+        this.__applyPendingProps();
+        this.__initHostBindings();
+        if ('onInit' in this && typeof this.onInit === 'function') {
+            this.onInit();
+        }
+    }
+    destroy() {
+        if ('onDestroy' in this && typeof this.onDestroy === 'function') {
+            this.onDestroy();
+        }
+        for (const sub of this.__baseSubscriptions) {
+            sub.unsubscribe();
+        }
+        this.__baseSubscriptions = [];
+    }
+    __getHostElement() {
+        if (!this._hostElement) {
+            throw new Error('Directive host element not set');
+        }
+        return this._hostElement;
+    }
+}

package/runtime/FluffElement.d.ts

@@ -1,5 +1,4 @@
 export { FluffBase } from './FluffBase.js';
-export type { BindingInfo } from './FluffBase.js';
 export { FluffElement } from './FluffElementImpl.js';
 export { getScope, registerScope, unregisterScope } from './ScopeRegistry.js';
 export type { Scope } from './ScopeRegistry.js';