@dooboostore/dom-render 1.0.107 → 1.0.109

package/src/events/index.ts

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

package/src/index.ts

@@ -0,0 +1,17 @@
+//
+// export * from './components';
+// export * from './configs';
+// export * from './decorators';
+// export * from './events';
+// export * from './iterators';
+// export * from './lifecycle';
+// export * from './messenger';
+// // export * from './operators';
+// export { Appender as AppenderArray, Dr, DrAppender, DrFor, DrForOf, DrForm, DrIf, DrInnerHTML, DrInnerText, DrPre, DrRepeat, DrStripElement, DrTargetAttr, DrTargetElement, DrTargetElementIsElement, DrThis, DrThisProperty, OperatorExecuter, OperatorExecuterAttrRequire } from './operators';
+// export * from './rawsets';
+// export * from './routers';
+// export * from './types';
+// export * from './validators';
+// export * from './DomRender';
+// export * from './DomRenderProxy';
+export default {}

package/src/iterators/Range.ts

@@ -0,0 +1,73 @@
+// within rangeResult.ts
+// @ts-ignore
+export class RangeResult implements IteratorResult<number> {
+    done: boolean;
+    value: number;
+
+    constructor(value: number | undefined, done: boolean) {
+        this.done = done;
+        this.value = value ?? 0;
+    }
+}
+
+export class RangeIterator implements Iterator<number> {
+    private _first: number;
+    private _current: number;
+    private _last: number
+    private _step: number
+    constructor(first: number, last: number, step: number) {
+        this._current = this._first = first;
+        this._last = last;
+        this._step = step;
+    }
+
+    next(value?: any): IteratorResult<number> {
+        let r: RangeResult;
+        if (this._first < this._last && this._current < this._last) {
+            r = new RangeResult(this._current, false);
+            this._current += this._step
+        } else if (this._first < this._last && this._current === this._last) {
+            r = new RangeResult(this._current, false);
+            this._current += this._step
+        } else if (this._first > this._last && this._current > this._last) {
+            r = new RangeResult(this._current, false);
+            this._current -= this._step
+        } else if (this._first > this._last && this._current === this._last) {
+            r = new RangeResult(this._current, false);
+            this._current -= this._step
+        } else if (this._current === this._last) {
+            r = new RangeResult(this._current, false);
+            this._current -= this._step
+        } else {
+            r = new RangeResult(undefined, true);
+        }
+        return r;
+    }
+}
+
+export class Range implements Iterable<number> {
+    public readonly isRange = true;
+
+    constructor(public first: number, public last: number, public step: number = 1) {
+    }
+
+    [Symbol.iterator](): Iterator<number> {
+        return new RangeIterator(this.first, this.last, this.step);
+    }
+
+    map<U>(callbackfn: (value: number, index: number, array: number[]) => U, thisArg?: any): U[] {
+        return Array.from(this).map(callbackfn)
+    }
+
+    public static range(first: number | string, last?: number, step: number = 1): Range {
+        if (typeof first === 'number' && last === undefined) {
+            return new Range(0, first, step);
+        } else if (typeof first === 'string') {
+            const [_first, _last = '0'] = first.split('..');
+            const [__last, _step = '1'] = _last.split(',');
+            return new Range(Number(_first.trim()), Number(__last.trim()), Number(_step.trim()));
+        } else {
+            return new Range(first, last ?? 0, step);
+        }
+    }
+}

package/src/iterators/index.ts

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

package/src/lifecycle/OnBeforeReturnGet.ts

@@ -0,0 +1,3 @@
+export interface OnBeforeReturnGet {
+    onBeforeReturnGet(name: string, value: any, fullPath?: string[]): void;
+}

package/src/lifecycle/OnBeforeReturnSet.ts

@@ -0,0 +1,6 @@
+export interface OnBeforeReturnSet {
+    onBeforeReturnSet(name: string, value: any, fullPath?: string[]): void;
+}
+export function isOnBeforeReturnSet(obj: any): obj is OnBeforeReturnSet {
+    return typeof obj?.onBeforeReturnSet === 'function';
+}

