@dooboostore/dom-render 1.0.107 → 1.0.109

package/src/rawsets/RawSetOperatorType.ts

@@ -0,0 +1,3 @@
+export enum RawSetOperatorType {
+    DR_THIS_PROPERTY = 'this-property'
+}

package/src/rawsets/RawSetType.ts

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

package/src/rawsets/Render.ts

@@ -0,0 +1,26 @@
+import { CreatorMetaData } from './CreatorMetaData';
+import { Router } from '../routers/Router';
+import { RawSet } from './RawSet';
+
+export type Render = {
+    rawSet?: RawSet;
+    scripts?: { [n: string]: any };
+    bindScript?: string;
+    renderScript?: string;
+    element?: any;
+    getElement?: <T extends Element>()=>T;
+    attribute?: any;
+    creatorMetaData?: CreatorMetaData;
+    router?: Router;
+    range?: any;
+    value?: any;
+    innerHTML?: string;
+    currentThis?: any;
+    currentThisPath?: any;
+    nearThisPath?: string,
+    nearThis?: any;
+    parentThisPath?: string,
+    parentThis?: any,
+    rootObject?: any,
+    [n: string]: any; // component?: any; //component instance
+}

package/src/rawsets/index.ts

@@ -0,0 +1,9 @@
+export * from './AttrInitCallBack';
+export * from './Attrs';
+export * from './CreatorMetaData';
+export * from './DestroyOptionType';
+export * from './ElementInitCallBack';
+export * from './RawSet';
+export * from './RawSetOperatorType';
+export * from './RawSetType';
+export * from './Render';

package/src/routers/HashRouter.ts

@@ -0,0 +1,106 @@
+import { ChangeStateResult, RouteAction, Router, RouterConfig } from './Router';
+import { LocationUtils } from '@dooboostore/core-web/location/LocationUtils';
+
+
+export class HashRouter extends Router {
+
+  constructor(config: RouterConfig) {
+    super(config);
+  }
+
+
+  getSearchParams(data?: { delete?: string[], append?: [[string, string]] }): URLSearchParams {
+    const hashSearch = LocationUtils.hashSearch(this.config.window);
+    const searchParams = hashSearch ? new URLSearchParams(hashSearch) : (new URL(this.config.window.document.location.href)).searchParams;
+
+
+    data?.delete?.forEach(it => {
+      searchParams.delete(it);
+    })
+
+    data?.append?.forEach(it => {
+      searchParams.append(it[0], it[1]);
+    })
+    return searchParams;
+  }
+
+  push(path: RouteAction, data?: any, title: string = ''): ChangeStateResult {
+    if (path === '/') {
+      return super.pushState(data, title, '/');
+    } else {
+      return super.pushState(data, title, `#${this.toUrl(path)}`);
+    }
+  }
+
+  replace(path: RouteAction, data?: any, title?: string):ChangeStateResult {
+    if (path === '/') {
+      return super.replaceState(data, title, '/');
+    } else {
+      return super.replaceState(data, title, `#${this.toUrl(path)}`);
+    }
+  }
+
+  setDeleteHashSearchParam(name: string, data?: any, title?: string) {
+  }
+
+  pushDeleteHashSearchParam(name: string | string[], data: any, title: string | undefined): void {
+    const s = this.getHashSearchParams({delete:Array.isArray(name) ? name : [name]});
+    const size = Array.from(s.entries()).length;
+    const href = `${this.config.window.location.pathname}${this.config.window.location.search}${size > 0 ? '#' + s.toString() : ''}`;
+    super.pushState(data, title, href);
+  }
+
+  pushDeleteSearchParam(name: string | string[], data?: any, title?: string): void {
+    const s = this.getSearchParams({delete:Array.isArray(name) ? name : [name]});
+    this.push({searchParams: s}, data, title);
+  }
+
+  pushAddSearchParam(params:[[string, string]], data?: any, title?: string): void {
+    const s = this.getSearchParams({append: params});
+    this.push({searchParams: s}, data, title);
+  }
+
+  replaceDeleteHashSearchParam(name: string | string[], data: any, title: string | undefined): void {
+    const s = this.getHashSearchParams({delete: Array.isArray(name) ? name : [name]});
+    const size = Array.from(s.entries()).length;
+    const href = `${this.config.window.location.pathname}${this.config.window.location.search}${size > 0 ? '#' + s.toString() : ''}`;
+    super.pushState(data, title, href);
+  }
+
+  replaceDeleteSearchParam(name: string | string[], data?: any, title?: string): void {
+    const s = this.getSearchParams({delete: Array.isArray(name) ? name : [name]});
+    this.push({searchParams: s}, data, title);
+  }
+
+  replaceAddSearchParam(params:[[string, string]], data?: any, title?: string): void {
+    const s = this.getSearchParams({append: params});
+    this.push({searchParams: s}, data, title);
+  }
+
+  getUrl(): string {
+    return LocationUtils.hash(this.config.window) || '/';
+  }
+
+  getHref(): string {
+    return this.config.window.location.href;
+  }
+
+  getPathName(): string {
+    return LocationUtils.hashPath(this.config.window) || '/';
+  }
+
+  getHashSearchParams(data?:{delete?:string[], append?:[[string, string]]}): URLSearchParams {
+    const hash = this.config.window.location.hash;
+    const queryIndex = hash.indexOf('?');
+    const searchParams = (queryIndex !== -1) ? new URLSearchParams(hash.slice(queryIndex + 1)) :  new URLSearchParams();;
+    data?.delete?.forEach(it => {
+      searchParams.delete(it);
+    })
+    data?.append?.forEach(it => {
+      searchParams.append(it[0], it[1]);
+    })
+    return searchParams;
+
+  }
+
+}

