プロジェクトへのインポート

Waline 公式クライアントはさまざまな形式のファイルを提供しています。公式クライアントはいくつかの方法でインポートして利用できます。

NPM パッケージ

Waline 公式クライアントは @waline/client として npm で公開されています。次のコマンドでインストールできます:

pnpm

pnpm add -D @waline/client

npm

npm i -D @waline/client

yarn

yarn add -D @waline/client

@waline/client がエクスポートするモジュールについては、クライアントリファレンス → ファイル を参照してください。

通常のプロジェクトへのインポート

通常のウェブサイトプロジェクトで @waline/client をインポートして使用する例を次に示します。

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',
  // ...
});

Vue プロジェクトへのインポート

@waline/client 自体が Vue3 をベースにしているため、リアクティブな Vue コンポーネントを直接エクスポートしています。

コンポーネントのすべてのプロパティはリアクティブです。サポートされているプロパティは クライアントリファレンス → コンポーネントのプロパティ で確認できます。

デモ

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

リアクティブな path を使用しているため、ルートが変わると @waline/client が自動的に更新され、対応するルートのコメントを表示します。

React プロジェクトへのインポート

簡単なラッパーを用意すれば、Waline を 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} />;
};