package/src/lifecycle/OnChangeAttrRender.ts

@@ -0,0 +1,12 @@
+import { RawSet } from '../rawsets/RawSet';
+
+export type OtherData = {
+    rawSet?: RawSet
+}
+export interface OnChangeAttrRender {
+    onChangeAttrRender(name: string, value: any, other: OtherData): void;
+}
+
+export const isOnChangeAttrRender = (obj: any): obj is OnChangeAttrRender => {
+    return typeof obj?.onChangeAttrRender === 'function';
+}

package/src/lifecycle/OnChildRenderedByProperty.ts

@@ -0,0 +1,9 @@
+import { RawSet } from '../rawsets/RawSet';
+
+export interface OnChildRenderedByProperty {
+    onChildRenderedByProperty(key: string, value: any): void;
+}
+
+export function isOnChildRenderedByProperty(obj: any): obj is OnChildRenderedByProperty {
+    return typeof obj?.onChildRenderedByProperty === 'function';
+}

package/src/lifecycle/OnCreateRender.ts

@@ -0,0 +1,6 @@
+export interface OnCreateRender {
+  onCreateRender(...param: any[]): void;
+}
+export const isOnCreateRender = (obj: any): obj is OnCreateRender => {
+  return typeof obj?.onCreateRender === 'function';
+}

package/src/lifecycle/OnCreateRenderData.ts

@@ -0,0 +1,11 @@
+import { Render } from '../rawsets/Render';
+
+export type OnCreateRenderDataParams = { rootParent: any, render?: Render };
+
+export interface OnCreateRenderData {
+  onCreateRenderData(data: OnCreateRenderDataParams): void;
+}
+
+export const isOnCreateRenderData = (obj: any): obj is OnCreateRenderData => {
+  return typeof obj?.onCreateRenderData === 'function';
+}

package/src/lifecycle/OnCreateRendered.ts

@@ -0,0 +1,11 @@
+// TODO: 나중에 넣어야될까 자식element가 완료되었을때는 on-rendered..뭐이런게있어서.  이게 다른 프레임워크처럼 자식들이 다 만들어지고 내가 만들어지는게 아니라. 비동기적으로 이루어지니깐 알수가없긴한데..
+// 훔.. 우선 보류 아무도 사용하는곳은 없음
+/**
+ * @deprecated  아직 적용안됨
+ */
+export interface OnCreateRendered {
+  onCreateRendered(...param: any[]): void;
+}
+export const isOnCreateRendered = (obj: any): obj is OnCreateRendered => {
+  return typeof obj?.onCreateRendered === 'function';
+}

package/src/lifecycle/OnCreatedThisChild.ts

@@ -0,0 +1,10 @@
+import { OnCreateRenderDataParams } from '../lifecycle/OnCreateRenderData';
+
+
+export interface OnCreatedThisChild {
+  onCreatedThisChild(child: any, childData: OnCreateRenderDataParams): void;
+}
+
+export const isOnCreatedThisChild= (obj: any): obj is OnCreatedThisChild => {
+  return typeof obj?.onCreatedThisChild === 'function';
+}

package/src/lifecycle/OnDestroyRender.ts

@@ -0,0 +1,11 @@
+import { RawSet } from '../rawsets/RawSet';
+
+export type OnDestroyRenderParams = { rawSet: RawSet };
+
+export interface OnDestroyRender {
+    onDestroyRender(data?: OnDestroyRenderParams): void;
+}
+
+export const isOnDestroyRender = (obj: any): obj is OnDestroyRender => {
+    return typeof obj?.onDestroyRender === 'function';
+};

package/src/lifecycle/OnInitRender.ts

@@ -0,0 +1,9 @@
+import { RawSet } from '../rawsets/RawSet';
+
+export interface OnInitRender {
+    onInitRender(param: any, rawSet:RawSet): void;
+}
+
+export function isOnInitRender(obj: any): obj is OnInitRender {
+    return typeof obj?.onInitRender === 'function';
+}

