@adaas/are-html 0.0.2

package/src/engine/AreHTML.lifecycle.ts

@@ -0,0 +1,96 @@
+import { A_Caller, A_Feature, A_FormatterHelper, A_Inject, A_Scope } from "@adaas/a-concept";
+import { AreLifecycle, AreScene, AreAttributeFeatures, AreSignalsContext } from "@adaas/are";
+import { A_Logger } from "@adaas/a-utils/a-logger";
+import { AreComponentNode } from "@adaas/are-html/nodes/AreComponent";
+import { AreRootNode } from "@adaas/are-html/nodes/AreRoot";
+import { AreInterpolation } from "@adaas/are-html/nodes/AreInterpolation";
+import { AreText } from "@adaas/are-html/nodes/AreText";
+import { AreDirectiveAttribute } from "@adaas/are-html/attributes/AreDirective.attribute";
+import { AreDirectiveFeatures } from "@adaas/are-html/directive/AreDirective.constants";
+import { AreHTMLEngineContext } from "./AreHTML.context";
+import { AreHTMLNode } from "../lib/AreHTMLNode/AreHTMLNode";
+
+
+export class AreHTMLLifecycle extends AreLifecycle {
+
+    @AreLifecycle.Init(AreComponentNode)
+    initComponent(
+        @A_Inject(A_Caller) node: AreHTMLNode,
+        @A_Inject(A_Scope) scope: A_Scope,
+        @A_Inject(AreHTMLEngineContext) context: AreHTMLEngineContext,
+        @A_Inject(A_Logger) logger?: A_Logger,
+        ...args: any[]
+    ): void {
+        super.init(node, scope, context, logger, ...args);
+    }
+
+
+    @AreLifecycle.Init(AreRootNode)
+    initRoot(
+        @A_Inject(A_Caller) node: AreHTMLNode,
+        @A_Inject(A_Scope) scope: A_Scope,
+        @A_Inject(AreHTMLEngineContext) context: AreHTMLEngineContext,
+        @A_Inject(AreSignalsContext) signalsContext?: AreSignalsContext,
+        @A_Inject(A_Logger) logger?: A_Logger,
+        ...args: any[]
+    ): void {
+        signalsContext?.subscribe(node);
+        super.init(node, scope, context, logger, ...args);
+    }
+
+
+    @AreLifecycle.Init(AreText)
+    initText(
+        @A_Inject(A_Caller) node: AreHTMLNode,
+        @A_Inject(A_Scope) scope: A_Scope,
+        @A_Inject(AreHTMLEngineContext) context: AreHTMLEngineContext,
+        @A_Inject(A_Logger) logger?: A_Logger,
+        ...args: any[]
+    ): void {
+        const scene = new AreScene(node.aseid);
+
+        scope.register(scene);
+    }
+
+
+    @AreLifecycle.Init(AreInterpolation)
+    initInterpolation(
+        @A_Inject(A_Caller) node: AreHTMLNode,
+        @A_Inject(A_Scope) scope: A_Scope,
+        @A_Inject(AreHTMLEngineContext) context: AreHTMLEngineContext,
+        @A_Inject(A_Logger) logger?: A_Logger,
+        ...args: any[]
+    ): void {
+        const scene = new AreScene(node.aseid);
+
+        scope.register(scene);
+    }
+
+
+
+
+    @A_Feature.Extend({
+        name: AreAttributeFeatures.Update,
+        scope: [AreDirectiveAttribute],
+    })
+    updateDirectiveAttribute(
+        @A_Inject(A_Caller) directive: AreDirectiveAttribute,
+        @A_Inject(A_Scope) scope: A_Scope,
+        @A_Inject(A_Feature) feature: A_Feature,
+        @A_Inject(A_Logger) logger?: A_Logger,
+        ...args: any[]
+    ) {
+        /**
+         * 3. If the attribute is a directive, then we should find a component that is responsible for
+         *    the directive compiling logic, and call it. 
+         *    In case component is not found we just want to log a warning, 
+         *    since the directive may be handled by some parent component or simply is a mistake in the template.
+         */
+        if (directive.component) {
+            feature.chain(directive.component, AreDirectiveFeatures.Update, directive.owner.scope);
+        } else {
+            logger?.warning(`Directive handler component not found for directive: ${directive.name}. Make sure to create a component named "AreDirective${A_FormatterHelper.toPascalCase(directive.name)}" to handle this directive.`);
+        }
+    }
+
+}

