@adaas/are 0.0.2

package/examples/jumpstart/public/static/css/main.css

@@ -0,0 +1,40 @@
+  body {
+      font-family: sans-serif;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      background: #f2f2f2;
+      overflow: hidden;
+    }
+
+    .card {
+      background: white;
+      padding: 24px;
+      border-radius: 12px;
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+      width: 300px;
+    }
+
+    .card input {
+      width: 100%;
+      padding: 8px;
+      margin: 6px 0;
+      border: 1px solid #ccc;
+      border-radius: 6px;
+    }
+
+    .card button {
+      width: 100%;
+      padding: 8px;
+      margin-top: 8px;
+      border: none;
+      background: #007bff;
+      color: white;
+      border-radius: 6px;
+      cursor: pointer;
+    }
+
+    .card button:hover {
+      background: #0056b3;
+    }

package/examples/jumpstart/src/components/A-Btn.component.ts

@@ -0,0 +1,124 @@
+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 { Are, AreEvent, AreNode, AreScene, AreStore } from "src";
+
+
+export class ABtn extends Are {
+
+
+    @Are.Template
+    async template(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreStore) store: AreStore,
+    ) {
+        node.setTemplate(`
+        <button class="a-btn" @click="handleClick"> Make it:  {{name}} {{number}}</button> 
+            <a-input $if="showInput" ></a-input>
+        <button class="a-btn" @click="handleClick2"> Do:  {{btn2}}</button> 
+            <a-input $if="showInput2" ></a-input>
+        `);
+    }
+
+
+    @Are.Styles
+    async styles(
+        @A_Inject(A_Caller) node: AreNode,
+    ): Promise<void> {
+        node.setStyles(`
+            .a-btn {
+                padding: 10px 20px;
+                background-color: {{bgColor}}!important;
+                color: white;
+                border: none;
+                border-radius: 4px;
+                cursor: pointer;
+                font-size: 16px;
+            }
+        `);
+    }
+
+    @Are.Data
+    async data(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreStore) store: AreStore,
+    ) {
+        store.set({
+            name: 'A_Button Element',
+            showInput: false,
+            bgColor: '#007BFF',
+            btn2: 'Button 2',
+            showInput2: false,
+            number: 0,
+        });
+    }
+
+    // @Are.onBeforeLoad
+    // async onLoad(
+    //     @A_Inject(A_Caller) node: AreNode,
+    //     @A_Inject(AreStore) store: AreStore,
+    //     @A_Inject(A_Logger) logger: A_Logger,
+    // ) {
+    //     logger.debug('red', `Before ABtn Component Load ... : <${node.aseid.entity}> : ${node.aseid.toString()}`);
+    // }
+
+    // @Are.onAfterLoad
+    // async onAfterLoad(
+    //     @A_Inject(A_Caller) node: AreNode,
+    //     @A_Inject(AreStore) store: AreStore,
+    //     @A_Inject(A_Logger) logger: A_Logger,
+    // ) {
+    //     logger.debug('red', `After ABtn Component Load ... : <${node.aseid.entity}> : ${node.aseid.toString()}`);
+    // }
+
+    @Are.EventHandler
+    async handleClick(
+        @A_Inject(A_Scope) scope: A_Scope,
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreStore) store: AreStore,
+        @A_Inject(A_Logger) logger: A_Logger,
+        @A_Inject(AreEvent) event: AreEvent,
+        @A_Inject(AreScene) scene: AreScene,
+    ) {
+
+        //  just set random Text
+        store.set('number', Math.floor(Math.random() * 1000));
+        store.set('name', `Clicked! `);
+
+        console.log('Changing ShowInput from ', store.get('showInput'));
+        store.set('showInput', !store.get('showInput'));
+
+        console.log('Changing ShowInput to ', store.get('showInput'), store);
+
+        store.set('bgColor', '#ff5733');
+
+        console.log('event data:', event);
+
+        await node.update();
+
+        // await new AreUpdateSignal(node).next(scope);
+    }
+
+
+    @Are.EventHandler
+    async handleClick2(
+        @A_Inject(A_Scope) scope: A_Scope,
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreStore) store: AreStore,
+        @A_Inject(A_Logger) logger: A_Logger,
+        @A_Inject(AreEvent) event: AreEvent,
+        @A_Inject(AreScene) scene: AreScene,
+    ) {
+
+        //  just set random Text
+        store.set('btn2', `Button 2 Clicked! `);
+
+        store.set('showInput2', !store.get('showInput2'));
+
+        console.log('event data:', event);
+
+        await node.update();
+
+        // await new AreUpdateSignal(node).next(scope);
+    }
+
+}

