@adaas/are 0.0.2 → 0.0.3

package/dist/node/lib/AreNode/AreNode.constants.mjs

@@ -1,17 +1,116 @@
 import '../../chunk-EQQGB2QZ.mjs';
 
-var AreNodeFeatures = /* @__PURE__ */ ((AreNodeFeatures2) => {
-  AreNodeFeatures2["onBeforeRender"] = "_AreNode_onBeforeRender";
-  AreNodeFeatures2["onRender"] = "_AreNode_onRender";
-  AreNodeFeatures2["onAfterRender"] = "_AreNode_onAfterRender";
-  AreNodeFeatures2["onCompile"] = "_AreNode_onCompile";
-  AreNodeFeatures2["onEvent"] = "_AreNode_onEvent";
-  AreNodeFeatures2["onUpdate"] = "_AreNode_onUpdate";
-  AreNodeFeatures2["onMount"] = "_AreNode_onMount";
-  AreNodeFeatures2["onUnmount"] = "_AreNode_onUnmount";
-  return AreNodeFeatures2;
-})(AreNodeFeatures || {});
+const AreNodeFeatures = {
+  // ==============================================================================
+  // Lifecycle features
+  // ==============================================================================
+  /**
+   * Feature that is called to handle before init lifecycle of the element node
+   */
+  onBeforeInit: "_AreNode_onBeforeInit",
+  /**
+   * Feature that is called to init the element node
+   */
+  onInit: "_AreNode_onInit",
+  /**
+   * 
+   */
+  onAfterInit: "_AreNode_onAfterInit",
+  /**
+   * Feature that is called to handle before mount lifecycle of the element node
+   */
+  onBeforeMount: "_AreNode_onBeforeMount",
+  /**
+   * Feature that is called to mount the element node
+   */
+  onMount: "_AreNode_onMount",
+  /**
+   * Feature that is called to handle after mount lifecycle of the element node
+   */
+  onAfterMount: "_AreNode_onAfterMount",
+  /**
+   * Feature that is called to handle before update lifecycle of the element node
+   */
+  onBeforeUpdate: "_AreNode_onBeforeUpdate",
+  /**
+   * Feature that is called to handle update lifecycle of the element node
+   */
+  onUpdate: "_AreNode_onUpdate",
+  /**
+   * Feature that is called to handle after update lifecycle of the element node
+   */
+  onAfterUpdate: "_AreNode_onAfterUpdate",
+  /**
+   * Feature that is called to handle before unmount lifecycle of the element node
+   */
+  onBeforeUnmount: "_AreNode_onBeforeUnmount",
+  /**
+   * Feature that is called to unmount the element node
+   */
+  onUnmount: "_AreNode_onUnmount",
+  /**
+   * Feature that is called to handle after unmount lifecycle of the element node
+   */
+  onAfterUnmount: "_AreNode_onAfterUnmount",
+  /**
+   * Feature that is called to handle before destroy lifecycle of the element node
+   */
+  onBeforeDestroy: "_AreNode_onBeforeDestroy",
+  /**
+   * Feature that is called to handle before destroy lifecycle of the element node
+   */
+  onDestroy: "_AreNode_onDestroy",
+  /**
+   * Feature that is called to handle after destroy lifecycle of the element node
+   */
+  onAfterDestroy: "_AreNode_onAfterDestroy",
+  //=============================================================================
+  // Build features
+  // ==============================================================================
+  /**
+   * Feature that is called to tokenize the element node template and extract its content, attributes, and child nodes. 
+   */
+  onTokenize: "_AreNode_onTokenize",
+  /**
+   * Feature that is called to transform the element node template, markup, styles, and data into a format that can be used for compilation. This feature is responsible for processing the raw template and extracting the necessary information to create the render plan and instructions for the node.
+   */
+  onTransform: "_AreNode_onTransform",
+  /**
+   * Event fired when the element node is interpreted
+   */
+  onInterpret: "_AreNode_onInterpret",
+  /**
+   * Feature that is called to compile the element node
+   */
+  onCompile: "_AreNode_onCompile",
+  /**
+   * Feature that is called to handle events
+   */
+  onEmit: "_AreNode_onEmit"
+};
+const AreNodeStatuses = {
+  /**
+   * Status indicating that the node is pending compilation. When a node is in the pending status, it means that it has been created but has not yet been compiled. During this phase, the node is typically being prepared for compilation, which may involve setting up its template, markup, styles, and any associated data or context. Once the node is ready for compilation, its status will change to "compiling".
+   */
+  Pending: "pending",
+  /**
+   * Status indicating that the node is in the process of being compiled. During this status, the node is being analyzed and transformed based on its template, markup, and styles to generate the necessary instructions for rendering and updating the node in the scene.
+   */
+  Compiling: "compiling",
+  /**
+   * Status indicating that the node has been compiled and is ready to be rendered. In this status, the node has generated all the necessary instructions and is prepared to be mounted in the scene.
+   */
+  Compiled: "compiled",
+  /**
+   * Status indicating that the node is currently mounted in the scene. When a node is mounted, it means that it has been rendered and is actively part of the scene's structure and content.
+   */
+  Mounted: "mounted",
+  /**
+   * Status indicating that the node has been unmounted from the scene. When a node is unmounted, it means that it has been removed from the scene's structure and content, and is no longer actively rendered in the scene.
+   */
+  Unmounted: "unmounted"
+};
 
