@dooboostore/dom-render 1.0.106 → 1.0.108

package/src/components/router/Route.ts

@@ -0,0 +1,91 @@
+import { attribute, ComponentBase } from '../ComponentBase';
+import { OtherData } from '../../lifecycle/OnChangeAttrRender';
+import { DomRender } from '../../DomRender';
+import { OnInitRender } from '../../lifecycle/OnInitRender';
+import { RawSet } from '../../rawsets/RawSet';
+import type { DomRenderConfig } from '../../configs/DomRenderConfig';
+import { DomRenderNoProxy } from '../../decorators/DomRenderNoProxy';
+import { OnDestroyRenderParams } from '../../lifecycle/OnDestroyRender';
+import { Subscription } from '@dooboostore/core/message/Subscription';
+import { If } from '../if/If';
+
+export namespace Route {
+  export const selector = 'dr-route';
+  export type Attribute<D> = {
+    value?: null | string;
+  }
+
+  abstract class CheckerBase<D> extends ComponentBase<Attribute<D>> implements OnInitRender {
+    protected sw: boolean = false;
+    @attribute({name: 'value'})
+    value?: string;
+    @DomRenderNoProxy
+    private inputDomRenderConfig?: DomRenderConfig;
+    private routerSubscription?: Subscription;
+
+    constructor(domRenderConfig?: DomRenderConfig) {
+      super();
+      this.inputDomRenderConfig = domRenderConfig;
+    }
+
+    onInitRender(param: any, rawSet: RawSet) {
+      super.onInitRender(param, rawSet);
+      this.routerSubscription = this.inputDomRenderConfig?.router?.observable.subscribe(it => {
+        if (this.value && this.inputDomRenderConfig) {
+          this.sw = this.check(this.inputDomRenderConfig);
+        } else {
+          this.sw = false;
+        }
+      });
+    }
+
+    onDrThisBind() {
+      super.onDrThisBind();
+    }
+
+    onDrThisUnBind() {
+      super.onDrThisUnBind();
+    }
+
+    onDestroyRender(data?: OnDestroyRenderParams) {
+      super.onDestroyRender(data);
+      this.routerSubscription?.unsubscribe();
+    }
+
+    abstract check(config?: DomRenderConfig): boolean;
+  }
+
+
+  export class Match<D> extends CheckerBase<D> {
+    check(config?: DomRenderConfig): boolean {
+      return !!config?.router?.test(this.value);
+    }
+  }
+
+  export class Regexp<D> extends CheckerBase<D> {
+    check(config?: DomRenderConfig): boolean {
+      return !!config?.router?.testRegexp(this.value);
+    }
+  }
+}
+
+export default {
+  match: (config?: DomRenderConfig) => {
+    return RawSet.createComponentTargetElement({
+      name: `${Route.selector}-match`,
+      template: '<div dr-if="@this@.sw" dr-option-strip="true">#innerHTML#</div>',
+      objFactory: (e, o, r2, counstructorParam) => {
+        return DomRender.run({rootObject: new Route.Match(config), config: config});
+      }
+    })
+  },
+  regexp: (config?: DomRenderConfig) => {
+    return RawSet.createComponentTargetElement({
+      name: `${Route.selector}-regexp`,
+      template: '<div dr-if="@this@.sw" dr-option-strip="true">#innerHTML#</div>',
+      objFactory: (e, o, r2, counstructorParam) => {
+        return DomRender.run({rootObject: new Route.Regexp(config), config: config});
+      }
+    })
+  },
+}

package/src/components/router/RouterOutlet.ts

@@ -0,0 +1,73 @@
+import { ComponentBase } from '../ComponentBase';
+import { DomRender, DomRenderRunConfig } from '../../DomRender';
+import { RawSet } from '../../rawsets/RawSet';
+import { OtherData } from '../../lifecycle/OnChangeAttrRender';
+import { OnInitRender } from '../../lifecycle/OnInitRender';
+import { ComponentSet } from '../../components/ComponentSet';
+import { OnDestroyRenderParams } from '../../lifecycle/OnDestroyRender';
+import { ComponentRouterBase } from '../../components/ComponentRouterBase';
+export namespace RouterOutlet {
+  export const selector = 'dr-router-outlet';
+  export type Attribute = {
+    value: ComponentSet;
+    if: boolean | null;
+    createArguments: any[];
+    onCreated?: (value: any) => void;
+    onDestroyRender?: () => void;
+  };
+
+  export class RouterOutlet extends ComponentBase<Attribute> implements OnInitRender {
+    private value?: ComponentSet;
+    private if?: boolean | null = null;
+    private createArguments?: any[];
+
+    setValue(value: ComponentSet) {
+      this.value = value;
+    }
+
+    onInitRender(param: any, rawSet: RawSet) {
+      super.onInitRender(param, rawSet);
+      const c = this.getParentThis();
+      if (c instanceof ComponentRouterBase){
+        this.value = c.child
+      }
+      // console.log('------',c);
+    }
+
+    onDestroyRender(data: OnDestroyRenderParams) {
+      super.onDestroyRender(data);
+    }
+
+    onChangeAttrRender(name: string, value: any, other: OtherData) {
+      super.onChangeAttrRender(name, value, other);
+      if (this.equalsAttributeName(name, 'value')) {
+        this.value = value;
+      }
+      if (this.equalsAttributeName(name, 'if')) {
+        this.if = value;
+      }
+      if (this.equalsAttributeName(name, 'createArguments')) {
+        this.createArguments = value;
+      }
+    }
+
+    created(component: any) {
+      component ??= this.value?.obj;
+      this.getAttribute('onCreated')?.(component);
+    }
+  }
+}
+
+export default {
+  // TODO: 왜 이놈만 webpack에서 순환참조 에러나는지모르겠다.. 왜 이놈만.. 그래서 이렇게 하긴함.
+  routerOutlet: (config?: DomRenderRunConfig, executer?: {run: (...data: any[])=>any}) => {
+    return RawSet.createComponentTargetElement({
+      name: RouterOutlet.selector,
+      template:
+        '<div dr-this="@this@.value" dr-detect-option-if="@this@?.value && @this@?.if" dr-option-strip="true" dr-on-create:arguments="@this@.createArguments" dr-on-create:callback="@this@?.created?.($component)">#innerHTML#</div>',
+      objFactory: (e, o, r2, counstructorParam) => {
+        return executer?.run({ rootObject: new RouterOutlet.RouterOutlet(...counstructorParam), config: config });
+      }
+    });
+  }
+};

package/{dist/esm/components/router/index.d.ts → src/components/router/index.ts}

@@ -1,3 +1,2 @@
 export * from './Route';
 export * from './RouterOutlet';
-//# sourceMappingURL=index.d.ts.map