Svelte / SvelteKit

Direktang ipinapasa ng Svelte ang mga attributes sa DOM nang walang virtual DOM layer, kaya’t natural na bagay ang mga custom elements. Para sa SvelteKit (SSR), i-load ang CDN sa loob ng onMount o i-guard gamit ang browser check.

@wink/elements npm package I-install at i-load ang CDN bundle na may TypeScript types.

Install

npm install @wink/elements

SvelteKit — root layout

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 });
  }
}

Bilang alternatibo, i-load sa loob ng onMount sa +layout.svelte:

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 />

Gamitin sa mga components

Direktang ipinapasa ng Svelte ang lahat ng hindi kilalang attributes sa DOM, kaya hindi na kailangan ng karagdagang configuration:

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

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

Svelte 5 (runes syntax)

<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} />

Environment variables

Ipinapakita ng SvelteKit ang mga variable na may prefix na PUBLIC_ lamang sa browser:

.env

PUBLIC_WINK_CLIENT_ID=your-client-id

SSR rendering

Huwag kailanman i-render ang <wink-*> elements habang nagsasagawa ng server-side rendering — ang mga custom elements ay nare-register sa browser’s customElements registry na wala sa server. Balutin sa {#if browser} o tawagin ang load() lamang sa loob ng onMount.

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

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

Bare Svelte (Vite, walang 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" />

Karagdagang babasahin

• Web Components reference
• @wink/elements npm package