@jogak/ui 0.1.0-alpha.12 → 0.1.0-alpha.14.1

package/dist/lib/adapter-for.d.ts

@@ -0,0 +1,17 @@
+import { JogakAdapter } from '@jogak/core';
+/** RegistryEntryMeta.framework가 받을 수 있는 모든 값 (JogakAdapter.framework와 동일). */
+export type FrameworkKey = 'react' | 'next' | 'web-components' | 'vue' | 'svelte';
+/**
+ * framework 이름으로 어댑터를 가져온다. 첫 호출은 dynamic import, 이후는 캐시 반환.
+ *
+ * 동시에 같은 framework로 호출되는 경우(예: 여러 effect가 동시에 await)에도 단 한 번만
+ * import가 일어나도록 inflight Promise를 공유한다.
+ */
+export declare function adapterFor(framework: string): Promise<JogakAdapter>;
+/**
+ * @internal test-only. 어댑터 캐시를 초기화한다.
+ *
+ * cache hit/miss 테스트, framework lookup 격리 테스트에 사용. 프로덕션 코드에서는
+ * 호출하지 말 것 — dynamic import의 비용이 발생한다.
+ */
+export declare function __resetAdapterCacheForTesting(): void;

package/package.json

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

package/src/app/preview-frame.tsx

@@ -1,5 +1,6 @@
 /**
  * 알파.9: standalone-adapter 또는 fallback 시 사용되는 same-origin iframe entry.
+ * 알파.14.1: entry.meta.framework 기반 adapter dispatch (react/vue/svelte/wc 지원).
  *
  * `IframeMount`는 알파.9에서 postMessage 프로토콜로 통일됐다 (cross-origin 어댑터와 동일).
  * preview-frame.tsx도 같은 프로토콜을 따라야 한다 — 부모는 `jogak:setProps` 메시지를,
@@ -8,8 +9,9 @@
  * jogak host vite scope에서 동작하므로 `virtual:jogak` (registry metas + entry loader)와
  * `virtual:jogak/global-css` (사용자 globalCss) 가상 모듈을 그대로 사용한다.
  */
-import { reactAdapter } from '@jogak/core/renderers/react'
+import type { JogakAdapter } from '@jogak/core'
 import { defaultRegistry } from '@jogak/core'
+import { adapterFor } from '../lib/adapter-for.js'
 import 'virtual:jogak'
 import 'virtual:jogak/global-css'
 
@@ -17,23 +19,38 @@ const rootEl = document.getElementById('jogak-preview-root')
 if (rootEl === null) throw new Error('#jogak-preview-root not found')
 
 let currentContainer: HTMLDivElement | null = null
