@jogak/ui 0.1.0-alpha.7 → 0.1.0-alpha.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jogak/ui",
-  "version": "0.1.0-alpha.7",
+  "version": "0.1.0-alpha.7.1",
   "description": "Showcase viewer UI for Jogak — Sidebar / Preview / Controls / Actions and the JogakApp shell.",
   "keywords": [
     "jogak",
@@ -65,8 +65,8 @@
     "prism-react-renderer": "^2.4.1",
     "tailwindcss": "^4.0.0",
     "@tailwindcss/vite": "^4.0.0",
-    "@jogak/core": "0.1.0-alpha.7",
-    "@jogak/react": "0.1.0-alpha.7"
+    "@jogak/core": "0.1.0-alpha.7.1",
+    "@jogak/react": "0.1.0-alpha.7.1"
   },
   "devDependencies": {
     "@types/node": "^20.14.0",

package/src/app/App.tsx

@@ -52,7 +52,7 @@ export function JogakApp({
   entries,
   metas,
   codeTheme = 'vsDark',
-  previewIsolation = 'none',
+  previewIsolation = 'shadow',
 }: JogakAppProps = {}): ReactElement {
   // ── 4가지 모드 결정 (계약 §5.2) ─────────────────────────────────────
   // 1) entries가 주어지면: 새 ComponentRegistry에 register (eager, 기존 동작)

package/src/app/main.tsx

@@ -3,14 +3,18 @@ import { createRoot } from 'react-dom/client'
 import 'virtual:jogak'
 import { _jogakCodeTheme, _jogakPreviewIsolation } from 'virtual:jogak'
 import '../styles/jogak.css'
-// 알파.6: 사용자 globalCss opt-in.
-// JogakPluginOptions.globalCss=false (default) → 빈 모듈 (no-op, SPA 번들 영향 zero).
-// true / string / string[] → plugin이 사용자 css를 import한다.
-// jogak.css 뒤에 둬서 사용자가 jogak chrome 기본값을 명시적으로 override 가능 —
-// 단, jogak utility는 prefix=jogak로 격리되어 사용자 utility와 충돌하지 않는다.
-import 'virtual:jogak/global-css'
 import { JogakApp } from './App.js'
 
+// 알파.7.1: 사용자 globalCss는 isolation === 'none'일 때만 outer document에 inject.
+// - 'shadow'/'iframe' 모드에서는 ShadowMount/preview-frame.tsx가 자기 scope에서
+//   사용자 css를 자체 import하므로 outer document inject가 불필요하고, 오히려
+//   chrome을 침범한다 (알파.7 결함).
+// - top-level await로 가드 — Vite는 string literal specifier의 dynamic import를
+//   정적 분석하여 별도 chunk + css HMR 표준 경로로 처리한다.
+if (_jogakPreviewIsolation === 'none') {
+  await import('virtual:jogak/global-css')
+}
+
 const rootEl = document.getElementById('root')
 if (rootEl === null) throw new Error('#root element not found')
 

package/src/components/Preview/IframeMount.tsx

@@ -58,8 +58,10 @@ export function IframeMount({
     iframe.addEventListener('load', handleLoad)
     return () => {
       iframe.removeEventListener('load', handleLoad)
-      // unmount 시 iframe 안 react root도 정리 (best-effort)
-      iframe.contentWindow?.__jogak_unmount__?.()
+      // 알파.7.1: unmount race 회피 — iframe contentWindow 정리도 microtask defer.
+      queueMicrotask(() => {
+        iframe.contentWindow?.__jogak_unmount__?.()
+      })
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])

package/src/components/Preview/ShadowMount.tsx

@@ -6,26 +6,25 @@ export interface ShadowMountProps {
   readonly children: ReactNode
   readonly className?: string
   readonly style?: CSSProperties
-  /** 외부 테스트 hook (호스트 div에 부여). */
   readonly 'data-testid'?: string
 }
 
 /**
- * 알파.7: previewIsolation='shadow' 모드의 mount 컴포넌트.
+ * 알파.7.1: previewIsolation='shadow' 모드의 mount 컴포넌트.
  *
- * 역할:
- * - 호스트 `<div>`에 `attachShadow({ mode: 'open' })`로 ShadowRoot를 부착.
- * - `createPortal`로 children을 ShadowRoot에 렌더 (React tree 유지).
- * - 외부 document의 모든 `<style>` / cross-origin 가능 stylesheet를
- *   `adoptedStyleSheets`로 ShadowRoot에 share (jogak.css + virtual:jogak/global-css
- *   둘 다 자동 포함).
- * - Vite dev에서 `<style>` HMR 시 MutationObserver로 ShadowRoot도 갱신.
+ * 책임: 양방향 격리만 제공 (Preview ↔ outer document 양방향 cascade 차단).
+ * - 사용자 globalCss는 main.tsx 가드로 outer document에 inject되지 않음.
+ * - shadow root 안에는 jogak chrome css도 사용자 css도 없음 (둘 다 외부에서 격리).
+ * - 사용자 컴포넌트의 utility class 컴파일은 결함 B (알파.8 사이클).
  *
- * Radix portal 한계 (사용자 인지 필요):
- * - 사용자 컴포넌트가 `Dialog.Portal` / `Popover.Portal` 등을 default로 쓰면
- *   portal target은 `document.body` — ShadowRoot 외부. utility class는 외부
- *   document에 정의되어 적용됨, 단 z-index/focus/event boundary가 분리될 수 있음.
- * - 회피: 사용자가 명시적으로 `<Portal container={shadowRootEl}>`을 전달.
+ * 알파.7 결함 정정:
+ * - `syncStyleSheets`/`MutationObserver`/`adoptedStyleSheets` 흡수 로직 제거.
+ *   알파.7은 outer document에 사용자 css가 있는 한 chrome을 침범했고, shadow
+ *   안의 흡수 로직은 의미가 없었음. 알파.7.1: outer에 사용자 css 자체가 없음.
+ *
+ * Radix portal 한계 (사용자 인지 필요, README 명시):
+ * - default Portal target = document.body (shadow 외부). 사용자가 명시적으로
+ *   `<Portal container={shadowRootEl}>`을 전달해야 portal 내용도 격리됨.
  */
 export function ShadowMount({
   children,
@@ -39,16 +38,9 @@ export function ShadowMount({
   useEffect(() => {
     const host = hostRef.current
     if (host === null) return
-    let sr: ShadowRoot
-    if (host.shadowRoot !== null) {
-      sr = host.shadowRoot
-    } else {
-      sr = host.attachShadow({ mode: 'open' })
-    }
+    const sr = host.shadowRoot ?? host.attachShadow({ mode: 'open' })
     setShadowRoot(sr)
-    syncStyleSheets(sr)
-    const observer = observeDocumentStyles(sr)
-    return () => { observer.disconnect() }
+    // shadow root는 host element와 함께 GC — 명시 detach 불필요.
   }, [])
 
   return (
@@ -63,39 +55,3 @@ export function ShadowMount({
     </div>
   )
 }
-
-/**
- * 외부 document의 모든 stylesheet를 ShadowRoot에 share한다.
- *
- * - `adoptedStyleSheets` API를 사용 (Chromium/Safari/Firefox 모던 브라우저 지원).
- * - cross-origin sheet는 `cssRules` 접근 시 SecurityError → catch 후 skip.
- * - Vite dev의 `<style>` HMR이 자주 발생할 수 있어 `replaceSync`를 통한 새
- *   `CSSStyleSheet` 인스턴스 생성으로 처리.
- */
-function syncStyleSheets(shadowRoot: ShadowRoot): void {
-  const sheets: CSSStyleSheet[] = []
-  for (const sheet of Array.from(document.styleSheets)) {
-    try {
-      const rules = sheet.cssRules
-      const cs = new CSSStyleSheet()
-      const cssText = Array.from(rules).map((r) => r.cssText).join('\n')
-      cs.replaceSync(cssText)
-      sheets.push(cs)
-    } catch {
-      // cross-origin sheet — skip
-    }
-  }
-  shadowRoot.adoptedStyleSheets = sheets
-}
-
-/**
- * document.head의 변화(`<style>` HMR add/remove)를 관찰해 ShadowRoot의
- * adoptedStyleSheets를 다시 sync.
- */
-function observeDocumentStyles(shadowRoot: ShadowRoot): MutationObserver {
-  const observer = new MutationObserver(() => {
-    syncStyleSheets(shadowRoot)
-  })
-  observer.observe(document.head, { childList: true, subtree: true })
-  return observer
-}

package/src/components/Preview/index.tsx

@@ -120,7 +120,7 @@ export function Preview({
   onReset,
   codeTheme,
   onResolveJogak,
-  previewIsolation = 'none',
+  previewIsolation = 'shadow',
 }: PreviewProps): ReactElement {
   const state = useEntry(entryId)
   const [viewport, setViewport] = useState<ViewportKey>('desktop')
@@ -615,7 +615,11 @@ function NoneAdapterContent({ entry, args }: { entry: RegistryEntry; args: Reado
     const container = containerRef.current
     if (container === null) return
     reactAdapter.render(entry, args, container)
-    return () => { reactAdapter.unmount(container) }
+    return () => {
+      // 알파.7.1: React 18 concurrent unmount race(`Attempted to synchronously unmount...`)
+      // 회피 — fiber commit 끝난 직후로 defer.
+      queueMicrotask(() => { reactAdapter.unmount(container) })
+    }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [entry])
 
@@ -645,7 +649,10 @@ function ShadowAdapterContent({ entry, args }: { entry: RegistryEntry; args: Rea
     const c = ref.current
     if (c === null) return
     reactAdapter.render(entry, args, c)
-    return () => { reactAdapter.unmount(c) }
+    return () => {
+      // 알파.7.1: unmount race 회피
+      queueMicrotask(() => { reactAdapter.unmount(c) })
+    }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [entry])