Qwik

Qwik의 재개 가능성 모델은 JavaScript가 사용자가 상호작용할 때만 지연 실행됨을 의미합니다. 컴포넌트가 보일 때 브라우저에서 반드시 실행되어야 하는 코드는 useVisibleTask$를 사용하세요.

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

설치

npm install @wink/elements

useVisibleTask$로 로드하기

useVisibleTask$는 브라우저 전용으로 즉시 실행되는 Qwik의 라이프사이클 훅입니다. 루트 레이아웃에 배치하세요:

import { component$, useVisibleTask$ } from '@builder.io/qwik';
import { load } from '@wink/elements';

export default component$(() => {
  useVisibleTask$(() => {
    load({ clientId: import.meta.env.PUBLIC_WINK_CLIENT_ID });
  });

  return (
    <main>
      <Slot />
    </main>
  );
});

기본적으로 useVisibleTask$는 컴포넌트가 뷰포트에 보일 때 실행됩니다. 항상 보이는 루트 레이아웃의 경우 페이지 로드 시 즉시 실행되며, 이는 다른 프레임워크의 onMount와 동일합니다.

스크립트를 가능한 한 빨리 로드하려면 { strategy: 'document-ready' }를 전달하세요:

useVisibleTask$({ strategy: 'document-ready' }, () => {
  load({ clientId: import.meta.env.PUBLIC_WINK_CLIENT_ID });
});

페이지에서 사용하기

import { component$ } from '@builder.io/qwik';

export default component$(() => {
  return (
    <main>
      <wink-content-loader layout="HOTEL" id="YOUR_LAYOUT_ID" />
      <wink-lookup />
    </main>
  );
});

TypeScript — JSX 내장 요소 선언하기

Qwik은 자체 JSX 네임스페이스를 사용합니다. 선언 파일에서 확장하세요:

import type {
  WinkContentLoaderAttributes,
  WinkLookupAttributes,
  WinkSearchButtonAttributes,
  WinkAccountButtonAttributes,
  WinkItineraryButtonAttributes,
  WinkShoppingCartButtonAttributes,
  WinkAppLoaderAttributes,
} from '@wink/elements';

declare module '@builder.io/qwik' {
  namespace JSX {
    interface IntrinsicElements {
      'wink-content-loader': WinkContentLoaderAttributes;
      'wink-lookup': WinkLookupAttributes;
      'wink-search-button': WinkSearchButtonAttributes;
      'wink-account-button': WinkAccountButtonAttributes;
      'wink-itinerary-button': WinkItineraryButtonAttributes;
      'wink-shopping-cart-button': WinkShoppingCartButtonAttributes;
      'wink-app-loader': WinkAppLoaderAttributes;
    }
  }
}

환경 변수

Qwik(Vite 기반)은 PUBLIC_ 접두사가 붙은 변수를 브라우저에 노출합니다:

PUBLIC_WINK_CLIENT_ID=your-client-id