@fluffjs/fluff 0.0.7 → 0.1.0

package/runtime/MarkerController.js

@@ -0,0 +1,235 @@
+import { DomUtils } from '../utils/DomUtils.js';
+import { Property } from '../utils/Property.js';
+import { FluffBase } from './FluffBase.js';
+import { FluffElement } from './FluffElement.js';
+import { MarkerConfigGuards } from './MarkerConfigGuards.js';
+import { registerScope } from './ScopeRegistry.js';
+export class MarkerController {
+    id;
+    startMarker;
+    endMarker;
+    subscriptions = [];
+    host;
+    shadowRoot;
+    parentScope;
+    loopContext = {};
+    markerManager;
+    constructor(id, startMarker, endMarker, host, shadowRoot) {
+        this.id = id;
+        this.startMarker = startMarker;
+        this.endMarker = endMarker;
+        this.host = host;
+        this.shadowRoot = shadowRoot;
+    }
+    setParentScope(scope) {
+        this.parentScope = scope;
+    }
+    setLoopContext(context) {
+        this.loopContext = context;
+    }
+    setMarkerManager(markerManager) {
+        this.markerManager = markerManager;
+    }
+    cleanup() {
+        for (const sub of this.subscriptions) {
+            sub.unsubscribe();
+        }
+        this.subscriptions.length = 0;
+    }
+    updateRenderContext(renderContext) {
+        if (renderContext) {
+            return;
+        }
+    }
+    evaluateExpr(exprId) {
+        const scope = this.getScope();
+        const allLocals = this.collectLocalsFromScope(scope);
+        const fn = this.getCompiledExprFn(exprId);
+        try {
+            return fn(scope.host, allLocals);
+        }
+        catch (e) {
+            return undefined;
+        }
+    }
+    getCompiledExprFn(exprId) {
+        const fn = FluffBase.__e[exprId];
+        if (typeof fn !== 'function') {
+            throw new Error(`Missing compiled expression function for exprId ${exprId}`);
+        }
+        return fn;
+    }
+    getScope() {
+        if (this.parentScope) {
+            return this.parentScope;
+        }
+        const fluffHost = this.__getFluffElementHost();
+        if (fluffHost) {
+            return fluffHost.__getScope();
+        }
+        return {
+            host: this.host, locals: this.loopContext, parent: undefined
+        };
+    }
+    collectLocalsFromScope(scope) {
+        const result = {};
+        if (scope.parent) {
+            Object.assign(result, this.collectLocalsFromScope(scope.parent));
+        }
+        Object.assign(result, scope.locals);
+        return result;
+    }
+    subscribeTo(deps, callback) {
+        const scope = this.getScope();
+        for (const dep of deps) {
+            const propName = Array.isArray(dep) ? dep[0] : dep;
+            if (propName.startsWith('['))
+                continue;
+            const reactiveProp = this.getReactivePropFromScope(propName, scope);
+            if (reactiveProp) {
+                const sub = reactiveProp.onChange.subscribe(callback);
+                this.subscriptions.push(sub);
+            }
+        }
+    }
+    getReactivePropFromScope(propName, scope) {
+        if (propName in scope.locals) {
+            return undefined;
+        }
+        if (scope.parent) {
+            return this.getReactivePropFromScope(propName, scope.parent);
+        }
+        if (MarkerConfigGuards.isFluffHostElement(scope.host) && scope.host.__getReactiveProp) {
+            const reactiveProp = scope.host.__getReactiveProp(propName);
+            if (reactiveProp instanceof Property) {
+                return reactiveProp;
+            }
+        }
+        return undefined;
+    }
+    createChildScope(locals) {
+        return {
+            host: this.host, locals, parent: this.parentScope
+        };
+    }
+    clearContentBetweenMarkersWithCleanup(bindingsSubscriptions) {
+        for (const sub of bindingsSubscriptions) {
+            sub.unsubscribe();
+        }
+        bindingsSubscriptions.length = 0;
+        if (!this.endMarker)
+            return;
+        const parent = this.startMarker.parentNode;
+        if (!parent)
+            return;
+        let current = this.startMarker.nextSibling;
+        while (current && current !== this.endMarker) {
+            const next = current.nextSibling;
+            if (current instanceof Comment) {
+                const markerMatch = /^fluff:(if|for|switch|text|break):(\d+)$/.exec(current.data);
+                if (markerMatch && this.markerManager?.cleanupController) {
+                    const markerId = parseInt(markerMatch[2], 10);
+                    this.markerManager.cleanupController(markerId, current);
+                }
+            }
+            if (!(current instanceof HTMLTemplateElement)) {
+                parent.removeChild(current);
+            }
+            current = next;
+        }
+    }
+    insertBeforeEndMarker(node) {
+        if (!this.endMarker)
+            return;
+        const parent = this.endMarker.parentNode;
+        if (!parent)
+            return;
+        parent.insertBefore(node, this.endMarker);
+    }
+    processBindingsOnElement(el, scope) {
+        const fluffHost = this.__getFluffElementHost();
+        if (!fluffHost)
+            return;
+        fluffHost.__processBindingsOnElementPublic(el, scope);
+    }
+    processBindingsOnElementWithSubscriptions(el, scope, subscriptions) {
+        const fluffHost = this.__getFluffElementHost();
+        if (!fluffHost)
+            return;
+        fluffHost.__processBindingsOnElementPublic(el, scope, subscriptions);
+    }
+    __getFluffElementHost() {
+        return this.host instanceof FluffElement ? this.host : null;
+    }
+    setScopeOnChildren(node, scope, renderContext, markerManager, bindingsSubscriptions) {
+        if (node instanceof Comment) {
+            const markerMatch = /^fluff:(if|for|switch|text|break):(\d+)$/.exec(node.data);
+            if (markerMatch && markerManager) {
+                const [, markerType, markerIdStr] = markerMatch;
+                const markerId = parseInt(markerIdStr, 10);
+                const endPattern = `/fluff:${markerType}:${markerId}`;
+                let controller = markerManager.getController(markerId, node);
+                const shouldInitialize = controller === undefined;
+                if (!controller && markerManager.ensureController) {
+                    let endMarker = null;
+                    let current = node.nextSibling;
+                    while (current) {
+                        if (current instanceof Comment && current.data === endPattern) {
+                            endMarker = current;
+                            break;
+                        }
+                        current = current.nextSibling;
+                    }
+                    controller = markerManager.ensureController(markerId, markerType, node, endMarker);
+                }
+                if (controller) {
+                    controller.setParentScope(scope);
+                    controller.setLoopContext(scope.locals);
+                    controller.updateRenderContext(renderContext);
+                    if (shouldInitialize) {
+                        controller.initialize();
+                    }
+                }
+            }
+        }
+        else if (node instanceof FluffElement) {
+            node.__loopContext = scope.locals;
+            node.__parentScope = scope;
+            this.processBindingsOnNode(node, scope, bindingsSubscriptions);
+        }
+        else if (node instanceof HTMLElement && DomUtils.isCustomElement(node)) {
+            const scopeId = registerScope(scope);
+            node.setAttribute('data-fluff-scope-id', scopeId);
+            this.processBindingsOnNode(node, scope, bindingsSubscriptions);
+        }
+        else if (node instanceof HTMLElement && node.hasAttribute('data-lid')) {
+            this.processBindingsOnNode(node, scope, bindingsSubscriptions);
+        }
+        for (const child of Array.from(node.childNodes)) {
+            this.setScopeOnChildren(child, scope, renderContext, markerManager, bindingsSubscriptions);
+        }
+    }
+    insertAndScopeTemplateContent(content, nodes, scope, renderContext, markerManager, bindingsSubscriptions) {
+        this.insertBeforeEndMarker(content);
+        for (const node of nodes) {
+            this.setScopeOnChildren(node, scope, renderContext, markerManager, bindingsSubscriptions);
+        }
+    }
+    cloneAndInsertTemplate(template, context, renderContext, bindingsSubscriptions) {
+        const content = template.content.cloneNode(true);
+        if (!(content instanceof DocumentFragment)) {
+            throw new Error('Expected DocumentFragment from template clone');
+        }
+        const nodes = Array.from(content.childNodes);
+        const scope = this.createChildScope(context);
+        this.insertAndScopeTemplateContent(content, nodes, scope, renderContext, this.markerManager, bindingsSubscriptions);
+    }
+    processBindingsOnNode(node, scope, bindingsSubscriptions) {
+        if (bindingsSubscriptions) {
+            this.processBindingsOnElementWithSubscriptions(node, scope, bindingsSubscriptions);
+        }
+        else {
+            this.processBindingsOnElement(node, scope);
+        }
+    }
+}

