@dooboostore/dom-render 1.0.107 → 1.0.109

package/src/components/timer/Timer.ts

@@ -0,0 +1,87 @@
+import { ComponentBase } from '../ComponentBase';
+import { DomRender, DomRenderRunConfig } from '../../DomRender';
+import { RawSet } from '../../rawsets/RawSet';
+import { OtherData } from '../../lifecycle/OnChangeAttrRender';
+import { OnDestroyRenderParams } from '../../lifecycle/OnDestroyRender';
+
+
+export namespace Timer {
+  export const selector = 'dr-timer';
+  export type Attribute = {
+    value?: string;
+    interval?: number;
+    onCreated?: (timer: Timer) => void;
+  }
+  export class Timer extends ComponentBase<Attribute> {
+    private interval?: any;
+    private value?: number;
+
+
+    onInitRender(param: any, rawSet: RawSet) {
+      super.onInitRender(param, rawSet);
+      this.getAttribute('onCreated')?.(this);
+      // console.log('---2', this.getElement()?.isConnected)
+      // const element = this.getElement();
+      // if(element){
+      //   (element as any).component = this;
+      // }
+    }
+
+    isRunning() {
+      return this.value !== undefined;
+    }
+
+    start() {
+      const timems = this.getAttribute('value');
+      if (timems) {
+        this.value = parseInt(timems);
+        const intervalValue = this.getAttribute('interval') ?? 1000;
+        console.log('int', this.value, intervalValue);
+        this.interval = setInterval(() => {
+          console.log('--------->',this.value)
+          if (this.value) {
+            this.value--;
+          } else {
+            clearInterval(this.interval);
+            this.value = undefined;
+            this.interval = undefined;
+          }
+        }, intervalValue)
+      }
+    }
+
+
+    stop() {
+      if (this.interval) {
+        clearInterval(this.interval);
+        this.interval = undefined;
+        this.value = undefined;
+      }
+    }
+
+    onChangeAttrRender(name: string, val: any, other: OtherData) {
+      super.onChangeAttrRender(name, val, other);
+      console.log('-----', name, val, this.getElement())
+    }
+
+    onDestroyRender(data: OnDestroyRenderParams) {
+      super.onDestroyRender(data);
+      if (this.interval){
+        clearInterval(this.interval);
+      }
+    }
+  }
+}
+
+
+export default {
+  timer: (config?: DomRenderRunConfig) => {
+    return RawSet.createComponentTargetElement({
+      name: `${Timer.selector}`,
+      template: '#innerHTML#',
+      objFactory: (e,o,r2, counstructorParam) => {
+        return DomRender.run({rootObject: new Timer.Timer(...counstructorParam), config: config});
+      }
+    })
+  },
+}

package/src/components/timer/index.ts

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

package/src/configs/DomRenderConfig.ts

@@ -0,0 +1,30 @@
+import { ConstructorType } from '@dooboostore/core/types';
+import { RawSet } from '../rawsets/RawSet';
+import { Router } from '../routers/Router';
+import { Messenger } from '../messenger/Messenger';
+import { TargetElement } from './TargetElement';
+import { TargetAttr } from './TargetAttr';
+import { Attrs } from '../rawsets/Attrs';
+import { OperatorAround } from '../operators/OperatorExecuter';
+import { EventManager } from '../events/EventManager';
+
+export type DomRenderConfig<T = any> = {
+  window: Window;
+  targetElements?: TargetElement[];
+  targetAttrs?: TargetAttr[];
+  operatorAround?: { [key in keyof Attrs]?: OperatorAround },
+  onElementInit?: (name: string, obj: any, rawSet: RawSet, targetElement: TargetElement) => any;
+  onAttrInit?: (name: string, attrValue: string, obj: any, rawSet: RawSet) => any;
+  proxyExcludeTyps?: ConstructorType<any>[];
+  proxyExcludeOnBeforeReturnSets?: string[];
+  proxyExcludeOnBeforeReturnGets?: string[];
+  uuid: string;
+  scripts?: { [n: string]: any };
+  root: any;
+  rootElement?: Element | null;
+  router?: Router;
+  messenger: Messenger;
+  eventManager: EventManager;
+  eventVariables?: { [n: string]: any };
+  applyEvents?: { attrName: string, callBack: (elements: Element, attrValue: string, obj: any) => void }[];
+}

package/src/configs/TargetAttr.ts

@@ -0,0 +1,7 @@
+import {RawSet} from '../rawsets/RawSet';
+
+export type TargetAttr = {
+    name: string;
+    callBack: (target: Element, attrValue: string, obj: any, rawSet: RawSet) => DocumentFragment;
+    complete?: (target: Element, attrValue: string, obj: any, rawSet: RawSet) => void;
+};

package/src/configs/TargetElement.ts

@@ -0,0 +1,16 @@
+import {RawSet} from '../rawsets/RawSet';
+import {DomRenderConfig} from '../configs/DomRenderConfig';
+import {Attrs} from '../rawsets/Attrs';
+import {CreatorMetaData} from '../rawsets/CreatorMetaData';
+import {Render} from '../rawsets/Render';
+
+export type TargetElement = {
+    name: string;
+    noStrip?:boolean;
+    template?: string;
+    styles?: string | (string[]);
+    callBack: (target: Element, obj: any, rawSet: RawSet, attrs: Attrs, config: DomRenderConfig) => Promise<DocumentFragment | undefined>;
+    complete?: (target: Element, obj: any, rawSet: RawSet) => void;
+    __render?: Render;
+    __creatorMetaData?: CreatorMetaData;
+};

package/src/configs/index.ts

@@ -0,0 +1,3 @@
+export * from './DomRenderConfig';
+export * from './TargetAttr';
+export * from './TargetElement';

package/src/decorators/DomRenderNoProxy.ts

@@ -0,0 +1,32 @@
+import { ValidUtils } from '@dooboostore/core/valid/ValidUtils';
+
+export const DomRenderNoProxyKey = 'DomRender:NoProxy'
+export const DomRenderNoProxy = (target: any, propertyKey?: string | symbol) => {
+    // 클래스 데코레이터로 사용된 경우
+    if (propertyKey === undefined) {
+      // target은 클래스 생성자
+      Reflect.defineMetadata(DomRenderNoProxyKey, true, target);
+      return;
+    }
+
+    // 프로퍼티 데코레이터로 사용된 경우
+    // target은 프로토타입, propertyKey는 프로퍼티 이름
+    Reflect.defineMetadata(DomRenderNoProxyKey, true, target, propertyKey);
+};
+
+export const getDomRenderNoProxy = (target: any, propertyKey?: string | symbol) => {
+  // if (ValidUtils.isNotNullUndefined(target)) {
+    // 클래스 데코레이터
+    if (propertyKey === undefined) {
+      return Reflect.getMetadata(DomRenderNoProxyKey, target);
+    }
+    // 프로퍼티 데코레이터
+    return Reflect.getMetadata(DomRenderNoProxyKey, target, propertyKey);
+  // } else {
+  //   return undefined;
+  // }
+}
+
+export const isDomRenderNoProxy = (target: any, propertyKey?: string | symbol) => {
+  return ValidUtils.isNullOrUndefined(target) || getDomRenderNoProxy(target, propertyKey) === true;
+}

package/src/decorators/index.ts

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