package/src/routers/PathRouter.ts

@@ -0,0 +1,93 @@
+import { ChangeStateResult, RouteAction, Router, RouterConfig } from './Router';
+
+export class PathRouter extends Router {
+  constructor(config: RouterConfig) {
+    super(config);
+  }
+
+  getSearchParams(data?:{delete?:string[], append?:[[string, string]]}): URLSearchParams {
+    const searchParams =  (new URL(this.config.window.document.location.href)).searchParams;
+    data?.delete?.forEach(it => {
+      searchParams.delete(it);
+    })
+
+    data?.append?.forEach(it => {
+      searchParams.append(it[0], it[1]);
+    })
+    return searchParams;
+
+  }
+
+  push(path: RouteAction, data?: any, title: string = ''): ChangeStateResult {
+    return super.pushState(data, title, this.toUrl(path));
+  }
+
+  replace(path: RouteAction, data?: any, title: string = ''): ChangeStateResult {
+    return super.replaceState(data, title, this.toUrl(path));
+  }
+
+  pushDeleteSearchParam(name: string, data?: any, title?: string): void {
+    const s = this.getSearchParams({delete: [name]});
+    this.push({searchParams: s}, data, title);
+  }
+
+  pushDeleteHashSearchParam(name: string, data?: any, title?: string) {
+    const s = this.getHashSearchParams({delete: [name]});
+    const size = Array.from(s.entries()).length;
+    const href = `${this.config.window.location.pathname}${this.config.window.location.search}${size > 0 ? '#' + s.toString() : ''}`;
+    super.pushState(data, title, href);
+  }
+
+  pushAddSearchParam(params:[[string, string]], data?: any, title?: string): void {
+    const s = this.getSearchParams({append: params});
+    this.push({searchParams: s}, data, title);
+  }
+  replaceDeleteSearchParam(name: string | string[], data?: any, title?: string): void {
+    const s = this.getSearchParams({delete: Array.isArray(name) ? name : [name]});
+    this.replace({searchParams: s}, data, title);
+  }
+
+  replaceDeleteHashSearchParam(name: string | string[], data?: any, title?: string) {
+    const s = this.getHashSearchParams({delete: Array.isArray(name) ? name : [name]});
+    const size = Array.from(s.entries()).length;
+    const href = `${this.config.window.location.pathname}${this.config.window.location.search}${size > 0 ? '#' + s.toString() : ''}`;
+    super.replaceState(data, title, href);
+  }
+
+  replaceAddSearchParam(params:[[string, string]], data?: any, title?: string): void {
+    const s = this.getSearchParams({append: params});
+    this.replace({searchParams: s}, data, title);
+  }
+
+
+  getUrl(): string {
+    const url = new URL(this.config.window.document.location.href);
+    return url.pathname + url.search;
+  }
+
+  getHref(): string {
+    return this.config.window.location.href;
+  }
+
+  getPathName(): string {
+    return this.config.window.location.pathname;
+  }
+
+  getHashSearchParams(data?:{delete?:string[], append?:[[string, string]]}): URLSearchParams {
+    // http://local.com/#wow=222&wow=bb&z=2
+    const searchParams =  new URLSearchParams(this.config.window.location.hash.slice(1));
+
+    data?.delete?.forEach(it => {
+      searchParams.delete(it);
+    })
+
+    data?.append?.forEach(it => {
+      searchParams.append(it[0], it[1]);
+    })
+    return searchParams;
+
+    // return undefined;
+  }
+
+
+}

