npm - @adaas/are-html - Versions diffs - 0.0.2 - Mend

@adaas/are-html 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (365) hide show

package/examples/jumpstart/dist/static/css/main.css ADDED Viewed

@@ -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/dist/static/img/test.png ADDED Viewed

Binary file

package/examples/jumpstart/public/index.html ADDED Viewed

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Sign In</title>
+  <link rel="stylesheet" href="/static/css/main.css" />
+  <style>
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #f0f2f5;
+    }
+    are-root {
+      display: flex;
+      min-height: 100vh;
+    }
+    list-component {
+      display: block;
+      width: 240px;
+      background: #1e1e2e;
+      padding: 16px 0;
+      min-height: 100vh;
+    }
+    .menu-section {
+      padding: 12px 20px 6px;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: #6b7280;
+    }
+    .menu {
+      list-style: none;
+      margin-bottom: 8px;
+    }
+    .menu-item {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 9px 20px;
+      cursor: pointer;
+      color: #9ca3af;
+      font-size: 14px;
+      border-left: 3px solid transparent;
+      transition: background 0.15s, color 0.15s;
+      user-select: none;
+    }
+    .menu-item:hover {
+      background: #2a2a3e;
+      color: #e5e7eb;
+    }
+    .menu-item-active {
+      background: #2a2a3e;
+      color: #ffffff;
+      border-left-color: #6366f1;
+    }
+    .menu-icon {
+      font-size: 16px;
+      width: 20px;
+      text-align: center;
+      flex-shrink: 0;
+    }
+    .menu-text {
+      flex: 1;
+    }
+    .menu-badge {
+      background: #6366f1;
+      color: #fff;
+      font-size: 11px;
+      font-weight: 600;
+      padding: 2px 7px;
+      border-radius: 10px;
+      min-width: 20px;
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+  <are-root id="app">
+    <list-component></list-component>
+  </are-root>
+  <script type="module" src="./{{BUNDLE_ID}}.js"></script>
+</body>
+</html>

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

@@ -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/public/static/img/test.png ADDED Viewed

Binary file

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

@@ -0,0 +1,150 @@
+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 } from "@adaas/are";
+import { AreEvent } from "@adaas/are";
+import { AreNode } from "@adaas/are";
+import { AreScene } from "@adaas/are";
+import { AreStore } from "@adaas/are";
+// @Are.Condition([
+//     new AreRouteSignal('/home')
+// ])
+export class ABtn extends Are {
+    props: Record<string, any> = {
+        name: {
+            type: 'string',
+            default: 'A_Button Element',
+        }
+    };
+    @Are.Template
+    async template(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(AreStore) store: AreStore,
+    ) {
+        node.setContent(`
+                <button class="a-btn" @click="handleClick"> Make it:  {{name}} {{number}}</button>
+        `);
+    }
+    @AreStore.Function
+    filter(test: string) {
+        /**
+         * NO THIS!!!! because this - is actually Are Component,
+         * if you need any parameter - you should pass it to the function, but you can't use this to access component's properties or methods, because this will be undefined, and you can't use this to access store's properties or methods, because this will be undefined as well. This function is just a pure function that can be used to manipulate data in the store, but it won't have access to the component's scope or other features, so we can keep the store's logic separate from the component's logic.
+         */
+        console.log('test', test);
+    }
+    @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 ADDED Viewed

@@ -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 "@adaas/are";
+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 ADDED Viewed

@@ -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 "@adaas/are";
+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();
+    }
+}