@fluffjs/fluff 0.0.7 → 0.1.0

package/runtime/FluffElementImpl.js

@@ -0,0 +1,315 @@
+import { DomUtils } from '../utils/DomUtils.js';
+import { Property } from '../utils/Property.js';
+import { Publisher } from '../utils/Publisher.js';
+import { FluffBase } from './FluffBase.js';
+import { getScope } from './ScopeRegistry.js';
+export class FluffElement extends FluffBase {
+    __pipes = {};
+    _shadowRoot;
+    _subscriptions = [];
+    _initialized = false;
+    _markerManager = null;
+    _markerConfigJson = null;
+    _MarkerManagerClass = null;
+    constructor() {
+        super();
+        this._shadowRoot = this.attachShadow({ mode: 'open' });
+    }
+    connectedCallback() {
+        if (!this._initialized) {
+            const scopeId = this.getAttribute('data-fluff-scope-id');
+            if (scopeId && !this.__parentScope) {
+                this.__parentScope = getScope(scopeId);
+                if (this.__parentScope) {
+                    this.__loopContext = this.__parentScope.locals;
+                }
+            }
+            const contextAttr = this.getAttribute('data-fluff-loop-context');
+            if (contextAttr && Object.keys(this.__loopContext).length === 0) {
+                try {
+                    this.__loopContext = JSON.parse(contextAttr);
+                }
+                catch {
+                }
+            }
+            this.__applyPendingProps();
+            this.__render();
+            this.__setupBindings();
+            if (this.getAttribute('data-fluff-scope-id')) {
+                this.__processBindings();
+            }
+            this._initialized = true;
+            if ('onInit' in this && typeof this.onInit === 'function') {
+                this.onInit();
+            }
+        }
+    }
+    disconnectedCallback() {
+        if ('onDestroy' in this && typeof this.onDestroy === 'function') {
+            this.onDestroy();
+        }
+        if (this._markerManager) {
+            this._markerManager.cleanup();
+            this._markerManager = null;
+        }
+        for (const sub of this._subscriptions) {
+            sub.unsubscribe();
+        }
+        this._subscriptions = [];
+        for (const sub of this.__baseSubscriptions) {
+            sub.unsubscribe();
+        }
+        this.__baseSubscriptions = [];
+    }
+    $watch = (_properties, callback) => {
+        callback();
+        return {
+            unsubscribe: () => {
+            }
+        };
+    };
+    __processBindingsOnElementPublic(el, scope, subscriptions) {
+        this.__processBindingsOnElement(el, scope, subscriptions);
+    }
+    __setupBindings() {
+        this.__processBindings();
+        this.__initializeMarkersInternal();
+    }
+    __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);
+    }
+    __getShadowRoot() {
+        return this._shadowRoot;
+    }
+    __setMarkerConfigs(configJson) {
+        this._markerConfigJson = configJson;
+    }
+    __initializeMarkers(MarkerManagerClass) {
+        this._MarkerManagerClass = MarkerManagerClass;
+    }
+    __initializeMarkersInternal() {
+        if (!this._markerConfigJson || !this._MarkerManagerClass)
+            return;
+        this._markerManager = new this._MarkerManagerClass(this, this._shadowRoot);
+        this._markerManager.initializeFromConfig(this._markerConfigJson);
+    }
+    __getElement(id) {
+        return this._shadowRoot.querySelector(`[data-lid="${id}"]`);
+    }
+    __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) {
+        if (el instanceof HTMLElement && el.hasAttribute('x-fluff-component')) {
+            const tagName = el.tagName.toLowerCase();
+            if (customElements.get(tagName) === undefined) {
+                this.__whenDefined(tagName, () => {
+                    this.__setChildProperty(el, propName, value);
+                });
+                return;
+            }
+        }
+        const prop = Reflect.get(el, propName);
+        if (prop instanceof Property) {
+            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;
+        }
+        if (DomUtils.isCustomElement(el)) {
+            this.__whenDefined(el.tagName.toLowerCase(), () => {
+                this.__setChildProperty(el, propName, value);
+            });
+        }
+        else {
+            this.__setChildProperty(el, propName, value);
+        }
+    }
+    __bindOutputOnElement(el, outputName, handler) {
+        const maybeOutput = Reflect.get(el, outputName);
+        if (maybeOutput instanceof Publisher) {
+            this.__connectOutput(maybeOutput, handler);
+            return;
+        }
+        if (DomUtils.isCustomElement(el)) {
+            this.__whenDefined(el.tagName.toLowerCase(), () => {
+                const innerOutput = Reflect.get(el, outputName);
+                if (innerOutput instanceof Publisher) {
+                    this.__connectOutput(innerOutput, handler);
+                }
+                else {
+                    el.addEventListener(outputName, handler);
+                }
+            });
+        }
+        else {
+            el.addEventListener(outputName, handler);
+        }
+    }
+    __getReactivePropFromScope(propName, scope) {
+        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;
+    }
+    __processBindings() {
+        const elements = this._shadowRoot.querySelectorAll('[data-lid]');
+        const scope = this.__getScope();
+        for (const el of Array.from(elements)) {
+            const closestComponent = el.closest('[x-fluff-component]');
+            if (closestComponent && closestComponent !== el)
+                continue;
+            if (el instanceof HTMLElement) {
+                const tagName = el.tagName.toLowerCase();
+                if (customElements.get(tagName))
+                    continue;
+                this.__processBindingsOnElement(el, scope);
+            }
+        }
+    }
+    __applyPendingProps() {
+        const existing = Reflect.get(this, '__pendingProps');
+        if (!this.isRecord(existing)) {
+            return;
+        }
+        for (const [propName, value] of Object.entries(existing)) {
+            console.log('apply-pending-prop', { propName, value, el: this.tagName });
+            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');
+    }
+    isHTMLElement(el) {
+        return el !== null;
+    }
+    isRecord(value) {
+        return value !== null && typeof value === 'object' && !Array.isArray(value);
+    }
+    __getReactiveProp(propName) {
+        const key = `__${propName}`;
+        if (key in this) {
+            const candidate = Reflect.get(this, key);
+            if (candidate instanceof Property) {
+                return candidate;
+            }
+        }
+        return undefined;
+    }
+}

