dom-render 1.0.96 → 1.0.98

package/iterators/Range.d.ts

@@ -18,5 +18,6 @@ export declare class Range implements Iterable<number> {
     readonly isRange = true;
     constructor(first: number, last: number, step?: number);
     [Symbol.iterator](): Iterator<number>;
+    map<U>(callbackfn: (value: number, index: number, array: number[]) => U, thisArg?: any): U[];
     static range(first: number | string, last?: number, step?: number): Range;
 }

package/iterators/Range.js

@@ -23,10 +23,22 @@ var RangeIterator = /** @class */ (function () {
             r = new RangeResult(this._current, false);
             this._current += this._step;
         }
+        else if (this._first < this._last && this._current === this._last) {
+            r = new RangeResult(this._current, false);
+            this._current += this._step;
+        }
         else if (this._first > this._last && this._current > this._last) {
             r = new RangeResult(this._current, false);
             this._current -= this._step;
         }
+        else if (this._first > this._last && this._current === this._last) {
+            r = new RangeResult(this._current, false);
+            this._current -= this._step;
+        }
+        else if (this._current === this._last) {
+            r = new RangeResult(this._current, false);
+            this._current -= this._step;
+        }
         else {
             r = new RangeResult(undefined, true);
         }
@@ -46,6 +58,9 @@ var Range = /** @class */ (function () {
     Range.prototype[Symbol.iterator] = function () {
         return new RangeIterator(this.first, this.last, this.step);
     };
+    Range.prototype.map = function (callbackfn, thisArg) {
+        return Array.from(this).map(callbackfn);
+    };
     Range.range = function (first, last, step) {
         if (step === void 0) { step = 1; }
         if (typeof first === 'number' && last === undefined) {

package/operators/OperatorExecuter.d.ts

@@ -5,11 +5,11 @@ import { RawSet } from '../rawsets/RawSet';
 import { Render } from '../rawsets/Render';
 import { Attrs } from '../rawsets/Attrs';
 import { Config } from '../configs/Config';
-export type OperatorAround = {
+export interface OperatorAround {
     beforeAttr?: (value: string | null | undefined, opratorExecutor: OperatorExecuter) => string | null | undefined;
     before?: (data: any, opratorExecutor: OperatorExecuter) => any;
     after?: (data: any, opratorExecutor: OperatorExecuter) => void;
-};
+}
 export declare enum ExecuteState {
     EXECUTE = 0,
     NO_EXECUTE = 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dom-render",
-  "version": "1.0.96",
+  "version": "1.0.98",
   "main": "DomRender.js",
   "license": "MIT",
   "description": "html view template engine",
@@ -58,8 +58,8 @@
     "bundle:watch": "rollup -c -w",
     "dev:start": "npm run start --workspace=dev",
     "dev:serve": "npm run serve --workspace=dev",
-    "npm-build": "npm run build && cp package.json dist && cp .npmignore dist && cp README.MD dist && rm -rf dist/dist/bundle.js.map",
-    "npm-publish": "npm run npm-build && npm publish ./dist",
+    "npm:build": "npm run build && cp package.json dist && cp .npmignore dist && cp README.MD dist && rm -rf dist/dist/bundle.js.map",
+    "npm:publish": "npm run npm:build && npm publish ./dist",
     "tsc": "tsc",
     "tsc:watch": "rm -rf ./dist && mkdir dist && cp package.json dist && tsc --watch --outDir dist --declarationDir dist --sourceMap true",
     "test": "jest --detectOpenHandles --forceExit"

package/rawsets/RawSet.d.ts

@@ -68,9 +68,13 @@ export declare class RawSet {
     get isConnected(): boolean;
     getUsingTriggerVariables(config?: Config): Set<string>;
     render(obj: any, config: Config): Promise<RawSet[]>;
-    static generateStyleSheetsLocal(): void;
+    /**
+     * @deprecated
+     * @param config
+     */
+    static generateStyleSheetsLocal(config: Config): void;
     static generateCSS(id: string, cssRule: CSSRule): void;
-    static generateStyleTransform(styleBody: string | string[], id: string, styleTagWrap?: boolean): string;
+    static generateStyleTransform(styleBody: string | string[], componentKey: string, styleTagWrap?: boolean): string;
     applyEvent(obj: any, fragment?: DocumentFragment, config?: Config): void;
     getAttribute(element: Element, attr: string): string | null;
     getAttributeAndDelete(element: Element, attr: string): string | null;

package/rawsets/RawSet.js

@@ -55,6 +55,9 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RawSet = void 0;
 var RandomUtils_1 = require("../utils/random/RandomUtils");
@@ -82,6 +85,8 @@ var DestroyOptionType_1 = require("./DestroyOptionType");
 var RawSetType_1 = require("./RawSetType");
 var DrThisProperty_1 = require("../operators/DrThisProperty");
 var RawSetOperatorType_1 = require("./RawSetOperatorType");
+var parse_1 = __importDefault(require("../css/parse"));
+var stringify_1 = __importDefault(require("../css/stringify"));
 var RawSet = /** @class */ (function () {
     function RawSet(uuid, type, point, fragment, detect, data) {
         this.uuid = uuid;
@@ -281,7 +286,8 @@ var RawSet = /** @class */ (function () {
                             }
                         });
                         // 중요 style isolation 나중에 :scope로 대체 가능할듯.
-                        RawSet.generateStyleSheetsLocal();
+                        // 2023.9.4일 없앰  style 처음들어올때 처리하는걸로 바꿈
+                        // RawSet.generateStyleSheetsLocal(config);
                         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);
@@ -331,8 +337,13 @@ var RawSet = /** @class */ (function () {
             });
         });
     };
-    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) {
+    /**
+     * @deprecated
+     * @param config
+     */
+    RawSet.generateStyleSheetsLocal = function (config) {
+        // console.log('config.window.document.styleSheets---------', config.window.document.styleSheets);
+        Array.from(config.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('-');
@@ -381,13 +392,40 @@ var RawSet = /** @class */ (function () {
         }
     };
     // 중요 스타일 적용 부분
-    RawSet.generateStyleTransform = function (styleBody, id, styleTagWrap) {
+    RawSet.generateStyleTransform = function (styleBody, componentKey, styleTagWrap) {
+        var _a;
         if (styleTagWrap === void 0) { styleTagWrap = true; }
         if (Array.isArray(styleBody)) {
             styleBody = styleBody.join('\n');
         }
+        var start = "#".concat(componentKey, "-start");
+        var end = "#".concat(componentKey, "-end");
+        var before = StringUtils_1.StringUtils.regexExecArrayReplace(styleBody, /(\$\{.*?\}\$)/g, function (data) {
+            return "var(--domrender-".concat(data[0], ")");
+        });
+        var cssobject = (0, parse_1.default)(before);
+        (_a = cssobject.stylesheet) === null || _a === void 0 ? void 0 : _a.rules.forEach(function (rule) {
+            var _a, _b;
+            var isRoot = (_a = rule.selectors) === null || _a === void 0 ? void 0 : _a.find(function (it) { return it.startsWith(':root'); });
+            if (rule.type === 'rule' && !isRoot) { //  && !!isRoot
+                rule.selectors = (_b = rule.selectors) === null || _b === void 0 ? void 0 : _b.map(function (sit) {
+                    var selectorText = ":is(".concat(start, " ~ *:not(").concat(start, " ~ ").concat(end, " ~ *))");
+                    if (sit.startsWith('.')) {
+                        return "".concat(selectorText).concat(sit, ", ").concat(selectorText, " ").concat(sit);
+                    }
+                    else {
+                        var divText = "".concat(start, " ~ ").concat(sit, ":not(").concat(start, " ~ ").concat(end, " ~ *)");
+                        return "".concat(selectorText, " ").concat(sit, ", ").concat(divText);
+                    }
+                });
+            }
+        });
+        var stringify = (0, stringify_1.default)(cssobject);
+        var after = StringUtils_1.StringUtils.regexExecArrayReplace(stringify, /(var\(--domrender-(\$\{.*?\}\$)?\))/g, function (data) {
+            return data[2];
+        });
         if (styleTagWrap) {
-            styleBody = "<style id='".concat(id, "-style' domstyle>").concat(styleBody, "</style>");
+            styleBody = "<style id='".concat(componentKey, "-style' domstyle>").concat(after, "</style>");
         }
         return styleBody;
     };
@@ -436,9 +474,8 @@ var RawSet = /** @class */ (function () {
     // 중요 important
     RawSet.checkPointCreates = function (element, obj, config) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        // console.log('start==========')
+        // const NodeFilter = (config.window as any).NodeFilter;
         var thisVariableName = element.__domrender_this_variable_name;
-        // console.log('checkPointCreates thisVariableName', thisVariableName);
         var nodeIterator = config.window.document.createNodeIterator(element, NodeFilter.SHOW_ALL, {
             acceptNode: function (node) {
                 var _a, _b, _c, _d, _e;
@@ -648,18 +685,19 @@ var RawSet = /** @class */ (function () {
         //     let message = it.innerHTML;
         // })
         element.querySelectorAll("[".concat(RawSet.DR_PRE_NAME, "]")).forEach(function (it) {
-            it.innerHTML = it.innerHTML.replace(/this/g, thisRandom);
+            it.innerHTML = it.innerHTML.replace(/@this@/g, thisRandom);
         });
         element.querySelectorAll("[".concat(RawSet.DR_THIS_NAME, "]")).forEach(function (it) {
             var message = it.innerHTML;
-            StringUtils_1.StringUtils.regexExec(/([^(dr\-)])?this(?=.?)/g, message).reverse().forEach(function (it) {
+            // StringUtils.regexExec(/([^(dr\-)])?this(?=.?)/g, message).reverse().forEach(it => {
+            StringUtils_1.StringUtils.regexExec(/@this@/g, message).reverse().forEach(function (it) {
                 var _a;
                 message = message.substr(0, it.index) + message.substr(it.index).replace(it[0], "".concat((_a = it[1]) !== null && _a !== void 0 ? _a : '').concat(drThis));
             });
             it.innerHTML = message;
         });
         var message = element.innerHTML;
-        StringUtils_1.StringUtils.regexExec(/([^(dr\-)])?this(?=.?)/g, message).reverse().forEach(function (it) {
+        StringUtils_1.StringUtils.regexExec(/@this@/g, message).reverse().forEach(function (it) {
             var _a;
             message = message.substr(0, it.index) + message.substr(it.index).replace(it[0], "".concat((_a = it[1]) !== null && _a !== void 0 ? _a : '').concat(drThis));
         });
@@ -668,10 +706,10 @@ var RawSet = /** @class */ (function () {
     };
     RawSet.drThisDecoding = function (element, thisRandom) {
         element.querySelectorAll("[".concat(RawSet.DR_PRE_NAME, "]")).forEach(function (it) {
-            it.innerHTML = it.innerHTML.replace(RegExp(thisRandom, 'g'), 'this');
+            it.innerHTML = it.innerHTML.replace(RegExp(thisRandom, 'g'), '@this@');
         });
         element.querySelectorAll("[".concat(RawSet.DR_THIS_NAME, "]")).forEach(function (it) {
-            it.innerHTML = it.innerHTML.replace(RegExp(thisRandom, 'g'), 'this');
+            it.innerHTML = it.innerHTML.replace(RegExp(thisRandom, 'g'), '@this@');
         });
     };
     RawSet.drFormOtherMoveAttr = function (element, as, to, config) {
@@ -803,6 +841,8 @@ var RawSet = /** @class */ (function () {
                         n.querySelectorAll(EventManager_1.eventManager.attrNames.map(function (it) { return "[".concat(it, "]"); }).join(',')).forEach(function (it) {
                             it.setAttribute(EventManager_1.EventManager.ownerVariablePathAttrName, 'this');
                         });
+                        // attribute
+                        n.getAttributeNames().forEach(function (it) { return n.setAttribute(it, n.getAttribute(it).replace(/#this#/g, drThis)); });
                         thisRandom = this.drThisEncoding(n, drThis);
                         vars = this.drVarEncoding(n, drVarOption);
                         this.drVarDecoding(n, vars);
@@ -852,10 +892,11 @@ var RawSet = /** @class */ (function () {
             callBack: function (element, obj, rawSet, attrs, config) {
                 var _a, _b, _c, _d, _e, _f, _g;
                 return __awaiter(this, void 0, void 0, function () {
-                    var stylePromises, templatePromise, _h, i_1, it_6, _j, _k, _l, _m, _o, domrenderComponents, componentKey, attribute, renderScript, render, constructor, constructorParam, script, param, instance, i, normalAttrMap, onCreate, createParam, script, applayTemplate, innerHTMLThisRandom, componentName, innerHTMLName, oninit, script, style, data, template_1;
+                    var componentKey, stylePromises, templatePromise, _h, i_1, it_6, _j, _k, _l, _m, _o, domrenderComponents, attribute, renderScript, render, constructor, constructorParam, script, param, instance, i, normalAttrMap, onCreate, createParam, script, applayTemplate, innerHTMLThisRandom, componentName, innerHTMLName, oninit, script, style, data, template_1;
                     return __generator(this, function (_p) {
                         switch (_p.label) {
                             case 0:
+                                componentKey = rawSet.uuid;
                                 stylePromises = [];
                                 if (!(this.template && this.template.startsWith('lazy://'))) return [3 /*break*/, 2];
                                 return [4 /*yield*/, fetch(this.template.substring(6))];
@@ -908,7 +949,6 @@ var RawSet = /** @class */ (function () {
                                     obj.__domrender_components = {};
                                 }
                                 domrenderComponents = obj.__domrender_components;
-                                componentKey = rawSet.uuid;
                                 attribute = DomUtils_1.DomUtils.getAttributeToObject(element);
                                 renderScript = 'var $component = this.__render.component; var $element = this.__render.element; var $router = this.__render.router; var $innerHTML = this.__render.innerHTML; var $attribute = this.__render.attribute; var $creatorMetaData = this.__render.creatorMetaData;';
                                 render = Object.freeze({

package/utils/storage/StorageUtils.d.ts

@@ -1,9 +1,16 @@
 export declare class StorageUtils {
     static setLocalStorageItem(k: string, v: string | any, window: Window): void;
+    static setSessionStorageItem(k: string, v: string | any, window: Window): void;
     static getLocalStorageItem(k: string, window: Window): string | null;
+    static getSessionStorageItem(k: string, window: Window): string | null;
     static cutLocalStorageItem(k: string, window: Window): string | null;
+    static cutSessionStorageItem(k: string, window: Window): string | null;
     static removeLocalStorageItem(k: string, window: Window): void;
+    static removeSessionStorageItem(k: string, window: Window): void;
     static getLocalStorageJsonItem<T>(k: string, window: Window): T | undefined;
+    static getSessionStorageJsonItem<T>(k: string, window: Window): T | undefined;
     static cutLocalStorageJsonItem<T>(k: string, window: Window): T | undefined;
+    static cutSessionStorageJsonItem<T>(k: string, window: Window): T | undefined;
     static clearLocalStorage(window: Window): void;
+    static clearSessionStorage(window: Window): void;
 }

package/utils/storage/StorageUtils.js

@@ -10,17 +10,34 @@ var StorageUtils = /** @class */ (function () {
         }
         window.localStorage.setItem(k, v);
     };
+    StorageUtils.setSessionStorageItem = function (k, v, window) {
+        if (typeof v === 'object') {
+            v = JSON.stringify(v);
+        }
+        window.sessionStorage.setItem(k, v);
+    };
     StorageUtils.getLocalStorageItem = function (k, window) {
         return window.localStorage.getItem(k);
     };
+    StorageUtils.getSessionStorageItem = function (k, window) {
+        return window.sessionStorage.getItem(k);
+    };
     StorageUtils.cutLocalStorageItem = function (k, window) {
         var data = StorageUtils.getLocalStorageItem(k, window);
         StorageUtils.removeLocalStorageItem(k, window);
         return data;
     };
+    StorageUtils.cutSessionStorageItem = function (k, window) {
+        var data = StorageUtils.getSessionStorageItem(k, window);
+        StorageUtils.removeSessionStorageItem(k, window);
+        return data;
+    };
     StorageUtils.removeLocalStorageItem = function (k, window) {
         return window.localStorage.removeItem(k);
     };
+    StorageUtils.removeSessionStorageItem = function (k, window) {
+        return window.sessionStorage.removeItem(k);
+    };
     StorageUtils.getLocalStorageJsonItem = function (k, window) {
         var item = window.localStorage.getItem(k);
         if (item) {
@@ -35,14 +52,36 @@ var StorageUtils = /** @class */ (function () {
             return undefined;
         }
     };
+    StorageUtils.getSessionStorageJsonItem = function (k, window) {
+        var item = window.sessionStorage.getItem(k);
+        if (item) {
+            try {
+                return JSON.parse(item);
+            }
+            catch (e) {
+                return undefined;
+            }
+        }
+        else {
+            return undefined;
+        }
+    };
     StorageUtils.cutLocalStorageJsonItem = function (k, window) {
         var item = StorageUtils.getLocalStorageJsonItem(k, window);
         StorageUtils.removeLocalStorageItem(k, window);
         return item;
     };
+    StorageUtils.cutSessionStorageJsonItem = function (k, window) {
+        var item = StorageUtils.getSessionStorageJsonItem(k, window);
+        StorageUtils.removeSessionStorageItem(k, window);
+        return item;
+    };
     StorageUtils.clearLocalStorage = function (window) {
         window.localStorage.clear();
     };
+    StorageUtils.clearSessionStorage = function (window) {
+        window.sessionStorage.clear();
+    };
     return StorageUtils;
 }());
 exports.StorageUtils = StorageUtils;

package/utils/string/StringUtils.d.ts

@@ -1,5 +1,6 @@
 export declare class StringUtils {
     static deleteEnter(data: string): string;
     static regexExec(regex: RegExp, text: string): RegExpExecArray[];
+    static regexExecArrayReplace(origin: string, regexpExecArrayOrRegex: RegExpExecArray[] | RegExp, replace: string | ((data: RegExpExecArray) => string)): string;
     static escapeSpecialCharacterRegExp(data: string): string;
 }

package/utils/string/StringUtils.js

@@ -16,6 +16,23 @@ var StringUtils = /** @class */ (function () {
         }
         return usingVars;
     };
+    StringUtils.regexExecArrayReplace = function (origin, regexpExecArrayOrRegex, replace) {
+        var regexpExecArrays = Array.isArray(regexpExecArrayOrRegex) ? regexpExecArrayOrRegex : StringUtils.regexExec(regexpExecArrayOrRegex, origin);
+        regexpExecArrays.reverse().forEach(function (it) {
+            var r = typeof replace === 'string' ? replace : replace(it);
+            origin = origin.substr(0, it.index) + origin.substr(it.index).replace(it[0], r);
+        });
+        return origin;
+    };
+    // public static regexGroups(regex: RegExp, text: string) {
+    //   const usingVars = [];
+    //   let varExec = regex.exec(text)
+    //   while (varExec) {
+    //     usingVars.push(varExec)
+    //     varExec = regex.exec(varExec.input)
+    //   }
+    //   return usingVars;
+    // }
     // public static betweenRegexpStr(start: string, end: string, data: string, flag = 'gm') {
     //     const startEspace = StringUtils.escapeSpecialCharacterRegExp(start);
     //     const reg = RegExp(`(${start}(?:(${start})??[^${startEspace}]*?${end}))`,flag);