ide-assi 0.367.0 → 0.368.0

package/dist/bundle.cjs.js

@@ -234929,9 +234929,6 @@ class IdeDiff extends HTMLElement {
 						if (update.view.contentDOM.firstChild && !update.view._initialAsisContentLoaded) {
 							update.view._initialAsisContentLoaded = true; // 플래그 설정
 							console.log("CodeMirror ASIS view is ready for initial content.");
-							// 뷰가 준비되었을 때 initialize를 호출해야 한다면 여기에 로직 추가 (예: 외부에서 데이터 주입)
-							// 예시: this.initialize("초기 ASIS 코드", "초기 TOBE 코드");
-							// 단, initialize는 한 번만 호출되도록 외부 로직을 구성해야 합니다.
 						}
 					})
 				]
@@ -234962,16 +234959,12 @@ class IdeDiff extends HTMLElement {
 			parent: this.#tobeEditorEl
 		});
 
-		// ⭐️ 스크롤 동기화는 여기서 설정만 하고, `initialize` 함수 내에서 활성화 시점을 제어합니다.
-		// (이전 단계에서 이미 `initialize`에 활성/비활성화 로직을 추가했다고 가정)
+		// ⭐️ 초기 스크롤 동기화는 여기서 설정만 하고, initialize에서 활성화 제어
 		this.#setupScrollSync();
 	};
 
 	// ⭐️ 스크롤 리스너를 제어할 수 있도록 플래그 및 클래스 메서드 사용
 	#setupScrollSync = () => {
-
-		console.log("setupScrollSync");
-
 		// 기존 리스너가 있다면 제거 (중복 방지 및 disconnectedCallback에서 제거 용이)
 		if (this._asisScrollHandler) { // 핸들러가 이미 할당되어 있다면
 			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
@@ -235130,7 +235123,7 @@ class IdeDiff extends HTMLElement {
 			return;
 		}
 
-		// ⭐️ initialize 시작 시 스크롤 동기화 일시 중지
+		// 초기화 시작 시 스크롤 동기화 일시 중지
 		this.#isScrollSyncActive = false;
 
 		let langExtension;
@@ -235142,45 +235135,52 @@ class IdeDiff extends HTMLElement {
 				langExtension = javascript();
 		}
 
-		// 먼저 데코레이션 효과를 계산하여 가져옵니다.
+		// 데코레이션 효과는 미리 계산해 둡니다.
 		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
-
-		// asis 에디터의 텍스트 변경 및 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
+		// 1단계: 텍스트 내용 변경과 언어 확장을 먼저 디스패치합니다.
 		this.#asisEditorView.dispatch({
 			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 },
 			effects: [
-				this.#languageCompartment.reconfigure(langExtension),
-				//asisEffect
+				this.#languageCompartment.reconfigure(langExtension)
 			]
 		});
 
-		// tobe 에디터의 텍스트 변경 및 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 		this.#tobeEditorView.dispatch({
 			changes: { from: 0, to: this.#tobeEditorView.state.doc.length, insert: src2 },
 			effects: [
-				this.#languageCompartment.reconfigure(langExtension), // <-- 이 주석을 풀어주세요!
-				//tobeEffect // <-- 이 주석을 풀어주세요!
+				this.#languageCompartment.reconfigure(langExtension)
 			]
 		});
 
