dom-render 1.0.90 → 1.0.92

package/DomRender.js

@@ -20,7 +20,7 @@ var DomRender = /** @class */ (function () {
     function DomRender() {
     }
     DomRender.run = function (obj, target, oConfig) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         var robj = obj;
         if ('_DomRender_isProxy' in obj) {
             if (target) {
@@ -47,6 +47,10 @@ var DomRender = /** @class */ (function () {
         else if (config.routerType === 'hash') {
             config.router = (_c = config.router) !== null && _c !== void 0 ? _c : new HashRouter_1.HashRouter(robj, config.window);
         }
+        else { // default
+            config.routerType = 'hash';
+            config.router = (_d = config.router) !== null && _d !== void 0 ? _d : new HashRouter_1.HashRouter(robj, config.window);
+        }
         domRender.run(robj);
         return robj;
     };

package/DomRenderProxy.d.ts

@@ -14,7 +14,7 @@ export declare class DomRenderProxy<T extends object> implements ProxyHandler<T>
     run(objProxy: T): void;
     initRender(target: Node): void;
     getRawSets(): RawSet[];
-    render(raws?: RawSet[] | string, fullPathStr?: string): void;
+    render(raws?: RawSet[] | string, fullPathStr?: string): Promise<void>;
     root(paths: string[], value?: any, lastDoneExecute?: boolean): string[];
     set(target: T, p: string | symbol, value: any, receiver: T): boolean;
     get(target: T, p: string | symbol, receiver: any): any;

package/DomRenderProxy.js

@@ -1,4 +1,40 @@
 "use strict";
+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 (_) 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 };
+    }
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -53,6 +89,7 @@ var DomRenderProxy = /** @class */ (function () {
                     // console.log('target-------->')
                     var filter = (_b = (_a = _this.config.proxyExcludeTyps) === null || _a === void 0 ? void 0 : _a.filter(function (it) { return target instanceof it; })) !== null && _b !== void 0 ? _b : [];
                     if (filter.length === 0) {
+                        // console.log('--------', objProxy, target, it)
                         var proxyAfter = _this.proxy(objProxy, target, it);
                         obj[it] = proxyAfter;
                     }
@@ -118,67 +155,88 @@ var DomRenderProxy = /** @class */ (function () {
     };
     // 중요 important
     DomRenderProxy.prototype.render = function (raws, fullPathStr) {
-        var _this = this;
-        if (typeof raws === 'string') {
-            var iter = this._rawSets.get(raws);
-            if (iter) {
-                raws = Array.from(iter);
-            }
-            else {
-                raws = undefined;
-            }
-        }
-        var removeRawSets = [];
-        (raws !== null && raws !== void 0 ? raws : this.getRawSets()).forEach(function (it) {
-            var _a, _b, _c;
-            it.getUsingTriggerVariables(_this.config).forEach(function (path) { return _this.addRawSet(path, it); });
-            // console.log('------->', it, it.isConnected);
-            if (it.isConnected) {
-                // 중요 render될때 targetAttribute 체크 해야함.
-                var targetAttrMap = (_b = (_a = it.point.node) === null || _a === void 0 ? void 0 : _a.getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, EventManager_1.EventManager.normalAttrMapAttrName);
-                if ((_c = it.detect) === null || _c === void 0 ? void 0 : _c.action) {
-                    it.detect.action();
-                }
-                else if (it.type === RawSetType_1.RawSetType.TARGET_ELEMENT && it.data && fullPathStr && targetAttrMap && it.fragment.render) {
-                    new Map(JSON.parse(targetAttrMap)).forEach(function (v, k) {
-                        // it?.data.onChangeAttrRender(k, null, v);
-                        var isUsing = EventManager_1.EventManager.isUsingThisVar(v, "this.".concat(fullPathStr));
-                        if (isUsing) {
-                            var render = it.fragment.render;
-                            // console.log('render-->', (it.fragment as any).render)
-                            var script = "".concat(render.renderScript, " return ").concat(v, " ");
-                            var cval = ScriptUtils_1.ScriptUtils.eval(script, Object.assign(_this._domRender_proxy, { __render: render }));
-                            it.data.onChangeAttrRender(k, cval);
+        var _a, _b, _c;
+        return __awaiter(this, void 0, void 0, function () {
+            var iter, removeRawSets, rawSets, _loop_1, this_1, _i, rawSets_1, it_1;
+            var _this = this;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
+                    case 0:
+                        if (typeof raws === 'string') {
+                            iter = this._rawSets.get(raws);
+                            if (iter) {
+                                raws = Array.from(iter);
+                            }
+                            else {
+                                raws = undefined;
+                            }
                         }
-                        // console.log('---?', v, fullPathStr, isUsing);
-                    });
-                    // ------------------->
-                }
-                else {
-                    // console.log('---rawSets->', it)
-                    var rawSets = it.render(_this._domRender_proxy, _this.config);
-                    // console.log('---rawSets->', rawSets)
-                    // 대상 attribute 있으면
-                    // const targetAttrs = (it.point.node as Element).getAttribute(EventManager.normalAttrMapAttrName);
-                    // if (it?.data.onChangeAttrRender && it.type === RawSetType.TARGET_ELEMENT && targetAttrs) {
-                    //     new Map<string, string>(JSON.parse(targetAttrs)).forEach((v, k) => {
-                    //         it?.data.onChangeAttrRender(k, null, v);
-                    //     });
-                    // }
-                    // 그외 자식들 render
-                    if (rawSets && rawSets.length > 0) {
-                        _this.render(rawSets);
-                    }
+                        removeRawSets = [];
+                        rawSets = raws !== null && raws !== void 0 ? raws : this.getRawSets();
+                        _loop_1 = function (it_1) {
+                            var targetAttrMap, rawSets_2;
+                            return __generator(this, function (_e) {
+                                switch (_e.label) {
+                                    case 0:
+                                        it_1.getUsingTriggerVariables(this_1.config).forEach(function (path) { return _this.addRawSet(path, it_1); });
+                                        if (!it_1.isConnected) return [3 /*break*/, 5];
+                                        targetAttrMap = (_b = (_a = it_1.point.node) === null || _a === void 0 ? void 0 : _a.getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, EventManager_1.EventManager.normalAttrMapAttrName);
+                                        if (!((_c = it_1.detect) === null || _c === void 0 ? void 0 : _c.action)) return [3 /*break*/, 1];
+                                        it_1.detect.action();
+                                        return [3 /*break*/, 4];
+                                    case 1:
+                                        if (!(it_1.type === RawSetType_1.RawSetType.TARGET_ELEMENT && it_1.data && fullPathStr && targetAttrMap && it_1.fragment.render)) return [3 /*break*/, 2];
+                                        new Map(JSON.parse(targetAttrMap)).forEach(function (v, k) {
+                                            var _a;
+                                            // it?.data.onChangeAttrRender(k, null, v);
+                                            var isUsing = EventManager_1.EventManager.isUsingThisVar(v, "this.".concat(fullPathStr));
+                                            if (isUsing) {
+                                                var render = it_1.fragment.render;
+                                                // console.log('render-->', (it.fragment as any).render)
+                                                var script = "".concat(render.renderScript, " return ").concat(v, " ");
+                                                var cval = ScriptUtils_1.ScriptUtils.eval(script, Object.assign((_a = _this._domRender_proxy) !== null && _a !== void 0 ? _a : {}, { __render: render }));
+                                                it_1.data.onChangeAttrRender(k, cval);
+                                            }
+                                            // console.log('---?', v, fullPathStr, isUsing);
+                                        });
+                                        return [3 /*break*/, 4];
+                                    case 2: return [4 /*yield*/, it_1.render(this_1._domRender_proxy, this_1.config)];
+                                    case 3:
+                                        rawSets_2 = _e.sent();
+                                        // 그외 자식들 render
+                                        if (rawSets_2 && rawSets_2.length > 0) {
+                                            this_1.render(rawSets_2);
+                                        }
+                                        _e.label = 4;
+                                    case 4: return [3 /*break*/, 6];
+                                    case 5:
+                                        removeRawSets.push(it_1);
+                                        _e.label = 6;
+                                    case 6: return [2 /*return*/];
+                                }
+                            });
+                        };
+                        this_1 = this;
+                        _i = 0, rawSets_1 = rawSets;
+                        _d.label = 1;
+                    case 1:
+                        if (!(_i < rawSets_1.length)) return [3 /*break*/, 4];
+                        it_1 = rawSets_1[_i];
+                        return [5 /*yield**/, _loop_1(it_1)];
+                    case 2:
+                        _d.sent();
+                        _d.label = 3;
+                    case 3:
+                        _i++;
+                        return [3 /*break*/, 1];
+                    case 4:
+                        if (removeRawSets.length > 0) {
+                            this.removeRawSet.apply(this, removeRawSets);
+                        }
+                        return [2 /*return*/];
                 }
-            }
-            else {
-                removeRawSets.push(it);
-                // this.removeRawSet(it)
-            }
+            });
         });
-        if (removeRawSets.length > 0) {
-            this.removeRawSet.apply(this, removeRawSets);
-        }
     };
     DomRenderProxy.prototype.root = function (paths, value, lastDoneExecute) {
         var _this = this;
@@ -290,14 +348,14 @@ var DomRenderProxy = /** @class */ (function () {
             // return (p in target) ? (target as any)[p].bind(target) : (target as any)[p]
             // console.log('-->', p, Object.prototype.toString.call((target as any)[p]), (target as any)[p])
             // return (target as any)[p]
-            var it_1 = target[p];
-            if (it_1 && typeof it_1 === 'object' && ('_DomRender_isProxy' in it_1) && Object.prototype.toString.call(it_1._DomRender_origin) === '[object Date]') {
-                it_1 = it_1._DomRender_origin;
+            var it_2 = target[p];
+            if (it_2 && typeof it_2 === 'object' && ('_DomRender_isProxy' in it_2) && Object.prototype.toString.call(it_2._DomRender_origin) === '[object Date]') {
+                it_2 = it_2._DomRender_origin;
             }
             if (('onBeforeReturnGet' in receiver) && typeof p === 'string' && !((_a = this.config.proxyExcludeOnBeforeReturnGets) !== null && _a !== void 0 ? _a : []).concat(excludeGetSetPropertys).includes(p)) {
-                (_c = (_b = receiver) === null || _b === void 0 ? void 0 : _b.onBeforeReturnGet) === null || _c === void 0 ? void 0 : _c.call(_b, p, it_1, this.root([p], it_1, false));
+                (_c = (_b = receiver) === null || _b === void 0 ? void 0 : _b.onBeforeReturnGet) === null || _c === void 0 ? void 0 : _c.call(_b, p, it_2, this.root([p], it_2, false));
             }
-            return it_1;
+            return it_2;
         }
     };
     DomRenderProxy.prototype.has = function (target, p) {

package/README.MD

@@ -7,7 +7,7 @@ DOM-RENDER
 
 # 🚀 Quick start 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/dom-render@1.0.90/dist/bundle.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/dom-render@1.0.91/dist/bundle.js"></script>
 ```
 ```html
 <!DOCTYPE html>
@@ -633,7 +633,7 @@ const data = config.scripts.concat('head', 'tail')
 ---
 # Component, Attribute, AttributeCallBack
 # 😃 examples
-- [examples](./examples/component_script_attr)
+- [examples](./examples/component_script_attr) lazy load (html, css)
 ```html
 <body id="app">
 ${this.name}$
@@ -677,7 +677,7 @@ link attribute
 ```
 ```typescript
 config.targetElements = [
-  DomRender.createComponent({type: Profile, template: ProfileTemplate}),
+  DomRender.createComponent({type: Profile, template: ProfileTemplate}),  // lazy loading format 'lazy://component/home.html'
   DomRender.createComponent({type: Home, template: HomeTemplate, styles: HomeStyle})
 ]
 
@@ -724,6 +724,18 @@ using component
   </home>
 </home>
 ```
+lazy loading rollup config
+```javascript
+    copy({
+            targets: [
+                {
+                    src: ['**/*.html', '**/*.css', '!node_modules/**/*.html', '!node_modules/**/*.css'], dest: 'dist',
+                    rename: (name, extension, fullPath) => `${fullPath}`
+                },
+                { src: 'assets', dest: 'dist' }
+            ]
+        })
+```
 - attribute
   - dr-on-create:callback: component created init callback script
   - dr-on-create:arguments: component onCreatedRender arguments

package/components/ComponentSet.d.ts

@@ -1,7 +1,10 @@
+export declare type ComponentSetConfig = {
+    objPath?: string | null;
+};
 export declare class ComponentSet {
     obj: any;
     template?: string | undefined;
     styles?: string[] | undefined;
-    styleLocale: boolean;
-    constructor(obj: any);
+    config: ComponentSetConfig;
+    constructor(obj: any, template?: string | undefined, styles?: string[] | undefined, config?: ComponentSetConfig);
 }

package/components/ComponentSet.js

@@ -2,12 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentSet = void 0;
 var ComponentSet = /** @class */ (function () {
-    function ComponentSet(obj, template, styles, styleLocale) {
-        if (styleLocale === void 0) { styleLocale = false; }
+    function ComponentSet(obj, template, styles, config) {
         this.obj = obj;
         this.template = template;
         this.styles = styles;
-        this.styleLocale = styleLocale;
+        this.config = Object.assign({ objPath: 'obj' }, config);
     }
     return ComponentSet;
 }());

package/configs/Config.d.ts

@@ -4,10 +4,15 @@ import { Router } from '../routers/Router';
 import { Messenger } from '../messenger/Messenger';
 import { TargetElement } from './TargetElement';
 import { TargetAttr } from './TargetAttr';
+import { Attrs } from '../rawsets/Attrs';
+import { OperatorAround } from '../operators/OperatorExecuter';
 export declare type Config = {
     window: Window;
     targetElements?: TargetElement[];
     targetAttrs?: TargetAttr[];
+    operatorAround?: {
+        [key in keyof Attrs]?: OperatorAround;
+    };
     onElementInit?: (name: string, obj: any, rawSet: RawSet, targetElement: TargetElement) => any;
     onAttrInit?: (name: string, attrValue: string, obj: any, rawSet: RawSet) => any;
     proxyExcludeTyps?: ConstructorType<any>[];

package/configs/TargetElement.d.ts

@@ -7,7 +7,7 @@ export declare type TargetElement = {
     name: string;
     template?: string;
     styles?: string[];
-    callBack: (target: Element, obj: any, rawSet: RawSet, attrs: Attrs, config: Config) => DocumentFragment;
+    callBack: (target: Element, obj: any, rawSet: RawSet, attrs: Attrs, config: Config) => Promise<DocumentFragment>;
     complete?: (target: Element, obj: any, rawSet: RawSet) => void;
     __render?: Render;
     __creatorMetaData?: CreatorMetaData;