@adaas/are 0.0.2 → 0.0.4

package/src/engines/html/AreHTML.compiler.ts

@@ -1,657 +0,0 @@
-import { A_Caller, A_Container, A_Error, A_Feature, A_Inject, A_Scope, ASEID } from "@adaas/a-concept";
-import { A_Frame } from "@adaas/a-frame";
-import { AreCompiler } from "@adaas/are/compiler";
-import { AreIndex } from "@adaas/are/index";
-import { AreScene } from "@adaas/are/scene";
-import { AreNode } from "@adaas/are/node";
-import {
-    AreSceneInstructionFeatures,
-    AttachRootNodeInstruction,
-    MountNodeInstruction,
-    UnmountNodeInstruction,
-    AddStyleInstruction,
-    AttachListenerInstruction,
-    AddAttributeInstruction,
-    ReplaceInterpolationInstruction,
-    AddDirectiveInstruction,
-} from "@adaas/are/scene-instruction";
-import { AreSyntax } from "@adaas/are/syntax";
-import { A_ExecutionContext } from "@adaas/a-utils/a-execution";
-import { A_Logger } from "@adaas/a-utils/a-logger";
-
-
-
-@A_Frame.Component({
-    namespace: 'A-ARE',
-    name: 'AreHTMLCompiler',
-    description: 'HTML-specific compiler for A-Concept Rendering Engine (ARE) components, extending the base AreCompiler to handle HTML templates, styles, and rendering logic tailored for web environments.'
-})
-export class AreHTMLCompiler extends AreCompiler {
-
-
-
-    // ==================================================================================
-    // ========================= COMPONENT METHODS =======================================
-    // ==================================================================================
-    /**
-     * Get DOM element by string path from root element
-     * Works with paths generated by the string-based parser
-     */
-    @A_Frame.Method({
-        description: 'Get DOM element corresponding to the given path from the root element.'
-    })
-    getElementByPath(
-        root: Element,
-        path?: string
-    ): Element | undefined {
-
-        if (path === undefined || path.trim() === '') {
-            return root;
-        }
-
-        const indices = path.split('.').map(index => parseInt(index, 10));
-        let current: Element | undefined = root;
-
-        for (const index of indices) {
-            if (!current) {
-                return undefined;
-            }
-            // Get only element children (not text nodes, comments, etc.)
-
-            const elementChildren = Array.from(current.childNodes).filter(child => child.nodeType === Node.ELEMENT_NODE ||
-                child.nodeType === Node.DOCUMENT_NODE || child.nodeType === Node.COMMENT_NODE
-            );
-
-            if (index >= elementChildren.length) {
-                return undefined;
-            }
-
-            current = elementChildren[index] as Element;
-        }
-        return current;
-    }
-    /**
-     * Get DOM element by AreNode based on its scene path
-     * 
-     * @param node 
-     * @returns 
-     */
-    @A_Frame.Method({
-        description: 'Get DOM element corresponding to the given AreNode based on its scene path.'
-    })
-    getElementByNode(node: AreNode): Element | undefined {
-        const scene = node.scope.resolveFlat<AreScene>(AreScene)!;
-
-        const root = document.getElementById(new ASEID(scene.root.id).id)!;
-
-        return this.getElementByPath(root, scene.path);
-    }
-    /**
-     * Insert DOM element at specified path within root element
-     * 
-     * @param root 
-     * @param path 
-     * @param element 
-     */
-    @A_Frame.Method({
-        description: 'Insert a DOM element at the specified path within the root element.'
-    })
-    insertElementAtPath(
-        root: Element,
-        path: string,
-        element: Element
-    ): void {
-        const parentPath = path.split('.').slice(0, -1).join('.');
-        const parentElement = this.getElementByPath(root, parentPath);
-        const index = parseInt(path.split('.').slice(-1)[0], 10);
-        if (parentElement) {
-            const children = Array.from(parentElement.children).filter(child => child.nodeType === Node.ELEMENT_NODE);
-            if (index >= children.length) {
-                parentElement.appendChild(element);
-            } else {
-                parentElement.insertBefore(element, children[index]);
-            }
-        }
-    }
-    /**
-     * Insert DOM element corresponding to AreNode at its scene path
-     * 
-     * @param node 
-     * @param element 
-     */
-    @A_Frame.Method({
-        description: 'Insert a DOM element corresponding to the given AreNode at its scene path.'
-    })
-    insertElementByNode(
-        node: AreNode,
-        element: Element
-    ): void {
-        const scene = node.scope.resolveFlat<AreScene>(AreScene)!;
-        const root = document.getElementById(new ASEID(scene.root.id).id)!;
-        this.insertElementAtPath(root, scene.path, element);
-    }
-    /**
-     * Index the elements of the given AreNode within its scene
-     * 
-     * @param node 
-     */
-    @A_Frame.Method({
-        description: 'Indexes the elements of the given AreNode within its scene, preserving the original markup structure.'
-    })
-    index(
-        node: AreNode
-    ) {
-        const index = node.scope.resolveFlat<AreIndex>(AreIndex)!;
-        const scene = node.scope.resolveFlat<AreScene>(AreScene)!;
-
-        index.clear();
-        scene.reset();
-
-        // Use a position-based approach that maps DOM paths to original markup exactly
-        const tempDiv = document.createElement('div');
-        tempDiv.innerHTML = node.template;
-
-        // Create a mapping of DOM paths to original markup using DOM traversal
-        const markupMap = this.createPositionBasedMarkupMap(node.template);
-
-        this.indexElementsFromDOM(tempDiv, index, [], markupMap);
-    }
-
-    /**
-     * Create a position-based mapping by parsing the original template with DOM
-     * This ensures 1:1 correspondence between DOM structure and original markup
-     */
-    private createPositionBasedMarkupMap(template: string): Map<string, string> {
-        const markupMap = new Map<string, string>();
-        const originalDiv = document.createElement('div');
-        originalDiv.innerHTML = template;
-
-        // Traverse the original DOM and map each position to its outerHTML
-        this.mapDOMPositions(originalDiv, [], markupMap);
-
-        return markupMap;
-    }
-
-    /**
-     * Recursively map DOM positions to their exact original markup
-     */
-    private mapDOMPositions(
-        parentElement: Element,
-        parentPath: number[],
-        markupMap: Map<string, string>
-    ): void {
-        const children = Array.from(parentElement.children);
-
-        for (let i = 0; i < children.length; i++) {
-            const element = children[i];
-            const currentPath = [...parentPath, i];
-            const pathKey = currentPath.join('.');
-
-            // Store the exact outerHTML for this position
-            markupMap.set(pathKey, element.outerHTML);
-
-            // Recursively process children
-            // if (element.children.length > 0) {
-            //     this.mapDOMPositions(element, currentPath, markupMap);
-            // }
-        }
-    }
-
-    /**
-     * Index elements using actual DOM structure with position-based markup mapping
-     */
-    private indexElementsFromDOM(
-        parentElement: Element,
-        index: AreIndex,
-        parentPath: number[],
-        markupMap: Map<string, string>
-    ): void {
-        const children = Array.from(parentElement.children);
-
-        for (let i = 0; i < children.length; i++) {
-            const element = children[i];
-            const currentPath = [...parentPath, i];
-            const pathKey = currentPath.join('.');
-
-            // Get the exact markup for this position from our mapping
-            const originalMarkup = markupMap.get(pathKey);
-
-
-            // Create AreNode with preserved original markup
-            const areNode = new AreNode({
-                scope: index.name,
-                component: element.tagName.toLowerCase(),
-                markup: originalMarkup || element.outerHTML,
-                template: element.innerHTML,
-            });
-
-            // Add to index
-            index.add(areNode, currentPath.join('.'));
-
-            // Recursively process children
-            // if (element.children.length > 0) {
-            //     this.indexElementsFromDOM(element, index, currentPath, markupMap);
-            // }
-        }
-    }
-
-
-
-
-
-
-
-
-    @A_Feature.Extend({
-        name: AreSceneInstructionFeatures.Apply,
-        scope: [AttachRootNodeInstruction]
-    })
-    applyAttachRootNodeInstruction(
-        @A_Inject(A_Caller) instruction: AttachRootNodeInstruction,
-
-        @A_Inject(A_Logger) logger?: A_Logger,
-    ) {
-        const node = instruction.node;
-
-        // ensure root identified
-        const rootElement = document.getElementById(node.id);
-
-        if (!rootElement) {
-            logger?.warning(`Root element with id <${node.id}> not found in DOM.`);
-            return;
-        }
-        rootElement.innerHTML = node.template;
-
-        rootElement.setAttribute('aseid', node.aseid.toString());
-
-    }
-
-
-
-    @A_Feature.Extend({
-        name: AreSceneInstructionFeatures.Apply,
-        scope: [MountNodeInstruction]
-    })
-    applyMountNodeInstruction(
-        @A_Inject(A_Caller) instruction: MountNodeInstruction,
-        @A_Inject(A_ExecutionContext) context: A_ExecutionContext<{
-            element: Element,
-            mountPoint: Element,
-            content: AreScene,
-        }>,
-        @A_Inject(AreSyntax) syntax: AreSyntax,
-
-        @A_Inject(A_Logger) logger?: A_Logger,
-    ) {
-        try {
-
-            const node = instruction.node;
-            const scene = instruction.scene;
-
-            if (syntax.isCustomNode(node)) {
-
-                logger?.debug('red', scene.debugPrefix + `Mounting Node <${node.aseid.entity}> ASEID: ${node.aseid.toString()} at path `);
-                const wrapper = document.createElement('div');
-
-                wrapper.setAttribute('aseid', node.aseid.toString());
-
-                wrapper.innerHTML = node.template;
-
-                const element = this.getElementByNode(node);
-
-                // Replace the placement with the rendered content
-                if (!element) {
-                    this.insertElementByNode(node, wrapper);
-                } else {
-                    (element).replaceWith(wrapper);
-                }
-            }
-
-        } catch (error) {
-            logger?.error(error)
-        }
-    }
-
-
-
-    @A_Feature.Extend({
-        name: AreSceneInstructionFeatures.Apply,
-        scope: [UnmountNodeInstruction]
-    })
-    applyUnmountNodeInstruction(
-        @A_Inject(A_Caller) instruction: UnmountNodeInstruction,
-        @A_Inject(A_ExecutionContext) context: A_ExecutionContext<{
-            element: Element,
-            mountPoint: Element,
-            content: AreScene,
-        }>,
-
-        @A_Inject(A_Logger) logger?: A_Logger,
-    ) {
-
-        const node = instruction.node;
-        const scene = instruction.scene;
-        const element = this.getElementByNode(node)!;
-
-        logger?.debug('red', scene.debugPrefix + `Unmounting Node <${node.aseid.entity}> ASEID: ${node.aseid.toString()}`);
-
-        try {
-            // element.remove();
-
-            element.replaceWith(document.createComment(` Unmounted Node <${node.aseid.entity}> ASEID: ${node.aseid.toString()} `));
-
-            node.unmount();
-        } catch (error) {
-            logger?.error(error)
-        }
-    }
-
-
-    @A_Feature.Extend({
-        name: AreSceneInstructionFeatures.Apply,
-        scope: [AddStyleInstruction]
-    })
-    applyAddStyleInstruction(
-        @A_Inject(A_Caller) instruction: AddStyleInstruction,
-        @A_Inject(A_ExecutionContext) context: A_ExecutionContext<{
-            element: Element,
-            mountPoint: Element,
-            content: AreScene,
-        }>,
-
-
-        @A_Inject(A_Logger) logger?: A_Logger,
-    ) {
-
-        try {
-
-
-            const node = instruction.node;
-            const scene = instruction.scene;
-            const styles = instruction.params?.styles || '';
-
-            logger?.debug('green', scene.debugPrefix + `Applying styles for Node <${node.aseid.entity}> ASEID: ${node.aseid.toString()}`);
-
-            const styleElementId = `a-style-${node.aseid.entity}`;
-            let styleElement = document.querySelector(`#${styleElementId}`) as HTMLStyleElement | null;
-
-            if (!styleElement) {
-                styleElement = document.createElement('style');
-                styleElement.id = styleElementId;
-                document.head.appendChild(styleElement);
-            }
-            styleElement.innerHTML = styles;
-
-        } catch (error) {
-            logger?.error(error)
-        }
-    }
-
-
-
-    @A_Feature.Extend({
-        name: AreSceneInstructionFeatures.Apply,
-        scope: [AttachListenerInstruction]
-    })
-    applyAttachListenerInstruction(
-        @A_Inject(A_Caller) instruction: AttachListenerInstruction,
-        @A_Inject(A_ExecutionContext) context: A_ExecutionContext<{
-            element: Element,
-            mountPoint: Element,
-            content: AreScene,
-        }>,
-
-        @A_Inject(A_Logger) logger?: A_Logger,
-    ) {
-
-        const node = instruction.node;
-        const scene = instruction.scene;
-        const content = context.get('content')!;
-
-        const element = this.getElementByNode(instruction.node)!;
-        const mountPoint = context.get('mountPoint')!;
-
-        logger?.debug('green', scene.debugPrefix + `Attaching listener '${instruction.listener.name}' for target <${node.aseid.entity}> ASEID: ${node.aseid.toString()}`);
-
-        element.addEventListener(instruction.listener.name, instruction.callback as EventListener);
-    }
-
-
-    @A_Feature.Extend({
-        name: AreSceneInstructionFeatures.Apply,
-        scope: [AddAttributeInstruction]
-    })
-    applyAddAttributeInstruction(
-        @A_Inject(A_Caller) instruction: AddAttributeInstruction,
-        @A_Inject(A_ExecutionContext) context: A_ExecutionContext<{
-            element: Element,
-            mountPoint: Element,
-            content: AreScene,
-        }>,
-        @A_Inject(A_Scope) scope: A_Scope,
-
-        @A_Inject(A_Logger) logger?: A_Logger,
-    ) {
-
-        const node = instruction.node;
-        const scene = instruction.scene;
-        const content = context.get('content')!;
-
-        const element = this.getElementByNode(node)!;
-
-        logger?.debug('green', scene.debugPrefix + `Setting attribute '${instruction.name}'='${instruction.value}' for target <${node.aseid.entity}> ASEID: ${node.aseid.toString()}`, element);
-
-        element.setAttribute(instruction.name, instruction.value);
-    }
-
-
-    @A_Feature.Extend({
-        name: AreSceneInstructionFeatures.Revert,
-        scope: [ReplaceInterpolationInstruction]
-    })
-    revertInstruction(
-        @A_Inject(A_Caller) instruction: ReplaceInterpolationInstruction,
-    ) {
-        this.interpolationTextNodes.delete(instruction.aseid.toString());
-    }
-
-
-    interpolationTextNodes: Map<string, Text> = new Map();
-
-    @A_Feature.Extend({
-        name: AreSceneInstructionFeatures.Apply,
-        scope: [ReplaceInterpolationInstruction]
-    })
-    applyReplaceInterpolationInstruction(
-        @A_Inject(A_Caller) instruction: ReplaceInterpolationInstruction,
-        @A_Inject(A_ExecutionContext) context: A_ExecutionContext<{
-            element: Element,
-            mountPoint: Element,
-            content: AreScene,
-        }>,
-        @A_Inject(A_Scope) scope: A_Scope,
-        @A_Inject(AreSyntax) syntax: AreSyntax,
-
-        @A_Inject(A_Logger) logger?: A_Logger,
-    ) {
-
-        const node = instruction.node;
-        const scene = instruction.scene;
-        const element = this.getElementByNode(node)!;
-
-        logger?.debug('magenta', scene.debugPrefix + `Replacing interpolation '${instruction.interpolation.name}' with value '${instruction.value}' for target <${node.aseid.entity}>`, instruction);
-
-        const textNode = this.interpolationTextNodes.get(instruction.aseid.toString());
-
-        if (textNode) {
-            textNode.nodeValue = instruction.value;
-        } else {
-
-            const treeTextNodesWalker = document.createTreeWalker(
-                element,
-                NodeFilter.SHOW_TEXT,
-                {
-                    acceptNode: (node) => {
-                        if (node.nodeValue && node.nodeValue.includes(instruction.interpolation.raw)) {
-                            return NodeFilter.FILTER_ACCEPT;
-                        }
-                        return NodeFilter.FILTER_REJECT;
-                    }
-                },
-            );
-
-            const foundNode = treeTextNodesWalker.nextNode() as Text | null;
-
-
-            //  then I have to split this node into multiple text nodes
-            if (foundNode) {
-                const parts = foundNode.nodeValue!.split(instruction.interpolation.raw);
-
-                const parent = foundNode.parentNode;
-
-                if (parent) {
-                    for (let i = 0; i < parts.length; i++) {
-                        const part = parts[i];
-
-                        if (part) {
-                            const textNodePart = document.createTextNode(part);
-                            parent.insertBefore(textNodePart, foundNode);
-                        }
-
-                        if (i < parts.length - 1) {
-                            const valueNode = document.createTextNode(instruction.value);
-                            parent.insertBefore(valueNode, foundNode);
-
-                            // store reference to this text node for future updates
-                            this.interpolationTextNodes.set(instruction.aseid.toString(), valueNode);
-                        }
-                    }
-
-                    // remove the original node
-                    parent.removeChild(foundNode);
-                }
-            }
-        }
-    }
-
-
-
-
-    @A_Feature.Extend({
-        name: AreSceneInstructionFeatures.Init,
-        scope: [AddDirectiveInstruction]
-    })
-    initAddDirectiveInstruction(
-        @A_Inject(A_Caller) instruction: AddDirectiveInstruction,
-
-        @A_Inject(A_Scope) scope: A_Scope,
-
-        @A_Inject(A_Logger) logger?: A_Logger,
-    ) {
-        const node = instruction.node;
-        const scene = node.scope.resolveFlat<AreScene>(AreScene)!;
-        const parentScene = instruction.scene;
-
-        logger?.debug('green', scene.debugPrefix + `Initializing directive '${instruction.directive.name}' for Node <${node.aseid.entity}> ASEID: ${node.aseid.toString()}`, scene, parentScene);
-
-
-        switch (instruction.directive.name) {
-            case '$if': {
-                const mountInstruction = new MountNodeInstruction(node, scene.path);
-                const unmountInstruction = new UnmountNodeInstruction(node, scene.path);
-
-
-                if (instruction.value) {
-                    parentScene.unPlan(unmountInstruction);
-
-                    parentScene.plan(mountInstruction);
-                    parentScene.dropState(mountInstruction);
-                } else {
-                    parentScene.unPlan(mountInstruction);
-
-                    parentScene.plan(unmountInstruction);
-                    parentScene.dropState(unmountInstruction);
-                }
-
-                // switch (true) {
-                //     case !instruction.value && !!parentScene.getState(mountInstruction):
-                //         parentScene.unPlan(mountInstruction);
-
-                //         parentScene.plan(unmountInstruction);
-                //         parentScene.dropState(unmountInstruction);
-
-                //         break;
-                //     case !instruction.value && !parentScene.getState(mountInstruction):
-
-                //         parentScene.unPlan(mountInstruction);
-
-                //         break;
-                //     case instruction.value && !!parentScene.getState(unmountInstruction):
-
-                //         parentScene.unPlan(unmountInstruction);
-
-                //         parentScene.plan(mountInstruction);
-                //         parentScene.dropState(mountInstruction);
-                //         break;
-                //     case instruction.value && !parentScene.getState(unmountInstruction):
-
-                //         parentScene.unPlan(unmountInstruction);
-                //         break;
-                //     default:
-                //         break;
-                // }
-
-                break;
-            }
-            default:
-                logger?.warning(`Unknown directive '${instruction.directive.name}' for Node <${node.type}> ASEID: ${node.aseid.toString()}`);
-        }
-
-
-
-
-        // Directives may have async initialization logic in future
-    }
-
-
-    @A_Feature.Extend({
-        name: AreSceneInstructionFeatures.Apply,
-        scope: [AddDirectiveInstruction]
-    })
-    applyAddDirectiveInstruction(
-        @A_Inject(A_Caller) instruction: AddDirectiveInstruction,
-        @A_Inject(A_ExecutionContext) context: A_ExecutionContext<{
-            element: Element,
-            mountPoint: Element,
-            content: AreScene,
-        }>,
-        @A_Inject(A_Scope) scope: A_Scope,
-
-        @A_Inject(A_Logger) logger?: A_Logger,
-    ) {
-
-        const node = instruction.node;
-        const scene = instruction.scene;
-        const element = this.getElementByNode(node);
-
-        try {
-
-            logger?.debug('green', scene.debugPrefix + `Applying directive '${instruction.directive.name}' for Node <${node.aseid.entity}> ASEID: ${node.aseid.toString()}`, instruction);
-
-            // switch (instruction.directive.name) {
-            //     case '$if': {
-            //         if (!instruction.value && element) {
-            //             element.replaceWith(document.createComment(`$if directive removed node <${node.aseid.entity}>`));
-            //         }
-            //         break;
-            //     }
-            //     default:
-            //         logger?.warning('yellow', scene.debugPrefix + `Unknown directive '${instruction.directive.name}' for Node <${node.aseid.entity}> ASEID: ${node.aseid.toString()}`);
-            // }
-
-            // Directive application logic goes here
-        } catch (error) {
-            logger?.error(error)
-        }
-    }
-}