package/src/engine/AreHTML.tokenizer.ts

@@ -0,0 +1,90 @@
+import { A_Caller, A_Feature, A_Inject } from "@adaas/a-concept";
+import { A_Logger } from "@adaas/a-utils/a-logger";
+import { AreNodeFeatures, AreNode, AreTokenizer, AreAttribute_Init, AreContext } from "@adaas/are";
+import { AreComponentNode } from "@adaas/are-html/nodes/AreComponent";
+import { AreRootNode } from "@adaas/are-html/nodes/AreRoot";
+import { AreDirectiveAttribute } from "@adaas/are-html/attributes/AreDirective.attribute";
+import { AreEventAttribute } from "@adaas/are-html/attributes/AreEvent.attribute";
+import { AreBindingAttribute } from "@adaas/are-html/attributes/AreBinding.attribute";
+import { AreStaticAttribute } from "@adaas/are-html/attributes/AreStatic.attribute";
+import { AreHTMLAttribute } from "../lib/AreHTMLAttribute/AreHTML.attribute";
+
+
+export class AreHTMLTokenizer extends AreTokenizer {
+
+    ATTR_PATTERN = /([$:@]?[\w-]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>/"'=]+)))?/g
+
+
+    @A_Feature.Extend({
+        name: AreNodeFeatures.onTokenize,
+        scope: [AreComponentNode, AreRootNode]
+    })
+    tokenize(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreContext) context: AreContext,
+        @A_Inject(A_Logger) logger?: A_Logger
+    ): void {
+
+        super.tokenize(node, context, logger);
+
+        context.startPerformance('attributeExtraction');
+
+        const attributes = this.extractAttributes(node.markup);
+
+        for (const attr of attributes) {
+            node.scope.register(attr);
+        }
+
+        context.endPerformance('attributeExtraction');
+    }
+
+
+
+    extractAttributes(markup: string): AreHTMLAttribute[] {
+        // Strip the tag name, then remove the closing > that is NOT inside quotes
+        const withoutTag = markup.replace(/^<[a-zA-Z][a-zA-Z0-9-]*\s*/, '')
+
+        // Walk the string to find the closing > that isn't inside a quoted value
+        let inSingle = false
+        let inDouble = false
+        let endIdx = withoutTag.length
+
+        for (let i = 0; i < withoutTag.length; i++) {
+            const ch = withoutTag[i]
+            if (ch === '"' && !inSingle) inDouble = !inDouble
+            else if (ch === "'" && !inDouble) inSingle = !inSingle
+            else if (ch === '>' && !inSingle && !inDouble) {
+                endIdx = i
+                break
+            }
+        }
+
+        const attrString = withoutTag.slice(0, endIdx).replace(/\s*\/?\s*$/, '').trim()
+
+        const results: AreHTMLAttribute[] = []
+
+        for (const match of attrString.matchAll(this.ATTR_PATTERN)) {
+            const raw = match[0]
+            const full = match[1]                           // e.g. ':class', '@click', '$for', 'id'
+
+            // skip zero-length or name-less regex matches
+            if (!full) continue
+
+            const value = match[2] ?? match[3] ?? match[4] ?? 'true'
+
+            const prefix = full[0]
+            const isSpecial = prefix === ':' || prefix === '@' || prefix === '$'
+            const name = isSpecial ? full.slice(1) : full
+
+            const meta: AreAttribute_Init = { name, content: value, raw, prefix: isSpecial ? prefix : '' }
+
+            if (prefix === ':') results.push(new AreBindingAttribute(meta))
+            else if (prefix === '@') results.push(new AreEventAttribute(meta))
+            else if (prefix === '$') results.push(new AreDirectiveAttribute(meta))
+            else results.push(new AreStaticAttribute(meta))
+        }
+
+        return results
+    }
+
+}

