@dooboostore/dom-render 1.0.100 → 1.0.103

package/index.d.ts

@@ -1,2 +1,49 @@
-export { DomRender } from './DomRender';
+export { DomRender, type DomRenderRunConfig, type CreateComponentParam } from './DomRender';
+export type { OnChangeAttrRender, OtherData } from './lifecycle/OnChangeAttrRender';
+export type { OnCreateRenderData, OnCreateRenderDataParams } from './lifecycle/OnCreateRenderData';
+export type { OnDestroyRender, OnDestroyRenderParams } from './lifecycle/OnDestroyRender';
+export { type OnCreateRender } from './lifecycle/OnCreateRender';
+export { type OnInitRender } from './lifecycle/OnInitRender';
+export { type OnCreatedThisChild } from './lifecycle/OnCreatedThisChild';
+export { type OnProxyDomRender } from './lifecycle/OnProxyDomRender';
+export { type OnDrThisBind } from './lifecycle/dr-this/OnDrThisBind';
+export { type OnDrThisUnBind } from './lifecycle/dr-this/OnDrThisUnBind';
+export { type OnBeforeReturnGet } from './lifecycle/OnBeforeReturnGet';
+export { type OnBeforeReturnSet } from './lifecycle/OnBeforeReturnSet';
+export { type OnChildRenderedByProperty } from './lifecycle/OnChildRenderedByProperty';
+export { ComponentBase, attribute, query, event } from './components/ComponentBase';
+export { ComponentSet, type ComponentSetConfig } from './components/ComponentSet';
+export { Appender as AppenderComponent } from './components/appender/Appender';
+export { CheckBox } from './components/checkbox/CheckBox';
+export { Choose } from './components/choose/Choose';
+export { Details } from './components/details/Details';
+export { ForOf } from './components/forOf/ForOf';
+export { If } from './components/if/If';
+export { Input } from './components/input/Input';
+export { PromiseSwitch } from './components/promise/PromiseSwitch';
+export { Radio } from './components/radio/Radio';
+export { Select } from './components/select/Select';
+export { This } from './components/this/This';
+export { Timer } from './components/timer/Timer';
+export { Appender } from './operators/Appender';
+export { Router, type RouteData, type RouterConfig } from './routers/Router';
+export { HashRouter } from './routers/HashRouter';
+export { PathRouter } from './routers/PathRouter';
+export { Validator } from './validators/Validator';
+export { ValidatorArray } from './validators/ValidatorArray';
+export { FormValidator } from './validators/FormValidator';
+export { NotEmptyValidator } from './validators/NotEmptyValidator';
+export { RegExpTestValidator } from './validators/RegExpTestValidator';
+export { NotRegExpTestValidator } from './validators/NotRegExpTestValidator';
+export { ValueEqualsValidator } from './validators/ValueEqualsValidator';
+export { ValueNotEqualsValidator } from './validators/ValueNotEqualsValidator';
+export { PassValidator } from './validators/PassValidator';
+export { NonPassValidator } from './validators/NonPassValidator';
+export { RequiredValidator } from './validators/RequiredValidator';
+export { CheckedValidator } from './validators/CheckedValidator';
+export { UnCheckedValidator } from './validators/UnCheckedValidator';
+export { MultipleValidator } from './validators/MultipleValidator';
+export { Shield } from './types/Types';
+export { type Config } from './configs/Config';
+export { Range } from './iterators/Range';
 //# sourceMappingURL=index.d.ts.map

package/index.js

@@ -1,2 +1,42 @@
+// Main class and types
 export { DomRender } from './DomRender';