-		// ⭐️ 모든 뷰 업데이트가 완료된 후 스크롤 동기화를 다시 활성화
-		// requestAnimationFrame을 사용하여 다음 브라우저 렌더링 사이클에서 실행
+		// 2단계: 텍스트 및 언어 변경이 완전히 적용되고 뷰가 안정화된 후,
+		// 다음 프레임에서 데코레이션 효과만 별도로 디스패치합니다.
 		requestAnimationFrame(() => {
-			this.#isScrollSyncActive = true;
-			// 필요하다면 여기서 초기 스크롤 위치를 0으로 리셋하여 정렬을 보장할 수 있습니다.
-			// this.#asisEditorView.scrollDOM.scrollTop = 0;
-			// this.#tobeEditorView.scrollDOM.scrollTop = 0;
+			this.#asisEditorView.dispatch({
+				effects: [asisEffect]
+			});
+			this.#tobeEditorView.dispatch({
+				effects: [tobeEffect]
+			});
+
+			// 3단계: 데코레이션까지 적용된 후 스크롤 동기화 활성화
+			// (필요하다면 여기도 requestAnimationFrame으로 한 번 더 지연시킬 수 있습니다.)
+			requestAnimationFrame(() => {
+				this.#isScrollSyncActive = true;
+				// 필요하다면 여기서 초기 스크롤 위치를 0으로 리셋하여 정렬을 보장할 수 있습니다.
+				// this.#asisEditorView.scrollDOM.scrollTop = 0;
+				// this.#tobeEditorView.scrollDOM.scrollTop = 0;
+			});
 		});
 	};
 
 	disconnectedCallback() {
 		// 컴포넌트 해제 시 스크롤 리스너 제거
-		if (this._asisScrollHandler) { // 핸들러가 존재하면 제거
+		if (this._asisScrollHandler) {
 			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
 			this.#tobeEditorView.scrollDOM.removeEventListener('scroll', this._tobeScrollHandler);
-			this._asisScrollHandler = null; // 참조 제거
-			this._tobeScrollHandler = null; // 참조 제거
+			this._asisScrollHandler = null;
+			this._tobeScrollHandler = null;
 		}
 		if (this.#asisEditorView) {
 			this.#asisEditorView.destroy();

package/dist/bundle.esm.js

@@ -234925,9 +234925,6 @@ class IdeDiff extends HTMLElement {
 						if (update.view.contentDOM.firstChild && !update.view._initialAsisContentLoaded) {
 							update.view._initialAsisContentLoaded = true; // 플래그 설정
 							console.log("CodeMirror ASIS view is ready for initial content.");
-							// 뷰가 준비되었을 때 initialize를 호출해야 한다면 여기에 로직 추가 (예: 외부에서 데이터 주입)
-							// 예시: this.initialize("초기 ASIS 코드", "초기 TOBE 코드");
-							// 단, initialize는 한 번만 호출되도록 외부 로직을 구성해야 합니다.
 						}
 					})
 				]
@@ -234958,16 +234955,12 @@ class IdeDiff extends HTMLElement {
 			parent: this.#tobeEditorEl
 		});
 
-		// ⭐️ 스크롤 동기화는 여기서 설정만 하고, `initialize` 함수 내에서 활성화 시점을 제어합니다.
-		// (이전 단계에서 이미 `initialize`에 활성/비활성화 로직을 추가했다고 가정)
+		// ⭐️ 초기 스크롤 동기화는 여기서 설정만 하고, initialize에서 활성화 제어
 		this.#setupScrollSync();
 	};
 
 	// ⭐️ 스크롤 리스너를 제어할 수 있도록 플래그 및 클래스 메서드 사용
 	#setupScrollSync = () => {
-
-		console.log("setupScrollSync");
-
 		// 기존 리스너가 있다면 제거 (중복 방지 및 disconnectedCallback에서 제거 용이)
 		if (this._asisScrollHandler) { // 핸들러가 이미 할당되어 있다면
 			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
@@ -235126,7 +235119,7 @@ class IdeDiff extends HTMLElement {
 			return;
 		}
 
-		// ⭐️ initialize 시작 시 스크롤 동기화 일시 중지
+		// 초기화 시작 시 스크롤 동기화 일시 중지
 		this.#isScrollSyncActive = false;
 
 		let langExtension;
@@ -235138,45 +235131,52 @@ class IdeDiff extends HTMLElement {
 				langExtension = javascript();
 		}
 
-		// 먼저 데코레이션 효과를 계산하여 가져옵니다.
+		// 데코레이션 효과는 미리 계산해 둡니다.
 		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
-
-		// asis 에디터의 텍스트 변경 및 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
+		// 1단계: 텍스트 내용 변경과 언어 확장을 먼저 디스패치합니다.
 		this.#asisEditorView.dispatch({
 			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 },
 			effects: [
-				this.#languageCompartment.reconfigure(langExtension),
-				//asisEffect
+				this.#languageCompartment.reconfigure(langExtension)
 			]
 		});
 
-		// tobe 에디터의 텍스트 변경 및 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 		this.#tobeEditorView.dispatch({
 			changes: { from: 0, to: this.#tobeEditorView.state.doc.length, insert: src2 },
 			effects: [
-				this.#languageCompartment.reconfigure(langExtension), // <-- 이 주석을 풀어주세요!
-				//tobeEffect // <-- 이 주석을 풀어주세요!
+				this.#languageCompartment.reconfigure(langExtension)
 			]
 		});
 
