dom-render 1.0.85 → 1.0.88

package/{RawSet.js → rawsets/RawSet.js}

@@ -20,41 +20,30 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RawSet = exports.RawSetType = exports.DestroyOptionType = void 0;
-var RandomUtils_1 = require("./utils/random/RandomUtils");
-var StringUtils_1 = require("./utils/string/StringUtils");
-var ScriptUtils_1 = require("./utils/script/ScriptUtils");
-var EventManager_1 = require("./events/EventManager");
-var Range_1 = require("./iterators/Range");
-var Types_1 = require("./types/Types");
-var DomUtils_1 = require("./utils/dom/DomUtils");
-var DrPre_1 = require("./operators/DrPre");
-var Dr_1 = require("./operators/Dr");
-var DrIf_1 = require("./operators/DrIf");
-var OperatorRender_1 = require("./operators/OperatorRender");
-var DrThis_1 = require("./operators/DrThis");
-var DrForm_1 = require("./operators/DrForm");
-var DrInnerText_1 = require("./operators/DrInnerText");
-var DrInnerHTML_1 = require("./operators/DrInnerHTML");
-var DrFor_1 = require("./operators/DrFor");
-var DrForOf_1 = require("./operators/DrForOf");
-var DrAppender_1 = require("./operators/DrAppender");
-var DrRepeat_1 = require("./operators/DrRepeat");
-var DrTargetElement_1 = require("./operators/DrTargetElement");
-var DrTargetAttr_1 = require("./operators/DrTargetAttr");
-var DestroyOptionType;
-(function (DestroyOptionType) {
-    DestroyOptionType["NO_DESTROY"] = "NO_DESTROY";
-    DestroyOptionType["NO_MESSENGER_DESTROY"] = "NO_MESSENGER_DESTROY";
-})(DestroyOptionType = exports.DestroyOptionType || (exports.DestroyOptionType = {}));
-var RawSetType;
-(function (RawSetType) {
-    RawSetType["TEXT"] = "TEXT";
-    RawSetType["STYLE_TEXT"] = "STYLE_TEXT";
-    RawSetType["TARGET_ELEMENT"] = "TARGET_ELEMENT";
-    RawSetType["TARGET_ATTR"] = "TARGET_ATTR";
-    RawSetType["UNKOWN"] = "UNKOWN";
-})(RawSetType = exports.RawSetType || (exports.RawSetType = {}));
+exports.RawSet = void 0;
+var RandomUtils_1 = require("../utils/random/RandomUtils");
+var StringUtils_1 = require("../utils/string/StringUtils");
+var ScriptUtils_1 = require("../utils/script/ScriptUtils");
+var EventManager_1 = require("../events/EventManager");
+var Range_1 = require("../iterators/Range");
+var Types_1 = require("../types/Types");
+var DomUtils_1 = require("../utils/dom/DomUtils");
+var DrPre_1 = require("../operators/DrPre");
+var Dr_1 = require("../operators/Dr");
+var DrIf_1 = require("../operators/DrIf");
+var OperatorRender_1 = require("../operators/OperatorRender");
+var DrThis_1 = require("../operators/DrThis");
+var DrForm_1 = require("../operators/DrForm");
+var DrInnerText_1 = require("../operators/DrInnerText");
+var DrInnerHTML_1 = require("../operators/DrInnerHTML");
+var DrFor_1 = require("../operators/DrFor");
+var DrForOf_1 = require("../operators/DrForOf");
+var DrAppender_1 = require("../operators/DrAppender");
+var DrRepeat_1 = require("../operators/DrRepeat");
+var DrTargetElement_1 = require("../operators/DrTargetElement");
+var DrTargetAttr_1 = require("../operators/DrTargetAttr");
+var DestroyOptionType_1 = require("./DestroyOptionType");
+var RawSetType_1 = require("./RawSetType");
 var RawSet = /** @class */ (function () {
     function RawSet(uuid, type, point, fragment, detect, data) {
         this.uuid = uuid;
@@ -166,7 +155,7 @@ var RawSet = /** @class */ (function () {
                 (_a = cNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newNode, cNode);
                 // console.log('-------', this.point.start.parentNode.nodeName)
                 // 중요 style value change 됐을때 다시 처리해야되기떄문에: 마지막에 completed 없는 attr 가지고 판단 하니깐
-                if (this.type === RawSetType.STYLE_TEXT && this.point.parent) {
+                if (this.type === RawSetType_1.RawSetType.STYLE_TEXT && this.point.parent) {
                     this.point.parent.removeAttribute('completed');
                 }
             }
@@ -227,28 +216,18 @@ var RawSet = /** @class */ (function () {
         drAttrs.forEach(function (it) {
             if (it.drCompleteOption) {
                 // genNode.childNodes
-                ScriptUtils_1.ScriptUtils.eval("\n                const ".concat(EventManager_1.EventManager.FAG_VARNAME, " = this.__render.fag;\n                const ").concat(EventManager_1.EventManager.SCRIPTS_VARNAME, " = this.__render.scripts;\n                const ").concat(EventManager_1.EventManager.RAWSET_VARNAME, " = this.__render.rawset;\n                ").concat(it.drCompleteOption, "\n                "), Object.assign(obj, {
-                    __render: Object.freeze({
-                        rawset: _this,
-                        fag: genNode,
-                        scripts: EventManager_1.EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj)
-                    })
-                }));
-            }
-        });
-        // 중요 style isolation 나중에 :scope로 대체 가능할듯.
-        Array.from(window.document.styleSheets).filter(function (it) { return it.ownerNode && it.ownerNode instanceof Element && it.ownerNode.getAttribute('id') && !it.ownerNode.getAttribute('completed'); }).forEach(function (it) {
-            var _a;
-            var styleElement = it.ownerNode;
-            var id = (_a = styleElement.getAttribute('id')) === null || _a === void 0 ? void 0 : _a.split('-')[0];
-            if (id) {
-                // console.log('------->', id)
-                Array.from(it.cssRules).forEach(function (it) {
-                    _this.generateCSS(id, it);
+                var render = Object.freeze({
+                    rawset: _this,
+                    fag: genNode,
+                    scripts: EventManager_1.EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj)
                 });
+                ScriptUtils_1.ScriptUtils.eval("\n                const ".concat(EventManager_1.EventManager.FAG_VARNAME, " = this.__render.fag;\n                const ").concat(EventManager_1.EventManager.SCRIPTS_VARNAME, " = this.__render.scripts;\n                const ").concat(EventManager_1.EventManager.RAWSET_VARNAME, " = this.__render.rawset;\n                ").concat(it.drCompleteOption), Object.assign(obj, { __render: render }));
             }
-            it.ownerNode.setAttribute('completed', 'true');
         });
+        // 중요 style isolation 나중에 :scope로 대체 가능할듯.
+        RawSet.generateStyleSheetsLocal();
+        // console.log('-22222-')
+        // alert(1);
         for (var _p = 0, onThisComponentSetCallBacks_1 = onThisComponentSetCallBacks; _p < onThisComponentSetCallBacks_1.length; _p++) {
             var it_1 = onThisComponentSetCallBacks_1[_p];
             (_c = (_b = it_1.obj).onInitRender) === null || _c === void 0 ? void 0 : _c.call(_b);
@@ -281,7 +260,23 @@ var RawSet = /** @class */ (function () {
         }
         return raws;
     };
-    RawSet.prototype.generateCSS = function (id, cssRule) {
+    RawSet.generateStyleSheetsLocal = function () {
+        Array.from(window.document.styleSheets).filter(function (it) { return it.ownerNode && it.ownerNode instanceof Element && it.ownerNode.hasAttribute('domstyle') && it.ownerNode.getAttribute('id') && !it.ownerNode.getAttribute('completed'); }).forEach(function (it) {
+            var _a;
+            var styleElement = it.ownerNode;
+            var split = (_a = styleElement.getAttribute('id')) === null || _a === void 0 ? void 0 : _a.split('-');
+            split === null || split === void 0 ? void 0 : split.pop();
+            var id = split === null || split === void 0 ? void 0 : split.join('-');
+            if (id) {
+                // console.log('------->', id)
+                Array.from(it.cssRules).forEach(function (it) {
+                    RawSet.generateCSS(id, it);
+                });
+            }
+            it.ownerNode.setAttribute('completed', 'true');
+        });
+    };
+    RawSet.generateCSS = function (id, cssRule) {
         var _this = this;
         var start = "#".concat(id, "-start");
         var end = "#".concat(id, "-end");
@@ -314,6 +309,17 @@ var RawSet = /** @class */ (function () {
             });
         }
     };
+    // 중요 스타일 적용 부분
+    RawSet.generateStyleTransform = function (styleBody, id, styleTagWrap) {
+        if (styleTagWrap === void 0) { styleTagWrap = true; }
+        if (Array.isArray(styleBody)) {
+            styleBody = styleBody.join('\n');
+        }
+        if (styleTagWrap) {
+            styleBody = "<style id='".concat(id, "-style' domstyle>").concat(styleBody, "</style>");
+        }
+        return styleBody;
+    };
     RawSet.prototype.applyEvent = function (obj, fragment, config) {
         if (fragment === void 0) { fragment = this.fragment; }
         EventManager_1.eventManager.applyEvent(obj, EventManager_1.eventManager.findAttrElements(fragment, config), config);
@@ -421,30 +427,25 @@ var RawSet = /** @class */ (function () {
                     // start.setAttribute('id', `${it.uuid}-start`);
                     // const end = config.window.document.createElement('meta');
                     // end.setAttribute('id', `${it.uuid}-end`);
-                    var start = void 0;
-                    var end = void 0;
                     var type = void 0;
                     if (currentNode.parentNode && currentNode.parentNode.nodeName.toUpperCase() === 'STYLE') {
-                        type = RawSetType.STYLE_TEXT;
-                        start = config.window.document.createTextNode("/*start text ".concat(it_4.uuid, "*/"));
-                        end = config.window.document.createTextNode("/*end text ".concat(it_4.uuid, "*/"));
+                        type = RawSetType_1.RawSetType.STYLE_TEXT;
                     }
                     else {
-                        type = RawSetType.TEXT;
-                        start = config.window.document.createComment("start text ".concat(it_4.uuid));
-                        end = config.window.document.createComment("end text ".concat(it_4.uuid));
+                        type = RawSetType_1.RawSetType.TEXT;
                     }
+                    var startEndPoint = RawSet.createStartEndPoint(it_4.uuid, type, config);
                     // layout setting
                     template.content.append(document.createTextNode(preparedText)); // 앞 부분 넣고
-                    template.content.append(start); // add start checkpoint
-                    template.content.append(end); // add end checkpoint
+                    template.content.append(startEndPoint.start); // add start checkpoint
+                    template.content.append(startEndPoint.end); // add end checkpoint
                     // content 안쪽 RawSet render 할때 start 와 end 사이에 fragment 연산해서 들어간다.
                     var fragment = config.window.document.createDocumentFragment();
                     fragment.append(config.window.document.createTextNode(it_4.content));
                     pars.push(new RawSet(it_4.uuid, type, {
-                        start: start,
+                        start: startEndPoint.start,
                         node: currentNode,
-                        end: end,
+                        end: startEndPoint.end,
                         parent: currentNode.parentNode,
                         thisVariableName: thisVariableName
                     }, fragment));
@@ -457,21 +458,18 @@ var RawSet = /** @class */ (function () {
                 var uuid = RandomUtils_1.RandomUtils.getRandomString(40);
                 var element_3 = currentNode;
                 var fragment = config.window.document.createDocumentFragment();
-                var start = config.window.document.createElement('meta');
-                var end = config.window.document.createElement('meta');
-                start.setAttribute('id', "".concat(uuid, "-start"));
-                end.setAttribute('id', "".concat(uuid, "-end"));
-                var type = RawSetType.TARGET_ELEMENT;
+                var type = RawSetType_1.RawSetType.TARGET_ELEMENT;
+                var startEndPoint = RawSet.createStartEndPoint(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;
-                (_g = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _g === void 0 ? void 0 : _g.insertBefore(start, currentNode);
-                (_h = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _h === void 0 ? void 0 : _h.insertBefore(end, currentNode.nextSibling);
+                (_g = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _g === void 0 ? void 0 : _g.insertBefore(startEndPoint.start, currentNode);
+                (_h = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _h === void 0 ? void 0 : _h.insertBefore(startEndPoint.end, currentNode.nextSibling);
                 fragment.append(currentNode);
-                pars.push(new RawSet(uuid, isElement ? type : (isAttr ? RawSetType.TARGET_ATTR : RawSetType.UNKOWN), {
-                    start: start,
+                pars.push(new RawSet(uuid, isElement ? type : (isAttr ? RawSetType_1.RawSetType.TARGET_ATTR : RawSetType_1.RawSetType.UNKOWN), {
+                    start: startEndPoint.start,
                     node: currentNode,
-                    end: end,
+                    end: startEndPoint.end,
                     parent: currentNode.parentNode,
                     thisVariableName: thisVariableName
                 }, fragment));
@@ -484,6 +482,30 @@ var RawSet = /** @class */ (function () {
         // console.log('check-->', pars)
         return pars;
     };
+    RawSet.createStartEndPoint = function (id, type, config) {
+        if (type === RawSetType_1.RawSetType.TARGET_ELEMENT) {
+            var start = config.window.document.createElement('meta');
+            var end = config.window.document.createElement('meta');
+            start.setAttribute('id', "".concat(id, "-start"));
+            end.setAttribute('id', "".concat(id, "-end"));
+            return {
+                start: start,
+                end: end
+            };
+        }
+        else if (type === RawSetType_1.RawSetType.STYLE_TEXT) {
+            return {
+                start: config.window.document.createTextNode("/*start text ".concat(id, "*/")),
+                end: config.window.document.createTextNode("/*end text ".concat(id, "*/"))
+            };
+        }
+        else { // text
+            return {
+                start: config.window.document.createComment("start text ".concat(id)),
+                end: config.window.document.createComment("end text ".concat(id))
+            };
+        }
+    };
     RawSet.prototype.childAllRemove = function () {
         var next = this.point.start.nextSibling;
         while (next) {
@@ -606,7 +628,7 @@ var RawSet = /** @class */ (function () {
         // console.log('--------',n, n.innerHTML)
         if (set) {
             // const id = RandomUtils.getRandomString(20);
-            var style = RawSet.styleTransformLocal((_a = set.styles) !== null && _a !== void 0 ? _a : [], rawSet.uuid, true);
+            var style = RawSet.generateStyleTransform((_a = set.styles) !== null && _a !== void 0 ? _a : [], rawSet.uuid, true);
             n.innerHTML = style + ((_b = set.template) !== null && _b !== void 0 ? _b : '');
             // const metaStart = RawSet.metaStart(id);
             // const metaEnd = RawSet.metaEnd(id);
@@ -669,14 +691,14 @@ var RawSet = /** @class */ (function () {
         };
         return targetAttribute;
     };
-    RawSet.createComponentTargetElement = function (name, objFactory, template, styles, config) {
+    RawSet.createComponentTargetElement = function (name, objFactory, template, styles) {
         if (template === void 0) { template = ''; }
         if (styles === void 0) { styles = []; }
         var targetElement = {
             name: name,
             styles: styles,
             template: template,
-            callBack: function (element, obj, rawSet, attrs) {
+            callBack: function (element, obj, rawSet, attrs, config) {
                 var _a, _b, _c, _d, _e, _f;
                 // console.log('callback------->', element)
                 if (!obj.__domrender_components) {
@@ -718,6 +740,8 @@ var RawSet = /** @class */ (function () {
                 i.componentKey = componentKey;
                 i.rawSet = rawSet;
                 i.attribute = attribute;
+                i.router = config.router;
+                i.scripts = render.scripts;
                 i.drAttrs = attrs;
                 i.innerHTML = element.innerHTML;
                 i.rootCreator = new Proxy(obj, new Types_1.DomRenderFinalProxy());
@@ -767,7 +791,7 @@ var RawSet = /** @class */ (function () {
                         __render: render
                     }));
                 }
-                var style = RawSet.styleTransformLocal(styles, componentKey, true);
+                var style = RawSet.generateStyleTransform(styles, componentKey, true);
                 element.innerHTML = style + (applayTemplate !== null && applayTemplate !== void 0 ? applayTemplate : '');
                 // const metaStart = RawSet.metaStart(componentKey);
                 // const metaEnd = RawSet.metaEnd(componentKey);
@@ -797,31 +821,6 @@ var RawSet = /** @class */ (function () {
         var reg = /(?:[$#]\{(?:(([$#]\{)??[^$#]?[^{]*?)\}[$#]))/g;
         return StringUtils_1.StringUtils.regexExec(reg, data !== null && data !== void 0 ? data : '');
     };
-    // 중요 스타일 적용 부분
-    RawSet.styleTransformLocal = function (styleBody, id, styleTagWrap) {
-        if (styleTagWrap === void 0) { styleTagWrap = true; }
-        // <style id="first">
-        //     #first ~ *:not(#first ~ style[domstyle] ~ *) {
-        //     font-size: 30px;
-        //     color: blue;
-        // }
-        // </style>
-        if (Array.isArray(styleBody)) {
-            styleBody = styleBody.join('\n');
-        }
-        // if (locale) {
-        //     styleBody = styleBody.replace(/([^}]+){/gm, function (a, b) {
-        //         if (typeof b === 'string') {
-        //             b = b.trim();
-        //         }
-        //         return `#${id} ~ ${b}:not(#${id} ~ style[domstyle] ~ *), #${id} ~ * ${b} {`;
-        //     });
-        // }
-        if (styleTagWrap) {
-            styleBody = "<style id='".concat(id, "-style' domstyle>").concat(styleBody, "</style>");
-        }
-        return styleBody;
-    };
     // public static metaStart(id: string) {
     //     return `<meta id='${id}-start' />`;
     // }
@@ -832,8 +831,8 @@ var RawSet = /** @class */ (function () {
     RawSet.destroy = function (obj, parameter, config, destroyOptions) {
         var _a;
         if (destroyOptions === void 0) { destroyOptions = []; }
-        if (!destroyOptions.some(function (it) { return it === DestroyOptionType.NO_DESTROY; })) {
-            if (!destroyOptions.some(function (it) { return it === DestroyOptionType.NO_MESSENGER_DESTROY; })) {
+        if (!destroyOptions.some(function (it) { return it === DestroyOptionType_1.DestroyOptionType.NO_DESTROY; })) {
+            if (!destroyOptions.some(function (it) { return it === DestroyOptionType_1.DestroyOptionType.NO_MESSENGER_DESTROY; })) {
                 if (config.messenger && obj) {
                     config.messenger.deleteChannelFromObj(obj);
                 }

package/rawsets/RawSetType.d.ts

@@ -0,0 +1,7 @@
+export declare enum RawSetType {
+    TEXT = "TEXT",
+    STYLE_TEXT = "STYLE_TEXT",
+    TARGET_ELEMENT = "TARGET_ELEMENT",
+    TARGET_ATTR = "TARGET_ATTR",
+    UNKOWN = "UNKOWN"
+}

package/rawsets/RawSetType.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RawSetType = void 0;
+var RawSetType;
+(function (RawSetType) {
+    RawSetType["TEXT"] = "TEXT";
+    RawSetType["STYLE_TEXT"] = "STYLE_TEXT";
+    RawSetType["TARGET_ELEMENT"] = "TARGET_ELEMENT";
+    RawSetType["TARGET_ATTR"] = "TARGET_ATTR";
+    RawSetType["UNKOWN"] = "UNKOWN";
+})(RawSetType = exports.RawSetType || (exports.RawSetType = {}));

package/rawsets/Render.d.ts

@@ -0,0 +1,17 @@
+import { CreatorMetaData } from './CreatorMetaData';
+import { Router } from '../routers/Router';
+import { RawSet } from './RawSet';
+export declare type Render = {
+    rawset?: RawSet;
+    scripts?: {
+        [n: string]: any;
+    };
+    bindScript?: string;
+    element?: any;
+    attribute?: any;
+    creatorMetaData?: CreatorMetaData;
+    router?: Router;
+    range?: any;
+    value?: any;
+    [n: string]: any;
+};

package/rawsets/Render.js

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

package/Config.d.ts

@@ -1,38 +0,0 @@
-import { ConstructorType } from './types/Types';
-import { Attrs, CreatorMetaData, RawSet, Render } from './RawSet';
-import { Router } from './routers/Router';
-import { Messenger } from './messenger/Messenger';
-export declare type TargetElement = {
-    name: string;
-    template?: string;
-    styles?: string[];
-    callBack: (target: Element, obj: any, rawSet: RawSet, attrs?: Attrs) => DocumentFragment;
-    complete?: (target: Element, obj: any, rawSet: RawSet) => void;
-    __render?: Render;
-    __creatorMetaData?: CreatorMetaData;
-};
-export declare type TargetAttr = {
-    name: string;
-    callBack: (target: Element, attrValue: string, obj: any, rawSet: RawSet) => DocumentFragment;
-    complete?: (target: Element, attrValue: string, obj: any, rawSet: RawSet) => void;
-};
-export declare type Config = {
-    window: Window;
-    targetElements?: TargetElement[];
-    targetAttrs?: TargetAttr[];
-    onElementInit?: (name: string, obj: any, rawSet: RawSet, targetElement: TargetElement) => any;
-    onAttrInit?: (name: string, attrValue: string, obj: any, rawSet: RawSet) => any;
-    proxyExcludeTyps?: ConstructorType<any>[];
-    proxyExcludeOnBeforeReturnSets?: string[];
-    proxyExcludeOnBeforeReturnGets?: string[];
-    scripts?: {
-        [n: string]: any;
-    };
-    routerType?: 'hash' | 'path' | 'none';
-    router?: Router;
-    messenger?: Messenger;
-    applyEvents?: {
-        attrName: string;
-        callBack: (elements: Element, attrValue: string, obj: any) => void;
-    }[];
-};