@dooboostore/dom-render 1.0.102 → 1.0.103

package/rawsets/RawSet.js

@@ -10,9 +10,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { RandomUtils } from '@dooboostore/core/random/RandomUtils';
 import { StringUtils } from '@dooboostore/core/string/StringUtils';
 import { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';
-import { EventManager, eventManager } from '../events/EventManager';
+import { EventManager } from '../events/EventManager';
 import { Range } from '../iterators/Range';
-import { DomUtils } from '@dooboostore/core-web/dom/DomUtils';
+import { ElementUtils } from '@dooboostore/core-web/element/ElementUtils';
 import { DrPre } from '../operators/DrPre';
 import { Dr } from '../operators/Dr';
 import { DrIf } from '../operators/DrIf';
@@ -40,6 +40,7 @@ import { isOnInitRender } from '../lifecycle/OnInitRender';
 import { isOnCreatedThisChild } from '../lifecycle/OnCreatedThisChild';
 import { isOnDestroyRender } from '../lifecycle/OnDestroyRender';
 import { DrTargetElementIsElement } from '../operators/DrTargetElementIsElement';
+import { ObjectUtils } from '@dooboostore/core';
 export class RawSet {
     constructor(uuid, type, point, dataSet, detect) {
         this.uuid = uuid;
@@ -49,13 +50,18 @@ export class RawSet {
         this.detect = detect;
         this.findNearThis = (obj, rawSet = this) => {
             const path = this.findNearThisPath(rawSet);
-            if (path)
-                return ScriptUtils.evalReturn(path, obj);
+            if (path) {
+                const optionalPath = ObjectUtils.Path.toOptionalChainPath(path);
+                // console.log('ppppp-', path, optionalPath)
+                return ScriptUtils.evalReturn(optionalPath, obj);
+            }
         };
         this.findParentThis = (obj, rawSet = this) => {
             const path = this.findParentThisPath(rawSet);
-            if (path)
-                return ScriptUtils.evalReturn(path, obj);
+            if (path) {
+                const optionalPath = ObjectUtils.Path.toOptionalChainPath(path);
+                return ScriptUtils.evalReturn(optionalPath, obj);
+            }
         };
         this.findNearThisPath = (rawSet = this) => {
             const paths = this.findThisPaths(rawSet);
@@ -151,7 +157,7 @@ export class RawSet {
     // 중요 render 처리 부분
     render(obj, config) {
         return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
             // console.log('render!!!!!!!!!!!!!!')
             const genNode = config.window.document.importNode(this.dataSet.fragment, true);
             const raws = [];
@@ -164,7 +170,7 @@ export class RawSet {
                 // console.log('cNodecNodecNode', cNode);
                 let attribute = {};
                 if (cNode.nodeType === Node.ELEMENT_NODE) {
-                    attribute = DomUtils.getAttributeToObject(cNode);
+                    attribute = ElementUtils.getAttributeToObject(cNode);
                 }
                 const __render = Object.freeze({
                     rawSet: this,
@@ -177,7 +183,7 @@ export class RawSet {
                     scriptUtils: ScriptUtils,
                     nearThis: this.findNearThis(obj),
                     parentThis: this.findParentThis(obj),
-                    bindScript: `
+                    bindScript: ` /** render **/
                     const ${EventManager.SCRIPTS_VARNAME} = this.__render.scripts;
                     const ${EventManager.RAWSET_VARNAME} = this.__render.rawSet;
                     const ${EventManager.ELEMENT_VARNAME} = this.__render.element;
@@ -242,6 +248,7 @@ export class RawSet {
                         drStripElement: this.getAttributeAndDelete(element, RawSet.DR_STRIP_NAME),
                         drReplaceTargetElementIs: this.getAttributeAndDelete(element, RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME),
                         drItOption: this.getAttributeAndDelete(element, RawSet.DR_IT_OPTIONNAME),
+                        drIfOption: this.getAttributeAndDelete(element, RawSet.DR_IF_OPTIONNAME),
                         drVarOption: this.getAttributeAndDelete(element, RawSet.DR_VAR_OPTIONNAME),
                         drNextOption: this.getAttributeAndDelete(element, RawSet.DR_NEXT_OPTIONNAME),
                         drAfterOption: this.getAttributeAndDelete(element, RawSet.DR_AFTER_OPTIONNAME),
@@ -249,7 +256,9 @@ export class RawSet {
                         drCompleteOption: this.getAttributeAndDelete(element, RawSet.DR_COMPLETE_OPTIONNAME),
                         drStripOption: this.getAttributeAndDelete(element, RawSet.DR_STRIP_OPTIONNAME),
                         drDestroyOption: this.getAttributeAndDelete(element, RawSet.DR_DESTROY_OPTIONNAME),
-                        drKeyOption: this.getAttributeAndDelete(element, RawSet.DR_KEY_OPTIONNAME)
+                        drKeyOption: this.getAttributeAndDelete(element, RawSet.DR_KEY_OPTIONNAME),
+                        drDetectIfOption: this.getAttribute(element, RawSet.DR_DETECT_IF_OPTIONNAME),
+                        drHasKeysOption: this.getAttribute(element, RawSet.DR_HAS_KEYS_OPTIONNAME),
                     };
                     drAttrs.push(drAttr);
                     // 아래 순서 중요
@@ -318,7 +327,7 @@ export class RawSet {
                 }
             }
             for (const it of onElementInitCallBacks) {
-                if (isOnInitRender(this.dataSet.render.currentThis)) {
+                if (isOnInitRender((_s = this.dataSet.render) === null || _s === void 0 ? void 0 : _s.currentThis)) {
                     // TODO: 나중에 파라미터 들어가야될듯. 지금은 리팩토링하느라 빠짐
                     // console.log('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!', it, this.dataSet);
                     // dr-on-init:arguments
@@ -344,20 +353,20 @@ export class RawSet {
                     // }
                     this.dataSet.render.currentThis.onInitRender({}, this);
                 }
-                (_s = config === null || config === void 0 ? void 0 : config.onElementInit) === null || _s === void 0 ? void 0 : _s.call(config, it.name, obj, this, it.targetElement);
+                (_t = config === null || config === void 0 ? void 0 : config.onElementInit) === null || _t === void 0 ? void 0 : _t.call(config, it.name, obj, this, it.targetElement);
             }
             // TODO: 이부분도 위에 targetElement 처럼 해야될까?
             for (const it of onAttrInitCallBacks) {
-                (_t = config === null || config === void 0 ? void 0 : config.onAttrInit) === null || _t === void 0 ? void 0 : _t.call(config, it.attrName, it.attrValue, obj, this);
+                (_u = config === null || config === void 0 ? void 0 : config.onAttrInit) === null || _u === void 0 ? void 0 : _u.call(config, it.attrName, it.attrValue, obj, this);
             }
             // component destroy
             if (obj.__domrender_components) {
                 Object.entries(obj.__domrender_components).forEach(([key, value]) => {
-                    var _a, _b;
+                    var _a, _b, _c;
                     const rawSet = value.__rawSet;
-                    const drAttrs = rawSet === null || rawSet === void 0 ? void 0 : rawSet.dataSet.render.attribute;
+                    const drAttrs = (_a = rawSet === null || rawSet === void 0 ? void 0 : rawSet.dataSet.render) === null || _a === void 0 ? void 0 : _a.attribute;
                     if (rawSet && !rawSet.isConnected) {
-                        const destroyOptions = (_b = (_a = drAttrs === null || drAttrs === void 0 ? void 0 : drAttrs.drDestroyOption) === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
+                        const destroyOptions = (_c = (_b = drAttrs === null || drAttrs === void 0 ? void 0 : drAttrs.drDestroyOption) === null || _b === void 0 ? void 0 : _b.split(',')) !== null && _c !== void 0 ? _c : [];
                         RawSet.destroy(obj.__domrender_components[key], { rawSet: rawSet }, config, destroyOptions);
                         delete obj.__domrender_components[key];
                     }
@@ -446,10 +455,10 @@ export class RawSet {
         return styleBody;
     }
     applyEvent(obj, fragment = this.dataSet.fragment, config) {
-        eventManager.applyEvent(obj, eventManager.findAttrElements(fragment, config), config);
+        this.dataSet.config.eventManager.applyEvent(obj, this.dataSet.config.eventManager.findAttrElements(fragment, config), config);
     }
     onRenderedEvent(obj, nodes, config) {
-        eventManager.onRenderedEvent(obj, nodes, config);
+        this.dataSet.config.eventManager.onRenderedEvent(obj, nodes, config);
     }
     getAttribute(element, attr) {
         const data = element.getAttribute(attr);
@@ -466,7 +475,7 @@ export class RawSet {
         let data = element.getAttribute(RawSet.DR_APPENDER_NAME);
         // if (data && !/\[[0-9]+\]/g.test(data)) {
         if (data && !/\[.+\]/g.test(data)) {
-            const currentIndex = ScriptUtils.evalReturn(`${data}?.length -1`, obj);
+            const currentIndex = ScriptUtils.evalReturn(`${ObjectUtils.Path.toOptionalChainPath(data)}?.length -1`, obj);
             // console.log('------?', currentIndex)
             // if (currentIndex === undefined || isNaN(currentIndex)) {
             //     return undefined;
@@ -564,14 +573,15 @@ export class RawSet {
                     const isAttr = element.getAttributeNames().filter(it => {
                         const value = element.getAttribute(it);
                         // link일때
-                        if (linkNames.includes(it)) {
+                        if (value && linkNames.includes(it)) {
                             linkVariables.set(it, value);
                         }
                         else if (value && RawSet.isExpression(value)) { // 표현식있을떄
                             let variablePath = RawSet.expressionGroups(value)[0][1];
                             // normal Attribute 초반에 셋팅해주기.
                             variablePath = variablePath.replace(/#[^#]*#/g, '({})');
-                            const cval = ScriptUtils.evalReturn(variablePath, Object.assign(obj));
+                            const cval = ScriptUtils.evalReturn(ObjectUtils.Path.toOptionalChainPath(variablePath), Object.assign(obj));
+                            // const cval = ScriptUtils.evalReturn(variablePath, Object.assign(obj));
                             if (cval === null) {
                                 element.removeAttribute(it);
                             }
@@ -829,6 +839,7 @@ export class RawSet {
         return thisRandom;
     }
     static drThisBindEncoding(element, variable, config) {
+        var _a;
         element.querySelectorAll(`[${RawSet.DR_THIS_NAME}]`).forEach(eIt => {
             let message = eIt.innerHTML;
             // StringUtils.regexExec(/([^(dr\-)])?this(?=.?)/g, message).reverse().forEach(it => {
@@ -838,7 +849,8 @@ export class RawSet {
             });
             eIt.innerHTML = message;
         });
-        const targetElementNames = config.config.targetElements.map(it => it.name.replaceAll('.', '\\.').replaceAll(':', '\\:')).join(',');
+        const targetElements = (_a = config.config.targetElements) !== null && _a !== void 0 ? _a : [];
+        const targetElementNames = targetElements.map(it => it.name.replaceAll('.', '\\.').replaceAll(':', '\\:')).join(',');
         const thisRandom = RandomUtils.uuid();
         element.querySelectorAll(targetElementNames).forEach(it => {
             it.innerHTML = it.innerHTML.replace(variable, thisRandom);
@@ -857,7 +869,9 @@ export class RawSet {
         return thisRandom;
     }
     static drThisBindDecoding(element, config) {
-        const targetElementNames = config.config.targetElements.map(it => it.name.replaceAll('.', '\\.').replaceAll(':', '\\:')).join(',');
+        var _a;
+        const targetElements = (_a = config.config.targetElements) !== null && _a !== void 0 ? _a : [];
+        const targetElementNames = targetElements.map(it => it.name.replaceAll('.', '\\.').replaceAll(':', '\\:')).join(',');
         element.querySelectorAll(targetElementNames).forEach(it => {
             it.innerHTML = it.innerHTML.replace(RegExp(config.asIs, 'g'), config.toBe);
         });
@@ -925,8 +939,8 @@ export class RawSet {
     }
     static drThisCreate(rawSet, element, drThis, drVarOption, drStripOption, obj, config, set) {
         return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c, _d, _e;
-            var _f;
+            var _a, _b, _c, _d, _e, _f, _g;
+            var _h;
             // console.log('ttttttttttttttttttttt',element.innerHTML, drThis, set, obj);
             const fag = config.window.document.createDocumentFragment();
             const targetElement = element.cloneNode(true);
@@ -938,7 +952,7 @@ export class RawSet {
                 targetElement.innerHTML = style + ((_b = set.template) !== null && _b !== void 0 ? _b : '');
             }
             else {
-                targetObj = ScriptUtils.evalReturn(drThis, obj);
+                targetObj = ScriptUtils.evalReturn(ObjectUtils.Path.toOptionalChainPath(drThis), obj);
             }
             const componentKey = rawSet.uuid;
             const renderScript = ` /*drThisCreate*/
@@ -991,15 +1005,14 @@ export class RawSet {
                 targetObj === null || targetObj === void 0 ? void 0 : targetObj.onCreateRenderData(onCreateDataParam);
             }
             // 부모에게도 자식 this 생성된거 알려주는 callback
-            if (onCreateDataParam.render.parentThis && isOnCreatedThisChild(onCreateDataParam.render.parentThis)) {
+            if (((_d = onCreateDataParam === null || onCreateDataParam === void 0 ? void 0 : onCreateDataParam.render) === null || _d === void 0 ? void 0 : _d.parentThis) && isOnCreatedThisChild((_e = onCreateDataParam === null || onCreateDataParam === void 0 ? void 0 : onCreateDataParam.render) === null || _e === void 0 ? void 0 : _e.parentThis)) {
                 onCreateDataParam.render.parentThis.onCreatedThisChild(targetObj, onCreateDataParam);
             }
             // dr-on-create onCreateRender
             const onCreate = element.getAttribute(RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME);
             let createParam = [];
             if (onCreate) {
-                const script = `${renderScript} return ${onCreate} `;
-                createParam = ScriptUtils.eval(script, obj);
+                createParam = ScriptUtils.evalReturn({ bodyScript: renderScript, returnScript: ObjectUtils.Path.toOptionalChainPath(onCreate) }, obj);
                 if (!Array.isArray(createParam)) {
                     createParam = [createParam];
                 }
@@ -1012,7 +1025,7 @@ export class RawSet {
             // const normalAttrMap = element.getAttribute(EventManager.normalAttrMapAttrName);
             const targetAttrObject = RawSet.getAttributeObject(element, { script: renderScript, obj: obj, renderData: render });
             if (targetAttrObject) {
-                (_d = (_f = rawSet.dataSet).render) !== null && _d !== void 0 ? _d : (_f.render = {});
+                (_f = (_h = rawSet.dataSet).render) !== null && _f !== void 0 ? _f : (_h.render = {});
                 rawSet.dataSet.render.attribute = targetAttrObject;
                 Object.entries(targetAttrObject).forEach(([key, cval], index) => {
                     // console.log('ooooooooooooooooo', key, cval);
@@ -1048,7 +1061,7 @@ export class RawSet {
             //   RawSet.replaceInnerHTML(element, {asIs: `#${innerHTMLName}#`, toBe: innerHTMLNameReplaceKey})
             // }
             // 이걸 왜 뺐었지... 다시넣었음  그런데 조금 로직이.. 검증이..
-            const innerHTMLName = (_e = targetElement.getAttribute(RawSet.DR_COMPONENT_INNER_HTML_NAME_OPTIONNAME)) !== null && _e !== void 0 ? _e : 'innerHTML';
+            const innerHTMLName = (_g = targetElement.getAttribute(RawSet.DR_COMPONENT_INNER_HTML_NAME_OPTIONNAME)) !== null && _g !== void 0 ? _g : 'innerHTML';
             if (innerHTMLName) {
                 RawSet.replaceInnerHTML(targetElement, { asIs: `#${innerHTMLName}#`, toBe: element.innerHTML });
             }
@@ -1205,7 +1218,7 @@ export class RawSet {
                     //
                     // // dr-constructor
                     if (constructor) {
-                        let param = (_c = ScriptUtils.evalReturn({ bodyScript: renderScript, returnScript: constructor }, Object.assign(obj, { __render: render }))) !== null && _c !== void 0 ? _c : [];
+                        let param = (_c = ScriptUtils.evalReturn({ bodyScript: renderScript, returnScript: ObjectUtils.Path.toOptionalChainPath(constructor) }, Object.assign(obj, { __render: render }))) !== null && _c !== void 0 ? _c : [];
                         if (!Array.isArray(param)) {
                             param = [param];
                         }
@@ -1346,7 +1359,7 @@ export class RawSet {
         if (!element) {
             return undefined;
         }
-        const attribute = DomUtils.getAttributeToObject(element);
+        const attribute = ElementUtils.getAttributeToObject(element);
         const normalAttribute = attribute[EventManager.normalAttrMapAttrName];
         if (normalAttribute) {
             new Map(JSON.parse(normalAttribute)).forEach((v, k) => {
@@ -1427,6 +1440,8 @@ RawSet.drAttrsOriginName = {
     drStripElement: RawSet.DR_STRIP_NAME,
     drReplaceTargetElementIs: RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME,
     drStripOption: RawSet.DR_STRIP_OPTIONNAME,
+    drIfOption: RawSet.DR_IF_OPTIONNAME,
+    drDetectIfOption: RawSet.DR_DETECT_IF_OPTIONNAME,
     drDestroyOption: RawSet.DR_DESTROY_OPTIONNAME,
     drHasKeysOption: RawSet.DR_HAS_KEYS_OPTIONNAME,
     drKeyOption: RawSet.DR_KEY_OPTIONNAME

package/routers/HashRouter.d.ts

@@ -1,12 +1,12 @@
-import { RouteAction, Router, RouterConfig } from './Router';
+import { ChangeStateResult, RouteAction, Router, RouterConfig } from './Router';
 export declare class HashRouter extends Router {
     constructor(config: RouterConfig);
     getSearchParams(data?: {
         delete?: string[];
         append?: [[string, string]];
     }): URLSearchParams;
-    push(path: RouteAction, data?: any, title?: string): void;
-    replace(path: RouteAction, data?: any, title?: string): void;
+    push(path: RouteAction, data?: any, title?: string): ChangeStateResult;
+    replace(path: RouteAction, data?: any, title?: string): ChangeStateResult;
     setDeleteHashSearchParam(name: string, data?: any, title?: string): void;
     pushDeleteHashSearchParam(name: string | string[], data: any, title: string | undefined): void;
     pushDeleteSearchParam(name: string | string[], data?: any, title?: string): void;
@@ -15,7 +15,8 @@ export declare class HashRouter extends Router {
     replaceDeleteSearchParam(name: string | string[], data?: any, title?: string): void;
     replaceAddSearchParam(params: [[string, string]], data?: any, title?: string): void;
     getUrl(): string;
-    getPath(): string;
+    getHref(): string;
+    getPathName(): string;
     getHashSearchParams(data?: {
         delete?: string[];
         append?: [[string, string]];

package/routers/HashRouter.js

@@ -18,18 +18,18 @@ export class HashRouter extends Router {
     }
     push(path, data, title = '') {
         if (path === '/') {
-            super.pushState(data, title, '/');
+            return super.pushState(data, title, '/');
         }
         else {
-            super.pushState(data, title, `#${this.toUrl(path)}`);
+            return super.pushState(data, title, `#${this.toUrl(path)}`);
         }
     }
     replace(path, data, title) {
         if (path === '/') {
-            super.replaceState(data, title, '/');
+            return super.replaceState(data, title, '/');
         }
         else {
-            super.replaceState(data, title, `#${this.toUrl(path)}`);
+            return super.replaceState(data, title, `#${this.toUrl(path)}`);
         }
     }
     setDeleteHashSearchParam(name, data, title) {
@@ -65,7 +65,10 @@ export class HashRouter extends Router {
     getUrl() {
         return LocationUtils.hash(this.config.window) || '/';
     }
-    getPath() {
+    getHref() {
+        return this.config.window.location.href;
+    }
+    getPathName() {
         return LocationUtils.hashPath(this.config.window) || '/';
     }
     getHashSearchParams(data) {

package/routers/PathRouter.d.ts

@@ -1,12 +1,12 @@
-import { RouteAction, Router, RouterConfig } from './Router';
+import { ChangeStateResult, RouteAction, Router, RouterConfig } from './Router';
 export declare class PathRouter extends Router {
     constructor(config: RouterConfig);
     getSearchParams(data?: {
         delete?: string[];
         append?: [[string, string]];
     }): URLSearchParams;
-    push(path: RouteAction, data?: any, title?: string): void;
-    replace(path: RouteAction, data?: any, title?: string): void;
+    push(path: RouteAction, data?: any, title?: string): ChangeStateResult;
+    replace(path: RouteAction, data?: any, title?: string): ChangeStateResult;
     pushDeleteSearchParam(name: string, data?: any, title?: string): void;
     pushDeleteHashSearchParam(name: string, data?: any, title?: string): void;
     pushAddSearchParam(params: [[string, string]], data?: any, title?: string): void;
@@ -14,7 +14,8 @@ export declare class PathRouter extends Router {
     replaceDeleteHashSearchParam(name: string | string[], data?: any, title?: string): void;
     replaceAddSearchParam(params: [[string, string]], data?: any, title?: string): void;
     getUrl(): string;
-    getPath(): string;
+    getHref(): string;
+    getPathName(): string;
     getHashSearchParams(data?: {
         delete?: string[];
         append?: [[string, string]];

package/routers/PathRouter.js

@@ -15,11 +15,10 @@ export class PathRouter extends Router {
         return searchParams;
     }
     push(path, data, title = '') {
-        // console.log('pppppp?')
-        super.pushState(data, title, this.toUrl(path));
+        return super.pushState(data, title, this.toUrl(path));
     }
     replace(path, data, title = '') {
-        super.replaceState(data, title, this.toUrl(path));
+        return super.replaceState(data, title, this.toUrl(path));
     }
     pushDeleteSearchParam(name, data, title) {
         const s = this.getSearchParams({ delete: [name] });
@@ -53,7 +52,10 @@ export class PathRouter extends Router {
         const url = new URL(this.config.window.document.location.href);
         return url.pathname + url.search;
     }
-    getPath() {
+    getHref() {
+        return this.config.window.location.href;
+    }
+    getPathName() {
         return this.config.window.location.pathname;
     }
     getHashSearchParams(data) {

package/routers/Router.d.ts

@@ -1,4 +1,5 @@
 import { ConvertUtils } from '@dooboostore/core/convert/ConvertUtils';
+import { Observable } from '@dooboostore/core/message';
 import ToURLSearchParamsParams = ConvertUtils.ToURLSearchParamsParams;
 export type RouteData = {
     path: string;
@@ -7,19 +8,29 @@ export type RouteData = {
     searchParams: URLSearchParams;
     pathData?: any;
     router: Router;
+    currentTarget?: PopCurrentState;
 };
+export type PopStateCurrentTargetDomrenderRouter = {
+    currentTargetName: 'domRenderRouter';
+};
+export type PopCurrentState = PopStateCurrentTargetDomrenderRouter;
+export declare const isPopStateCurrentTargetDomrenderRouter: (obj: any) => obj is PopStateCurrentTargetDomrenderRouter;
 export type RouterConfig<T = any> = {
     rootObject?: T;
     window: Window;
     disableAttach?: boolean;
 };
+export type ChangeStateResult = {
+    data?: any;
+};
 export type RouteAction = string | {
     path?: string;
     searchParams?: ToURLSearchParamsParams;
 };
 export declare abstract class Router<T = any> {
-    private changeCallbacks;
+    private behaviorSubject;
     private _config;
+    get observable(): Observable<RouteData>;
     get searchParamObject(): {
         [key: string]: string | string[];
     };
@@ -27,15 +38,17 @@ export declare abstract class Router<T = any> {
     constructor(config: RouterConfig<any>);
     getSearchFirstParamsObject<T = any>(defaultValue?: T): T & import("@dooboostore/core/types").FieldType<T, string>;
     getHashSearchFirstParamsObject<T = any>(): import("@dooboostore/core/types").FieldType<T, string>;
-    addChangeCallback(callback: (routeData: RouteData) => void): void;
     attach(): Promise<void>;
     testRegexp(regexp: string): boolean;
     test(urlExpression: string): boolean;
-    getRouteData(urlExpression?: string): RouteData;
-    pushState(data: any, title: string, path: string): void;
-    replaceState(data: any, title: string, path: string): void;
-    dispatchPopStateEvent(): void;
-    reload(): void;
+    getRouteData(config?: {
+        urlExpression?: string;
+        currentTarget?: PopCurrentState;
+    }): RouteData;
+    pushState(data: any, title: string | undefined, path: string): ChangeStateResult;
+    replaceState(data: any, title: string | undefined, path: string): ChangeStateResult;
+    private dispatchPopStateEvent;
+    reload(data?: any): void;
     getData(): any;
     getPathData(urlExpression: string, currentUrl?: string): any;
     go(config: {
@@ -63,6 +76,7 @@ export declare abstract class Router<T = any> {
         append?: [[string, string]];
     }): URLSearchParams;
     abstract getUrl(): string;
-    abstract getPath(): string;
+    abstract getHref(): string;
+    abstract getPathName(): string;
 }
 //# sourceMappingURL=Router.d.ts.map

package/routers/Router.js

@@ -7,10 +7,21 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { getDomRenderProxy } from '../DomRenderProxy';
 import { EventManager } from '../events/EventManager';
 import { ConvertUtils } from '@dooboostore/core/convert/ConvertUtils';
+import { BehaviorSubject } from '@dooboostore/core/message';
 import { Expression } from '@dooboostore/core/expression/Expression';
+export const isPopStateCurrentTargetDomrenderRouter = (obj) => (obj === null || obj === void 0 ? void 0 : obj.currentTargetName) === 'domRenderRouter';
+/*
+    this.option.window.addEventListener('popstate', (event) => { // history.back, forward에만 popstate 발생되고 값이 도출된다
+   console.log('popstate-------!!', event.state, this.domRenderConfig.window.history.state)
+   })
+ */
 export class Router {
+    get observable() {
+        return this.behaviorSubject.asObservable();
+    }
     get searchParamObject() {
         return ConvertUtils.toObject(this.getSearchParams());
     }
@@ -18,14 +29,15 @@ export class Router {
         return this._config;
     }
     constructor(config) {
-        this.changeCallbacks = new Set();
         this._config = config;
-        this._config.window.addEventListener('popstate', () => {
-            this.changeCallbacks.forEach(it => {
-                it(this.getRouteData());
-            });
+        this.behaviorSubject = new BehaviorSubject(this.getRouteData());
+        this.config.window.addEventListener('popstate', (event) => {
+            if (!isPopStateCurrentTargetDomrenderRouter(event.state)) {
+                // console.log('-------');
+                const routeData = this.getRouteData();
+                this.behaviorSubject.next(routeData);
+            }
         });
-        // this.go({path:this.getUrl()});
     }
     getSearchFirstParamsObject(defaultValue) {
         const a = ConvertUtils.toObject(this.getSearchParams(), { firstValue: true });
@@ -34,12 +46,9 @@ export class Router {
     getHashSearchFirstParamsObject() {
         return ConvertUtils.toObject(this.getHashSearchParams(), { firstValue: true });
     }
-    addChangeCallback(callback) {
-        this.changeCallbacks.add(callback);
-    }
     attach() {
         return __awaiter(this, void 0, void 0, function* () {
-            const proxy = this.config.rootObject._DomRender_proxy;
+            const proxy = getDomRenderProxy(this.config.rootObject);
             if (proxy) {
                 const key = `___${EventManager.ROUTER_VARNAME}`;
                 yield proxy.render(key);
@@ -47,7 +56,7 @@ export class Router {
         });
     }
     testRegexp(regexp) {
-        const b = RegExp(regexp).test(this.getPath());
+        const b = RegExp(regexp).test(this.getPathName());
         return b;
     }
     test(urlExpression) {
@@ -58,9 +67,9 @@ export class Router {
             return false;
         }
     }
-    getRouteData(urlExpression) {
+    getRouteData(config) {
         const newVar = {
-            path: this.getPath(),
+            path: this.getPathName(),
             url: this.getUrl(),
             searchParams: this.getSearchParams()
         };
@@ -68,31 +77,40 @@ export class Router {
         if (data) {
             newVar.data = data;
         }
-        if (urlExpression) {
-            const data = this.getPathData(urlExpression);
+        if (config === null || config === void 0 ? void 0 : config.urlExpression) {
+            const data = this.getPathData(config.urlExpression);
             if (data) {
                 newVar.pathData = data;
             }
         }
         newVar.router = this;
+        newVar.currentTarget = config === null || config === void 0 ? void 0 : config.currentTarget;
         return Object.freeze(newVar);
     }
     pushState(data, title, path) {
-        this.config.window.history.pushState(data, title, path);
+        // data = this.config.changeStateConvertDate?this.config.changeStateConvertDate(data): data;
+        // console.log('--->pushState', data);
+        this.config.window.history.pushState(data, title !== null && title !== void 0 ? title : '', path);
+        this.behaviorSubject.next(this.getRouteData({ currentTarget: { currentTargetName: 'domRenderRouter' } }));
+        return { data };
     }
     replaceState(data, title, path) {
-        this.config.window.history.replaceState(data, title, path);
+        // data = this.config.changeStateConvertDate?this.config.changeStateConvertDate(data): data;
+        // console.log('--->replaceState', data);
+        this.config.window.history.replaceState(data, title !== null && title !== void 0 ? title : '', path);
+        this.behaviorSubject.next(this.getRouteData({ currentTarget: { currentTargetName: 'domRenderRouter' } }));
+        return { data };
     }
-    dispatchPopStateEvent() {
-        this.config.window.dispatchEvent(new Event('popstate'));
+    dispatchPopStateEvent(data) {
+        this.config.window.dispatchEvent(new PopStateEvent('popstate', { state: Object.assign(Object.assign({}, data), { currentTargetName: 'domRenderRouter' }) }));
     }
-    reload() {
-        this.config.window.dispatchEvent(new Event('popstate'));
+    reload(data) {
+        this.config.window.dispatchEvent(new PopStateEvent('popstate', { state: data }));
     }
     getData() {
         return this.config.window.history.state;
     }
-    getPathData(urlExpression, currentUrl = this.getPath()) {
+    getPathData(urlExpression, currentUrl = this.getPathName()) {
         return Expression.Path.pathNameData(currentUrl, urlExpression);
     }
     go(config) {
@@ -100,6 +118,7 @@ export class Router {
             if (typeof config === 'string') {
                 config = { path: config };
             }
+            // let data: ChangeStateResult | undefined = undefined;
             if (config === null || config === void 0 ? void 0 : config.replace) {
                 this.replace(config.path, config.data, config.title);
             }
@@ -109,8 +128,9 @@ export class Router {
             if (!this.config.disableAttach) {
                 yield this.attach();
             }
+            // console.log('----------', data, config)
             if (!config.disabledPopEvent) {
-                this.dispatchPopStateEvent();
+                this.dispatchPopStateEvent(config === null || config === void 0 ? void 0 : config.data);
             }
         });
     }
@@ -121,7 +141,7 @@ export class Router {
             targetPath = data;
         }
         else {
-            const tpath = (_a = data.path) !== null && _a !== void 0 ? _a : this.getPath();
+            const tpath = (_a = data.path) !== null && _a !== void 0 ? _a : this.getPathName();
             const s = data.searchParams ? ConvertUtils.toURLSearchParams(data.searchParams).toString() : '';
             // data.searchParams
             targetPath = `${tpath}${s.length > 0 ? '?' : ''}${s}`;