@reidelsaltres/pureper 0.1.157 → 0.1.162

package/src/foundation/api/Observer.ts

@@ -28,9 +28,50 @@ export class Observer<T> {
         this.listeners.forEach(listener => listener(data));
     }
 }
+
+export class MutationObserver<T> implements IMutationObserver<T> {
+    private listeners: Array<(oldValue: T, newValue: T) => void> = [];
+
+    public subscribe(listener: (oldValue: T, newValue: T) => void): void {
+        this.listeners.push(listener);
+    }
+    public unsubscribe(listener: (oldValue: T, newValue: T) => void): void {
+        this.listeners = this.listeners.filter(l => l !== listener);
+    }
+
+    public notify(oldValue: T, newValue: T): void {
+        this.listeners.forEach(listener => listener(oldValue, newValue));
+    }
+}
+
+// Symbol to identify Observable instances
+export const OBSERVABLE_SYMBOL = Symbol.for('Observable');
+
+/**
+ * Check if a value is an Observable
+ */
+export function isObservable<T = any>(value: any): value is Observable<T> {
+    return value && value[OBSERVABLE_SYMBOL] === true;
+}
+
+/**
+ * Observable - простой реактивный контейнер без Proxy.
+ * 
+ * Для доступа к значению используйте getObject():
+ *   const user = new Observable({ name: 'Alice', age: 25 });
+ *   user.getObject().name  // 'Alice'
+ *   user.setObject({ name: 'Bob', age: 30 }); // triggers subscribers
+ * 
+ * В шаблонах синтаксис прозрачный:
+ *   @(user.name) - автоматически распознаётся как user.getObject().name
+ */
 export default class Observable<T> {
     private object: T;
     private observer: Observer<T> = new Observer<T>();
+    private mutationObserver: MutationObserver<T> = new MutationObserver<T>();
+
+    // Mark as Observable
+    public readonly [OBSERVABLE_SYMBOL] = true;
 
     constructor(object: T) {
         this.object = object;
@@ -39,19 +80,38 @@ export default class Observable<T> {
     public getObject(): T {
         return this.object;
     }
+    
     public getObserver(): Observer<T> {
         return this.observer;
     }
+    
+    public getMutationObserver(): MutationObserver<T> {
+        return this.mutationObserver;
+    }
 
     public subscribe(listener: (data: T) => void): void {
         this.observer.subscribe(listener);
     }
+    
     public unsubscribe(listener: (data: T) => void): void {
         this.observer.unsubscribe(listener);
     }
 
+    /**
+     * Subscribe to mutation events (oldValue, newValue)
+     */
+    public subscribeMutation(listener: (oldValue: T, newValue: T) => void): void {
+        this.mutationObserver.subscribe(listener);
+    }
+    
+    public unsubscribeMutation(listener: (oldValue: T, newValue: T) => void): void {
+        this.mutationObserver.unsubscribe(listener);
+    }
+
     public setObject(object: T): void {
+        const oldObject = this.object;
         this.object = object;
         this.observer.notify(this.object);
+        this.mutationObserver.notify(oldObject, this.object);
     }
 }

package/src/foundation/component_api/Component.ts

@@ -1,5 +1,6 @@
 import IElementHolder from "../api/ElementHolder.js";
 import UniHtml from "../component_api/UniHtml.js";
+import TemplateInstance from "../engine/TemplateInstance.js";
 import Attribute from "./Attribute.js";
 import { Class, Mixined } from "./mixin/Proto.js";
 
@@ -56,7 +57,7 @@ export default class Component extends Class(HTMLElement).extend(UniHtml).build(
 
         this.load(this.shadowRoot);
     }
-    protected render(element: IElementHolder, renderTarget: HTMLElement | ShadowRoot): Promise<void> {
+    protected render(element: TemplateInstance, renderTarget: HTMLElement | ShadowRoot): Promise<void> {
         (this.getMixin(UniHtml)?.instance.get() as any).render(element, renderTarget);
         //super.render(element, renderTarget);
         //this.shadowRoot!.appendChild(renderTarget);

package/src/foundation/component_api/UniHtml.ts

@@ -6,6 +6,7 @@
  * Designed to replace legacy Page and Component base classes.
  */
 import IElementHolder from "../api/ElementHolder.js";
+import { TemplateInstance } from "../engine/TemplateEngine.js";
 
 
 /**
@@ -13,7 +14,6 @@ import IElementHolder from "../api/ElementHolder.js";
  * Use static factory methods for instantiation.
  */
 export default class UniHtml {
-    
     /**
      * Unified component lifecycle entrypoint.
      * Loads HTML, then calls preLoadJS, render, and postLoadJS hooks in order.
@@ -21,30 +21,27 @@ export default class UniHtml {
      */
     public async load(element: HTMLElement | ShadowRoot): Promise<void> {;
         await this.preInit();
-        const preHtml: DocumentFragment = await this._init();
-        const html: DocumentFragment = await this._postInit(preHtml);
+        const preHtml: TemplateInstance = await this._init();
+        const html: TemplateInstance = await this._postInit(preHtml);
 
-        const localRoot = html;
-
-        const holder : IElementHolder = { element: localRoot };
 
         // ВАЖНО: preLoad() вызывается ДО монтирования в DOM/Shadow DOM.
         // Для компонентов (UniHtmlComponent) на этом этапе ещё нельзя полагаться на this.shadowRoot —
         // используйте переданный localRoot для подготовки DOM, данных и навешивания обработчиков.
         // Это предпочтительный этап инициализации для компонентов.
-        await this.preLoad(holder);
+        await this.preLoad(html);
         // render() отвечает за помещение содержимого из localRoot в конечную цель (renderTarget).
         // В UniHtmlComponent.render() после вызова базового render() происходит добавление wrapper в shadowRoot.
-        await this.render(holder, element);
+        await this.render(html, element);
         // postLoad() вызывается ПОСЛЕ render(). Для компонентов к этому моменту содержимое уже добавлено
         // внутрь shadowRoot, и можно безопасно работать с this.shadowRoot, измерениями layout и т.п.
-        await this.postLoad(holder);
+        await this.postLoad(html);
     }
 
-    private async _postInit(html: DocumentFragment): Promise<DocumentFragment> {
+    private async _postInit(html: TemplateInstance): Promise<TemplateInstance> {
         throw new Error("Method not implemented.");
     }
-    private async _init(): Promise<DocumentFragment> {
+    private async _init(): Promise<TemplateInstance> {
         throw new Error("Method not implemented.");
     }
 
@@ -55,34 +52,27 @@ export default class UniHtml {
      * РЕКОМЕНДАЦИЯ: предпочитайте выполнять основную подготовку, поиск элементов, навешивание обработчиков
      * на узлы из localRoot именно здесь; затем render() вставит их в целевой контейнер/теневой DOM.
      */
-    protected async preLoad(holder : IElementHolder) { }
+    protected async preLoad(template: TemplateInstance) { }
     /**
      * Hook after rendering (e.g., event binding).
      * Для компонентов вызывается после того, как содержимое вставлено в shadowRoot (см. UniHtmlComponent.render()).
      * Используйте этот этап только когда необходим доступ к реально смонтированному DOM (layout/measurements,
      * интеграции, требующие присутствия в документе). В остальных случаях предпочитайте preLoad().
      */
-    protected async postLoad(holder: IElementHolder) { }
+    protected async postLoad(template: TemplateInstance) { }
     /**
      * Main rendering step. By default, simply inserts HTML into the container.
      * Override in subclasses for custom rendering logic.
      * @param element Target container
      * @param html HTML content
      */
-    protected async render(holder: IElementHolder, renderTarget: HTMLElement | DocumentFragment): Promise<void> {
+    protected async render(template: TemplateInstance, renderTarget: HTMLElement | DocumentFragment): Promise<void> {
         // Clear renderTarget
         while (renderTarget.firstChild) {
             renderTarget.removeChild(renderTarget.firstChild);
         }
-
-        // Move all children from holder.element to renderTarget
-        const children = Array.from(holder.element.childNodes);
-        for (const child of children) {
-            renderTarget.appendChild(child);
-        }
+        template.bind(renderTarget as any);
         
-        // Update holder to point to renderTarget (now contains the content)
-        (holder as { element: HTMLElement | DocumentFragment }).element = renderTarget;
         return Promise.resolve();
     }
 }

package/src/foundation/engine/BalancedParser.ts

@@ -0,0 +1,353 @@
+/**
+ * BalancedParser - утилита для парсинга сбалансированных скобок (), {}.
+ * Корректно обрабатывает строки и комментарии.
+ */
+export default class BalancedParser {
+    
+    /**
+     * Найти все сбалансированные выражения с заданным opener.
+     * @param input - входная строка
+     * @param opener - открывающая последовательность, например '@(' или '@for('
+     * @returns массив объектов с content и позициями
+     */
+    public static parseBalanced(
+        input: string, 
+        opener: string,
+        closerChar: ')' | '}' = ')'
+    ): Array<{ content: string; start: number; end: number }> {
+        const results: Array<{ content: string; start: number; end: number }> = [];
+        const openerChar = closerChar === ')' ? '(' : '{';
+        let i = 0;
+
+        while (i < input.length) {
+            const idx = input.indexOf(opener, i);
+            if (idx === -1) break;
+
+            const contentStart = idx + opener.length;
+            let pos = contentStart;
+            let depth = 1;
+
+            while (pos < input.length && depth > 0) {
+                const ch = input[pos];
+
+                // Skip string literals
+                if (ch === '"' || ch === "'" || ch === '`') {
+                    pos = this.skipString(input, pos, ch);
+                    continue;
+                }
+
+                // Skip single-line comments
+                if (ch === '/' && input[pos + 1] === '/') {
+                    pos = this.skipLineComment(input, pos);
+                    continue;
+                }
+
+                // Skip multi-line comments
+                if (ch === '/' && input[pos + 1] === '*') {
+                    pos = this.skipBlockComment(input, pos);
+                    continue;
+                }
+
+                if (ch === openerChar) depth++;
+                else if (ch === closerChar) depth--;
+
+                pos++;
+            }
+
+            if (depth === 0) {
+                results.push({
+                    content: input.slice(contentStart, pos - 1),
+                    start: idx,
+                    end: pos
+                });
+                i = pos;
+            } else {
+                // Unbalanced, skip this opener and continue
+                i = idx + 1;
+            }
+        }
+
+        return results;
+    }
+
+    /**
+     * Парсить блочные Rule типа @for(...) { ... }
+     * @returns объект с condition (содержимое скобок) и block (содержимое фигурных скобок)
+     */
+    public static parseBlockRule(
+        input: string,
+        opener: string // например '@for', '@if'
+    ): Array<{ condition: string; block: string; start: number; end: number }> {
+        const results: Array<{ condition: string; block: string; start: number; end: number }> = [];
+        const openerLower = opener.toLowerCase();
+        let i = 0;
+
+        while (i < input.length) {
+            // Case-insensitive search
+            const lowerInput = input.toLowerCase();
+            let idx = lowerInput.indexOf(openerLower, i);
+            if (idx === -1) break;
+
+            // Check for @@ escape
+            if (idx > 0 && input[idx - 1] === '@') {
+                i = idx + 1;
+                continue;
+            }
+
+            // Find opening parenthesis
+            let parenStart = idx + opener.length;
+            while (parenStart < input.length && /\s/.test(input[parenStart])) {
+                parenStart++;
+            }
+
+            if (input[parenStart] !== '(') {
+                i = idx + 1;
+                continue;
+            }
+
+            // Parse balanced parentheses for condition
+            let pos = parenStart + 1;
+            let depth = 1;
+
+            while (pos < input.length && depth > 0) {
+                const ch = input[pos];
+
+                if (ch === '"' || ch === "'" || ch === '`') {
+                    pos = this.skipString(input, pos, ch);
+                    continue;
+                }
+                if (ch === '/' && input[pos + 1] === '/') {
+                    pos = this.skipLineComment(input, pos);
+                    continue;
+                }
+                if (ch === '/' && input[pos + 1] === '*') {
+                    pos = this.skipBlockComment(input, pos);
+                    continue;
+                }
+
+                if (ch === '(') depth++;
+                else if (ch === ')') depth--;
+                pos++;
+            }
+
+            if (depth !== 0) {
+                i = idx + 1;
+                continue;
+            }
+
+            const condition = input.slice(parenStart + 1, pos - 1);
+            const conditionEnd = pos;
+
+            // Find opening brace for block
+            let braceStart = conditionEnd;
+            while (braceStart < input.length && /\s/.test(input[braceStart])) {
+                braceStart++;
+            }
+
+            if (input[braceStart] !== '{') {
+                i = idx + 1;
+                continue;
+            }
+
+            // Parse balanced braces for block
+            pos = braceStart + 1;
+            depth = 1;
+
+            while (pos < input.length && depth > 0) {
+                const ch = input[pos];
+
+                if (ch === '"' || ch === "'" || ch === '`') {
+                    pos = this.skipString(input, pos, ch);
+                    continue;
+                }
+                if (ch === '/' && input[pos + 1] === '/') {
+                    pos = this.skipLineComment(input, pos);
+                    continue;
+                }
+                if (ch === '/' && input[pos + 1] === '*') {
+                    pos = this.skipBlockComment(input, pos);
+                    continue;
+                }
+
+                if (ch === '{') depth++;
+                else if (ch === '}') depth--;
+                pos++;
+            }
+
+            if (depth !== 0) {
+                i = idx + 1;
+                continue;
+            }
+
+            const block = input.slice(braceStart + 1, pos - 1);
+
+            results.push({
+                condition,
+                block,
+                start: idx,
+                end: pos
+            });
+
+            i = pos;
+        }
+
+        return results;
+    }
+
+    /**
+     * Парсить @if/@elseif/@else цепочки
+     */
+    public static parseIfChain(input: string): Array<{
+        type: 'if' | 'elseif' | 'else';
+        condition?: string;
+        block: string;
+        start: number;
+        end: number;
+    }> {
+        const results: Array<{
+            type: 'if' | 'elseif' | 'else';
+            condition?: string;
+            block: string;
+            start: number;
+            end: number;
+        }> = [];
+
+        // Find @if first
+        const ifMatches = this.parseBlockRule(input, '@if');
+        
+        for (const ifMatch of ifMatches) {
+            results.push({
+                type: 'if',
+                condition: ifMatch.condition,
+                block: ifMatch.block,
+                start: ifMatch.start,
+                end: ifMatch.end
+            });
+
+            // Look for @elseif/@else after this @if
+            let searchPos = ifMatch.end;
+            
+            while (searchPos < input.length) {
+                // Skip whitespace
+                while (searchPos < input.length && /\s/.test(input[searchPos])) {
+                    searchPos++;
+                }
+
+                const remaining = input.slice(searchPos).toLowerCase();
+
+                if (remaining.startsWith('@elseif')) {
+                    const elseifMatches = this.parseBlockRule(input.slice(searchPos), '@elseif');
+                    if (elseifMatches.length > 0) {
+                        const m = elseifMatches[0];
+                        results.push({
+                            type: 'elseif',
+                            condition: m.condition,
+                            block: m.block,
+                            start: searchPos + m.start,
+                            end: searchPos + m.end
+                        });
+                        searchPos = searchPos + m.end;
+                        continue;
+                    }
+                } else if (remaining.startsWith('@else')) {
+                    // @else without condition
+                    let pos = searchPos + 5; // length of '@else'
+                    while (pos < input.length && /\s/.test(input[pos])) {
+                        pos++;
+                    }
+
+                    if (input[pos] === '{') {
+                        let bracePos = pos + 1;
+                        let depth = 1;
+
+                        while (bracePos < input.length && depth > 0) {
+                            const ch = input[bracePos];
+                            if (ch === '"' || ch === "'" || ch === '`') {
+                                bracePos = this.skipString(input, bracePos, ch);
+                                continue;
+                            }
+                            if (ch === '{') depth++;
+                            else if (ch === '}') depth--;
+                            bracePos++;
+                        }
+
+                        if (depth === 0) {
+                            results.push({
+                                type: 'else',
+                                block: input.slice(pos + 1, bracePos - 1),
+                                start: searchPos,
+                                end: bracePos
+                            });
+                            searchPos = bracePos;
+                            continue;
+                        }
+                    }
+                }
+
+                break; // No more @elseif/@else found
+            }
+        }
+
+        return results;
+    }
+
+    /**
+     * Skip over a string literal (handles escape sequences)
+     */
+    private static skipString(input: string, pos: number, quote: string): number {
+        pos++; // skip opening quote
+        while (pos < input.length) {
+            if (input[pos] === '\\') {
+                pos += 2; // skip escape sequence
+                continue;
+            }
+            if (input[pos] === quote) {
+                return pos + 1;
+            }
+            // Handle template literal ${...}
+            if (quote === '`' && input[pos] === '$' && input[pos + 1] === '{') {
+                pos += 2;
+                let depth = 1;
+                while (pos < input.length && depth > 0) {
+                    if (input[pos] === '{') depth++;
+                    else if (input[pos] === '}') depth--;
+                    pos++;
+                }
+                continue;
+            }
+            pos++;
+        }
+        return pos;
+    }
+
+    /**
+     * Skip single-line comment
+     */
+    private static skipLineComment(input: string, pos: number): number {
+        while (pos < input.length && input[pos] !== '\n') {
+            pos++;
+        }
+        return pos + 1;
+    }
+
+    /**
+     * Skip block comment
+     */
+    private static skipBlockComment(input: string, pos: number): number {
+        pos += 2; // skip /*
+        while (pos < input.length - 1) {
+            if (input[pos] === '*' && input[pos + 1] === '/') {
+                return pos + 2;
+            }
+            pos++;
+        }
+        return pos;
+    }
+
+    /**
+     * Извлечь простые @(expression) без блоков
+     */
+    public static parseExpressions(input: string): Array<{ content: string; start: number; end: number }> {
+        return this.parseBalanced(input, '@(', ')');
+    }
+}

package/src/foundation/engine/EscapeHandler.ts

@@ -0,0 +1,54 @@
+/**
+ * EscapeHandler - обработка escape-последовательностей.
+ * @@ -> @
+ * @@@@ -> @@
+ */
+export default class EscapeHandler {
+    
+    /**
+     * Заменить @@ на специальный placeholder перед парсингом
+     */
+    public static escapeDoubleAt(input: string): { result: string; placeholder: string } {
+        // Use a unique placeholder that won't appear in normal code
+        const placeholder = '\x00AT_ESCAPE\x00';
+        const result = input.replace(/@@/g, placeholder);
+        return { result, placeholder };
+    }
+
+    /**
+     * Восстановить @ из placeholder после парсинга
+     */
+    public static restoreEscapes(input: string, placeholder: string): string {
+        return input.replace(new RegExp(placeholder.replace(/\x00/g, '\\x00'), 'g'), '@');
+    }
+
+    /**
+     * Полный цикл: escape -> process -> restore
+     */
+    public static process(
+        input: string, 
+        processor: (escaped: string) => string
+    ): string {
+        const { result: escaped, placeholder } = this.escapeDoubleAt(input);
+        const processed = processor(escaped);
+        return this.restoreEscapes(processed, placeholder);
+    }
+
+    /**
+     * Проверить, является ли позиция escaped (предшествует @@)
+     */
+    public static isEscaped(input: string, position: number): boolean {
+        if (position === 0) return false;
+        
+        // Count consecutive @ before this position
+        let count = 0;
+        let i = position - 1;
+        while (i >= 0 && input[i] === '@') {
+            count++;
+            i--;
+        }
+        
+        // If odd number of @ before, this @ is escaped
+        return count % 2 === 1;
+    }
+}