package/runtime/FluffMarkers.d.ts

@@ -0,0 +1,8 @@
+export { MarkerManager } from './MarkerManager.js';
+export { MarkerConfigGuards } from './MarkerConfigGuards.js';
+export { MarkerController } from './MarkerController.js';
+export { IfController } from './IfController.js';
+export { ForController } from './ForController.js';
+export { SwitchController } from './SwitchController.js';
+export { TextController } from './TextController.js';
+export { BreakController } from './BreakController.js';

package/runtime/FluffMarkers.js

@@ -0,0 +1,8 @@
+export { MarkerManager } from './MarkerManager.js';
+export { MarkerConfigGuards } from './MarkerConfigGuards.js';
+export { MarkerController } from './MarkerController.js';
+export { IfController } from './IfController.js';
+export { ForController } from './ForController.js';
+export { SwitchController } from './SwitchController.js';
+export { TextController } from './TextController.js';
+export { BreakController } from './BreakController.js';

package/runtime/ForController.d.ts

@@ -0,0 +1,10 @@
+import type { ForMarkerConfig } from '../interfaces/ForMarkerConfig.js';
+import { MarkerController } from './MarkerController.js';
+export declare class ForController extends MarkerController {
+    private readonly config;
+    private itemTemplate;
+    private emptyTemplate;
+    private readonly bindingsSubscriptions;
+    constructor(id: number, startMarker: Comment, endMarker: Comment | null, host: HTMLElement, shadowRoot: ShadowRoot, config: ForMarkerConfig);
+    initialize(): void;
+}

package/runtime/ForController.js

