@dooboostore/dom-render 1.0.100 → 1.0.102

package/README.MD

@@ -6,25 +6,25 @@ DOM-RENDER
 * all internal variables are managed by proxy. (DomRenderProxy)
 
 # 🚀 Quick start 
-```html
-<script src="https://cdn.jsdelivr.net/npm/dom-render@1.0.91/dist/bundle.js"></script>
+```typescript
+import { DomRender } from '@dooboostore/dom-render';
+
+class AppData {
+  name: string = 'my name is dom-render';
+}
+
+const data = new AppData();
+DomRender.run(data, document.querySelector('#app')!);
 ```
 ```html
 <!DOCTYPE html>
 <html lang="en">
-<head``>
+<head>
   <meta charset="UTF-8">
   <title>Title</title>
 </head>
 <body id="app">
 ${this.name}$
-<script src="https://cdn.jsdelivr.net/npm/dom-render@1.0.86/dist/bundle.js"></script>
-<script>
-  let data = {
-    name: 'my name is dom-render'
-  };
-  data = DomRender.run(data , document.querySelector('#app'));
-</script>
 </body>
 </html>
 ```
@@ -42,14 +42,18 @@ ${this.name}$
 <body id="app">
 ${this.name}$  <!-- outout: <i>my name is dom-render</i> -->
 #{this.name}# <!-- outout text is italic: my name is dom-render -->
-<script>
-  let data = {
-    name: '<i>my name is dom-render</i>'
-  };
-  data = DomRender.run(data , document.querySelector('#app'));
-</script>
 </body>
 ```
+```typescript
+import { DomRender } from '@dooboostore/dom-render';
+
+class AppData {
+  name: string = '<i>my name is dom-render</i>';
+}
+
+const data = new AppData();
+DomRender.run(data, document.querySelector('#app')!);
+```
 </details>
 
 # dom-render attributes
@@ -141,14 +145,18 @@ uuid: rawSetUUID
 <body id="app">
   <div dr-if="true">true</div>  <!-- render -->
   <div dr-if="this.gender === 'M'">gender: M</div> <!-- No Render -->
-<script>
-  let data = {
-    gender: 'F',
-  };
-  data = DomRender.run(data , document.querySelector('#app'));
-</script>
 </body>
 ```
+```typescript
+import { DomRender } from '@dooboostore/dom-render';
+
+class AppData {
+  gender: string = 'F';
+}
+
+const data = new AppData();
+DomRender.run(data, document.querySelector('#app')!);
+```
 </details>
 
 
@@ -396,6 +404,7 @@ You can get a reference to DOM elements within your component's template using t
 
 - If the decorated property is **not an array type**, it returns the **first** matching element (like `querySelector`).
 - If the decorated property **is an array type** (e.g., `HTMLElement[]`), it returns **all** matching elements as an array (like `querySelectorAll`).
+- When applied to a **method**, the method will be called with the queried element(s) as arguments after the component has been rendered. If the method expects a single element, the first match is passed. If it expects an array, all matches are passed.
 
 This is useful for directly accessing and manipulating elements you need to interact with from your component's logic.
 
@@ -428,6 +437,22 @@ export class MyComponent extends ComponentBase<{}> {
             });
         }
     }
+
+    // Method query: This method will be called with the first element matching '.my-button'
+    @query('.my-button')
+    private setupButton(button: HTMLButtonElement) {
+        if (button) {
+            button.addEventListener('click', () => alert('Button clicked from method query!'));
+        }
+    }
+
+    // Method query: This method will be called with an array of all elements matching 'span.item'
+    @query('span.item')
+    private processItems(spans: HTMLSpanElement[]) {
+        spans.forEach(span => {
+            span.style.fontWeight = 'bold';
+        });
+    }
 }
 ```
 