+let currentAdapter: JogakAdapter | null = null
 
 async function renderEntry(
   entryId: string,
   args: Readonly<Record<string, unknown>>,
 ): Promise<void> {
   const entry = await defaultRegistry.requestEntry(entryId)
+  const framework = entry.meta.framework ?? 'react'
+  const nextAdapter = await adapterFor(framework)
+
   if (currentContainer === null) {
     currentContainer = document.createElement('div')
     rootEl?.replaceChildren(currentContainer)
   }
-  reactAdapter.render(entry, args, currentContainer)
+  // entry framework가 바뀐 경우 이전 어댑터로 unmount 후 새 어댑터로 mount.
+  if (currentAdapter !== null && currentAdapter !== nextAdapter) {
+    currentAdapter.unmount(currentContainer)
+    // container 자체는 재사용 가능하지만 이전 어댑터가 남긴 root/component 상태가
+    // 섞이지 않도록 새 div로 교체.
+    const fresh = document.createElement('div')
+    rootEl?.replaceChildren(fresh)
+    currentContainer = fresh
+  }
+  currentAdapter = nextAdapter
+  await nextAdapter.render(entry, args, currentContainer)
 }
 
 function unmount(): void {
-  if (currentContainer !== null) {
-    reactAdapter.unmount(currentContainer)
+  if (currentContainer !== null && currentAdapter !== null) {
+    currentAdapter.unmount(currentContainer)
     currentContainer = null
+    currentAdapter = null
   }
 }
 

package/src/components/Preview/format-usage.ts

@@ -60,10 +60,13 @@ export function formatUsageCode(
 }
 
 function resolveComponentName(entry: RegistryEntry): string {
+  // 알파.14.1: iframe isolation 모드는 chrome scope에 component를 import하지 않으므로
+  // entry.meta.component가 `null`. fallback (title 마지막 segment)으로 직행한다.
   const component = entry.meta.component as
     | { displayName?: unknown; name?: unknown }
+    | null
     | undefined
-  if (component !== undefined) {
+  if (component !== null && component !== undefined) {
     if (typeof component.displayName === 'string' && component.displayName.length > 0) {
       return component.displayName
     }

package/src/components/Preview/index.tsx

@@ -3,9 +3,10 @@ import type { ReactElement, CSSProperties } from 'react'
 import clsx from 'clsx'
 import { Highlight, themes } from 'prism-react-renderer'
 import type { PrismTheme } from 'prism-react-renderer'
-import { reactAdapter, useEntry } from '@jogak/core/renderers/react'
+import { useEntry } from '@jogak/core/renderers/react'
 import type { UseEntryState } from '@jogak/core/renderers/react'
-import type { RegistryEntry, RegistryEntryMeta, ArgType } from '@jogak/core'
+import type { JogakAdapter, RegistryEntry, RegistryEntryMeta, ArgType } from '@jogak/core'
+import { adapterFor } from '../../lib/adapter-for.js'
 import { Controls } from '../Controls/index.js'
 import { Actions } from '../Actions/index.js'
 import { ShadowMount } from './ShadowMount.js'
@@ -134,7 +135,11 @@ export function Preview({
   userPreviewUrl = '',
   previewEntryPath = '/__jogak_preview__/index.html',
 }: PreviewProps): ReactElement {
-  const state = useEntry(entryId)
+  // 알파.14.1: iframe isolation 모드에서는 chrome 측에 component 모듈을 import하지 않는다
+  // (chrome vite scope에 .vue/.svelte가 들어오면 plugin-vue/svelte 부재로 transform 실패).
+  // skipHydrate=true → useEntry가 synthetic entry(component=null)로 ready를 노출하고,
+  // 실제 마운트는 IframeMount가 사용자 vite scope의 iframe entry에 위임한다.
+  const state = useEntry(entryId, { skipHydrate: previewIsolation === 'iframe' })
   const [viewport, setViewport] = useState<ViewportKey>('desktop')
   const [bgMode, setBgMode] = useState<BgMode>('white')
   const [bottomTab, setBottomTab] = useState<'controls' | 'actions'>('controls')
@@ -636,23 +641,50 @@ function PreviewMount({ entry, args, previewIsolation, userPreviewUrl, previewEn
 
 function NoneAdapterContent({ entry, args }: { entry: RegistryEntry; args: Readonly<Record<string, unknown>> }): ReactElement {
   const containerRef = useRef<HTMLDivElement>(null)
+  const adapterRef = useRef<JogakAdapter | null>(null)
 
+  // 알파.14.1: entry.meta.framework로 dispatch. async 적응을 위해 effect 내에서
+  // await adapterFor → 캡처된 adapter로 render. unmount는 같은 adapter ref 사용.
   useEffect(() => {
     const container = containerRef.current
     if (container === null) return
-    reactAdapter.render(entry, args, container)
+    let cancelled = false
+
+    const framework = entry.meta.framework ?? 'react'
+    void adapterFor(framework).then((adapter) => {
+      if (cancelled) return
+      adapterRef.current = adapter
+      void adapter.render(entry, args, container)
+    })
+
     return () => {
+      cancelled = true
+      const adapter = adapterRef.current
+      if (adapter === null) return
       // 알파.7.1: React 18 concurrent unmount race(`Attempted to synchronously unmount...`)
       // 회피 — fiber commit 끝난 직후로 defer.
-      queueMicrotask(() => { reactAdapter.unmount(container) })
+      queueMicrotask(() => { adapter.unmount(container) })
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [entry])
 
+  // args 갱신용 effect — adapter가 이미 캐시돼 있으면 동기 분기를 탄다.
   useEffect(() => {
     const container = containerRef.current
     if (container === null) return
-    reactAdapter.render(entry, args, container)
+    let cancelled = false
+    const adapter = adapterRef.current
+    if (adapter !== null) {
+      void adapter.render(entry, args, container)
+      return
+    }
+    const framework = entry.meta.framework ?? 'react'
+    void adapterFor(framework).then((resolved) => {
+      if (cancelled) return
+      adapterRef.current = resolved
+      void resolved.render(entry, args, container)
+    })
+    return () => { cancelled = true }
   }, [entry, args])
 
   return (
@@ -665,19 +697,31 @@ function NoneAdapterContent({ entry, args }: { entry: RegistryEntry; args: Reado
 }
 
 /**
- * Shadow 모드 — ShadowMount의 ShadowRoot 안에서 react-adapter.render를 호출하는
+ * Shadow 모드 — ShadowMount의 ShadowRoot 안에서 adapter.render를 호출하는
  * 작은 wrapper. ShadowMount 안 portal 내부에 위치하므로 useRef는 ShadowRoot scope.
  */
 function ShadowAdapterContent({ entry, args }: { entry: RegistryEntry; args: Readonly<Record<string, unknown>> }): ReactElement {
   const ref = useRef<HTMLDivElement>(null)
+  const adapterRef = useRef<JogakAdapter | null>(null)
 
   useEffect(() => {
     const c = ref.current
     if (c === null) return
-    reactAdapter.render(entry, args, c)
+    let cancelled = false
+
+    const framework = entry.meta.framework ?? 'react'
+    void adapterFor(framework).then((adapter) => {
+      if (cancelled) return
+      adapterRef.current = adapter
+      void adapter.render(entry, args, c)
+    })
+
     return () => {
+      cancelled = true
+      const adapter = adapterRef.current
+      if (adapter === null) return
       // 알파.7.1: unmount race 회피
-      queueMicrotask(() => { reactAdapter.unmount(c) })
+      queueMicrotask(() => { adapter.unmount(c) })
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [entry])
@@ -685,7 +729,19 @@ function ShadowAdapterContent({ entry, args }: { entry: RegistryEntry; args: Rea
   useEffect(() => {
     const c = ref.current
     if (c === null) return
-    reactAdapter.render(entry, args, c)
+    let cancelled = false
+    const adapter = adapterRef.current
+    if (adapter !== null) {
+      void adapter.render(entry, args, c)
+      return
+    }
+    const framework = entry.meta.framework ?? 'react'
+    void adapterFor(framework).then((resolved) => {
+      if (cancelled) return
+      adapterRef.current = resolved
+      void resolved.render(entry, args, c)
+    })
+    return () => { cancelled = true }
   }, [entry, args])
 
   return <div ref={ref} data-testid="preview-content-shadow" />