@@ -0,0 +1,43 @@
+import { MarkerController } from './MarkerController.js';
+export class ForController extends MarkerController {
+    config;
+    itemTemplate = null;
+    emptyTemplate = null;
+    bindingsSubscriptions = [];
+    constructor(id, startMarker, endMarker, host, shadowRoot, config) {
+        super(id, startMarker, endMarker, host, shadowRoot);
+        this.config = config;
+    }
+    initialize() {
+        const hostTag = this.host.tagName.toLowerCase();
+        const templateId = `${hostTag}-${this.id}`;
+        this.itemTemplate = this.shadowRoot.querySelector(`template[data-fluff-tpl="${templateId}"]`);
+        this.emptyTemplate = this.shadowRoot.querySelector(`template[data-fluff-empty="${templateId}"]`);
+        const deps = this.config.deps ?? [];
+        const update = () => {
+            this.clearContentBetweenMarkersWithCleanup(this.bindingsSubscriptions);
+            const items = this.evaluateExpr(this.config.iterableExprId);
+            if (!Array.isArray(items) || items.length === 0) {
+                if (this.emptyTemplate) {
+                    this.cloneAndInsertTemplate(this.emptyTemplate, this.loopContext, undefined, this.bindingsSubscriptions);
+                }
+                return;
+            }
+            if (!this.itemTemplate)
+                return;
+            const renderContext = {
+                shouldBreak: false
+            };
+            for (let i = 0; i < items.length; i++) {
+                if (renderContext.shouldBreak)
+                    break;
+                const itemContext = {
+                    ...this.loopContext, [this.config.iterator]: items[i], $index: i
+                };
+                this.cloneAndInsertTemplate(this.itemTemplate, itemContext, renderContext, this.bindingsSubscriptions);
+            }
+        };
+        this.subscribeTo(deps, update);
+        update();
+    }
+}

package/runtime/IfController.d.ts

@@ -0,0 +1,10 @@
+import type { IfMarkerConfig } from '../interfaces/IfMarkerConfig.js';
+import { MarkerController } from './MarkerController.js';
+export declare class IfController extends MarkerController {
+    private readonly config;
+    private templates;
+    private currentBranchIndex;
+    private readonly bindingsSubscriptions;
+    constructor(id: number, startMarker: Comment, endMarker: Comment | null, host: HTMLElement, shadowRoot: ShadowRoot, config: IfMarkerConfig);
+    initialize(): void;
+}

package/runtime/IfController.js

@@ -0,0 +1,46 @@
+import { MarkerController } from './MarkerController.js';
+export class IfController extends MarkerController {
+    config;
+    templates = [];
+    currentBranchIndex = -1;
+    bindingsSubscriptions = [];
+    constructor(id, startMarker, endMarker, host, shadowRoot, config) {
+        super(id, startMarker, endMarker, host, shadowRoot);
+        this.config = config;
+    }
+    initialize() {
+        const hostTag = this.host.tagName.toLowerCase();
+        const templateIdPrefix = `${hostTag}-${this.id}-`;
+        this.templates = Array.from(this.shadowRoot.querySelectorAll(`template[data-fluff-branch^="${templateIdPrefix}"]`));
+        const allDeps = [];
+        for (const branch of this.config.branches) {
+            if (branch.deps) {
+                allDeps.push(...branch.deps);
+            }
+        }
+        const update = () => {
+            let matchedIndex = -1;
+            for (let i = 0; i < this.config.branches.length; i++) {
+                const branch = this.config.branches[i];
+                if (branch.exprId === undefined) {
+                    matchedIndex = i;
+                    break;
+                }
+                const result = this.evaluateExpr(branch.exprId);
+                if (result) {
+                    matchedIndex = i;
+                    break;
+                }
+            }
+            if (matchedIndex !== this.currentBranchIndex) {
+                this.clearContentBetweenMarkersWithCleanup(this.bindingsSubscriptions);
+                this.currentBranchIndex = matchedIndex;
+                if (matchedIndex >= 0 && matchedIndex < this.templates.length) {
+                    this.cloneAndInsertTemplate(this.templates[matchedIndex], this.loopContext, undefined, this.bindingsSubscriptions);
+                }
+            }
+        };
+        this.subscribeTo(allDeps, update);
+        update();
+    }
+}

package/runtime/MarkerConfigGuards.d.ts

@@ -0,0 +1,15 @@
+import type { BreakMarkerConfig } from '../interfaces/BreakMarkerConfig.js';
+import type { FluffHostElement } from '../interfaces/FluffHostElement.js';
+import type { ForMarkerConfig } from '../interfaces/ForMarkerConfig.js';
+import type { IfMarkerConfig } from '../interfaces/IfMarkerConfig.js';
+import type { MarkerConfig } from '../interfaces/MarkerConfig.js';
+import type { SwitchMarkerConfig } from '../interfaces/SwitchMarkerConfig.js';
+import type { TextMarkerConfig } from '../interfaces/TextMarkerConfig.js';
+export declare class MarkerConfigGuards {
+    static isFluffHostElement(el: Element): el is FluffHostElement;
+    static isIfConfig(config: MarkerConfig): config is IfMarkerConfig;
+    static isForConfig(config: MarkerConfig): config is ForMarkerConfig;
+    static isSwitchConfig(config: MarkerConfig): config is SwitchMarkerConfig;
+    static isTextConfig(config: MarkerConfig): config is TextMarkerConfig;
+    static isBreakConfig(config: MarkerConfig): config is BreakMarkerConfig;
+}