package/runtime/MarkerManager.d.ts

@@ -0,0 +1,16 @@
+import type { MarkerController } from './MarkerController.js';
+export declare class MarkerManager {
+    private readonly controllers;
+    private readonly configs;
+    private readonly host;
+    private readonly shadowRoot;
+    constructor(host: HTMLElement, shadowRoot: ShadowRoot);
+    initializeFromConfig(configJson: string): void;
+    ensureController(id: number, type: string, startMarker: Comment, endMarker: Comment | null): MarkerController | undefined;
+    getController(id: number, startMarker: Comment): MarkerController | undefined;
+    cleanupController(id: number, startMarker?: Comment): void;
+    cleanup(): void;
+    private registerController;
+    private findMarkers;
+    private createController;
+}

package/runtime/MarkerManager.js

@@ -0,0 +1,136 @@
+import { BreakController } from './BreakController.js';
+import { ForController } from './ForController.js';
+import { IfController } from './IfController.js';
+import { MarkerConfigGuards } from './MarkerConfigGuards.js';
+import { SwitchController } from './SwitchController.js';
+import { TextController } from './TextController.js';
+export class MarkerManager {
+    controllers = new Map();
+    configs = new Map();
+    host;
+    shadowRoot;
+    constructor(host, shadowRoot) {
+        this.host = host;
+        this.shadowRoot = shadowRoot;
+    }
+    initializeFromConfig(configJson) {
+        const entries = JSON.parse(configJson);
+        this.configs.clear();
+        for (const [id, config] of entries) {
+            this.configs.set(id, config);
+        }
+        for (const [id, config] of entries) {
+            const { startMarker, endMarker } = this.findMarkers(id, config.type);
+            if (!startMarker) {
+                continue;
+            }
+            const controller = this.createController(id, startMarker, endMarker, config);
+            if (controller) {
+                controller.setMarkerManager(this);
+                this.registerController(id, startMarker, controller);
+            }
+        }
+        const controllersToInit = [];
+        for (const controllersByMarker of this.controllers.values()) {
+            controllersToInit.push(...controllersByMarker.values());
+        }
+        for (const controller of controllersToInit) {
+            controller.initialize();
+        }
+    }
+    ensureController(id, type, startMarker, endMarker) {
+        const existing = this.getController(id, startMarker);
+        if (existing) {
+            return existing;
+        }
+        const config = this.configs.get(id);
+        if (config?.type !== type) {
+            return undefined;
+        }
+        const controller = this.createController(id, startMarker, endMarker, config);
+        if (!controller) {
+            return undefined;
+        }
+        controller.setMarkerManager(this);
+        this.registerController(id, startMarker, controller);
+        return controller;
+    }
+    getController(id, startMarker) {
+        return this.controllers.get(id)
+            ?.get(startMarker);
+    }
+    cleanupController(id, startMarker) {
+        const controllersForId = this.controllers.get(id);
+        if (!controllersForId)
+            return;
+        if (startMarker) {
+            const controller = controllersForId.get(startMarker);
+            if (!controller)
+                return;
+            controller.cleanup();
+            controllersForId.delete(startMarker);
+            if (controllersForId.size === 0) {
+                this.controllers.delete(id);
+            }
+            return;
+        }
+        for (const controller of controllersForId.values()) {
+            controller.cleanup();
+        }
+        this.controllers.delete(id);
+    }
+    cleanup() {
+        for (const controllersByMarker of this.controllers.values()) {
+            for (const controller of controllersByMarker.values()) {
+                controller.cleanup();
+            }
+        }
+        this.controllers.clear();
+    }
+    registerController(id, startMarker, controller) {
+        let controllersForId = this.controllers.get(id);
+        if (!controllersForId) {
+            controllersForId = new Map();
+            this.controllers.set(id, controllersForId);
+        }
+        controllersForId.set(startMarker, controller);
+    }
+    findMarkers(id, type) {
+        const startPattern = `fluff:${type}:${id}`;
+        const endPattern = `/fluff:${type}:${id}`;
+        let startMarker = null;
+        let endMarker = null;
+        const walker = document.createTreeWalker(this.shadowRoot, NodeFilter.SHOW_COMMENT, null);
+        let node = walker.nextNode();
+        while (node) {
+            if (node instanceof Comment) {
+                if (node.data === startPattern) {
+                    startMarker = node;
+                }
+                else if (node.data === endPattern) {
+                    endMarker = node;
+                }
+            }
+            node = walker.nextNode();
+        }
+        return { startMarker, endMarker };
+    }
+    createController(id, startMarker, endMarker, config) {
+        if (MarkerConfigGuards.isIfConfig(config)) {
+            return new IfController(id, startMarker, endMarker, this.host, this.shadowRoot, config);
+        }
+        if (MarkerConfigGuards.isForConfig(config)) {
+            return new ForController(id, startMarker, endMarker, this.host, this.shadowRoot, config);
+        }
+        if (MarkerConfigGuards.isSwitchConfig(config)) {
+            return new SwitchController(id, startMarker, endMarker, this.host, this.shadowRoot, config);
+        }
+        if (MarkerConfigGuards.isTextConfig(config)) {
+            return new TextController(id, startMarker, endMarker, this.host, this.shadowRoot, config);
+        }
+        if (MarkerConfigGuards.isBreakConfig(config)) {
+            return new BreakController(id, startMarker, endMarker, this.host, this.shadowRoot, config);
+        }
+        return null;
+    }
+}