-		// ⭐️ 모든 뷰 업데이트가 완료된 후 스크롤 동기화를 다시 활성화
-		// requestAnimationFrame을 사용하여 다음 브라우저 렌더링 사이클에서 실행
+		// 2단계: 텍스트 및 언어 변경이 완전히 적용되고 뷰가 안정화된 후,
+		// 다음 프레임에서 데코레이션 효과만 별도로 디스패치합니다.
 		requestAnimationFrame(() => {
-			this.#isScrollSyncActive = true;
-			// 필요하다면 여기서 초기 스크롤 위치를 0으로 리셋하여 정렬을 보장할 수 있습니다.
-			// this.#asisEditorView.scrollDOM.scrollTop = 0;
-			// this.#tobeEditorView.scrollDOM.scrollTop = 0;
+			this.#asisEditorView.dispatch({
+				effects: [asisEffect]
+			});
+			this.#tobeEditorView.dispatch({
+				effects: [tobeEffect]
+			});
+
+			// 3단계: 데코레이션까지 적용된 후 스크롤 동기화 활성화
+			// (필요하다면 여기도 requestAnimationFrame으로 한 번 더 지연시킬 수 있습니다.)
+			requestAnimationFrame(() => {
+				this.#isScrollSyncActive = true;
+				// 필요하다면 여기서 초기 스크롤 위치를 0으로 리셋하여 정렬을 보장할 수 있습니다.
+				// this.#asisEditorView.scrollDOM.scrollTop = 0;
+				// this.#tobeEditorView.scrollDOM.scrollTop = 0;
+			});
 		});
 	};
 
 	disconnectedCallback() {
 		// 컴포넌트 해제 시 스크롤 리스너 제거
-		if (this._asisScrollHandler) { // 핸들러가 존재하면 제거
+		if (this._asisScrollHandler) {
 			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
 			this.#tobeEditorView.scrollDOM.removeEventListener('scroll', this._tobeScrollHandler);
-			this._asisScrollHandler = null; // 참조 제거
-			this._tobeScrollHandler = null; // 참조 제거
+			this._asisScrollHandler = null;
+			this._tobeScrollHandler = null;
 		}
 		if (this.#asisEditorView) {
 			this.#asisEditorView.destroy();

package/dist/components/ideDiff.js

@@ -177,9 +177,6 @@ export class IdeDiff extends HTMLElement {
 						if (update.view.contentDOM.firstChild && !update.view._initialAsisContentLoaded) {
 							update.view._initialAsisContentLoaded = true; // 플래그 설정
 							console.log("CodeMirror ASIS view is ready for initial content.");
-							// 뷰가 준비되었을 때 initialize를 호출해야 한다면 여기에 로직 추가 (예: 외부에서 데이터 주입)
-							// 예시: this.initialize("초기 ASIS 코드", "초기 TOBE 코드");
-							// 단, initialize는 한 번만 호출되도록 외부 로직을 구성해야 합니다.
 						}
 					})
 				]
@@ -210,16 +207,12 @@ export class IdeDiff extends HTMLElement {
 			parent: this.#tobeEditorEl
 		});
 
-		// ⭐️ 스크롤 동기화는 여기서 설정만 하고, `initialize` 함수 내에서 활성화 시점을 제어합니다.
-		// (이전 단계에서 이미 `initialize`에 활성/비활성화 로직을 추가했다고 가정)
+		// ⭐️ 초기 스크롤 동기화는 여기서 설정만 하고, initialize에서 활성화 제어
 		this.#setupScrollSync();
 	};
 
 	// ⭐️ 스크롤 리스너를 제어할 수 있도록 플래그 및 클래스 메서드 사용
 	#setupScrollSync = () => {
-
-		console.log("setupScrollSync");
-
 		// 기존 리스너가 있다면 제거 (중복 방지 및 disconnectedCallback에서 제거 용이)
 		if (this._asisScrollHandler) { // 핸들러가 이미 할당되어 있다면
 			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
@@ -378,7 +371,7 @@ export class IdeDiff extends HTMLElement {
 			return;
 		}
 
-		// ⭐️ initialize 시작 시 스크롤 동기화 일시 중지
+		// 초기화 시작 시 스크롤 동기화 일시 중지
 		this.#isScrollSyncActive = false;
 
 		let langExtension;
@@ -390,45 +383,52 @@ export class IdeDiff extends HTMLElement {
 				langExtension = javascript();
 		}
 
-		// 먼저 데코레이션 효과를 계산하여 가져옵니다.
+		// 데코레이션 효과는 미리 계산해 둡니다.
 		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
-
-		// asis 에디터의 텍스트 변경 및 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
+		// 1단계: 텍스트 내용 변경과 언어 확장을 먼저 디스패치합니다.
 		this.#asisEditorView.dispatch({
 			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 },
 			effects: [
-				this.#languageCompartment.reconfigure(langExtension),
-				//asisEffect
+				this.#languageCompartment.reconfigure(langExtension)
 			]
 		});
 