package/runtime/MarkerConfigGuards.js

@@ -0,0 +1,20 @@
+export class MarkerConfigGuards {
+    static isFluffHostElement(el) {
+        return '__getReactiveProp' in el;
+    }
+    static isIfConfig(config) {
+        return config.type === 'if';
+    }
+    static isForConfig(config) {
+        return config.type === 'for';
+    }
+    static isSwitchConfig(config) {
+        return config.type === 'switch';
+    }
+    static isTextConfig(config) {
+        return config.type === 'text';
+    }
+    static isBreakConfig(config) {
+        return config.type === 'break';
+    }
+}

package/runtime/MarkerController.d.ts

@@ -0,0 +1,46 @@
+import type { FluffHostElement } from '../interfaces/FluffHostElement.js';
+import type { PropertyChain } from '../interfaces/PropertyChain.js';
+import type { RenderContext } from '../interfaces/RenderContext.js';
+import type { Subscription } from '../interfaces/Subscription.js';
+import { Property } from '../utils/Property.js';
+import { type Scope } from './ScopeRegistry.js';
+interface MarkerManagerLike {
+    getController: (id: number, startMarker: Comment) => MarkerController | undefined;
+    ensureController?: (id: number, type: string, startMarker: Comment, endMarker: Comment | null) => MarkerController | undefined;
+    cleanupController?: (id: number, startMarker?: Comment) => void;
+}
+export declare abstract class MarkerController {
+    protected readonly id: number;
+    protected readonly startMarker: Comment;
+    protected readonly endMarker: Comment | null;
+    protected readonly subscriptions: Subscription[];
+    protected readonly host: FluffHostElement;
+    protected readonly shadowRoot: ShadowRoot;
+    protected parentScope: Scope | undefined;
+    protected loopContext: Record<string, unknown>;
+    protected markerManager: MarkerManagerLike | undefined;
+    protected constructor(id: number, startMarker: Comment, endMarker: Comment | null, host: FluffHostElement, shadowRoot: ShadowRoot);
+    setParentScope(scope: Scope | undefined): void;
+    setLoopContext(context: Record<string, unknown>): void;
+    setMarkerManager(markerManager: MarkerManagerLike): void;
+    abstract initialize(): void;
+    cleanup(): void;
+    updateRenderContext(renderContext?: RenderContext): void;
+    protected evaluateExpr(exprId: number): unknown;
+    private getCompiledExprFn;
+    protected getScope(): Scope;
+    protected collectLocalsFromScope(scope: Scope): Record<string, unknown>;
+    protected subscribeTo(deps: PropertyChain[], callback: () => void): void;
+    protected getReactivePropFromScope(propName: string, scope: Scope): Property<unknown> | undefined;
+    protected createChildScope(locals: Record<string, unknown>): Scope;
+    protected clearContentBetweenMarkersWithCleanup(bindingsSubscriptions: Subscription[]): void;
+    protected insertBeforeEndMarker(node: Node): void;
+    protected processBindingsOnElement(el: HTMLElement, scope: Scope): void;
+    protected processBindingsOnElementWithSubscriptions(el: HTMLElement, scope: Scope, subscriptions: Subscription[]): void;
+    private __getFluffElementHost;
+    protected setScopeOnChildren(node: Node, scope: Scope, renderContext?: RenderContext, markerManager?: MarkerManagerLike, bindingsSubscriptions?: Subscription[]): void;
+    protected insertAndScopeTemplateContent(content: Node, nodes: Node[], scope: Scope, renderContext: RenderContext | undefined, markerManager: MarkerManagerLike | undefined, bindingsSubscriptions: Subscription[]): void;
+    protected cloneAndInsertTemplate(template: HTMLTemplateElement, context: Record<string, unknown>, renderContext: RenderContext | undefined, bindingsSubscriptions: Subscription[]): void;
+    protected processBindingsOnNode(node: HTMLElement, scope: Scope, bindingsSubscriptions?: Subscription[]): void;
+}
+export {};