-export { AreNodeFeatures };
+export { AreNodeFeatures, AreNodeStatuses };
 //# sourceMappingURL=AreNode.constants.mjs.map
 //# sourceMappingURL=AreNode.constants.mjs.map

package/dist/node/lib/AreNode/AreNode.constants.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/lib/AreNode/AreNode.constants.ts"],"names":["AreNodeFeatures"],"mappings":";;AAGO,IAAK,eAAA,qBAAAA,gBAAAA,KAAL;AAIH,EAAAA,iBAAA,gBAAA,CAAA,GAAiB,yBAAA;AAIjB,EAAAA,iBAAA,UAAA,CAAA,GAAW,mBAAA;AAIX,EAAAA,iBAAA,eAAA,CAAA,GAAgB,wBAAA;AAIhB,EAAAA,iBAAA,WAAA,CAAA,GAAY,oBAAA;AAIZ,EAAAA,iBAAA,SAAA,CAAA,GAAU,kBAAA;AAIV,EAAAA,iBAAA,UAAA,CAAA,GAAW,mBAAA;AAIX,EAAAA,iBAAA,SAAA,CAAA,GAAU,kBAAA;AAIV,EAAAA,iBAAA,WAAA,CAAA,GAAY,oBAAA;AAhCJ,EAAA,OAAAA,gBAAAA;AAAA,CAAA,EAAA,eAAA,IAAA,EAAA","file":"AreNode.constants.mjs","sourcesContent":["\n\n\nexport enum AreNodeFeatures {\n    /**\n     * Event fired when the element node is about to be rendered\n     */\n    onBeforeRender = '_AreNode_onBeforeRender',\n    /**\n     * Event fired when the element node is rendered\n     */\n    onRender = '_AreNode_onRender',\n    /**\n     * Event fired when the element node is after rendered\n     */\n    onAfterRender = '_AreNode_onAfterRender',\n    /**\n     * Feature that is called to compile the element node\n     */\n    onCompile = '_AreNode_onCompile',\n    /**\n     * Feature that is called to handle events\n     */\n    onEvent = '_AreNode_onEvent',\n    /**\n     * Feature that is called to update the element node\n     */\n    onUpdate = '_AreNode_onUpdate',\n    /**\n     * Feature that is called to mount the element node\n     */\n    onMount = '_AreNode_onMount',\n    /**\n     * Feature that is called to unmount the element node\n     */\n    onUnmount = '_AreNode_onUnmount',\n}"]}
+{"version":3,"sources":["../../../../src/lib/AreNode/AreNode.constants.ts"],"names":[],"mappings":";;AAEO,MAAM,eAAA,GAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ3B,YAAA,EAAc,uBAAA;AAAA;AAAA;AAAA;AAAA,EAId,MAAA,EAAQ,iBAAA;AAAA;AAAA;AAAA;AAAA,EAIR,WAAA,EAAa,sBAAA;AAAA;AAAA;AAAA;AAAA,EAMb,aAAA,EAAe,wBAAA;AAAA;AAAA;AAAA;AAAA,EAIf,OAAA,EAAS,kBAAA;AAAA;AAAA;AAAA;AAAA,EAIT,YAAA,EAAc,uBAAA;AAAA;AAAA;AAAA;AAAA,EAMd,cAAA,EAAgB,yBAAA;AAAA;AAAA;AAAA;AAAA,EAIhB,QAAA,EAAU,mBAAA;AAAA;AAAA;AAAA;AAAA,EAIV,aAAA,EAAe,wBAAA;AAAA;AAAA;AAAA;AAAA,EAMf,eAAA,EAAiB,0BAAA;AAAA;AAAA;AAAA;AAAA,EAIjB,SAAA,EAAW,oBAAA;AAAA;AAAA;AAAA;AAAA,EAIX,cAAA,EAAgB,yBAAA;AAAA;AAAA;AAAA;AAAA,EAMhB,eAAA,EAAiB,0BAAA;AAAA;AAAA;AAAA;AAAA,EAIjB,SAAA,EAAW,oBAAA;AAAA;AAAA;AAAA;AAAA,EAIX,cAAA,EAAgB,yBAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUhB,UAAA,EAAY,qBAAA;AAAA;AAAA;AAAA;AAAA,EAIZ,WAAA,EAAa,sBAAA;AAAA;AAAA;AAAA;AAAA,EAIb,WAAA,EAAa,sBAAA;AAAA;AAAA;AAAA;AAAA,EAIb,SAAA,EAAW,oBAAA;AAAA;AAAA;AAAA;AAAA,EAOX,MAAA,EAAQ;AAGZ;AAIO,MAAM,eAAA,GAAkB;AAAA;AAAA;AAAA;AAAA,EAI3B,OAAA,EAAS,SAAA;AAAA;AAAA;AAAA;AAAA,EAIT,SAAA,EAAW,WAAA;AAAA;AAAA;AAAA;AAAA,EAIX,QAAA,EAAU,UAAA;AAAA;AAAA;AAAA;AAAA,EAIV,OAAA,EAAS,SAAA;AAAA;AAAA;AAAA;AAAA,EAIT,SAAA,EAAW;AACf","file":"AreNode.constants.mjs","sourcesContent":["\n\nexport const AreNodeFeatures = {\n\n    // ==============================================================================\n    // Lifecycle features\n    // ==============================================================================\n    /**\n     * Feature that is called to handle before init lifecycle of the element node\n     */\n    onBeforeInit: '_AreNode_onBeforeInit',\n    /**\n     * Feature that is called to init the element node\n     */\n    onInit: '_AreNode_onInit',\n    /**\n     * \n     */\n    onAfterInit: '_AreNode_onAfterInit',\n\n\n    /**\n     * Feature that is called to handle before mount lifecycle of the element node\n     */\n    onBeforeMount: '_AreNode_onBeforeMount',\n    /**\n     * Feature that is called to mount the element node\n     */\n    onMount: '_AreNode_onMount',\n    /**\n     * Feature that is called to handle after mount lifecycle of the element node\n     */\n    onAfterMount: '_AreNode_onAfterMount',\n\n\n    /**\n     * Feature that is called to handle before update lifecycle of the element node\n     */\n    onBeforeUpdate: '_AreNode_onBeforeUpdate',\n    /**\n     * Feature that is called to handle update lifecycle of the element node\n     */\n    onUpdate: '_AreNode_onUpdate',\n    /**\n     * Feature that is called to handle after update lifecycle of the element node\n     */\n    onAfterUpdate: '_AreNode_onAfterUpdate',\n\n\n    /**\n     * Feature that is called to handle before unmount lifecycle of the element node\n     */\n    onBeforeUnmount: '_AreNode_onBeforeUnmount',\n    /**\n     * Feature that is called to unmount the element node\n     */\n    onUnmount: '_AreNode_onUnmount',\n    /**\n     * Feature that is called to handle after unmount lifecycle of the element node\n     */\n    onAfterUnmount: '_AreNode_onAfterUnmount',\n\n\n    /**\n     * Feature that is called to handle before destroy lifecycle of the element node\n     */\n    onBeforeDestroy: '_AreNode_onBeforeDestroy',\n    /**\n     * Feature that is called to handle before destroy lifecycle of the element node\n     */\n    onDestroy: '_AreNode_onDestroy',\n    /**\n     * Feature that is called to handle after destroy lifecycle of the element node\n     */\n    onAfterDestroy: '_AreNode_onAfterDestroy',\n\n\n\n    //=============================================================================\n    // Build features\n    // ==============================================================================\n    /**\n     * Feature that is called to tokenize the element node template and extract its content, attributes, and child nodes. \n     */\n    onTokenize: '_AreNode_onTokenize',\n    /**\n     * Feature that is called to transform the element node template, markup, styles, and data into a format that can be used for compilation. This feature is responsible for processing the raw template and extracting the necessary information to create the render plan and instructions for the node.\n     */\n    onTransform: '_AreNode_onTransform',\n    /**\n     * Event fired when the element node is interpreted\n     */\n    onInterpret: '_AreNode_onInterpret',\n    /**\n     * Feature that is called to compile the element node\n     */\n    onCompile: '_AreNode_onCompile',\n\n\n\n    /**\n     * Feature that is called to handle events\n     */\n    onEmit: '_AreNode_onEmit',\n\n\n} as const;\n\n\n\nexport const AreNodeStatuses = {\n    /**\n     * Status indicating that the node is pending compilation. When a node is in the pending status, it means that it has been created but has not yet been compiled. During this phase, the node is typically being prepared for compilation, which may involve setting up its template, markup, styles, and any associated data or context. Once the node is ready for compilation, its status will change to \"compiling\".\n     */\n    Pending: 'pending',\n    /**\n     * Status indicating that the node is in the process of being compiled. During this status, the node is being analyzed and transformed based on its template, markup, and styles to generate the necessary instructions for rendering and updating the node in the scene.\n     */\n    Compiling: 'compiling',\n    /**\n     * Status indicating that the node has been compiled and is ready to be rendered. In this status, the node has generated all the necessary instructions and is prepared to be mounted in the scene.\n     */\n    Compiled: 'compiled',\n    /**\n     * Status indicating that the node is currently mounted in the scene. When a node is mounted, it means that it has been rendered and is actively part of the scene's structure and content.\n     */\n    Mounted: 'mounted',\n    /**\n     * Status indicating that the node has been unmounted from the scene. When a node is unmounted, it means that it has been removed from the scene's structure and content, and is no longer actively rendered in the scene.\n     */\n    Unmounted: 'unmounted',\n} as const;"]}

