@dooboostore/dom-render 1.0.99 → 1.0.102

package/components/ComponentBase.js

@@ -7,18 +7,77 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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) => {
+        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, 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 = ReflectUtils.getMetadata(EVENT_METADATA_KEY, target.constructor) || [];
+        events.push({
+            query: options.query,
+            eventName: options.name,
+            methodName: propertyKey
+        });
+        ReflectUtils.defineMetadata(EVENT_METADATA_KEY, events, target.constructor);
+    };
+}
 export class ComponentBase {
-    // private attributeData?: FieldUnionType<T, null>;
     get render() {
         return this._render;
     }
     get rawSet() {
         return this._rawSet;
     }
+    _queryElements(selector) {
+        var _a, _b, _c, _d;
+        const e = this.getElement();
+        if (e) {
+            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) {
+                return ElementUtils.querySelectorAll({ start: startNode, end: endNode }, selector);
+            }
+        }
+        return [];
+    }
+    _cleanupEventListeners() {
+        for (const { element, eventName, listener } of this._boundEventListeners) {
+            element.removeEventListener(eventName, listener);
+        }
+        this._boundEventListeners = [];
+    }
     getAttribute(name, attribute = this._attribute) {
         const target = attribute;
         if (!target) {
@@ -47,35 +106,6 @@ export class ComponentBase {
         }
         return null;
     }
-    // get attribute(): T | undefined {
-    //   const handler = {
-    //     get(target: any, prop: string) {
-    //       let p = prop;
-    //       if (p in target) {
-    //         return target[p];
-    //       }
-    //       p = ConvertUtils.snakeToCamelCase(prop);
-    //       if (p in target) {
-    //         return target[p];
-    //       }
-    //       p = ConvertUtils.camelToSnakeCase(prop);
-    //       if (p in target) {
-    //         return target[p];
-    //       }
-    //       p = prop.toUpperCase()
-    //       if (p in target) {
-    //         return target[p];
-    //       }
-    //       p = prop.toLowerCase()
-    //       if (p in target) {
-    //         return target[p];
-    //       }
-    //       return null;
-    //     }
-    //   };
-    //   const obj = new Proxy(this._attribute, handler);
-    //   return obj;
-    // }
     hasAttribute(name) {
         return this.getAttribute(name) !== null;
     }
@@ -86,15 +116,6 @@ export class ComponentBase {
             n.toUpperCase() === name.toUpperCase() ||
             n.toLowerCase() === name.toLowerCase();
     }
-    // attribute(name: keyof T, {attribute = this._attribute}: {equals?: (data: T[keyof T]) => void, notEquals?: () => void,attribute?: T} = {}) {
-    //   const data = this.getAttribute(name, attribute)
-    //   return n === name ||
-    //   ConvertUtils.snakeToCamelCase(n) === name ||
-    //   ConvertUtils.camelToSnakeCase(n) === name ||
-    //     n.toUpperCase() === (name as string).toUpperCase() ||
-    //     n.toLowerCase() === (name as string).toLowerCase()
-    //   ;
-    // }
     get uuid() {
         var _a;
         return (_a = this._rawSet) === null || _a === void 0 ? void 0 : _a.uuid;
@@ -113,82 +134,115 @@ export class ComponentBase {
         var _a;
         return (_a = this.render) === null || _a === void 0 ? void 0 : _a.parentThis;
     }
-    // 구현 시그니처 (오버로드 시그니처보다 더 일반적이어야 함)
     getChildren(typeOrTypes) {
         const targets = Array.isArray(typeOrTypes) ? typeOrTypes : [typeOrTypes];
-        // filter의 결과는 항상 배열이므로 `?? []`는 필요 없습니다.
-        // filter가 아무것도 찾지 못하면 빈 배열을 반환합니다.
         return this._children.filter(child => targets.some(targetConstructor => child instanceof targetConstructor));
     }
-    // getChildren<T extends ConstructorType<any>[] | ConstructorType<any>>(
-    //   type: T
-    // ): T extends (infer U)[] ? InstanceType<U>[] : T extends ConstructorType<infer V> ? V[] : never {
-    //   const target = Array.isArray(type) ? type : [type];
-    //   return this._children.filter(it => target.some(t => it instanceof t)) ?? [];
-    // }
-    // getChildren<T>(type: ConstructorType<T> | ConstructorType<T>[]): T[] {
-    //   const target = Array.isArray(type) ? type : [type];
-    //   return this._children.filter(it => target.some(t => it instanceof t)) ?? [];
-    // }
-    /*
-      getChildren<T>(type: ConstructorType<T>): T[] {
-      return this._children.filter(it => it instanceof type) ?? [];
-    }
-     */
     constructor(config) {
         this.config = config;
         this._children = [];
+        this._boundEventListeners = [];
+    }
+    setRawSet(rawSet) {
+        var _a, _b;
+        this._rawSet = rawSet;
+        if (this._rawSet) {
+            this.setAttribute((_b = (_a = this._rawSet.dataSet) === null || _a === void 0 ? void 0 : _a.render) === null || _b === void 0 ? void 0 : _b.attribute);
+        }
     }
     setAttribute(attribute) {
         this._attribute = attribute;
-        // this.attributeData = this._attribute;
     }
     onCreatedThisChild(child, data) {
         this._children.push(child);
-        // this._rawSet = data.render?.rawSet;
-        // this._attribute = data.render?.attribute as T;
     }
     onCreateRenderData(data) {
-        var _a, _b, _c, _d, _e, _f, _g;
-        this._rawSet = (_a = data.render) === null || _a === void 0 ? void 0 : _a.rawSet;
-        this.setAttribute((_b = data.render) === null || _b === void 0 ? void 0 : _b.attribute);
+        var _a, _b, _c, _d, _e, _f;
         this._render = data.render;
-        if ((_c = this.config) === null || _c === void 0 ? void 0 : _c.onlyParentType) {
-            const isOk = Array.isArray((_d = this.config) === null || _d === void 0 ? void 0 : _d.onlyParentType) ? (_e = this.config) === null || _e === void 0 ? void 0 : _e.onlyParentType : [(_f = this.config) === null || _f === void 0 ? void 0 : _f.onlyParentType].some(it => { var _a; return ((_a = data.render) === null || _a === void 0 ? void 0 : _a.parentThis) instanceof it; });
+        if ((_a = data.render) === null || _a === void 0 ? void 0 : _a.rawSet) {
+            this.setRawSet(data.render.rawSet);
+        }
+        if ((_b = this.config) === null || _b === void 0 ? void 0 : _b.onlyParentType) {
+            const isOk = Array.isArray((_c = this.config) === null || _c === void 0 ? void 0 : _c.onlyParentType) ? (_d = this.config) === null || _d === void 0 ? void 0 : _d.onlyParentType : [(_e = this.config) === null || _e === void 0 ? void 0 : _e.onlyParentType].some(it => { var _a; return ((_a = data.render) === null || _a === void 0 ? void 0 : _a.parentThis) instanceof it; });
             if (!isOk) {
-                throw new Error('only my parentThis ' + ((_g = this.config) === null || _g === void 0 ? void 0 : _g.onlyParentType));
+                throw new Error('only my parentThis ' + ((_f = this.config) === null || _f === void 0 ? void 0 : _f.onlyParentType));
             }
         }
     }
     onChangeAttrRender(name, value, other) {
-        var _a, _b;
         if (other.rawSet) {
-            this._rawSet = other.rawSet;
-            if (this._rawSet) {
-                this.setAttribute((_b = (_a = this._rawSet.dataSet) === null || _a === void 0 ? void 0 : _a.render) === null || _b === void 0 ? void 0 : _b.attribute);
+            this.setRawSet(other.rawSet);
+        }
+        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;
+                }
             }
         }
-        // this.changeAttribute?.(this._attribute);
     }
     onInitRender(param, rawSet) {
-        var _a, _b;
         if (rawSet) {
-            this._rawSet = rawSet;
-            if (this._rawSet) {
-                this.setAttribute((_b = (_a = rawSet.dataSet) === null || _a === void 0 ? void 0 : _a.render) === null || _b === void 0 ? void 0 : _b.attribute);
-            }
+            this.setRawSet(rawSet);
             const e = this.getElement();
             if (e) {
                 e.component = this;
             }
+            // Handle @query decorators
+            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 {
+                        const propertyType = ReflectUtils.getType(this, propertyKey);
+                        if (propertyType === Array) {
+                            this[propertyKey] = elements;
+                        }
+                        else {
+                            this[propertyKey] = elements[0] || null;
+                        }
+                    }
+                }
+            }
+            // Handle @event decorators
+            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);
+                    elements.forEach(element => {
+                        const listener = this[eventInfo.methodName].bind(this);
+                        element.addEventListener(eventInfo.eventName, listener);
+                        this._boundEventListeners.push({ element, eventName: eventInfo.eventName, listener });
+                    });
+                }
+            }
         }
     }
     onDrThisBind() {
+        // Logic moved to onInitRender for robustness
     }
     onDrThisUnBind() {
+        this._cleanupEventListeners();
     }
     onDestroyRender(data) {
-        // console.log('ComponentBase---onDestroyRender----')
+        this._cleanupEventListeners();
     }
 }
 __decorate([
@@ -207,4 +261,8 @@ __decorate([
     DomRenderNoProxy,
     __metadata("design:type", Object)
 ], ComponentBase.prototype, "_attribute", void 0);
+__decorate([
+    DomRenderNoProxy,
+    __metadata("design:type", Array)
+], ComponentBase.prototype, "_boundEventListeners", void 0);
 //# sourceMappingURL=ComponentBase.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/dom-render",
-  "version": "1.0.99",
+  "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"
   },
@@ -66,7 +66,7 @@
     "ts-node-dev": "^2.0.0",
     "tslib": "^2.8.1",
     "@types/node": "^20",
-    "typescript": "^5.8.2",
+    "typescript": "^5.9.2",
     "webpack": "^5.98.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.2.0"

package/rawsets/RawSet.js

@@ -32,8 +32,7 @@ import { DestroyOptionType } from './DestroyOptionType';
 import { RawSetType } from './RawSetType';
 import { DrThisProperty } from '../operators/DrThisProperty';
 import { RawSetOperatorType } from './RawSetOperatorType';
-import cssParse from '../css/parse';
-import cssStringify from '../css/stringify';
+import { CssParser, isStyleRule, isAtRule } from '@dooboostore/core/parser/css/CssParser';
 import { isOnCreateRenderData } from '../lifecycle/OnCreateRenderData';
 import { isOnCreateRender } from '../lifecycle/OnCreateRender';
 import { isOnChangeAttrRender } from '../lifecycle/OnChangeAttrRender';
@@ -390,7 +389,6 @@ export class RawSet {
         }
     }
     static generateStyleTransform(styleBody, componentKey, styleTagWrap = true) {
-        var _a;
         // console.log('style!!!!!!!!!!!!!!!!1', styleBody, componentKey, styleTagWrap);
         if (Array.isArray(styleBody)) {
             styleBody = styleBody.join('\n');
@@ -400,37 +398,43 @@ export class RawSet {
         const end = `#${componentKey}-end`;
         // 이거뭐하는지 까먹었네 뭐였지??..
         // 동적으로 처리하는것같은데.. css 에서는 동적으로 처리하는걸 지향 해야될것같은데 이기능 deprecated 할지 고민중
-        const before = StringUtils.regexExecArrayReplace(styleBody, /(\$\{.*?\}\$)/g, (data) => {
-            // console.log('동적?', `var(--domrender-${data[0]})`)
-            return `var(--domrender-${data[0]})`;
-        });
+        // const before = StringUtils.regexExecArrayReplace(styleBody, /(\$\{.*?\}\$)/g, (data) => {
+        //   // console.log('동적?', `var(--domrender-${data[0]})`)
+        //   return `var(--domrender-${data[0]})`;
+        // });
         // const before = styleBody;
         // console.log('before@@@@@@@@@@@', before)
-        const cssobject = cssParse(before);
-        (_a = cssobject.stylesheet) === null || _a === void 0 ? void 0 : _a.rules.forEach((rule) => {
-            var _a, _b, _c;
-            // console.log('--------cssParse', rule)
-            const isRoot = (_a = rule.selectors) === null || _a === void 0 ? void 0 : _a.find(it => it.startsWith(':root'));
-            if (rule.type === 'rule' && !isRoot) { //  && !!isRoot
-                rule.selectors = (_b = rule.selectors) === null || _b === void 0 ? void 0 : _b.map(sit => {
-                    return this.generateRuleSelector(start, end, sit);
-                });
+        const cssParser = new CssParser(styleBody);
+        const processRule = (rule) => {
+            if (isStyleRule(rule)) {
+                const isRoot = rule.selector.includes(':root');
+                if (!isRoot) {
+                    // Handle comma-separated selectors
+                    const selectors = rule.selector.split(',').map(s => s.trim());
+                    const transformedSelectors = selectors.map(selector => this.generateRuleSelector(start, end, selector));
+                    rule.selector = transformedSelectors.join(', ');
+                }
             }
-            else if (rule.type === 'media' && !isRoot) {
-                (_c = rule.rules) === null || _c === void 0 ? void 0 : _c.forEach((mediaRule) => {
-                    var _a;
-                    mediaRule.selectors = (_a = mediaRule.selectors) === null || _a === void 0 ? void 0 : _a.map(sit => {
-                        return this.generateRuleSelector(start, end, sit);
-                    });
-                    // console.log('--------', mediaRule, mediaRule.selectors)
-                });
+            else if (isAtRule(rule)) {
+                if (rule.name === 'media') {
+                    const hasRoot = rule.children.some(childRule => isStyleRule(childRule) && childRule.selector.includes(':root'));
+                    if (!hasRoot) {
+                        rule.children.forEach(childRule => {
+                            if (isStyleRule(childRule)) {
+                                const selectors = childRule.selector.split(',').map(s => s.trim());
+                                const transformedSelectors = selectors.map(selector => this.generateRuleSelector(start, end, selector));
+                                childRule.selector = transformedSelectors.join(', ');
+                            }
+                        });
+                    }
+                }
             }
-        });
-        const stringify = cssStringify(cssobject);
+        };
+        cssParser.rules.forEach(processRule);
+        let after = cssParser.stringify();
         // let after = StringUtils.regexExecArrayReplace(stringify as string, /(var\(--domrender-(\$\{.*?\}\$)?\))/g, (data) => {
         //   return data[2];
         // });
-        let after = stringify;
         // console.log('after@@@@@@@@@@@', after)
         // 여기서 선언 selector 자체에도 처리가능하도록 한다 20250518
         after = after.replaceAll('/*$', '${');

package/css/parse/index.d.ts

@@ -1,49 +0,0 @@
-export interface Position {
-    start: {
-        line: number;
-        column: number;
-    };
-    end: {
-        line: number;
-        column: number;
-    };
-    source?: string;
-    content: string;
-}
-export interface ParseOptions {
-    source?: string;
-    silent?: boolean;
-}
-export interface StyleSheet {
-    type: 'stylesheet';
-    stylesheet: {
-        source?: string;
-        rules: Rule[];
-        parsingErrors: Error[];
-    };
-}
-export interface Rule {
-    type: string;
-    selectors?: string[];
-    declarations?: Declaration[];
-    values?: string[];
-    name?: string;
-    vendor?: string;
-    keyframes?: Rule[];
-    media?: string;
-    rules?: Rule[];
-    supports?: string;
-    document?: string;
-    comment?: string;
-    position?: Position;
-    [key: string]: any;
-}
-interface Declaration {
-    type: 'declaration';
-    property: string;
-    value: string;
-    position?: Position;
-}
-export default function parse(css: string, options?: ParseOptions): StyleSheet;
-export {};
-//# sourceMappingURL=index.d.ts.map