package/src/lifecycle/OnProxyDomRender.ts

@@ -0,0 +1,7 @@
+import {DomRenderConfig} from '../configs/DomRenderConfig';
+
+export interface OnProxyDomRender {
+    onProxyDomRender(config: DomRenderConfig): void;
+}
+export const isOnProxyDomRender = (obj: any): obj is OnProxyDomRender =>
+    typeof obj?.onProxyDomRender === 'function';

package/src/lifecycle/OnRawSetRendered.ts

@@ -0,0 +1,15 @@
+import { RawSet, RenderResult } from '../rawsets/RawSet';
+
+export type OnRawSetRenderedOtherData = {
+  path?: string
+  renderResult?: RenderResult
+  //     rawSet?: RawSet
+}
+export interface OnRawSetRendered {
+// TODO: 호출된곳에서 또 변수를 수정하게되면 무한루프니깐 왠만하면 사용못하게 해야한다.
+    onRawSetRendered (rawSet: RawSet,otherData: OnRawSetRenderedOtherData): Promise<void>;
+}
+
+export const isOnRawSetRendered= (obj: any): obj is OnRawSetRendered => {
+    return typeof obj?.onRawSetRendered === 'function';
+}

package/src/lifecycle/dr-this/OnDrThisBind.ts

@@ -0,0 +1,6 @@
+export interface OnDrThisBind {
+    onDrThisBind(): void;
+}
+export const isOnDrThisBind = (obj: any): obj is OnDrThisBind => {
+    return typeof obj?.onDrThisBind === 'function';
+}

package/src/lifecycle/dr-this/OnDrThisUnBind.ts

@@ -0,0 +1,6 @@
+export interface OnDrThisUnBind {
+    onDrThisUnBind(): void;
+}
+export const isOnDrThisUnBind = (obj: any): obj is OnDrThisUnBind => {
+    return typeof obj?.onDrThisUnBind === 'function';
+}

package/src/lifecycle/dr-this/index.ts

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

package/src/lifecycle/index.ts

@@ -0,0 +1,13 @@
+export * from './OnBeforeReturnGet';
+export * from './OnBeforeReturnSet';
+export * from './OnChangeAttrRender';
+export * from './OnChildRenderedByProperty';
+export * from './OnCreateRender';
+export * from './OnCreateRenderData';
+export * from './OnCreateRendered';
+export * from './OnCreatedThisChild';
+export * from './OnDestroyRender';
+export * from './OnInitRender';
+export * from './OnProxyDomRender';
+export * from './OnRawSetRendered';
+export * from './dr-this';

package/src/messenger/DefaultMessenger.ts

@@ -0,0 +1,5 @@
+import {Messenger} from './Messenger';
+
+export class DefaultMessenger extends Messenger {
+
+}

package/src/messenger/Messenger.ts

