プラグイン機能別レシピ

はじめてのプラグイン作成では、空のフォルダから動くディレクティブまでを一続きで作りました。このページはその次の段階として、よく使う拡張ポイント別に小さなレシピをまとめています。

各レシピは独立しています。必要なものを extensions/ にコピーし、riebeckite.config.ts に登録して、ブラウザまたはビルド出力で確認してください。ここでは「何を作るか」を優先し、正確な取り決めは Plugin API に譲ります。

プラグインは信頼されたアプリケーションコードです。HTML を組み立てるレシピでは、外部から来た値を必ずエスケープします。URL を出す場合は、その用途に合った形で検証します。Riebeckite はプラグインが生成した HTML をサニタイズしません。セキュリティモデルも参照してください。

レシピ共通の準備

レシピは create-riebeckite で作ったサイトと、extensions/ に置くローカルプラグインを前提にしています。ローカルプラグインに専用のパッケージは要りません。

まず最小のプラグインを用意します。

import { definePlugin } from "@riebeckite/core";
 
export function example() {
  return definePlugin({
    name: "example",
  });
}

設定に登録します。

import { defineConfig } from "@riebeckite/core";
import { example } from "./extensions/example";
 
export default defineConfig({
  plugins: [example()],
});

各レシピは独自のファクトリを定義します。extensions/ に置き、example の代わりに登録してください。name は有効なプラグインの中で一意にしてください。プラグインのキャッシュと生成出力の名前空間は、この name が所有します。

レシピ一覧

各レシピの確認方法

静的出力に影響するレシピは npm run build で確認します。ブラウザでの動作は npm run dev で確認し、コンソールとネットワークパネルを見てください。

はじめてのプラグイン作成 のテストの考え方は、どのレシピにも当てはまります。パッケージ開発のテスト規約は テスト を参照してください。

よくある間違い

• 公開出力で manifest.entries を読む。下書きも含まれるため、publicEntries か discoverableEntries を使う。
• 担当外の対象でレンダラーが空文字を返す。null を返して別のレンダラーに任せる。
• frontmatter、ファイル、リモート応答の値をエスケープしない。
• publicConfig に秘密情報を入れる。ブラウザへ送られるのはこの値だけ。
• processedContentCache なしで変換を追加する。処理済みコンテンツを再利用できなくなる。
• エンドポイントが静的ファイルになると想定する。静的出力には生成ファイルを使う。
• 依存関係のない出力を計画する。実行時に拒否される。
• リダイレクトなしでパーマリンクを変える。古いリンクが壊れるため、公開していた URL ならリダイレクトを追加してください。
• order でケイパビリティの依存関係を覆そうとする。提供側は常に先に実行される。

関連ページ

• はじめてのプラグイン作成
• Plugin API
• Plugin System
• テスト
• セキュリティモデル
• アクセシビリティ