package/src/routers/Router.ts

@@ -0,0 +1,232 @@
+import { ConvertUtils } from '@dooboostore/core/convert/ConvertUtils';
+import { Observable } from '@dooboostore/core/message/Observable';
+import { BehaviorSubject } from '@dooboostore/core/message/BehaviorSubject';
+import { Expression } from '@dooboostore/core/expression/Expression';
+import ToURLSearchParamsParams = ConvertUtils.ToURLSearchParamsParams;
+
+export type RouteData = {
+  path: string;
+  url: string;
+  data?: any;
+  searchParams: URLSearchParams;
+  pathData?: any;
+  router: Router;
+  currentTarget?:PopCurrentState;
+}
+export type PopStateCurrentTargetDomrenderRouter = { currentTargetName: 'domRenderRouter' };
+export type PopCurrentState = PopStateCurrentTargetDomrenderRouter;
+export const isPopStateCurrentTargetDomrenderRouter = (obj: any): obj is PopStateCurrentTargetDomrenderRouter =>
+  obj?.currentTargetName === 'domRenderRouter';
+
+export type RouterConfig<T = any> = { rootObject?: T, window: Window, firstUrl?: string,
+  // changeStateConvertDate?:(data: any)=>any
+};
+export type ChangeStateResult = {data?: any}
+export type RouteAction = string | { path?: string, searchParams?: ToURLSearchParamsParams };
+
+/*
+    this.option.window.addEventListener('popstate', (event) => { // history.back, forward에만 popstate 발생되고 값이 도출된다
+   console.log('popstate-------!!', event.state, this.domRenderConfig.window.history.state)
+   })
+ */
+export abstract class Router<T = any> {
+  private behaviorSubject: BehaviorSubject<RouteData>;
+  private _config: RouterConfig<T>;
+
+  constructor(config: RouterConfig<any>) {
+    this._config = config;
+
+    let routeData: RouteData;
+    if (config?.firstUrl) {
+      const path = config.firstUrl.split('?');
+      routeData = {
+        url: config.firstUrl,
+        path: path[0],
+        searchParams: new URLSearchParams(path[1]??''),
+        router: this,
+      }
+      this.behaviorSubject = new BehaviorSubject<RouteData>(routeData);
+      this.go(config.firstUrl);
+    } else {
+      routeData = this.getRouteData();
+      this.behaviorSubject = new BehaviorSubject<RouteData>(routeData);
+    }
+    this.config.window.addEventListener('popstate', (event: PopStateEvent) => {
+      // domrender에서 발생하지 않은 즉 back, previous 일떄에도 이벤트가도록 처리
+      if(!isPopStateCurrentTargetDomrenderRouter(event.state)) {
+        // console.log('-------');
+        const routeData = this.getRouteData();
+        this.behaviorSubject.next(routeData);
+      }
+    })
+  }
+
+
+  get observable(): Observable<RouteData> {
+    return this.behaviorSubject.asObservable();
+  }
+
+  get searchParamObject() {
+    return ConvertUtils.toObject(this.getSearchParams());
+  }
+
+  get config() {
+    return this._config;
+  }
+
+  public getSearchFirstParamsObject<T = any>(defaultValue?: T) {
+    const a = ConvertUtils.toObject<T>(this.getSearchParams(), {firstValue: true});
+    return Object.assign({}, defaultValue, a);
+  }
+
+  public getHashSearchFirstParamsObject<T = any>() {
+    return ConvertUtils.toObject<T>(this.getHashSearchParams(), {firstValue: true});
+  }
+
+  // async attach(): Promise<void> {
+  //   // const proxy = getDomRenderProxy(this.config.rootObject)
+  //   // if (proxy) {
+  //   //   const key = `___${EventManager.ROUTER_VARNAME}`;
+  //   //   await proxy.render(key);
+  //   // }
+  // }
+
+  testRegexp(regexp?: string): boolean {
+    if (regexp) {
+      const b = RegExp(regexp).test(this.getPathName());
+      return b;
+    }else {
+      return false;
+    }
+  }
+
+  test(urlExpression?: string): boolean {
+    if (urlExpression && this.getPathData(urlExpression)) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  getRouteData(config?: {urlExpression?: string, currentTarget?: PopCurrentState}): RouteData {
+    const newVar = {
+      path: this.getPathName(),
+      url: this.getUrl(),
+      searchParams: this.getSearchParams()
+    } as RouteData;
+
+    const data = this.getData();
+    if (data) {
+      newVar.data = data;
+    }
+    if (config?.urlExpression) {
+      const data = this.getPathData(config.urlExpression);
+      if (data) {
+        newVar.pathData = data;
+      }
+    }
+    newVar.router = this;
+    newVar.currentTarget = config?.currentTarget;
+    return Object.freeze(newVar);
+  }
+
+  pushState(data: any, title: string | undefined, path: string):ChangeStateResult {
+    // data = this.config.changeStateConvertDate?this.config.changeStateConvertDate(data): data;
+    // console.log('--->pushState', data);
+    this.config.window.history.pushState(data, title??'', path);
+    this.behaviorSubject.next(this.getRouteData({currentTarget: {currentTargetName: 'domRenderRouter'}}));
+    return {data};
+  }
+
+  replaceState(data: any, title: string | undefined, path: string):ChangeStateResult {
+    // data = this.config.changeStateConvertDate?this.config.changeStateConvertDate(data): data;
+    // console.log('--->replaceState', data);
+    this.config.window.history.replaceState(data, title??'', path);
+    this.behaviorSubject.next(this.getRouteData({currentTarget: {currentTargetName: 'domRenderRouter'}}));
+    return {data};
+  }
+
+  private dispatchPopStateEvent(data?: any) {
+    this.config.window.dispatchEvent(new PopStateEvent('popstate', {state: {...data, currentTargetName: 'domRenderRouter'}}));
+  }
+
+  reload(data?: any) {
+    this.config.window.dispatchEvent(new PopStateEvent('popstate', {state: data}));
+  }
+
+  getData(): any {
+    return this.config.window.history.state;
+  }
+
+  getPathData(urlExpression: string, currentUrl = this.getPathName()): any {
+    return Expression.Path.pathNameData(currentUrl, urlExpression);
+  }
+
+  async go(config:  string | { path: RouteAction, data?: any, replace?: boolean, title?: string, disabledPopEvent?: boolean, scrollToTop?: boolean } | string): Promise<void> {
+    if (typeof config === 'string') {
+      config = { path: config };
+    }
+
+    // let data: ChangeStateResult | undefined = undefined;
+    if (config?.replace) {
+      this.replace(config.path, config.data, config.title);
+    } else {
+      this.push(config.path, config.data, config.title);
+    }
+    // if (!this.config.disableAttach) {
+    //   await this.attach();
+    // }
+    
+    // 스크롤 제어 (기본값: true - 맨 위로 스크롤)
+    if (config.scrollToTop !== false) {
+      try {
+      this._config.window?.scrollTo?.(0, 0);
+      }catch (e){}
+    }
+    
+    // console.log('----------', data, config)
+    if (!config.disabledPopEvent) {
+      this.dispatchPopStateEvent(config?.data);
+    }
+  }
+
+  toUrl(data: RouteAction) {
+    let targetPath: string;
+    if (typeof data === 'string') {
+      targetPath = data;
+    } else {
+      const tpath = data.path ?? this.getPathName();
+      const s = data.searchParams ? ConvertUtils.toURLSearchParams(data.searchParams).toString() : '';
+      // data.searchParams
+      targetPath = `${tpath}${s.length > 0 ? '?' : ''}${s}`;
+    }
+    return targetPath;
+  }
+
+
+  abstract push(path: RouteAction, data?: any, title?: string): void;
+
+  abstract replace(path: RouteAction, data?: any, title?: string): void;
+
+  abstract pushDeleteSearchParam(name: string | string[], data?: any, title?: string): void;
+
+  abstract pushDeleteHashSearchParam(name: string | string[], data?: any, title?: string): void;
+
+  abstract pushAddSearchParam(params:[[string, string]], data?: any, title?: string): void;
+
+  abstract replaceDeleteSearchParam(name: string | string[], data?: any, title?: string): void;
+
+  abstract replaceDeleteHashSearchParam(name: string | string[], data?: any, title?: string): void;
+
+  abstract replaceAddSearchParam(params:[[string, string]], data?: any, title?: string): void;
+
+  abstract getSearchParams(data?:{delete?:string[], append?:[[string, string]]}): URLSearchParams;
+
+  abstract getHashSearchParams(data?:{delete?:string[], append?:[[string, string]]}): URLSearchParams;
+
+  abstract getUrl(): string;
+
+  abstract getHref(): string;
+
+  abstract getPathName(): string;
+}

package/src/routers/index.ts

@@ -0,0 +1,3 @@
+export * from './HashRouter';
+export * from './PathRouter';
+export * from './Router';

package/src/types/Types.ts

@@ -0,0 +1,32 @@
+export class Shield {
+    [name: string]: any
+}
+export class DomRenderFinalProxy<T extends object> implements ProxyHandler<T> {
+    set(target: T, p: string | symbol, value: any, receiver: any): boolean {
+        (target as any)[p] = value;
+        return true;
+    }
+
+    get(target: T, p: string | symbol, receiver: any): any {
+        return (target as any)[p];
+    }
+
+    public static final<T = any> (obj: T): T {
+        (obj as any)._DomRender_isFinal = true;
+        return obj;
+    }
+
+    public static isFinal<T = any> (obj: T) {
+        return '_DomRender_isFinal' in (obj as any);
+    }
+
+    public static unFinal<T = any> (obj: T): T {
+        delete (obj as any)._DomRender_isFinal;
+        return obj;
+    }
+
+    has(target: T, p: string | symbol): boolean {
+        return p === '_DomRender_isFinal' || p in target;
+    }
+}
+

package/src/types/index.ts

@@ -0,0 +1,2 @@
+export * from './Types';
+

package/src/types/type.ts

@@ -0,0 +1,24 @@
+declare module '*.html' {
+  const content: string
+  export default content
+}
+declare module '*.css' {
+  const content: string
+  export default content
+}
+declare module '*.min' {
+  const content: any
+  export default content
+}
+declare module '*.txt' {
+  const content: any
+  export default content
+}
+declare module '*.js' {
+  const content: any
+  export default content
+}
+declare module '*.json' {
+  const content: any
+  export default content
+}

package/src/validators/AllCheckedValidatorArray.ts

@@ -0,0 +1,12 @@
+import {Validator} from './Validator';
+import {ValidatorArray} from './ValidatorArray';
+
+export class AllCheckedValidatorArray<T = any, E = Element> extends ValidatorArray<T, E> {
+    constructor(value?: Validator<T, E>[], target?: E, event?: Event, autoValid = true) {
+        super(value, target, event, autoValid);
+    }
+
+    valid(): boolean {
+        return !((this.value ?? []).filter(it => !it.checked).length > 0);
+    }
+}

package/src/validators/AllUnCheckedValidatorArray.ts

@@ -0,0 +1,12 @@
+import {Validator} from './Validator';
+import {ValidatorArray} from './ValidatorArray';
+
+export class AllUnCheckedValidatorArray<T = any, E = Element> extends ValidatorArray<T, E> {
+    constructor(value?: Validator<T, E>[], target?: E, event?: Event, autoValid = true) {
+        super(value, target, event, autoValid);
+    }
+
+    valid(): boolean {
+        return !((this.value ?? []).filter(it => it.checked).length > 0);
+    }
+}

package/src/validators/CheckedValidator.ts

@@ -0,0 +1,11 @@
+import {Validator} from './Validator';
+
+export class CheckedValidator<T = any, E = HTMLElement> extends Validator<T, E> {
+    constructor(value?: T, target?: E, event?: Event, autoValid = true) {
+        super(value, target, event, autoValid);
+    }
+
+    valid(): boolean {
+        return (this.getTarget() as any)?.checked ?? false;
+    }
+}

package/src/validators/CountEqualsCheckedValidatorArray.ts

@@ -0,0 +1,12 @@
+import {Validator} from './Validator';
+import {ValidatorArray} from './ValidatorArray';
+
+export class CountEqualsCheckedValidatorArray<T = any, E = Element> extends ValidatorArray<T, E> {
+    constructor(public count: number, value?: Validator<T, E>[], target?: E, event?: Event, autoValid = true) {
+        super(value, target, event, autoValid);
+    }
+
+    valid(): boolean {
+        return (this.value ?? []).filter(it => it.checked).length === this.count;
+    }
+}

package/src/validators/CountEqualsUnCheckedValidatorArray.ts

@@ -0,0 +1,12 @@
+import {Validator} from './Validator';
+import {ValidatorArray} from './ValidatorArray';
+
+export class CountEqualsUnCheckedValidatorArray<T = any, E = Element> extends ValidatorArray<T, E> {
+    constructor(public count: number, value?: Validator<T, E>[], target?: E, event?: Event, autoValid = true) {
+        super(value, target, event, autoValid);
+    }
+
+    valid(): boolean {
+        return (this.value ?? []).filter(it => !it.checked).length === this.count;
+    }
+}

package/src/validators/CountGreaterThanCheckedValidatorArray.ts

@@ -0,0 +1,12 @@
+import {Validator} from './Validator';
+import {ValidatorArray} from './ValidatorArray';
+
+export class CountGreaterThanCheckedValidatorArray<T = any, E = Element> extends ValidatorArray<T, E> {
+    constructor(public count: number, value?: Validator<T, E>[], target?: E, event?: Event, autoValid = true) {
+        super(value, target, event, autoValid);
+    }
+
+    valid(): boolean {
+        return (this.value ?? []).filter(it => it.checked).length > this.count;
+    }
+}

package/src/validators/CountGreaterThanEqualsCheckedValidatorArray.ts

@@ -0,0 +1,12 @@
+import {Validator} from './Validator';
+import {ValidatorArray} from './ValidatorArray';
+
+export class CountGreaterThanEqualsCheckedValidatorArray<T = any, E = Element> extends ValidatorArray<T, E> {
+    constructor(public count: number, value?: Validator<T, E>[], target?: E, event?: Event, autoValid = true) {
+        super(value, target, event, autoValid);
+    }
+
+    valid(): boolean {
+        return (this.value ?? []).filter(it => it.checked).length >= this.count;
+    }
+}

package/src/validators/CountGreaterThanEqualsUnCheckedValidatorArray.ts

@@ -0,0 +1,12 @@
+import {Validator} from './Validator';
+import {ValidatorArray} from './ValidatorArray';
+
+export class CountGreaterThanEqualsUnCheckedValidatorArray<T = any, E = Element> extends ValidatorArray<T, E> {
+    constructor(public count: number, value?: Validator<T, E>[], target?: E, event?: Event, autoValid = true) {
+        super(value, target, event, autoValid);
+    }
+
+    valid(): boolean {
+        return (this.value ?? []).filter(it => !it.checked).length >= this.count;
+    }
+}

package/src/validators/CountGreaterThanUnCheckedValidatorArray.ts

@@ -0,0 +1,12 @@
+import {Validator} from './Validator';
+import {ValidatorArray} from './ValidatorArray';
+
+export class CountGreaterThanUnCheckedValidatorArray<T = any, E = Element> extends ValidatorArray<T, E> {
+    constructor(public count: number, value?: Validator<T, E>[], target?: E, event?: Event, autoValid = true) {
+        super(value, target, event, autoValid);
+    }
+
+    valid(): boolean {
+        return (this.value ?? []).filter(it => !it.checked).length > this.count;
+    }
+}