@@ -0,0 +1,222 @@
+import { ConstructorType } from '@dooboostore/core/types';
+import {DomRenderFinalProxy} from '../types/Types';
+import {DomRenderConfig} from '../configs/DomRenderConfig';
+
+enum CallBackType {
+    FILTER,
+    MAP,
+    SUBSCRIBE
+}
+
+export type ChannelData = {
+    channel: Channel;
+    data?: (any | undefined);
+}
+export type ChannelMetaData = {
+    channel?: Channel;
+    action?: string;
+}
+
+export class ChannelSubscription {
+    constructor(public channel: Channel, public subscriber: ChannelSubscriber) {
+    }
+
+    unsubscribe() {
+        this.subscriber.unsubscribe();
+    }
+}
+
+export class ChannelSubscriber<SD = any> {
+    public parentSubscriber?: ChannelSubscriber;
+    public callbacks: ({ type: CallBackType, callback: (data: any, metaData: ChannelMetaData) => any | undefined })[] = [];
+
+    constructor(public channel: Channel) {
+    }
+
+    exeCallback(data: any, metaData: ChannelMetaData) {
+        for (const callback of this.callbacks) {
+            if (callback.type === CallBackType.FILTER && !callback.callback(data, metaData)) {
+                break;
+            } else if (callback.type === CallBackType.MAP) {
+                data = callback.callback(data, metaData);
+            } else if (callback.type === CallBackType.SUBSCRIBE) {
+                data = callback.callback(data, metaData);
+                break;
+            }
+        }
+        return data;
+    }
+
+    // chaining point
+    filter<D = SD>(callback: (data: D, meta: ChannelMetaData) => boolean): ChannelSubscriber<SD> {
+        this.callbacks.push({type: CallBackType.FILTER, callback});
+        return this;
+    }
+
+    map<D = SD, R = any>(callback: (data: D, meta: ChannelMetaData) => R): ChannelSubscriber<R> {
+        this.callbacks.push({type: CallBackType.MAP, callback});
+        return this as unknown as ChannelSubscriber<R>;
+    }
+
+    subscribe(callback: (data: SD, metaData: ChannelMetaData) => any | undefined) {
+        this.callbacks.push({type: CallBackType.SUBSCRIBE, callback});
+        this.channel.subscribers.add(this);
+        return new ChannelSubscription(this.channel, this);
+    }
+
+    unsubscribe() {
+        this.channel.subscribers.delete(this);
+    }
+
+    deleteSubscriber() {
+        this.unsubscribe();
+        this.channel.subscribers.delete(this);
+    }
+}
+
+export class Channel {
+    public subscribers = new Set<ChannelSubscriber>();
+
+    constructor(private messenger: Messenger, public obj: object, public key: string) {
+    }
+
+    publish(key: string | object | ConstructorType<any>, data: any, action?: string) {
+        const rtns: ChannelData[] = [];
+        this.messenger.getChannels(key)?.forEach(it => {
+            try {
+                it.subscribers.forEach(its => {
+                    const rdata = its.exeCallback(data, {channel: this, action});
+                    rtns.push({channel: it, data: rdata});
+                });
+            } catch (e) {
+                console.error(e);
+            }
+        });
+        return rtns;
+    }
+
+    allPublish(data: any, action: string) {
+        const rtns: (any | undefined)[][] = [];
+        this.messenger.getAllChannelKeys().forEach(it => {
+            rtns.push(this.publish(it, data));
+        });
+        return rtns.flat();
+    }
+
+    // string point
+    filter<D = any>(filterF: (data: D, meta: ChannelMetaData) => boolean) {
+        const subscriber = new ChannelSubscriber<D>(this);
+        subscriber.filter(filterF);
+        return subscriber;
+    }
+
+    map<D = any, R = any>(filterF: (data: D, meta: ChannelMetaData) => R): ChannelSubscriber<R> {
+        const subscriber = new ChannelSubscriber<R>(this);
+        subscriber.map(filterF);
+        return subscriber;
+    }
+
+    subscribe<D = any>(subscribeCallback: (data: D, meta: ChannelMetaData) => any | void | undefined) {
+        const subscriber = new ChannelSubscriber<D>(this);
+        return subscriber.subscribe(subscribeCallback);
+    };
+
+    deleteChannel() {
+        this.messenger.deleteChannel(this);
+    };
+}
+
+type MessengerEventDetail = {
+    key: string | object | ConstructorType<any>;
+    data?: any;
+    action?: string;
+    result?: (c: ChannelData[]) => void;
+}
+
+type MessengerSubscribeEventDetail = {
+    obj: any;
+    key?: string | object | ConstructorType<any>;
+    init: (channel: Channel, subscription: ChannelSubscription) => void;
+    subscribe: (data: any, meta: ChannelMetaData) => void;
+}
+
+export abstract class Messenger {
+    private channels = new Set<Channel>();
+    static readonly EVENT_PUBLISH_KEY = 'domRenderMessenger_publish';
+    static readonly EVENT_SUBSCRIBE_KEY = 'domRenderMessenger_subscribe';
+    constructor(private config: DomRenderConfig) {
+        this.config.window.addEventListener(Messenger.EVENT_PUBLISH_KEY, (e: Event) => {
+            const detail = ((e as CustomEvent).detail as MessengerEventDetail);
+            // console.log('--->', detail)
+            const rtns: ChannelData[] = [];
+            this.getChannels(detail.key)?.forEach(it => {
+                try {
+                    it.subscribers.forEach(its => {
+                        const rdata = its.exeCallback(detail.data, {action: detail.action});
+                        rtns.push({channel: it, data: rdata});
+                    });
+                } catch (e) {
+                    console.error(e);
+                }
+            });
+            detail.result?.(rtns);
+        });
+        this.config.window.addEventListener(Messenger.EVENT_SUBSCRIBE_KEY, (e: Event) => {
+            const detail = ((e as CustomEvent).detail as MessengerSubscribeEventDetail);
+            // console.log('--->', detail)
+            const channel = this.createChannel(detail.obj, detail.key);
+            detail.init(channel, channel.subscribe(detail.subscribe));
+        });
+    }
+
+    public static publish(window: Window, detail: MessengerEventDetail) {
+        window.dispatchEvent(new CustomEvent(Messenger.EVENT_PUBLISH_KEY, {detail}));
+    }
+
+    public static subscribe(window: Window, detail: MessengerSubscribeEventDetail) {
+        window.dispatchEvent(new CustomEvent(Messenger.EVENT_SUBSCRIBE_KEY, {detail}));
+    }
+
+    createChannel(obj: any, key = obj.constructor.name): Channel {
+        const channel = DomRenderFinalProxy.final(new Channel(this, obj, key)) as Channel;
+        this.channels.add(channel);
+        // this.channels.get(key) ? this.channels.get(key)!.push(channel) : this.channels.set(key, [channel]);
+        return channel;
+    }
+
+    deleteChannel(channel: Channel) {
+        this.channels.delete(channel);
+    }
+
+    deleteChannelFromObj(obj: any) {
+        if (obj) {
+            this.channels.forEach(it => {
+                if (it.obj === obj) {
+                    // console.log('dddddddddddd', obj)
+                    this.deleteChannel(it);
+                }
+            });
+        }
+    }
+
+    addChannel(channel: Channel) {
+        this.channels.add(channel);
+    }
+
+    getChannels(key: string | object | ConstructorType<any>): Channel[] {
+        if (typeof key === 'object') {
+            key = key.constructor.name;
+        } else if (typeof key === 'function') {
+            key = key.name;
+        }
+        return Array.from(this.channels.values()).filter(it => it.key === key);
+    }
+
+    getAllChannels(): Channel[] {
+        return Array.from(this.channels.values());
+    }
+
+    getAllChannelKeys(): string[] {
+        return Array.from(this.channels.values()).map(it => it.key);
+    }
+}