package/src/engine/AreHTML.transformer.ts

@@ -0,0 +1,37 @@
+import { A_Caller, A_Feature, A_FormatterHelper, A_Inject, A_Scope } from "@adaas/a-concept";
+import { A_Logger } from "@adaas/a-utils/a-logger";
+import { AreAttributeFeatures, AreTransformer, AreStore } from "@adaas/are";
+import { AreDirectiveAttribute } from "@adaas/are-html/attributes/AreDirective.attribute";
+import { AreDirectiveFeatures } from "@adaas/are-html/directive/AreDirective.constants";
+
+
+export class AreHTMLTransformer extends AreTransformer {
+
+    @A_Feature.Extend({
+        name: AreAttributeFeatures.Transform,
+        scope: [AreDirectiveAttribute],
+    })
+    transformDirectiveAttribute(
+        @A_Inject(A_Caller) directive: AreDirectiveAttribute,
+        @A_Inject(AreStore) store: AreStore,
+        @A_Inject(A_Feature) feature: A_Feature,
+        @A_Inject(A_Logger) logger?: A_Logger,
+        ...args: any[]
+    ) {
+        store.watch(directive);
+
+        /**
+         * 3. If the attribute is a directive, then we should find a component that is responsible for
+         *    the directive compiling logic, and call it. 
+         *    In case component is not found we just want to log a warning, 
+         *    since the directive may be handled by some parent component or simply is a mistake in the template.
+         */
+        if (directive.component) {
+            feature.chain(directive.component, AreDirectiveFeatures.Transform, directive.owner.scope);
+        } else {
+            logger?.warning(`Directive handler component not found for directive: ${directive.name}. Make sure to create a component named "AreDirective${A_FormatterHelper.toPascalCase(directive.name)}" to handle this directive.`);
+        }
+
+        store.unwatch(directive);
+    }
+}

package/src/engine/AreHTML.types.ts

@@ -0,0 +1,6 @@
+
+
+export type AreHTMLContextConstructor = {
+    container: Document;
+    source: string;
+} 

package/src/index.ts

@@ -0,0 +1,80 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// ── Attributes ───────────────────────────────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+export * from './attributes/AreBinding.attribute';
+export * from './attributes/AreDirective.attribute';
+export * from './attributes/AreEvent.attribute';
+export * from './attributes/AreStatic.attribute';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ── Directives ───────────────────────────────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+export * from './directives/AreComponent.directive';
+export * from './directives/AreDirectiveFor.directive';
+export * from './directives/AreDirectiveIf.directive';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ── Instructions ─────────────────────────────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+export * from './instructions/AddAttribute.instruction';
+export * from './instructions/AddElement.instruction';
+export * from './instructions/AddInterpolation.instruction';
+export * from './instructions/AddListener.instruction';
+export * from './instructions/AddStyle.instruction';
+export * from './instructions/AddText.instruction';
+export * from './instructions/AreHTML.instructions.constants';
+export * from './instructions/AreHTML.instructions.types';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ── Nodes ────────────────────────────────────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+export * from './nodes/AreComment';
+export * from './nodes/AreComponent';
+export * from './nodes/AreInterpolation';
+export * from './nodes/AreRoot';
+export * from './nodes/AreText';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ── Signals ──────────────────────────────────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+export * from './signals/AreRoute.signal';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ── Lib / AreHTML ────────────────────────────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+export * from './lib/AreHTMLNode/AreHTMLNode';
+export * from './lib/AreHTMLAttribute/AreHTML.attribute';
+export * from './engine/AreHTML.constants';
+export * from './engine/AreHTML.context';
+export * from './engine/AreHTML.types';
+export * from './engine/AreHTML.compiler';
+export * from './engine/AreHTML.engine';
+export * from './engine/AreHTML.interpreter';
+export * from './engine/AreHTML.lifecycle';
+export * from './engine/AreHTML.tokenizer';
+export * from './engine/AreHTML.transformer';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ── Lib / AreDirective ───────────────────────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+export * from './lib/AreDirective/AreDirective.component';
+export * from './lib/AreDirective/AreDirective.constants';
+export * from './lib/AreDirective/AreDirective.context';
+export * from './lib/AreDirective/AreDirective.meta';
+export * from './lib/AreDirective/AreDirective.types';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ── Lib / AreRoot ────────────────────────────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+export * from './lib/AreRoot/AreRoot.component';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ── Lib / AreStyle ───────────────────────────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+export * from './lib/AreStyle/AreStyle.context';
+export * from './lib/AreStyle/AreStyle.types';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ── Lib / AreWatcher ─────────────────────────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+export * from './lib/AreWatcher/AreWatcher.component';

