@fluffjs/fluff 0.0.7 → 0.1.0

package/runtime/FluffBase.js

@@ -0,0 +1,271 @@
+import { DomUtils } from '../utils/DomUtils.js';
+import { Property } from '../utils/Property.js';
+import { Publisher } from '../utils/Publisher.js';
+export class FluffBase extends HTMLElement {
+    static __e = [];
+    static __h = [];
+    static __bindings = {};
+    __parentScope;
+    __loopContext = {};
+    __baseSubscriptions = [];
+    __getScope() {
+        return {
+            host: this,
+            locals: this.__loopContext,
+            parent: this.__parentScope
+        };
+    }
+    __processBindingsOnElement(el, scope, subscriptions) {
+        const lid = el.getAttribute('data-lid');
+        if (!lid)
+            return;
+        const bindings = this.__getBindingsForLid(lid);
+        if (!bindings || bindings.length === 0)
+            return;
+        for (const binding of bindings) {
+            this.__applyBindingWithScope(el, binding, scope, subscriptions);
+        }
+    }
+    __getBindingsForLid(lid) {
+        const ctor = this.constructor;
+        if (typeof ctor === 'function') {
+            const bindings = Reflect.get(ctor, '__bindings');
+            if (this.__isBindingsMap(bindings)) {
+                return bindings[lid];
+            }
+        }
+        return undefined;
+    }
+    __isBindingsMap(value) {
+        return !(!value || typeof value !== 'object');
+    }
+    __applyBindingWithScope(el, binding, scope, subscriptions) {
+        switch (binding.b) {
+            case 'property':
+                this.__applyPropertyBindingWithScope(el, binding, scope, subscriptions);
+                break;
+            case 'event':
+                this.__applyEventBindingWithScope(el, binding, scope);
+                break;
+            case 'two-way':
+                this.__applyTwoWayBindingWithScope(el, binding, scope, subscriptions);
+                break;
+            case 'class':
+                this.__applyClassBindingWithScope(el, binding, scope, subscriptions);
+                break;
+            case 'style':
+                this.__applyStyleBindingWithScope(el, binding, scope, subscriptions);
+                break;
+            case 'ref':
+                break;
+        }
+    }
+    __getCompiledExprFn(exprId) {
+        const fn = FluffBase.__e[exprId];
+        if (typeof fn !== 'function') {
+            throw new Error(`Missing compiled expression function for exprId ${exprId}`);
+        }
+        return fn;
+    }
+    __getCompiledHandlerFn(handlerId) {
+        const fn = FluffBase.__h[handlerId];
+        if (typeof fn !== 'function') {
+            throw new Error(`Missing compiled handler function for handlerId ${handlerId}`);
+        }
+        return fn;
+    }
+    __subscribeToExpressionInScope(deps, scope, callback, subscriptions) {
+        if (!deps)
+            return;
+        for (const dep of deps) {
+            const propName = Array.isArray(dep) ? dep[0] : dep;
+            const reactiveProp = this.__getReactivePropFromScope(propName, scope);
+            if (reactiveProp) {
+                const sub = reactiveProp.onChange.subscribe(callback);
+                if (subscriptions) {
+                    subscriptions.push(sub);
+                }
+                else {
+                    this.__baseSubscriptions.push(sub);
+                }
+            }
+        }
+    }
+    __getReactivePropFromScope(propName, scope) {
+        if (propName in scope.locals) {
+            return undefined;
+        }
+        const key = `__${propName}`;
+        if (key in scope.host) {
+            const candidate = Reflect.get(scope.host, key);
+            if (candidate instanceof Property) {
+                return candidate;
+            }
+        }
+        if (scope.parent) {
+            return this.__getReactivePropFromScope(propName, scope.parent);
+        }
+        return undefined;
+    }
+    __setChildProperty(el, propName, value) {
+        const prop = Reflect.get(el, propName);
+        if (prop instanceof Property) {
+            prop.setValue(value, true);
+        }
+        else if (DomUtils.isCustomElement(el)) {
+            this.__whenDefined(el.tagName.toLowerCase(), () => {
+                if (el instanceof FluffBase) {
+                    Reflect.set(el, propName, value);
+                }
+            });
+        }
+        else if (propName in el) {
+            Reflect.set(el, propName, value);
+        }
+        else {
+            el.setAttribute(propName, String(value));
+        }
+    }
+    __applyPropertyBindingWithScope(el, binding, scope, subscriptions) {
+        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`);
+                }
+                const fn = this.__getCompiledExprFn(binding.e);
+                const value = fn(this, scope.locals);
+                this.__setChildProperty(el, binding.n, 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);
+        }
+        if (isCustomElement) {
+            if (el instanceof FluffBase) {
+                update();
+            }
+            else {
+                this.__whenDefined(tagName, () => {
+                    if (el instanceof FluffBase) {
+                        update();
+                    }
+                });
+            }
+        }
+        else {
+            update();
+        }
+    }
+    __applyEventBindingWithScope(el, binding, scope) {
+        if (typeof binding.h !== 'number') {
+            throw new Error(`Event binding for ${binding.n} is missing handlerId`);
+        }
+        const handlerFn = this.__getCompiledHandlerFn(binding.h);
+        if (el.hasAttribute('x-fluff-component')) {
+            this.__applyOutputBinding(el, binding.n, handlerFn, scope);
+        }
+        else {
+            el.addEventListener(binding.n, (event) => {
+                try {
+                    handlerFn(this, scope.locals, event);
+                }
+                catch (e) {
+                    console.error('Event binding error:', e);
+                }
+            });
+        }
+    }
+    __applyOutputBinding(el, outputName, handlerFn, scope) {
+        const trySubscribe = () => {
+            const publisher = Reflect.get(el, outputName);
+            if (publisher instanceof Publisher) {
+                const sub = publisher.subscribe((value) => {
+                    try {
+                        handlerFn(this, scope.locals, value);
+                    }
+                    catch (e) {
+                        console.error('Output binding error:', e);
+                    }
+                });
+                this.__baseSubscriptions.push(sub);
+                return true;
+            }
+            return false;
+        };
+        if (trySubscribe()) {
+            return;
+        }
+        this.__whenDefined(el.tagName.toLowerCase(), () => {
+            trySubscribe();
+        });
+    }
+    __whenDefined(tagName, callback) {
+        customElements.whenDefined(tagName)
+            .then(callback)
+            .catch(console.error);
+    }
+    __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 reactiveProp = this.__getReactivePropFromScope(binding.t, scope);
+        const childPropCandidate = Reflect.get(el, binding.n);
+        if (reactiveProp && childPropCandidate instanceof Property) {
+            const sub = childPropCandidate.onChange.subscribe((val) => {
+                reactiveProp.setValue(val, true);
+            });
+            if (subscriptions) {
+                subscriptions.push(sub);
+            }
+            else {
+                this.__baseSubscriptions.push(sub);
+            }
+        }
+    }
+    __applyClassBindingWithScope(el, binding, scope, subscriptions) {
+        const update = () => {
+            try {
+                if (typeof binding.e !== 'number') {
+                    throw new Error(`Class binding for ${binding.n} is missing exprId`);
+                }
+                const fn = this.__getCompiledExprFn(binding.e);
+                const value = fn(this, scope.locals);
+                if (value) {
+                    el.classList.add(binding.n);
+                }
+                else {
+                    el.classList.remove(binding.n);
+                }
+            }
+            catch (e) {
+                console.error('Class binding error:', e);
+            }
+        };
+        this.__subscribeToExpressionInScope(binding.d, scope, update, subscriptions);
+        update();
+    }
+    __applyStyleBindingWithScope(el, binding, scope, subscriptions) {
+        const update = () => {
+            try {
+                if (typeof binding.e !== 'number') {
+                    throw new Error(`Style binding for ${binding.n} is missing exprId`);
+                }
+                const fn = this.__getCompiledExprFn(binding.e);
+                const value = fn(this, scope.locals);
+                el.style.setProperty(binding.n, String(value));
+            }
+            catch (e) {
+                console.error('Style binding error:', e);
+            }
+        };
+        this.__subscribeToExpressionInScope(binding.d, scope, update, subscriptions);
+        update();
+    }
+}

package/runtime/FluffElement.d.ts

@@ -1,39 +1,5 @@
-import type { Subscription } from '../interfaces/Subscription.js';
-import type { Property } from '../utils/Property.js';
-import type { Publisher } from '../utils/Publisher.js';
-export declare abstract class FluffElement extends HTMLElement {
-    protected __pipes: Record<string, (value: unknown, ...args: unknown[]) => unknown>;
-    private _subscriptions;
-    protected readonly _shadowRoot: ShadowRoot;
-    private _initialized;
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected abstract __render(): void;
-    protected abstract __setupBindings(): void;
-    protected __addSubscription(sub: Subscription): void;
-    protected __pipe(name: string, value: unknown, ...args: unknown[]): unknown;
-    $watch: (_properties: string[], callback: () => void) => Subscription;
-    protected __getShadowRoot(): ShadowRoot;
-    protected __getElement(id: string): Element | null;
-    private isHTMLElement;
-    private isPublisher;
-    private isProperty;
-    protected __setText(id: string, text: string): void;
-    protected __bindText(id: string, getter: () => string): void;
-    protected __setProperty(id: string, prop: string, value: unknown): void;
-    protected __addClass(id: string, className: string): void;
-    protected __removeClass(id: string, className: string): void;
-    protected __bindEvent(id: string, event: string, handler: (e: Event) => void): void;
-    protected __bindPropertyChange<T>(prop: Property<T>, callback: (val: T) => void): void;
-    protected __connectProperties<T>(source: Property<T>, target: Property<T>): void;
-    protected __connectOutput<T>(source: Publisher<T>, handler: (val: T) => void): void;
-    protected __bindOutput(id: string, outputName: string, handler: (val: Event) => void): void;
-    protected __setChildProperty(el: Element, propName: string, value: unknown): void;
-    protected __bindToChild(id: string, propName: string, value: unknown): void;
-    protected __setChildPropertyDeferred(el: Element, propName: string, value: unknown): void;
-    protected __bindOutputOnElement(el: Element, outputName: string, handler: (val: Event) => void): void;
-    protected __wireEvents(container: Element, attrPrefix: string): void;
-    private __buildRefLookups;
-    private __getReactiveProp;
-}
+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';

package/runtime/FluffElement.js

@@ -1,272 +1,3 @@
-export class FluffElement extends HTMLElement {
-    __pipes = {};
-    _subscriptions = [];
-    _shadowRoot;
-    _initialized = false;
-    constructor() {
-        super();
-        this._shadowRoot = this.attachShadow({ mode: 'open' });
-    }
-    connectedCallback() {
-        if (!this._initialized) {
-            this.__render();
-            this.__setupBindings();
-            this._initialized = true;
-            if ('onInit' in this && typeof this.onInit === 'function') {
-                this.onInit();
-            }
-        }
-    }
-    disconnectedCallback() {
-        if ('onDestroy' in this && typeof this.onDestroy === 'function') {
-            this.onDestroy();
-        }
-        for (const sub of this._subscriptions) {
-            sub.unsubscribe();
-        }
-        this._subscriptions = [];
-    }
-    __addSubscription(sub) {
-        this._subscriptions.push(sub);
-    }
-    __pipe(name, value, ...args) {
-        const pipe = this.__pipes[name];
-        if (!pipe) {
-            console.warn(`Pipe "${name}" not found`);
-            return value;
-        }
-        return pipe(value, ...args);
-    }
-    $watch = (_properties, callback) => {
-        callback();
-        return {
-            unsubscribe: () => {
-            }
-        };
-    };
-    __getShadowRoot() {
-        return this._shadowRoot;
-    }
-    __getElement(id) {
-        return this._shadowRoot.querySelector(`[data-lid="${id}"]`);
-    }
-    isHTMLElement(el) {
-        return el !== null;
-    }
-    isPublisher(value) {
-        return typeof value === 'object' && value !== null && 'subscribe' in value && typeof value.subscribe === 'function';
-    }
-    isProperty(value) {
-        return typeof value === 'object' && value !== null && 'onChange' in value && 'setValue' in value;
-    }
-    __setText(id, text) {
-        const el = this.__getElement(id);
-        if (el)
-            el.textContent = text;
-    }
-    __bindText(id, getter) {
-        const el = this.__getElement(id);
-        if (!el)
-            return;
-        const expr = el.getAttribute('data-text-bind') ?? '';
-        const propMatch = /this\.([a-zA-Z_][a-zA-Z0-9_]*)/.exec(expr);
-        const update = () => {
-            try {
-                el.textContent = getter();
-            }
-            catch {
-                el.textContent = '';
-            }
-        };
-        if (propMatch) {
-            const [, propName] = propMatch;
-            const reactiveProp = this.__getReactiveProp(propName);
-            if (reactiveProp) {
-                this.__bindPropertyChange(reactiveProp, update);
-            }
-        }
-        update();
-    }
-    __setProperty(id, prop, value) {
-        const el = this.__getElement(id);
-        if (this.isHTMLElement(el)) {
-            if (prop in el) {
-                Reflect.set(el, prop, value);
-            }
-            else {
-                el.setAttribute(prop, String(value));
-            }
-        }
-    }
-    __addClass(id, className) {
-        const el = this.__getElement(id);
-        if (this.isHTMLElement(el))
-            el.classList.add(className);
-    }
-    __removeClass(id, className) {
-        const el = this.__getElement(id);
-        if (this.isHTMLElement(el))
-            el.classList.remove(className);
-    }
-    __bindEvent(id, event, handler) {
-        const el = this.__getElement(id);
-        if (el) {
-            el.addEventListener(event, handler);
-        }
-    }
-    __bindPropertyChange(prop, callback) {
-        const sub = prop.onChange.subscribe(callback);
-        this._subscriptions.push(sub);
-        const currentVal = prop.getValue();
-        if (currentVal !== null) {
-            callback(currentVal);
-        }
-    }
-    __connectProperties(source, target) {
-        const sub = source.onChange.subscribe((val) => {
-            target.setValue(val, true);
-        });
-        this._subscriptions.push(sub);
-        const currentVal = source.getValue();
-        if (currentVal !== null) {
-            target.setValue(currentVal, true);
-        }
-    }
-    __connectOutput(source, handler) {
-        const sub = source.subscribe(handler);
-        this._subscriptions.push(sub);
-    }
-    __bindOutput(id, outputName, handler) {
-        const el = this.__getElement(id);
-        if (el)
-            this.__bindOutputOnElement(el, outputName, handler);
-    }
-    __setChildProperty(el, propName, value) {
-        const prop = Reflect.get(el, propName);
-        if (this.isProperty(prop)) {
-            prop.setValue(value, true);
-        }
-        else if (propName in el) {
-            Reflect.set(el, propName, value);
-        }
-        else {
-            el.setAttribute(propName, String(value));
-        }
-    }
-    __bindToChild(id, propName, value) {
-        const el = this.__getElement(id);
-        if (!el)
-            return;
-        this.__setChildPropertyDeferred(el, propName, value);
-    }
-    __setChildPropertyDeferred(el, propName, value) {
-        if (Reflect.get(el, propName) !== undefined) {
-            this.__setChildProperty(el, propName, value);
-            return;
-        }
-        const tagName = el.tagName.toLowerCase();
-        if (tagName.includes('-')) {
-            customElements.whenDefined(tagName)
-                .then(() => {
-                this.__setChildProperty(el, propName, value);
-            })
-                .catch((e) => {
-                console.error(e);
-            });
-        }
-        else {
-            this.__setChildProperty(el, propName, value);
-        }
-    }
-    __bindOutputOnElement(el, outputName, handler) {
-        const maybeOutput = Reflect.get(el, outputName);
-        if (this.isPublisher(maybeOutput)) {
-            this.__connectOutput(maybeOutput, handler);
-            return;
-        }
-        const tagName = el.tagName.toLowerCase();
-        if (tagName.includes('-')) {
-            customElements.whenDefined(tagName)
-                .then(() => {
-                const innerOutput = Reflect.get(el, outputName);
-                if (this.isPublisher(innerOutput)) {
-                    this.__connectOutput(innerOutput, handler);
-                }
-                else {
-                    el.addEventListener(outputName, handler);
-                }
-            })
-                .catch((e) => {
-                console.error(e);
-            });
-        }
-        else {
-            el.addEventListener(outputName, handler);
-        }
-    }
-    __wireEvents(container, attrPrefix) {
-        for (const el of Array.from(container.querySelectorAll(`[${attrPrefix}]`))) {
-            const attr = el.getAttribute(attrPrefix);
-            if (!attr)
-                continue;
-            const eventParts = attrPrefix.split('-event-');
-            const [, eventPart] = eventParts;
-            if (!eventPart)
-                continue;
-            const [baseEvent, ...modifiers] = eventPart.split('-');
-            let handler = attr;
-            if (attr.startsWith('[')) {
-                try {
-                    const parsed = JSON.parse(attr);
-                    if (Array.isArray(parsed) && typeof parsed[1] === 'string') {
-                        [, handler] = parsed;
-                    }
-                }
-                catch {
-                }
-            }
-            el.addEventListener(baseEvent, (ev) => {
-                if (modifiers.length > 0 && ev instanceof KeyboardEvent) {
-                    const keyEv = ev;
-                    for (const mod of modifiers) {
-                        if (mod === 'enter' && keyEv.key !== 'Enter')
-                            return;
-                        if (mod === 'escape' && keyEv.key !== 'Escape')
-                            return;
-                        if (mod === 'space' && keyEv.key !== ' ')
-                            return;
-                    }
-                }
-                const refLookups = this.__buildRefLookups(handler);
-                // Dynamic event handlers are generated by the compiler from template attributes.
-                // The Function constructor is required to execute these at runtime.
-                // eslint-disable-next-line @typescript-eslint/no-implied-eval, @typescript-eslint/no-unsafe-type-assertion
-                const fn = Function('$event', refLookups + 'return this.' + handler)
-                    .bind(this);
-                fn(ev);
-            });
-        }
-    }
-    __buildRefLookups(expr) {
-        const shadow = this._shadowRoot;
-        const refEls = shadow.querySelectorAll('[data-ref]');
-        let code = '';
-        for (const el of Array.from(refEls)) {
-            const refName = el.getAttribute('data-ref');
-            if (refName && new RegExp(`\\b${refName}\\b`).test(expr)) {
-                code += `const ${refName} = this._shadowRoot.querySelector('[data-ref="${refName}"]');`;
-            }
-        }
-        return code;
-    }
-    __getReactiveProp(propName) {
-        const key = `__${propName}`;
-        if (key in this) {
-            const candidate = Reflect.get(this, key);
-            if (this.isProperty(candidate)) {
-                return candidate;
-            }
-        }
-        return undefined;
-    }
-}
+export { FluffBase } from './FluffBase.js';
+export { FluffElement } from './FluffElementImpl.js';
+export { getScope, registerScope, unregisterScope } from './ScopeRegistry.js';

package/runtime/FluffElementImpl.d.ts

@@ -0,0 +1,49 @@
+import type { Subscription } from '../interfaces/Subscription.js';
+import { Property } from '../utils/Property.js';
+import { Publisher } from '../utils/Publisher.js';
+import { FluffBase } from './FluffBase.js';
+import type { MarkerManagerInterface } from './MarkerManagerInterface.js';
+import { type Scope } from './ScopeRegistry.js';
+export declare abstract class FluffElement extends FluffBase {
+    protected __pipes: Record<string, (value: unknown, ...args: unknown[]) => unknown>;
+    protected readonly _shadowRoot: ShadowRoot;
+    private _subscriptions;
+    private _initialized;
+    private _markerManager;
+    private _markerConfigJson;
+    private _MarkerManagerClass;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    $watch: (_properties: string[], callback: () => void) => Subscription;
+    __processBindingsOnElementPublic(el: HTMLElement, scope: Scope, subscriptions?: Subscription[]): void;
+    protected abstract __render(): void;
+    protected __setupBindings(): void;
+    protected __addSubscription(sub: Subscription): void;
+    protected __pipe(name: string, value: unknown, ...args: unknown[]): unknown;
+    protected __getShadowRoot(): ShadowRoot;
+    protected __setMarkerConfigs(configJson: string): void;
+    protected __initializeMarkers(MarkerManagerClass: new (host: FluffElement, shadowRoot: ShadowRoot) => MarkerManagerInterface): void;
+    private __initializeMarkersInternal;
+    protected __getElement(id: string): Element | null;
+    protected __setText(id: string, text: string): void;
+    protected __bindText(id: string, getter: () => string): void;
+    protected __setProperty(id: string, prop: string, value: unknown): void;
+    protected __addClass(id: string, className: string): void;
+    protected __removeClass(id: string, className: string): void;
+    protected __bindEvent(id: string, event: string, handler: (e: Event) => void): void;
+    protected __bindPropertyChange<T>(prop: Property<T>, callback: (val: T) => void): void;
+    protected __connectProperties<T>(source: Property<T>, target: Property<T>): void;
+    protected __connectOutput<T>(source: Publisher<T>, handler: (val: T) => void): void;
+    protected __bindOutput(id: string, outputName: string, handler: (val: Event) => void): void;
+    protected __setChildProperty(el: Element, propName: string, value: unknown): void;
+    protected __bindToChild(id: string, propName: string, value: unknown): void;
+    protected __setChildPropertyDeferred(el: Element, propName: string, value: unknown): void;
+    protected __bindOutputOnElement(el: Element, outputName: string, handler: (val: Event) => void): void;
+    protected __getReactivePropFromScope(propName: string, scope: Scope): Property<unknown> | undefined;
+    protected __processBindings(): void;
+    private __applyPendingProps;
+    private isHTMLElement;
+    private isRecord;
+    private __getReactiveProp;
+}