package/src/messenger/index.ts

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

package/src/operators/Appender.ts

@@ -0,0 +1,104 @@
+export class Appender<T = any> implements Iterable<T> {
+  // eslint-disable-next-line no-undef
+  [key: number]: T[] | undefined;
+
+  length = 0;
+
+  keyMap: Map<string, number> = new Map();
+
+  isAppender = true;
+  constructor(...defaultDatas: T[]) {
+    // console.log('defaultDatas', defaultDatas);
+    this.push(...defaultDatas);
+    // (this.childs as any).isAppender = true;
+  }
+
+  [Symbol.iterator](): Iterator<T> {
+    const items = this.getAll();
+    let idx = 0;
+    return {
+      next(value?: any): IteratorResult<T, any> {
+        let r: IteratorResult<T> = {value: undefined, done: true};
+        if (items.length > idx) {
+          r = {value: items[idx], done: false};
+        }
+        idx++;
+        return r;
+      }
+    }
+  }
+
+  set(key: string, ...v:T[]) {
+    const o = this.keyMap.get(key);
+    // console.log('set!!', o);
+    if (o !== undefined) {
+      this[o] = v;
+    } else {
+      this.keyMap.set(key, this.length);
+      // console.log('setPush', v)
+      this.push(...v);
+    }
+  }
+
+  delete(key: string) {
+    const o = this.keyMap.get(key);
+    if (o !== undefined) {
+      this[o] = [];
+      this.keyMap.delete(key);
+      // this.length--;
+    }
+  }
+
+
+  getAll(): T[] {
+    return this.getAlls().flat();
+  }
+
+  getAlls(): T[][] {
+    const map = Array.from({length: this.length}).filter((it, idx) => this[idx]).map((it, idx) => this[idx]);
+    return map as T[][];
+  }
+
+  push(...items: T[]): void {
+    // console.log('----1>', items, items.length, this.length);
+    if (items && items.length > 0) {
+      (items as any).index = this.length;
+      this[this.length++] = items;
+      // this[this.length] = [];
+    }
+    // console.log('----2>', items, items.length, this.length);
+    // console.log('---22->', this.length)
+    // const appender = this.childs[this.lastIndex];
+    // appender.values = items;
+    // this.childs.push(new Appender(appender.index + 1));
+  }
+
+  // delete(idx: number): void {
+  //     // if (idx in this) {
+  //     //     console.log('---------dele',idx)
+  //     //     delete this[idx];
+  //     //     this.length = this.length - 1;
+  //     // }
+  //     this.length = this.length - 1;
+  // }
+
+  // 인덱스 접근을 위한 getter와 setter 추가
+  // get(index: number): T | undefined {
+  //     return this.storage[index];
+  // }
+  //
+  // set(index: number, value: T): void {
+  //     this.storage[index] = value;
+  //     this.length = Math.max(this.length, index + 1);
+  // }
+
+
+  clear(): void {
+    // console.log('length', this.length);
+    for (let i = 0; i < this.length; i++) {
+      delete this[i];
+    }
+    this.keyMap.clear();
+    this.length = 0;
+  }
+}

