@adaas/are-html 0.0.2 → 0.0.4

package/examples/jumpstart/src/components/List.component.ts

@@ -23,20 +23,21 @@ export class ListComponent extends Are {
             <li @click="$handleClick('Products')" :class="active==='Products' ? 'menu-item-active' : ''" class="menu-item"><span class="menu-icon">⊠</span> <span class="menu-text">{{item3}}</span></li>
             <li @click="$handleClick('Orders')" :class="active==='Orders' ? 'menu-item-active' : ''" class="menu-item"><span class="menu-icon">⊟</span> <span class="menu-text">{{item4}}</span></li>
         </ul>
-        <div class="menu-section">System</div>    
+        <div class="menu-section">System</div>
             <button @click="$add">Add +</button>
-            <ul class="menu">
-                <li 
-                $for="item in items" @click="$handleClick(item.name)"
-                $if="active=='Dashboard'" 
-                :class="active===item.name ? 'menu-item-active' : ''" 
-                class="menu-item">
-                <span class="menu-icon">⊙</span> 
-                <span class="menu-text">{{item.name}}</span> 
-                <span $if="item.badge > 0" class="menu-badge">{{item.badge}}</span>
-                <button @click="$remove(item)">+</button>
-                </li>
-            </ul>
+            <div $if="active=='Dashboard'">
+                <ul class="menu">
+                    <li
+                    $for="item in items track item.name" @click="$handleClick(item.name)"
+                    :class="active===item.name ? 'menu-item-active' : ''"
+                    class="menu-item">
+                    <span class="menu-icon">⊙</span>
+                    <span class="menu-text">{{item.name}}</span>
+                    <span $if="item.badge > 0" class="menu-badge">{{item.badge}}</span>
+                    <button @click.stop="$remove(item)">+</button>
+                    </li>
+                </ul>
+            </div>
         `);
     }
 

package/examples/jumpstart/src/concept.ts

@@ -7,10 +7,9 @@ import { A_Config, ConfigReader } from "@adaas/a-utils/a-config";
 import { A_Logger, A_LOGGER_ENV_KEYS } from "@adaas/a-utils/a-logger";
 import { A_SignalBus, A_SignalState } from "@adaas/a-utils/a-signal";
 import { A_Polyfill } from "@adaas/a-utils/a-polyfill";
-import { AreApp } from "src/containers/AreWebApp.container";
 import { AreRoot } from "src/lib/AreRoot/AreRoot.component";
 import { AreHTMLEngine } from "src/engine/AreHTML.engine";
-import { AreInit } from "@adaas/are";
+import { AreContainer, AreInit } from "@adaas/are";
 import { AreRoute } from "@adaas/are";
 import { AreContext } from "@adaas/are";
 import { AreHTMLEngineContext } from "src/engine/AreHTML.context";
@@ -26,7 +25,7 @@ import { AreDirectiveFor } from "src/directives/AreDirectiveFor.directive";
 (async () => {
     try {
 
-        const container = new AreApp({
+        const container = new AreContainer({
             name: 'ARE Jumpstart',
             components: [
                 // ----------------------------------
@@ -66,7 +65,9 @@ import { AreDirectiveFor } from "src/directives/AreDirectiveFor.directive";
             ],
             fragments: [
                 new A_SignalState([AreRoute]),
-                new AreHTMLEngineContext(document.body.innerHTML),
+                new AreHTMLEngineContext({
+                    container:document
+                }),
 
                 new A_Config({
                     defaults: {

package/jest.config.ts

@@ -29,7 +29,7 @@ const config: Config.InitialOptions = {
         "^@adaas/are/syntax/(.*)":                            "<rootDir>/node_modules/@adaas/are/dist/node/lib/AreSyntax/$1.js",
         "^@adaas/are/tokenizer/(.*)":                         "<rootDir>/node_modules/@adaas/are/dist/node/lib/AreTokenizer/$1.js",
         "^@adaas/are/transformer/(.*)":                       "<rootDir>/node_modules/@adaas/are/dist/node/lib/AreTransformer/$1.js",
-        "^@adaas/are/watcher/(.*)":                           "<rootDir>/node_modules/@adaas/are/dist/node/lib/AreWatcher/$1.js",
+        "^@adaas/are/watcher/(.*)":                           "<rootDir>/node_modules/@adaas/are/dist/node/lib/AreRouteWatcher/$1.js",
 
         // ── @adaas/are-html internal path aliases (mirrors tsconfig.json paths) ──
         // Base ARE-HTML entities

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaas/are-html",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "A-Concept Rendering Engine (ARE) is a powerful rendering engine designed to work seamlessly with the A-Concept framework. This library provides an HTML engine implementation of ARE, enabling developers to create dynamic and interactive user interfaces for web applications using standard HTML syntax.",
   "keywords": [
     "a-concept",
@@ -79,13 +79,17 @@
     "echo-version": "echo $npm_package_version",
     "build": "tsup --config tsup.config.ts"
   },
-  "dependencies": {
-    "@adaas/a-concept": "^0.3.13",
-    "@adaas/a-frame": "^0.0.22",
-    "@adaas/a-utils": "^0.3.16",
-    "@adaas/are": "^0.0.9"
+  "peerDependencies": {
+    "@adaas/a-concept": "^0.3.16",
+    "@adaas/a-frame": "^0.1.2",
+    "@adaas/a-utils": "^0.3.20",
+    "@adaas/are": "^0.0.10"
   },
   "devDependencies": {
+    "@adaas/a-concept": "^0.3.16",
+    "@adaas/a-frame": "^0.1.2",
+    "@adaas/a-utils": "^0.3.20",
+    "@adaas/are": "^0.0.10",
     "@types/chai": "^4.3.14",
     "@types/jest": "^29.5.12",
     "@types/mocha": "^10.0.6",

package/src/attributes/AreBinding.attribute.ts

@@ -1,10 +1,15 @@
 import { AreHTMLAttribute } from "@adaas/are-html/attribute";
+import { A_Frame } from "@adaas/a-frame/core";
 
 
 
 
 
 
+@A_Frame.Define({
+    namespace: 'a-are-html',
+    description: 'Attribute type for two-way value bindings (: prefix). Marks that the attribute value should be resolved dynamically from the node store rather than used verbatim, enabling reactive updates whenever the underlying store value changes during a rendering cycle.'
+})
 export class AreBindingAttribute extends AreHTMLAttribute {
 
     // get value(): string {

package/src/attributes/AreDirective.attribute.ts

@@ -3,9 +3,14 @@ import type { AreDirective } from "@adaas/are-html/directive/AreDirective.compon
 import { AreHTMLAttribute } from "@adaas/are-html/attribute";
 import { AreStoreWatchingEntity } from "@adaas/are";
 import { AreHTMLNode } from "@adaas/are-html/node";
+import { A_Frame } from "@adaas/a-frame/core";
 
 
 
+@A_Frame.Define({
+    namespace: 'a-are-html',
+    description: 'Attribute type for directive invocations ($ prefix). Carries the resolved directive component class and a cloned template node. The associated directive uses these during its Compile phase to emit conditional or repeated instruction groups and to manage per-item or per-condition subscopes.'
+})
 export class AreDirectiveAttribute extends AreHTMLAttribute implements AreStoreWatchingEntity {
 
     cache?: any

package/src/attributes/AreEvent.attribute.ts

@@ -1,5 +1,10 @@
 import { AreHTMLAttribute } from "@adaas/are-html/attribute";
+import { A_Frame } from "@adaas/a-frame/core";
 
 
+@A_Frame.Define({
+    namespace: 'a-are-html',
+    description: 'Attribute type for DOM event listeners (@ prefix). Marks the attribute as an event binding — the compiler emits an AddListener instruction that attaches a handler expression resolved from the store to the specified event name on the host element.'
+})
 export class AreEventAttribute extends AreHTMLAttribute {
 }

package/src/attributes/AreStatic.attribute.ts

@@ -1,6 +1,11 @@
 import { AreHTMLAttribute } from "@adaas/are-html/attribute";
+import { A_Frame } from "@adaas/a-frame/core";
 
 
+@A_Frame.Define({
+    namespace: 'a-are-html',
+    description: 'Attribute type for plain static HTML attributes with no dynamic prefix. Its value is emitted verbatim via an AddAttribute instruction at compile time and does not participate in reactive update cycles.'
+})
 export class AreStaticAttribute extends AreHTMLAttribute {
 
 }

package/src/directives/AreDirectiveFor.directive.ts

@@ -6,15 +6,22 @@ import { AreDirective } from "@adaas/are-html/directive/AreDirective.component";
 import { AddCommentInstruction } from "@adaas/are-html/instructions/AddComment.instruction";
 import { AreHTMLNode } from "@adaas/are-html/node";
 import { AreDirectiveContext } from "@adaas/are-html/directive/AreDirective.context";
+import { A_Frame } from "@adaas/a-frame/core";
 
 
 type AreForExpression = {
     key: string;
     index: string | undefined;
     arrayExpr: string;
+    /** Optional `track <expr>` clause, e.g. `track row.id` */
+    trackExpr: string | undefined;
 };
 
 
+@A_Frame.Define({
+    namespace: 'a-are-html',
+    description: 'Built-in $for directive. Iterates over an array expression resolved from the store and renders a cloned template fragment per item, managing per-item subscopes and comment-node anchors. Supports keyed diffing via an optional track clause to minimise DOM mutations on collection updates.'
+})
 @AreDirective.Priority(1)
 export class AreDirectiveFor extends AreDirective {
 
@@ -73,8 +80,6 @@ export class AreDirectiveFor extends AreDirective {
 
         attribute.value = array;
 
-        console.log('Initial array for "for" directive:', scene);
-
         /**
          * For each item in the array, spawn a clone of the template with the
          * item's store values pre-set and its scene activated.
@@ -86,8 +91,6 @@ export class AreDirectiveFor extends AreDirective {
         for (let i = 0; i < array.length; i++) {
             this.spawnItemNode(attribute.template!, attribute.owner, key, index, array[i], i);
         }
-
-        console.log('Template for "for" directive:', forTemplate);
     }
 
 
@@ -123,7 +126,7 @@ export class AreDirectiveFor extends AreDirective {
         /**
          * Re-evaluate the source array.
          */
-        const { key, index, arrayExpr } = this.parseExpression(attribute.content);
+        const { key, index, arrayExpr, trackExpr } = this.parseExpression(attribute.content);
         const newArray = this.resolveArray(store, arrayExpr, attribute.content);
 
         const owner = attribute.owner;
@@ -131,70 +134,61 @@ export class AreDirectiveFor extends AreDirective {
 
         attribute.value = newArray;
 
-        const newLen = newArray.length;
+        const computeKey = this.makeKeyFn(key, index, trackExpr);
 
-        /**
-         * Build a set of new items for O(1) identity lookup.
-         * Uses reference equality — items that exist in newArray are "kept".
-         */
-        const newItemSet = new Set(newArray);
+        // ── 1. Index existing children by stable key ────────────────────────
+        const childByKey = new Map<any, AreHTMLNode>();
+        const remaining = new Set<AreHTMLNode>();
 
-        /**
-         * Partition existing children by identity: nodes whose stored item is
-         * still present in the new array are kept; the rest are removed.
-         * This correctly handles deletions from any position, not just the tail.
-         */
-        const keptChildren: AreHTMLNode[] = [];
-        const removedChildren: AreHTMLNode[] = [];
-
-        for (const child of currentChildren) {
+        for (let i = 0; i < currentChildren.length; i++) {
+            const child = currentChildren[i];
             const ctx = child.scope.resolveFlat(AreDirectiveContext);
+            const k = ctx ? computeKey(ctx.scope[key], ctx.scope[index || 'index']) : Symbol('orphan');
+            childByKey.set(k, child);
+            remaining.add(child);
+        }
 
-            if (ctx && newItemSet.has(ctx.scope[key])) {
-                keptChildren.push(child);
+        // ── 2. Walk desired list; reuse existing or spawn new ───────────────
+        const desired: AreHTMLNode[] = [];
+        const newOnes: AreHTMLNode[] = [];
+
+        for (let i = 0; i < newArray.length; i++) {
+            const item = newArray[i];
+            const k = computeKey(item, i);
+            const existing = childByKey.get(k);
+
+            if (existing) {
+                remaining.delete(existing);
+
+                let directiveContext = existing.scope.resolveFlat(AreDirectiveContext);
+                if (!directiveContext) {
+                    directiveContext = new AreDirectiveContext(existing.aseid);
+                    existing.scope.register(directiveContext);
+                }
+                directiveContext.scope = {
+                    ...directiveContext.scope,
+                    [key]: item,
+                    [index || 'index']: i,
+                };
+                desired.push(existing);
             } else {
-                removedChildren.push(child);
+                const itemNode = this.spawnItemNode(attribute.template!, owner, key, index, item, i);
+                desired.push(itemNode);
+                newOnes.push(itemNode);
             }
         }
 
-        /**
-         * Unmount and detach nodes whose items are no longer in the array.
-         */
-        for (const child of removedChildren) {
+        // ── 3. Unmount + detach removed children ─────────────────────────────
+        for (const child of remaining) {
             child.unmount();
             owner.removeChild(child);
         }
 
-        /**
-         * Update store values on kept nodes so their reactive bindings pick up
-         * the latest data and corrected indices without a full re-render.
-         */
-        for (let i = 0; i < keptChildren.length; i++) {
-            let directiveContext = keptChildren[i].scope.resolveFlat(AreDirectiveContext);
-
-            if (!directiveContext) {
-                directiveContext = new AreDirectiveContext(keptChildren[i].aseid);
-                keptChildren[i].scope.register(directiveContext);
-            }
-
-            directiveContext.scope = {
-                ...directiveContext.scope,
-                [key]: newArray[i],
-                [index || 'index']: i,
-            };
-        }
-
-        /**
-         * Append nodes for items added beyond the current kept count.
-         * These are created outside the main compile cycle so they need an
-         * explicit compile + mount to appear in the DOM.
-         */
-        for (let i = keptChildren.length; i < newLen; i++) {
-            const itemNode = this.spawnItemNode(attribute.template!, owner, key, index, newArray[i], i);
-
-            itemNode.transform();
-            itemNode.compile();
-            itemNode.mount();
+        // ── 4. Mount only the new ones (kept children stay where they are). ─
+        for (const child of newOnes) {
+            child.transform();
+            child.compile();
+            child.mount();
         }
     }
 
@@ -203,6 +197,34 @@ export class AreDirectiveFor extends AreDirective {
     // ── Helpers ──────────────────────────────────────────────────────────────────
     // ─────────────────────────────────────────────────────────────────────────────
 
+    /**
+     * Build a key-function that derives a stable identity from each item.
+     * If the user provided a `track <expr>` clause, evaluate it as a path on
+     * the item; otherwise fall back to the item identity (reference equality).
+     */
+    private makeKeyFn(key: string, index: string | undefined, trackExpr: string | undefined): (item: any, i: number) => any {
+        if (!trackExpr) {
+            return (item, i) => item ?? i;
+        }
+
+        // Strip any leading `key.` so users can write `track row.id`.
+        const path = trackExpr.startsWith(key + '.') ? trackExpr.slice(key.length + 1) : trackExpr;
+
+        return (item, i) => {
+            if (item == null) return i;
+            if (path === key || path === '$index') return path === '$index' ? i : item;
+
+            // dotted path lookup
+            const parts = path.split('.');
+            let v: any = item;
+            for (const p of parts) {
+                if (v == null) return i;
+                v = v[p];
+            }
+            return v ?? i;
+        };
+    }
+
     /**
      * Parses the $for expression string into its constituent parts.
      *
@@ -212,17 +234,32 @@ export class AreDirectiveFor extends AreDirective {
      *   (item, index) in items
      *   item in filter(items)
      *   item, index in filter(items, 'active')
+     *   item in items track item.id
+     *   (item, i) in items track item.id
      */
     private parseExpression(content: string): AreForExpression {
-        const inIndex = content.lastIndexOf(' in ');
-        const keyAndIndex = content.slice(0, inIndex).trim().replace(/^\(|\)$/g, '');
-        const arrayExpr = content.slice(inIndex + 4).trim();
+        // Strip optional `track <expr>` suffix first.
+        let trackExpr: string | undefined;
+        const trackIdx = content.search(/\s+track\s+/);
+        let body = content;
+        if (trackIdx !== -1) {
+            const m = content.slice(trackIdx).match(/\s+track\s+(.+)$/);
+            if (m) {
+                trackExpr = m[1].trim();
+                body = content.slice(0, trackIdx).trim();
+            }
+        }
+
+        const inIndex = body.lastIndexOf(' in ');
+        const keyAndIndex = body.slice(0, inIndex).trim().replace(/^\(|\)$/g, '');
+        const arrayExpr = body.slice(inIndex + 4).trim();
         const keyParts = keyAndIndex.split(',').map(p => p.trim());
 
         return {
             key: keyParts[0],
             index: keyParts[1] || undefined,
             arrayExpr,
+            trackExpr,
         };
     }
 

package/src/directives/AreDirectiveIf.directive.ts

@@ -5,9 +5,32 @@ import {  AreScene, AreStore, AreSyntax } from "@adaas/are";
 import { AreDirective } from "@adaas/are-html/directive/AreDirective.component";
 import { AddCommentInstruction } from "@adaas/are-html/instructions/AddComment.instruction";
 import { AreDirectiveContext } from "@adaas/are-html/directive/AreDirective.context";
-
-
-
+import { A_Frame } from "@adaas/a-frame/core";
+
+
+
+/**
+ * `$if` directive — conditionally renders a node based on an expression.
+ *
+ * ⚠️ Known limitation: do NOT use `$if` and `$for` on the SAME element.
+ *    Doing so produces duplicated DOM on toggle because the two directives
+ *    share an owner node and clone its scope independently. Wrap one in a
+ *    parent element instead, e.g.:
+ *
+ *        <div $if="visible">
+ *            <li $for="item in items">{{item.name}}</li>
+ *        </div>
+ *
+ *    or
+ *
+ *        <ul $for="item in items">
+ *            <li $if="item.visible">{{item.name}}</li>
+ *        </ul>
+ */
+@A_Frame.Define({
+    namespace: 'a-are-html',
+    description: 'Built-in $if directive. Conditionally renders a subtree based on a store expression. Replaces the target element with a stable comment anchor when the condition is false and restores the fully rendered subtree when it becomes true, preventing any leaking of the host element between states.'
+})
 @AreDirective.Priority(2)
 export class AreDirectiveIf extends AreDirective {
 
@@ -69,11 +92,8 @@ export class AreDirectiveIf extends AreDirective {
         @A_Inject(AreDirectiveContext) directiveContext?: AreDirectiveContext,
         ...args: any[]
     ): void {
-
-        console.log('Compiling directive "if" with attribute content:', attribute);
-
         /**
-         * 1. Extract the value from the store based on the attribute content 
+         * 1. Extract the value from the store based on the attribute content
          *    (which is the path to the value in the store)
          */
         attribute.value = syntax.evaluate(attribute.content, store, {
@@ -110,19 +130,21 @@ export class AreDirectiveIf extends AreDirective {
         ...args: any[]
     ): void {
         /**
-         * 1. Extract the value from the store based on the attribute content 
+         * 1. Extract the value from the store based on the attribute content
          *    (which is the path to the value in the store)
          */
-        attribute.value = syntax.evaluate(attribute.content, store);
+        const previous = !!attribute.value;
+        const next = !!syntax.evaluate(attribute.content, store);
+        attribute.value = next;
 
-        if (attribute.value) {
-            attribute.template!.scene.activate();
+        // Skip when truthiness has not changed — avoids redundant mount/unmount.
+        if (previous === next) return;
 
-            attribute.template!.mount()
-        }
-        else {
+        if (next) {
+            attribute.template!.scene.activate();
+            attribute.template!.mount();
+        } else {
             attribute.template!.unmount();
-
             attribute.template!.scene.deactivate();
         }
     }

package/src/engine/AreHTML.compiler.ts

@@ -1,7 +1,7 @@
 import { A_Caller, A_Dependency, A_Feature, A_FormatterHelper, A_Inject } from "@adaas/a-concept";
 import { A_Logger } from "@adaas/a-utils/a-logger";
-import { A_Frame } from "@adaas/a-frame";
-import { AreCompiler, AreScene, AreCompilerError, AreStore } from "@adaas/are";
+import { A_Frame } from "@adaas/a-frame/core";
+import { AreCompiler, AreScene, AreCompilerError, AreStore, AreSyntax } from "@adaas/are";
 import { AreDirectiveAttribute } from "@adaas/are-html/attributes/AreDirective.attribute";
 import { AreStaticAttribute } from "@adaas/are-html/attributes/AreStatic.attribute";
 import { AreDirectiveFeatures } from "@adaas/are-html/directive/AreDirective.constants";
@@ -16,9 +16,8 @@ import { AddListenerInstruction} from "@adaas/are-html/instructions/AddListener.
 
 
 
-@A_Frame.Component({
-    namespace: 'A-ARE',
-    name: 'AreHTMLCompiler',
+@A_Frame.Define({
+    namespace: 'a-are-html',
     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 {
@@ -171,6 +170,7 @@ export class AreHTMLCompiler extends AreCompiler {
         @A_Dependency.Parent()
         @A_Inject(AreStore) parentStore: AreStore,
         @A_Inject(AreStore) store: AreStore,
+        @A_Inject(AreSyntax) syntax: AreSyntax,
         ...args: any[]
     ) {
         if (!scene.host)
@@ -181,45 +181,73 @@ export class AreHTMLCompiler extends AreCompiler {
 
 
         const node = attribute.owner;
+        const props = node.component?.props;
+
+        // Component prop names are typically declared in camelCase, while template
+        // markup uses kebab-case. Try both forms when matching.
+        let propName: string | undefined;
+        if (props) {
+            if (props[attribute.name]) {
+                propName = attribute.name;
+            } else {
+                const camel = A_FormatterHelper.toCamelCase(attribute.name);
+                if (props[camel]) propName = camel;
+            }
+        }
 
         /**
-         * 1. If the binding is related to a component prop, then we should set the value to the component props, so it can be used in the component logic and rendering.
-         *    This is a special case for component props, since they are not regular attributes and have a special meaning and usage in the component. By setting the value directly to the component props, we can ensure that it is properly reactive and can influence the component's behavior and rendering based on its value.
+         * 1. Component prop binding — evaluate against the parent store and
+         *    keep the child store reactive to upstream changes.
          */
-        if (node.component && node.component.props[attribute.name]) {
-            const propDefinition = node.component.props[attribute.name];
-            let value = parentStore.get(attribute.content);
-
-            if (propDefinition.type) {
-                switch (propDefinition.type) {
-                    case 'string':
-                        value = String(value);
-                        break;
-                    case 'number':
-                        value = Number(value);
-                        break;
-                    case 'boolean':
-                        value = Boolean(value);
-                        break;
-                    default:
-                        break;
+        if (propName && props) {
+            const propDefinition = props[propName];
+
+            const coerce = (raw: any): any => {
+                let value = raw;
+                if (propDefinition.type) {
+                    switch (propDefinition.type) {
+                        case 'string': value = value === undefined || value === null ? '' : String(value); break;
+                        case 'number': value = Number(value); break;
+                        case 'boolean': value = Boolean(value); break;
+                    }
                 }
-            }
+                return value;
+            };
+
+            // The watcher entity below is registered against parentStore so that
+            // updates to the bound expression in the parent flow into the child store.
+            const watcher = {
+                update: () => {
+                    try {
+                        parentStore.watch(watcher);
+                        const next = coerce(syntax.evaluate(attribute.content, parentStore));
+                        parentStore.unwatch(watcher);
+                        store.set(propName!, next);
+                    } catch (e) {
+                        parentStore.unwatch(watcher);
+                    }
+                }
+            };
+
+            // Initial read with watch active so dependencies are recorded.
+            parentStore.watch(watcher);
+            const initial = coerce(syntax.evaluate(attribute.content, parentStore));
+            parentStore.unwatch(watcher);
 
-            store.set(attribute.name, value);
+            store.set(propName, initial);
+            return;
         }
+
         /**
-         * 2. In other cases, we just want to add it as a regular attribute to the node, since it can be used in the template and rendering as a dynamic value that can change based on the store value. By adding it as a regular attribute, we can ensure that it is properly rendered and updated in the DOM based on its value in the store.
+         * 2. Default attribute binding — evaluated reactively against the local store.
          */
-        else {
-            const instruction = new AddAttributeInstruction(scene.host, {
-                name: attribute.name,
-                content: attribute.content,
-                evaluate: true
-            })
-
-            scene.plan(instruction);
-        }
+        const instruction = new AddAttributeInstruction(scene.host, {
+            name: attribute.name,
+            content: attribute.content,
+            evaluate: true
+        })
+
+        scene.plan(instruction);
     }