@dooboostore/dom-render 1.0.108 → 1.0.110

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@dooboostore/dom-render",
-  "version": "1.0.108",
+  "version": "1.0.110",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
   "typesVersions": {
-    ">=4.2": {
+    "*": {
       "*": [
         "dist/types/*"
       ]
@@ -67,10 +67,7 @@
     "url": "https://github.com/dooboostore-develop/packages"
   },
   "peerDependencies": {
-    "reflect-metadata": "^0.2.2",
-    "@dooboostore/core-web": "1.0.6",
-    "@dooboostore/core": "1.0.21",
-    "@dooboostore/core-node": "1.0.7"
+    "reflect-metadata": "^0.2.2"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
@@ -92,19 +89,23 @@
     "@types/node": "^20",
     "typescript": "^5.9.2",
     "esbuild-plugin-tsc": "^0.5.0",
-    "esbuild": "^0.23.0"
+    "esbuild": "^0.23.0",
+    "@dooboostore/core": "1.0.26",
+    "@dooboostore/core-web": "1.0.8",
+    "@dooboostore/core-node": "1.0.9"
   },
   "scripts": {
     "clean": "rm -rf dist",
     "build:esm": "node build.mjs esm",
     "watch:esm": "pnpm run build:esm && node build.mjs esm --watch",
-    "build:cjs": "node build.mjs cjs && cp package.cjs.json dist/cjs/package.json",
+    "build:cjs": "node build.mjs cjs",
     "watch:cjs": "pnpm run build:cjs && node build.mjs cjs --watch",
     "build": "pnpm run clean && node build.mjs all",
     "build:umd-bundle": "node build.mjs umd-bundle",
     "watch:umd-bundle": "pnpm run build:umd-bundle && node build.mjs umd-bundle --watch",
     "build:esm-bundle": "node build.mjs esm-bundle",
     "watch:esm-bundle": "pnpm run build:esm-bundle && node build.mjs esm-bundle --watch",
+    "watch": "node build.mjs all --watch",
     "publish:npm": "pnpm run build && cp package.json package.json.back && pnpm pack && TARBALL_NAME=$(ls dooboostore-dom-render-*.tgz | head -n 1) && tar -xzf \"$TARBALL_NAME\" -C . --strip-components=1 package/package.json && rm \"$TARBALL_NAME\" && (pnpm publish --no-git-checks || true) && cp package.json.back package.json && rm -rf package.json.back  ",
     "ts:clean": "find . -name '*.js' -o -name '*.map' -o -name '*.d.ts' | xargs rm -f",
     "typecheck": "pnpm exec tsc --noEmit",

package/src/DomRender.ts

@@ -11,24 +11,30 @@ import { drComponent } from './components';
 import { EventManager } from './events/EventManager';
 import { RandomUtils } from '@dooboostore/core/random/RandomUtils';
 
-export type DomRenderRunConfig<T = any> = Omit<DomRenderConfig<T>, 'router' | 'uuid' | 'eventManager' | 'messenger' | 'root' | 'rootElement'> & { routerType?: 'path' | 'hash' | ((obj: T, window: Window) => Router) | Router };
+export type DomRenderRunConfig<T = any> = Omit<DomRenderConfig<T>, 'router' | 'uuid' | 'eventManager' | 'messenger' | 'root' | 'rootElement'> & { routerType?: 'path' | 'hash' | ((obj: T, targetConfig: DomRenderConfig) => Router) | Router };
 export type CreateComponentParam = { type: ConstructorType<any> | any, tagName?: string, noStrip?: boolean, template?: string, styles?: string[] | string };
 let eventManager: EventManager | null = null;
 export type DomRenderRunParameter<T extends object> = { rootObject: T | (() => T), target?: Element | null, config?: DomRenderRunConfig | DomRenderConfig };
 
+export type ExecuteConfig = { firstUrl?: string };
+
 export class DomRender<T extends object = any> {
   private _config: DomRenderConfig;
   private _target: Element | null | undefined;
   private _rootObject: T;
+  private _router: Router;
+  private _eventManager: EventManager;
 
-  constructor(parameter: DomRenderRunParameter<T>, executeConfig?: { autoGo?: string }) {
-    const s = DomRender.runSet(parameter);
+  constructor(parameter: DomRenderRunParameter<T>, executeConfig?: ExecuteConfig) {
+    const s = DomRender.runSet(parameter,executeConfig);
     this._config = s.config;
     this._target = s.target;
     this._rootObject = s.rootObject;
-    if (executeConfig && executeConfig?.autoGo) {
-      this._config.router?.go(executeConfig.autoGo);
-    }
+    this._router = s.config.router;
+    this._eventManager = s.config.eventManager;
+    // if (executeConfig && executeConfig?.autoGo) {
+    //   this._config.router?.go(executeConfig.autoGo);
+    // }
   }
 
   public get rootObject(): T {
@@ -38,8 +44,14 @@ export class DomRender<T extends object = any> {
   public get config(): DomRenderConfig {
     return this._config;
   }
+  public get router(): Router {
+    return this._router;
+  }
 
-  public get target(): Element | null |undefined {
+  public get eventManager(): EventManager {
+    return this._eventManager;
+  }
+  public get target(): Element | null | undefined {
     return this._target;
   }
 
@@ -47,7 +59,11 @@ export class DomRender<T extends object = any> {
     return DomRender.runSet(data).rootObject;
   }
 
-  public static runSet<T extends object>({rootObject, target, config}: DomRenderRunParameter<T>): { rootObject: T, target?: Element | null, config: DomRenderConfig } {
+  public static runSet<T extends object>({
+    rootObject,
+    target,
+    config
+  }: DomRenderRunParameter<T>, executeConfig?: ExecuteConfig): { rootObject: T; target?: Element | null; config: DomRenderConfig } {
     // public static run<T extends object>({rootObject, target, config}: DomRenderRunParameter<T>): T {
     //   console.log('runSet')
     rootObject = typeof rootObject === 'function' ? rootObject() : rootObject;
@@ -58,7 +74,7 @@ export class DomRender<T extends object = any> {
       }
       targetObject = rootObject;
       // return targetObject;
-      return {rootObject: targetObject, target, config: (rootObject as any)._domRender_config};
+      return { rootObject: targetObject, target, config: (rootObject as any)._domRender_config };
     }
     const targetConfig = Object.assign({}, config) as DomRenderConfig;
     eventManager ??= new EventManager(targetConfig.window);
@@ -68,7 +84,6 @@ export class DomRender<T extends object = any> {
     targetConfig.proxyExcludeTyps = targetConfig.proxyExcludeTyps ?? [];
     targetConfig.targetElements ??= [];
 
-
     if (typeof Window !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === Window)) {
       targetConfig.proxyExcludeTyps.push(Window);
     }
@@ -87,12 +102,27 @@ export class DomRender<T extends object = any> {
     if (typeof ImageBitmap !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === ImageBitmap)) {
       targetConfig.proxyExcludeTyps.push(ImageBitmap);
     }
-    if (typeof CanvasRenderingContext2D !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === CanvasRenderingContext2D)) {
+    if ( typeof CanvasRenderingContext2D !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === CanvasRenderingContext2D) ) {
       targetConfig.proxyExcludeTyps.push(CanvasRenderingContext2D);
     }
-    if (typeof HTMLCanvasElement !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === HTMLCanvasElement)) {
-      targetConfig.proxyExcludeTyps.push(HTMLCanvasElement);
+    if ( typeof CSSStyleDeclaration !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === CSSStyleDeclaration) ) {
+      targetConfig.proxyExcludeTyps.push(CSSStyleDeclaration);
     }
+    if ( typeof Date !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === Date) ) {
+      targetConfig.proxyExcludeTyps.push(Date);
+    }
+    if ( typeof MutationObserver !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === IntersectionObserver) ) {
+      targetConfig.proxyExcludeTyps.push(IntersectionObserver);
+    }
+    if ( typeof IntersectionObserver !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === IntersectionObserver) ) {
+      targetConfig.proxyExcludeTyps.push(IntersectionObserver);
+    }
+    if (typeof HTMLElement !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === HTMLElement)) {
+      targetConfig.proxyExcludeTyps.push(HTMLElement);
+    }
+    // if (typeof HTMLCanvasElement !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === HTMLCanvasElement)) {
+    //   targetConfig.proxyExcludeTyps.push(HTMLCanvasElement);
+    // }
     if (!targetConfig.proxyExcludeTyps.some(it => it === RawSet)) {
       targetConfig.proxyExcludeTyps.push(RawSet);
     }
@@ -112,11 +142,11 @@ export class DomRender<T extends object = any> {
     if (!targetConfig.router) {
       let targetRouter: Router<any> | undefined;
       if ('routerType' in config && config?.routerType === 'hash') {
-        targetRouter = new HashRouter({rootObject: targetObject, window: targetConfig.window});
+        targetRouter = new HashRouter({ rootObject: targetObject, window: targetConfig.window, firstUrl: executeConfig?.firstUrl });
       } else if ('routerType' in config && config?.routerType === 'path') {
-        targetRouter = new PathRouter({rootObject: targetObject, window: targetConfig.window});
+        targetRouter = new PathRouter({ rootObject: targetObject, window: targetConfig.window, firstUrl: executeConfig?.firstUrl });
       } else if ('routerType' in config && typeof config?.routerType === 'function') {
-        targetRouter = config.routerType(targetObject, targetConfig.window);
+        targetRouter = config.routerType(targetObject, targetConfig);
       } else if ('routerType' in config && typeof config?.routerType === 'object') {
         targetRouter = config.routerType;
       }
@@ -141,33 +171,31 @@ export class DomRender<T extends object = any> {
     //   }
     // }
     domRender.run(targetObject);
-    return {rootObject: targetObject, config: targetConfig, target};
+    return { rootObject: targetObject, config: targetConfig, target };
     // return targetObject;
   }
 
   public static createComponent(param: CreateComponentParam) {
     // console.log('===>', typeof param.type, param.type.name, param.type.constructor.name)
-    const component = RawSet.createComponentTargetElement(
-      {
-        name: param.tagName ?? (typeof param.type === 'function' ? param.type.name : param.type.constructor.name),
-        objFactory: (e, o, r2, counstructorParam) => {
-          return typeof param.type === 'function' ? new param.type(...counstructorParam) : param.type;
-        },
-        noStrip: param.noStrip,
-        template: param.template ?? '',
-        styles: Array.isArray(param.styles) ? param.styles : (param.styles ? [param.styles] : undefined)
-      }
-    );
+    const component = RawSet.createComponentTargetElement({
+      name: param.tagName ?? (typeof param.type === 'function' ? param.type.name : param.type.constructor.name),
+      objFactory: (e, o, r2, counstructorParam) => {
+        return typeof param.type === 'function' ? new param.type(...counstructorParam) : param.type;
+      },
+      noStrip: param.noStrip,
+      template: param.template ?? '',
+      styles: Array.isArray(param.styles) ? param.styles : param.styles ? [param.styles] : undefined
+    });
     return component;
   }
 
   // ?? 언제 쓰는거지?? 훔..
-  public static createAttribute(attrName: string, getThisObj: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => any, factory: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => DocumentFragment) {
-    const targetAttribute = RawSet.createComponentTargetAttribute(
-      attrName,
-      getThisObj,
-      factory
-    );
+  public static createAttribute(
+    attrName: string,
+    getThisObj: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => any,
+    factory: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => DocumentFragment
+  ) {
+    const targetAttribute = RawSet.createComponentTargetAttribute(attrName, getThisObj, factory);
     return targetAttribute;
   }
 }