+// Components
+export { ComponentBase, attribute, query, event } from './components/ComponentBase';
+export { ComponentSet } from './components/ComponentSet';
+export { Appender as AppenderComponent } from './components/appender/Appender';
+export { CheckBox } from './components/checkbox/CheckBox';
+export { Choose } from './components/choose/Choose';
+export { Details } from './components/details/Details';
+export { ForOf } from './components/forOf/ForOf';
+export { If } from './components/if/If';
+export { Input } from './components/input/Input';
+export { PromiseSwitch } from './components/promise/PromiseSwitch';
+export { Radio } from './components/radio/Radio';
+export { Select } from './components/select/Select';
+export { This } from './components/this/This';
+export { Timer } from './components/timer/Timer';
+// Operators
+export { Appender } from './operators/Appender';
+// Routers
+export { Router } from './routers/Router';
+export { HashRouter } from './routers/HashRouter';
+export { PathRouter } from './routers/PathRouter';
+// Validators
+export { Validator } from './validators/Validator';
+export { ValidatorArray } from './validators/ValidatorArray';
+export { FormValidator } from './validators/FormValidator';
+export { NotEmptyValidator } from './validators/NotEmptyValidator';
+export { RegExpTestValidator } from './validators/RegExpTestValidator';
+export { NotRegExpTestValidator } from './validators/NotRegExpTestValidator';
+export { ValueEqualsValidator } from './validators/ValueEqualsValidator';
+export { ValueNotEqualsValidator } from './validators/ValueNotEqualsValidator';
+export { PassValidator } from './validators/PassValidator';
+export { NonPassValidator } from './validators/NonPassValidator';
+export { RequiredValidator } from './validators/RequiredValidator';
+export { CheckedValidator } from './validators/CheckedValidator';
+export { UnCheckedValidator } from './validators/UnCheckedValidator';
+export { MultipleValidator } from './validators/MultipleValidator';
+// Other
+export { Shield } from './types/Types';
+export { Range } from './iterators/Range';
 //# sourceMappingURL=index.js.map

package/lifecycle/OnDestroyRender.d.ts

@@ -3,7 +3,7 @@ export type OnDestroyRenderParams = {
     rawSet: RawSet;
 };
 export interface OnDestroyRender {
-    onDestroyRender(data: OnDestroyRenderParams): void;
+    onDestroyRender(data?: OnDestroyRenderParams): void;
 }
 export declare const isOnDestroyRender: (obj: any) => obj is OnDestroyRender;
 //# sourceMappingURL=OnDestroyRender.d.ts.map

package/lifecycle/OnProxyDomRender.d.ts

@@ -2,4 +2,5 @@ import { Config } from '../configs/Config';
 export interface OnProxyDomRender {
     onProxyDomRender(config: Config): void;
 }
+export declare const isOnProxyDomRender: (obj: any) => obj is OnProxyDomRender;
 //# sourceMappingURL=OnProxyDomRender.d.ts.map

package/lifecycle/OnProxyDomRender.js

@@ -1,2 +1,2 @@
-export {};
+export const isOnProxyDomRender = (obj) => typeof (obj === null || obj === void 0 ? void 0 : obj.onProxyDomRender) === 'function';
 //# sourceMappingURL=OnProxyDomRender.js.map

package/operators/DrForOf.js