package/examples/jumpstart/src/components/A-Input.component.ts

@@ -0,0 +1,78 @@
+import { A_Caller, A_Feature, A_Inject, A_Scope } from "@adaas/a-concept";
+
+import { A_Logger } from "@adaas/a-utils/a-logger";
+import { Are, AreEvent, AreNode, AreScene, AreStore } from "src";
+
+
+export class AInput extends Are {
+
+
+    @Are.Template
+    async template(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(A_Logger) logger: A_Logger
+    ) {
+        logger.info('blue', `AInput template called... : <${node.aseid.entity}> : `, node.aseid.toString());
+
+        node.setTemplate(`
+            <div><input $no-update @input="onChange" :value="inputValue" type="text" :placeholder="placeholder"> </input>  {{inputValue}}</div>
+            `);
+    }
+
+    @Are.Data
+    async data(
+        @A_Inject(AreStore) store: AreStore,
+    ) {
+        store.set({
+            placeholder: 'A_Input Element',
+            inputValue: 'Test',
+        });
+    }
+
+
+    @Are.EventHandler
+    async A_UI_NODE_onBeforeLoad(
+        @A_Inject(AreNode) node: AreNode,
+        @A_Inject(A_Scope) scope: A_Scope,
+        @A_Inject(AreStore) store: AreStore,
+        @A_Inject(A_Logger) logger: A_Logger,
+    ): Promise<void> {
+        logger.log('green', `AInput is initializing... : <${node.aseid.entity}> : `, node.aseid.toString());
+
+        // store.data.set('btnName', 'Nope');
+    }
+
+
+    @Are.EventHandler
+    async onChange(
+        @A_Inject(A_Scope) scope: A_Scope,
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreStore) store: AreStore,
+        @A_Inject(A_Logger) logger: A_Logger,
+        @A_Inject(AreEvent) event: AreEvent<InputEvent>,
+        @A_Inject(AreScene) scene: AreScene,
+    ) {
+
+        // const timeout = store.get('timeout');
+
+        // clearTimeout(timeout);
+        if (event.data.target === null
+            ||
+            store.get('inputValue') === (event.data.target as HTMLInputElement).value
+        ) return;
+
+        logger.log('green', `AInput onChange event triggered... : <${node.aseid.entity}> : `, node.aseid.toString(), (event.data.target as HTMLInputElement).value);
+
+
+
+        store.set('inputValue', (event.data.target as HTMLInputElement).value);
+
+
+        // store.set('timeout', setTimeout(async () => {
+        await node.update();
+
+        // }, 1000))
+
+    }
+
+}

package/examples/jumpstart/src/components/A-Navigation.component.ts

