Svelte / SvelteKit

Svelte 直接將屬性傳遞到 DOM，沒有虛擬 DOM 層，使自訂元素成為自然的選擇。對於 SvelteKit（SSR），請在 onMount 中載入 CDN，或使用 browser 判斷保護。

@wink/elements npm package 安裝並載入帶有 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" />

延伸閱讀

• Web Components 參考
• @wink/elements npm package