package/src/operators/Dr.ts

@@ -0,0 +1,47 @@
+import {OperatorExecuterAttrRequire} from './OperatorExecuterAttrRequire';
+import {ScriptUtils} from '@dooboostore/core-web/script/ScriptUtils';
+import {RawSet} from '../rawsets/RawSet';
+import {Render} from '../rawsets/Render';
+import {AfterCallBack, ElementSource, ExecuteState, ReturnContainer, Source} from './OperatorExecuter';
+
+export class Dr extends OperatorExecuterAttrRequire<null> {
+    constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {
+        super(rawSet, render, returnContainer, elementSource, source, afterCallBack);
+    }
+
+    async executeAttrRequire(data: null): Promise<ExecuteState> {
+        const itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
+        const vars = RawSet.drVarEncoding(this.elementSource.element, this.elementSource.attrs.drVarOption ?? '');
+        const newTemp = this.source.config.window.document.createElement('temp');
+        ScriptUtils.evaluate(`
+                    ${this.render.bindScript}
+                    const n = $element.cloneNode(true);
+                    var destIt = ${this.elementSource.attrs.drItOption};
+                    if (destIt !== undefined) {
+                        n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt)))
+                        // console.log('----', n.innerHTML);
+                        n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt);
+                        // console.log('----', n.innerHTML);
+                    }
+                    if (this.__render.drStripOption === 'true') {
+                        Array.from(n.childNodes).forEach(it => this.__fag.append(it));
+                    } else {
+                        this.__render.fag.append(n);
+                    }`, Object.assign(this.source.obj, {
+            __render: Object.freeze({
+                fag: newTemp,
+                drStripOption: this.elementSource.attrs.drStripOption,
+                ...this.render
+            } as Render)
+        }));
+        RawSet.drVarDecoding(newTemp, vars);
+        RawSet.drItOtherDecoding(newTemp, itRandom);
+        const tempalte = this.source.config.window.document.createElement('template');
+        tempalte.innerHTML = newTemp.innerHTML;
+        this.returnContainer.fag.append(tempalte.content)
+        const rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config)
+        this.elementSource.element.parentNode?.replaceChild(this.returnContainer.fag, this.elementSource.element);
+        this.returnContainer.raws.push(...rr);
+        return ExecuteState.EXECUTE;
+    }
+}