@@ -0,0 +1,167 @@
+import { A_Caller, A_Dependency, A_Feature, A_FormatterHelper, A_Inject, A_Scope } from "@adaas/a-concept";
+import { A_SignalBus } from "@adaas/a-utils/a-signal";
+import { A_Logger } from "@adaas/a-utils/a-logger";
+import { Are, AreCompiler, AreEvent, AreIndex, AreNode, AreRouteSignal, AreScene, AreStore } from "src";
+
+
+export class ANavigation extends Are {
+
+
+    @Are.Template
+    async template(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreStore) store: AreStore,
+    ) {
+
+        console.log('ANavigation template called... : ', store
+            .get('items'));
+
+        node.setTemplate(`
+            <div class="a-navigation">
+                <h2>{{title}}</h2>
+
+                <span> Navigate to: {{activeId}}</span>
+                <ul>
+                ${store
+                .get('items')
+                .map((item: string) => `
+                        <li @click="navigate" class=${store.get('activeId') == item ? 'active' : ''} >
+                            <a href="#${item.toLowerCase()}">${item}
+                            </a>
+                        </li>
+                    `).join('')
+            }
+                </ul>
+            </div>
+        `);
+    }
+
+
+    @Are.Styles
+    async styles(
+        @A_Inject(A_Caller) node: AreNode,
+    ): Promise<void> {
+        node.setStyles(`
+            .a-navigation {
+                padding: 10px;
+                position: absolute;
+                top: 0;
+                width: 250px;
+                left: 0;    
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+
+            }
+
+            .a-navigation ul {
+                list-style-type: none;
+                padding: 0;
+                width: 100%;
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+            }
+
+            .a-navigation li {
+                padding: 10px 0;
+                text-align: center;
+                cursor: pointer;
+                width: 100%;
+            }
+
+            .a-navigation li:hover {
+                background-color: red;
+            }
+
+            .a-navigation li a {
+                text-decoration: none;
+                color: #333;
+                font-weight: bold;
+            }
+
+            .a-navigation li.active a {
+                color: #007BFF;
+            }
+        `);
+    }
+
+    @Are.Data
+    async data(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreStore) store: AreStore,
+    ) {
+        store.set({
+            title: 'A_Navigation Component',
+            items: ['Home', 'About', 'Services', 'Contact'],
+        });
+    }
+
+
+    @Are.EventHandler
+    async navigate(
+        @A_Inject(A_Scope) scope: A_Scope,
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreStore) store: AreStore,
+        @A_Inject(A_Logger) logger: A_Logger,
+        @A_Inject(AreEvent) event: AreEvent<{ target: HTMLElement }>,
+        @A_Inject(AreScene) scene: AreScene,
+        @A_Inject(AreIndex) index: AreIndex,
+
+        @A_Dependency.Parent()
+        @A_Inject(AreScene) parentScene: AreScene,
+
+        @A_Inject(A_SignalBus) bus: A_SignalBus,
+        @A_Inject(AreCompiler) compiler: AreCompiler,
+    ) {
+
+        await bus.next(new AreRouteSignal('/home'))
+
+        const existingItems = store.get('items') as string[];
+        store.set('activeId', event.data.target.innerText);
+
+        existingItems.push('New Item ' + Math.floor(Math.random() * 100));
+
+        store.set('items', existingItems);
+
+        //  drop all render plans related to this node
+        // node.unmount()
+
+        // //  load node again
+        // scene.reset();
+        // node.scope.deregister(scene);
+
+        // node.scope.deregister(AreNode);
+
+        // const newNodeScene = new AreScene(node.aseid);
+
+        // node.scope.register(newNodeScene);
+
+        const newNodeScene = scene;
+        await this.template(node, store);
+
+
+        
+
+        compiler.index(node);
+
+        logger?.debug(newNodeScene.debugPrefix + `Loaded component <${node.aseid.entity}> with ${this.constructor.name}`);
+
+        for (const sceneNode of newNodeScene.nodes()) {
+            if (!newNodeScene.isAttached(sceneNode)) {
+                newNodeScene.attach(sceneNode)
+                await sceneNode.load();
+            }
+        }
+
+        console.log('Recompiled node:', node, node.scope);
+
+        // finally compile and render
+        await node.update();
+    }
+
+
+
+}

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