@@ -441,9 +466,11 @@ export class MyComponent extends ComponentBase<{}> {
         <li>Item 2</li>
         <li>Item 3</li>
     </ul>
+    <button class="my-button">Click Me</button>
+    <p><span class="item">First Span</span> <span class="item">Second Span</span></p>
 </div>
 ```
-The `@query` decorator will assign the corresponding element(s) to the decorated property. The property will be `null`/`undefined` (for single query) or an empty array (for multiple query) if no elements are found or before the component is rendered.
+The `@query` decorator will assign the corresponding element(s) to the decorated property or pass them to the decorated method. The property will be `null`/`undefined` (for single query) or an empty array (for multiple query) if no elements are found or before the component is rendered. For methods, they will only be called if matching elements are found.
 
 </details>
 
@@ -637,16 +664,22 @@ dr-value-link: <input type="text" dr-value-link="@this@.office.addr.street"> <br
   age: <input name="age">
   <button type="submit">submit</button>
 </form>
-<script>
-  let data = {
-    form: {},
-    submit() {
-      console.log(this.form);
-    }
-  };
-  data = DomRender.run(data , document.querySelector('#app'));
-</script>
 </body>
+```
+```typescript
+import { DomRender } from '@dooboostore/dom-render';
+
+class FormData {
+  form: any = {};
+
+  submit() {
+    console.log(this.form);
+  }
+}
+
+const data = new FormData();
+DomRender.run(data, document.querySelector('#app')!);
+```
 <!-- 💥 submit call --> 
 <!-- console: {name: 'name data', age: 'age data'}  -->
 ```
@@ -662,24 +695,33 @@ dr-value-link: <input type="text" dr-value-link="@this@.office.addr.street"> <br
     age: <input name="age">
     <button type="submit">submit</button>
 </form>
-<script>
-    const form = new FormValidator();
-    form.name = new NotEmptyValidator();
-    form.age = new NotEmptyValidator();
-    let data = {
-        form,
-        submit() {
-            if (this.form.valid()){
-                console.log('valid');
-            } else {
-                console.log('inValid');
-            }
-        }
-    };
-    data = DomRender.run(data , document.querySelector('#app'));
-</script>
 </body>
 ```
+```typescript
+import { DomRender } from '@dooboostore/dom-render';
+import { FormValidator, NotEmptyValidator } from '@dooboostore/dom-render/validator';
+
+class FormDataWithValidator {
+    form: FormValidator = new FormValidator();
+
+    constructor() {
+        this.form.name = new NotEmptyValidator();
+        this.form.age = new NotEmptyValidator();
+    }
+
+    submit() {
+        if (this.form.valid()){
+            console.log('valid');
+        } else {
+            console.log('inValid');
+        }
+    }
+}
+
+const data = new FormDataWithValidator();
+DomRender.run(data, document.querySelector('#app')!);
+```
+```
 validator
 - Validator (abstract)
 - ValidatorArray (abstract)

package/components/ComponentBase.d.ts

@@ -16,7 +16,7 @@ export declare function attribute(options?: {
     name?: string;
     converter?: (value: string | null) => any;
 }): PropertyDecorator;
-export declare function query(selector: string): PropertyDecorator;
+export declare function query(selector: string): (target: object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => void;
 export declare function event(options: {
     query: string;
     name: string;

package/components/ComponentBase.js

@@ -8,32 +8,46 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import 'reflect-metadata';
+import { ElementUtils } from '@dooboostore/core-web/element/ElementUtils';
 import { RawSet } from '../rawsets/RawSet';
 import { DomRenderNoProxy } from '../decorators/DomRenderNoProxy';
 import { ConvertUtils } from '@dooboostore/core/convert/ConvertUtils';
 import * as Render from '../rawsets/Render';
+import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
 export const ATTRIBUTE_METADATA_KEY = Symbol('attribute');
 export const QUERY_METADATA_KEY = Symbol('query');
 export const EVENT_METADATA_KEY = Symbol('event');
 export function attribute(options) {
     return (target, propertyKey) => {
-        Reflect.defineMetadata(ATTRIBUTE_METADATA_KEY, Object.assign(Object.assign({}, options), { name: (options === null || options === void 0 ? void 0 : options.name) || propertyKey }), target, propertyKey);
+        const attributes = ReflectUtils.getMetadata(ATTRIBUTE_METADATA_KEY, target.constructor) || [];
+        attributes.push({
+            propertyKey: propertyKey,
+            name: (options === null || options === void 0 ? void 0 : options.name) || propertyKey,
+            converter: options === null || options === void 0 ? void 0 : options.converter
+        });
+        ReflectUtils.defineMetadata(ATTRIBUTE_METADATA_KEY, attributes, target.constructor);
     };
 }
 export function query(selector) {
-    return (target, propertyKey) => {
-        Reflect.defineMetadata(QUERY_METADATA_KEY, { selector }, target, propertyKey);
+    return (target, propertyKey, descriptor) => {
+        const queries = ReflectUtils.getMetadata(QUERY_METADATA_KEY, target.constructor) || [];
+        queries.push({
+            selector: selector,
+            propertyKey: propertyKey,
+            isMethod: !!descriptor
+        });
+        ReflectUtils.defineMetadata(QUERY_METADATA_KEY, queries, target.constructor);
     };
 }
 export function event(options) {
     return (target, propertyKey, descriptor) => {
-        const events = Reflect.getMetadata(EVENT_METADATA_KEY, target.constructor) || [];
+        const events = ReflectUtils.getMetadata(EVENT_METADATA_KEY, target.constructor) || [];
         events.push({
             query: options.query,
             eventName: options.name,
             methodName: propertyKey
         });
-        Reflect.defineMetadata(EVENT_METADATA_KEY, events, target.constructor);
+        ReflectUtils.defineMetadata(EVENT_METADATA_KEY, events, target.constructor);
     };
 }
 export class ComponentBase {
@@ -47,25 +61,13 @@ export class ComponentBase {
         var _a, _b, _c, _d;
         const e = this.getElement();
         if (e) {
-            return Array.from(e.querySelectorAll(selector));
+            return ElementUtils.querySelectorAll(e, selector);
         }
         else {
             const startNode = (_b = (_a = this.rawSet) === null || _a === void 0 ? void 0 : _a.point) === null || _b === void 0 ? void 0 : _b.start;
             const endNode = (_d = (_c = this.rawSet) === null || _c === void 0 ? void 0 : _c.point) === null || _d === void 0 ? void 0 : _d.end;
-            if (startNode && endNode && startNode.parentNode === endNode.parentNode) {
-                const elements = [];
-                let currentNode = startNode.nextSibling;
-                while (currentNode && currentNode !== endNode) {
-                    if (currentNode.nodeType === Node.ELEMENT_NODE) {
-                        const currentElement = currentNode;
-                        if (currentElement.matches(selector)) {
-                            elements.push(currentElement);
-                        }
-                        elements.push(...Array.from(currentElement.querySelectorAll(selector)));
-                    }
-                    currentNode = currentNode.nextSibling;
-                }
-                return elements;
+            if (startNode && endNode) {
+                return ElementUtils.querySelectorAll({ start: startNode, end: endNode }, selector);
             }
         }
         return [];
@@ -171,12 +173,12 @@ export class ComponentBase {
         if (other.rawSet) {
             this.setRawSet(other.rawSet);
         }
-        for (const propertyKey in this) {
-            const metadata = Reflect.getMetadata(ATTRIBUTE_METADATA_KEY, this, propertyKey);
-            if (metadata && metadata.name) {
-                if (this.equalsAttributeName(name, metadata.name)) {
-                    const finalValue = metadata.converter ? metadata.converter(value) : value;
-                    this[propertyKey] = finalValue;
+        const attributes = ReflectUtils.getMetadata(ATTRIBUTE_METADATA_KEY, this.constructor);
+        if (attributes && Array.isArray(attributes)) {
+            for (const attrInfo of attributes) {
+                if (this.equalsAttributeName(name, attrInfo.name)) {
+                    const finalValue = attrInfo.converter ? attrInfo.converter(value) : value;
+                    this[attrInfo.propertyKey] = finalValue;
                 }
             }
         }
@@ -189,21 +191,38 @@ export class ComponentBase {
                 e.component = this;
             }
             // Handle @query decorators
-            for (const propertyKey in this) {
-                const metadata = Reflect.getMetadata(QUERY_METADATA_KEY, this, propertyKey);
-                if (metadata && metadata.selector) {
-                    const propertyType = Reflect.getMetadata("design:type", this, propertyKey);
-                    const elements = this._queryElements(metadata.selector);
-                    if (propertyType === Array) {
-                        this[propertyKey] = elements;
+            const queries = ReflectUtils.getMetadata(QUERY_METADATA_KEY, this.constructor);
+            if (queries && Array.isArray(queries)) {
+                for (const queryInfo of queries) {
+                    const { selector, propertyKey, isMethod } = queryInfo;
+                    const elements = this._queryElements(selector);
+                    if (isMethod) {
+                        const method = this[propertyKey];
+                        if (typeof method === 'function') {
+                            const paramTypes = ReflectUtils.getParameterTypes(this, propertyKey);
+                            if (paramTypes && paramTypes.length > 0 && paramTypes[0] === Array) {
+                                method.call(this, elements);
+                            }
+                            else {
+                                if (elements.length > 0) {
+                                    method.call(this, elements[0]);
+                                }
+                            }
+                        }
                     }
                     else {
-                        this[propertyKey] = elements[0] || null;
+                        const propertyType = ReflectUtils.getType(this, propertyKey);
+                        if (propertyType === Array) {
+                            this[propertyKey] = elements;
+                        }
+                        else {
+                            this[propertyKey] = elements[0] || null;
+                        }
                     }
                 }
             }
             // Handle @event decorators
-            const events = Reflect.getMetadata(EVENT_METADATA_KEY, this.constructor);
+            const events = ReflectUtils.getMetadata(EVENT_METADATA_KEY, this.constructor);
             if (events && Array.isArray(events)) {
                 for (const eventInfo of events) {
                     const elements = this._queryElements(eventInfo.query);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/dom-render",
-  "version": "1.0.100",
+  "version": "1.0.102",
   "license": "MIT",
   "description": "html view template engine",
   "keywords": [
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "reflect-metadata": "^0.2.2",
-    "@dooboostore/core": "1.0.7",
+    "@dooboostore/core": "1.0.8",
     "@dooboostore/core-web": "1.0.1",
     "@dooboostore/core-node": "1.0.1"
   },