Importer dans un projet

Le client officiel de Waline fournit des fichiers en plusieurs versions. Vous pouvez importer et utiliser le client officiel de plusieurs manières.

Paquets npm

Le client officiel de Waline est publié sur npm sous le nom @waline/client ; vous pouvez l'installer avec la commande suivante :

pnpm

pnpm add -D @waline/client

npm

npm i -D @waline/client

yarn

yarn add -D @waline/client

Pour les modules exportés par @waline/client, consultez Référence du client → Fichiers.

Importation dans un projet classique

Voici un exemple d'importation et d'utilisation de @waline/client dans un projet de site web classique.

TS

import { init } from '@waline/client';
import '@waline/client/style';

init({
  el: '#waline',
  // ...
});

JS

import { init } from '@waline/client';
import '@waline/client/style';

init({
  el: '#waline',
  // ...
});

Importation dans un projet Vue

Comme @waline/client est lui-même basé sur Vue 3, nous exportons directement un composant Vue réactif.

Toutes les propriétés des composants sont réactives ; vous trouverez toutes les propriétés prises en charge dans Référence du client → Propriétés du composant.

Démo

<template>
  <Waline :serverURL="serverURL" :path="path" />
</template>
<script setup>
import { Waline } from '@waline/client/component';
import { computed } from 'vue';
import { useRoute } from 'vue-router';

import '@waline/client/style';

const serverURL = 'https://waline.vercel.app';
const path = computed(() => useRoute().path);
</script>

Comme nous utilisons un path réactif, lorsque la route change, @waline/client actualisera automatiquement l'affichage et montrera les commentaires de la route correspondante.

Importation dans un projet React

Avec un simple wrapper, vous pouvez transformer Waline en composant React :

import { type WalineInstance, type WalineInitOptions, init } from '@waline/client';
import React, { useEffect, useRef } from 'react';
import '@waline/client/style';

export type WalineOptions = Omit<WalineInitOptions, 'el'> & { path: string };

export const Waline = (props: WalineOptions) => {
  const walineInstanceRef = useRef<WalineInstance | null>(null);
  const containerRef = React.createRef<HTMLDivElement>();

  useEffect(() => {
    walineInstanceRef.current = init({
      ...props,
      el: containerRef.current,
    });

    return () => walineInstanceRef.current?.destroy();
  }, []);

  useEffect(() => {
    walineInstanceRef.current?.update(props);
  }, props);

  return <div ref={containerRef} />;
};