package/src/instructions/AddAttribute.instruction.ts

@@ -0,0 +1,25 @@
+import { A_Frame } from "@adaas/a-frame";
+import { AreDeclaration, AreMutation, AreInstructionSerialized } from "@adaas/are";
+import { AreHtmlAddAttributeInstructionPayload } from "./AreHTML.instructions.types";
+import { AreHTMLInstructions } from "./AreHTML.instructions.constants";
+
+
+@A_Frame.Component({
+    namespace: 'A-ARE',
+    name: 'AddAttributeInstruction',
+    description: 'Sets an attribute on an HTML element. Apply calls setAttribute; revert calls removeAttribute.'
+})
+export class AddAttributeInstruction extends AreMutation<AreHtmlAddAttributeInstructionPayload> {
+
+    cache?: string;
+
+    constructor(
+        parent: AreDeclaration,
+        props: AreHtmlAddAttributeInstructionPayload | AreInstructionSerialized<AreHtmlAddAttributeInstructionPayload>) {
+        if ('aseid' in props) {
+            super(props as AreInstructionSerialized<AreHtmlAddAttributeInstructionPayload>);
+        } else {
+            super(AreHTMLInstructions.AddAttribute, parent, props);
+        }
+    }
+}

package/src/instructions/AddComment.instruction.ts

@@ -0,0 +1,27 @@
+import { A_Frame } from "@adaas/a-frame";
+import { AreDeclaration, AreInstructionSerialized } from "@adaas/are";
+import { AreHtmlAddCommentInstructionPayload } from "./AreHTML.instructions.types";
+import { AreHTMLInstructions } from "./AreHTML.instructions.constants";
+
+
+@A_Frame.Component({
+    namespace: 'A-ARE',
+    name: 'AddCommentInstruction',
+    description: 'Appends a comment node to an element. Apply creates the comment node; revert removes it. Content can be a static string or a dynamic getter for interpolations.'
+})
+export class AddCommentInstruction extends AreDeclaration<AreHtmlAddCommentInstructionPayload> {
+
+    get content() {
+        return this.payload.content;
+    }
+
+    constructor(
+        props: AreHtmlAddCommentInstructionPayload | AreInstructionSerialized<AreHtmlAddCommentInstructionPayload>
+    ) {
+        if ('aseid' in props) {
+            super(props as AreInstructionSerialized<AreHtmlAddCommentInstructionPayload>);
+        } else {
+            super(AreHTMLInstructions.AddComment, props);
+        }
+    }
+}

package/src/instructions/AddElement.instruction.ts

