@reidelsaltres/pureper 0.1.160 → 0.1.162

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/Rule.ts

@@ -25,6 +25,8 @@ export interface RuleResult {
     observables?: any[];
     /** Дочерние Rule (для вложенных структур) */
     children?: Rule[];
+    /** Дополнительные данные (например, refName для RefRule) */
+    data?: Record<string, any>;
 }
 
 /**

package/src/foundation/engine/Scope.ts

@@ -5,6 +5,8 @@
 export default class Scope {
     private variables: Record<string, any> = {};
     private readonly debugWarnings: boolean;
+    /** Оригинальный объект для синхронизации refs */
+    private originalSource: object | null = null;
 
     constructor(options?: { debugWarnings?: boolean }) {
         this.debugWarnings = options?.debugWarnings ?? true;
@@ -19,12 +21,18 @@ export default class Scope {
 
     /**
      * Установить переменную в Scope
+     * @param syncToOriginal - синхронизировать с оригинальным объектом (по умолчанию true)
      */
-    public set(key: string, value: any): void {
-        if (this.debugWarnings && key in this.variables) {
-            console.warn(`[Scope] Warning: Variable "${key}" is being overwritten`);
+    public set(key: string, value: any, syncToOriginal: boolean = true): void {
+        if (this.debugWarnings && key in this.variables && this.variables[key] !== undefined) {
+            // Не предупреждаем при установке ref (значение было undefined)
         }
         this.variables[key] = value;
+        
+        // Синхронизируем с оригинальным объектом если он есть
+        if (syncToOriginal && this.originalSource) {
+            (this.originalSource as any)[key] = value;
+        }
     }
 
     /**
@@ -146,9 +154,11 @@ export default class Scope {
 
     /**
      * Статический метод для создания Scope из объекта
+     * Сохраняет ссылку на оригинальный объект для синхронизации refs
      */
     public static from(source: object | Record<string, any>, options?: { debugWarnings?: boolean }): Scope {
         const scope = new Scope(options);
+        scope.originalSource = source;
         scope.merge(source);
         return scope;
     }

package/src/foundation/engine/TemplateEngine.ts

@@ -1,7 +1,7 @@
 import Scope from './Scope.js';
 import Expression from './Expression.js';
 import EscapeHandler from './EscapeHandler.js';
-import TemplateInstance, { TemplateSection } from './TemplateInstance.js';
+import TemplateInstance, { TemplateSection, FragmentBinding } from './TemplateInstance.js';
 import Rule, { RuleMatch, RuleResult, SyntaxRule, AttributeRule } from './Rule.js';
 import Observable from '../api/Observer.js';
 
@@ -30,6 +30,8 @@ export interface ProcessResult {
     output: string;
     observables: Observable<any>[];
     sections: TemplateSection[];
+    /** ID созданного фрагмента (если был создан) */
+    fragmentId?: string;
 }
 
 /**
@@ -97,10 +99,15 @@ export default class TemplateEngine {
      * Обработать шаблон и вернуть TemplateInstance
      */
     public parse(template: string): TemplateInstance {
-        const result = this.processTemplate(template, this.scope);
-        const templateInstance = new TemplateInstance(result.output, this.scope);
+        const templateInstance = new TemplateInstance(this.scope);
+        const result = this.processTemplateWithFragments(template, this.scope, templateInstance, null);
 
-        // Add sections
+        // Устанавливаем корневой фрагмент
+        if (result.fragmentId) {
+            templateInstance.setRootFragment(result.fragmentId);
+        }
+
+        // Add sections and track observables
         for (const section of result.sections) {
             templateInstance.addSection(section);
 
@@ -115,6 +122,31 @@ export default class TemplateEngine {
         return templateInstance;
     }
 
+    /**
+     * Обработать шаблон с созданием фрагментов
+     */
+    private processTemplateWithFragments(
+        template: string,
+        scope: Scope,
+        instance: TemplateInstance,
+        parentFragmentId: string | null
+    ): ProcessResult {
+        const result = this.processTemplate(template, scope);
+        
+        // Создаём фрагмент для этого результата
+        const fragmentId = instance.createFragment(
+            result.output,
+            template,
+            result.sections,
+            parentFragmentId
+        );
+        
+        return {
+            ...result,
+            fragmentId
+        };
+    }
+
     /**
      * Обработать шаблон (внутренний метод, используется Rule для рекурсии)
      */
@@ -219,6 +251,49 @@ export default class TemplateEngine {
             .replace(/@injection\[(head|tail)\]\s*=\s*["'][^"']*["']/gi, '');
     }
 
+    /**
+     * Добавить новый шаблон в существующий TemplateInstance.
+     * Обрабатывает шаблон и добавляет результат как новый фрагмент.
+     * Если instance привязан к контейнерам, DOM обновится автоматически.
+     * 
+     * @param instance - существующий TemplateInstance
+     * @param template - новый шаблон для добавления
+     * @param customScope - опциональный scope для нового шаблона
+     * @returns ID созданного фрагмента
+     */
+    public appendTemplate(instance: TemplateInstance, template: string, customScope?: Scope | object): string {
+        const scope = customScope 
+            ? (customScope instanceof Scope ? customScope : Scope.from(customScope))
+            : instance.getScope();
+        
+        // Обрабатываем шаблон
+        const result = this.processTemplate(template, scope);
+        
+        // Создаём фрагмент
+        const fragmentId = instance.createFragment(
+            result.output,
+            template,
+            result.sections,
+            null // без родителя - это отдельный фрагмент
+        );
+        
+        // Добавляем секции и отслеживаем Observable
+        for (const section of result.sections) {
+            instance.addSection(section);
+            
+            for (const observable of section.result.observables || []) {
+                instance.trackObservable(observable, section, (s) => {
+                    return this.processTemplate(s.sourceTemplate, scope);
+                });
+            }
+        }
+        
+        // Вставляем в привязанные контейнеры
+        instance.insertAppendedFragment(fragmentId);
+        
+        return fragmentId;
+    }
+
     /**
      * Статический метод для быстрой обработки
      */

package/src/foundation/engine/TemplateInstance.md

@@ -0,0 +1,110 @@
+Проанализируй текущий код TemplateInstance, Переделай TemplateInstance
+
+# Предположительный пример структуры и работы
+
+Должен содержать множество различных мелких фрагментов, и при обновлении rebuild-ить только те на которые изменения повлияли, т.е
+Если:
+<div>@(observable1)</div> 
+<div>@(observable2)</div> 
+
+должно создатся 2 фрагмента
+1. <div>@(observable1)</div> - пересоздастся только при изменении observable1, изменения observable2 не повлияют на него
+2. <div>@(observable2)</div> - пересоздастся только при изменении observable2, изменения observable1 не повлияют на него
+
+---
+
+Если:
+<div>@(observable1) и @(observable2)</div> то изменения observable1 и изменение observable2 должны влиять
+
+здесь 1 фрагмент:
+1. <div>@(observable1) и @(observable2)</div> #id1
+
+---
+
+Если:
+<div @[ref]="'outer'">
+    <span>@(observable1)</span>
+    <span>@(observable2)</span>
+    @for (observableVar in observableCollection) {
+        <span>@(observableVar)</span>
+    }
+</div>
+
+здесь 5+ фрагментов:
+1.  <div @[ref]="'outer'"> #id1
+        #id2
+        #id3
+        #id4
+    </div>
+2.  <span>@(observable1)</span> #id2
+3.  <span>@(observable2)</span> #id3
+4.  *RuleFragment* @for (observableVar in observableCollection) { #id5 } #id4
+5+  <span>@(observableVar)</span> #id5
+
+3 отдельных фрагмента (#id5-a, #id5-b, #id5-c), каждый обновляется независимо
+
+Если изменится observable1 то пересоздастся должен только #id2
+Если изменится observableCollection то пересоздастся должен #id4 и соответсвенно это коснётся и вложенного в него #id5
+Измеения в var в #id5 должно пересоздать только #id5
+
+
+Если Scope { observable1 = new Observable(1), 
+    observable1 = new Observable(2), 
+    observableCollection = new Observable([55,56,57]) }
+
+то результат будет выглядеть так:
+
+<div id="'outer'">
+    <span>1</span>
+    <span>2</span>
+    <span>55</span>
+    <span>56</span>
+    <span>57</span>
+</div>
+
+но при изменении observable1.setObject(999) то результат станет:
+
+<div id="'outer'">
+    <span>999</span>
+    <span>2</span>
+    <span>55</span>
+    <span>56</span>
+    <span>57</span>
+</div>
+
+если TemplateInstance имеет биндинг с контейнером, то аналогичные изменения должны происходить и в контейнере
+
+---
+
+
+
+изменения observable1 повлияет только на #id1
+изменения observabıe2 повлияет только на #id2
+
+TemplateInstance должен иметь эмитить ивенты на которые можно подписатся
+onFragmentChange(event: FragmentChangeEvent)
+
+должен иметь методы
+bindRefs() - должен создавать в Scope переменные из @[ref] правила
+unbindRefs() - должен удалять из Scope переменные из @[ref] правила (приравнивать к null)
+
+bindEvents() - должен добавлять обработчик событий к html-element из @on[event] правила
+unbindEvents() - должен удалять обработчик событий из html-element по @on[event] правилу
+
+bind(container) - должен связывать внутреннюю DOM структуру с container, должен вставлять DOM в container
+unbind(container) - должен удалять связь внутренней DOM структуры с container, оставляет элементы в container, но при изменении в TemplateInstance container уже не должен меняется
+
+Если существует binding с container то изменения внутри TemplateInstance должны так же отражатся и на container,
+удаление и добавление ивентов, динамическое обновление и пересоздание фагментов, 
+
+TemplateInstance может иметь множество контейнеров binding-ов
+
+bind(container) - должен автоматически вызывать bindRefs,bindEvents
+unbind(container) - должен автоматически вызывать unbindRefs,unbindEvents
+
+# Уточнения
+1. Архитектурная проблема — TemplateEngine не создаёт фрагменты:
+Сейчас TemplateEngine.parse() возвращает один общий результат. Разбиение на фрагменты по Observable не происходит. Нужно менять логику парсинга. Изменения TemplateEngine приемлимы если требуются
+
+
+