@dooboostore/dom-render 1.0.98 → 1.0.100

package/README.MD

@@ -326,6 +326,178 @@ class data {
 </details>
 
 
+## Component Property binding with `@attribute` decorator
+<details>
+  <summary>@attribute<strong>🔻(click)</strong></summary>
+
+You can bind component properties directly to HTML attributes using the `@attribute` decorator. When the attribute on the custom element changes, the corresponding property in the component class instance is automatically updated.
+
+This requires your component to extend `ComponentBase`.
+
+### Usage
+
+The `@attribute` decorator options:
+
+*   `name: string`: Binds the property to a specifically named attribute. If not provided, the property name is used.
+*   `converter: (value: string | null) => any`: A function to convert the string attribute value to another type.
+
+### Example
+
+**Component (`MyComponent.ts`)**
+```typescript
+import { ComponentBase, attribute } from '@dooboostore/dom-render';
+
+// Assuming MyComponent is registered with the tag 'my-component'
+export class MyComponent extends ComponentBase<{ 'title': string, 'show-icon': string, 'created-at': string }> {
+    @attribute
+    title: string = 'Default Title';
+
+    @attribute({
+        name: 'show-icon',
+        converter: (val) => val === 'true'
+    })
+    showIcon: boolean; // The converter handles string -> boolean
+
+    @attribute({
+        name: 'created-at',
+        converter: (val) => val ? new Date(val) : null
+    })
+    createdAt: Date | null;
+}
+```
+
+**Template (`index.html`)**
+```html
+<my-component
+    title="Hello World!"
+    show-icon="true"
+    created-at="2025-08-30T12:00:00Z">
+</my-component>
+
+<script>
+    // After some time, change the attribute
+    setTimeout(() => {
+        const comp = document.querySelector('my-component');
+        comp.setAttribute('title', 'New Title!');
+        comp.setAttribute('show-icon', 'false');
+        comp.setAttribute('created-at', new Date().toISOString());
+    }, 2000);
+</script>
+```
+When attributes change, the `converter` function will be executed before the value is assigned to the property. For `showIcon`, the string `"true"` or `"false"` will be converted to a boolean. For `createdAt`, the date string will be converted to a `Date` object.
+
+</details>
+
+## Element Query with `@query` decorator
+<details>
+  <summary>@query<strong>🔻(click)</strong></summary>
+
+You can get a reference to DOM elements within your component's template using the `@query` decorator. It takes a CSS selector as an argument.
+
+- 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`).
+
+This is useful for directly accessing and manipulating elements you need to interact with from your component's logic.
+
+**Note:** This feature relies on TypeScript's decorator metadata (`emitDecoratorMetadata: true` in `tsconfig.json`).
+
+### Usage Example
+
+```typescript
+import { ComponentBase, query } from '@dooboostore/dom-render';
+
+// Assuming MyComponent is rendered with the template below
+export class MyComponent extends ComponentBase<{}> {
+    // Gets the first element matching the selector
+    @query('h3.title')
+    private titleEl: HTMLHeadingElement;
+
+    // Gets all elements matching the selector as an array
+    @query('ul.item-list > li')
+    private items: HTMLLIElement[];
+
+    onInitRender() {
+        // The elements are available after the component has been rendered.
+        if (this.titleEl) {
+            this.titleEl.style.color = 'blue';
+        }
+
+        if (this.items && this.items.length > 0) {
+            this.items.forEach((item, index) => {
+                item.textContent = `Item ${index + 1} (updated)`;
+            });
+        }
+    }
+}
+```
+
+### Template
+```html
+<!-- Template for MyComponent -->
+<div>
+    <h3 class="title">Original Title</h3>
+    <ul class="item-list">
+        <li>Item 1</li>
+        <li>Item 2</li>
+        <li>Item 3</li>
+    </ul>
+</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.
+
+</details>
+
+</details>
+
+## DOM Event Binding with `@event` decorator
+<details>
+  <summary>@event<strong>🔻(click)</strong></summary>
+
+You can bind component methods directly to DOM events on elements within your component's template using the `@event` decorator.
+
+The decorator takes an options object with two properties:
+- `query: string`: A CSS selector to find the target element(s).
+- `name: string`: The name of the DOM event to listen for (e.g., `'click'`, `'input'`).
+
+The framework will automatically add the event listener when the component is initialized and remove it when the component is destroyed, preventing memory leaks.
+
+### Usage Example
+
+```typescript
+import { ComponentBase, event } from '@dooboostore/dom-render';
+
+// Assuming MyComponent is rendered with the template below
+export class MyComponent extends ComponentBase<{}> {
+
+    // This method will be called when any element matching 'button.action' is clicked.
+    @event({ query: 'button.action', name: 'click' })
+    onActionClick(e: MouseEvent) {
+        console.log('Action button clicked!', e.target);
+        alert('Action!');
+    }
+
+    // This method will be called for the 'input' event on all text inputs.
+    @event({ query: 'input[type="text"]', name: 'input' })
+    onTextInput(e: Event) {
+        const target = e.target as HTMLInputElement;
+        console.log(`Text changed in ${target.id}: ${target.value}`);
+    }
+}
+```
+
+### Template
+```html
+<!-- Template for MyComponent -->
+<div>
+    <input type="text" id="firstname" placeholder="First Name">
+    <input type="text" id="lastname" placeholder="Last Name">
+    <button class="action">Submit</button>
+</div>
+```
+In this example, when the "Submit" button is clicked, the `onActionClick` method is executed. When the user types in either of the text inputs, the `onTextInput` method is executed for each keystroke.
+
+</details>
+
 ## nearThis
 ```html
 <div dr-this="@this@.dictionary">  (${@nearThis@.name}$)   ${$nearThis.name}$  </div>

package/components/ComponentBase.d.ts

@@ -1,3 +1,4 @@
+import 'reflect-metadata';
 import { OnChangeAttrRender, OtherData } from '../lifecycle/OnChangeAttrRender';
 import { OnCreateRenderData, OnCreateRenderDataParams } from '../lifecycle/OnCreateRenderData';
 import { RawSet } from '../rawsets/RawSet';
@@ -8,14 +9,29 @@ import { OnDestroyRender, OnDestroyRenderParams } from '../lifecycle/OnDestroyRe
 import { OnDrThisUnBind } from '../lifecycle/dr-this/OnDrThisUnBind';
 import { OnDrThisBind } from '../lifecycle/dr-this/OnDrThisBind';
 import * as Render from '../rawsets/Render';
+export declare const ATTRIBUTE_METADATA_KEY: unique symbol;
+export declare const QUERY_METADATA_KEY: unique symbol;
+export declare const EVENT_METADATA_KEY: unique symbol;
+export declare function attribute(options?: {
+    name?: string;
+    converter?: (value: string | null) => any;
+}): PropertyDecorator;
+export declare function query(selector: string): PropertyDecorator;
+export declare function event(options: {
+    query: string;
+    name: string;
+}): MethodDecorator;
 export declare abstract class ComponentBase<T> implements OnChangeAttrRender, OnCreateRenderData, OnCreatedThisChild, OnDrThisBind, OnDrThisUnBind, OnInitRender, OnDestroyRender {
     private config?;
     private _rawSet?;
     private _children;
     private _render;
     private _attribute?;
+    private _boundEventListeners;
     get render(): Render.Render | undefined;
     get rawSet(): RawSet | undefined;
+    private _queryElements;
+    private _cleanupEventListeners;
     getAttribute<K extends keyof T>(name: K, attribute?: T): T[K] | null;
     hasAttribute(name: keyof T): boolean;
     equalsAttributeName(n: string, name: keyof T): boolean;
@@ -29,6 +45,7 @@ export declare abstract class ComponentBase<T> implements OnChangeAttrRender, On
     constructor(config?: {
         onlyParentType: ConstructorType<any>[] | ConstructorType<any>;
     });
+    private setRawSet;
     setAttribute(attribute: T): void;
     onCreatedThisChild(child: any, data: OnCreateRenderDataParams): void;
     onCreateRenderData(data: OnCreateRenderDataParams): void;

package/components/ComponentBase.js

@@ -7,18 +7,75 @@ 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 { RawSet } from '../rawsets/RawSet';
 import { DomRenderNoProxy } from '../decorators/DomRenderNoProxy';
 import { ConvertUtils } from '@dooboostore/core/convert/ConvertUtils';
 import * as Render from '../rawsets/Render';
+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);
+    };
+}
+export function query(selector) {
+    return (target, propertyKey) => {
+        Reflect.defineMetadata(QUERY_METADATA_KEY, { selector }, target, propertyKey);
+    };
+}
+export function event(options) {
+    return (target, propertyKey, descriptor) => {
+        const events = Reflect.getMetadata(EVENT_METADATA_KEY, target.constructor) || [];
+        events.push({
+            query: options.query,
+            eventName: options.name,
+            methodName: propertyKey
+        });
+        Reflect.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 Array.from(e.querySelectorAll(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;
+            }
+        }
+        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 +104,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 +114,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 +132,98 @@ 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);
+        }
+        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;
+                }
             }
         }
-        // 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
+            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;
+                    }
+                    else {
+                        this[propertyKey] = elements[0] || null;
+                    }
+                }
+            }
+            // Handle @event decorators
+            const events = Reflect.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 +242,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/components/details/Details.d.ts

@@ -4,7 +4,7 @@ import { RawSet } from '../../rawsets/RawSet';
 import { OtherData } from '../../lifecycle/OnChangeAttrRender';
 import { OnInitRender } from '../../lifecycle/OnInitRender';
 import { OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';
-import { OnCreateRender } from 'lifecycle/OnCreateRender';
+import { OnCreateRender } from '../../lifecycle/OnCreateRender';
 export declare namespace Details {
     const selector = "dr-details";
     type Attribute = {

package/components/input/Input.d.ts

@@ -2,8 +2,8 @@ import { ComponentBase } from '../ComponentBase';
 import { RunConfig } from '../../DomRender';
 import { RawSet } from '../../rawsets/RawSet';
 import { OtherData } from '../../lifecycle/OnChangeAttrRender';
-import { OnCreateRender } from 'lifecycle/OnCreateRender';
-import { OnDestroyRender, OnDestroyRenderParams } from 'lifecycle/OnDestroyRender';
+import { OnCreateRender } from '../../lifecycle/OnCreateRender';
+import { OnDestroyRender, OnDestroyRenderParams } from '../../lifecycle/OnDestroyRender';
 export declare namespace Input {
     const selector = "dr-input";
     type Attribute = {

package/components/timer/Timer.d.ts

@@ -2,7 +2,7 @@ import { ComponentBase } from '../ComponentBase';
 import { RunConfig } from '../../DomRender';
 import { RawSet } from '../../rawsets/RawSet';
 import { OtherData } from '../../lifecycle/OnChangeAttrRender';
-import { OnDestroyRenderParams } from 'lifecycle/OnDestroyRender';
+import { OnDestroyRenderParams } from '../../lifecycle/OnDestroyRender';
 export declare namespace Timer {
     const selector = "dr-timer";
     type Attribute = {

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@dooboostore/dom-render",
-  "version": "1.0.98",
-  "main": "dist/index.js",
+  "version": "1.0.100",
   "license": "MIT",
   "description": "html view template engine",
   "keywords": [
@@ -17,6 +16,24 @@
     "framwork",
     "node"
   ],
+  "author": "dooboostore <dooboostore@gmail.com> (https://github.com/dooboostore)",
+  "contributors": [
+    "sewoo <sewooimda@nate.com> (https://github.com/sewoo)",
+    "SeoDH <adonis_84@naver.com> (https://github.com/SeoDH)",
+    "tkyung (https://github.com/tkyungDev)",
+    "Hoil-Gang (https://github.com/khl1154)",
+    "hwangsero (https://github.com/hwangsero)"
+  ],
+  "homepage": "https://github.com/dooboostore-develop/packages",
+  "bugs": {
+    "url": "https://github.com/dooboostore-develop/packages",
+    "email": "dooboostore@gmail.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dooboostore-develop/packages"
+  },
+  "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "**/*.js",
@@ -27,9 +44,9 @@
   },
   "dependencies": {
     "reflect-metadata": "^0.2.2",
-    "@dooboostore/core": "1.0.5",
-    "@dooboostore/core-node": "1.0.1",
-    "@dooboostore/core-web": "1.0.0"
+    "@dooboostore/core": "1.0.7",
+    "@dooboostore/core-web": "1.0.1",
+    "@dooboostore/core-node": "1.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
@@ -49,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('/*$', '${');