package/dist/node/lib/AreNode/AreNode.entity.d.mts

@@ -1,8 +1,14 @@
 import '@adaas/a-concept';
-import './AreNode.types.mjs';
-export { b as AreNode } from '../../index-DMXWCL7R.mjs';
-import '../AreEvent/AreEvent.types.mjs';
-import '../AreScene/AreScene.types.mjs';
-import '../AreProps/AreProps.context.mjs';
+import '../AreEvent/AreEvent.context.mjs';
+export { g as AreNode } from '../../Are.context-D7w32H1G.mjs';
+import '../AreComponent/Are.component.mjs';
 import '@adaas/a-utils/a-execution';
-import '../AreStore/AreStore.context.mjs';
+import '@adaas/a-utils/a-signal';
+import '../AreStore/AreStore.types.mjs';
+import '../AreStore/AreStore.constants.mjs';
+import '../AreScene/AreScene.constants.mjs';
+import '../AreAttribute/AreAttribute.types.mjs';
+import '../AreAttribute/AreAttribute.constants.mjs';
+import './AreNode.constants.mjs';
+import '../AreComponent/Are.types.mjs';
+import '../AreComponent/Are.constants.mjs';

package/dist/node/lib/AreNode/AreNode.entity.d.ts

@@ -1,8 +1,14 @@
 import '@adaas/a-concept';