@@ -11,6 +11,7 @@ import { OperatorExecuterAttrRequire } from './OperatorExecuterAttrRequire';
 import { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';
 import { RawSet } from '../rawsets/RawSet';
 import { ExecuteState } from './OperatorExecuter';
+import { ObjectUtils } from '@dooboostore/core';
 export class DrForOf extends OperatorExecuterAttrRequire {
     constructor(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
         source.operatorAround = undefined;
@@ -29,7 +30,7 @@ export class DrForOf extends OperatorExecuterAttrRequire {
                     ${this.render.bindScript}
                     ${(_b = this.elementSource.attrs.drBeforeOption) !== null && _b !== void 0 ? _b : ''}
                     var i = -1; 
-                    const forOf = ${attr};
+                    const forOf = ${ObjectUtils.Path.toOptionalChainPath(attr)};
                     const forOfStr = \`${attr}\`.trim();
                     // console.log('forOf---',forOf);
                     if (forOf) {

package/operators/DrIf.js

@@ -11,6 +11,7 @@ import { OperatorExecuterAttrRequire } from './OperatorExecuterAttrRequire';
 import { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';
 import { RawSet } from '../rawsets/RawSet';
 import { ExecuteState } from './OperatorExecuter';
+import { ObjectUtils } from '@dooboostore/core';
 export class DrIf extends OperatorExecuterAttrRequire {
     constructor(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
         source.operatorAround = undefined;
@@ -26,10 +27,10 @@ export class DrIf extends OperatorExecuterAttrRequire {
             const keepgoing = ScriptUtils.eval(`
                 ${this.render.bindScript}
                 ${(_b = this.elementSource.attrs.drBeforeOption) !== null && _b !== void 0 ? _b : ''}
-                if ($rawSet.data === (${attr})) {
+                if ($rawSet.data === (${ObjectUtils.Path.toOptionalChainPath(attr)})) {
                     return false;
                 }
-                $rawSet.data = ${attr};
+                $rawSet.data = ${ObjectUtils.Path.toOptionalChainPath(attr)};
                 if($rawSet.data) {
                     const n = $element.cloneNode(true);
                     Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drIf' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));

package/operators/DrTargetElement.js

@@ -68,7 +68,8 @@ export class DrTargetElement extends OperatorExecuter {
                     const rr = RawSet.checkPointCreates(targetFragment, this.source.obj, this.source.config);
                     if (targetElement.noStrip) {
                         Array.from(targetFragment.childNodes || []).forEach(child => {
-                            documentFragment.firstElementChild.appendChild(child);
+                            var _a;
+                            (_a = documentFragment.firstElementChild) === null || _a === void 0 ? void 0 : _a.appendChild(child);
                         });
                     }
                     (_d = this.elementSource.element.parentNode) === null || _d === void 0 ? void 0 : _d.replaceChild(documentFragment, this.elementSource.element);

package/operators/DrTargetElementIsElement.d.ts

@@ -1,11 +1,6 @@
 import { RawSet } from '../rawsets/RawSet';
 import { AfterCallBack, ElementSource, ExecuteState, OperatorExecuter, ReturnContainer, Source } from './OperatorExecuter';
 import { Render } from '../rawsets/Render';
-declare global {
-    interface Window {
-        HTMLMetaElement: typeof HTMLMetaElement;
-    }
-}
 export declare class DrTargetElementIsElement extends OperatorExecuter<string | null> {
     constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack);
     execute(attr: string | null): Promise<ExecuteState>;

package/operators/DrTargetElementIsElement.js

@@ -57,7 +57,8 @@ export class DrTargetElementIsElement extends OperatorExecuter {
                     const rr = RawSet.checkPointCreates(targetFragment, this.source.obj, this.source.config);
                     if (noStrip) {
                         Array.from(targetFragment.childNodes || []).forEach(child => {
-                            documentFragment.firstElementChild.appendChild(child);
+                            var _a;
+                            (_a = documentFragment.firstElementChild) === null || _a === void 0 ? void 0 : _a.appendChild(child);
                         });
                     }
                     (_d = this.elementSource.element.parentNode) === null || _d === void 0 ? void 0 : _d.replaceChild(documentFragment, this.elementSource.element);

package/operators/DrThis.js

@@ -13,13 +13,40 @@ import { ComponentSet } from '../components/ComponentSet';
 import { ExecuteState } from './OperatorExecuter';
 import { isOnDrThisUnBind } from '../lifecycle/dr-this/OnDrThisUnBind';
 import { isOnDrThisBind } from '../lifecycle/dr-this/OnDrThisBind';
+import { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';
 export class DrThis extends OperatorExecuterAttrRequire {
     executeAttrRequire(attr) {
         return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-            // console.log('drThis!!!!!!!!!!!!!',this.elementSource.attrs.drThis);
-            if (attr && this.elementSource.attrs.drThis) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+            // const e = this.elementSource;
+            // console.log('drThis!!!!!!!!!!!!!', this.elementSource.attrs.drDetectIfOption, this.elementSource.attrs.drIfOption);
+            const optionIf = (_a = this.elementSource.attrs.drDetectIfOption) !== null && _a !== void 0 ? _a : this.elementSource.attrs.drIfOption;
+            const ok = ScriptUtils.eval(`
+                ${this.render.bindScript}
+                try {
+                  const ok  = ${this.elementSource.attrs.drThis};
+                  const option = ${optionIf};
+                  if (option!==null) {
+                     return !!(ok && option); 
+                  }
+                  // console.log('vv', ${this.elementSource.attrs.drThis}, ${this.elementSource.attrs.drIfOption}, '${this.elementSource.attrs.drIfOption}');
+                  return !!ok;
+                } catch(e) {
+                  return false;
+                }
+                `, Object.assign(this.source.obj, {
+                __render: Object.freeze(Object.assign({ drAttr: this.elementSource.attrs, drAttrsOriginName: RawSet.drAttrsOriginName }, this.render))
+            }));
+            // console.log('----zxvxcv-----!!!aa!', ok);
+            // if (!ok) {
+            //   this.elementSource.element.remove();
+            //   return ExecuteState.STOP;
+            // }
+            // console.log('----zxvxcv-----!!!!', attr);
+            if (attr && this.elementSource.attrs.drThis && ok) {
                 let thisPath = this.elementSource.attrs.drThis;
+                // let optionIf = this.elementSource.attrs.drIfOption;
+                // console.log('drThis!!!!!!!!!!!!!, ', optionIf)
                 if (attr instanceof ComponentSet) {
                     // console.log('drThis!!!!!!!!!!->', attr)
                     // if (this.rawSet.data) {
@@ -27,32 +54,34 @@ export class DrThis extends OperatorExecuterAttrRequire {
                     //   debugger;
                     //   RawSet.destroy((this.rawSet.data as ComponentSet).obj, [], this.source.config, destroyOptions);
                     // }
-                    if (((_b = (_a = attr.config) === null || _a === void 0 ? void 0 : _a.beforeComponentSet) === null || _b === void 0 ? void 0 : _b.obj) !== attr.obj) {
-                        if (isOnDrThisUnBind((_c = attr.config.beforeComponentSet) === null || _c === void 0 ? void 0 : _c.obj)) {
-                            (_f = (_e = (_d = attr.config.beforeComponentSet) === null || _d === void 0 ? void 0 : _d.obj) === null || _e === void 0 ? void 0 : _e.onDrThisUnBind) === null || _f === void 0 ? void 0 : _f.call(_e);
+                    if (((_c = (_b = attr.config) === null || _b === void 0 ? void 0 : _b.beforeComponentSet) === null || _c === void 0 ? void 0 : _c.obj) !== attr.obj) {
+                        if (isOnDrThisUnBind((_d = attr.config.beforeComponentSet) === null || _d === void 0 ? void 0 : _d.obj)) {
+                            (_g = (_f = (_e = attr.config.beforeComponentSet) === null || _e === void 0 ? void 0 : _e.obj) === null || _f === void 0 ? void 0 : _f.onDrThisUnBind) === null || _g === void 0 ? void 0 : _g.call(_f);
                         }
                     }
                     // this.rawSet.dataSet ??= {};
                     // this.rawSet.dataSet.data = attr;
-                    if (((_h = (_g = attr.config) === null || _g === void 0 ? void 0 : _g.beforeComponentSet) === null || _h === void 0 ? void 0 : _h.obj) !== attr.obj) {
+                    if (((_j = (_h = attr.config) === null || _h === void 0 ? void 0 : _h.beforeComponentSet) === null || _j === void 0 ? void 0 : _j.obj) !== attr.obj) {
                         if (isOnDrThisBind(attr.obj)) {
-                            (_k = (_j = attr.obj) === null || _j === void 0 ? void 0 : _j.onDrThisBind) === null || _k === void 0 ? void 0 : _k.call(_j);
+                            (_l = (_k = attr.obj) === null || _k === void 0 ? void 0 : _k.onDrThisBind) === null || _l === void 0 ? void 0 : _l.call(_k);
                         }
                     }
                     // 중요: componentSet 의 objPath를 보고 판단하는 중요한부분
                     thisPath = `${this.elementSource.attrs.drThis}${attr.config.objPath ? ('.' + attr.config.objPath) : ''}`;
+                    // const zthisPath = `${this.elementSource.attrs.drThis}${attr.config.objPath ? ('?.' + attr.config.objPath) : ''}`;
+                    // console.log('thisPaththisPaththisPath',thisPath)
                     this.setThisPath(thisPath);
-                    const componentBody = yield RawSet.drThisCreate(this.rawSet, this.elementSource.element, thisPath, (_l = this.elementSource.attrs.drVarOption) !== null && _l !== void 0 ? _l : '', this.elementSource.attrs.drStripOption, this.source.obj, this.source.config, attr);
+                    const componentBody = yield RawSet.drThisCreate(this.rawSet, this.elementSource.element, thisPath, (_m = this.elementSource.attrs.drVarOption) !== null && _m !== void 0 ? _m : '', this.elementSource.attrs.drStripOption, this.source.obj, this.source.config, attr);
                     this.returnContainer.fag.append(componentBody);
                     this.afterCallBack.onThisComponentSetCallBacks.push(attr);
                 }
                 else {
                     this.setThisPath(thisPath);
-                    this.returnContainer.fag.append(yield RawSet.drThisCreate(this.rawSet, this.elementSource.element, this.elementSource.attrs.drThis, (_m = this.elementSource.attrs.drVarOption) !== null && _m !== void 0 ? _m : '', this.elementSource.attrs.drStripOption, this.source.obj, this.source.config));
+                    this.returnContainer.fag.append(yield RawSet.drThisCreate(this.rawSet, this.elementSource.element, this.elementSource.attrs.drThis, (_o = this.elementSource.attrs.drVarOption) !== null && _o !== void 0 ? _o : '', this.elementSource.attrs.drStripOption, this.source.obj, this.source.config));
                 }
                 // console.log('!!!!!!!!!zzz', Array.from(this.returnContainer.fag.childNodes), this.elementSource.element);
                 const rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
-                (_o = this.elementSource.element.parentNode) === null || _o === void 0 ? void 0 : _o.replaceChild(this.returnContainer.fag, this.elementSource.element);
+                (_p = this.elementSource.element.parentNode) === null || _p === void 0 ? void 0 : _p.replaceChild(this.returnContainer.fag, this.elementSource.element);
                 this.returnContainer.raws.push(...rr);
             }
             else {

package/operators/OperatorExecuter.js

@@ -8,6 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';
+import { ObjectUtils } from '@dooboostore/core';
 export var ExecuteState;
 (function (ExecuteState) {
     ExecuteState[ExecuteState["EXECUTE"] = 0] = "EXECUTE";
@@ -35,7 +36,8 @@ export class OperatorExecuter {
             }
             let r = attrValue;
             if (r && this.startingExecute) {
-                r = ScriptUtils.eval(` ${this.render.bindScript}; return ${attrValue}`, Object.assign(this.source.obj, { __render: this.render }));
+                const optionalPath = ObjectUtils.Path.toOptionalChainPath(attrValue);
+                r = ScriptUtils.eval(` ${this.render.bindScript}; return ${optionalPath}`, Object.assign(this.source.obj, { __render: this.render }));
             }
             if ((_c = this.source.operatorAround) === null || _c === void 0 ? void 0 : _c.before) {
                 r = (_d = this.source.operatorAround) === null || _d === void 0 ? void 0 : _d.before(r, this);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/dom-render",
-  "version": "1.0.100",
+  "version": "1.0.103",
   "license": "MIT",
   "description": "html view template engine",
   "keywords": [
@@ -44,8 +44,8 @@
   },
   "dependencies": {
     "reflect-metadata": "^0.2.2",
-    "@dooboostore/core": "1.0.7",
     "@dooboostore/core-web": "1.0.1",
+    "@dooboostore/core": "1.0.9",
     "@dooboostore/core-node": "1.0.1"
   },
   "devDependencies": {
@@ -72,9 +72,10 @@
     "webpack-dev-server": "^5.2.0"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.build.json",
+    "tsc:build": "rm -rf dist && tsc -p tsconfig.build.json",
+    "bundle": "webpack --config webpack.config.js",
     "clean": "rm -rf  dist",
-    "npm:build": "pnpm run build && cp README.MD dist/ && pnpm pack && TARBALL_NAME=$(ls dooboostore-dom-render-*.tgz | head -n 1) && tar -xzf \"$TARBALL_NAME\" -C dist --strip-components=1 package/package.json && rm \"$TARBALL_NAME\"",
+    "npm:build": "pnpm run tsc:build && pnpm run bundle && cp README.MD dist/ && pnpm pack && TARBALL_NAME=$(ls dooboostore-dom-render-*.tgz | head -n 1) && tar -xzf \"$TARBALL_NAME\" -C dist --strip-components=1 package/package.json && rm \"$TARBALL_NAME\"",
     "npm:clean": "rm -rf  dist",
     "npm:publish": "pnpm run npm:build && cd dist && pnpm publish --no-git-checks",
     "npm:publish:clean": "pnpm run npm:publish && rm -rf dist",

package/rawsets/Attrs.d.ts

@@ -20,6 +20,8 @@ export type Attrs = {
     drBeforeOption: string | null;
     drCompleteOption: string | null;
     drStripOption: string | null;
+    drIfOption: string | null;
+    drDetectIfOption: string | null;
     drDestroyOption: string | null;
     drHasKeysOption: string | null;
     drKeyOption: string | null;

package/rawsets/RawSet.d.ts

@@ -135,7 +135,7 @@ export declare class RawSet {
     }): string;
     static drThisBindEncoding(element: Element, variable: RegExp, config: {
         config: Config;
-        otherReplaceVariablePath: string;
+        otherReplaceVariablePath?: string;
     }): string;
     static drThisBindDecoding(element: Element, config: {
         asIs: string;
@@ -160,7 +160,7 @@ export declare class RawSet {
         name: string;
         noStrip?: boolean;
         objFactory: (element: Element, obj: any, rawSet: RawSet, counstructorParam: any[]) => any;
-        template: string;
+        template?: string;
         styles?: string | (string[]);
     }): TargetElement;
     static isExpression(data: string | null): boolean;