@@ -0,0 +1,127 @@
+import { A_Caller, A_Concept, A_Context, A_Feature, A_Inject, A_Scope } from "@adaas/a-concept";
+import { A_Logger } from "@adaas/a-utils/a-logger";
+import { Are, AreNode, AreStore } from "src";
+
+export function validateEmail(email: string): boolean {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+}
+
+export function showAlert(message: string): void {
+    alert(message);
+}
+
+export class SignInComponent extends Are {
+
+
+    @Are.Data
+    async data(
+        @A_Inject(AreStore) store: AreStore,
+        @A_Inject(A_Logger) logger: A_Logger,
+    ) {
+
+        store.set({
+            btnName: 'Sign In'
+        });
+    }
+
+    @Are.Styles
+    async styles(
+        @A_Inject(A_Caller) node: AreNode,
+    ): Promise<void> {
+        node.setStyles(` 
+        .card {
+            background-color: #f9f9f9;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            padding: 20px;
+            max-width: 300px;
+            margin: 0 auto;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            position:absolute;
+            top:50%;
+            left:50%;
+            transform: translate(-50%, -50%);
+        }
+            `   );
+    }
+
+    @Are.Template
+    async template(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(A_Logger) logger: A_Logger,
+    ): Promise<void> {
+        logger.info('blue', `SignInComponent template called... : <${node.aseid.entity}> : `, node.aseid.toString());
+
+        node.setTemplate(`
+              <div class="card">
+                <h2>Sign In</h2>
+                <input type="email" id="email" placeholder="Email" />
+                <input type="password" id="password" placeholder="Password" />
+                <a-btn  :name="btnName" :style="{ color: 'red' }"></a-btn>
+              </div>
+            `);
+    }
+
+
+    // @A_Feature.Extend({
+    //     scope: [SignInComponent]
+    // })
+    // async A_UI_NODE_onBeforeLoad(
+    //     @A_Inject(AreNode) node: AreNode,
+    //     @A_Inject(A_Scope) scope: A_Scope,
+    //     @A_Inject(A_UI_NodeStore) store: A_UI_NodeStore,
+    //     @A_Inject(A_Logger) logger: A_Logger,
+    // ): Promise<void> {
+
+    //     logger.log('green', `SignInComponent is initializing... : <${node.aseid.entity}> : `, node.aseid.toString());
+
+
+    //     store.data.set('btnName', 'Custom Sign In Button');
+    // }
+
+
+    // private addListeners(): void {
+    //     const btn = document.getElementById("signInBtn") as HTMLButtonElement;
+    //     btn.addEventListener("click", () => this.signIn());
+    // }
+
+    // private async signIn(): Promise<void> {
+    //     const email = (document.getElementById("email") as HTMLInputElement).value;
+    //     const password = (document.getElementById("password") as HTMLInputElement).value;
+
+    //     const signInCommand = new SignInCommand({
+    //         username: email,
+    //         password
+    //     });
+
+
+    //     A_Context.scope(this).register(signInCommand);
+
+    //     await signInCommand.execute();
+
+    //     console.log("SignIn Command Result:", signInCommand.toJSON());
+    // }
+
+
+    // @A_Feature.Extend({
+    //     name: A_CommandFeatures.onComplete,
+    //     scope: {
+    //         include: [SignInCommand]
+    //     }
+    // })
+    // async handleSuccessSignIn(
+    //     @A_Inject(A_Memory) memory: A_Memory<{ token: SerializedToken }>,
+    //     @A_Inject(A_Caller) command: SignInCommand,
+    // ) {
+
+    //     console.log("Sign-in completed with result:", command.result);
+
+    //     alert(command.result)
+
+    //     const resultToken = await memory.get('token')
+
+    //     const token = new Token(resultToken);
+
+    //     memory.set('token', token as any);
+    // }
+}

package/examples/jumpstart/src/concept.ts