-import './AreNode.types.js';
-export { b as AreNode } from '../../index-BD-6iOuR.js';
-import '../AreEvent/AreEvent.types.js';
-import '../AreScene/AreScene.types.js';
-import '../AreProps/AreProps.context.js';
+import '../AreEvent/AreEvent.context.js';
+export { g as AreNode } from '../../Are.context-9Ija_fdC.js';
+import '../AreComponent/Are.component.js';
 import '@adaas/a-utils/a-execution';
-import '../AreStore/AreStore.context.js';
+import '@adaas/a-utils/a-signal';
+import '../AreStore/AreStore.types.js';
+import '../AreStore/AreStore.constants.js';
+import '../AreScene/AreScene.constants.js';
+import '../AreAttribute/AreAttribute.types.js';
+import '../AreAttribute/AreAttribute.constants.js';
+import './AreNode.constants.js';
+import '../AreComponent/Are.types.js';
+import '../AreComponent/Are.constants.js';

package/dist/node/lib/AreNode/AreNode.entity.js

@@ -1,9 +1,11 @@
 'use strict';
 
 var aConcept = require('@adaas/a-concept');
-var AreNode_constants = require('./AreNode.constants');
-var scene = require('@adaas/are/scene');
 var aFrame = require('@adaas/a-frame');