package/runtime/MarkerManagerInterface.d.ts

@@ -0,0 +1,4 @@
+export interface MarkerManagerInterface {
+    initializeFromConfig: (configJson: string) => void;
+    cleanup: () => void;
+}

package/runtime/MarkerManagerInterface.js

@@ -0,0 +1 @@
+export {};

package/runtime/ScopeRegistry.d.ts

@@ -0,0 +1,9 @@
+import type { FluffHostElement } from '../interfaces/FluffHostElement.js';
+export interface Scope {
+    host: FluffHostElement;
+    locals: Record<string, unknown>;
+    parent?: Scope;
+}
+export declare function registerScope(scope: Scope): string;
+export declare function getScope(id: string): Scope | undefined;
+export declare function unregisterScope(id: string): void;

package/runtime/ScopeRegistry.js

@@ -0,0 +1,13 @@
+const scopeRegistry = new Map();
+let scopeIdCounter = 0;
+export function registerScope(scope) {
+    const id = `scope_${scopeIdCounter++}`;
+    scopeRegistry.set(id, scope);
+    return id;
+}
+export function getScope(id) {
+    return scopeRegistry.get(id);
+}
+export function unregisterScope(id) {
+    scopeRegistry.delete(id);
+}

package/runtime/SwitchController.d.ts

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

