@adaas/are 0.0.2

package/src/lib/AreSceneInstruction/types/AddStyleProperty.instruction.ts

@@ -0,0 +1,32 @@
+import type  { AreNode } from "@adaas/are/node";
+import { AreSceneInstruction } from "../AreSceneInstruction.entity";
+
+export class AddStylePropertyInstruction extends AreSceneInstruction<{
+    property: string;
+    value: string;
+}> {
+
+    get styles(): string {
+        return this.params!.property;
+    }
+
+    get value(): string {
+        return this.params!.value;
+    }
+
+    constructor(
+        node: AreNode,
+        property: string,
+        value: string
+    ) {
+        super({
+            id: [property, node],
+            action: 'add-style',
+            node,
+            params: {
+                property,
+                value,
+            }
+        });
+    }
+}

package/src/lib/AreSceneInstruction/types/AttachListener.instruction.ts

@@ -0,0 +1,57 @@
+import type { AreNode } from "@adaas/are/node";
+import type { AreListener } from "@adaas/are/syntax";
+import { AreSceneInstruction } from "../AreSceneInstruction.entity";
+import { AreEvent } from "@adaas/are/event";
+
+export class AttachListenerInstruction extends AreSceneInstruction<{
+    target: AreNode;
+    listener: AreListener;
+}> {
+
+    private _callback!: (e: any) => Promise<void>;
+
+    get listener(): AreListener {
+        return this.params!.listener;
+    }
+
+    get event(): string {
+        return this.params!.listener.handler;
+    }
+
+
+    get target(): AreNode {
+        return this.params!.target;
+    }
+
+    get callback(): (e: any) => Promise<void> {
+        return this._callback;
+    }
+
+
+
+    constructor(
+        node: AreNode,
+        target: AreNode,
+        listener: AreListener,
+    ) {
+        super({
+            id: [node, listener.name],
+            action: 'listener',
+            node,
+            params: {
+                target,
+                listener,
+            }
+        });
+
+        this._callback = async (e) => {
+            const newEvent = new AreEvent(listener.handler, {
+                event: listener.name,
+                data: e
+            });
+
+            await this.target.emit(newEvent);
+
+        }
+    }
+}

package/src/lib/AreSceneInstruction/types/AttachRootNode.instruction.ts

@@ -0,0 +1,23 @@
+import type { AreNode } from "@adaas/are/node";
+import { AreSceneInstruction } from "../AreSceneInstruction.entity";
+
+
+
+export class AttachRootNodeInstruction extends AreSceneInstruction<{}> {
+
+
+    get id(): string {
+        return this.node.aseid.toString();
+    }
+
+    constructor(
+        node: AreNode,
+    ) {
+        super({
+            id: [node],
+            action: 'attach-root-node',
+            node,
+            params: {}
+        });
+    }
+}

package/src/lib/AreSceneInstruction/types/MountNode.instruction.ts

@@ -0,0 +1,29 @@
+import type { AreNode } from "@adaas/are/node";
+import { AreSceneInstruction } from "../AreSceneInstruction.entity";
+
+
+
+
+export class MountNodeInstruction extends AreSceneInstruction<{
+    path: string;
+}> {
+
+
+    get path(): string {
+        return this.params!.path;
+    }
+
+    constructor(
+        node: AreNode,
+        path: string,
+    ) {
+        super({
+            id: [node],
+            action: 'mount-node',
+            node,
+            params: {
+                path
+            }
+        });
+    }
+}

package/src/lib/AreSceneInstruction/types/ReplaceInterpolation.instruction.ts

@@ -0,0 +1,45 @@
+import { AreSceneInstruction } from "../AreSceneInstruction.entity";
+import type { AreNode } from "@adaas/are/node";
+import type { AreInterpolation } from "@adaas/are/syntax";
+
+
+export class ReplaceInterpolationInstruction extends AreSceneInstruction<{
+    interpolation: AreInterpolation;
+    value: string;
+    prevValue?: string;
+}> {
+
+    get placement() {
+        return this.params?.prevValue || this.interpolation.raw;
+    }
+
+    get position() {
+        return this.interpolation.position;
+    }
+
+    get interpolation(): AreInterpolation {
+        return this.params!.interpolation;
+    }
+
+    get value(): string {
+        return this.params?.value || '';
+    }
+
+    constructor(
+        node: AreNode,
+        interpolation: AreInterpolation,
+        value: string,
+        prevValue?: string,
+    ) {
+        super({
+            id: [node, interpolation],
+            action: 'replace-interpolation',
+            node: node,
+            params: {
+                interpolation,
+                prevValue: prevValue,
+                value,
+            }
+        });
+    }
+}

