@adaas/are 0.0.2

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

@@ -0,0 +1,657 @@
+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)
+        }
+    }
+}