package/runtime/SwitchController.js

@@ -0,0 +1,42 @@
+import { MarkerController } from './MarkerController.js';
+export class SwitchController extends MarkerController {
+    config;
+    templates = [];
+    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-case^="${templateIdPrefix}"]`));
+        const deps = this.config.deps ?? [];
+        const update = () => {
+            this.clearContentBetweenMarkersWithCleanup(this.bindingsSubscriptions);
+            const switchValue = this.evaluateExpr(this.config.expressionExprId);
+            let matched = false;
+            let shouldFallthrough = false;
+            const renderContext = {
+                shouldBreak: false
+            };
+            for (let i = 0; i < this.config.cases.length; i++) {
+                if (renderContext.shouldBreak)
+                    break;
+                const caseInfo = this.config.cases[i];
+                const template = this.templates[i];
+                if (!template)
+                    continue;
+                const caseMatches = caseInfo.isDefault
+                    || (caseInfo.valueExprId !== undefined && this.evaluateExpr(caseInfo.valueExprId) === switchValue);
+                if (shouldFallthrough || (!matched && caseMatches)) {
+                    matched = true;
+                    this.cloneAndInsertTemplate(template, this.loopContext, renderContext, this.bindingsSubscriptions);
+                    shouldFallthrough = caseInfo.fallthrough;
+                }
+            }
+        };
+        this.subscribeTo(deps, update);
+        update();
+    }
+}

package/runtime/TextController.d.ts

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

package/runtime/TextController.js

@@ -0,0 +1,53 @@
+import { MarkerController } from './MarkerController.js';
+export class TextController extends MarkerController {
+    config;
+    textNode = null;
+    constructor(id, startMarker, endMarker, host, shadowRoot, config) {
+        super(id, startMarker, endMarker, host, shadowRoot);
+        this.config = config;
+    }
+    initialize() {
+        this.textNode = document.createTextNode('');
+        this.insertBeforeEndMarker(this.textNode);
+        const deps = this.config.deps ?? [];
+        const pipes = this.config.pipes ?? [];
+        const update = () => {
+            let result = this.evaluateExpr(this.config.exprId);
+            for (const pipe of pipes) {
+                result = this.applyPipe(pipe.name, result, pipe.argExprIds);
+            }
+            if (this.textNode) {
+                this.textNode.textContent = this.formatValue(result);
+            }
+        };
+        this.subscribeTo(deps, update);
+        update();
+    }
+    formatValue(result) {
+        if (result === null || result === undefined) {
+            return '';
+        }
+        if (typeof result === 'object') {
+            return JSON.stringify(result);
+        }
+        if (typeof result === 'string') {
+            return result;
+        }
+        if (typeof result === 'number' || typeof result === 'boolean') {
+            return String(result);
+        }
+        return '';
+    }
+    applyPipe(name, value, args) {
+        const pipes = this.host.__pipes;
+        if (!pipes)
+            return value;
+        const pipeFn = pipes[name];
+        if (!pipeFn) {
+            console.warn(`Pipe "${name}" not found`);
+            return value;
+        }
+        const evaluatedArgs = args.map(arg => this.evaluateExpr(arg));
+        return pipeFn(value, ...evaluatedArgs);
+    }
+}

package/runtime/tests/DirectOutputChild.d.ts

@@ -0,0 +1,10 @@
+import { Publisher } from '../../utils/Publisher.js';
+import { FluffElement } from '../FluffElementImpl.js';
+export declare class DirectOutputChild extends FluffElement {
+    readonly submit: Publisher<{
+        value: string;
+    }>;
+    protected __render(): void;
+    protected __setupBindings(): void;
+    emitSubmit(value: string): void;
+}

package/runtime/tests/DirectOutputChild.js

@@ -0,0 +1,14 @@
+import { Publisher } from '../../utils/Publisher.js';
+import { FluffElement } from '../FluffElementImpl.js';
+export class DirectOutputChild extends FluffElement {
+    submit = new Publisher();
+    __render() {
+        this.__getShadowRoot().innerHTML = '<button data-lid="l0">Submit</button>';
+    }
+    __setupBindings() {
+        super.__setupBindings();
+    }
+    emitSubmit(value) {
+        this.submit.emit({ value });
+    }
+}

package/runtime/tests/DirectOutputParent.d.ts

@@ -0,0 +1,9 @@
+import { FluffElement } from '../FluffElementImpl.js';
+export declare class DirectOutputParent extends FluffElement {
+    receivedValue: string | null;
+    onSubmit(event: {
+        value: string;
+    }): void;
+    protected __render(): void;
+    protected __setupBindings(): void;
+}

package/runtime/tests/DirectOutputParent.js

@@ -0,0 +1,17 @@
+import { FluffElement } from '../FluffElementImpl.js';
+export class DirectOutputParent extends FluffElement {
+    receivedValue = null;
+    onSubmit(event) {
+        this.receivedValue = event.value;
+    }
+    __render() {
+        this.__getShadowRoot().innerHTML = '<direct-output-child x-fluff-component data-lid="l0"></direct-output-child>';
+        const bindings = {
+            l0: [{ n: 'submit', b: 'event', h: 0, d: ['onSubmit'] }]
+        };
+        Reflect.set(this.constructor, '__bindings', bindings);
+    }
+    __setupBindings() {
+        super.__setupBindings();
+    }
+}

package/runtime/tests/TaskStats.d.ts

@@ -0,0 +1,9 @@
+export type TaskStatus = 'todo' | 'in-progress' | 'done';
+export type TaskPriority = 'low' | 'medium' | 'high' | 'urgent';
+export interface TaskStats {
+    total: number;
+    byStatus: Record<TaskStatus, number>;
+    byPriority: Record<TaskPriority, number>;
+    overdue: number;
+    dueToday: number;
+}

package/runtime/tests/TaskStats.js

@@ -0,0 +1 @@
+export {};

package/runtime/tests/TestChildTasksListComponent.d.ts

@@ -0,0 +1,8 @@
+import { FluffElement } from '../FluffElement.js';
+export declare class TestChildTasksListComponent extends FluffElement {
+    private readonly __tasks;
+    get tasks(): number[];
+    set tasks(value: number[]);
+    protected __render(): void;
+    protected __setupBindings(): void;
+}

package/runtime/tests/TestChildTasksListComponent.js

@@ -0,0 +1,28 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElement.js';
+import { MarkerManager } from '../MarkerManager.js';
+export class TestChildTasksListComponent extends FluffElement {
+    __tasks = new Property([]);
+    get tasks() {
+        return this.__tasks.getValue() ?? [];
+    }
+    set tasks(value) {
+        this.__tasks.setValue(value);
+    }
+    __render() {
+        this.__getShadowRoot().innerHTML = `
+                    <!--fluff:for:0-->
+                    <!--/fluff:for:0-->
+                    <template data-fluff-tpl="test-child-tasks-list-0">
+                        <div class="item"></div>
+                    </template>
+                `;
+        this.__setMarkerConfigs(JSON.stringify([
+            [0, { type: 'for', iterator: 'task', iterableExprId: 2, deps: ['tasks'], hasEmpty: false }]
+        ]));
+    }
+    __setupBindings() {
+        this.__initializeMarkers(MarkerManager);
+        super.__setupBindings();
+    }
+}

package/runtime/tests/TestForChildComponent.d.ts

@@ -0,0 +1,6 @@
+import { FluffElement } from '../FluffElement.js';
+export declare class TestForChildComponent extends FluffElement {
+    value: string;
+    protected __render(): void;
+    protected __setupBindings(): void;
+}

package/runtime/tests/TestForChildComponent.js

@@ -0,0 +1,10 @@
+import { FluffElement } from '../FluffElement.js';
+export class TestForChildComponent extends FluffElement {
+    value = '';
+    __render() {
+        this.__getShadowRoot().innerHTML = '<span>child</span>';
+    }
+    __setupBindings() {
+        super.__setupBindings();
+    }
+}

package/runtime/tests/TestForComponent.d.ts

@@ -0,0 +1,6 @@
+import { FluffElement } from '../FluffElement.js';
+export declare class TestForComponent extends FluffElement {
+    items: string[];
+    protected __render(): void;
+    protected __setupBindings(): void;
+}