Svelte / SvelteKit

Svelte는 가상 DOM 계층 없이 속성을 직접 DOM에 전달하므로 커스텀 엘리먼트와 자연스럽게 어울립니다. SvelteKit(SSR)의 경우 onMount 내에서 CDN을 로드하거나 browser 체크로 보호하세요.

@wink/elements npm 패키지 TypeScript 타입과 함께 CDN 번들을 설치하고 로드하세요.

설치

npm install @wink/elements

SvelteKit — 루트 레이아웃

src/routes/+layout.ts

import { browser } from '$app/environment';
import { load as loadWink } from '@wink/elements';

export function load() {
  if (browser) {
    loadWink({ clientId: import.meta.env.PUBLIC_WINK_CLIENT_ID });
  }
}

또는 +layout.svelte의 onMount 내에서 로드하세요:

src/routes/+layout.svelte

<script>
  import { onMount } from 'svelte';
  import { load } from '@wink/elements';

  onMount(() => {
    load({ clientId: import.meta.env.PUBLIC_WINK_CLIENT_ID });
  });
</script>

<slot />

컴포넌트에서 사용하기

Svelte는 모든 알 수 없는 속성을 DOM에 직접 전달하므로 추가 설정이 필요 없습니다:

<script>
  export let layoutId = 'YOUR_LAYOUT_ID';
</script>

<main>
  <wink-content-loader layout="HOTEL" id={layoutId} />
  <wink-lookup />
</main>

Svelte 5 (runes 문법)

<script lang="ts">
  import { onMount } from 'svelte';
  import { load } from '@wink/elements';

  let { layoutId }: { layoutId: string } = $props();

  onMount(() => {
    load({ clientId: import.meta.env.PUBLIC_WINK_CLIENT_ID });
  });
</script>

<wink-content-loader layout="HOTEL" id={layoutId} />

환경 변수

SvelteKit은 PUBLIC_ 접두사가 붙은 변수만 브라우저에 노출합니다:

.env

PUBLIC_WINK_CLIENT_ID=your-client-id

SSR 렌더링

서버 사이드 렌더링 중에는 <wink-*> 엘리먼트를 절대 렌더링하지 마세요 — 커스텀 엘리먼트는 브라우저의 customElements 레지스트리에 등록되며 서버에는 존재하지 않습니다. {#if browser}로 감싸거나 onMount 내에서만 load()를 호출하세요.

<script>
  import { browser } from '$app/environment';
</script>

{#if browser}
  <wink-content-loader layout="HOTEL" id="YOUR_LAYOUT_ID" />
{/if}

순수 Svelte (Vite, SvelteKit 미사용)

src/App.svelte

<script>
  import { onMount } from 'svelte';
  import { load } from '@wink/elements';

  onMount(() => {
    load({ clientId: import.meta.env.VITE_WINK_CLIENT_ID });
  });
</script>

<wink-content-loader layout="HOTEL" id="YOUR_LAYOUT_ID" />

추가 자료

• 웹 컴포넌트 참고 자료
• @wink/elements npm 패키지