@@ -0,0 +1,22 @@
+import { A_Frame } from "@adaas/a-frame";
+import { AreDeclaration, AreInstructionSerialized } from "@adaas/are";
+import { AreHtmlAddElementInstructionPayload } from "./AreHTML.instructions.types";
+import { AreHTMLInstructions } from "./AreHTML.instructions.constants";
+
+
+@A_Frame.Component({
+    namespace: 'A-ARE',
+    name: 'AddElementInstruction',
+    description: 'Creates a new HTML element in the DOM. Apply creates the element; revert removes it.'
+})
+export class AddElementInstruction extends AreDeclaration<AreHtmlAddElementInstructionPayload> {
+    constructor(
+        props: AreHtmlAddElementInstructionPayload | AreInstructionSerialized<AreHtmlAddElementInstructionPayload>
+    ) {
+        if ('aseid' in props) {
+            super(props);
+        } else {
+            super(AreHTMLInstructions.AddElement, props);
+        }
+    }
+}

package/src/instructions/AddInterpolation.instruction.ts

@@ -0,0 +1,24 @@
+import { A_Frame } from "@adaas/a-frame";
+import { AreDeclaration, AreMutation, AreInstructionSerialized } from "@adaas/are";
+import { AreHtmlAddInterpolationInstructionPayload } from "./AreHTML.instructions.types";
+import { AreHTMLInstructions } from "./AreHTML.instructions.constants";
+
+
+@A_Frame.Component({
+    namespace: 'A-ARE',
+    name: 'AddInterpolationInstruction',
+    description: 'Appends a reactive text node whose content is resolved dynamically from the store. Apply creates the text node with the getter; revert removes it.'
+})
+export class AddInterpolationInstruction extends AreMutation<AreHtmlAddInterpolationInstructionPayload> {
+
+    constructor(
+        parent: AreDeclaration,
+        props: AreHtmlAddInterpolationInstructionPayload | AreInstructionSerialized<AreHtmlAddInterpolationInstructionPayload>
+    ) {
+        if ('aseid' in props) {
+            super(props as AreInstructionSerialized<AreHtmlAddInterpolationInstructionPayload>);
+        } else {
+            super(AreHTMLInstructions.AddInterpolation, parent, props);
+        }
+    }
+}

package/src/instructions/AddListener.instruction.ts

@@ -0,0 +1,24 @@
+import { A_Frame } from "@adaas/a-frame";
+import { AreDeclaration, AreMutation, AreInstructionSerialized } from "@adaas/are";
+import { AreHtmlAddListenerInstructionPayload } from "./AreHTML.instructions.types";
+import { AreHTMLInstructions } from "./AreHTML.instructions.constants";
+
+
+@A_Frame.Component({
+    namespace: 'A-ARE',
+    name: 'AddListenerInstruction',
+    description: 'Attaches a DOM event listener to an element. Apply calls addEventListener; revert calls removeEventListener.'
+})
+export class AddListenerInstruction extends AreMutation<AreHtmlAddListenerInstructionPayload> {
+
+    constructor(
+        parent: AreDeclaration,
+        props: AreHtmlAddListenerInstructionPayload | AreInstructionSerialized<AreHtmlAddListenerInstructionPayload>
+    ) {
+        if ('aseid' in props) {
+            super(props as AreInstructionSerialized<AreHtmlAddListenerInstructionPayload>);
+        } else {
+            super(AreHTMLInstructions.AddListener, parent, props);
+        }
+    }
+}

package/src/instructions/AddStyle.instruction.ts

@@ -0,0 +1,24 @@
+import { A_Frame } from "@adaas/a-frame";
+import { AreDeclaration, AreMutation, AreInstructionSerialized } from "@adaas/are";
+import { AreHtmlAddStyleInstructionPayload } from "./AreHTML.instructions.types";
+import { AreHTMLInstructions } from "./AreHTML.instructions.constants";
+
+
+@A_Frame.Component({
+    namespace: 'A-ARE',
+    name: 'AddStyleInstruction',
+    description: 'Sets an inline CSS style property on an element. Apply sets the property; revert removes it.'
+})
+export class AddStyleInstruction extends AreMutation<AreHtmlAddStyleInstructionPayload> {
+
+    constructor(
+        parent: AreDeclaration,
+        props: AreHtmlAddStyleInstructionPayload | AreInstructionSerialized<AreHtmlAddStyleInstructionPayload>
+    ) {
+        if ('aseid' in props) {
+            super(props as AreInstructionSerialized<AreHtmlAddStyleInstructionPayload>);
+        } else {
+            super(AreHTMLInstructions.AddStyle, parent, props);
+        }
+    }
+}