-		// tobe 에디터의 텍스트 변경 및 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 		this.#tobeEditorView.dispatch({
 			changes: { from: 0, to: this.#tobeEditorView.state.doc.length, insert: src2 },
 			effects: [
-				this.#languageCompartment.reconfigure(langExtension), // <-- 이 주석을 풀어주세요!
-				//tobeEffect // <-- 이 주석을 풀어주세요!
+				this.#languageCompartment.reconfigure(langExtension)
 			]
 		});
 
-		// ⭐️ 모든 뷰 업데이트가 완료된 후 스크롤 동기화를 다시 활성화
-		// requestAnimationFrame을 사용하여 다음 브라우저 렌더링 사이클에서 실행
+		// 2단계: 텍스트 및 언어 변경이 완전히 적용되고 뷰가 안정화된 후,
+		// 다음 프레임에서 데코레이션 효과만 별도로 디스패치합니다.
 		requestAnimationFrame(() => {
-			this.#isScrollSyncActive = true;
-			// 필요하다면 여기서 초기 스크롤 위치를 0으로 리셋하여 정렬을 보장할 수 있습니다.
-			// this.#asisEditorView.scrollDOM.scrollTop = 0;
-			// this.#tobeEditorView.scrollDOM.scrollTop = 0;
+			this.#asisEditorView.dispatch({
+				effects: [asisEffect]
+			});
+			this.#tobeEditorView.dispatch({
+				effects: [tobeEffect]
+			});
+
+			// 3단계: 데코레이션까지 적용된 후 스크롤 동기화 활성화
+			// (필요하다면 여기도 requestAnimationFrame으로 한 번 더 지연시킬 수 있습니다.)
+			requestAnimationFrame(() => {
+				this.#isScrollSyncActive = true;
+				// 필요하다면 여기서 초기 스크롤 위치를 0으로 리셋하여 정렬을 보장할 수 있습니다.
+				// this.#asisEditorView.scrollDOM.scrollTop = 0;
+				// this.#tobeEditorView.scrollDOM.scrollTop = 0;
+			});
 		});
 	};
 
 	disconnectedCallback() {
 		// 컴포넌트 해제 시 스크롤 리스너 제거
-		if (this._asisScrollHandler) { // 핸들러가 존재하면 제거
+		if (this._asisScrollHandler) {
 			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
 			this.#tobeEditorView.scrollDOM.removeEventListener('scroll', this._tobeScrollHandler);
-			this._asisScrollHandler = null; // 참조 제거
-			this._tobeScrollHandler = null; // 참조 제거
+			this._asisScrollHandler = null;
+			this._tobeScrollHandler = null;
 		}
 		if (this.#asisEditorView) {
 			this.#asisEditorView.destroy();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ide-assi",
   "type": "module",
-  "version": "0.367.0",
+  "version": "0.368.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/src/components/ideDiff.js

@@ -177,9 +177,6 @@ export class IdeDiff extends HTMLElement {
 						if (update.view.contentDOM.firstChild && !update.view._initialAsisContentLoaded) {
 							update.view._initialAsisContentLoaded = true; // 플래그 설정
 							console.log("CodeMirror ASIS view is ready for initial content.");
-							// 뷰가 준비되었을 때 initialize를 호출해야 한다면 여기에 로직 추가 (예: 외부에서 데이터 주입)
-							// 예시: this.initialize("초기 ASIS 코드", "초기 TOBE 코드");
-							// 단, initialize는 한 번만 호출되도록 외부 로직을 구성해야 합니다.
 						}
 					})
 				]
@@ -210,16 +207,12 @@ export class IdeDiff extends HTMLElement {
 			parent: this.#tobeEditorEl
 		});
 
