@ibyar/core 0.4.2 → 0.5.0

package/view/render.d.ts

@@ -1,36 +1,38 @@
-import { ExpressionEventMap, ExpressionNode, Stack } from '@ibyar/expressions';
-import { CommentNode, DOMDirectiveNode, DOMElementNode, DOMFragmentNode, DOMNode, LiveAttribute, LiveTextContent, TextContent } from '@ibyar/elements';
+import { ReactiveScope, ScopeContext, ScopeSubscription, Stack } from '@ibyar/expressions';
+import { CommentNode, DomStructuralDirectiveNode, DomElementNode, DomFragmentNode, DomNode, LiveTextContent, TextContent, DomAttributeDirectiveNode } from '@ibyar/elements';
 import { ComponentRef, ListenerRef } from '../component/component.js';
 import { ElementMutation } from './mutation.js';
 import { HTMLComponent } from '../component/custom-element.js';
-import { SourceFollowerCallback } from '../model/change-detection.js';
-import { StructuralDirective } from '../directive/directive.js';
-export declare class ComponentRender<T> {
+import { AttributeDirective, StructuralDirective } from '../directive/directive.js';
+import { TemplateRef } from '../linker/template-ref.js';
+export declare class ComponentRender<T extends object> {
     view: HTMLComponent<T>;
     componentRef: ComponentRef<T>;
-    template: DOMNode;
+    template: DomNode;
     nativeElementMutation: ElementMutation;
     contextStack: Stack;
-    templateRefMap: Map<string, DOMElementNode>;
+    templateNameScope: ReactiveScope<{
+        [templateName: string]: TemplateRef;
+    }>;
     constructor(view: HTMLComponent<T>);
     initView(): void;
-    isTemplateRefName(template: DOMNode): template is DOMElementNode;
-    initTemplateRefMap(domNode: DOMNode): void;
+    isTemplateRefName(template: DomNode): template is DomElementNode;
+    initTemplateRefMap(domNode: DomNode): void;
     initHostListener(): void;
     handelHostListener(listener: ListenerRef): void;
     addNativeEventListener(source: HTMLElement | Window, eventName: string, funcCallback: Function): void;
     getElementByName(name: string): any;
-    createStructuralDirective(directive: DOMDirectiveNode, comment: Comment, directiveStack: Stack, parentNode: Node): void;
+    createStructuralDirective(directive: DomStructuralDirectiveNode, comment: Comment, directiveStack: Stack, parentNode: Node): void;
     createComment(node: CommentNode): Comment;
     createText(node: TextContent): Text;
     createLiveText(textNode: LiveTextContent, contextStack: Stack, parentNode: Node): Text;
-    createDocumentFragment(node: DOMFragmentNode, contextStack: Stack, parentNode: Node): DocumentFragment;
-    appendChildToParent(fragmentParent: HTMLElement | DocumentFragment, child: DOMNode, contextStack: Stack, parentNode: Node): void;
-    createElementByTagName(node: DOMElementNode): HTMLElement;
-    createElement(node: DOMElementNode, contextStack: Stack, parentNode: Node): HTMLElement;
-    initAttribute(element: HTMLElement, node: DOMElementNode, contextStack: Stack): void;
-    initDirectiveAttributes(directive: StructuralDirective, node: DOMDirectiveNode, contextStack: Stack): void;
-    bind1Way(element: HTMLElement | StructuralDirective | Text, attr: LiveAttribute | LiveTextContent, contextStack: Stack): void;
-    subscribeExpressionNode(node: ExpressionNode, contextStack: Stack, callback: SourceFollowerCallback, object?: object, attrName?: string, events?: ExpressionEventMap): void;
-    bind2Way(element: HTMLElement | StructuralDirective, attr: LiveAttribute, contextStack: Stack): void;
+    createDocumentFragment(node: DomFragmentNode, contextStack: Stack, parentNode: Node): DocumentFragment;
+    appendChildToParent(fragmentParent: HTMLElement | DocumentFragment, child: DomNode, contextStack: Stack, parentNode: Node): void;
+    createElementByTagName(node: {
+        tagName: string;
+        is?: string;
+    }): HTMLElement;
+    createElement(node: DomElementNode, contextStack: Stack, parentNode: Node): HTMLElement;
+    initAttribute(element: HTMLElement, node: DomElementNode, contextStack: Stack): ScopeSubscription<ScopeContext>[];
+    initDirectiveAttributes(directive: StructuralDirective | AttributeDirective, node: DomStructuralDirectiveNode | DomAttributeDirectiveNode, contextStack: Stack): ScopeSubscription<ScopeContext>[];
 }

package/view/render.js

@@ -1,40 +1,32 @@
-import { CommentNode, DOMDirectiveNode, DOMElementNode, DOMFragmentNode, isLiveTextContent, isTagNameNative, isValidCustomElementName, TextContent } from '@ibyar/elements';
+import { CommentNode, DomStructuralDirectiveNode, DomElementNode, DomFragmentNode, isLiveTextContent, isTagNameNative, isValidCustomElementName, TextContent } from '@ibyar/elements';
 import { ElementMutation } from './mutation.js';
 import { isHTMLComponent } from '../component/custom-element.js';
 import { documentStack } from '../context/stack.js';
 import { ClassRegistryProvider } from '../providers/provider.js';
 import { isOnDestroy, isOnInit } from '../component/lifecycle.js';
 import { hasAttr } from '../utils/elements-util.js';
-import { addChangeListener, isModel, subscribe1way, subscribe2way } from '../model/change-detection.js';
-import { AsyncPipeProvider, PipeProvider } from '../pipe/pipe.js';
-import { StructuralDirective } from '../directive/directive.js';
-import { ElementReactiveScope } from '../directive/providers.js';
-import { findScopeMap } from './events.js';
-function getChangeEventName(element, elementAttr) {
-    if (elementAttr === 'value') {
-        if (element instanceof HTMLInputElement) {
+import { AttributeDirective } from '../directive/directive.js';
+import { TemplateRefImpl } from '../linker/template-ref.js';
+import { ViewContainerRefImpl } from '../linker/view-container-ref.js';
+function getInputEventName(element) {
+    switch (true) {
+        case element instanceof HTMLInputElement:
             return 'input';
-        }
-        else if (element instanceof HTMLSelectElement
-            || element instanceof HTMLTextAreaElement) {
+        case element instanceof HTMLTextAreaElement:
+        case element instanceof HTMLSelectElement:
             return 'change';
-        }
+        default:
+            return undefined;
     }
-    return elementAttr;
 }
 export class ComponentRender {
     constructor(view) {
         this.view = view;
-        this.templateRefMap = new Map();
         this.componentRef = this.view.getComponentRef();
         this.contextStack = documentStack.copyStack();
-        this.contextStack.pushFunctionScope();
-        this.contextStack.pushScope(this.view._viewScope);
         this.contextStack.pushScope(this.view._modelScope);
+        this.templateNameScope = this.contextStack.pushBlockReactiveScope();
         this.nativeElementMutation = new ElementMutation();
-        this.view._model.subscribeModel('destroy', () => {
-            this.nativeElementMutation.disconnect();
-        });
     }
     initView() {
         if (this.componentRef.template) {
@@ -58,13 +50,19 @@ export class ComponentRender {
                 rootRef = this.view;
             }
             this.initTemplateRefMap(this.template);
-            const rootFragment = document.createDocumentFragment();
-            this.appendChildToParent(rootFragment, this.template, this.contextStack, rootRef);
+            let rootFragment;
+            if (this.template instanceof DomFragmentNode) {
+                rootFragment = this.createDocumentFragment(this.template, this.contextStack, rootRef);
+            }
+            else {
+                rootFragment = document.createDocumentFragment();
+                this.appendChildToParent(rootFragment, this.template, this.contextStack, rootRef);
+            }
             rootRef.append(rootFragment);
         }
     }
     isTemplateRefName(template) {
-        if (template instanceof DOMElementNode) {
+        if (template instanceof DomElementNode) {
             if (template.tagName === 'template' && template.templateRefName) {
                 return true;
             }
@@ -72,22 +70,17 @@ export class ComponentRender {
         return false;
     }
     initTemplateRefMap(domNode) {
-        if (domNode instanceof DOMElementNode || domNode instanceof DOMFragmentNode) {
+        if (domNode instanceof DomElementNode || domNode instanceof DomFragmentNode) {
             if (domNode.children) {
-                const toRemove = [];
                 for (let index = 0; index < domNode.children.length; index++) {
                     const child = domNode.children[index];
                     if (this.isTemplateRefName(child)) {
-                        toRemove.unshift({ index, template: child });
+                        this.templateNameScope.set(child.templateRefName.name, undefined);
                     }
                     else {
                         this.initTemplateRefMap(child);
                     }
                 }
-                toRemove.forEach(info => {
-                    this.templateRefMap.set(info.template.templateRefName.name, info.template);
-                    domNode.children.splice(info.index, 1);
-                });
             }
         }
     }
@@ -135,7 +128,6 @@ export class ComponentRender {
             });
         }
         else {
-            addChangeListener(sourceModel, eventName, () => this.view._model[listener.modelCallbackName].call(this.view._proxyModel));
         }
     }
     addNativeEventListener(source, eventName, funcCallback) {
@@ -150,20 +142,19 @@ export class ComponentRender {
         const directiveRef = ClassRegistryProvider.getDirectiveRef(directive.name);
         if (directiveRef) {
             const StructuralDirectiveClass = directiveRef.modelClass;
-            const structural = new StructuralDirectiveClass(this, directiveStack.copyStack(), comment, parentNode, directive.node);
-            if (isOnDestroy(structural)) {
-                const removeSubscription = this.nativeElementMutation.subscribeOnRemoveNode(parentNode, comment, () => {
-                    console.log('destroy structural directive', directive.name, removeSubscription);
-                    removeSubscription.unsubscribe();
+            const stack = directiveStack.copyStack();
+            const templateRef = new TemplateRefImpl(this, directive.node, stack, directive.templateExpressions ?? []);
+            const viewContainerRef = new ViewContainerRefImpl(parentNode, comment);
+            const structural = new StructuralDirectiveClass(templateRef, viewContainerRef);
+            stack.pushBlockReactiveScopeFor({ 'this': structural });
+            const subscriptions = this.initDirectiveAttributes(structural, directive, stack);
+            const removeSubscription = this.nativeElementMutation.subscribeOnRemoveNode(parentNode, comment, () => {
+                removeSubscription.unsubscribe();
+                subscriptions.forEach(subscription => subscription.unsubscribe());
+                if (isOnDestroy(structural)) {
                     structural.onDestroy();
-                });
-            }
-            const directiveInputName = directive.name.substring(1);
-            const directiveInput = directiveRef.inputs?.find(input => input.viewAttribute === directiveInputName);
-            if (directiveInput) {
-                Reflect.set(structural, directiveInput.modelProperty, String(directive.value));
-            }
-            this.initDirectiveAttributes(structural, directive, directiveStack);
+                }
+            });
             if (isOnInit(structural)) {
                 structural.onInit();
             }
@@ -181,22 +172,34 @@ export class ComponentRender {
         const liveText = new Text('');
         contextStack = contextStack.copyStack();
         contextStack.pushBlockScopeFor({ this: liveText });
-        this.bind1Way(liveText, textNode, contextStack);
+        const subscriptions = textNode.expression.subscribe(contextStack, textNode.pipelineNames);
+        textNode.expression.get(contextStack);
+        const removeSubscription = this.nativeElementMutation.subscribeOnRemoveNode(parentNode, liveText, () => {
+            removeSubscription.unsubscribe();
+            subscriptions.forEach(subscription => subscription.unsubscribe());
+        });
         return liveText;
     }
     createDocumentFragment(node, contextStack, parentNode) {
         const fragment = document.createDocumentFragment();
-        node.children.forEach(child => this.appendChildToParent(fragment, child, contextStack, parentNode));
+        node.children?.forEach(child => this.appendChildToParent(fragment, child, contextStack, parentNode));
         return fragment;
     }
     appendChildToParent(fragmentParent, child, contextStack, parentNode) {
-        if (child instanceof DOMElementNode) {
+        if (child instanceof DomElementNode) {
+            if (this.isTemplateRefName(child)) {
+                const templateRefName = child.templateRefName;
+                const templateRef = new TemplateRefImpl(this, new DomFragmentNode(child.children), contextStack.copyStack(), []);
+                this.templateNameScope.set(templateRefName.name, templateRef);
+                return;
+            }
             fragmentParent.append(this.createElement(child, contextStack, parentNode));
         }
-        else if (child instanceof DOMDirectiveNode) {
-            const comment = document.createComment(`start ${child.name} = ${child.value}`);
+        else if (child instanceof DomStructuralDirectiveNode) {
+            const commentText = child.name + (typeof child.value == 'string' ? (' = ' + child.value) : '');
+            const comment = document.createComment(`start ${commentText}`);
             fragmentParent.append(comment);
-            const lastComment = document.createComment(`end ${child.name} = ${child.value}`);
+            const lastComment = document.createComment(`end ${commentText}`);
             comment.after(lastComment);
             this.createStructuralDirective(child, comment, contextStack, parentNode);
         }
@@ -209,7 +212,7 @@ export class ComponentRender {
         else if (child instanceof CommentNode) {
             fragmentParent.append(this.createComment(child));
         }
-        else if (child instanceof DOMFragmentNode) {
+        else if (child instanceof DomFragmentNode) {
             fragmentParent.append(this.createDocumentFragment(child, contextStack, parentNode));
         }
     }
@@ -240,26 +243,57 @@ export class ComponentRender {
     }
     createElement(node, contextStack, parentNode) {
         const element = this.createElementByTagName(node);
-        const elContext = isHTMLComponent(element) ? element._viewScope : new ElementReactiveScope(element);
-        contextStack = contextStack.copyStack();
-        contextStack.pushScope(elContext);
-        this.initAttribute(element, node, contextStack);
-        if (node.templateRefName) {
-            Reflect.set(this.view, node.templateRefName.name, element);
-            const view = this.componentRef.viewChild.find(child => child.selector === node.templateRefName.name);
+        const elementStack = contextStack.copyStack();
+        const elementScope = isHTMLComponent(element) ? element._viewScope : elementStack.pushBlockReactiveScopeFor({ 'this': element });
+        elementStack.pushScope(elementScope);
+        const subscriptions = [];
+        if (node.attributeDirectives?.length) {
+            node.attributeDirectives.forEach(directiveNode => {
+                const directiveRef = ClassRegistryProvider.getDirectiveRef(directiveNode.name);
+                if (directiveRef && directiveRef.modelClass.prototype instanceof AttributeDirective) {
+                    const directive = new directiveRef.modelClass(element);
+                    const stack = contextStack.copyStack();
+                    stack.pushBlockReactiveScopeFor({ 'this': directive });
+                    const directiveSubscriptions = this.initDirectiveAttributes(directive, directiveNode, stack);
+                    subscriptions.push(...directiveSubscriptions);
+                    if (isOnInit(directive)) {
+                        directive.onInit();
+                    }
+                }
+            });
+        }
+        const attributesSubscriptions = this.initAttribute(element, node, elementStack);
+        subscriptions.push(...attributesSubscriptions);
+        const eventName = getInputEventName(element);
+        let listener;
+        if (eventName) {
+            const inputScope = elementScope.getScopeOrCreat('this');
+            listener = (event) => inputScope.emit('value', element.value);
+            element.addEventListener(eventName, listener);
+        }
+        const removeSubscription = this.nativeElementMutation.subscribeOnRemoveNode(parentNode, element, () => {
+            removeSubscription.unsubscribe();
+            listener && element.removeEventListener(eventName, listener);
+            subscriptions.forEach(subscription => subscription.unsubscribe());
+        });
+        const templateRefName = node.templateRefName;
+        if (templateRefName) {
+            Reflect.set(this.view, templateRefName.name, element);
+            const view = this.componentRef.viewChild.find(child => child.selector === templateRefName.name);
             if (view) {
                 Reflect.set(this.view._model, view.modelName, element);
             }
         }
         if (node.children) {
             for (const child of node.children) {
-                this.appendChildToParent(element, child, contextStack, element);
+                this.appendChildToParent(element, child, elementStack, element);
             }
         }
         return element;
     }
     initAttribute(element, node, contextStack) {
-        if (node.attributes) {
+        const subscriptions = [];
+        if (node.attributes?.length) {
             node.attributes.forEach(attr => {
                 const isAttr = hasAttr(element, attr.name);
                 if (isAttr) {
@@ -278,17 +312,21 @@ export class ComponentRender {
                 }
             });
         }
-        if (node.twoWayBinding) {
+        if (node.twoWayBinding?.length) {
             node.twoWayBinding.forEach(attr => {
-                this.bind2Way(element, attr, contextStack);
+                const sub = attr.expression.subscribe(contextStack);
+                subscriptions.push(...sub);
+                attr.expression.get(contextStack);
             });
         }
-        if (node.inputs) {
+        if (node.inputs?.length) {
             node.inputs.forEach(attr => {
-                this.bind1Way(element, attr, contextStack);
+                const sub = attr.expression.subscribe(contextStack, attr.pipelineNames);
+                subscriptions.push(...sub);
+                attr.expression.get(contextStack);
             });
         }
-        if (node.outputs) {
+        if (node.outputs?.length) {
             node.outputs.forEach(event => {
                 let listener;
                 if (typeof event.value === 'string') {
@@ -304,27 +342,35 @@ export class ComponentRender {
                 element.addEventListener(event.name, listener);
             });
         }
-        if (node.templateAttrs) {
+        if (node.templateAttrs?.length) {
             node.templateAttrs.forEach(attr => {
-                this.bind1Way(element, attr, contextStack);
+                const sub = attr.expression.subscribe(contextStack);
+                subscriptions.push(...sub);
+                attr.expression.get(contextStack);
             });
         }
+        return subscriptions;
     }
     initDirectiveAttributes(directive, node, contextStack) {
-        if (node.attributes) {
+        const subscriptions = [];
+        if (node.attributes?.length) {
             node.attributes.forEach(attr => Reflect.set(directive, attr.name, attr.value));
         }
-        if (node.twoWayBinding) {
+        if (node.twoWayBinding?.length) {
             node.twoWayBinding.forEach(attr => {
-                this.bind2Way(directive, attr, contextStack);
+                const sub = attr.expression.subscribe(contextStack);
+                subscriptions.push(...sub);
+                attr.expression.get(contextStack);
             });
         }
-        if (node.inputs) {
+        if (node.inputs?.length) {
             node.inputs.forEach(attr => {
-                this.bind1Way(directive, attr, contextStack);
+                const sub = attr.expression.subscribe(contextStack, attr.pipelineNames);
+                subscriptions.push(...sub);
+                attr.expression.get(contextStack);
             });
         }
-        if (node.outputs) {
+        if (node.outputs?.length) {
             node.outputs.forEach(event => {
                 const listener = ($event) => {
                     const stack = contextStack.copyStack();
@@ -334,97 +380,14 @@ export class ComponentRender {
                 directive[event.name].subscribe(listener);
             });
         }
-        if (node.templateAttrs) {
+        if (node.templateAttrs?.length) {
             node.templateAttrs.forEach(attr => {
-                this.bind1Way(directive, attr, contextStack);
-            });
-        }
-    }
-    bind1Way(element, attr, contextStack) {
-        const callback = () => {
-            attr.expression.get(contextStack);
-        };
-        this.subscribeExpressionNode(attr.expression, contextStack, callback, element, attr.name, attr.expressionEvent);
-        callback();
-    }
-    subscribeExpressionNode(node, contextStack, callback, object, attrName, events) {
-        events ??= node.events();
-        const scopeMap = findScopeMap(events, contextStack);
-        scopeMap.forEach((scope, eventName) => {
-            const context = scope.getContext();
-            if (context) {
-                if (scope instanceof AsyncPipeProvider) {
-                    const pipe = contextStack.get(eventName);
-                    subscribe1way(pipe, eventName, callback, object, attrName);
-                    if (isOnDestroy(pipe)) {
-                        this.view._model.subscribeModel('destroy', () => {
-                            if (isModel(pipe)) {
-                                pipe.emitChangeModel('destroy');
-                            }
-                            pipe.onDestroy();
-                        });
-                    }
-                    const pipeContext = {};
-                    pipeContext[eventName] = (value, ...args) => pipe.transform(value, ...args);
-                    contextStack.pushBlockScopeFor(pipeContext);
-                }
-                else if (!(scope instanceof PipeProvider)) {
-                    subscribe1way(context, eventName, callback, object, attrName);
-                }
-            }
-        });
-    }
-    bind2Way(element, attr, contextStack) {
-        const callback1 = () => {
-            attr.expression.get(contextStack);
-        };
-        const callback2 = () => {
-            attr.callbackExpression.get(contextStack);
-        };
-        const scopeMap = findScopeMap(attr.expressionEvent, contextStack);
-        scopeMap.forEach((scope, eventName) => {
-            const context = scope.getContext();
-            if (context) {
-                if (scope instanceof AsyncPipeProvider) {
-                    const pipe = contextStack.get(eventName);
-                    subscribe2way(pipe, eventName, callback1, element, attr.name, callback2);
-                    if (isOnDestroy(pipe)) {
-                        this.view._model.subscribeModel('destroy', () => {
-                            if (isModel(pipe)) {
-                                pipe.emitChangeModel('destroy');
-                            }
-                            pipe.onDestroy();
-                        });
-                    }
-                    const pipeContext = {};
-                    pipeContext[eventName] = (value, ...args) => pipe.transform(value, ...args);
-                    contextStack.pushBlockScopeFor(pipeContext);
-                }
-                else if (!(scope instanceof PipeProvider)) {
-                    subscribe2way(context, eventName, callback1, element, attr.name, callback2);
-                }
-            }
-        });
-        callback1();
-        if (element instanceof StructuralDirective) {
-            return;
-        }
-        const changeEventName = getChangeEventName(element, attr.name);
-        if ((changeEventName === 'input' || changeEventName === 'change')
-            && isModel(element)) {
-            element.addEventListener(changeEventName, () => {
-                element.emitChangeModel(attr.name);
-            });
-        }
-        else if (isHTMLComponent(element)) {
-        }
-        else {
-            this.nativeElementMutation.subscribe(element, attr.name, () => {
-                if (isModel(element)) {
-                    element.emitChangeModel(attr.name);
-                }
+                const sub = attr.expression.subscribe(contextStack);
+                subscriptions.push(...sub);
+                attr.expression.get(contextStack);
             });
         }
+        return subscriptions;
     }
 }
 //# sourceMappingURL=render.js.map