package/src/lib/AreSceneInstruction/types/UnmountNode.instruction.ts

@@ -0,0 +1,22 @@
+import type { AreNode } from "@adaas/are/node";
+import { AreSceneInstruction } from "../AreSceneInstruction.entity";
+
+
+export class UnmountNodeInstruction extends AreSceneInstruction<{
+    path: string
+}> {
+
+    constructor(
+        node: AreNode,
+        path: string
+    ) {
+        super({
+            id: [node],
+            action: 'unmount-node',
+            node,
+            params: {
+                path
+            }
+        });
+    }
+}

package/src/lib/AreSceneInstruction/types/index.ts

@@ -0,0 +1,10 @@
+export { AddAttributeInstruction } from './AddAttribute.instruction';
+export { AddDirectiveInstruction } from './AddDirective.instruction';
+export { AddStyleInstruction } from './AddStyle.instruction';
+export { AddStylePropertyInstruction } from './AddStyleProperty.instruction';
+export { AttachListenerInstruction } from './AttachListener.instruction';
+export { AttachRootNodeInstruction } from './AttachRootNode.instruction';
+export { MountNodeInstruction } from './MountNode.instruction';
+export { ReplaceInterpolationInstruction } from './ReplaceInterpolation.instruction';
+export { UnmountNodeInstruction } from './UnmountNode.instruction';
+

package/src/lib/AreSlot/AreSlot.component.ts

@@ -0,0 +1,48 @@
+import { Are } from "../AreComponent/Are.component";
+
+
+
+
+export class AreSlot extends Are {
+
+
+
+    async template() {
+        // return `<div>Are Slot Component</div>`;
+    }
+
+
+
+    // @A_Feature.Extend()
+    // async [A_SignalVectorFeatures.Next](
+    //     @A_Inject(A_SignalVector) vector: A_SignalVector
+    // ) {
+    //     // Emit signals if needed
+
+    //     console.log('AreSlot Signal Vector Emitted:', vector);
+    // }
+
+
+
+    // @A_Feature.Extend({
+    //     name: AreNodeFeatures.onCompile,
+    //     scope: [AreNode]
+    // })
+    // async compile(
+    //     @A_Inject(A_Caller) node: AreNode,
+    //     @A_Inject(AreScene) scene: AreScene,
+    //     @A_Inject(A_Logger) logger: A_Logger,
+    //     @A_Inject(A_SignalState) signalState?: A_SignalState,
+    // ) {
+
+    //     const vector = await signalState?.toVector().toDataVector()
+
+    //     logger.debug('red',
+    //         '================================================================',
+    //         `Compiling AreSlot Component at Scene: <${scene.name}>`,
+    //         '================================================================',
+    //         vector
+    //     )
+    // }
+
+}

package/src/lib/AreStore/AreStore.context.ts

@@ -0,0 +1,36 @@
+import { ASEID } from "@adaas/a-concept";
+import { A_Frame } from "@adaas/a-frame";
+import { A_ExecutionContext } from "@adaas/a-utils/a-execution";
+
+
+
+@A_Frame.Fragment({
+    description: "Are Store uses to keep AreNode related information for interpolations, runtime data, etc. This object can be injected to manipulate with data at runtime.",
+})
+export class AreStore<
+    T extends Record<string, any> = Record<string, any>
+> extends A_ExecutionContext<T> {
+
+    constructor(aseid: ASEID) {
+        super(aseid.toString());
+    }
+
+
+
+    set<K extends keyof T>(values: Partial<T>): this 
+    set<K extends keyof T>(key: K, value: T[K]): this 
+    set<K extends keyof T>(
+        param1: K | Partial<T>,
+        param2?: T[K]
+    ): this {
+        if (typeof param1 === 'object') {
+            Object.entries(param1).forEach(([key, value]) => {
+                super.set(key as K, value as T[K]);
+            });
+        } else if (param2 !== undefined) {
+            super.set(param1 as K, param2);
+        }
+        return this;
+    }
+
+}