package/src/instructions/AddText.instruction.ts

@@ -0,0 +1,21 @@
+import { A_Frame } from "@adaas/a-frame";
+import { AreDeclaration, AreInstructionSerialized } from "@adaas/are";
+import { AreHtmlAddTextInstructionPayload } from "./AreHTML.instructions.types";
+import { AreHTMLInstructions } from "./AreHTML.instructions.constants";
+
+
+@A_Frame.Component({
+    namespace: 'A-ARE',
+    name: 'AddTextInstruction',
+    description: 'Appends a text node to an element. Apply creates the text node; revert removes it. Content can be a static string or a dynamic getter for interpolations.'
+})
+export class AddTextInstruction extends AreDeclaration<AreHtmlAddTextInstructionPayload> {
+
+    constructor(props: AreHtmlAddTextInstructionPayload | AreInstructionSerialized<AreHtmlAddTextInstructionPayload>) {
+        if ('aseid' in props) {
+            super(props as AreInstructionSerialized<AreHtmlAddTextInstructionPayload>);
+        } else {
+            super(AreHTMLInstructions.AddText, props);
+        }
+    }
+}

package/src/instructions/AreHTML.instructions.constants.ts

@@ -0,0 +1,11 @@
+
+
+export const AreHTMLInstructions = {
+    AddElement: '_AreHTML_AddElement',
+    AddText: '_AreHTML_AddText',
+    AddAttribute: '_AreHTML_AddAttribute',
+    AddStyle: '_AreHTML_AddStyle',
+    AddListener: '_AreHTML_AddListener',
+    AddInterpolation: '_AreHTML_AddInterpolation',
+    AddComment: '_AreHTML_AddComment',
+} as const

package/src/instructions/AreHTML.instructions.types.ts

@@ -0,0 +1,51 @@
+export type AreHtmlAddAttributeInstructionPayload = {
+    name: string;
+    content: string;
+    evaluate?: boolean; // Optional flag to indicate if content should be evaluated as an expression
+}
+
+export type AreHtmlAddElementInstructionPayload = {
+    tag: string;
+}
+
+export type AreHtmlAddTextInstructionPayload = {
+    /**
+     * Static string content or a dynamic getter function.
+     * When a function is provided, it receives the instruction instance
+     * and should return the current text value (used for interpolations).
+     */
+    content: string ;
+    evaluate?: boolean; // Optional flag to indicate if content should be evaluated as an expression
+}
+
+export type AreHtmlAddCommentInstructionPayload = {
+    /**
+     * Static string content or a dynamic getter function.
+     * When a function is provided, it receives the instruction instance
+     * and should return the current text value (used for interpolations).
+     */
+    content: string ;
+    evaluate?: boolean; // Optional flag to indicate if content should be evaluated as an expression
+
+}
+
+export type AreHtmlAddStyleInstructionPayload = {
+    /** CSS property name in camelCase (e.g. "backgroundColor") or kebab-case (e.g. "background-color") */
+    property: string;
+    /** CSS property value */
+    value: string;
+}
+
+export type AreHtmlAddListenerInstructionPayload = {
+    /** DOM event name (e.g. "click", "input", "submit") */
+    name: string;
+    /** Event handler callback */
+    handler: string;
+}
+
+export type AreHtmlAddInterpolationInstructionPayload = {
+    /** The interpolation key used to look up the value in the store */
+    key: string;
+    /** Dynamic getter function that resolves the current interpolation value */
+    content: (...args: any[]) => string;
+}