@nine-lab/nine-mu 0.1.284 → 0.1.286

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nine-lab/nine-mu",
-  "version": "0.1.284",
+  "version": "0.1.286",
   "description": "AI-Driven Full-Stack Code Fabrication Engine",
   "type": "module",
   "main": "./dist/nine-mu.umd.js",

package/src/components/NineDiffPopup.js

@@ -5,7 +5,7 @@ import '@nine-lab/nine-util';
 export class NineDiffPopup extends HTMLElement {
     #dialog = null;
     #tabContainer = null;
-    #filesMap = new Map(); // 각 탭(파일)별 메타데이터 및 에디터 인스턴스를 관리할 고유 저장소
+    #fileList = []; // 최종 [모두 저장]을 위한 차분 명세 데이터 버퍼
     #host;
 
     constructor() {
@@ -19,7 +19,7 @@ export class NineDiffPopup extends HTMLElement {
     }
 
     /**
-     * 💡 기본 다이얼로그 프레임 및 스타일 스케폴딩 렌더링
+     * 💡 기본 다이얼로그 외곽 프레임만 정적으로 선언 (탭 레이아웃은 비워둠)
      */
     #renderScaffolding() {
         const customImport = this.getAttribute("css-path") ? `@import "${this.getAttribute("css-path")}";` : "";
@@ -43,14 +43,13 @@ export class NineDiffPopup extends HTMLElement {
                     display: flex;
                     flex-direction: column;
                 }
-                /* 💡 nx-tab / nine-tab 프레임워크가 100% 자라나도록 높이 강제 배치 */
                 nine-tab {
                     flex: 1;
                     display: flex;
                     flex-direction: column;
                     height: 100%;
                 }
-                /* 💡 내부 에디터 가시성이 유실되어 숨겨지는 현상을 확실하게 방어 */
+                /* 💡 하얗게 안 보이는 현상을 방지하기 위해 동적 삽입될 에디터 영역의 높이를 확실히 보장 */
                 .diff-wrapper {
                     height: calc(80vh - 120px); 
                     width: 100%;
@@ -96,18 +95,18 @@ export class NineDiffPopup extends HTMLElement {
     }
 
     /**
-     * 💡 [완벽 동적 빌딩 시스템]
-     * 백엔드 완료 시그널로부터 모아진 collectedFiles 가 들어오면, 런타임에 해당하는 탭만 정확하게 파싱하여 주입합니다.
+     * 💡 [100% 동적 빌딩 시스템]
+     * 들어온 데이터 개수에 정확히 맞추어 런타임에 탭 페이지와 에디터를 일대일 매핑으로 직접 조립합니다.
      * @param {Array} fileList - [{ layer: "MyBatis", full_path: "...", asis_source: "...", source: "..." }]
      */
     async data(fileList) {
         if (!Array.isArray(fileList) || fileList.length === 0) return this;
+        this.#fileList = fileList;
 
-        // 1. 기존에 잔존하던 동적 탭 컨텐츠 구성원 완전 청소
+        // 1. 🧼 이전 실행 흔적이 있다면 동적 컨텐츠 내부를 완전히 청소 (인덱스 리셋)
         this.#tabContainer.innerHTML = "";
-        this.#filesMap.clear();
 
-        // 확장자 기반 언어셋 하이라이팅 추론 헬퍼
+        // 확장자 기반 주석/언어 유추 헬퍼
         const detectLanguage = (path) => {
             const lower = (path || "").toLowerCase();
             if (lower.endsWith('.xml')) return 'xml';
@@ -116,84 +115,79 @@ export class NineDiffPopup extends HTMLElement {
             return 'javascript';
         };
 
-        // 2. 수신된 파일 명세 묶음 크기만큼 루프를 돌며 웹 컴포넌트 런타임 인스턴싱
-        fileList.forEach((file, index) => {
-            const { layer, full_path, asis_source, source } = file;
+        // 2. ⚡ 수신된 파일 갯수만큼 루프를 돌며 필요한 요소만 정확히 DOM 생성(Injection)
+        fileList.forEach((file) => {
+            const { layer, full_path } = file;
             const lang = detectLanguage(full_path);
-
-            // 파일명만 추출하여 보기 좋게 캡션 가공
             const fileName = full_path.split('/').pop() || "Unknown";
-            const caption = `${layer.toUpperCase()} (${fileName})`;
+            const captionName = `${layer.toUpperCase()} (${fileName})`; // 예: MYBATIS (MemberUsersMapper.xml)
 
-            // A. <nine-tab-page> 엘리먼트 동적 생성 및 헤더 캡션 설정
+            // A. <nine-tab-page> 런타임 인스턴싱
             const tabPage = document.createElement('nine-tab-page');
-            tabPage.setAttribute('caption', caption);
+            tabPage.setAttribute('caption', captionName);
 
-            // B. 차분 레이아웃 정밀 래퍼 생성
+            // B. 높이 유실 방어용 래퍼 생성
             const diffWrapper = document.createElement('div');
             diffWrapper.className = 'diff-wrapper';
 
-            // C. <nine-diff> 소스 비교 전용 에디터 장치 인스턴싱
+            // C. <nine-diff> 에디터 장치 동적 생성 및 매칭용 레이어 클래스 주입
             const diffView = document.createElement('nine-diff');
+            diffView.className = layer; // 예: class="MyBatis" 또는 class="JavaScript"
 
-            // D. 계층 하위 조립 및 완성된 컴포넌트 트리를 실제 탭 컨테이너에 피딩
+            // D. 하위 트리 계층 결합 및 실제 탭 컨테이너 레이아웃에 안착
             diffWrapper.appendChild(diffView);
             tabPage.appendChild(diffWrapper);
             this.#tabContainer.appendChild(tabPage);
-
-            // E. 추후 [모두 저장] 작동시 순회 타겟 명세 확보를 위한 고유 맵 바인딩
-            const fileKey = `file_tab_${index}`;
-            this.#filesMap.set(fileKey, {
-                layer,
-                fullPath: full_path,
-                asisSource: asis_source,
-                diffView: diffView
-            });
-
-            // F. 동적으로 추가된 에디터 가상 장치가 준비 완료(ready) 상태를 발행하면 소스 코드 로드 기동
-            diffView.addEventListener('ready', () => {
-                diffView.initialize(asis_source || "", source || "", lang);
-            }, { once: true });
         });
 
-        // 3. 렌더링 트리 결합 후 nine-tab 컴포넌트 자체 라이프사이클 엔진 강제 구동
+        // 3. ⏰ 브라우저가 동적으로 추가된 태그들을 완벽하게 렌더트리에 마운트할 수 있도록 비동기 여유 마진 확보
         setTimeout(() => {
-            if (typeof this.#tabContainer.initialize === 'function') {
+            fileList.forEach((file) => {
+                const { layer, asis_source, source } = file;
+                const diff = this.shadowRoot.querySelector(`nine-diff.${layer}`);
+
+                if (diff) {
+                    const lang = detectLanguage(file.full_path);
+                    // 확보된 실제 에디터 버퍼 장치에 소스코드 강제 바인딩 초기화
+                    diff.initialize(asis_source || "", source || "", lang);
+                }
+            });
+
+            // E. 데이터 주입이 모두 완벽히 끝난 시점에 nine-tab 컴포넌트의 가상 빌더 엔진 트리거!
+            if (this.#tabContainer && typeof this.#tabContainer.initialize === 'function') {
                 this.#tabContainer.initialize();
             }
-        }, 50);
+        }, 150); // 150ms의 마진 타임 적용
 
         return this;
     }
 
     /**
-     * 💡 [일괄 물리 파일 라이팅]
-     * 활성화된 모든 탭 영역의 우측 창(TO-BE) 최종 소스들을 취합하여 단 한 번의 일괄 요청으로 커밋
+     * 💡 [일괄 물리 저장]
      */
     async #handleConfirmAll() {
         const payloadList = [];
 
-        // 관리용 맵 저장소를 순회하며 최종 수정본 코드 스냅샷 추출
-        for (const [key, fileObj] of this.#filesMap.entries()) {
-            const { diffView, fullPath, asisSource, layer } = fileObj;
+        for (const file of this.#fileList) {
+            const { layer, full_path, asis_source } = file;
+            // 각 레이어 클래스로 지정해 둔 동적 에디터를 순회하며 텍스트 캡처
+            const diff = this.shadowRoot.querySelector(`nine-diff.${layer}`);
 
-            // 사용자가 수정한 최종 우측 창 텍스트를 추출 (에디터 로드 전 예외 발생 시 원본 보호용 fallback)
-            const currentContent = diffView ? diffView.getContents() : asisSource;
+            const currentContent = diff ? diff.getContents() : asis_source;
 
             payloadList.push({
                 layer,
-                fullPath: fullPath,
+                fullPath: full_path,
                 packageName: this.#host?.getAttribute('package-name') || "com.ninelab.ai",
                 contents: currentContent
             });
         }
 
         try {
-            // 변경된 멀티 레이어 파일 묶음을 전송하는 일괄 일치 컨트롤러 API 최종 동기화
             await api.post(`/nine-mu/source/generateJsonFileBatch`, { fileList: payloadList });
 
             await nine.alert("요청하신 모든 파일의 소스 변경 사항이 성공적으로 반영되었습니다.");
-            this.#dialog.close(); // 팝업 모달 소멸
+            this.#dialog.close();
         } catch (error) {
             trace.error("일괄 파일 저장 처리 중 실패:", error);
             nine.alert("소스 일괄 저장 연동 중 치명적인 오류가 발생했습니다.");
@@ -205,7 +199,6 @@ export class NineDiffPopup extends HTMLElement {
     }
 }
 
-// 중복 등록 충돌 방지 처리 포함 등록
 if (!customElements.get("nine-diff-popup")) {
     customElements.define("nine-diff-popup", NineDiffPopup);
 }