@dooboostore/simple-boot-http-server-ssr 1.0.17 → 1.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-boot-http-server-ssr",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -67,16 +67,7 @@
     "url": "https://github.com/dooboostore-develop/packages"
   },
   "peerDependencies": {
-    "reflect-metadata": "^0.2.2",
-    "@dooboostore/core": "1.0.32",
-    "@dooboostore/dom-render": "1.0.114",
-    "@dooboostore/dom-parser": "1.0.7",
-    "@dooboostore/core-node": "1.0.13",
-    "@dooboostore/simple-boot-front": "1.0.132",
-    "@dooboostore/core-web": "1.0.13",
-    "@dooboostore/simple-boot": "1.0.57",
-    "@dooboostore/simple-web-component": "1.0.47",
-    "@dooboostore/simple-boot-http-server": "1.0.26"
+    "reflect-metadata": "^0.2.2"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
@@ -100,7 +91,16 @@
   "dependencies": {
     "jsdom": "^26.0.0",
     "linkedom": "0.18.12",
-    "playwright": "^1.59.1"
+    "playwright": "^1.59.1",
+    "@dooboostore/core-web": "1.0.14",
+    "@dooboostore/core-node": "1.0.14",
+    "@dooboostore/core": "1.0.33",
+    "@dooboostore/dom-render": "1.0.115",
+    "@dooboostore/dom-parser": "1.0.8",
+    "@dooboostore/simple-boot": "1.0.58",
+    "@dooboostore/simple-boot-front": "1.0.133",
+    "@dooboostore/simple-boot-http-server": "1.0.28",
+    "@dooboostore/simple-web-component": "1.0.51"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/filters/SSRSimpleWebComponentDomParserFilter.ts

@@ -4,7 +4,11 @@ import {Filter} from '@dooboostore/simple-boot-http-server/filters/Filter';
 import {Mimes} from '@dooboostore/simple-boot-http-server/codes/Mimes';
 import {HttpStatus} from '@dooboostore/simple-boot-http-server/codes/HttpStatus';
 import {SimpleBootHttpServer} from '@dooboostore/simple-boot-http-server/SimpleBootHttpServer';
+import {injectRequestResponse} from '@dooboostore/simple-boot-http-server/proxy/RequestResponseInjectProxy';
+import {SimConfig} from '@dooboostore/simple-boot';
 import {DomParserInitializer} from '../initializers/DomParserInitializer';
+import type { SwcAppInterface } from '@dooboostore/simple-web-component';
+import { findAllPropertyMetadata } from '@dooboostore/simple-web-component';
 
 export type SWCSSRDomParserConfig = {
   frontDistPath: string;
@@ -12,9 +16,18 @@ export type SWCSSRDomParserConfig = {
   welcomUrl?: string;
   ssrExcludeFilter?: (rr: RequestResponse) => boolean;
   /**
-   * Function to register components for each request.
+   * SSR 에 노출할 백엔드 서비스 목록(각 항목은 symbol 을 가진다, 예: pairServices).
+   * 프레임워크가 요청마다 각 서비스를 꺼내 이 요청의 rr 을 주입한 뒤 Map 으로 묶어
+   * registerComponents 의 3번째 인자(sim)로 넘긴다. → 앱은 그 Map 을 bootfactory 에 그대로 전달만 하면 되고
+   *   직접 Proxy 로 감싸거나 rr 을 넣을 필요가 없다(쿠키 등 요청 컨텍스트 자동 전달).
    */
-  registerComponents?: (window: any) => Promise<void> | void;
+  intentServices?: SimConfig[];
+  /**
+   * 요청마다 컴포넌트를 등록한다. 앱 bootfactory를 그대로 넘기면 된다.
+   * @param sim intentServices 를 rr 주입해 묶은 Map<symbol, service>. bootfactory 에 그대로 넘기면 된다.
+   * @returns 초기화된 SwcApp (하이드레이션 데이터 박제 등에 사용)
+   */
+  registerComponents?: (window: any, rr: RequestResponse, sim: Map<symbol, any>) => Promise<SwcAppInterface | void> | SwcAppInterface | void;
 };
 
 /**
@@ -23,12 +36,15 @@ export type SWCSSRDomParserConfig = {
  */
 export class SSRSimpleWebComponentDomParserFilter implements Filter {
   private welcomUrl = 'http://localhost';
+  private app?: SimpleBootHttpServer;
 
   constructor(public config: SWCSSRDomParserConfig) {
     this.welcomUrl = config.welcomUrl || this.welcomUrl;
   }
 
-  async onInit(app: SimpleBootHttpServer) {}
+  async onInit(app: SimpleBootHttpServer) {
+    this.app = app;
+  }
 
   async onDestroy() {}
 
@@ -63,8 +79,68 @@ export class SSRSimpleWebComponentDomParserFilter implements Filter {
       try {
         // 2. Register Components if provided
         // We use SwcApplication inside the callback or directly here.
+        let app: SwcAppInterface | void;
         if (this.config.registerComponents) {
-          await this.config.registerComponents(window);
+          // intentServices 를 rr 주입해 Map 으로 묶어 넘긴다 (앱은 bootfactory 에 그대로 전달만).
+          const sim = new Map<symbol, any>();
+          for (const service of (this.config.intentServices ?? []).filter(Boolean)) {
+            if (!service.symbol) continue;
+            for (const sym of (Array.isArray(service.symbol) ? service.symbol : [service.symbol])) {
+              const raw = this.app?.sim<any>(sym as any);
+              if (raw) sim.set(sym, injectRequestResponse(raw, rr));
+            }
+          }
+          app = await this.config.registerComponents(window, rr, sim);
+        }
+
+        // [하이드레이션] swcApp 본체 + 연결 엘리먼트의 @property 값을 script로 박제.
+        // 클라에서 번들보다 먼저 실행 → querySelector로 찾아 .prop = 값 세팅 (네이티브
+        // 업그레이드는 own property 유지라 upgrade 후에도 값 살아있음).
+        if (app) {
+          const items: Array<{ sel: string; prop: string; value: unknown }> = [];
+          const targets: any[] = [app, ...(app.connectedElements?.() ?? []).filter((el: any) => el !== app)];
+          for (const el of targets) {
+            const swcId = (el as any)._swcId;
+            if (!swcId) continue;
+            const sel = `[swc-use-ssr="${swcId}"]`;
+            for (const m of findAllPropertyMetadata(el)) {
+              let value: unknown;
+              try {
+                value = el[m.propertyKey];
+              } catch {
+                continue;
+              }
+              if (value === undefined || typeof value === 'function') continue;
+              try {
+                JSON.stringify(value);
+              } catch {
+                continue;
+              }
+              items.push({ sel, prop: String(m.propertyKey), value });
+            }
+          }
+          if (items.length > 0) {
+            // 업그레이드 때 노드가 갈아엎어지면 JS 프로퍼티는 날아감. attribute는 복사되니
+            // data-hyd-* 로 박고, 같은 노드면 프로퍼티도 바로 세팅.
+            const script = window.document.createElement('script');
+            // <script> 내용은 이스케이프 없이 직렬화된다 → 값에 '</script>'가 있으면 HTML 파서가 거기서 태그를 닫아 XSS.
+            // JSON.stringify는 '<'를 이스케이프하지 않으므로 '\u003c'로 바꾼다 (JS에선 같은 문자열).
+            // U+2028/2029는 구형 JS 엔진에서 문자열 리터럴 안의 줄바꿈으로 해석돼 문법 오류가 나므로 함께 이스케이프.
+            const hydrationJson = JSON.stringify(items)
+              .replace(/</g, '\\u003c')
+              .replace(/\u2028/g, '\\u2028')
+              .replace(/\u2029/g, '\\u2029');
+            script.textContent =
+              ` window.__swc_hydration=${hydrationJson};` +
+              `for(const h of window.__swc_hydration){
+                const el=document.querySelector(h.sel);
+                  if(el){
+                    el[h.prop]=h.value;
+                  }
+              }`;
+            window.document.body.appendChild(script);
+            console.log(`[ssr-hydration] ${items.length} props embedded`);
+          }
         }
 
         // window.document.querySelector('.sidebar-space').innerHTML = '씨발놈아.';

package/src/filters/SSRSimpleWebComponentFilter.ts

@@ -19,7 +19,7 @@ export type SWCSSRConfig = {
    * Playwright evaluates real JS files loaded from your index.html,
    * so component registration happens automatically in the browser context.
    */
-  registerComponents?: (window: any) => Promise<void> | void;
+  registerComponents?: (window: any, rr?: RequestResponse) => Promise<void> | void;
   playwright?: {
     waitUntil?: 'load' | 'domcontentloaded' | 'networkidle' | 'commit';
     waitForSelector?: string;