-		// ⭐️ 스크롤 동기화는 여기서 설정만 하고, `initialize` 함수 내에서 활성화 시점을 제어합니다.
-		// (이전 단계에서 이미 `initialize`에 활성/비활성화 로직을 추가했다고 가정)
+		// ⭐️ 초기 스크롤 동기화는 여기서 설정만 하고, initialize에서 활성화 제어
 		this.#setupScrollSync();
 	};
 
 	// ⭐️ 스크롤 리스너를 제어할 수 있도록 플래그 및 클래스 메서드 사용
 	#setupScrollSync = () => {
-
-		console.log("setupScrollSync");
-
 		// 기존 리스너가 있다면 제거 (중복 방지 및 disconnectedCallback에서 제거 용이)
 		if (this._asisScrollHandler) { // 핸들러가 이미 할당되어 있다면
 			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
@@ -378,7 +371,7 @@ export class IdeDiff extends HTMLElement {
 			return;
 		}
 
-		// ⭐️ initialize 시작 시 스크롤 동기화 일시 중지
+		// 초기화 시작 시 스크롤 동기화 일시 중지
 		this.#isScrollSyncActive = false;
 
 		let langExtension;
@@ -390,45 +383,52 @@ export class IdeDiff extends HTMLElement {
 				langExtension = javascript();
 		}
 
-		// 먼저 데코레이션 효과를 계산하여 가져옵니다.
+		// 데코레이션 효과는 미리 계산해 둡니다.
 		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
-
-		// asis 에디터의 텍스트 변경 및 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
+		// 1단계: 텍스트 내용 변경과 언어 확장을 먼저 디스패치합니다.
 		this.#asisEditorView.dispatch({
 			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 },
 			effects: [
-				this.#languageCompartment.reconfigure(langExtension),
-				//asisEffect
+				this.#languageCompartment.reconfigure(langExtension)
 			]
 		});
 
-		// tobe 에디터의 텍스트 변경 및 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 		this.#tobeEditorView.dispatch({
 			changes: { from: 0, to: this.#tobeEditorView.state.doc.length, insert: src2 },
 			effects: [
-				this.#languageCompartment.reconfigure(langExtension), // <-- 이 주석을 풀어주세요!
-				//tobeEffect // <-- 이 주석을 풀어주세요!
+				this.#languageCompartment.reconfigure(langExtension)
 			]
 		});
 
-		// ⭐️ 모든 뷰 업데이트가 완료된 후 스크롤 동기화를 다시 활성화
-		// requestAnimationFrame을 사용하여 다음 브라우저 렌더링 사이클에서 실행
+		// 2단계: 텍스트 및 언어 변경이 완전히 적용되고 뷰가 안정화된 후,
+		// 다음 프레임에서 데코레이션 효과만 별도로 디스패치합니다.
 		requestAnimationFrame(() => {
-			this.#isScrollSyncActive = true;
-			// 필요하다면 여기서 초기 스크롤 위치를 0으로 리셋하여 정렬을 보장할 수 있습니다.
-			// this.#asisEditorView.scrollDOM.scrollTop = 0;
-			// this.#tobeEditorView.scrollDOM.scrollTop = 0;
+			this.#asisEditorView.dispatch({
+				effects: [asisEffect]
+			});
+			this.#tobeEditorView.dispatch({
+				effects: [tobeEffect]
+			});
+
+			// 3단계: 데코레이션까지 적용된 후 스크롤 동기화 활성화
+			// (필요하다면 여기도 requestAnimationFrame으로 한 번 더 지연시킬 수 있습니다.)
+			requestAnimationFrame(() => {
+				this.#isScrollSyncActive = true;
+				// 필요하다면 여기서 초기 스크롤 위치를 0으로 리셋하여 정렬을 보장할 수 있습니다.
+				// this.#asisEditorView.scrollDOM.scrollTop = 0;
+				// this.#tobeEditorView.scrollDOM.scrollTop = 0;
+			});
 		});
 	};
 
 	disconnectedCallback() {
 		// 컴포넌트 해제 시 스크롤 리스너 제거
-		if (this._asisScrollHandler) { // 핸들러가 존재하면 제거
+		if (this._asisScrollHandler) {
 			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
 			this.#tobeEditorView.scrollDOM.removeEventListener('scroll', this._tobeScrollHandler);
-			this._asisScrollHandler = null; // 참조 제거
-			this._tobeScrollHandler = null; // 참조 제거
+			this._asisScrollHandler = null;
+			this._tobeScrollHandler = null;
 		}
 		if (this.#asisEditorView) {
 			this.#asisEditorView.destroy();