@adaas/are 0.0.2 → 0.0.3

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

@@ -1,40 +0,0 @@
-  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

@@ -1,124 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,167 +0,0 @@
-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

@@ -1,127 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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);
-    }
-
-
-
-})();