@@ -0,0 +1,92 @@
+import { A_Concept, A_CONSTANTS__DEFAULT_ENV_VARIABLES_ARRAY, A_Container, A_Context } from "@adaas/a-concept"
+import { SignInComponent } from "./components/SignInComponent.component"
+import { ABtn } from "./components/A-Btn.component";
+import { AInput } from "./components/A-Input.component";
+import { AreRouteSignal } from "src/signals/AreRoute.signal";
+import { ANavigation } from "./components/A-Navigation.component";
+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 } from "@adaas/a-utils/a-signal";
+import { A_Polyfill } from "@adaas/a-utils/a-polyfill";
+import { AreApp, AreContext, AreHTMLEngine, AreInitSignal, AreRoot, AreSyntax } from "src";
+import { AreSlot } from "src/lib/AreSlot/AreSlot.component";
+
+
+// //  TODO: Fix for build system ---
+// window.process = { env: { NODE_ENV: 'production' }, cwd: () => "/" } as any; // --- IGNORE ---
+// window.__dirname = "/"; // --- IGNORE ---
+
+(async () => {
+    try {
+
+        const container = new AreApp({
+            name: 'ARE Jumpstart',
+            components: [
+                // ----------------------------------
+                // Allowed Entities 
+                // ----------------------------------
+                // ............
+                // ----------------------------------
+                // Allowed Commands 
+                // ----------------------------------
+                // ............
+                // ----------------------------------
+                // UI Components 
+                // ----------------------------------
+                SignInComponent,
+                ABtn,
+                AInput,
+                AreSlot,
+                A_SignalBus,
+                // ----------------------------------
+                // Addons 
+                // ----------------------------------
+                AreRoot,
+                ConfigReader,
+                AreHTMLEngine,
+                A_Logger,
+                AreSyntax,
+                ANavigation
+            ],
+            entities: [
+                // ............
+                AreInitSignal,
+                AreRouteSignal
+            ],
+            fragments: [
+                new AreContext(document.body.innerHTML),
+              
+                new A_Config({
+                    defaults: {
+                        [A_LOGGER_ENV_KEYS.LOG_LEVEL]: 'info',
+                    }
+                }),
+            ]
+        });
+
+        const concept = new A_Concept({
+            name: 'adaas-are-example-jumpstart',
+            fragments: [new A_Config({
+                variables: ['CONFIG_VERBOSE', 'DEV_MODE'] as const,
+                defaults: {
+                    CONFIG_VERBOSE: true,
+                    DEV_MODE: true
+                }
+            })],
+            components: [A_Logger, ConfigReader, A_Polyfill],
+            containers: [container]
+        })
+
+
+        await concept.load();
+        await concept.start();
+
+
+    } catch (error) {
+        const logger = A_Context.root.resolve<A_Logger>(A_Logger)!;
+        logger.error(error);
+    }
+
+
+
+})();

package/jest.config.ts

@@ -0,0 +1,26 @@
+import type { Config } from '@jest/types';
+
+// Sync object
+const config: Config.InitialOptions = {
+    verbose: true,
+
+    transform: {
+        '^.+\\.tsx?$': 'ts-jest'
+    },
+    moduleNameMapper: {
+        "@adaas/are/constants/(.*)": ["<rootDir>/src/constants/$1"],
+        "@adaas/are/lib/(.*)": ["<rootDir>/src/lib/$1"],
+        "@adaas/are/decorators/(.*)": ["<rootDir>/src/decorators/$1"],
+        "@adaas/are/types/(.*)": ["<rootDir>/src/types/$1"],
+        "@adaas/are/helpers/(.*)": ["<rootDir>/src/helpers/$1"],
+        "@adaas/are/defaults/(.*)": ["<rootDir>/src/defaults/$1"],
+
+        "@adaas/are/context/(.*)": ["<rootDir>/src/context/$1"],
+        "@adaas/are/components/(.*)": ["<rootDir>/src/components/$1"],
+        "@adaas/are/containers/(.*)": ["<rootDir>/src/containers/$1"],
+        "@adaas/are/entities/(.*)": ["<rootDir>/src/entities/$1"],
+        "@adaas/are/channels/(.*)": ["<rootDir>/src/channels/$1"],
+    }
+
+};
+export default config;