dom-render 1.0.93 → 1.0.95

package/events/EventManager.js

@@ -203,6 +203,7 @@ var EventManager = /** @class */ (function () {
     EventManager.prototype.changeVar = function (obj, elements, varName, config) {
         var _this = this;
         // console.log('-changeVar-->', obj, elements, varName);
+        // forEach elements
         // value-link event
         this.procAttr(elements, EventManager.valueLinkAttrName, function (it, attribute) {
             var ownerVariablePathName = it.getAttribute(EventManager.ownerVariablePathAttrName);

package/operators/Appender.js

@@ -36,7 +36,7 @@ var Appender = /** @class */ (function () {
         for (var _i = 0; _i < arguments.length; _i++) {
             items[_i] = arguments[_i];
         }
-        // console.log('----2>', this.length)
+        // console.log('----2>', items, this.length);
         items.index = this.length;
         this[this.length++] = items;
         // console.log('---22->', this.length)
@@ -44,6 +44,14 @@ var Appender = /** @class */ (function () {
         // appender.values = items;
         // this.childs.push(new Appender(appender.index + 1));
     };
+    // delete(idx: number): void {
+    //     // if (idx in this) {
+    //     //     console.log('---------dele',idx)
+    //     //     delete this[idx];
+    //     //     this.length = this.length - 1;
+    //     // }
+    //     this.length = this.length - 1;
+    // }
     Appender.prototype.clear = function () {
         // console.log('length', this.length);
         for (var i = 0; i < this.length; i++) {

package/operators/DrDictionary.d.ts

@@ -0,0 +1,11 @@
+import { OperatorExecuterAttrRequire } from './OperatorExecuterAttrRequire';
+import { RawSet } from '../rawsets/RawSet';
+import { Render } from '../rawsets/Render';
+import { AfterCallBack, ElementSource, ExecuteState, ReturnContainer, Source } from './OperatorExecuter';
+import { Config } from '../configs/Config';
+export declare class DrDictionary extends OperatorExecuterAttrRequire<string> {
+    constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack);
+    executeAttrRequire(attr: string): Promise<ExecuteState>;
+    static getChildren(rawSet: RawSet, config: Config): Map<string, Node[]>;
+    static append(obj: any, fullPath: string, key: string, rawSet: RawSet, config: Config): RawSet[];
+}

package/operators/DrDictionary.js

@@ -0,0 +1,166 @@
+"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);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrDictionary = void 0;
+var OperatorExecuterAttrRequire_1 = require("./OperatorExecuterAttrRequire");
+var ScriptUtils_1 = require("../utils/script/ScriptUtils");
+var RawSet_1 = require("../rawsets/RawSet");
+var OperatorExecuter_1 = require("./OperatorExecuter");
+var DrDictionary = /** @class */ (function (_super) {
+    __extends(DrDictionary, _super);
+    function DrDictionary(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        source.operatorAround = undefined;
+        return _super.call(this, rawSet, render, returnContainer, elementSource, source, afterCallBack, false) || this;
+    }
+    DrDictionary.prototype.executeAttrRequire = function (attr) {
+        var _a, _b, _c, _d, _e;
+        return __awaiter(this, void 0, void 0, function () {
+            var itRandom, vars, newTemp, dictioanry, dictionaryKey, tempalte, rr;
+            var _f;
+            return __generator(this, function (_g) {
+                itRandom = RawSet_1.RawSet.drItOtherEncoding(this.elementSource.element);
+                vars = RawSet_1.RawSet.drVarEncoding(this.elementSource.element, (_a = this.elementSource.attrs.drVarOption) !== null && _a !== void 0 ? _a : '');
+                newTemp = this.source.config.window.document.createElement('temp');
+                dictioanry = ScriptUtils_1.ScriptUtils.evalReturn(attr, this.source.obj);
+                dictionaryKey = (_b = this.elementSource.attrs.drDictionaryOption) !== null && _b !== void 0 ? _b : '';
+                // console.log('--->', attr, dictionaryKey)
+                // if (!(dictioanry instanceof Dictionary)) {
+                //     return ExecuteState.STOP;
+                // }
+                // await new Promise(resolve => setTimeout(resolve, 1000));
+                // console.log('!!!!!!!!!!!!!!', this.rawSet);
+                ScriptUtils_1.ScriptUtils.eval("\n                    ".concat(this.render.bindScript, "\n                    ").concat((_c = this.elementSource.attrs.drBeforeOption) !== null && _c !== void 0 ? _c : '', "\n                    var i = 0; \n                    const dictionary = ").concat(attr, ";\n                    const dictionaryKey = '").concat(dictionaryKey, "';\n                    const dictionaryStr = `").concat(attr, "`.trim();\n                    // console.log('----@#!@#@!#', this.__render.oldChild);\n                    if (dictionary) {\n                        for(const it in dictionary) {\n                            // const oldChild = this.__render.oldChild.get(it);\n                            // if (oldChild && oldChild.length > 0) {\n                            //     this.__render.fag.append(...oldChild);\n                            // } else {\n                            //     var destIt = dictionaryStr + '[\"' + it + '\"]';\n                            //     const n = this.__render.element.cloneNode(true);\n                            //     n.setAttribute('dr-this', destIt);\n                            //     // n.setAttribute('dr-dictionary', dictionaryStr);\n                            //     n.setAttribute('dr-dictionary-key', it);\n                            //     this.__render.fag.append(n);\n                            // }\n                            // if (!this.__render.oldChild.get(it)) {\n                            //     var destIt = dictionaryStr + '[\"' + it + '\"]';\n                            //     const n = this.__render.element.cloneNode(true);\n                            //     n.setAttribute('dr-this', destIt);\n                            //     // n.setAttribute('dr-dictionary', dictionaryStr);\n                            //     n.setAttribute('dr-dictionary-key', it);\n                            //     this.__render.fag.append(n);\n                            // }\n                            var destIt = dictionaryStr + '[\"' + it + '\"]';\n                            const n = this.__render.element.cloneNode(true);\n                            n.setAttribute('dr-this', destIt);\n                            // n.setAttribute('dr-dictionary', dictionaryStr);\n                            // n.setAttribute('dr-dictionary-key', it);\n                            this.__render.fag.append(n);\n                            i++;\n                        }\n                         this.__render.rawset.point.start.setAttribute('dictionary-keys',Object.keys(dictionary).join(','));\n                    }\n                    ").concat((_d = this.elementSource.attrs.drAfterOption) !== null && _d !== void 0 ? _d : '', "\n                    "), Object.assign(this.source.obj, {
+                    __render: Object.freeze(__assign({ drStripOption: this.elementSource.attrs.drStripOption, drAttr: this.elementSource.attrs, drAttrsOriginName: RawSet_1.RawSet.drAttrsOriginName, fag: newTemp }, this.render))
+                }));
+                RawSet_1.RawSet.drVarDecoding(newTemp, vars);
+                RawSet_1.RawSet.drItOtherDecoding(newTemp, itRandom);
+                tempalte = this.source.config.window.document.createElement('template');
+                tempalte.innerHTML = newTemp.innerHTML;
+                this.returnContainer.fag.append(tempalte.content);
+                rr = RawSet_1.RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
+                (_e = this.elementSource.element.parentNode) === null || _e === void 0 ? void 0 : _e.replaceChild(this.returnContainer.fag, this.elementSource.element);
+                // const rrr = rr.flatMap(it => it.render(obj, config));// .flat();
+                (_f = this.returnContainer.raws).push.apply(_f, rr);
+                return [2 /*return*/, OperatorExecuter_1.ExecuteState.EXECUTE];
+            });
+        });
+    };
+    DrDictionary.getChildren = function (rawSet, config) {
+        var _a, _b, _c;
+        var next = rawSet.point.start.nextSibling;
+        var oldChild = new Map();
+        var currentKey = '';
+        while (next) {
+            if (next === rawSet.point.end) {
+                break;
+            }
+            var dictionaryKey = (_b = (_a = next).getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, 'dictionary-key');
+            if (dictionaryKey) {
+                currentKey = dictionaryKey;
+                oldChild.set(dictionaryKey, []);
+            }
+            // console.log('next-------->', currentKey, next);
+            if (currentKey) {
+                (_c = oldChild.get(currentKey)) === null || _c === void 0 ? void 0 : _c.push(next);
+            }
+            next = next.nextSibling;
+        }
+        return oldChild;
+    };
+    DrDictionary.append = function (obj, fullPath, key, rawSet, config) {
+        var _this = this;
+        var _a, _b;
+        var genNode = config.window.document.importNode(rawSet.fragment, true);
+        // console.log('---> append', rawSet, genNode);
+        var rawSets = [];
+        for (var _i = 0, _c = Array.from(genNode.childNodes.values()); _i < _c.length; _i++) {
+            var cNode = _c[_i];
+            var element = cNode.cloneNode(true);
+            element.removeAttribute('dr-dictionary');
+            element.setAttribute('dr-this', "this.".concat(fullPath));
+            // rawSet.point.end.after(element);
+            var fg = config.window.document.createDocumentFragment();
+            fg.append(element);
+            rawSets.push.apply(rawSets, RawSet_1.RawSet.checkPointCreates(fg, obj, config));
+            rawSet.point.end.before(fg);
+            var start = rawSet.point.start;
+            var keys = (_b = (_a = start.getAttribute('dictionary-keys')) === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
+            keys.push(key);
+            start.setAttribute('dictionary-keys', keys.join(','));
+            rawSets.forEach(function (it) { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, it.render(obj, config)];
+                    case 1: return [2 /*return*/, _a.sent()];
+                }
+            }); }); });
+            // console.log('WWW', fg, Array.from(fg.childNodes));
+            // console.log('--------------------------rawSets', rawSets);
+        }
+        return rawSets;
+        // rawSet.
+        // rawSet.point.end.before()
+    };
+    return DrDictionary;
+}(OperatorExecuterAttrRequire_1.OperatorExecuterAttrRequire));
+exports.DrDictionary = DrDictionary;

package/operators/DrThis.js

@@ -83,9 +83,11 @@ var DrThis = /** @class */ (function (_super) {
                         this.afterCallBack.onThisComponentSetCallBacks.push(attr);
                         return [3 /*break*/, 4];
                     case 2:
+                        // console.log('dr-this!!!!!!!', this.rawSet, this.source.obj)
                         _g = (_f = this.returnContainer.fag).append;
                         return [4 /*yield*/, RawSet_1.RawSet.drThisCreate(this.rawSet, this.elementSource.element, this.elementSource.attrs.drThis, (_d = this.elementSource.attrs.drVarOption) !== null && _d !== void 0 ? _d : '', this.elementSource.attrs.drStripOption, this.source.obj, this.source.config)];
                     case 3:
+                        // console.log('dr-this!!!!!!!', this.rawSet, this.source.obj)
                         _g.apply(_f, [_j.sent()]);
                         _j.label = 4;
                     case 4:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dom-render",
-  "version": "1.0.93",
+  "version": "1.0.95",
   "main": "DomRender.js",
   "license": "MIT",
   "description": "html view template engine",

package/rawsets/Attrs.d.ts

@@ -4,6 +4,7 @@ export type Attrs = {
     drAppender: string | null;
     drFor: string | null;
     drForOf: string | null;
+    drDictionary: string | null;
     drRepeat: string | null;
     drThis: string | null;
     drForm: string | null;
@@ -18,4 +19,5 @@ export type Attrs = {
     drCompleteOption: string | null;
     drStripOption: string | null;
     drDestroyOption: string | null;
+    drDictionaryOption: string | null;
 };

package/rawsets/RawSet.d.ts

@@ -24,6 +24,7 @@ export declare class RawSet {
     static readonly DR_IF_NAME = "dr-if";
     static readonly DR_FOR_NAME = "dr-for";
     static readonly DR_FOR_OF_NAME = "dr-for-of";
+    static readonly DR_DICTIONARY_NAME = "dr-dictionary";
     static readonly DR_REPEAT_NAME = "dr-repeat";
     static readonly DR_THIS_NAME = "dr-this";
     static readonly DR_FORM_NAME = "dr-form";
@@ -42,13 +43,14 @@ export declare class RawSet {
     static readonly DR_DESTROY_OPTIONNAME = "dr-destroy";
     static readonly DR_COMPONENT_NAME_OPTIONNAME = "dr-component-name";
     static readonly DR_COMPONENT_INNER_HTML_NAME_OPTIONNAME = "dr-component-inner-html-name";
+    static readonly DR_DICTIONARY_OPTIONKEYNAME = "dr-dictionary-key";
     static readonly DR_ON_CREATE_ARGUMENTS_OPTIONNAME = "dr-on-create:arguments";
     static readonly DR_ON_CREATED_CALLBACK_OPTIONNAME = "dr-on-create:callback";
     static readonly DR_ON_INIT_ARGUMENTS_OPTIONNAME = "dr-on-init:arguments";
     static readonly DR_ON_CONSTRUCTOR_ARGUMENTS_OPTIONNAME = "dr-on-constructor:arguments";
     static readonly drAttrsOriginName: Attrs;
     static readonly DR_TAGS: never[];
-    static readonly DR_ATTRIBUTES: readonly ["dr", "dr-appender", "dr-if", "dr-for-of", "dr-for", "dr-this", "dr-form", "dr-pre", "dr-inner-html", "dr-inner-text", "dr-repeat", "dr-detect"];
+    static readonly DR_ATTRIBUTES: readonly ["dr", "dr-appender", "dr-if", "dr-for-of", "dr-dictionary", "dr-for", "dr-this", "dr-form", "dr-pre", "dr-inner-html", "dr-inner-text", "dr-repeat", "dr-detect"];
     constructor(uuid: string, type: RawSetType, point: {
         start: Comment | Text | HTMLMetaElement;
         node: Node;
@@ -70,7 +72,7 @@ export declare class RawSet {
     getDrAppendAttributeAndDelete(element: Element, obj: any): string | null;
     replaceBody(genNode: Node): void;
     static checkPointCreates(element: Node, obj: any, config: Config): RawSet[];
-    static createStartEndPoint(id: string, type: RawSetType, config: Config): {
+    static createStartEndPoint(node: Node, id: string, type: RawSetType, config: Config): {
         start: HTMLMetaElement;
         end: HTMLMetaElement;
     } | {

package/rawsets/RawSet.js

@@ -80,6 +80,7 @@ var DrTargetElement_1 = require("../operators/DrTargetElement");
 var DrTargetAttr_1 = require("../operators/DrTargetAttr");
 var DestroyOptionType_1 = require("./DestroyOptionType");
 var RawSetType_1 = require("./RawSetType");
+var DrDictionary_1 = require("../operators/DrDictionary");
 var RawSet = /** @class */ (function () {
     function RawSet(uuid, type, point, fragment, detect, data) {
         this.uuid = uuid;
@@ -145,12 +146,12 @@ var RawSet = /** @class */ (function () {
     };
     // 중요 render 처리 부분
     RawSet.prototype.render = function (obj, config) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
         return __awaiter(this, void 0, void 0, function () {
-            var genNode, raws, onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks, drAttrs, _i, _y, cNode, attribute, __render, fag, textContent, runText, newNode, r, template, r, element, drAttr, operators, _z, operators_1, operator, state, _0, onThisComponentSetCallBacks_1, it_1, _1, onElementInitCallBacks_1, it_2, oninit, param, script, _2, onAttrInitCallBacks_1, it_3;
+            var genNode, raws, onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks, drAttrs, _i, _z, cNode, attribute, __render, fag, textContent, runText, newNode, r, template, r, element, drAttr, operators, _0, operators_1, operator, state, _1, onThisComponentSetCallBacks_1, it_1, _2, onElementInitCallBacks_1, it_2, oninit, param, script, _3, onAttrInitCallBacks_1, it_3;
             var _this = this;
-            return __generator(this, function (_3) {
-                switch (_3.label) {
+            return __generator(this, function (_4) {
+                switch (_4.label) {
                     case 0:
                         genNode = config.window.document.importNode(this.fragment, true);
                         raws = [];
@@ -158,11 +159,11 @@ var RawSet = /** @class */ (function () {
                         onElementInitCallBacks = [];
                         onThisComponentSetCallBacks = [];
                         drAttrs = [];
-                        _i = 0, _y = Array.from(genNode.childNodes.values());
-                        _3.label = 1;
+                        _i = 0, _z = Array.from(genNode.childNodes.values());
+                        _4.label = 1;
                     case 1:
-                        if (!(_i < _y.length)) return [3 /*break*/, 7];
-                        cNode = _y[_i];
+                        if (!(_i < _z.length)) return [3 /*break*/, 7];
+                        cNode = _z[_i];
                         attribute = {};
                         if (cNode.nodeType === Node.ELEMENT_NODE) {
                             attribute = DomUtils_1.DomUtils.getAttributeToObject(cNode);
@@ -207,6 +208,7 @@ var RawSet = /** @class */ (function () {
                             drIf: this.getAttributeAndDelete(element, RawSet.DR_IF_NAME),
                             drFor: this.getAttributeAndDelete(element, RawSet.DR_FOR_NAME),
                             drForOf: this.getAttributeAndDelete(element, RawSet.DR_FOR_OF_NAME),
+                            drDictionary: this.getAttributeAndDelete(element, RawSet.DR_DICTIONARY_NAME),
                             drAppender: this.getAttributeAndDelete(element, RawSet.DR_APPENDER_NAME),
                             drRepeat: this.getAttributeAndDelete(element, RawSet.DR_REPEAT_NAME),
                             drThis: this.getAttributeAndDelete(element, RawSet.DR_THIS_NAME),
@@ -221,7 +223,8 @@ var RawSet = /** @class */ (function () {
                             drBeforeOption: this.getAttributeAndDelete(element, RawSet.DR_BEFORE_OPTIONNAME),
                             drCompleteOption: this.getAttributeAndDelete(element, RawSet.DR_COMPLETE_OPTIONNAME),
                             drStripOption: this.getAttributeAndDelete(element, RawSet.DR_STRIP_OPTIONNAME),
-                            drDestroyOption: this.getAttributeAndDelete(element, RawSet.DR_DESTROY_OPTIONNAME)
+                            drDestroyOption: this.getAttributeAndDelete(element, RawSet.DR_DESTROY_OPTIONNAME),
+                            drDictionaryOption: this.getAttributeAndDelete(element, RawSet.DR_DICTIONARY_OPTIONKEYNAME)
                         };
                         drAttrs.push(drAttr);
                         operators = [
@@ -234,28 +237,29 @@ var RawSet = /** @class */ (function () {
                             new DrInnerHTML_1.DrInnerHTML(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_INNERHTML_NAME, attr: drAttr.drInnerHTML, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_h = config.operatorAround) === null || _h === void 0 ? void 0 : _h.drInnerHTML }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
                             new DrFor_1.DrFor(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_FOR_NAME, attr: drAttr.drFor, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_j = config.operatorAround) === null || _j === void 0 ? void 0 : _j.drFor }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
                             new DrForOf_1.DrForOf(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_FOR_OF_NAME, attr: drAttr.drForOf, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_k = config.operatorAround) === null || _k === void 0 ? void 0 : _k.drForOf }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
-                            new DrAppender_1.DrAppender(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_APPENDER_NAME, attr: drAttr.drAppender, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_l = config.operatorAround) === null || _l === void 0 ? void 0 : _l.drAppender }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
-                            new DrRepeat_1.DrRepeat(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_REPEAT_NAME, attr: drAttr.drRepeat, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_m = config.operatorAround) === null || _m === void 0 ? void 0 : _m.drRepeat }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                            new DrDictionary_1.DrDictionary(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_DICTIONARY_NAME, attr: drAttr.drDictionary, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_l = config.operatorAround) === null || _l === void 0 ? void 0 : _l.drDictionary }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                            new DrAppender_1.DrAppender(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_APPENDER_NAME, attr: drAttr.drAppender, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_m = config.operatorAround) === null || _m === void 0 ? void 0 : _m.drAppender }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
+                            new DrRepeat_1.DrRepeat(this, __render, { raws: raws, fag: fag }, { element: element, attrName: RawSet.DR_REPEAT_NAME, attr: drAttr.drRepeat, attrs: drAttr }, { config: config, obj: obj, operatorAround: (_o = config.operatorAround) === null || _o === void 0 ? void 0 : _o.drRepeat }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
                             new DrTargetElement_1.DrTargetElement(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks }),
                             new DrTargetAttr_1.DrTargetAttr(this, __render, { raws: raws, fag: fag }, { element: element, attrs: drAttr }, { config: config, obj: obj }, { onAttrInitCallBacks: onAttrInitCallBacks, onElementInitCallBacks: onElementInitCallBacks, onThisComponentSetCallBacks: onThisComponentSetCallBacks })
                         ];
-                        _z = 0, operators_1 = operators;
-                        _3.label = 3;
+                        _0 = 0, operators_1 = operators;
+                        _4.label = 3;
                     case 3:
-                        if (!(_z < operators_1.length)) return [3 /*break*/, 6];
-                        operator = operators_1[_z];
+                        if (!(_0 < operators_1.length)) return [3 /*break*/, 6];
+                        operator = operators_1[_0];
                         return [4 /*yield*/, operator.start()];
                     case 4:
-                        state = _3.sent();
+                        state = _4.sent();
                         if (state === OperatorExecuter_1.ExecuteState.EXECUTE) {
                             return [3 /*break*/, 6];
                         }
                         else if (state === OperatorExecuter_1.ExecuteState.STOP) {
                             return [2 /*return*/, raws];
                         }
-                        _3.label = 5;
+                        _4.label = 5;
                     case 5:
-                        _z++;
+                        _0++;
                         return [3 /*break*/, 3];
                     case 6:
                         _i++;
@@ -276,13 +280,13 @@ var RawSet = /** @class */ (function () {
                         });
                         // 중요 style isolation 나중에 :scope로 대체 가능할듯.
                         RawSet.generateStyleSheetsLocal();
-                        for (_0 = 0, onThisComponentSetCallBacks_1 = onThisComponentSetCallBacks; _0 < onThisComponentSetCallBacks_1.length; _0++) {
-                            it_1 = onThisComponentSetCallBacks_1[_0];
-                            (_p = (_o = it_1.obj) === null || _o === void 0 ? void 0 : _o.onInitRender) === null || _p === void 0 ? void 0 : _p.call(_o);
+                        for (_1 = 0, onThisComponentSetCallBacks_1 = onThisComponentSetCallBacks; _1 < onThisComponentSetCallBacks_1.length; _1++) {
+                            it_1 = onThisComponentSetCallBacks_1[_1];
+                            (_q = (_p = it_1.obj) === null || _p === void 0 ? void 0 : _p.onInitRender) === null || _q === void 0 ? void 0 : _q.call(_p);
                         }
-                        for (_1 = 0, onElementInitCallBacks_1 = onElementInitCallBacks; _1 < onElementInitCallBacks_1.length; _1++) {
-                            it_2 = onElementInitCallBacks_1[_1];
-                            if (((_r = (_q = it_2.targetElement) === null || _q === void 0 ? void 0 : _q.__render) === null || _r === void 0 ? void 0 : _r.element) && ((_t = (_s = it_2.targetElement) === null || _s === void 0 ? void 0 : _s.__render) === null || _t === void 0 ? void 0 : _t.component)) {
+                        for (_2 = 0, onElementInitCallBacks_1 = onElementInitCallBacks; _2 < onElementInitCallBacks_1.length; _2++) {
+                            it_2 = onElementInitCallBacks_1[_2];
+                            if (((_s = (_r = it_2.targetElement) === null || _r === void 0 ? void 0 : _r.__render) === null || _s === void 0 ? void 0 : _s.element) && ((_u = (_t = it_2.targetElement) === null || _t === void 0 ? void 0 : _t.__render) === null || _u === void 0 ? void 0 : _u.component)) {
                                 oninit = it_2.targetElement.__render.element.getAttribute(RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME);
                                 param = [];
                                 if (oninit) {
@@ -294,14 +298,14 @@ var RawSet = /** @class */ (function () {
                                         param = [param];
                                     }
                                 }
-                                (_v = (_u = it_2.targetElement.__render.component).onInitRender) === null || _v === void 0 ? void 0 : _v.call.apply(_v, __spreadArray([_u], param, false));
+                                (_w = (_v = it_2.targetElement.__render.component).onInitRender) === null || _w === void 0 ? void 0 : _w.call.apply(_w, __spreadArray([_v], param, false));
                             }
-                            (_w = config === null || config === void 0 ? void 0 : config.onElementInit) === null || _w === void 0 ? void 0 : _w.call(config, it_2.name, obj, this, it_2.targetElement);
+                            (_x = config === null || config === void 0 ? void 0 : config.onElementInit) === null || _x === void 0 ? void 0 : _x.call(config, it_2.name, obj, this, it_2.targetElement);
                         }
                         // TODO: 이부분도 위에 targetElement 처럼 해야될까?
-                        for (_2 = 0, onAttrInitCallBacks_1 = onAttrInitCallBacks; _2 < onAttrInitCallBacks_1.length; _2++) {
-                            it_3 = onAttrInitCallBacks_1[_2];
-                            (_x = config === null || config === void 0 ? void 0 : config.onAttrInit) === null || _x === void 0 ? void 0 : _x.call(config, it_3.attrName, it_3.attrValue, obj, this);
+                        for (_3 = 0, onAttrInitCallBacks_1 = onAttrInitCallBacks; _3 < onAttrInitCallBacks_1.length; _3++) {
+                            it_3 = onAttrInitCallBacks_1[_3];
+                            (_y = config === null || config === void 0 ? void 0 : config.onAttrInit) === null || _y === void 0 ? void 0 : _y.call(config, it_3.attrName, it_3.attrValue, obj, this);
                         }
                         // component destroy
                         if (obj.__domrender_components) {
@@ -499,9 +503,10 @@ var RawSet = /** @class */ (function () {
                     else {
                         type = RawSetType_1.RawSetType.TEXT;
                     }
-                    var startEndPoint = RawSet.createStartEndPoint(it_4.uuid, type, config);
+                    var node = document.createTextNode(preparedText);
+                    var startEndPoint = RawSet.createStartEndPoint(node, it_4.uuid, type, config);
                     // layout setting
-                    template.content.append(document.createTextNode(preparedText)); // 앞 부분 넣고
+                    template.content.append(node); // 앞 부분 넣고
                     template.content.append(startEndPoint.start); // add start checkpoint
                     template.content.append(startEndPoint.end); // add end checkpoint
                     // content 안쪽 RawSet render 할때 start 와 end 사이에 fragment 연산해서 들어간다.
@@ -524,7 +529,7 @@ var RawSet = /** @class */ (function () {
                 var element_3 = currentNode;
                 var fragment = config.window.document.createDocumentFragment();
                 var type = RawSetType_1.RawSetType.TARGET_ELEMENT;
-                var startEndPoint = RawSet.createStartEndPoint(uuid, type, config);
+                var startEndPoint = RawSet.createStartEndPoint(element_3, uuid, type, config);
                 var isElement = ((_d = (_c = config.targetElements) === null || _c === void 0 ? void 0 : _c.map(function (it) { return it.name.toLowerCase(); })) !== null && _d !== void 0 ? _d : []).includes(element_3.tagName.toLowerCase());
                 var targetAttrNames_2 = ((_f = (_e = config.targetAttrs) === null || _e === void 0 ? void 0 : _e.map(function (it) { return it.name; })) !== null && _f !== void 0 ? _f : []).concat(RawSet.DR_ATTRIBUTES);
                 var isAttr = element_3.getAttributeNames().filter(function (it) { return targetAttrNames_2.includes(it.toLowerCase()); }).length > 0;
@@ -547,11 +552,20 @@ var RawSet = /** @class */ (function () {
         // console.log('check-->', pars)
         return pars;
     };
-    RawSet.createStartEndPoint = function (id, type, config) {
+    RawSet.createStartEndPoint = function (node, id, type, config) {
         if (type === RawSetType_1.RawSetType.TARGET_ELEMENT) {
+            var element = node;
             var start = config.window.document.createElement('meta');
             var end = config.window.document.createElement('meta');
             start.setAttribute('id', "".concat(id, "-start"));
+            var dictionaryKey = element.getAttribute('dr-dictionary-key');
+            var dictionary = element.getAttribute('dr-dictionary');
+            if (dictionary) {
+                start.setAttribute('type', 'dictionary');
+            }
+            if (dictionaryKey) {
+                start.setAttribute('dictionary-key', dictionaryKey);
+            }
             end.setAttribute('id', "".concat(id, "-end"));
             return {
                 start: start,
@@ -1002,6 +1016,7 @@ var RawSet = /** @class */ (function () {
     RawSet.DR_IF_NAME = 'dr-if';
     RawSet.DR_FOR_NAME = 'dr-for';
     RawSet.DR_FOR_OF_NAME = 'dr-for-of';
+    RawSet.DR_DICTIONARY_NAME = 'dr-dictionary';
     RawSet.DR_REPEAT_NAME = 'dr-repeat';
     RawSet.DR_THIS_NAME = 'dr-this';
     RawSet.DR_FORM_NAME = 'dr-form';
@@ -1020,6 +1035,7 @@ var RawSet = /** @class */ (function () {
     RawSet.DR_DESTROY_OPTIONNAME = 'dr-destroy';
     RawSet.DR_COMPONENT_NAME_OPTIONNAME = 'dr-component-name';
     RawSet.DR_COMPONENT_INNER_HTML_NAME_OPTIONNAME = 'dr-component-inner-html-name';
+    RawSet.DR_DICTIONARY_OPTIONKEYNAME = 'dr-dictionary-key';
     RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME = 'dr-on-create:arguments';
     RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME = 'dr-on-create:callback';
     RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME = 'dr-on-init:arguments';
@@ -1029,6 +1045,7 @@ var RawSet = /** @class */ (function () {
         drIf: RawSet.DR_IF_NAME,
         drFor: RawSet.DR_FOR_NAME,
         drForOf: RawSet.DR_FOR_OF_NAME,
+        drDictionary: RawSet.DR_DICTIONARY_NAME,
         drAppender: RawSet.DR_APPENDER_NAME,
         drRepeat: RawSet.DR_REPEAT_NAME,
         drThis: RawSet.DR_THIS_NAME,
@@ -1043,10 +1060,11 @@ var RawSet = /** @class */ (function () {
         drBeforeOption: RawSet.DR_BEFORE_OPTIONNAME,
         drCompleteOption: RawSet.DR_COMPLETE_OPTIONNAME,
         drStripOption: RawSet.DR_STRIP_OPTIONNAME,
-        drDestroyOption: RawSet.DR_DESTROY_OPTIONNAME
+        drDestroyOption: RawSet.DR_DESTROY_OPTIONNAME,
+        drDictionaryOption: RawSet.DR_DICTIONARY_OPTIONKEYNAME
     };
     RawSet.DR_TAGS = [];
-    RawSet.DR_ATTRIBUTES = [RawSet.DR_NAME, RawSet.DR_APPENDER_NAME, RawSet.DR_IF_NAME, RawSet.DR_FOR_OF_NAME, RawSet.DR_FOR_NAME, RawSet.DR_THIS_NAME, RawSet.DR_FORM_NAME, RawSet.DR_PRE_NAME, RawSet.DR_INNERHTML_NAME, RawSet.DR_INNERTEXT_NAME, RawSet.DR_REPEAT_NAME, RawSet.DR_DETECT_NAME];
+    RawSet.DR_ATTRIBUTES = [RawSet.DR_NAME, RawSet.DR_APPENDER_NAME, RawSet.DR_IF_NAME, RawSet.DR_FOR_OF_NAME, RawSet.DR_DICTIONARY_NAME, RawSet.DR_FOR_NAME, RawSet.DR_THIS_NAME, RawSet.DR_FORM_NAME, RawSet.DR_PRE_NAME, RawSet.DR_INNERHTML_NAME, RawSet.DR_INNERTEXT_NAME, RawSet.DR_REPEAT_NAME, RawSet.DR_DETECT_NAME];
     return RawSet;
 }());
 exports.RawSet = RawSet;