+var AreScene_context = require('@adaas/are/scene/AreScene.context');
+var AreAttribute_entity = require('@adaas/are/attribute/AreAttribute.entity');
+var AreNode_constants = require('./AreNode.constants');
+var Are_context = require('@adaas/are/component/Are.context');
 
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -14,114 +16,344 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 exports.AreNode = class AreNode extends aConcept.A_Entity {
+  /**
+   * Actual node identifier. 
+   */
   get id() {
     return this.aseid.id;
   }
+  /**
+   * Actual node type. 
+   * By default it's a tag name
+   */
+  get type() {
+    return this.aseid.entity;
+  }
+  /**
+   * Content string defined for the node — the inner content between delimiters.
+   * Example: `{{name}}`
+   */
+  get content() {
+    return this._content;
+  }
+  /**
+   * Markup string defined for the node
+   * Example: `<custom-component :prop="value"> <div>Inner Content</div> </custom-component>`
+   */
+  get markup() {
+    return this._markup;
+  }
+  /**
+   * The scope associated with this node
+   * uses to store all nested fragments and entities like other AreNodes and Scene
+   */
   get scope() {
     if (!this._scope) {
-      this._scope = new aConcept.A_Scope({
-        name: `${this.aseid.id}`
-      });
+      this._scope = aConcept.A_Context.allocate(this, new aConcept.A_Scope({ name: `${this.aseid.id}-scope` }));
     }
     return this._scope;
   }
-  get content() {
-    return this.scope.resolveFlat(scene.AreScene);
+  /**
+   * The attributes defined for the node, which can include static attributes, binding attributes, directive attributes, and event attributes. These attributes are extracted during tokenization and processed during the compilation phase to generate the corresponding SceneInstructions for rendering and updating the node in the scene.
+   */
+  get attributes() {
+    return this.scope.resolveFlatAll(AreAttribute_entity.AreAttribute);
   }
-  get type() {
-    return this.aseid.entity;
+  /**
+   * A custom component associated with this node, which can be used to provide custom logic and behavior for the node. This component is typically defined in the context and can be resolved based on the node's type or other identifying information. The component can include its own content, markup, styles, and features that are specific to the functionality it provides.
+   * 
+   * Example: If the node type is "custom-component", the corresponding component would be resolved from the context and can be used to provide custom rendering and behavior for nodes of that type.
+   * 
+   * [!] Note: The component is optional and may not be defined for all nodes. If no component is associated with the node, it will be treated as a standard HTML element or a basic node without custom logic.
+   */
+  get component() {
+    return this.scope.resolve(aConcept.A_FormatterHelper.toPascalCase(this.aseid.entity));
   }
-  get template() {
-    return this._template;
+  /**
+   * The parent node of this node, which is the node that registered the current node in its scope. This is typically the node that is responsible for rendering the current node and managing its lifecycle within the scene. The parent node can be used to access shared context, propagate events, and manage interactions between nodes in a hierarchical structure.
+   * 
+   * Example: For a node defined as `<div><span>Child Node</span></div>`, the parent node of the `<span>` element would be the `<div>` element, which is responsible for rendering the `<span>` and managing its lifecycle within the scene.
+   */
+  get parent() {
+    const parentIssuer = this.scope.parent?.issuer();
+    if (!parentIssuer || !(parentIssuer instanceof exports.AreNode)) return void 0;
+    return parentIssuer;
   }
-  get markup() {
-    return this._markup;
+  /**
+   * The child nodes of this node, which are typically defined in the markup and registered in the scope as child entities. These child nodes can represent nested elements or components within the node and can have their own content, markup, styles, and features. The child nodes are managed within the scope of the parent node and can be accessed and manipulated as needed for rendering, updating, and lifecycle management.
+   * 
+   * Example: For a node defined as `<div><span>Child Node</span></div>`, the child node would be the `<span>` element, which is registered as a child entity in the scope of the parent `<div>` node.
+   */
+  get children() {
+    return this.scope.resolveFlatAll(exports.AreNode) || [];
   }
-  get styles() {
-    return this._styles;
+  /**
+   * It returns the scene where the node exists, so it should be the scene of the rootNode, 
+   * primary parent of this node.
+   */
+  get scene() {
+    if (!this._scene)
+      this._scene = this.scope.resolve(AreScene_context.AreScene);
+    return this._scene;
   }
   fromNew(newEntity) {
     this.aseid = this.generateASEID({
-      id: newEntity.id,
-      entity: newEntity.component,
-      scope: newEntity.scope
+      id: newEntity.payload?.id,
+      entity: newEntity.payload?.entity || "node",
+      scope: newEntity.payload?.scope
     });
-    this._template = newEntity.template || "";
-    this._markup = newEntity.markup || "";
-    this._styles = newEntity.styles || "";
+    this.status = AreNode_constants.AreNodeStatuses.Pending;
+    this._content = newEntity.content || "";
+    this._markup = newEntity.raw || "";
+    this._opening = newEntity.opening || "";
+    this._closing = newEntity.closing || "";
+    this._position = newEntity.position || 0;
+    this._payload = newEntity.payload;
   }
   fromASEID(aseid) {
     super.fromASEID(aseid);
-    this._template = "";
+    this._content = "";
     this._markup = "";
-    this._styles = "";
+    this.status = AreNode_constants.AreNodeStatuses.Pending;
   }
-  setTemplate(template) {
-    this._template = template;
+  /**
+   * Sets the content string for the node — the inner text/markup between the node's
+   * opening and closing delimiters. Content is processed by the rendering engine to
+   * generate the corresponding SceneInstructions for rendering the node.
+   * 
+   * @param content 
+   */
+  setContent(content) {
+    this._content = content;
   }
+  /**
+   * Sets the markup string for the node, which is the full raw matched string including delimiters. The markup can include HTML-like syntax, custom components, directives, and other features that are processed by the rendering engine to generate the corresponding SceneInstructions for rendering the node.
+   * 
+   * @param markup 
+   */
   setMarkup(markup) {
     this._markup = markup;
   }
-  setStyles(styles) {
-    this._styles = styles;
+  /**
+   * Adds a child node to the current node's scope and ensures the child inherits from this node's scope.
+   * 
+   * @param child - The node to add as a child
+   */
+  addChild(child) {
+    this.scope.register(child);
+    if (!child.scope.isInheritedFrom(this.scope))
+      child.scope.inherit(this.scope);
+  }
+  /**
+   * Removes a child node from the current node's scope. This is typically used when a child node is no longer needed or should be detached from the parent node. The method ensures that the child node is properly deregistered from the scope and any associated resources are cleaned up as necessary.
+   * 
+   * @param node  - The child node to be removed from the current node's scope
+   */
+  removeChild(node) {
+    this.scope.deregister(node);
   }
-  async emit(eventOrScope) {
+  // ============================================================================================
+  //                                Node Lifecycle Methods
+  // ============================================================================================
+  /**
+   * Executes initialization logic for the node, which typically involves setting up the node's scope, registering any necessary entities, and preparing the node for rendering and interaction within the scene. This method is called during the initial phase of the node's lifecycle and is responsible for ensuring that the node is properly initialized before it is compiled and rendered in the scene.
+   */
+  init() {
+    this.call(AreNode_constants.AreNodeFeatures.onBeforeInit, this.scope);
+    this.call(AreNode_constants.AreNodeFeatures.onInit, this.scope);
+    this.call(AreNode_constants.AreNodeFeatures.onAfterInit, this.scope);
+  }
+  /**
+   * Loads the node, which typically involves executing any necessary setup or initialization logic to prepare the node for rendering and interaction within the scene. This may include processing the node's content, markup, styles, and features to generate the corresponding SceneInstructions, as well as setting up any event listeners or reactive properties as needed.
+   */
+  async load() {
     this.checkScopeInheritance();
-    const eventScope = aConcept.A_TypeGuards.isScopeInstance(eventOrScope) ? eventOrScope.inherit(this.scope) : new aConcept.A_Scope({
-      name: `${eventOrScope.name}-scope`,
-      fragments: [eventOrScope]
-    }).inherit(this.scope);
     try {
-      await this.call(AreNode_constants.AreNodeFeatures.onEvent, eventScope);
-      eventScope.destroy();
+      const context = this.scope.resolve(Are_context.AreContext);
+      context?.startPerformance("Node Load");
+      const res = super.load(this.scope);
+      context?.endPerformance("Node Load");
+      return res;
+    } catch (error) {
+      throw error;
+    }
+  }
+  /**
+   * Tokenizes the node content, which typically involves parsing the raw content string to identify the structure, child nodes, attributes, directives, and other features. This process is essential for breaking down the content into its constituent parts and preparing it for further processing during the compilation phase. The tokenization process can involve creating child nodes, extracting attributes and their values, and identifying any directives or bindings that need to be processed during rendering.
+   */
+  tokenize() {
+    this.checkScopeInheritance();
+    try {
+      const context = this.scope.resolve(Are_context.AreContext);
+      context?.startPerformance("Node Tokenize");
+      this.call(AreNode_constants.AreNodeFeatures.onTokenize, this.scope);
+      context?.endPerformance("Node Tokenize");
+    } catch (error) {
+      throw error;
+    }
+  }
+  /**
+   * Transforms the node, which typically involves executing any necessary logic to reshape the node's structure or content before it is compiled and rendered in the scene. This may include applying any transformations defined by directives, processing any dynamic content or expressions, and performing any other necessary tasks to ensure that the node is properly prepared for compilation and rendering based on its content, markup, styles, and features.
+   */
+  transform() {
+    this.checkScopeInheritance();
+    try {
+      const context = this.scope.resolve(Are_context.AreContext);
+      context?.startPerformance("Node Transform");
+      this.call(AreNode_constants.AreNodeFeatures.onTransform, this.scope);
+      context?.endPerformance("Node Transform");
     } catch (error) {
-      eventScope.destroy();
       throw error;
     }
   }
+  /**
+   * Compile the node. This method should transform the node's content, markup, and styles into a set of SceneInstructions that can be executed to render the node in the scene. The compile method is responsible for processing the node's features, attributes, directives, and other properties to generate the necessary instructions for rendering and updating the node in response to changes in state or context.
+   * 
+   * [!] Note: The compile method should ensure that the node's scope is properly inherited from the context scope before processing, and it should handle any errors that may occur during compilation to ensure that the node can be rendered correctly in the scene.
+   */
   compile() {
     this.checkScopeInheritance();
     try {
+      const context = this.scope.resolve(Are_context.AreContext);
+      context?.startPerformance("Node Compile");
       this.call(AreNode_constants.AreNodeFeatures.onCompile, this.scope);
+      context?.endPerformance("Node Compile");
     } catch (error) {
       throw error;
     }
   }
-  render() {
+  /**
+   * Mounts the node, which typically involves executing any necessary logic to render the node in the scene and to set up any interactions or behaviors associated with the node. This may include applying the generated SceneInstructions from the compile phase, attaching event listeners, and performing any other necessary tasks to ensure that the node is properly rendered and functional within the scene.
+   * 
+   * [!] Note: The mount method should ensure that the node's scope is properly inherited from the context scope before performing any mounting logic, and it should handle any errors that may occur during mounting to ensure that the node can be rendered correctly in the scene.
+   */
+  mount() {
     this.checkScopeInheritance();
     try {
-      return this.call(AreNode_constants.AreNodeFeatures.onRender, this.scope);
+      const context = this.scope.resolve(Are_context.AreContext);
+      context?.startPerformance("Node Mount");
+      this.call(AreNode_constants.AreNodeFeatures.onBeforeMount, this.scope);
+      this.call(AreNode_constants.AreNodeFeatures.onMount, this.scope);
+      this.call(AreNode_constants.AreNodeFeatures.onAfterMount, this.scope);
+      context?.endPerformance("Node Mount");
     } catch (error) {
       throw error;
     }
   }
-  async update() {
+  /**
+   * Interprets the node, which typically involves executing any necessary logic to process the node's features, attributes, directives, and other properties to generate the corresponding SceneInstructions for rendering and updating the node in response to changes in state or context. This method is responsible for ensuring that the node is properly interpreted based on its content, markup, styles, and features to enable dynamic behavior and responsiveness within the scene.
+   * 
+   * [!] Note: The interpret method should NOT go though own child, since it may be used by both mount and update operations!
+   */
+  interpret() {
     this.checkScopeInheritance();
     try {
-      await this.call(AreNode_constants.AreNodeFeatures.onUpdate, this.scope);
+      const context = this.scope.resolve(Are_context.AreContext);
+      context?.startPerformance("Node Interpret");
+      this.call(AreNode_constants.AreNodeFeatures.onInterpret, this.scope);
+      context?.endPerformance("Node Interpret");
     } catch (error) {
       throw error;
     }
   }
-  async reset() {
-    this.scope.destroy();
-    this._template = "";
-    this._styles = "";
-    this._scope = new aConcept.A_Scope({
-      name: `${this.aseid.id}`
-    });
+  /**
+   * Updates the node, which typically involves executing any necessary logic to update the node's rendering and behavior in response to changes in state, context, or other factors. This may include reapplying SceneInstructions, updating event listeners, and performing any other necessary tasks to ensure that the node remains functional and correctly rendered within the scene as changes occur.
+   * 
+   * [!] Note: The update method should ensure that the node's scope is properly inherited from the context scope before performing any update logic, and it should handle any errors that may occur during updating to ensure that the node can be updated correctly in the scene.
+   */
+  update() {
+    this.checkScopeInheritance();
+    try {
+      const context = this.scope.resolve(Are_context.AreContext);
+      context?.startPerformance("Node Update");
+      this.call(AreNode_constants.AreNodeFeatures.onBeforeUpdate, this.scope);
+      this.call(AreNode_constants.AreNodeFeatures.onUpdate, this.scope);
+      this.call(AreNode_constants.AreNodeFeatures.onAfterUpdate, this.scope);
+      context?.endPerformance("Node Update");
+    } catch (error) {
+      throw error;
+    }
   }
+  /**
+   * Unmounts the node, which typically involves executing any necessary logic to remove the node from the scene and to clean up any resources associated with the node. This may include reverting any applied SceneInstructions, detaching event listeners, and performing any other necessary tasks to ensure that the node is properly removed from the scene and that resources are released as needed.
+   * 
+   * [!] Note: The unmount method should ensure that the node's scope is properly inherited from the context scope before performing any unmounting logic, and it should handle any errors that may occur during unmounting to ensure that the node can be removed correctly from the scene.
+   */
   unmount() {
     this.checkScopeInheritance();
     try {
+      const context = this.scope.resolve(Are_context.AreContext);
+      context?.startPerformance("Node Unmount");
+      this.call(AreNode_constants.AreNodeFeatures.onBeforeUnmount, this.scope);
       this.call(AreNode_constants.AreNodeFeatures.onUnmount, this.scope);
+      this.call(AreNode_constants.AreNodeFeatures.onAfterUnmount, this.scope);
+      context?.endPerformance("Node Unmount");
     } catch (error) {
       throw error;
     }
   }
-  async load() {
-    return await super.load(this.scope);
+  cloneWithScope() {
+    const currentScope = this.scope;
+    aConcept.A_Context.deallocate(currentScope);
+    const newNode = new this.constructor({
+      opening: this._opening,
+      closing: this._closing,
+      position: this._position,
+      payload: this._payload || {},
+      content: this._content,
+      raw: this._markup
+    });
+    if (newNode._scope)
+      aConcept.A_Context.deallocate(newNode._scope);
+    newNode._scope = currentScope;
+    aConcept.A_Context.allocate(newNode, currentScope);
+    this._scope = aConcept.A_Context.allocate(this);
+    return newNode;
+  }
+  reset() {
+    for (const child of this.children) {
+      this.scope.deregister(child);
+    }
+    for (const attribute of this.attributes) {
+      this.scope.deregister(attribute);
+    }
+  }
+  clone() {
+    const newNode = new this.constructor({
+      opening: this._opening,
+      closing: this._closing,
+      position: this._position,
+      payload: this._payload || {},
+      content: this._content,
+      raw: this._markup
+    });
+    for (const child of this.children) {
+      newNode.addChild(child.clone());
+    }
+    for (const attribute of this.attributes) {
+      newNode.scope.register(attribute.clone());
+    }
+    return newNode;
   }
+  async emit(eventOrScope) {
+    this.checkScopeInheritance();
+    const eventScope = aConcept.A_TypeGuards.isScopeInstance(eventOrScope) ? eventOrScope.inherit(this.scope) : new aConcept.A_Scope({
+      name: `${eventOrScope.name}-scope`,
+      fragments: [eventOrScope]
+    }).inherit(this.scope);
+    try {
+      await this.call(AreNode_constants.AreNodeFeatures.onEmit, eventScope);
+      eventScope.destroy();
+    } catch (error) {
+      eventScope.destroy();
+      throw error;
+    }
+  }
+  /**
+   * Destroys the node, which typically involves executing any necessary cleanup logic to remove the node from the scene and to free up any resources associated with the node. This may include deregistering the node from its scope, removing any event listeners or reactive properties, and performing any other necessary cleanup tasks to ensure that the node is properly removed from the scene and that resources are released as needed.
+   * 
+   * [!] Note: The destroy method should ensure that the node's scope is properly inherited from the context scope before performing any cleanup, and it should handle any errors that may occur during destruction to ensure that resources are released correctly.
+   */
   async destroy() {
     this.checkScopeInheritance();
     try {
@@ -157,7 +389,7 @@ exports.AreNode = __decorateClass([
   aFrame.A_Frame.Entity({
     namespace: "A-ARE",
     name: "AreNode",
-    description: "An AreNode entity represents a node within the A-Concept Rendering Engine (ARE) framework. It encapsulates template, markup, and styles, and manages its own scope for nested fragments and entities. AreNodes are responsible for handling events, compiling, rendering, updating, and lifecycle management within the ARE context."
+    description: "An AreNode entity represents a node within the A-Concept Rendering Engine (ARE) framework. It encapsulates content, markup, and styles, and manages its own scope for nested fragments and entities. AreNodes are responsible for handling events, compiling, rendering, updating, and lifecycle management within the ARE context."
   })
 ], exports.AreNode);
 //# sourceMappingURL=AreNode.entity.js.map