package/src/lib/AreStore/index.ts

@@ -0,0 +1 @@
+export { AreStore } from './AreStore.context'

package/src/lib/AreSyntax/AreSyntax.component.ts

@@ -0,0 +1,378 @@
+import { A_Component, A_Context, A_Error } from "@adaas/a-concept";
+import { A_Frame } from "@adaas/a-frame";
+import { AreDirective, AreInterpolation, AreAttribute, AreListener } from "./AreSyntax.types";
+import { AreSyntaxContext } from "./AreSyntax.context";
+import { AreNode } from "@adaas/are/node";
+import type { AreStore } from "@adaas/are/store";
+
+
+@A_Frame.Component({
+    namespace: 'A-ARE',
+    name: 'AreSyntax',
+    description: 'Context component that defines the syntax rules and structures for the A-Concept Rendering Engine (ARE). It provides mechanisms for parsing and interpreting templates, attributes, directives, interpolations, and event listeners, enabling dynamic and interactive UI rendering within the ARE framework.'
+})
+export class AreSyntax extends A_Component {
+
+
+    get config(): AreSyntaxContext {
+        return A_Context.scope(this).resolveFlat<AreSyntaxContext>(AreSyntaxContext)!;
+    }
+
+
+    /**
+     * Determines if a tag is a root node
+     * 
+     * @param node 
+     * @returns 
+     */
+    @A_Frame.Method({
+        description: 'Determines if a given AreNode is a root node based on its entity type.'
+    })
+    isRootNode(node: AreNode): boolean {
+        return node.aseid.entity.toLowerCase() === this.config.rootTag;
+    }
+
+    /**
+     * Determines if a tag is a custom component or standard HTML
+     * 
+     * @param node 
+     * @returns 
+     */
+    @A_Frame.Method({
+        description: 'Determines if a given AreNode represents a custom component as opposed to a standard HTML tag.'
+    })
+    isCustomNode(node: AreNode): boolean {
+        return !this.config.standardTags.has(node.aseid.entity.toLowerCase());
+    }
+
+
+    /**
+     * Extracts root AreNode elements from the document based on the configured root tag.
+     * 
+     * @returns An iterable of AreNode instances representing the root elements.
+     */
+    @A_Frame.Method({
+        description: 'Extracts root AreNode elements from the document based on the configured root tag.'
+    })
+    extractRoots(template: string): AreNode[] {
+        const rootTag = this.config.rootTag;
+        const rootTagRegex = new RegExp(`<${rootTag}([\\s>])`, 'gi');
+        let match: RegExpExecArray | null;
+        const nodes: AreNode[] = [];
+
+        while ((match = rootTagRegex.exec(template)) !== null) {
+            const startIndex = match.index;
+            const endTag = `</${rootTag}>`;
+            const endIndex = template.indexOf(endTag, startIndex);
+
+            if (endIndex === -1) {
+                throw new A_Error(`Missing closing tag for <${rootTag}> starting at index ${startIndex}`);
+            }
+
+            const attributes = this.extractAttributes(template.slice(startIndex, endIndex + endTag.length));
+            let rootId = `auto-root-${startIndex}`;
+            
+            for (let i = 0; i < attributes.length; i++) {
+                if (attributes[i].name === 'id') {
+                    rootId = attributes[i].value;
+                    break;
+                }
+            }
+
+            const markup = template.slice(startIndex, endIndex + endTag.length);
+            const content = markup.slice(rootTag.length + 2, -endTag.length).trim();
+            
+
+            const node = new AreNode({
+                id: rootId,
+                scope: 'are',
+                component: 'are-root',
+                markup: markup,
+                template: content,
+            });
+
+            nodes.push(node);
+        }
+        
+        return nodes;
+    }
+
+
+    /**
+     * Extracts interpolations from template (syntax-agnostic).
+     * 
+     * Simply finds all interpolation patterns and returns their position, raw text, and name.
+     * Works with any template format - HTML, plain text, or any other syntax.
+     * 
+     * Example: `Hello {{name}}, welcome to {{place}}!`
+     * Returns: [
+     *   { raw: "{{name}}", name: "name", position: 6 },
+     *   { raw: "{{place}}", name: "place", position: 26 }
+     * ]
+     * 
+     * @param template - Template string in any format
+     */
+    @A_Frame.Method({
+        description: 'Extracts interpolations from a template string based on the configured interpolation delimiters.'
+    })
+    extractInterpolations(template: string): AreInterpolation[] {
+        const interpolationRegex = new RegExp(`${this.config.interpolationDelimiters[0]}\\s*([a-zA-Z0-9_.$]+)\\s*${this.config.interpolationDelimiters[1]}`, 'g');
+        const interpolations: AreInterpolation[] = [];
+
+        let match: RegExpExecArray | null;
+        while ((match = interpolationRegex.exec(template)) !== null) {
+            interpolations.push({
+                raw: match[0],
+                name: match[1],
+                position: match.index!
+            });
+        }
+        
+        return interpolations;
+    }
+
+    /**
+     * Extracts custom directives from the FIRST/TOP-LEVEL opening tag ONLY.
+     * Directives start with `$`
+     *
+     * Examples:
+     *   $if="condition"
+     *   $show
+     *   $no-update=""
+     * 
+     * Note: This method intentionally ignores nested elements and only processes
+     * the very first opening tag in the provided template string.
+     */
+    @A_Frame.Method({
+        description: 'Extracts custom directives from the first opening tag of a template string.'
+    })
+    extractDirectives(template: string): AreDirective[] {
+        // Trim whitespace to ensure we start at the actual first tag
+        const trimmedTemplate = template.trim();
+
+        // Match ONLY the very first opening tag (anchored with ^)
+        const firstTagMatch = trimmedTemplate.match(
+            /^<([a-zA-Z][^\s/>]*)(\s[^>]*?)?>/
+        );
+
+        if (!firstTagMatch) return [];
+
+        const tag = firstTagMatch[1];
+        const attributesPart = firstTagMatch[2];
+
+        // If no attributes, no directives possible
+        if (!attributesPart) return [];
+
+        /**
+         * Extract directives from the first tag's attributes only.
+         * Matches patterns like:
+         *  $if="condition"
+         *  $show
+         *  $no-update=""
+         */
+        const directiveRegex = new RegExp(
+            `\\s+(\\${this.config.directiveDelimiter}[a-zA-Z0-9_-]+)(?:\\s*=\\s*(?:"([^"]*)"|'([^']*)'))?`,
+            'g'
+        );
+
+        let match: RegExpExecArray | null;
+        const directives: AreDirective[] = [];
+
+        while ((match = directiveRegex.exec(attributesPart)) !== null) {
+            const name = match[1];
+
+            // Optional whitelist support - only apply if whitelist is explicitly provided
+            if (
+                this.config.customDirectives &&
+                this.config.customDirectives.length > 0 &&
+                !this.config.customDirectives.includes(name)
+            ) {
+                continue;
+            }
+
+            const raw = match[0];
+            const value = match[2] ?? match[3];
+            const tagTemplate = firstTagMatch[0]; // Only the first tag
+
+            directives.push({
+                tag,
+                name,
+                raw,
+                value,
+                template: tagTemplate
+            });
+        }
+        
+        return directives;
+    }
+
+
+    /**
+     * Extracts component props from the FIRST opening tag.
+     *
+     * Examples:
+     *   label="Click"
+     *   :label="'Click Me'"
+     *
+     * Excludes:
+     *   @click
+     *   $if
+     */
+    extractAttributes(template: string): AreAttribute[] {
+        // Match first opening tag
+        const firstTagMatch = template.match(
+            /^<([a-zA-Z][^\s/>]*)(\s[^>]*?)?>/
+        );
+
+        if (!firstTagMatch) return [];
+
+        const tag = firstTagMatch[1];
+        const attributesPart = firstTagMatch[2];
+
+        if (!attributesPart) return [];
+
+        /**
+         * Matches:
+         *   label="text"
+         *   :label="'Click'"
+         *
+         * Skips:
+         *   @click
+         *   $if
+         */
+        const propRegex = new RegExp(
+            `\\s+(\\${this.config.bindingDelimiter}?)([a-zA-Z][a-zA-Z0-9._-]*)\\s*=\\s*(?:"([^"]*)"|'([^']*)')`,
+            'g'
+        );
+
+        let match: RegExpExecArray | null;
+        const attributes: AreAttribute[] = [];
+
+        while ((match = propRegex.exec(attributesPart)) !== null) {
+            const isBinding = match[1] === this.config.bindingDelimiter;
+            const name = match[2];
+
+            // Exclude listeners & directives explicitly
+            if (
+                name.startsWith(this.config.listenerDelimiter) ||
+                name.startsWith(this.config.directiveDelimiter)
+            ) {
+                continue;
+            }
+
+            const raw = match[0];
+            const value = match[3] ?? match[4];
+
+            attributes.push({
+                tag,
+                name,
+                raw,
+                value: value || '',
+                binding: isBinding
+            });
+        }
+        
+        return attributes;
+    }
+
+
+    /**
+     * Extracts event listeners from the FIRST/TOP-LEVEL opening tag ONLY in the template.
+     * Supports:
+     *  - @event="handler"
+     *  - @event='handler'
+     * 
+     * Note: This method intentionally ignores nested elements and only processes
+     * the very first opening tag in the provided template string.
+     */
+    extractListeners(template: string): AreListener[] {
+        // Trim whitespace to ensure we start at the actual first tag
+        const trimmedTemplate = template.trim();
+
+        // Match ONLY the very first opening tag (anchored with ^)
+        const firstTagMatch = trimmedTemplate.match(
+            /^<([a-zA-Z][^\s/>]*)(\s[^>]*?)?>/
+        );
+
+        if (!firstTagMatch) return [];
+
+        const tag = firstTagMatch[1];
+        const attributesPart = firstTagMatch[2];
+
+        // If no attributes, no listeners possible
+        if (!attributesPart) return [];
+
+        /**
+         * Extract listeners from the first tag's attributes only.
+         * Match listener attributes:
+         *  @input="onChange"
+         *  @change='handleChange'
+         */
+        const listenerRegex = new RegExp(
+            `\\s+${this.config.listenerDelimiter}([a-zA-Z0-9_:-]+)` +
+            `\\s*=\\s*(?:"([^"]*)"|'([^']*)')`,
+            'g'
+        );
+
+        let match: RegExpExecArray | null;
+        const listeners: AreListener[] = [];
+
+        while ((match = listenerRegex.exec(attributesPart)) !== null) {
+            const raw = match[0];
+            const name = match[1];
+            const handler = match[2] ?? match[3] ?? "";
+
+            listeners.push({
+                tag,
+                name,
+                raw,
+                handler
+            });
+        }
+        
+        return listeners;
+    }
+
+
+
+    isBindingProp(prop: AreAttribute): boolean {
+        return prop.raw.trim().startsWith(this.config.bindingDelimiter)
+    }
+
+
+    extractPropValue(prop: AreAttribute, parentStore: AreStore): any {
+
+        if (prop.value == null) {
+            return undefined;
+        }
+
+        // Binding prop (starts with :)
+        if (prop.binding) {
+            const value = prop.value.trim();
+
+            // Static literal binding: :label="'Click'" or :"Click"
+            if (
+                (value.startsWith("'") && value.endsWith("'")) ||
+                (value.startsWith('"') && value.endsWith('"'))
+            ) {
+                return value.slice(1, -1);
+            }
+
+            // Dynamic binding: :label="someKey"
+            // (future: expressions, paths, computed, etc.)
+            return parentStore?.get(value);
+        }
+
+        // Static prop: label="Click"
+        return prop.value;
+    }
+
+
+    replaceInterpolation(template: string, interpolation: AreInterpolation | string, value: any): string {
+        const key = typeof interpolation === 'string' ? interpolation : interpolation.name;
+
+        return template.replace(new RegExp(`${this.config.interpolationDelimiters[0]}\\s*${key}\\s*${this.config.interpolationDelimiters[1]}`, 'g'), value !== undefined ? String(value) : '');
+    }
+
+
+}