Tovább a tartalomhoz

Preact

A Preact API kompatibilis a Reacttel. Az integráció ugyanazt a mintát követi — hívd meg egyszer a load()-ot az alkalmazás indításakor, majd használd a <wink-*> tageket JSX-ben.

@wink/elements npm package Telepítsd és töltsd be a CDN csomagot TypeScript típusokkal.

Telepítés

npm install @wink/elements

Egyszeri betöltés az alkalmazás indításakor

import { useEffect } from 'preact/hooks';
import { load } from '@wink/elements';

export function App() {
  useEffect(() => {
    load({ clientId: import.meta.env.VITE_WINK_CLIENT_ID });
  }, []);

  return <YourRoutes />;
}

Használat JSX-ben

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

TypeScript — JSX intrinsics deklarálása

A Preact JSX névtere különálló a Reactétől. Egészítsd ki a preact/src/jsx.d.ts fájlt:

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

declare module 'preact' {
  namespace JSX {
    interface IntrinsicElements {
      'wink-content-loader': WinkContentLoaderAttributes & preact.JSX.HTMLAttributes<HTMLElement>;
      'wink-lookup': WinkLookupAttributes & preact.JSX.HTMLAttributes<HTMLElement>;
      'wink-search-button': WinkSearchButtonAttributes & preact.JSX.HTMLAttributes<HTMLElement>;
      'wink-account-button': WinkAccountButtonAttributes & preact.JSX.HTMLAttributes<HTMLElement>;
      'wink-itinerary-button': WinkItineraryButtonAttributes & preact.JSX.HTMLAttributes<HTMLElement>;
      'wink-shopping-cart-button': WinkShoppingCartButtonAttributes & preact.JSX.HTMLAttributes<HTMLElement>;
      'wink-app-loader': WinkAppLoaderAttributes & preact.JSX.HTMLAttributes<HTMLElement>;
    }
  }
}

Preact a `preact/compat` használatával

Ha a Reactet a preact/compat-re aliasolod, akkor a React JSX deklarációkat használd helyette:

// Használd a React JSX deklarációt az /integrations/react-ből
// — a preact/compat újraexportálja a React JSX névteret

További olvasnivaló