@ait-co/devtools 0.1.9 → 0.1.11

package/README.md

@@ -1,5 +1,7 @@
 # @ait-co/devtools
 
+![@ait-co/devtools — SDK mock + DevTools panel for Apps In Toss mini-apps](./assets/og/image.png)
+
 `@apps-in-toss/web-framework` SDK의 mock 라이브러리입니다. `@apps-in-toss/web-bridge`, `@apps-in-toss/web-analytics` import도 함께 mock됩니다.
 
 앱인토스(Apps in Toss) 미니앱을 **일반 브라우저**에서 개발하고 테스트할 수 있게 해줍니다. 토스 앱 없이도 SDK의 모든 기능을 시뮬레이션하여 빠른 개발 사이클을 지원합니다.
@@ -10,6 +12,8 @@
 - **Floating DevTools Panel** — 브라우저에서 SDK 상태를 실시간으로 제어 (10개 탭, mock state preset library 포함)
 - **모든 번들러 지원** — [unplugin](https://github.com/unjs/unplugin) 기반 Vite, Webpack, Rspack, esbuild, Rollup 통합
 
+라이브 데모: <https://devtools.aitc.dev/> (이 repo의 `e2e/fixture/`를 GitHub Pages에 그대로 배포한 self-contained 데모).
+
 ## Reference consumer
 
 [`sdk-example`](https://github.com/apps-in-toss-community/sdk-example)이 devtools의 reference consumer다. 모든 SDK API를 인터랙티브하게 실행해볼 수 있는 카탈로그 앱으로, 웹 데모는 <https://sdk-example.aitc.dev/>에서 바로 확인할 수 있다. 새 mock을 추가하면 sdk-example의 카드에서 그대로 동작하는 게 1차 sanity check. 단, 이 repo의 E2E suite는 sdk-example을 clone하지 않고 **내부 자기완결 fixture(`e2e/fixture/`)** 로 운영한다 — sdk-example이 깨져도 devtools CI는 영향받지 않는다.
@@ -298,6 +302,22 @@ saveUserPreset('My QA scenario', {
 });
 ```
 
+### Panel mount / dispose
+
+`@ait-co/devtools/panel`을 import하면 DOM ready 시 자동으로 마운트됩니다. 마운트는 idempotent — 같은 페이지에 여러 번 import되거나 `mount()`를 다시 불러도 토글 버튼은 하나만 떠 있습니다.
+
+HMR이나 SPA 라우팅에서 패널을 명시적으로 떼어내야 하는 경우 `disposePanel()`을 사용하세요:
+
+```ts
+import { disposePanel, mount } from '@ait-co/devtools/panel';
+
+disposePanel();  // 토글 / 패널 / inject된 <style> / 모든 listener 제거.
+                  // 호출 전이거나 두 번 호출해도 안전.
+mount();          // 깨끗한 상태로 다시 마운트. 중복 <style>·listener 없음.
+```
+
+내부에서 `disposeViewport()`도 함께 호출하므로 viewport 시뮬레이션도 함께 원복됩니다.
+
 ## Device simulation (Viewport 탭)
 
 데스크탑 브라우저에서 모바일 미니앱을 개발할 때, 실제 디바이스 해상도/safe area/노치/홈 인디케이터/앱인토스 nav bar를 반영해 레이아웃을 검증할 수 있습니다.

package/dist/panel/index.d.ts

@@ -6,6 +6,15 @@
  * 외부 의존성 없이 vanilla DOM으로 구현.
  */
 declare function mount(): void;
+/**
+ * Pairs with `mount()` (and the existing `disposeViewport()`).
+ * Idempotent — safe to call before mount or twice in a row.
+ *
+ * Removes panel DOM (toggle + panel root), the injected `<style>`, all
+ * window/aitState listeners, and resets module-level state. After dispose,
+ * `mount()` can be called again to re-mount cleanly.
+ */
+declare function disposePanel(): void;
 //#endregion
-export { mount };
+export { disposePanel, mount };
 //# sourceMappingURL=index.d.ts.map

package/dist/panel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/panel/index.ts"],"mappings":";;;;;;;iBAyNS,KAAA,CAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/panel/index.ts"],"mappings":";;;;;;;iBAoNS,KAAA,CAAA;;;;;;;;;iBAkJA,YAAA,CAAA"}

package/dist/panel/index.js

@@ -2566,6 +2566,23 @@ function renderHomeIndicator() {
 	document.body.appendChild(el);
 }
 /**
+* 모든 viewport DOM mutation을 원복하고 aitState 구독도 해제한다.
+* 외부 consumer가 패널을 동적으로 제거할 때 호출. 호출 후에는 aitState 변경이
+* DOM에 반영되지 않으므로 안전하게 panel을 떼어낼 수 있다.
+*/
+function disposeViewport() {
+	if (typeof document === "undefined") return;
+	if (viewportUnsubscribe) viewportUnsubscribe();
+	const html = document.documentElement;
+	html.classList.remove("ait-viewport-active");
+	html.classList.remove("ait-viewport-framed");
+	removeById(STYLE_ELEMENT_ID);
+	removeNotchElement();
+	removeHomeIndicator();
+	removeNavBarElement();
+	bodyScrollHintEmitted = false;
+}
+/**
 * DOM에 뷰포트 제약을 적용한다.
 * - `html.ait-viewport-active` 클래스로 정적 CSS(styles.ts) 활성화
 * - body의 width/height는 preset 값으로, navbar top offset은 safeAreaTop으로 인라인 주입
@@ -3041,6 +3058,11 @@ let isOpen = false;
 let panelEl = null;
 let bodyEl = null;
 let tabsEl = null;
+let toggleEl = null;
+let injectedStyle = null;
+let panelSwitchTabHandler = null;
+let resizeHandler = null;
+let aitStateUnsubscribe = null;
 let tabRenderers = null;
 function refreshPanel() {
 	if (!bodyEl || !tabsEl) return;
@@ -3056,26 +3078,19 @@ function refreshPanel() {
 		el.classList.toggle("active", el.getAttribute("data-tab") === currentTab);
 	});
 }
-if (typeof window !== "undefined") window.addEventListener("__ait:panel-switch-tab", (e) => {
-	currentTab = e.detail.tab;
-	if (panelEl && !panelEl.classList.contains("open")) {
-		isOpen = true;
-		panelEl.classList.add("open");
-	}
-	refreshPanel();
-});
 function mount() {
 	if (typeof document === "undefined") return;
 	if (document.querySelector(".ait-panel-toggle")) return;
 	setDeviceRefreshPanel(refreshPanel);
 	initViewport();
-	const style = document.createElement("style");
-	style.textContent = PANEL_STYLES;
-	document.head.appendChild(style);
+	injectedStyle = document.createElement("style");
+	injectedStyle.textContent = PANEL_STYLES;
+	document.head.appendChild(injectedStyle);
 	const toggle = h("button", {
 		className: "ait-panel-toggle",
 		title: "AIT DevTools"
 	}, "AIT");
+	toggleEl = toggle;
 	restoreButtonPosition(toggle);
 	panelEl = h("div", { className: "ait-panel" });
 	const closeBtn = h("button", {
@@ -3096,7 +3111,7 @@ function mount() {
 		mockBadge.textContent = aitState.state.panelEditable ? "EDIT" : "READ-ONLY";
 		refreshPanel();
 	});
-	const headerRight = h("span", { style: "display:flex;align-items:center;gap:6px" }, mockBadge, h("span", { style: "font-size:11px;color:#666;font-weight:400" }, `v0.1.9`), closeBtn);
+	const headerRight = h("span", { style: "display:flex;align-items:center;gap:6px" }, mockBadge, h("span", { style: "font-size:11px;color:#666;font-weight:400" }, `v0.1.11`), closeBtn);
 	const header = h("div", { className: "ait-panel-header" }, h("span", {}, "AIT DevTools"), headerRight);
 	tabsEl = h("div", { className: "ait-panel-tabs" });
 	for (const tab of TABS) {
@@ -3124,7 +3139,7 @@ function mount() {
 		}
 	});
 	let resizeRaf = 0;
-	window.addEventListener("resize", () => {
+	resizeHandler = () => {
 		if (resizeRaf) return;
 		resizeRaf = requestAnimationFrame(() => {
 			resizeRaf = 0;
@@ -3132,16 +3147,56 @@ function mount() {
 			saveButtonPosition(toggle);
 			if (isOpen) updatePanelPosition(toggle);
 		});
-	});
-	aitState.subscribe(() => {
+	};
+	window.addEventListener("resize", resizeHandler);
+	aitStateUnsubscribe = aitState.subscribe(() => {
 		try {
 			if (isOpen && (currentTab === "analytics" || currentTab === "storage" || currentTab === "device" || currentTab === "viewport" || currentTab === "iap" || currentTab === "ads" || currentTab === "presets")) refreshPanel();
 		} catch (err) {
 			console.error("[@ait-co/devtools] Error in subscribe callback:", err);
 		}
 	});
+	panelSwitchTabHandler = (e) => {
+		currentTab = e.detail.tab;
+		if (panelEl && !panelEl.classList.contains("open")) {
+			isOpen = true;
+			panelEl.classList.add("open");
+		}
+		refreshPanel();
+	};
+	window.addEventListener("__ait:panel-switch-tab", panelSwitchTabHandler);
 	refreshPanel();
 }
+/**
+* Pairs with `mount()` (and the existing `disposeViewport()`).
+* Idempotent — safe to call before mount or twice in a row.
+*
+* Removes panel DOM (toggle + panel root), the injected `<style>`, all
+* window/aitState listeners, and resets module-level state. After dispose,
+* `mount()` can be called again to re-mount cleanly.
+*/
+function disposePanel() {
+	if (typeof document === "undefined") return;
+	if (panelSwitchTabHandler && typeof window !== "undefined") window.removeEventListener("__ait:panel-switch-tab", panelSwitchTabHandler);
+	if (resizeHandler && typeof window !== "undefined") window.removeEventListener("resize", resizeHandler);
+	if (aitStateUnsubscribe) aitStateUnsubscribe();
+	toggleEl?.remove();
+	panelEl?.remove();
+	injectedStyle?.remove();
+	disposeViewport();
+	setDeviceRefreshPanel(() => {});
+	panelSwitchTabHandler = null;
+	resizeHandler = null;
+	aitStateUnsubscribe = null;
+	toggleEl = null;
+	panelEl = null;
+	bodyEl = null;
+	tabsEl = null;
+	injectedStyle = null;
+	tabRenderers = null;
+	currentTab = "env";
+	isOpen = false;
+}
 if (typeof document !== "undefined") {
 	const safeMount = () => {
 		try {
@@ -3154,6 +3209,6 @@ if (typeof document !== "undefined") {
 	else safeMount();
 }
 //#endregion
-export { mount };
+export { disposePanel, mount };
 
 //# sourceMappingURL=index.js.map