dom-render 1.0.76 → 1.0.79

package/events/EventManager.d.ts

@@ -8,6 +8,7 @@ export declare class EventManager {
     static readonly valueAttrName: string;
     static readonly valueLinkAttrName: string;
     static readonly attrAttrName: string;
+    static readonly normalAttrMapAttrName: string;
     static readonly styleAttrName: string;
     static readonly classAttrName: string;
     readonly attrNames: string[];
@@ -37,7 +38,7 @@ export declare class EventManager {
     procAttr<T extends Element = Element>(elements: Set<Element> | Set<ChildNode> | undefined, attrName: string, callBack: (h: T, value: string, attributes: any) => void): void;
     getValue<T = any>(obj: any, name: string, bindObj?: any): T;
     setValue(obj: any, name: string, value?: any): void;
-    isUsingThisVar(raws: string | null | undefined, varName: string | null | undefined): boolean;
+    static isUsingThisVar(raws: string | null | undefined, varName: string | null | undefined): boolean;
     static setBindProperty(scripts: {
         [p: string]: any;
     } | undefined, obj: any): {

package/events/EventManager.js

@@ -18,6 +18,7 @@ var EventManager = /** @class */ (function () {
             EventManager.valueAttrName,
             EventManager.valueLinkAttrName,
             EventManager.attrAttrName,
+            EventManager.normalAttrMapAttrName,
             EventManager.styleAttrName,
             EventManager.classAttrName,
             EventManager.attrPrefix + 'window-event-' + EventManager.WINDOW_EVENT_POPSTATE,
@@ -59,6 +60,7 @@ var EventManager = /** @class */ (function () {
     //     (obj as any)._DomRender_isFinal = true;
     //     return obj;
     // }
+    // 중요 이벤트에 대상이될 Elements를 찾는다.
     EventManager.prototype.findAttrElements = function (fragment, config) {
         var _a, _b;
         // const datas: {name: string, value: string | null, element: Element}[] = [];
@@ -71,6 +73,7 @@ var EventManager = /** @class */ (function () {
         });
         return elements;
     };
+    // 중요 처음 이벤트 처리
     // eslint-disable-next-line no-undef
     EventManager.prototype.applyEvent = function (obj, childNodes, config) {
         var _this = this;
@@ -96,6 +99,18 @@ var EventManager = /** @class */ (function () {
                 }
             }
         });
+        // normal-attr-map
+        this.procAttr(childNodes, EventManager.normalAttrMapAttrName, function (it, attribute) {
+            var map = new Map(JSON.parse(attribute));
+            map.forEach(function (v, k) {
+                var data = ScriptUtils_1.ScriptUtils.eval("const $element = this.element;  return ".concat(v, " "), Object.assign(obj, {
+                    __render: Object.freeze({
+                        element: it
+                    })
+                }));
+                it.setAttribute(k, data);
+            });
+        });
         // window event
         EventManager.WINDOW_EVENTS.forEach(function (it) {
             _this.procAttr(childNodes, EventManager.attrPrefix + 'window-event-' + it, function (it, attribute) {
@@ -109,7 +124,7 @@ var EventManager = /** @class */ (function () {
                 script = 'return ' + script;
             }
             if (script) {
-                var data = ScriptUtils_1.ScriptUtils.eval("".concat(_this.bindScript, "; ").concat(script, " "), Object.assign(obj, {
+                ScriptUtils_1.ScriptUtils.eval("".concat(_this.bindScript, "; ").concat(script, " "), Object.assign(obj, {
                     __render: Object.freeze({
                         element: it
                     })
@@ -133,7 +148,7 @@ var EventManager = /** @class */ (function () {
                     bindObj_1 = ScriptUtils_1.ScriptUtils.evalReturn(ownerVariablePathName, obj);
                 }
                 var getValue = _this.getValue(obj, varName, bindObj_1);
-                // 아래 나중에 리팩토링 필요함
+                // TODO: 아래 나중에 리팩토링 필요함
                 if (typeof getValue === 'function' && getValue) {
                     var setValue = it.value;
                     if (mapScript_1) {
@@ -229,7 +244,7 @@ var EventManager = /** @class */ (function () {
             if (script) {
                 script = 'return ' + script;
             }
-            if (_this.isUsingThisVar(script, varName) || varName === undefined) {
+            if (EventManager.isUsingThisVar(script, varName) || varName === undefined) {
                 var data = ScriptUtils_1.ScriptUtils.eval("const $element = this.__render.element; ".concat(script, " "), Object.assign(obj, {
                     __render: Object.freeze({
                         element: it
@@ -280,7 +295,7 @@ var EventManager = /** @class */ (function () {
             if (script) {
                 script = 'return ' + script;
             }
-            if (_this.isUsingThisVar(script, varName) || varName === undefined) {
+            if (EventManager.isUsingThisVar(script, varName) || varName === undefined) {
                 var data = ScriptUtils_1.ScriptUtils.eval("const $element = this.__render.element;  ".concat(script, " "), Object.assign(obj, {
                     __render: Object.freeze({
                         element: it
@@ -308,7 +323,7 @@ var EventManager = /** @class */ (function () {
             if (script) {
                 script = 'return ' + script;
             }
-            if (_this.isUsingThisVar(script, varName) || varName === undefined) {
+            if (EventManager.isUsingThisVar(script, varName) || varName === undefined) {
                 var data = ScriptUtils_1.ScriptUtils.eval("const $element = this.element;  ".concat(script, " "), Object.assign(obj, {
                     __render: Object.freeze({
                         element: it
@@ -335,6 +350,23 @@ var EventManager = /** @class */ (function () {
                 }
             }
         });
+        // 중요 변수값 바꼈을때 이벤트 타겟 찾는것 normal-attr-map
+        this.procAttr(elements, EventManager.normalAttrMapAttrName, function (it, attribute) {
+            var map = new Map(JSON.parse(attribute));
+            map.forEach(function (v, k) {
+                // console.log('--->', v, k)
+                var isUsing = EventManager.isUsingThisVar(v, varName);
+                // console.log('---isUsing--> varName:', varName, 'k:', k, 'v:', v, 'isUsing:', isUsing);
+                if (isUsing) {
+                    var data = ScriptUtils_1.ScriptUtils.eval("const $element = this.element;  return ".concat(v, " "), Object.assign(obj, {
+                        __render: Object.freeze({
+                            element: it
+                        })
+                    }));
+                    it.setAttribute(k, data);
+                }
+            });
+        });
     };
     // eslint-disable-next-line no-undef
     EventManager.prototype.addDrEvents = function (obj, eventName, elements, config) {
@@ -366,6 +398,7 @@ var EventManager = /** @class */ (function () {
             });
         });
     };
+    // eslint-disable-next-line no-undef
     EventManager.prototype.addDrEventPram = function (obj, attr, elements, config) {
         var _this = this;
         this.procAttr(elements, attr, function (it, attribute, attributes) {
@@ -439,7 +472,7 @@ var EventManager = /** @class */ (function () {
             value: value
         });
     };
-    EventManager.prototype.isUsingThisVar = function (raws, varName) {
+    EventManager.isUsingThisVar = function (raws, varName) {
         // console.log('isUsingV', raws)
         // console.log('isUsingV', raws, varName, ScriptUtils.getVariablePaths(raws ?? ''))
         if (varName && raws) {
@@ -475,6 +508,7 @@ var EventManager = /** @class */ (function () {
     EventManager.valueAttrName = EventManager.attrPrefix + 'value';
     EventManager.valueLinkAttrName = EventManager.attrPrefix + 'value-link';
     EventManager.attrAttrName = EventManager.attrPrefix + 'attr';
+    EventManager.normalAttrMapAttrName = EventManager.attrPrefix + 'normal-attr-map';
     EventManager.styleAttrName = EventManager.attrPrefix + 'style';
     EventManager.classAttrName = EventManager.attrPrefix + 'class';
     EventManager.VALUE_VARNAME = '$value';

package/lifecycle/OnChangeAttrRender.d.ts

@@ -0,0 +1,3 @@
+export interface OnChangeAttrRender {
+    onChangeAttrRender(name: string, val: any): void;
+}

package/lifecycle/OnChangeAttrRender.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/operators/AttrExpresion.d.ts

@@ -1,4 +0,0 @@
-import { ExecuteState, OperatorRender } from './OperatorRender';
-export declare class AttrExpresion extends OperatorRender {
-    execRender(): ExecuteState;
-}

package/operators/AttrExpresion.js

@@ -1,68 +1,44 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AttrExpresion = void 0;
-var OperatorRender_1 = require("./OperatorRender");
-var ScriptUtils_1 = require("../utils/script/ScriptUtils");
-var RawSet_1 = require("../RawSet");
-var AttrExpresion = /** @class */ (function (_super) {
-    __extends(AttrExpresion, _super);
-    function AttrExpresion() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    AttrExpresion.prototype.execRender = function () {
-        var _a;
-        var _this = this;
-        var _b;
-        var targetAttrs = this.elementSource.element.getAttributeNames()
-            .filter(function (it) { return RawSet_1.RawSet.isExporesion(_this.elementSource.element.getAttribute(it)); })
-            .map(function (it) { return ({ name: it, expresion: RawSet_1.RawSet.exporesionGrouops(_this.elementSource.element.getAttribute(it))[0][1] }); })
-            .filter(function (it) { return it.name.length > 0 && it.expresion.length > 0; })
-            .map(function (it) {
-            return "n.setAttribute('".concat(it.name, "', ").concat(it.expresion, ")");
-        });
-        // console.log('-----', targetAttrs)
-        if ((targetAttrs === null || targetAttrs === void 0 ? void 0 : targetAttrs.length) > 0) {
-            var newTemp = this.source.config.window.document.createElement('temp');
-            // console.log('------>', targetAttrs, targetAttrs.join(';'))
-            ScriptUtils_1.ScriptUtils.eval("\n                        ".concat(this.render.bindScript, "\n                        const n = $element.cloneNode(true);\n                        ").concat(targetAttrs.join(';'), ";\n                        this.__render.fag.append(n);\n                    "), Object.assign(this.source.obj, {
-                __render: Object.freeze(__assign({ fag: newTemp, targetAttrs: targetAttrs }, this.render))
-            }));
-            var tempalte = this.source.config.window.document.createElement('template');
-            tempalte.innerHTML = newTemp.innerHTML;
-            this.returnContainer.fag.append(tempalte.content);
-            var rr = RawSet_1.RawSet.checkPointCreates(this.returnContainer.fag, this.source.config);
-            (_b = this.elementSource.element.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(this.returnContainer.fag, this.elementSource.element);
-            (_a = this.returnContainer.raws).push.apply(_a, rr);
-            return OperatorRender_1.ExecuteState.EXECUTE;
-        }
-        return OperatorRender_1.ExecuteState.NO_EXECUTE;
-    };
-    return AttrExpresion;
-}(OperatorRender_1.OperatorRender));
-exports.AttrExpresion = AttrExpresion;
+// import {ExecuteState, OperatorRender} from './OperatorRender';
+// import {ScriptUtils} from '../utils/script/ScriptUtils';
+// import {RawSet, Render} from '../RawSet';
+//
+// export class AttrExpresion extends OperatorRender {
+//     execRender(): ExecuteState {
+//         const targetAttrs = this.elementSource.element.getAttributeNames()
+//             .filter(it => RawSet.isExporesion(this.elementSource.element.getAttribute(it)))
+//             .map(it => ({name: it, expresion: RawSet.exporesionGrouops(this.elementSource.element.getAttribute(it))[0][1]}))
+//             .filter(it => it.name.length > 0 && it.expresion.length > 0)
+//             .map(it => {
+//                 return `n.setAttribute('${it.name}', ${it.expresion})`;
+//             });
+//         // console.log('--!!!!!!!!!---', targetAttrs)
+//         if (targetAttrs?.length > 0) {
+//             const newTemp = this.source.config.window.document.createElement('temp');
+//             // console.log('------>', targetAttrs, targetAttrs.join(';'))
+//             ScriptUtils.eval(`
+//                         ${this.render.bindScript}
+//                         //const n = $element.cloneNode(true);
+//                         const n = $element;
+//                         ${targetAttrs.join(';')};
+//                         // this.__render.fag.append(n);
+//                     `, Object.assign(this.source.obj, {
+//                 __render: Object.freeze({
+//                     fag: newTemp,
+//                     targetAttrs,
+//                     ...this.render
+//                 } as Render)
+//             }));
+//             // const tempalte = this.source.config.window.document.createElement('template');
+//             // tempalte.innerHTML = newTemp.innerHTML;
+//             // this.returnContainer.fag.append(tempalte.content);
+//             const rr = RawSet.checkPointCreates(this.render.element, this.source.config);
+//             // const rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.config);
+//             // this.elementSource.element.parentNode?.replaceChild(this.returnContainer.fag, this.elementSource.element);
+//             this.returnContainer.raws.push(...rr);
+//             // return ExecuteState.EXECUTE;
+//             return ExecuteState.NO_EXECUTE;
+//         }
+//         return ExecuteState.NO_EXECUTE;
+//     }
+// }

package/operators/DrTargetElement.js

@@ -32,8 +32,34 @@ var DrTargetElement = /** @class */ (function (_super) {
         if (targetElement) {
             var documentFragment = targetElement.callBack(this.elementSource.element, this.source.obj, this.rawSet, this.elementSource.attrs);
             if (documentFragment) {
+                // const targetAttrMap = this.elementSource.element.getAttribute(EventManager.normalAttrMapAttrName);
                 var detectAction_1 = this.elementSource.element.getAttribute(RawSet_1.RawSet.DR_DETECT_NAME);
                 var render_1 = documentFragment.render;
+                // console.log('-------drTargetElement->', render, targetAttrMap);
+                this.rawSet.fragment = documentFragment;
+                this.rawSet.data = render_1.component;
+                // const targetAttrs = this.elementSource.element.getAttributeNames()
+                //     .filter(it => RawSet.isExporesion(this.elementSource.element.getAttribute(it)))
+                //     .map(it => ({name: it, expresion: RawSet.exporesionGrouops(this.elementSource.element.getAttribute(it))[0][1]}))
+                //     .filter(it => it.name.length > 0 && it.expresion.length > 0)
+                //     .map(it => {
+                //         return `n.setAttribute('${it.name}', ${it.expresion})`;
+                //     });
+                // if (targetAttrMap) {
+                //     ScriptUtils.eval(`
+                //                 ${this.render.bindScript}
+                //                 //const n = $element.cloneNode(true);
+                //                 const n = $element;
+                //                 ${targetAttrMap.join(';')};
+                //                 // this.__render.fag.append(n);
+                //             `, Object.assign(this.source.obj, {
+                //         __render: Object.freeze({
+                //             fag: newTemp,
+                //             targetAttrs: targetAttrMap,
+                //             ...this.render
+                //         } as Render)
+                //     }));
+                // }
                 if (detectAction_1 && render_1) {
                     this.rawSet.detect = {
                         action: function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dom-render",
-  "version": "1.0.76",
+  "version": "1.0.79",
   "main": "DomRender.js",
   "license": "MIT",
   "description": "dom-render",